Added "Compact" theme

2026-09-19 04:00:59 -04:00 · 2026-06-27 05:56:55 +10:00
parent a4e78595bd
commit f24d7fce2f
3 changed files with 433 additions and 0 deletions
@@ -0,0 +1,202 @@
+#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;
+}
+
+#song-info-container {
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+	align-items: center;
+	border-radius: 1em;
+	padding: 0.25em 0.75em;
+	background-color: #00000080;
+}
+
+/* The content sits on top */
+#song-info-wrapper {
+    position: relative; /* Keeps it in the document flow */
+    z-index: 2;         /* Sits above the background-layer */
+    width: 100%;
+    /* padding: 1em 1.75em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3em; */
+}
+
+#song-label {
+	font-size: 1em;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+	gap: 0.5em;
+}
+
+#artist-label {
+	font-weight: 700;
+}
+
+#track-label {
+	font-size: 0.8em;
+	font-weight: 400;
+	opacity: 0.7;
+}
+
+
+.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;
+}
+
+/* The background now fills the frame */
+#background-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0%;
+    height: 100%;
+    z-index: 1;
+	transition: all 1s ease;
+	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: all 1s ease-in-out;
+	opacity: 0.7;
+}
+
+@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;
+	}
+}