Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-04-30 14:34:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

web/layout: fix dark mode button colors, proper press state for buttons

Browse Source
This commit is contained in:
wukko 2025-02-24 22:34:00 +06:00
parent 60f4009947
commit 20c45823ee
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
1 changed files with 38 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
web/src/routes/+layout.svelte
View File

@ -122,14 +122,18 @@
--button: #f4f4f4; --button: #f4f4f4;
--button-hover: #e8e8e8; --button-hover: #e8e8e8;
--button-press: #e2e2e2;
--button-active-hover: #2a2a2a; --button-active-hover: #2a2a2a;
--button-hover-transparent: rgba(0, 0, 0, 0.06); --button-hover-transparent: rgba(0, 0, 0, 0.06);
--button-press-transparent: rgba(0, 0, 0, 0.09);
--button-stroke: rgba(0, 0, 0, 0.06); --button-stroke: rgba(0, 0, 0, 0.06);
--button-text: #282828; --button-text: #282828;
--button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset; --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
--button-elevated: #e3e3e3; --button-elevated: #e3e3e3;
--button-elevated-hover: #dadada; --button-elevated-hover: #dadada;
--button-elevated-press: #d3d3d3;
--button-elevated-shimmer: #ededed; --button-elevated-shimmer: #ededed;
--popover-glow: var(--button-stroke); --popover-glow: var(--button-stroke);
@ -205,15 +209,21 @@
--green: #37aa42; --green: #37aa42;
--button: #191919; --button: #191919;
--button-hover: #2a2a2a; --button-hover: #242424;
--button-press: #2a2a2a;
--button-active-hover: #f9f9f9; --button-active-hover: #f9f9f9;
--button-hover-transparent: rgba(225, 225, 225, 0.1); --button-hover-transparent: rgba(225, 225, 225, 0.1);
--button-press-transparent: rgba(225, 225, 225, 0.15);
--button-stroke: rgba(255, 255, 255, 0.05); --button-stroke: rgba(255, 255, 255, 0.05);
--button-text: #e1e1e1; --button-text: #e1e1e1;
--button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset; --button-box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
--button-elevated: #282828; --button-elevated: #282828;
--button-elevated-hover: #323232; --button-elevated-hover: #323232;
--button-elevated-hover: #2f2f2f;
--button-elevated-press: #343434;
--popover-glow: rgba(135, 135, 135, 0.12); --popover-glow: rgba(135, 135, 135, 0.12);
@ -224,6 +234,7 @@
--sidebar-bg: #131313; --sidebar-bg: #131313;
--sidebar-highlight: #f2f2f2; --sidebar-highlight: #f2f2f2;
--sidebar-hover: rgba(255, 255, 255, 0.1);
--input-border: #383838; --input-border: #383838;
@ -384,27 +395,41 @@
box-shadow: none !important; box-shadow: none !important;
} }
:global(button:active, .button:active) {
background-color: var(--button-hover);
}
:global(.button.elevated) { :global(.button.elevated) {
background-color: var(--button-elevated); background-color: var(--button-elevated);
} }
:global(.button.elevated:not(.color):active) {
background-color: var(--button-elevated-hover);
}
:global(.button.elevated:not(:focus-visible)) {
box-shadow: none;
}
:global(.button.active) { :global(.button.active) {
color: var(--primary); color: var(--primary);
background-color: var(--secondary); background-color: var(--secondary);
} }
@media (hover: hover) {
:global(.button:hover) {
background-color: var(--button-hover);
}
:global(.button.elevated:not(.color):hover) {
background-color: var(--button-elevated-hover);
}
:global(.button.active:not(.color):hover) {
background-color: var(--button-active-hover);
}
}
:global(.button:active) {
background-color: var(--button-press);
}
:global(.button.elevated:not(.color):active) {
background-color: var(--button-elevated-press);
}
:global(.button.elevated:not(:focus-visible)) {
box-shadow: none;
}
:global(.button.active:not(.color):active) { :global(.button.active:not(.color):active) {
background-color: var(--button-active-hover); background-color: var(--button-active-hover);
} }
@ -426,20 +451,6 @@
-webkit-user-select: text; -webkit-user-select: text;
} }
@media (hover: hover) {
:global(button:hover) {
background-color: var(--button-hover);
}
:global(.button.elevated:not(.color):hover) {
background-color: var(--button-elevated-hover);
}
:global(.button.active:not(.color):hover) {
background-color: var(--button-active-hover);
}
}
:global(.center-column-container) { :global(.center-column-container) {
display: flex; display: flex;
width: 100%; width: 100%;