Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web: dark theme & coloring, border, focus fixes

Browse source
This commit is contained in:
wukko 2024-06-16 21:45:24 +06:00
parent 2080a3e1ae
commit f8f248f399
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
5 changed files with 70 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/save/Omnibox.svelte
View file

@ -93,7 +93,7 @@
#input-container { #input-container {
display: flex; display: flex;
box-shadow: 0 0 0 1.5px var(--gray) inset; box-shadow: 0 0 0 1.5px var(--input-border) inset;
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 0 12px; padding: 0 12px;
align-items: center; align-items: center;

2
web/src/components/save/buttons/DownloadButton.svelte
View file

@ -100,7 +100,7 @@
box-shadow: none; box-shadow: none;
transform: none; transform: none;
border-left: 1px var(--gray) solid; border-left: 1.5px var(--input-border) solid;
border-top-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius);
} }

11
web/src/components/sidebar/Sidebar.svelte
View file

@ -59,7 +59,7 @@
} }
#sidebar { #sidebar {
background: var(--secondary); background: var(--sidebar-bg);
height: 100vh; height: 100vh;
width: var(--sidebar-width); width: var(--sidebar-width);
position: sticky; position: sticky;
@ -94,14 +94,7 @@
display: block; display: block;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
background: linear-gradient( background: var(--sidebar-mobile-gradient);
90deg,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0) 4%,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0) 96%,
rgba(0, 0, 0, 0.9) 100%
);
} }
#sidebar-tabs { #sidebar-tabs {

16
web/src/components/sidebar/SidebarTab.svelte
View file

@ -25,14 +25,14 @@
text-align: center; text-align: center;
gap: 5px; gap: 5px;
padding: var(--padding) 5px; padding: var(--padding) 5px;
color: var(--primary); color: var(--sidebar-highlight);
font-size: var(--sidebar-font-size); font-size: var(--sidebar-font-size);
opacity: 0.8; opacity: 0.8;
} }
.sidebar-tab.active { .sidebar-tab.active {
color: var(--secondary); color: var(--sidebar-bg);
background: var(--primary); background: var(--sidebar-highlight);
opacity: 1; opacity: 1;
} }
@ -40,6 +40,16 @@
opacity: 1; opacity: 1;
} }
.sidebar-tab:focus-visible {
box-shadow: 0 0 0 1.5px var(--sidebar-highlight) inset;
outline: none;
z-index: 1;
}
.sidebar-tab.active:focus-visible {
box-shadow: 0 0 0 1.5px var(--sidebar-bg) inset;
}
@media screen and (max-width: 535px) { @media screen and (max-width: 535px) {
.sidebar-tab { .sidebar-tab {
padding: 5px var(--padding); padding: 5px var(--padding);

53
web/src/routes/+layout.svelte
View file

@ -22,17 +22,62 @@
--button-hover-transparent: rgba(0, 0, 0, 0.03); --button-hover-transparent: rgba(0, 0, 0, 0.03);
--button-stroke: rgba(0, 0, 0, 0.08); --button-stroke: rgba(0, 0, 0, 0.08);
--sidebar-bg: #000000;
--sidebar-highlight: #ffffff;
--input-border: #8d8d95;
--padding: 12px; --padding: 12px;
--border-radius: 11px; --border-radius: 11px;
--sidebar-width: 80px; --sidebar-width: 80px;
--sidebar-height-mobile: 50px; --sidebar-height-mobile: 50px;
--sidebar-font-size: 11px; --sidebar-font-size: 11px;
--sidebar-mobile-gradient: linear-gradient(
90deg,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0) 4%,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0) 96%,
rgba(0, 0, 0, 0.9) 100%
);
}
/* temporary switcher until theming is implemented, */
/* just so my eyes don't burn at night */
@media (prefers-color-scheme: dark) {
:global(:root) {
--primary: #000000;
--secondary: #e1e1e1;
--gray: #6e6e6e;
--button: #191919;
--button-hover: #2a2a2a;
--button-hover-transparent: rgba(225, 225, 225, 0.04);
--button-stroke: rgba(255, 255, 255, 0.08);
--sidebar-bg: #101010;
--sidebar-highlight: #f2f2f2;
--input-border: #383838;
--sidebar-mobile-gradient: linear-gradient(
90deg,
rgba(16, 16, 16, 0.9) 0%,
rgba(16, 16, 16, 0) 4%,
rgba(16, 16, 16, 0) 50%,
rgba(16, 16, 16, 0) 96%,
rgba(16, 16, 16, 0.9) 100%
);
}
} }
:global(html), :global(html),
:global(body) { :global(body) {
margin: 0; margin: 0;
background-color: var(--primary);
color: var(--secondary);
} }
:global(*) { :global(*) {
@ -73,12 +118,19 @@
box-shadow: 0 0 0 1.5px var(--button-stroke) inset; box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
} }
:global(button:focus-visible) {
box-shadow: 0 0 0 1.5px var(--secondary) inset;
outline: none;
z-index: 1;
}
:global(button:active) { :global(button:active) {
transform: scale(0.95); transform: scale(0.95);
} }
:global(button:hover) { :global(button:hover) {
background-color: var(--button-hover); background-color: var(--button-hover);
z-index: 1;
} }
:global(.center-column-container) { :global(.center-column-container) {
@ -100,6 +152,7 @@
display: flex; display: flex;
overflow: scroll; overflow: scroll;
padding: var(--padding); padding: var(--padding);
background-color: var(--primary);
} }
@media screen and (max-width: 535px) { @media screen and (max-width: 535px) {