initial commit

styles/bar.css

@@ -0,0 +1,184 @@
+#bar {
+  background-color: @surface;
+  padding: 3px;
+}
+
+#bar label {
+  font-weight: bold;
+}
+
+#bar.hidden {
+  opacity: 0;
+  padding: 3px;
+  margin-bottom: -52px;
+  transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
+}
+
+/*
+ * ── bar modules ───────────────────────────────────────────────────────
+*/
+
+#start-container,
+#center-container,
+#end-container {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+/*
+ * ── workspace ─────────────────────────────────────────────────────────
+*/
+
+#workspaces {
+  border-radius: 100px;
+  font-style: normal;
+  background: @surfaceContainer;
+  padding: 0px 10px 0px 10px;
+}
+
+/*
+ * ── Clock ─────────────────────────────────────────────────────────────
+*/
+
+#datetime {
+  background-color: @surfaceContainer;
+  border-radius: 100px;
+  padding: 8px;
+}
+
+/*
+ * ── battery ───────────────────────────────────────────────────────────
+*/
+
+#battery {
+  padding: 0 0 0 4px;
+}
+
+/*
+ * ── tray ──────────────────────────────────────────────────────────────
+*/
+
+#tray {
+  background-color: @surfaceContainer;
+  border-radius: 100px;
+  padding: 2px 10px 0px 10px;
+}
+
+#tray > button {
+  margin: 0px;
+  padding: 0px;
+}
+
+menu {
+  border: solid 1px @outlineVariant;
+  border-radius: 16px;
+  background-color: @surface;
+  padding: 6px;
+}
+
+menu > menuitem {
+  border-radius: 10px;
+  padding: 6px 10px;
+}
+
+menu > menuitem:hover {
+  background-color: @surfaceBright;
+}
+
+menu > menuitem:hover > label {
+  color: @onSurface;
+}
+
+/*
+ * ── logo ──────────────────────────────────────────────────────────────
+*/
+#logo {
+  background-color: @surfaceContainer;
+  border-radius: 100px;
+  padding: 0px 10px 0px 10px;
+}
+
+#logo-name {
+  color: darker(@primary);
+}
+
+#logo:hover {
+  background-color: @surfaceBright;
+  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2);
+}
+
+/*
+ * ── applets ───────────────────────────────────────────────────────────
+*/
+
+#applets {
+  background-color: @surfaceContainer;
+  border-radius: 100px;
+  padding: 2px 10px 2px 10px;
+  margin: 0px;
+}
+
+#applets .icon {
+  color: @onSurface;
+  font-weight: 900;
+}
+
+#applets > button {
+  color: @onSurface;
+  margin: 0px;
+  padding: 0px;
+}
+
+/*
+ * ── taskbar ───────────────────────────────────────────────────────────
+*/
+
+#taskbar {
+  border-radius: 100px;
+  color: @onSurface;
+  background: @surfaceContainer;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+#taskbar > button.activated {
+  border-radius: 100px;
+  background: @surfaceVariant;
+}
+
+#taskbar > button:hover {
+  background: @surfaceBright;
+}
+
+#taskbar > button {
+  padding: 0px 4px;
+  margin: 4px 0px;
+  border-radius: 100px;
+  border: 0px;
+}
+
+#taskbar > button:last-child {
+  margin-right: 0px;
+}
+
+#progress {
+  color: lighter(@outlineVariant);
+  border: 1px solid @primary;
+}
+
+#recording-indicator {
+  padding: 6px 12px 6px 12px;
+  border-radius: 99px;
+}
+
+#recording-indicator {
+  animation: error 0.8s linear infinite alternate;
+}
+
+@keyframes error {
+  to {
+    background-color: @onError;
+  }
+}

styles/launcher.css

