Create card.css

Added a card format Still not too happy with it might work on it more
2026-09-08 16:49:19 -04:00
parent b6ff5d5ae5
commit c2f1bbda46
1 changed files with 154 additions and 0 deletions
@@ -0,0 +1,154 @@
+body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	background: transparent;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 100vh;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+}
+
+/* Main Vertical Card Container */
+.widget-container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 320px;
+	height: auto; /* Lets container naturally expand to fit all text */
+	border-radius: 20px;
+	overflow: hidden;
+	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
+	margin: 20px;
+	background: rgba(18, 18, 18, 0.88);
+	backdrop-filter: blur(25px) brightness(0.6);
+	border: 1px solid rgba(255, 255, 255, 0.12);
+	padding: 16px 16px 24px 16px; /* Extra bottom padding creates the stretched height naturally */
+}
+
+/* Blurred background layer */
+.background-blur {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	overflow: hidden;
+}
+
+.background-image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	filter: blur(35px) brightness(0.4);
+}
+
+/* Dark overlay layer */
+.overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%);
+	z-index: 1;
+	pointer-events: none;
+}
+
+/* Content layer */
+.widget-content {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px; /* Spacing between image box and song info */
+	z-index: 2;
+	width: 100%;
+}
+
+/* Large Square Album Art (Top) */
+.album-art-box {
+	flex-shrink: 0;
+	width: 100%;
+	aspect-ratio: 1 / 1;
+	border-radius: 14px;
+	overflow: hidden;
+	background: rgba(40, 40, 40, 0.6);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+}
+
+.album-art {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+/* Song Info Box (Bottom, Centered Stack) */
+.song-info {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	width: 100%;
+	min-width: 0;
+	text-align: center;
+	padding: 4px 0;
+}
+
+/* Song Title */
+.song-title {
+	font-size: 18px;
+	font-weight: 700;
+	color: #ffffff;
+	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	width: 100%;
+	letter-spacing: -0.2px;
+	line-height: 1.3;
+}
+
+.song-title::after {
+	display: none !important;
+}
+
+/* Song Artist */
+.song-artist {
+	font-size: 14px;
+	font-weight: 500;
+	color: rgba(255, 255, 255, 0.75);
+	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	width: 100%;
+	letter-spacing: -0.1px;
+	line-height: 1.3;
+}
+
+/* Smooth fade animation for updates */
+@keyframes fadeIn {
+	from {
+		opacity: 0.4;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.song-title.updating,
+.song-artist.updating {
+	animation: fadeIn 0.4s ease-in-out;
+}