Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-02-27 05:28:49 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/layout: bright sidebar in light mode, content frame

Browse source
This commit is contained in:
wukko 2025-02-25 00:13:37 +06:00
parent 346b9084b0
commit 384ea412ea
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 46 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -125,14 +125,18 @@
} }
@media (hover: hover) { @media (hover: hover) {
.sidebar-tab:active:not(.active) { .sidebar-tab:hover:not(.active) {
opacity: 1; background-color: var(--button-hover-transparent);
background-color: var(--sidebar-hover);
} }
.sidebar-tab:hover:not(.active) { .sidebar-tab:active:not(.active) {
background-color: var(--button-press-transparent);
}
.sidebar-tab:hover:not(.active),
.sidebar-tab:active:not(.active) {
opacity: 1; opacity: 1;
background-color: var(--sidebar-hover); box-shadow: 0 0 0 1.5px var(--sidebar-stroke) inset;
} }
} }

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

@ -143,9 +143,11 @@
--dialog-backdrop: rgba(255, 255, 255, 0.3); --dialog-backdrop: rgba(255, 255, 255, 0.3);
--sidebar-bg: #000000; --sidebar-bg: var(--button);
--sidebar-highlight: #ffffff; --sidebar-highlight: var(--secondary);
--sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-stroke: rgba(0, 0, 0, 0.04);
--content-border: rgba(0, 0, 0, 0.03);
--input-border: #adadb7; --input-border: #adadb7;
@ -169,6 +171,9 @@
) )
); );
--content-border-thickness: 1.5px;
--content-margin: calc(var(--sidebar-inner-padding) + var(--content-border-thickness));
--safe-area-inset-top: env(safe-area-inset-top); --safe-area-inset-top: env(safe-area-inset-top);
--safe-area-inset-bottom: env(safe-area-inset-bottom); --safe-area-inset-bottom: env(safe-area-inset-bottom);
@ -221,7 +226,6 @@
--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: #2f2f2f; --button-elevated-hover: #2f2f2f;
--button-elevated-press: #343434; --button-elevated-press: #343434;
@ -233,8 +237,10 @@
--dialog-backdrop: rgba(0, 0, 0, 0.3); --dialog-backdrop: rgba(0, 0, 0, 0.3);
--sidebar-bg: #131313; --sidebar-bg: #131313;
--sidebar-highlight: #f2f2f2; --sidebar-highlight: var(--secondary);
--sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-stroke: rgba(255, 255, 255, 0.04);
--content-border: rgba(255, 255, 255, 0.045);
--input-border: #383838; --input-border: #383838;
@ -312,6 +318,10 @@
#cobalt[data-iphone="true"] #content { #cobalt[data-iphone="true"] #content {
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
/* disable the desktop frame */
margin: 0;
box-shadow: none;
border-radius: 0;
} }
} }
@ -319,9 +329,25 @@
display: flex; display: flex;
overflow: scroll; overflow: scroll;
background-color: var(--primary); background-color: var(--primary);
box-shadow: 0 0 0 var(--content-border-thickness) var(--content-border);
border-radius: 8px;
margin: var(--content-margin);
margin-left: var(--content-border-thickness);
}
#content:dir(rtl) {
margin-left: var(--content-margin);
margin-right: var(--content-border-thickness);
} }
@media screen and (max-width: 535px) { @media screen and (max-width: 535px) {
/* dark navbar cuz it looks better on mobile */
:global([data-theme="light"]) {
--sidebar-bg: #000000;
--sidebar-highlight: var(--primary);
}
#cobalt { #cobalt {
display: grid; display: grid;
grid-template-columns: unset; grid-template-columns: unset;
@ -336,6 +362,11 @@
#content:dir(rtl) { #content:dir(rtl) {
padding-top: env(safe-area-inset-top); padding-top: env(safe-area-inset-top);
order: -1; order: -1;
margin: 0;
box-shadow: none;
border-radius: 0;
border-bottom-left-radius: calc(var(--border-radius) * 2); border-bottom-left-radius: calc(var(--border-radius) * 2);
border-bottom-right-radius: calc(var(--border-radius) * 2); border-bottom-right-radius: calc(var(--border-radius) * 2);
} }