gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-07-26 12:08:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Give light theme proper green bamboo and a frosted language pill

Browse Source 
- Bamboo layers get their own light-mode recipes (fresh greens, visible
  segment rings, sheen) instead of dark-theme gradients faded to 45%
- Language selector pill: frosted white glass, light dropdown/picker
  (was hard-coded dark glass in both themes)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
2026-07-11 10:24:18 +02:00
parent fecaa8b54d
commit fbef3d180c
1 changed files with 72 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/style.css
+72 -3
View File
@@ -1023,13 +1023,57 @@ html.theme-light .bg-nature {
html.theme-light .bg-canopy,
html.theme-light .canopy-arc,
html.theme-light #bamboo-far .bamboo-stalk,
html.theme-light #bamboo-mid .bamboo-stalk,
html.theme-light #bamboo-near .bamboo-stalk,
html.theme-light .bg-grass {
opacity: 0.45;
}
/* By day the stalks get their own fresh-green recipes — the dark-theme
gradients faded to 45% read as grey smears on the light backdrop and
stopped looking like bamboo at all. */
html.theme-light #bamboo-far .bamboo-stalk {
opacity: 0.55;
background:
repeating-linear-gradient(180deg,
transparent 0, transparent 108px,
oklch(0.55 0.09 145 / 0.4) 108px, oklch(0.55 0.09 145 / 0.4) 112px),
linear-gradient(180deg, oklch(0.68 0.11 145 / 0.6), oklch(0.62 0.09 140 / 0.35));
}
html.theme-light #bamboo-far::before,
html.theme-light #bamboo-far::after {
background: linear-gradient(180deg, oklch(0.7 0.1 145 / 0.5), oklch(0.64 0.08 140 / 0.25));
}
html.theme-light #bamboo-mid .bamboo-stalk {
opacity: 0.65;
background:
repeating-linear-gradient(180deg,
transparent 0, transparent 84px,
oklch(0.5 0.1 145 / 0.45) 84px, oklch(0.5 0.1 145 / 0.45) 87px),
linear-gradient(90deg, transparent 14%, oklch(0.85 0.08 130 / 0.35) 38%, transparent 68%),
linear-gradient(180deg, oklch(0.63 0.115 145 / 0.65), oklch(0.57 0.09 140 / 0.4));
}
html.theme-light #bamboo-mid .bamboo-stalk::before,
html.theme-light #bamboo-mid .bamboo-stalk::after {
background: oklch(0.55 0.13 145 / 0.5);
}
html.theme-light #bamboo-near .bamboo-stalk {
opacity: 0.75;
background:
linear-gradient(90deg, transparent 12%, oklch(0.88 0.07 130 / 0.4) 36%, transparent 64%),
linear-gradient(180deg, oklch(0.59 0.12 145 / 0.75), oklch(0.52 0.1 140 / 0.5));
}
html.theme-light #bamboo-near .bamboo-node {
background: oklch(0.45 0.1 145 / 0.65);
}
html.theme-light #bamboo-near .bamboo-leaf {
background: oklch(0.55 0.13 145 / 0.6);
}
/* The centre trunks stay whisper-quiet by daylight too */
html.theme-light #bamboo-far .far-6,
html.theme-light #bamboo-far .far-7 {
@@ -3553,6 +3597,31 @@ html:not(.lang-de) [lang="de"] {
font-size: 0.9rem;
}
/* Light theme: the pill was designed on the dark glass recipe — by day it
becomes frosted white so it sits in the same family as the buttons. */
html.theme-light .lang-select-container {
background: rgba(255, 255, 255, 0.6);
border-color: oklch(0.28 0.035 140 / 0.14);
}
html.theme-light .lang-select-container:hover {
background: rgba(255, 255, 255, 0.85);
border-color: oklch(0.56 0.13 150 / 0.35);
box-shadow: 0 0 15px oklch(0.56 0.13 150 / 0.12);
}
html.theme-light .lang-dropdown option {
background: #ffffff;
color: oklch(0.21 0.03 140);
}
@supports (appearance: base-select) {
html.theme-light .lang-dropdown::picker(select) {
background-color: #ffffff;
border-color: oklch(0.28 0.035 140 / 0.18);
}
}
/* --- Hamburger Menu --- */
.hamburger {
display: none;