Diff options
| author | Bryce Kwon <bryce@brycekwon.com> | |
|---|---|---|
| committer | Bryce Kwon <bryce@brycekwon.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
Remove the theme toggle
Diffstat (limited to 'assets/cgit.css')
| -rw-r--r-- | assets/cgit.css | 76 |
1 file changed, 9 insertions, 67 deletions
diff --git a/assets/cgit.css b/assets/cgit.css index 225af98..66d9bb8 100644 --- a/assets/cgit.css +++ b/assets/cgit.css @@ -2,9 +2,8 @@ * cgit.css: styling for the cgit web interface * * Colours are driven by CSS custom properties via light-dark(), so the - * whole theme follows the reader's system preference and can be flipped - * with the header toggle (which sets data-theme on <html>). All rules - * stay scoped under div#cgit so cgit can be embedded in another page. + * whole theme follows the reader's system preference. All rules stay + * scoped under div#cgit so cgit can be embedded in another page. */ div#cgit { @@ -82,7 +81,7 @@ div#cgit { /* Shared horizontal inset so every region lines up down the page. */ --gutter: 1.25rem; - /* Shared height so the toggle, dropdowns and fields all agree. */ + /* Shared height so the dropdowns and fields all agree. */ --control-h: 2em; --radius: 5px; @@ -101,15 +100,6 @@ div#cgit { background: var(--bg); } -/* Set on <html> by the script before the body parses. */ -html[data-theme="light"] div#cgit { - color-scheme: light; -} - -html[data-theme="dark"] div#cgit { - color-scheme: dark; -} - /* Scoped so an embedding host page is left alone. */ html.cgit-standalone { color-scheme: light dark; @@ -198,10 +188,10 @@ div#cgit button:focus-visible { div#cgit #header { display: grid; - grid-template-columns: auto 1fr auto auto; + grid-template-columns: auto 1fr auto; grid-template-areas: - "logo heading switch theme" - "logo desc owner owner"; + "logo heading switch" + "logo desc owner"; align-items: center; column-gap: 10px; width: 100%; @@ -209,49 +199,6 @@ div#cgit #header { margin-bottom: 0; } -div#cgit #header .theme-toggle { - grid-area: theme; - justify-self: end; - align-self: center; - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--control-h); - height: var(--control-h); - padding: 0; - color: var(--muted); - background-color: var(--surface); - border: solid 1px var(--border); - border-radius: var(--radius); - cursor: pointer; - line-height: 1; -} - -/* The display rule above would defeat the hidden attribute. */ -div#cgit #header .theme-toggle[hidden] { - display: none; -} - -div#cgit #header .theme-toggle:hover { - color: var(--fg); - border-color: var(--border-mid); -} - -div#cgit #header .theme-toggle svg { - width: 1.1em; - height: 1.1em; - fill: none; - stroke: currentColor; - stroke-width: 2; - stroke-linecap: round; - stroke-linejoin: round; -} - -/* Reserved up front so the reveal does not shift the header. */ -html.cgit-js div#cgit #header { - grid-template-columns: auto 1fr auto var(--control-h); -} - /* Reserved so the header holds still while the image loads. */ div#cgit #header .logo { grid-area: logo; @@ -1450,10 +1397,10 @@ div#cgit table.ssdiff td.space { } div#cgit #header { - grid-template-columns: auto 1fr auto; + grid-template-columns: auto 1fr; grid-template-areas: - "logo heading theme" - "desc desc desc"; + "logo heading" + "desc desc"; row-gap: 6px; } @@ -1461,11 +1408,6 @@ div#cgit table.ssdiff td.space { display: none; } - /* Outranks the base reservation, whose fourth column would sit here empty. */ - html.cgit-js div#cgit #header { - grid-template-columns: auto 1fr var(--control-h); - } - div#cgit #header::before { grid-column: 1 / -1; } |