♻️ refactor: correctly organize resources in the resources directory

2025-08-11 14:45:18 -03:00
parent 7bd159ff10
commit a69ec9973b
23 changed files with 344 additions and 1 deletions
@@ -0,0 +1,163 @@
+@use "sass:color";
+@use "./wal";
+@use "./colors";
+@use "./mixins";
+
+
+.popup-window.center-window .center-window-container {
+  background: colors.$bg-translucent;
+  border-radius: 24px;
+  padding: 12px;
+
+  & .big-media {
+    margin-top: 9px;
+    & .image {
+      background-size: cover;
+      background-position: center center;
+      border-radius: 10px;
+    }
+
+    & .info {
+      padding: {
+        top: 4px;
+        bottom: 6px;
+      };
+
+      & .title {
+        font-size: 16px;
+        font-weight: 700;
+      }
+
+      & .artist {
+        font-size: 14px;
+        font-weight: 600;
+        color: colors.$fg-disabled;
+      }
+    }
+
+    & .player-select {
+      @include mixins.button-reactive-secondary;
+
+      border-radius: 14px;
+
+      & revealer label {
+        margin-left: 4px;
+      }
+
+      margin-right: 2px;
+      margin-bottom: 2px;
+
+      image.arrow {
+        -gtk-icon-size: 12px;
+        margin-left: 6px;
+        margin-top: 1px;
+      }
+    }
+
+    & popover contents {
+      background: colors.$bg-primary;
+      border-radius: 16px;
+      padding: 4px;
+
+      & button {
+        padding: 6px;
+        border-radius: 12px;
+
+        & image {
+          margin-right: 4px;
+        }
+
+        &:hover {
+          background: colors.$bg-secondary;
+        }
+      }
+    }
+
+    & slider {
+      all: unset;
+      opacity: 0;
+      min-height: .6em;
+    }
+
+    & trough {
+      border-radius: 4px;
+    }
+
+    & trough highlight {
+      min-height: .65em;
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px;
+    }
+
+    & .bottom {
+      & .controls {
+        margin-top: 9px;
+
+        & button {
+          padding: 7px;
+
+          & label {
+            font-size: 9px;
+          }
+        }
+      }
+
+      & .elapsed,
+      & .length {
+        font-size: 12px;
+        color: colors.$fg-disabled;
+      }
+    }
+  }
+
+  & .left .datetime {
+    padding-bottom: 10px;
+
+    & .time {
+      font-size: 28px;
+      font-weight: 800;
+    }
+
+    & .date {
+      font-size: 14px;
+      font-weight: 500;
+      color: colors.$fg-disabled;
+    }
+  }
+
+  & calendar.view {
+    $border-radius: 14px;
+    font-weight: 600;
+    background: colors.$bg-primary;
+    border-radius: $border-radius;
+
+    & header {
+      background: colors.$bg-secondary;
+      padding: 6px;
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+
+    & grid {
+      margin: 4px;
+
+      label.day-number {
+        min-height: 22px;
+      }
+    }
+
+    & button {
+      transition: 80ms linear;
+      border-radius: 6px;
+
+      &:hover {
+        background-color: colors.$bg-tertiary;
+      }
+    }
+
+    & label:selected {
+      background: colors.$bg-secondary;
+      border-radius: 6px;
+    }
+  }
+}