admin/cobalt
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 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
5 changed files with 70 additions and 14 deletions
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 {
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);
padding: 0 12px;
align-items: center;

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

@@ -100,7 +100,7 @@
box-shadow: 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-bottom-right-radius: var(--border-radius);
}

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

@@ -59,7 +59,7 @@
}
#sidebar {
background: var(--secondary);
background: var(--sidebar-bg);
height: 100vh;
width: var(--sidebar-width);
position: sticky;
@@ -94,14 +94,7 @@
display: block;
position: absolute;
pointer-events: none;
background: 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%
);
background: var(--sidebar-mobile-gradient);
}
#sidebar-tabs {

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

@@ -25,14 +25,14 @@
text-align: center;
gap: 5px;
padding: var(--padding) 5px;
color: var(--primary);
color: var(--sidebar-highlight);
font-size: var(--sidebar-font-size);
opacity: 0.8;
}
.sidebar-tab.active {
color: var(--secondary);
background: var(--primary);
color: var(--sidebar-bg);
background: var(--sidebar-highlight);
opacity: 1;
}
@@ -40,6 +40,16 @@
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) {
.sidebar-tab {
padding: 5px var(--padding);