828 lines
15 KiB
CSS
828 lines
15 KiB
CSS
/*
|
|
* ── 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);
|
|
}
|