chore(starting from new):
This commit is contained in:
82 files changed
-29339
No files matched your search
-214
@@ -1,214 +0,0 @@
|
||||
#bar {
|
||||
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 */
|
||||
}
|
||||
|
||||
#start-container,
|
||||
#center-container,
|
||||
#end-container {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
#bar-corner * {
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
/**
|
||||
* ── Workspace ─────────────────────────────────────────────────────────
|
||||
*/
|
||||
#workspaces {
|
||||
font-style: normal;
|
||||
background-color: var(--surface-container);
|
||||
padding: 4px;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/**
|
||||
* ── 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: var(--primary);
|
||||
font-size: 20px;
|
||||
padding: 1px;
|
||||
border-radius: 11px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
#updated-icon {
|
||||
color: var(--primary);
|
||||
font-size: 20px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
#update-label {
|
||||
color: var(--primary);
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 0px;
|
||||
margin-right: 4px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
/**
|
||||
* ── Clock ─────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#datetime {
|
||||
background-color: var(--surface-container);
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#datetime:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
/**
|
||||
* ── Tray ──────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#tray {
|
||||
background-color: var(--surface-container);
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#tray > button {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
menu {
|
||||
border: solid 1px var(--outline-variant);
|
||||
border-radius: 16px;
|
||||
background-color: var(--surface);
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
menu > menuitem {
|
||||
border-radius: 10px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
menu > menuitem:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
menu > menuitem:hover > label {
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
/**
|
||||
* ── Logo ──────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#button-bar {
|
||||
background-color: var(--surface-container);
|
||||
margin-top: 1px;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#system-indicator-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#system-notif-label {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/**
|
||||
* ── Metric ────────────────────────────────────────────────────────────
|
||||
*/
|
||||
#metrics {
|
||||
background-color: var(--surface-container);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
: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;
|
||||
|
||||
}
|
||||
@@ -1,163 +0,0 @@
|
||||
#buttons-grid {
|
||||
min-height: 52px;
|
||||
}
|
||||
|
||||
#network-button,
|
||||
#bluetooth-button,
|
||||
#night-mode-button,
|
||||
#power-profile-button,
|
||||
#dark-mode-button,
|
||||
#caffeine-button {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
#network-button,
|
||||
#bluetooth-button {
|
||||
background-color: unset;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#night-mode-button,
|
||||
#dark-mode-button,
|
||||
#power-profile-button,
|
||||
#caffeine-button {
|
||||
background-color: var(--primary);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#night-mode-button.disabled,
|
||||
#dark-mode-button.disabled,
|
||||
#power-profile-button.disabled,
|
||||
#caffeine-button.disabled {
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
#network-status-button,
|
||||
#network-menu-button,
|
||||
#bluetooth-status-button,
|
||||
#bluetooth-menu-button {
|
||||
background-color: var(--primary);
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
#network-menu-button,
|
||||
#bluetooth-menu-button {
|
||||
border-left: 1px solid var(--outline);
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
#network-status-button:hover,
|
||||
#network-menu-button:hover,
|
||||
#bluetooth-status-button:hover,
|
||||
#bluetooth-menu-button:hover,
|
||||
#bluetooth-button:hover,
|
||||
#night-mode-button:hover,
|
||||
#power-profile-button:hover,
|
||||
#dark-mode-button:hover,
|
||||
#caffeine-button:hover {
|
||||
background-color: var(--foreground);
|
||||
}
|
||||
|
||||
/* Estados Disabled */
|
||||
#network-status-button.disabled,
|
||||
#network-menu-button.disabled,
|
||||
#bluetooth-status-button.disabled,
|
||||
#bluetooth-menu-button.disabled {
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
#network-menu-button.disabled,
|
||||
#bluetooth-menu-button.disabled {
|
||||
border-left: 1px solid var(--surface-bright);
|
||||
}
|
||||
|
||||
#network-status-button.disabled:hover,
|
||||
#network-menu-button.disabled:hover,
|
||||
#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: var(--surface-bright);
|
||||
}
|
||||
|
||||
#network-status-button,
|
||||
#bluetooth-status-button {
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
#network-menu-button,
|
||||
#bluetooth-menu-button {
|
||||
border-radius: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
#network-icon,
|
||||
#bluetooth-icon,
|
||||
#night-mode-icon,
|
||||
#dark-mode-icon,
|
||||
#power-profile-icon,
|
||||
#caffeine-icon {
|
||||
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: var(--outline);
|
||||
}
|
||||
|
||||
#network-menu-label,
|
||||
#bluetooth-menu-label {
|
||||
color: var(--shadow);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#network-menu-label.disabled,
|
||||
#bluetooth-menu-label.disabled {
|
||||
color: var(--outline);
|
||||
}
|
||||
|
||||
#network-label,
|
||||
#bluetooth-label,
|
||||
#night-mode-label,
|
||||
#power-profile-label,
|
||||
#caffeine-label,
|
||||
#dark-mode-label {
|
||||
color: var(--shadow);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
#network-label.disabled,
|
||||
#bluetooth-label.disabled,
|
||||
#night-mode-label.disabled,
|
||||
#power-profile-label.disabled,
|
||||
#dark-mode-label.disabled,
|
||||
#caffeine-label.disabled {
|
||||
color: var(--outline);
|
||||
}
|
||||
|
||||
#network-ssid,
|
||||
#bluetooth-status,
|
||||
#night-mode-status,
|
||||
#power-profile-status,
|
||||
#dark-mode-status,
|
||||
#caffeine-status {
|
||||
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: var(--outline);
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
#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;
|
||||
}
|
||||
@@ -1,827 +0,0 @@
|
||||
/*
|
||||
* ── launcher ──────────────────────────────────────────────────────────
|
||||
*/
|
||||
#dashboard {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
#launcher {
|
||||
margin: 18px;
|
||||
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);
|
||||
}
|
||||
|
||||
#launcher entry {
|
||||
transition: all 0.1s ease;
|
||||
border-radius: 11px;
|
||||
padding: 10px;
|
||||
margin: 12px;
|
||||
box-shadow: inset 0 0 0 1px var(--outline-variant);
|
||||
}
|
||||
|
||||
#launcher-content.wallpapers {
|
||||
padding: 16px;
|
||||
min-height: 420px;
|
||||
min-width: 620px;
|
||||
}
|
||||
|
||||
.applauncher-scrolled-window {
|
||||
transition: min-height 0.2s ease;
|
||||
}
|
||||
|
||||
#launcher-content.bluetooth {
|
||||
min-height: 464px;
|
||||
}
|
||||
|
||||
#launcher-content.wifi {
|
||||
min-height: 464px;
|
||||
}
|
||||
|
||||
#launcher-content.tools {
|
||||
min-width: 308px;
|
||||
}
|
||||
|
||||
#launcher-content.calendar {
|
||||
min-height: 420px;
|
||||
min-width: 420px;
|
||||
}
|
||||
|
||||
#launcher-content {
|
||||
min-width: 485px;
|
||||
}
|
||||
|
||||
#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: var(--surface);
|
||||
padding: 4px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
#scrolled-window slider {
|
||||
border-radius: 8px;
|
||||
min-width: 10px;
|
||||
min-height: 48px;
|
||||
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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
@keyframes loadSlot {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#slot-button:hover,
|
||||
#slot-button:focus,
|
||||
#slot-button:selected,
|
||||
#slot-button.selected {
|
||||
background-color: var(--surface-bright);
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
#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: 512px;
|
||||
}
|
||||
|
||||
#wallpaper-icons:selected {
|
||||
background-color: var(--surface-bright);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
#wallpaper-icons:hover {
|
||||
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 */
|
||||
#matugen-switcher {
|
||||
min-width: 40px;
|
||||
min-height: 20px;
|
||||
background-color: var(--surface-variant);
|
||||
border-radius: 15px;
|
||||
padding: 2px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Style the switch's slider */
|
||||
#matugen-switcher slider {
|
||||
background-color: var(--primary);
|
||||
border-radius: 16px;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
transition:
|
||||
background-color 0.1s cubic-bezier(0.5, 0.25, 0, 1.25),
|
||||
transform 0.25s cubic-bezier(0.5, 0.25, 0, 1.25);
|
||||
}
|
||||
|
||||
/* When the switch is active (checked) */
|
||||
#matugen-switcher:checked {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
/* Optional: additional styling for the slider when active */
|
||||
#matugen-switcher:checked slider {
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
#matugen-switcher:checked image {
|
||||
color: var(--surface);
|
||||
}
|
||||
|
||||
#mat-label {
|
||||
font-size: 24px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── emoji ─────────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#emoji #search-entry {
|
||||
font-weight: bold;
|
||||
background-color: var(--surface);
|
||||
color: var(--foreground);
|
||||
border-radius: 16px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── powermenu ─────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#power-menu-button {
|
||||
border-radius: 20px;
|
||||
min-width: 52px;
|
||||
min-height: 52px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#power-menu-button label {
|
||||
font-size: 35px;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
#power-menu-button:hover,
|
||||
#power-menu-button:focus {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#power-menu-button:hover label,
|
||||
#power-menu-button:focus label {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#power-menu-button:active {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#power-menu-button:active label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
/*
|
||||
* ── sh runner ─────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#sh-item {
|
||||
border-radius: 11px;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#sh-item {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#sh-item:hover,
|
||||
#sh-item:focus {
|
||||
text-shadow: 2px 2px 2px var(--primary);
|
||||
}
|
||||
|
||||
/*
|
||||
* ── bluetooth ─────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#bluetooth-header {
|
||||
border: 2px solid var(--shadow);
|
||||
padding: 4px;
|
||||
background-color: var(--surface-container);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#bluetooth-device {
|
||||
border: 2px solid var(--shadow);
|
||||
background-color: var(--surface-container);
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#bluetooth-scan,
|
||||
#bluetooth-back {
|
||||
background-color: var(--surface);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#bluetooth-back-label {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#bluetooth-scan:hover,
|
||||
#bluetooth-back:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#bluetooth-scan label,
|
||||
#bluetooth-toggle label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#bluetooth-text,
|
||||
#bluetooth-section {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#bluetooth-section {
|
||||
background-color: var(--surface-container);
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#bluetooth-connection {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#bluetooth-connect {
|
||||
background-color: var(--surface);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#bluetooth-connect:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#bluetooth-paired,
|
||||
#bluetooth-available {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* ── wifi ──────────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#wifi-header {
|
||||
background-color: var(--surface-container);
|
||||
padding: 4px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
#wifi-device {
|
||||
background-color: var(--secondary-container);
|
||||
border-radius: 16px;
|
||||
padding: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#wifi-toggle-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#wifi-scan,
|
||||
#wifi-toggle {
|
||||
background-color: var(--surface-container);
|
||||
margin-left: 0px;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
#wifi-scan:hover,
|
||||
#wifi-toggle:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#wifi-scan label,
|
||||
#wifi-toggle label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#wifi-text,
|
||||
#wifi-section {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#wifi-text {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#wifi-connection {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#wifi-connect {
|
||||
background-color: var(--surface);
|
||||
border-radius: 16px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
#wifi-connect:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#wifi-available {
|
||||
/*background-color: var(--surface-container);*/
|
||||
padding: 4px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ── calendar ──────────────────────────────────────────────────────────
|
||||
*/
|
||||
|
||||
#header {
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#weekday-row {
|
||||
background-color: var(--surface);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#month-label,
|
||||
#weekday-label,
|
||||
#day-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#day-label,
|
||||
#day-empty {
|
||||
min-width: 38px;
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
#day-empty {
|
||||
color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#weekday-label {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#calendar-grid {
|
||||
border-radius: 16px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#day-label.current-day {
|
||||
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: var(--surface-bright);
|
||||
}
|
||||
|
||||
#prev-month-button:active,
|
||||
#next-month-button:active {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#month-button-label {
|
||||
color: var(--primary);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#prev-month-button:active #month-button-label,
|
||||
#next-month-button:active #month-button-label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
#prev-month-day,
|
||||
#next-month-day {
|
||||
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);
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
@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: var(--foreground);
|
||||
font-size: 15px;
|
||||
font-family: "Monaspace Radon";
|
||||
}
|
||||
|
||||
/*
|
||||
* ── tooltip ───────────────────────────────────────────────────────────
|
||||
*/
|
||||
tooltip {
|
||||
border: solid 1px;
|
||||
border-radius: 16px;
|
||||
border-color: var(--outline);
|
||||
background-color: var(--surface);
|
||||
animation: tooltipShow 0.25s cubic-bezier(0.5, 0.25, 0, 1);
|
||||
}
|
||||
|
||||
@keyframes tooltipShow {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
tooltip > * {
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#corner {
|
||||
background-color: var(--surface);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#corner-container {
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
#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);
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
#notification-action-buttons button.start-action {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
#notification-action-buttons button {
|
||||
background-color: var(--surface);
|
||||
padding: 8px;
|
||||
border-radius: 20px;
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
#notification-action-buttons button:hover {
|
||||
background-color: var(--surface-bright);
|
||||
}
|
||||
|
||||
#notification-action-buttons button:active {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
#notification-action-buttons button:active #button-label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
|
||||
#notification-image image {
|
||||
border-radius: 16px;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
#notification-summary,
|
||||
#button-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#notification-summary {
|
||||
font-weight: bold;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#notification-app-name {
|
||||
color: var(--outline);
|
||||
}
|
||||
|
||||
#action-button {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#notification-box {
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
background-color: var(--surface-container-low);
|
||||
margin: 4px;
|
||||
min-width: 336px;
|
||||
transition: background-color 0.1s ease;
|
||||
}
|
||||
|
||||
#boxed-notification-revealer {
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
#notif-close-button {
|
||||
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: var(--surface-bright);
|
||||
}
|
||||
|
||||
#notif-close-button:active {
|
||||
background-color: var(--red-dim);
|
||||
}
|
||||
|
||||
#notif-close-label {
|
||||
color: var(--red-dim);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#notif-close-button:active #notif-close-label {
|
||||
color: var(--shadow);
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
#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;
|
||||
}
|
||||
Reference in new issue
Block a user