@@ -0,0 +1,327 @@
+/*
+ * ── launcher ──────────────────────────────────────────────────────────
+*/
+
+#launcher {
+  margin: 18px;
+  border: 1px solid @outlineVariant;
+  background-color: @surface;
+  border-radius: 24px;
+  padding: 18px;
+  transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
+}
+
+#launcher entry {
+  transition: all 0.1s ease;
+  border-radius: 11px;
+  padding: 10px;
+  margin: 12px;
+  box-shadow: inset 0 0 0 1px @outlineVariant;
+}
+
+#launcher-content.wallpapers {
+  padding: 16px;
+  min-height: 420px;
+  min-width: 620px;
+}
+
+#launcer-content.cliphist {
+  min-height: 420px;
+}
+
+#launcher-content.bluetooth {
+  min-height: 464px;
+  min-width: 464px;
+}
+
+#launcher-content.power {
+  min-height: 52px;
+}
+
+#launcher-content {
+  min-width: 420px;
+}
+
+#app-launcher,
+#wallpapers,
+#todo,
+#bluetooth,
+#sh,
+#cliphist,
+#emoji,
+#powermenu {
+  transition: all 0.25s cubic-bezier(0.5, 0.25, 0, 1);
+}
+
+#toggle-launcher-button {
+  background-color: @secondaryContainer;
+  color: @onSecondaryContainer;
+  margin: 11px;
+  margin-left: 0px;
+  min-width: 54px;
+  min-height: 44px;
+  border-radius: 100%;
+}
+
+#clear-launcher-button {
+  background-color: @secondaryContainer;
+  color: @onSecondaryContainer;
+  margin: 11px;
+  margin-left: 0px;
+  min-width: 44px;
+  min-height: 44px;
+  border-radius: 100%;
+}
+
+/*
+ * ── applauncher ───────────────────────────────────────────────────────
+*/
+
+#launcher-app {
+  border-radius: 16px;
+  padding: 16px;
+  transition: padding 0.25s cubic-bezier(0.5, 0.25, 0, 1);
+}
+
+#launcher-app:hover image,
+#launcher-app:active image,
+#launcher-app:selected image,
+#launcher-app.selected image,
+#launcher-app:focus image {
+  -gtk-icon-shadow: 2px 2px @primary;
+}
+
+#launcher-app:hover,
+#launcher-app:active,
+#launcher-app.selected,
+#launcher-app:selected,
+#launcher-app:focus {
+  text-shadow: 2pt 2pt 2pt @primary;
+}
+
+#launcher-app-icon {
+  margin-right: 8px;
+}
+
+/*
+ * ── wallpaper ─────────────────────────────────────────────────────────
+*/
+
+#wallpaper-icons:selected {
+  background-color: @surfaceBright;
+  border-radius: 8px;
+}
+
+#wallpaper-icons:hover {
+  background-color: @surfaceBright;
+  border-radius: 8px;
+}
+
+#dropdown-box {
+  background-color: @surface;
+  box-shadow: inset 0 0 0 1px @outlineVariant;
+  border-radius: 11px;
+  padding: 10px;
+  margin: 12px;
+}
+
+#scheme-dropdown {
+  font-weight: bold;
+}
+
+/*
+ * ── emoji ─────────────────────────────────────────────────────────────
+*/
+
+#launcher button#emoji-item {
+  border-radius: 11px;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  padding: 0px;
+}
+
+#launcher button#emoji-item label {
+  font-size: 24px;
+}
+
+#launcher button#emoji-item:hover,
+#launcher button#emoji-item:focus {
+  text-shadow: 2px 2px 2px @primary;
+}
+
+/*
+ * ── powermenu ─────────────────────────────────────────────────────────
+*/
+
+#powermenu-button {
+  border-radius: 20px;
+  padding: 20px;
+}
+
+#powermenu-button:hover,
+#powermenu-button:focus {
+  background-color: @surfaceBright;
+}
+
+#powermenu-button:active {
+  background-color: @primary;
+}
+
+/*
+ * ── cliphist ──────────────────────────────────────────────────────────
+*/
+#cliphist-history {
+  min-height: 420px;
+}
+
+#launcher button#clip-img-item {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 8px;
+  min-width: 70px;
+  min-height: 70px;
+}
+
+#launcher button#clip-img-item:hover,
+#launcher button#clip-img-item:focus {
+  box-shadow: 2px 2px 2px @primary;
+}
+
+#launcher button#clip-item {
+  border-radius: 11px;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  padding: 6px;
+}
+
+#launcher button#clip-item {
+  font-size: 30px;
+}
+
+#launcher button#clip-item:hover,
+#launcher button#clip-item:focus {
+  text-shadow: 2px 2px 2px @primary;
+}
+
+/*
+ * ── todo ──────────────────────────────────────────────────────────────
+*/
+#todo-content {
+  min-height: 250px;
+}
+
+#todo-launcher {
+  background-color: @surface;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+#todo-item {
+  padding: 8px;
+  border-radius: 4px;
+  background-color: alpha(@surface, 0.8);
+}
+
+#todo-label {
+  color: @primary;
+}
+
+#todo-label-completed {
+  color: alpha(@outlineVariant, 0.5);
+  text-decoration: line-through;
+}
+
+#delete-button {
+  color: @error;
+}
+
+/*
+ * ── sh runner ─────────────────────────────────────────────────────────
+*/
+
+#launcher button#sh-item {
+  border-radius: 11px;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  padding: 0px;
+}
+
+#launcher button#sh-item {
+  font-size: 24px;
+}
+
+#launcher button#sh-item:hover,
+#launcher button#sh-item:focus {
+  text-shadow: 2px 2px 2px @primary;
+}
+
+/*
+ * ── bluetooth ─────────────────────────────────────────────────────────
+*/
+
+#bluetooth-header {
+  background-color: @surfaceContainer;
+  padding: 4px;
+  border-radius: 20px;
+}
+
+#bluetooth-device {
+  background-color: @secondaryContainer;
+  border-radius: 16px;
+  padding: 4px;
+  margin-bottom: 4px;
+}
+
+#bluetooth-scan,
+#bluetooth-toggle {
+  background-color: @secondaryContainer;
+  margin-left: 0px;
+  min-width: 44px;
+  min-height: 44px;
+  border-radius: 100%;
+}
+
+#bluetooth-scan:hover,
+#bluetooth-toggle:hover {
+  background-color: @surfaceBright;
+}
+
+#bluetooth-scan label,
+#bluetooth-toggle label {
+  font-weight: bold;
+}
+
+#bluetooth-text,
+#bluetooth-section {
+  font-weight: bold;
+}
+
+#bluetooth-text {
+  color: @primary;
+}
+
+#bluetooth-connection {
+  font-size: 20px;
+}
+
+#bluetooth-connect {
+  background-color: @surface;
+  border-radius: 16px;
+  padding: 8px 16px;
+}
+
+#bluetooth-connect:hover {
+  background-color: @surfaceBright;
+}
+
+#bluetooth-paired,
+#bluetooth-available {
+  background-color: @surfaceContainer;
+  padding: 4px;
+  border-radius: 20px;
+  min-height: 200px;
+}

