From 4007abf61694079d4cb31ffba9f2a51f4e853a3d Mon Sep 17 00:00:00 2001 From: Koen Lageveen Date: Thu, 15 Oct 2020 20:32:33 +0200 Subject: [PATCH] tweak colors and layout, simpler, better contrast --- index.css | 122 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 67 insertions(+), 55 deletions(-) diff --git a/index.css b/index.css index 19138db..53aef11 100644 --- a/index.css +++ b/index.css @@ -48,23 +48,33 @@ src: url('merriweather/Merriweather-BoldItalic.ttf'); } + * { box-sizing: border-box; } html { + --bright-white: #FFF; + --paper-white: #F5F5F5; + + --ink-black: #2A2A2A; + --dark-grey: #4A4A4A; + --medium-grey: #777; + --light-grey: #E0E0E0; + --bright-grey: #ECECEC; + height: 100%; min-height: 100%; font-family: 'ui-font', sans-serif; font-weight: normal; font-size: 14px; line-height: 20px; - background: #F5F0E6; + background: var(--paper-white); } body { height: 100%; min-height: 100%; - background: #F5F5F5; - color: #2A2A2A; + background: var(--paper-white); + color: var(--ink-black); } h1 { margin: 0; @@ -104,7 +114,7 @@ a:active { float: left; position: relative; z-index: 2; - border-right: 1px solid #4A4A4A; + border-right: 1px solid var(--medium-grey); overflow: hidden; } main { @@ -120,18 +130,19 @@ section { section#filters, section.config { display: grid; - grid-column-gap: 5px; - grid-row-gap: 5px; - grid-row-gap: 5px; + grid-column-gap: 4px; + grid-row-gap: 4px; + grid-row-gap: 4px; grid-template-columns: auto auto auto auto; - padding: 10px; + padding: 8px; font-size: 10px; - background: #EEE; + background: var(--bright-grey); } section#filters { align-items: stretch; grid-template-columns: auto auto auto auto auto; + border-bottom: 1px solid var(--light-grey); } section#filters input, section#filters select { @@ -142,6 +153,9 @@ section#filters > div { display: flex; } +section.config { + border-top: 1px solid var(--light-grey); +} section.config > * { text-align: center; padding: 0; @@ -163,14 +177,16 @@ section.select-list [data-style='serif'] .name { } section.select-list .entry { position: relative; - padding: .5em 1em; - border-top: 1px solid #EEE; + padding: 8px 12px; } -section.select-list .entry:last-child { - border-bottom: 1px solid #EEE; +section.select-list .entry:not(:first-child) { + border-top: 1px solid var(--light-grey); } section.select-list .entry:hover { - background: #FFF; + background: var(--bright-white); +} +section.select-list .entry.active { + background: var(--bright-white); } section.select-list .entry > a { display: block; @@ -189,16 +205,16 @@ section.select-list a:hover .name, section.select-list a:active .name { text-decoration: underline; } -section.select-list .active .name { +section.select-list .entry.active .name { font-weight: bold; } section.select-list a.website { position: absolute; - top: 4px; - right: 28px; + top: 6px; + right: 32px; padding: 0 4px; font-size: 10px; - color: #F5F5F5; + color: var(--paper-white); transition: all .2s ease-in-out; } section.select-list a.website svg { @@ -211,35 +227,32 @@ section.select-list a.website span { } section.select-list a.favoritelink { position: absolute; - top: 6px; - right: 4px; - color: #F5F5F5; + top: 8px; + right: 8px; + color: var(--paper-white); cursor: pointer; } section.select-list .entry:hover a.website, section.select-list .entry:hover a.favoritelink { - color: #CCC; + color: var(--bright-grey); } section.select-list .entry:hover a.favoritelink:hover, section.select-list a.favoritelink:hover { - color: #777; + color: var(--ink-black); } section.select-list .entry.active a.website, +section.select-list .entry.active a.favoritelink { + color: var(--dark-grey); +} section.select-list .entry a.website:hover, -section.select-list .entry a.website:active { - background: #E4E4E4; - color: #777; +section.select-list .entry.pinned a.favoritelink { + color: var(--ink-black); } section.select-list a.website:active { margin-top: 1px; } section.select-list .pinned { - background: #FAFAFA; -} -section.select-list .entry.active a.favoritelink, -section.select-list .pinned a.favoritelink, -section.select-list .pinned.entry:hover a.favoritelink { - color: #777; + background: var(--paper-white); } section.select-list .details { display: block; @@ -247,15 +260,15 @@ section.select-list .details { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - color: #777; + color: var(--ink-black); } footer { - padding: 5px 10px; + padding: 0 8px 4px 8px; font-size: 10px; text-align: center; line-height: 20px; - background: #E4E4E4; - color: #777; + background: var(--bright-grey); + color: var(--medium-grey); } footer h1 + p { font-style: italic; @@ -263,7 +276,7 @@ footer h1 + p { footer a:hover, footer a:active { text-decoration: underline; - color: #2A2A2A; + color: var(--ink-black); } footer p a, footer p a:link, @@ -273,7 +286,7 @@ footer p a:visited { label { margin-right: .5ex; - color: #777; + color: var(--medium-grey); } button { all: unset; @@ -286,22 +299,19 @@ button { position: relative; margin: 0 .5ex 0 0; - border: 1px solid #E4E4E4; - border-bottom-color: #CCC; - border-right-color: #CCC; + border: 1px solid var(--light-grey); border-radius: 4px; - - background: linear-gradient(#FFF, #E4E4E4); - color: #777; + background: linear-gradient(var(--bright-white), var(--light-grey)); + color: var(--medium-grey); cursor: pointer; } -button:active { - box-shadow: none; +button:hover { + color: var(--ink-black); } button.selected { - background: #FFF; - border-color: #E4E4E4; - color: #2A2A2A; + background: var(--bright-white); + color: var(--ink-black); + box-shadow: none; } button path, button rect { @@ -315,16 +325,17 @@ select { all: unset; width: 9em; padding: 0 .5ex; - border: 1px solid #E4E4E4; + border: 1px solid var(--light-grey); border-radius: 4px; + background: var(--paper-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } select option { - background: #FFF; - color: #000; + background: var(--light-white); + color: var(--ink-black); } input[type='text'] { line-height: 12px; @@ -335,8 +346,9 @@ input[type='number'] { width: 4em; margin-left: .5ex; padding: 0 .5ex; - border: 1px solid #E4E4E4; + border: 1px solid var(--light-grey); border-radius: 4px; + background: var(--paper-white); text-align: left; transition: all .2s ease-in-out; } @@ -346,8 +358,8 @@ input[type='number']:hover, input[type='number']:focus, select:hover, select:focus { - border-color: #CCC; - background: #F5F5F5; + border-color: var(--medium-grey); + background: var(--paper-white); } pre, textarea,