Added "Simple" theme

2026-09-19 04:00:59 -04:00 · 2026-06-27 04:51:28 +10:00
parent b1e6cb5d75
commit a4e78595bd
7 changed files with 441 additions and 5 deletions
@@ -0,0 +1,209 @@
+#main-wrapper {
+    width: 500px;
+    display: flex;
+    flex-direction: row;
+    /* This forces both containers to be the same height */
+    align-items: stretch; 
+    gap: 1em;
+    opacity: 0;
+	align-items: center;
+}
+
+#album-art-container {
+    /* 1. Tell it to maintain a 1:1 square ratio */
+    aspect-ratio: 1 / 1;
+    overflow: hidden;
+    border-radius: 0.25em;
+    position: relative;
+    background-size: cover;
+    background-position: center;
+}
+
+#album-art-layer,
+#album-art-transition-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    transition: opacity 0.5s ease;
+}
+
+#art-layer {
+    z-index: 1;
+	transition: all 0.5s ease;
+}
+
+#art-transition-layer {
+    z-index: 0;
+}
+
+#song-info-container {
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+#background-transition-layer {
+	z-index: 0;
+}
+
+/* The content sits on top */
+#song-info-wrapper {
+    position: relative; /* Keeps it in the document flow */
+    z-index: 2;         /* Sits above the background-layer */
+    
+    padding: 1em 1.75em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3em;
+}
+
+#track-label {
+	font-size: 1em;
+	font-weight: 600;
+}
+
+#artist-label {
+	font-size: 0.8em;
+	font-weight: 300;
+	opacity: 0.6;
+}
+
+.text-label {
+	white-space: nowrap;
+    overflow: hidden;
+    mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
+    -webkit-mask-image: linear-gradient(to right, black calc(100% - 1em), transparent 100%);
+    transition: opacity 0.25s ease-in-out;
+}
+
+@keyframes fade-in {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes fade-out {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}@keyframes slide-in-from-top {
+	0% {
+		transform: translateY(-1em);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slide-in-from-top {
+	0% {
+		transform: translateY(-1em);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slide-out-top {
+	0% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateY(-1em);
+		opacity: 0;
+	}
+}
+
+@keyframes slide-in-from-bottom {
+	0% {
+		transform: translateY(1em);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slide-out-bottom {
+	0% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateY(1em);
+		opacity: 0;
+	}
+}
+
+@keyframes slide-in-from-left {
+	0% {
+		transform: translateX(-1em);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slide-out-left {
+	0% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateX(-1em);
+		opacity: 0;
+	}
+}
+
+@keyframes slide-in-from-right {
+	0% {
+		transform: translateX(1em);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slide-out-right {
+	0% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateX(1em);
+		opacity: 0;
+	}
+}