styles/main.css

@@ -0,0 +1,69 @@
+@import url(../../.cache/material/colors.css);
+@import "./bar.css";
+@import "./notification.css";
+@import "./osd.css";
+@import "./launcher.css";
+
+* {
+  all: unset;
+  color: @foreground;
+  font-size: 16px;
+  font-family: "Product Sans", Roboto, "Font Awesome 6 Free", Helvetica, Arial,
+    sans-serif;
+}
+
+/*
+ * ── corner ────────────────────────────────────────────────────────────
+*/
+
+#corner {
+  background-color: @surface;
+  border-radius: 0;
+}
+
+#corner-container {
+  min-width: 20px;
+  min-height: 20px;
+}
+
+/*
+ * ── tooltip ───────────────────────────────────────────────────────────
+*/
+
+tooltip {
+  background-color: @surfaceContainer;
+  border-radius: 10px;
+  padding: 6px 10px;
+  outline: none;
+  border: none;
+  box-shadow: none;
+  animation: tooltipShow 0.25s cubic-bezier(0.5, 0.25, 0, 1);
+}
+
+tooltip label {
+  color: @onSurface;
+  outline: none;
+  border: none;
+  box-shadow: none;
+  font-weight: normal;
+}
+
+@keyframes tooltipShow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/*
+ * ── icon ──────────────────────────────────────────────────────────────
+*/
+
+#material_icon,
+#material_icon * {
+  all: unset;
+  font-family: "Material Symbols Outlined", "Material Symbols Sharp";
+}

styles/notification.css

@@ -0,0 +1,60 @@
+#notification {
+  padding: 16px;
+  border: solid 1px @outlineVariant;
+  border-radius: 20px;
+  margin-bottom: 12px;
+  background-color: @surfaceContainerLow;
+  min-width: 350px;
+}
+
+.notification-header .summary {
+  font-size: 0.92rem;
+  font-weight: bold;
+}
+
+.notification-body .body {
+  color: darker(@foreground);
+  font-weight: 600;
+  font-size: 0.92rem;
+}
+
+#notification .close-button {
+  border-radius: 100px;
+}
+
+#notification .close-button:hover {
+  background: alpha(@foreground, 0.2);
+  transition: background 0.15s ease-in-out;
+  border-radius: 100px;
+}
+
+#notification-action-button button.start-action {
+  margin-left: 0;
+}
+
+#notification-action-button button.end-action {
+  margin-right: 0;
+}
+
+#notification-action-buttons button {
+  padding: 0.6rem;
+  font-weight: 600;
+  border-radius: 100px;
+  background-color: transparent;
+}
+#notification-action-buttons button:hover {
+  background-color: lighter(@outlineVariant);
+}
+
+#notification-icon {
+  margin-right: 5px;
+}
+
+.image {
+  border-radius: 30px;
+}
+
+#notification-circular-progress-bar {
+  border: solid 0px @outlineVariant;
+  color: transparent;
+}

styles/osd.css

@@ -0,0 +1,42 @@
+#osd {
+  background: @surfaceContainer;
+  padding: 10px 4px 10px 4px;
+  border-radius: 14px;
+  margin-bottom: 16px;
+  min-width: 190px;
+}
+
+#osd scale {
+  min-width: 150px;
+}
+
+#osd slider {
+  color: @onPrimary;
+  background-color: @primary;
+  background-size: 20px 20px;
+  min-width: 5px;
+  min-height: 14px;
+  border-radius: 100px;
+  padding: 0px;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: -16px;
+  margin-bottom: -16px;
+  box-shadow:
+    -4px 0px 0px 1px @surfaceContainer,
+    4px 0px 0px 1px @surfaceContainer;
+}
+
+#osd trough {
+  background: @secondaryContainer;
+  min-height: 10px;
+  margin-right: 4px;
+  border-radius: 100px;
+}
+
+#osd highlight {
+  border-radius: 100px 0px 0px 100px;
+  background: @primary;
+}