From 9e84b326ffb02fc875eab8e12a0b0a79135b2d0d Mon Sep 17 00:00:00 2001 From: tdro Date: Mon, 31 Oct 2022 01:36:07 -0400 Subject: assets/css/default: Dry up colors To test out a color schemes. --- assets/css/default.css | 71 ++++++++++++++++++++++---------------------------- 1 file changed, 31 insertions(+), 40 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index abc26df..d3b8dde 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -26,40 +26,39 @@ color-scheme: light dark; --active-background-alternate: #cce1ff; --background-bolder: #fff; - --background-transparent: rgba(255, 255, 255, 0.9); - --background: #fefefe; - --border-darker: #ccc; - --border-darkest: #aaa; - --border-lighter: #eee; + --background-rgb: 254, 254, 254; + --background: rgba(var(--background-rgb), 1); + --border-darker: rgba(var(--foreground-rgb), 0.2); + --border-darkest: rgba(var(--foreground-rgb), 0.3); + --border-lighter: rgba(var(--foreground-rgb), 0.08); --button-background: #fff; --danger-background-lighter: #fff5f5; --danger-background: #fcd2cf; --danger: #8f0000; - --disabled: #999; - --fade: #555; + --fade: rgba(var(--foreground-rgb), 0.75); --focus-within-background: #f0ecf9; - --foreground: #111; + --foreground-rgb: 0, 0, 0; + --foreground: rgba(var(--foreground-rgb), 0.95); --hover-background-alternate: #ebf3ff; - --hover-background: #eee; - --input-background: #eff3f4; + --hover-background: rgba(var(--foreground-rgb), 0.06); --link: #0149bc; --shadow: #00000060; --spoiler: #333; --success-background: #d5f3c4; --success: #1d3c0c; - --table-row-even-background: #f9f9f9; - --table-row-odd-background: #f3f3f3; + --table-even-background: rgba(var(--foreground-rgb), 0.04); + --table-odd-background: rgba(var(--foreground-rgb), 0.02); --warning-background: #ffe699; --warning: #332600; - --widget-background: #f9f9f9; + --widget-background: rgba(var(--foreground-rgb), 0.02); } @media (prefers-color-scheme: dark) { :root { --active-background-alternate: #425a8a; --background-bolder: #0d0d0d; - --background-transparent: rgba(28, 28, 28, 0.9); - --background: #111; + --background-rgb: 17, 17, 17; + --background: rgba(var(--background-rgb), 1); --border-darker: #555; --border-darkest: #999; --border-lighter: #262626; @@ -67,23 +66,22 @@ --danger-background-lighter: #1b0404; --danger-background: #4f1c1c; --danger: #ff9494; - --disabled: #999; - --fade: #aaa; + --fade: rgba(var(--foreground-rgb), 0.75); --focus-within-background: #291933; - --foreground: #ddd; + --foreground-rgb: 221, 221, 221; + --foreground: rgba(var(--foreground-rgb), 1); --hover-background-alternate: #1c263a; - --hover-background: #303030; - --input-background: #333; + --hover-background: rgba(var(--foreground-rgb), 0.08); --link: #a3c3ff; --shadow: #000; --spoiler: #aaa; --success-background: #2d3e0f; --success: #d5f3c4; - --table-row-even-background: #273030; - --table-row-odd-background: #2e3838; + --table-even-background: rgba(var(--foreground-rgb), 0.06); + --table-odd-background: rgba(var(--foreground-rgb), 0.02); --warning-background: #a89700; --warning: #000; - --widget-background: #171717; + --widget-background: rgba(var(--foreground-rgb), 0.02); } img { filter: brightness(75%); @@ -660,7 +658,7 @@ micro-author micro-summary > a { background-color: #fff; background-color: var(--button-background); border-radius: 0.5rem; - border: 1px solid #ccc; + border: 1px solid #eee; border: 1px solid var(--border-lighter); box-shadow: 0 1px 1px #999; color: inherit; @@ -734,12 +732,12 @@ tr:last-child td { tbody tr:nth-child(odd) td { background-color: #f3f3f3; - background-color: var(--table-row-odd-background); + background-color: var(--table-odd-background); } tbody tr:nth-child(even) td { background-color: #f9f9f9; - background-color: var(--table-row-even-background); + background-color: var(--table-even-background); } tbody tr:hover td { @@ -927,7 +925,7 @@ micro-author micro-header h3 { micro-author micro-summary p:not(:last-child) { flex: 4; margin: 0 0.75rem 0 0; - color: #555; + color: #444; color: var(--fade); max-width: 20rem; } @@ -1054,8 +1052,6 @@ micro-metadata unlisted-entry { } micro-metadata-anchored { - color: #111; - color: var(--foreground); display: flex; margin-bottom: 0.25rem; width: 100%; @@ -1120,11 +1116,6 @@ micro-metadata-handle a span { text-decoration: underline; } -anchored-via { - color: #444; - color: var(--fade); -} - anchored-pinned svg { fill: #9ed1fa; } @@ -1272,7 +1263,7 @@ tab-bar nav a { border-top: 1px solid; border-color: #ddd; border-color: var(--border-darker); - color: #555; + color: #444; color: var(--fade); padding: 0.5rem 1rem; margin-top: 0.5rem; @@ -1743,7 +1734,7 @@ context-menu { background-color: #fff; background-color: var(--background-bolder); border: 1px solid; - border-color: #ddd; + border-color: #eee; border-color: var(--border-lighter); border-radius: 0.5rem; box-shadow: 0 0 1rem -0.5rem var(--shadow); @@ -1777,7 +1768,7 @@ context-profile p a { } context-profile aside p { - color: #555; + color: #444; color: var(--fade); margin: 0; } @@ -1894,10 +1885,10 @@ main micro-card:first-of-type reaction-tip img { [disabled] { cursor: not-allowed; - border-color: #ddd; + border-color: #eee; border-color: var(--border-lighter); - color: #999; - color: var(--disabled); + color: #444; + color: var(--fade); } [role="doc-endnotes"] { -- cgit v1.2.3