feat(update): huge changes
This commit is contained in:
sankalp committed
1 parent
2b044338b9
commit
aa9eebb9e7
98 files changed
+9636
-5575
No files matched your search
+130
-285
@@ -1,254 +1,107 @@
|
||||
#bar {
|
||||
padding: 0px 7px 0px 7px;
|
||||
padding: 0px 5px 0px 5px;
|
||||
margin: 1px;
|
||||
transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
background-color: var(--surface);
|
||||
/* Bar background */
|
||||
}
|
||||
|
||||
#bar.start-container {
|
||||
#start-container,
|
||||
#center-container,
|
||||
#end-container {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
|
||||
#bar.end-container {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
border-bottom-left-radius: 15px;
|
||||
}
|
||||
|
||||
#center-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#bar,
|
||||
#bar-corner * {
|
||||
background-color: lighter(@background);
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
#bar.hidden {
|
||||
opacity: 0;
|
||||
transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
}
|
||||
|
||||
#bar.visible {
|
||||
opacity: 1;
|
||||
transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* ── button bar ────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#button-bar {
|
||||
background-color: @surfaceContainer;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 1px 0px 1px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
#button-bar-label {
|
||||
color: @primary;
|
||||
font-size: 20px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
#button-bar:hover #button-bar-label {
|
||||
background-color: @surfaceBright;
|
||||
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#button-bar:active #button-bar-label {
|
||||
color: @shadow;
|
||||
background-color: @primary;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── workspace ─────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
/**
|
||||
* ── Workspace ─────────────────────────────────────────────────────────
|
||||
*/
|
||||
#workspaces {
|
||||
font-style: normal;
|
||||
background: @surfaceContainer;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
background-color: var(--surface-container);
|
||||
padding: 4px;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── update ────────────────────────────────────────────────────────────
|
||||
*/
|
||||
/**
|
||||
* ── Update ────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#update {
|
||||
background-color: var(--surface-container);
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
border-radius: 8px;
|
||||
padding: 1px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
#update:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#update:active {
|
||||
color: var(--shadow);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#update-icon {
|
||||
color: @primary;
|
||||
font-size: 22px;
|
||||
color: var(--primary);
|
||||
font-size: 20px;
|
||||
padding: 1px;
|
||||
border-radius: 11px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
#updated-icon {
|
||||
color: @primary;
|
||||
color: var(--primary);
|
||||
font-size: 20px;
|
||||
padding: 4px;
|
||||
border-radius: 99px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
#update-label {
|
||||
color: @primary;
|
||||
color: var(--primary);
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 0px;
|
||||
margin-right: 4px;
|
||||
border-radius: 11px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
/*
|
||||
/**
|
||||
* ── Clock ─────────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
*/
|
||||
#datetime {
|
||||
background-color: @surfaceContainer;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
background-color: var(--surface-container);
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── battery ───────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#battery {
|
||||
background-color: @surfaceContainer;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
#battery-circle {
|
||||
color: @surfaceBright;
|
||||
border: 3px solid @primary;
|
||||
}
|
||||
|
||||
#battery-circle.alert {
|
||||
border: 2px solid @error;
|
||||
}
|
||||
|
||||
#battery-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#battery-icon.alert {
|
||||
color: @onError;
|
||||
}
|
||||
|
||||
#battery-save,
|
||||
#battery-balanced,
|
||||
#battery-performance {
|
||||
min-width: 30px;
|
||||
min-height: 28px;
|
||||
margin: 2px 0px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
#battery-save-label,
|
||||
#battery-balanced-label,
|
||||
#battery-performance-label {
|
||||
color: @outline;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#battery-save:hover,
|
||||
#battery-balanced:hover,
|
||||
#battery-performance:hover {
|
||||
background-color: @surfaceBright;
|
||||
}
|
||||
|
||||
#battery-save:hover #battery-save-label,
|
||||
#battery-balanced:hover #battery-balanced-label,
|
||||
#battery-performance:hover #battery-performance-label {
|
||||
color: @primary;
|
||||
}
|
||||
|
||||
#battery-save.active,
|
||||
#battery-balanced.active,
|
||||
#battery-performance.active {
|
||||
background-color: @primary;
|
||||
}
|
||||
|
||||
#battery-save.active #battery-save-label,
|
||||
#battery-balanced.active #battery-balanced-label,
|
||||
#battery-performance.active #battery-performance-label {
|
||||
color: @shadow;
|
||||
}
|
||||
|
||||
#battery-level {
|
||||
color: @primary;
|
||||
font-weight: bold;
|
||||
margin: 0 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── metric ────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#metrics {
|
||||
background-color: @surfaceContainer;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
#metric-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#metric-circle {
|
||||
color: @surfaceBright;
|
||||
border: 3px solid @primary;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── tray ──────────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#tray-revealer {
|
||||
background-color: @surfaceContainer;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 2px 0px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
font-size: 20px;
|
||||
#datetime:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
/**
|
||||
* ── Tray ──────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#tray {
|
||||
background-color: @surfaceContainer;
|
||||
margin-top: 5px;
|
||||
margin-left: 4px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
background-color: var(--surface-container);
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
#tray > button {
|
||||
@@ -257,9 +110,9 @@
|
||||
}
|
||||
|
||||
menu {
|
||||
border: solid 1px @outlineVariant;
|
||||
border: solid 1px var(--outline-variant);
|
||||
border-radius: 16px;
|
||||
background-color: @surface;
|
||||
background-color: var(--surface);
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
@@ -269,101 +122,93 @@ menu > menuitem {
|
||||
}
|
||||
|
||||
menu > menuitem:hover {
|
||||
background-color: @surfaceBright;
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
menu > menuitem:hover > label {
|
||||
color: @onSurface;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
/*
|
||||
* ── logo ──────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#logo {
|
||||
background-color: @surfaceContainer;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
/**
|
||||
* ── Logo ──────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#button-bar {
|
||||
background-color: var(--surface-container);
|
||||
margin-top: 1px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
margin-bottom: 1px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
#logo-name {
|
||||
color: darker(@primary);
|
||||
}
|
||||
|
||||
#logo:hover {
|
||||
background-color: @surfaceBright;
|
||||
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/*
|
||||
* ── status indicator ───────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#system-indicators {
|
||||
background-color: @surfaceContainer;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 8px 0px;
|
||||
#button-bar-label {
|
||||
color: var(--primary);
|
||||
font-size: 24px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
#button-bar:hover #button-bar-label {
|
||||
background-color: var(--surface_bright);
|
||||
}
|
||||
|
||||
#button-bar:active #button-bar-label {
|
||||
color: var(--shadow);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
/**
|
||||
* ── System Indicator ─────────────────────────────────────────────────
|
||||
*/
|
||||
#system-indicator {
|
||||
background-color: var(--surface-container);
|
||||
margin-top: 1px;
|
||||
padding: 4px;
|
||||
margin-bottom: 1px;
|
||||
border-radius: 8px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
#system-indicator-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── taskbar ───────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#taskbar {
|
||||
border-radius: 100px;
|
||||
color: @onSurface;
|
||||
background: @surfaceContainer;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
#system-notif-label {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── recording indicator ───────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#recorder {
|
||||
color: @error;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0px 6px 0px;
|
||||
/**
|
||||
* ── Metric ────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#metrics {
|
||||
background-color: var(--surface-container);
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
animation: error 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes error {
|
||||
to {
|
||||
background-color: @onError;
|
||||
}
|
||||
#metrics-circle {
|
||||
color: var(--surface-bright);
|
||||
border: 3px solid var(--primary);
|
||||
}
|
||||
|
||||
#metrics-circle.bat {
|
||||
border: 3px solid var(--green);
|
||||
}
|
||||
|
||||
#metrics-circle.alert {
|
||||
border: 3px solid var(--red-dim);
|
||||
}
|
||||
|
||||
#metrics-icon {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#metrics-icon.alert {
|
||||
color: var(--red-dim);
|
||||
}
|
||||
|
||||
#metrics-level {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#metrics-sep {
|
||||
min-width: 6px;
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
:vars {
|
||||
--foreground: #dde4e2;
|
||||
--background: #0e1514;
|
||||
--cursor: #dde4e2;
|
||||
--primary: #81d5ca;
|
||||
--primary-container: #00504a;
|
||||
--on-primary: #003732;
|
||||
--on-primary-container: #9df2e6;
|
||||
--secondary: #b1ccc7;
|
||||
--on-secondary: #1c3531;
|
||||
--secondary-container: #324b48;
|
||||
--tertiary: #aec9e6;
|
||||
--tertiary-container: #2e4961;
|
||||
--on-tertiary: #163349;
|
||||
--on-tertiary-container: #cde5ff;
|
||||
--surface: #0e1514;
|
||||
--surface-container: #1a2120;
|
||||
--surface-bright: #343a39;
|
||||
--surface-variant: #3f4947;
|
||||
--surface-container-low: #161d1c;
|
||||
--on-surface: #dde4e2;
|
||||
--error: #ffb4ab;
|
||||
--error-dim: #ff8678;
|
||||
--on-error: #690005;
|
||||
--error-container: #93000a;
|
||||
--on-error-container: #ffdad6;
|
||||
--outline: #899390;
|
||||
--outline-variant: #3f4947;
|
||||
--shadow: #000000;
|
||||
--red: #ffb595;
|
||||
--red-dim: #ff9162;
|
||||
--green: #95d5a7;
|
||||
--green-dim: #70c789;
|
||||
--yellow: #b8cf84;
|
||||
--yellow-dim: #a3c15f;
|
||||
--blue: #afc6ff;
|
||||
--blue-dim: #7ca2ff;
|
||||
--magenta: #e4b7f3;
|
||||
--magenta-dim: #d48bec;
|
||||
--cyan: #80d5cf;
|
||||
--cyan-dim: #5ac8c1;
|
||||
--white: #82d3e0;
|
||||
|
||||
}
|
||||
+27
-16
@@ -5,6 +5,7 @@
|
||||
#network-button,
|
||||
#bluetooth-button,
|
||||
#night-mode-button,
|
||||
#power-profile-button,
|
||||
#dark-mode-button,
|
||||
#caffeine-button {
|
||||
border-radius: 20px;
|
||||
@@ -18,28 +19,30 @@
|
||||
|
||||
#night-mode-button,
|
||||
#dark-mode-button,
|
||||
#power-profile-button,
|
||||
#caffeine-button {
|
||||
background-color: @primary;
|
||||
background-color: var(--primary);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#night-mode-button.disabled,
|
||||
#dark-mode-button.disabled,
|
||||
#power-profile-button.disabled,
|
||||
#caffeine-button.disabled {
|
||||
background-color: @surface;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
#network-status-button,
|
||||
#network-menu-button,
|
||||
#bluetooth-status-button,
|
||||
#bluetooth-menu-button {
|
||||
background-color: @primary;
|
||||
background-color: var(--primary);
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
#network-menu-button,
|
||||
#bluetooth-menu-button {
|
||||
border-left: 1px solid @outline;
|
||||
border-left: 1px solid var(--outline);
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
@@ -49,9 +52,10 @@
|
||||
#bluetooth-menu-button:hover,
|
||||
#bluetooth-button:hover,
|
||||
#night-mode-button:hover,
|
||||
#power-profile-button:hover,
|
||||
#dark-mode-button:hover,
|
||||
#caffeine-button:hover {
|
||||
background-color: @foreground;
|
||||
background-color: var(--foreground);
|
||||
}
|
||||
|
||||
/* Estados Disabled */
|
||||
@@ -59,12 +63,12 @@
|
||||
#network-menu-button.disabled,
|
||||
#bluetooth-status-button.disabled,
|
||||
#bluetooth-menu-button.disabled {
|
||||
background-color: @surface;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
#network-menu-button.disabled,
|
||||
#bluetooth-menu-button.disabled {
|
||||
border-left: 1px solid @surfaceBright;
|
||||
border-left: 1px solid var(--surface-bright);
|
||||
}
|
||||
|
||||
#network-status-button.disabled:hover,
|
||||
@@ -72,9 +76,10 @@
|
||||
#bluetooth-status-button.disabled:hover,
|
||||
#bluetooth-menu-button.disabled:hover,
|
||||
#night-mode-button.disabled:hover,
|
||||
#power-profile-button.disabled:hover,
|
||||
#dark-mode-button.disabled:hover,
|
||||
#caffeine-button.disabled:hover {
|
||||
background-color: @surfaceBright;
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#network-status-button,
|
||||
@@ -91,36 +96,39 @@
|
||||
#bluetooth-icon,
|
||||
#night-mode-icon,
|
||||
#dark-mode-icon,
|
||||
#power-profile-icon,
|
||||
#caffeine-icon {
|
||||
color: @shadow;
|
||||
color: var(--shadow);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#network-icon.disabled,
|
||||
#bluetooth-icon.disabled,
|
||||
#night-mode-icon.disabled,
|
||||
#power-profile-icon.disabled,
|
||||
#dark-mode-icon.disabled,
|
||||
#caffeine-icon.disabled {
|
||||
color: @outline;
|
||||
color: var(--outline);
|
||||
}
|
||||
|
||||
#network-menu-label,
|
||||
#bluetooth-menu-label {
|
||||
color: @shadow;
|
||||
color: var(--shadow);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#network-menu-label.disabled,
|
||||
#bluetooth-menu-label.disabled {
|
||||
color: @outline;
|
||||
color: var(--outline);
|
||||
}
|
||||
|
||||
#network-label,
|
||||
#bluetooth-label,
|
||||
#night-mode-label,
|
||||
#power-profile-label,
|
||||
#caffeine-label,
|
||||
#dark-mode-label {
|
||||
color: @shadow;
|
||||
color: var(--shadow);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: -4px;
|
||||
@@ -129,24 +137,27 @@
|
||||
#network-label.disabled,
|
||||
#bluetooth-label.disabled,
|
||||
#night-mode-label.disabled,
|
||||
#power-profile-label.disabled,
|
||||
#dark-mode-label.disabled,
|
||||
#caffeine-label.disabled {
|
||||
color: @outline;
|
||||
color: var(--outline);
|
||||
}
|
||||
|
||||
#network-ssid,
|
||||
#bluetooth-status,
|
||||
#night-mode-status,
|
||||
#power-profile-status,
|
||||
#dark-mode-status,
|
||||
#caffeine-status {
|
||||
color: @surfaceBright;
|
||||
color: var(--surface-bright);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#network-ssid.disabled,
|
||||
#bluetooth-status.disabled,
|
||||
#night-mode-status.disabled,
|
||||
#power-profile-status.disabled,
|
||||
#dark-mode-status.disabled,
|
||||
#caffeine-status.disabled {
|
||||
color: @outline;
|
||||
color: var(--outline);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
#dock {
|
||||
background-color: var(--surface);
|
||||
padding: 8px;
|
||||
margin: 8px 8px 7px 8px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
transition: all 0.25s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
}
|
||||
|
||||
#dock.vertical {
|
||||
margin: 8px 79px 8px 8px;
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
#dock.vertical-left {
|
||||
margin: 8px 39px 8px 0px;
|
||||
border-radius: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
#dock.vertical-right{
|
||||
margin: 8px 79px 8px 8px;
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
#dock-full {
|
||||
transition: all 0.25s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#dock-full.occluded {
|
||||
@apply dock_nmargin();
|
||||
}
|
||||
|
||||
#dock-separator {
|
||||
padding: 1px;
|
||||
@apply dock_sep();
|
||||
border-radius: 16px;
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#dock-app-button {
|
||||
padding: 4px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#dock-app-button:hover,
|
||||
#dock-app-button:hover.instance {
|
||||
background-color: var(--surface-bright);
|
||||
border-top: 1px solid var(--primary);
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
#dock-app-button:active,
|
||||
#dock-app-button:active.instance {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#dock-app-button.instance {
|
||||
background: linear-gradient(to top, transparent, var(--surface-bright));
|
||||
border-bottom: 1px solid var(--surface-container);
|
||||
border-top: 1px solid var(--outline);
|
||||
padding: 3px 4px;
|
||||
}
|
||||
|
||||
#dock-corner-left {
|
||||
margin: 0 -8px 7px 0;
|
||||
}
|
||||
|
||||
#dock-corner-right {
|
||||
margin: 0 0 7px -8px;
|
||||
}
|
||||
|
||||
#dock-corner-top {
|
||||
margin: 0 79px -8px 0;
|
||||
}
|
||||
|
||||
#dock-corner-bottom {
|
||||
margin: -8px 79px 0 0;
|
||||
}
|
||||
+479
-242
@@ -7,8 +7,8 @@
|
||||
|
||||
#launcher {
|
||||
margin: 18px;
|
||||
border: 1px solid @outlineVariant;
|
||||
background-color: lighter(@background);
|
||||
border: 1px solid var(--outline-variant);
|
||||
background-color: var(--surface);
|
||||
border-radius: 24px;
|
||||
padding: 18px;
|
||||
transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
@@ -19,7 +19,7 @@
|
||||
border-radius: 11px;
|
||||
padding: 10px;
|
||||
margin: 12px;
|
||||
box-shadow: inset 0 0 0 1px @outlineVariant;
|
||||
box-shadow: inset 0 0 0 1px var(--outline-variant);
|
||||
}
|
||||
|
||||
#launcher-content.wallpapers {
|
||||
@@ -28,11 +28,6 @@
|
||||
min-width: 620px;
|
||||
}
|
||||
|
||||
.cliphist {
|
||||
min-height: 464px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.applauncher-scrolled-window {
|
||||
transition: min-height 0.2s ease;
|
||||
}
|
||||
@@ -45,9 +40,8 @@
|
||||
min-height: 464px;
|
||||
}
|
||||
|
||||
#launcher-content.todo {
|
||||
min-width: 460px;
|
||||
min-height: 300px;
|
||||
#launcher-content.tools {
|
||||
min-width: 308px;
|
||||
}
|
||||
|
||||
#launcher-content.calendar {
|
||||
@@ -59,20 +53,24 @@
|
||||
min-width: 485px;
|
||||
}
|
||||
|
||||
#app-launcher,
|
||||
#wallpapers,
|
||||
#todo,
|
||||
#bluetooth,
|
||||
#sh,
|
||||
#cliphist,
|
||||
#emoji,
|
||||
#power {
|
||||
transition: all 0.25s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
#launcher-content.power {
|
||||
min-width: 200px;
|
||||
min-height: 52px;
|
||||
}
|
||||
|
||||
#launcher-content.kanban {
|
||||
min-width: 1000px;
|
||||
min-height: 478px;
|
||||
}
|
||||
|
||||
#launcher-content.tmux {
|
||||
min-height: 220px;
|
||||
min-width: 480px;
|
||||
}
|
||||
|
||||
#scrolled-window scrollbar {
|
||||
border-radius: 10px;
|
||||
background-color: lighter(@background);
|
||||
background-color: var(--surface);
|
||||
padding: 4px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
@@ -81,85 +79,161 @@
|
||||
border-radius: 8px;
|
||||
min-width: 10px;
|
||||
min-height: 48px;
|
||||
background-color: @primary;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#config-button:active,
|
||||
#new-session-button:active {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#config-label,
|
||||
#clear-label,
|
||||
#new-session-label {
|
||||
color: var(--primary);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#config-button:active #config-label,
|
||||
#clear-button:active
|
||||
#clear-label
|
||||
#new-session-button:active
|
||||
#new-session-label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
#config-button,
|
||||
#clear-button,
|
||||
#new-session-button {
|
||||
background-color: var(--surface-variant);
|
||||
border-radius: 16px;
|
||||
padding: 8px;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
#config-button:hover,
|
||||
#config-button:focus,
|
||||
#clear-button:hover,
|
||||
#clear-button:focus,
|
||||
#new-session-button:hover,
|
||||
#new-session-button:focus {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#clear-button:active {
|
||||
background-color: var(--red-dim);
|
||||
}
|
||||
|
||||
/*
|
||||
* ── applauncher ───────────────────────────────────────────────────────
|
||||
*/
|
||||
#app-desc {
|
||||
color: var(--outline);
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#launcher-app {
|
||||
#slot-button {
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
min-height: 0;
|
||||
transition: padding 0.25s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
animation: loadSlot 0.5s ease;
|
||||
}
|
||||
|
||||
#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;
|
||||
@keyframes loadSlot {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#launcher-app:hover,
|
||||
#launcher-app:active,
|
||||
#launcher-app.selected,
|
||||
#launcher-app:selected,
|
||||
#launcher-app:focus {
|
||||
text-shadow: 2pt 2pt 2pt @primary;
|
||||
#slot-button:hover,
|
||||
#slot-button:focus,
|
||||
#slot-button:selected,
|
||||
#slot-button.selected {
|
||||
background-color: var(--surface-bright);
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
#launcher-app-icon {
|
||||
#slot-button:active {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#app-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#app-label {
|
||||
color: var(--foreground);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#slot-button:hover #app-label,
|
||||
#slot-button:focus #app-label,
|
||||
#slot-button:selected #app-label,
|
||||
#slot-button.selected #app-label {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#slot-button:active #app-label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
/*
|
||||
* ── wallpaper ─────────────────────────────────────────────────────────
|
||||
*/
|
||||
#search-entry-walls {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
#entry-custom-color {
|
||||
min-width: 10px;
|
||||
min-width: 512px;
|
||||
}
|
||||
|
||||
#wallpaper-icons:selected {
|
||||
background-color: @surfaceBright;
|
||||
border-radius: 8px;
|
||||
background-color: var(--surface-bright);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
#wallpaper-icons:hover {
|
||||
background-color: @surfaceBright;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#dropdown-box {
|
||||
background-color: lighter(@background);
|
||||
box-shadow: inset 0 0 0 1px @outlineVariant;
|
||||
border-radius: 11px;
|
||||
padding: 10px;
|
||||
margin: 12px;
|
||||
background-color: var(--surface-bright);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
#scheme-dropdown {
|
||||
background-color: var(--surface-container);
|
||||
padding: 8px;
|
||||
border-radius: 11px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#scheme-dropdown > * > * {
|
||||
font-weight: bold;
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
#scheme-dropdown.box button.box.cellview {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#scheme-dropdown.box button.box.cellview:selected {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
/* Customize the overall switch appearance */
|
||||
#materialyoucolor-switcher {
|
||||
#matugen-switcher {
|
||||
min-width: 40px;
|
||||
min-height: 20px;
|
||||
background-color: @surface;
|
||||
background-color: var(--surface-variant);
|
||||
border-radius: 15px;
|
||||
padding: 2px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Style the switch's slider */
|
||||
#materialyoucolor-switcher slider {
|
||||
#matugen-switcher slider {
|
||||
background-color: var(--primary);
|
||||
border-radius: 16px;
|
||||
min-width: 20px;
|
||||
@@ -170,13 +244,17 @@
|
||||
}
|
||||
|
||||
/* When the switch is active (checked) */
|
||||
#materialyoucolor-switcher:checked {
|
||||
background-color: @primary;
|
||||
#matugen-switcher:checked {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
/* Optional: additional styling for the slider when active */
|
||||
#materialyoucolor-switcher:checked slider {
|
||||
background-color: @shadow;
|
||||
#matugen-switcher:checked slider {
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
#matugen-switcher:checked image {
|
||||
color: var(--surface);
|
||||
}
|
||||
|
||||
#mat-label {
|
||||
@@ -188,21 +266,107 @@
|
||||
* ── emoji ─────────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#launcher button#emoji-item {
|
||||
border-radius: 11px;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
padding: 0px;
|
||||
#emoji #search-entry {
|
||||
font-weight: bold;
|
||||
background-color: var(--surface);
|
||||
color: var(--foreground);
|
||||
border-radius: 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#launcher button#emoji-item label {
|
||||
#emoji #search-entry selection {
|
||||
color: var(--background);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#emoji #close-button {
|
||||
background-color: var(--surface);
|
||||
border-radius: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#emoji #close-button:hover,
|
||||
#emoji #close-button:focus {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#emoji #close-button:active {
|
||||
background-color: var(--red-dim);
|
||||
}
|
||||
|
||||
#emoji #close-label {
|
||||
color: var(--red-dim);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#launcher button#emoji-item:hover,
|
||||
#launcher button#emoji-item:focus {
|
||||
text-shadow: 2px 2px 2px @primary;
|
||||
#emoji #close-button:active #close-label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
#emoji #emoji-slot-button {
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
transition: padding 0.1s ease;
|
||||
}
|
||||
|
||||
@keyframes loadEmojiSlot {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#emoji #emoji-slot-button:hover,
|
||||
#emoji #emoji-slot-button:focus,
|
||||
#emoji #emoji-slot-button:selected,
|
||||
#emoji #emoji-slot-button.selected {
|
||||
background-color: var(--surface-bright);
|
||||
text-shadow: 0 0 4px var(--shadow);
|
||||
animation: highlightEmojiSlot 0.25s cubic-bezier(0, 0, 0.5, 1);
|
||||
}
|
||||
|
||||
@keyframes highlightEmojiSlot {
|
||||
0% {
|
||||
padding: 16px;
|
||||
text-shadow: 0 4px 4px var(--shadow);
|
||||
}
|
||||
|
||||
50% {
|
||||
padding: 8px 16px 24px 16px;
|
||||
text-shadow: 0 12px 4px var(--shadow);
|
||||
}
|
||||
|
||||
100% {
|
||||
padding: 16px;
|
||||
text-shadow: 0 4px 4px var(--shadow);
|
||||
}
|
||||
}
|
||||
|
||||
#emoji #emoji-slot-button:active {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#emoji #emoji-name-label {
|
||||
color: var(--foreground);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#emoji #emoji-slot-button:hover #emoji-name-label,
|
||||
#emoji #emoji-slot-button:focus #emoji-name-label,
|
||||
#emoji #emoji-slot-button:selected #emoji-name-label,
|
||||
#emoji #emoji-slot-button.selected #emoji-name-label {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#emoji #emoji-slot-button:active #emoji-name-label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
#emoji #emoji-char-label {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -213,141 +377,37 @@
|
||||
border-radius: 20px;
|
||||
min-width: 52px;
|
||||
min-height: 52px;
|
||||
padding: 20px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#power-menu-button label {
|
||||
font-size: 49px;
|
||||
color: @foreground;
|
||||
font-size: 35px;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
#power-menu-button:hover,
|
||||
#power-menu-button:focus {
|
||||
background-color: @surfaceBright;
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#power-menu-button:hover label,
|
||||
#power-menu-button:focus label {
|
||||
color: @primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#power-menu-button:active {
|
||||
background-color: @primary;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#power-menu-button:active label {
|
||||
color: @shadow;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── cliphist ──────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
button#clip-img-item {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 8px;
|
||||
min-width: 70px;
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
button#clip-img-item:hover,
|
||||
button#clip-img-item:focus {
|
||||
box-shadow: 2px 2px 2px @primary;
|
||||
}
|
||||
|
||||
button#clip-item {
|
||||
border-radius: 11px;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
button#clip-item {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
button#clip-item:hover,
|
||||
button#clip-item:focus {
|
||||
text-shadow: 2px 2px 2px @primary;
|
||||
}
|
||||
|
||||
#clear-button {
|
||||
margin: 11px;
|
||||
margin-left: 0px;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
#clear-button:hover {
|
||||
background-color: mix(@onSurface, @surface, 0.92);
|
||||
}
|
||||
|
||||
#cliphist-clear-button {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── todo ──────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#todo-launcher {
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#todo-item {
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: alpha(@background, 0.3);
|
||||
}
|
||||
|
||||
#todo-label {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#todo-label-completed {
|
||||
color: alpha(@outlineVariant, 1);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
#add-button {
|
||||
margin: 11px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
#delete-button,
|
||||
#checkbox {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
#add-button:hover,
|
||||
#delete-button:hover,
|
||||
#checkbox:hover {
|
||||
background-color: mix(@onSurface, @surface, 0.92);
|
||||
}
|
||||
|
||||
#todo-add-button,
|
||||
#todo-checkbox,
|
||||
#todo-delete-button {
|
||||
font-size: 24px;
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
/*
|
||||
* ── sh runner ─────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#launcher button#sh-item {
|
||||
#sh-item {
|
||||
border-radius: 11px;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
@@ -355,13 +415,13 @@ button#clip-item:focus {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#launcher button#sh-item {
|
||||
#sh-item {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#launcher button#sh-item:hover,
|
||||
#launcher button#sh-item:focus {
|
||||
text-shadow: 2px 2px 2px @primary;
|
||||
#sh-item:hover,
|
||||
#sh-item:focus {
|
||||
text-shadow: 2px 2px 2px var(--primary);
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -369,35 +429,33 @@ button#clip-item:focus {
|
||||
*/
|
||||
|
||||
#bluetooth-header {
|
||||
background-color: @surfaceContainer;
|
||||
border: 2px solid var(--shadow);
|
||||
padding: 4px;
|
||||
border-radius: 20px;
|
||||
background-color: var(--surface-container);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#bluetooth-device {
|
||||
background-color: @secondaryContainer;
|
||||
border-radius: 16px;
|
||||
border: 2px solid var(--shadow);
|
||||
background-color: var(--surface-container);
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#bluetooth-scan-button,
|
||||
#bluetooth-toggle-button {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#bluetooth-scan,
|
||||
#bluetooth-toggle {
|
||||
background-color: @secondaryContainer;
|
||||
margin-left: 0px;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
border-radius: 100%;
|
||||
#bluetooth-back {
|
||||
background-color: var(--surface);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#bluetooth-back-label {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#bluetooth-scan:hover,
|
||||
#bluetooth-toggle:hover {
|
||||
background-color: @surfaceBright;
|
||||
#bluetooth-back:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#bluetooth-scan label,
|
||||
@@ -410,8 +468,10 @@ button#clip-item:focus {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#bluetooth-text {
|
||||
color: @primary;
|
||||
#bluetooth-section {
|
||||
background-color: var(--surface-container);
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#bluetooth-connection {
|
||||
@@ -419,20 +479,54 @@ button#clip-item:focus {
|
||||
}
|
||||
|
||||
#bluetooth-connect {
|
||||
background-color: lighter(@background);
|
||||
border-radius: 16px;
|
||||
padding: 8px 16px;
|
||||
background-color: var(--surface);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#bluetooth-connect:hover {
|
||||
background-color: @surfaceBright;
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#bluetooth-paired,
|
||||
#bluetooth-available {
|
||||
background-color: @surfaceContainer;
|
||||
padding: 4px;
|
||||
background-color: var(--surface-container);
|
||||
border-radius: 20px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#bt-sep {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
#bluetooth-scan-label {
|
||||
font-size: 20px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#bluetooth-scan.scanning {
|
||||
animation: blink 0.5s ease infinite;
|
||||
}
|
||||
|
||||
#bluetooth-scan-label.scanning {
|
||||
animation: blink 0.5s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
background-color: var(--blue);
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: var(--shadow);
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: var(--blue);
|
||||
color: var(--shadow);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -440,13 +534,13 @@ button#clip-item:focus {
|
||||
*/
|
||||
|
||||
#wifi-header {
|
||||
background-color: @surfaceContainer;
|
||||
background-color: var(--surface-container);
|
||||
padding: 4px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
#wifi-device {
|
||||
background-color: @secondaryContainer;
|
||||
background-color: var(--secondary-container);
|
||||
border-radius: 16px;
|
||||
padding: 4px;
|
||||
margin-bottom: 4px;
|
||||
@@ -458,7 +552,7 @@ button#clip-item:focus {
|
||||
|
||||
#wifi-scan,
|
||||
#wifi-toggle {
|
||||
background-color: @secondaryContainer;
|
||||
background-color: var(--surface-container);
|
||||
margin-left: 0px;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
@@ -467,7 +561,7 @@ button#clip-item:focus {
|
||||
|
||||
#wifi-scan:hover,
|
||||
#wifi-toggle:hover {
|
||||
background-color: @surfaceBright;
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#wifi-scan label,
|
||||
@@ -481,7 +575,7 @@ button#clip-item:focus {
|
||||
}
|
||||
|
||||
#wifi-text {
|
||||
color: @primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#wifi-connection {
|
||||
@@ -489,17 +583,17 @@ button#clip-item:focus {
|
||||
}
|
||||
|
||||
#wifi-connect {
|
||||
background-color: lighter(@background);
|
||||
background-color: var(--surface);
|
||||
border-radius: 16px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
#wifi-connect:hover {
|
||||
background-color: @surfaceBright;
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#wifi-available {
|
||||
background-color: @surfaceContainer;
|
||||
/*background-color: var(--surface-container);*/
|
||||
padding: 4px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
@@ -509,11 +603,12 @@ button#clip-item:focus {
|
||||
*/
|
||||
|
||||
#header {
|
||||
border-radius: 16px;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#weekday-row {
|
||||
background-color: var(--surface);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
@@ -526,16 +621,16 @@ button#clip-item:focus {
|
||||
|
||||
#day-label,
|
||||
#day-empty {
|
||||
min-width: 42px;
|
||||
min-height: 36px;
|
||||
min-width: 38px;
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
#day-empty {
|
||||
color: @surfaceBright;
|
||||
color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#weekday-label {
|
||||
color: @primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#calendar-grid {
|
||||
@@ -544,47 +639,189 @@ button#clip-item:focus {
|
||||
}
|
||||
|
||||
#day-label.current-day {
|
||||
background-color: @primary;
|
||||
color: @onPrimary;
|
||||
min-height: 36px;
|
||||
min-width: 42px;
|
||||
border-radius: 99px;
|
||||
background-color: var(--primary);
|
||||
color: var(--shadow);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
#prev-month-button,
|
||||
#next-month-button {
|
||||
background-color: var(--surface);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#prev-month-button:hover,
|
||||
#next-month-button:hover {
|
||||
background-color: @surfaceBright;
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#prev-month-button:active,
|
||||
#next-month-button:active {
|
||||
background-color: @primary;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#month-button-label {
|
||||
color: @primary;
|
||||
color: var(--primary);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#prev-month-button:active #month-button-label,
|
||||
#next-month-button:active #month-button-label {
|
||||
color: @surface;
|
||||
}
|
||||
|
||||
#day-box {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
#prev-month-day,
|
||||
#next-month-day {
|
||||
color: mix(@onSurfaceVariant, transparent, 0.6);
|
||||
color: mix(var(--on-surface), transparent, 0.6);
|
||||
}
|
||||
|
||||
/*
|
||||
* ── tools ─────────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#toolbox-button {
|
||||
border-radius: 20px;
|
||||
min-width: 52px;
|
||||
min-height: 52px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#toolbox-button label {
|
||||
font-size: 35px;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
#toolbox-button.recording label {
|
||||
color: var(--red-dim);
|
||||
}
|
||||
|
||||
#toolbox-button:hover,
|
||||
#toolbox-button:focus {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#toolbox-button:hover label,
|
||||
#toolbox-button:focus label {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#toolbox-button.recording:hover label,
|
||||
#toolbox-button.recording:focus label {
|
||||
color: var(--red-dim);
|
||||
}
|
||||
|
||||
#toolbox-button:active {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#toolbox-button:active label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
#toolbox-button.recording:active {
|
||||
background-color: var(--red-dim);
|
||||
}
|
||||
|
||||
#toolbox-button.recording:active label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
#tool-sep {
|
||||
min-width: 4px;
|
||||
min-height: 4px;
|
||||
margin: 0px 4px;
|
||||
border-radius: 16px;
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
/*
|
||||
* ── kanban ────────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#kanban-header {
|
||||
border: 2px solid var(--outline);
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#column-header {
|
||||
padding: 4px;
|
||||
font-weight: bold;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#kanban-note {
|
||||
background-color: var(--surface-container);
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#kanban-row:first-child > * > * {
|
||||
border-radius: 16px 16px 4px 4px;
|
||||
}
|
||||
|
||||
#kanban-row:last-child > * > * {
|
||||
border-radius: 4px 4px 16px 16px;
|
||||
}
|
||||
|
||||
#inline-editor {
|
||||
border: 2px solid var(--surface-bright);
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#kanban-btn,
|
||||
#kanban-btn-add {
|
||||
background-color: var(--surface-container);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#kanban-btn {
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
#kanban-btn:hover,
|
||||
#kanban-btn-add:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#kanban-btn:active,
|
||||
#kanban-btn-add:active {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#kanban-btn-label,
|
||||
#kanban-btn-neg {
|
||||
font-size: 20px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#kanban-btn-neg {
|
||||
color: var(--red-dim);
|
||||
}
|
||||
|
||||
#kanban-btn:active #kanban-btn-label,
|
||||
#kanban-btn-add:active #kanban-btn-label {
|
||||
color: var(--surface);
|
||||
}
|
||||
|
||||
/* tmux */
|
||||
#no-notif,
|
||||
#no-tmux,
|
||||
#no-clip {
|
||||
font-size: 96px;
|
||||
color: var(--surface-container);
|
||||
}
|
||||
|
||||
#clip-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#tmux-icon,
|
||||
#clip-icon {
|
||||
font-size: 20px;
|
||||
color: var(--primary);
|
||||
}
|
||||
+15
-40
@@ -1,26 +1,27 @@
|
||||
@import url(../../.cache/material/colors.css);
|
||||
@import "./colors.css";
|
||||
@import "./bar.css";
|
||||
@import "./notification.css";
|
||||
@import "./osd.css";
|
||||
@import "./launcher.css";
|
||||
@import "./dashboard.css";
|
||||
@import "./dock.css";
|
||||
@import "./notif_center.css";
|
||||
|
||||
* {
|
||||
all: unset;
|
||||
color: @foreground;
|
||||
font-size: 16px;
|
||||
font-family: "Chakra Petch";
|
||||
color: var(--foreground);
|
||||
font-size: 15px;
|
||||
font-family: "Monaspace Radon";
|
||||
}
|
||||
|
||||
/*
|
||||
* ── tooltip ───────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
tooltip {
|
||||
border: solid 1px;
|
||||
border-radius: 10px;
|
||||
border-color: @surface;
|
||||
background-color: @shadow;
|
||||
border-radius: 16px;
|
||||
border-color: var(--outline);
|
||||
background-color: var(--surface);
|
||||
animation: tooltipShow 0.25s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
}
|
||||
|
||||
@@ -39,38 +40,12 @@ tooltip > * {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── dock ──────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#dock-icon {
|
||||
padding: 0px 2px 0px 2px;
|
||||
#corner {
|
||||
background-color: var(--surface);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#dock {
|
||||
padding: 10px;
|
||||
background-color: alpha(@shadow, 0.5);
|
||||
border: 0.5px solid alpha(@outlineVariant, 0.4);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
#dock-separator {
|
||||
border-right: 1px solid alpha(@foreground, 0.5);
|
||||
}
|
||||
|
||||
#dock-app-button {
|
||||
padding: 2px;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.show-dock {
|
||||
opacity: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hide-dock {
|
||||
opacity: 1;
|
||||
margin: -80px;
|
||||
#corner-container {
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
#nhh {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#nhh-button {
|
||||
border-radius: 8px;
|
||||
background-color: var(--surface);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#nhh-button:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#nhh-button-label {
|
||||
color: var(--red-dim);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#dnd-label {
|
||||
font-size: 20px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
#no-notifications-label {
|
||||
font-size: 96px;
|
||||
color: var(--surface-container);
|
||||
}
|
||||
+16
-13
@@ -3,26 +3,27 @@
|
||||
}
|
||||
|
||||
#notification-action-buttons button {
|
||||
background-color: @surfaceContainer;
|
||||
background-color: var(--surface);
|
||||
padding: 8px;
|
||||
border-radius: 20px;
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
#notification-action-buttons button:hover {
|
||||
background-color: @surfaceBright;
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#notification-action-buttons button:active {
|
||||
background-color: @primary;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#notification-action-buttons button:active #button-label {
|
||||
color: @shadow;
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
#notification-image image {
|
||||
border-radius: 16px;
|
||||
color: @onSurface;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
#notification-summary,
|
||||
@@ -32,11 +33,11 @@
|
||||
|
||||
#notification-summary {
|
||||
font-weight: bold;
|
||||
color: @primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#notification-app-name {
|
||||
color: @outline;
|
||||
color: var(--outline);
|
||||
}
|
||||
|
||||
#action-button {
|
||||
@@ -46,9 +47,10 @@
|
||||
#notification-box {
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
background-color: @surfaceContainerLow;
|
||||
background-color: var(--surface-container-low);
|
||||
margin: 4px;
|
||||
min-width: 336px;
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
#boxed-notification-revealer {
|
||||
@@ -56,25 +58,26 @@
|
||||
}
|
||||
|
||||
#notif-close-button {
|
||||
background-color: @surface;
|
||||
background-color: var(--surface);
|
||||
border-radius: 16px;
|
||||
padding: 4px;
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
#notif-close-button:hover,
|
||||
#notif-close-button:focus {
|
||||
background-color: @surfaceBright;
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#notif-close-button:active {
|
||||
background-color: @error;
|
||||
background-color: var(--red-dim);
|
||||
}
|
||||
|
||||
#notif-close-label {
|
||||
color: @error;
|
||||
color: var(--red-dim);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#notif-close-button:active #notif-close-label {
|
||||
color: @shadow;
|
||||
color: var(--shadow);
|
||||
}
|
||||
+42
-39
@@ -1,44 +1,47 @@
|
||||
.osd-panel {
|
||||
background-color: transparent;
|
||||
#osd {
|
||||
background-color: var(--surface);
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
#osd scale {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
#osd trough {
|
||||
background: var(--surface-container);
|
||||
min-height: 10px;
|
||||
margin-right: 4px;
|
||||
border-radius: 99px;
|
||||
}
|
||||
|
||||
#osd highlight {
|
||||
border-radius: 99px 0px 0px 99px;
|
||||
background: var(--primary);
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
#osd slider {
|
||||
color: var(--on-primary);
|
||||
background-color: var(--primary);
|
||||
background-size: 20px;
|
||||
min-width: 5px;
|
||||
min-height: 10px;
|
||||
border-radius: 12px;
|
||||
padding: 0px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: -10px;
|
||||
box-shadow:
|
||||
-1px 0px 0px 1px var(--surface-container),
|
||||
1px 0px 0px 1px var(--surface-container);
|
||||
}
|
||||
|
||||
#osd-label {
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#osd-value {
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
#progress-container {
|
||||
border-radius: 6px;
|
||||
min-height: 12px;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
#progress-fill {
|
||||
background-color: @primary;
|
||||
border-radius: 6px;
|
||||
min-height: 8px;
|
||||
transition: min-width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#progress-background {
|
||||
background-color: @surfaceContainer;
|
||||
border-radius: 6px;
|
||||
min-height: 8px;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
#control-section {
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: lighter(@background);
|
||||
}
|
||||
|
||||
.osd-hidden {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
Reference in new issue
Block a user