diff options
Diffstat (limited to 'vnext/src/index.css')
-rw-r--r-- | vnext/src/index.css | 50 |
1 files changed, 27 insertions, 23 deletions
diff --git a/vnext/src/index.css b/vnext/src/index.css index 225379d7..7bbc0a22 100644 --- a/vnext/src/index.css +++ b/vnext/src/index.css @@ -1,8 +1,12 @@ @custom-media --viewport-desktop (width >=62.5rem); :root { --main-width: 1000px; - --background-color: #fff; + --main-background-color: #fdfdfe; + --background-color: #f8f8f8; + --border-color: #eee; + --text-background-color: #fff; --text-color: #363636; + --link-color: #3c77aa; } * { @@ -32,16 +36,13 @@ body { } body { - background: #f8f8f8; + background: var(--main-background-color); text-size-adjust: 100%; word-break: break-word; color: var(--text-color); line-height: 1.4; text-rendering: optimizeLegibility; -} - -textarea { - overflow: auto; + -webkit-overflow-scrolling: touch; } html, @@ -87,7 +88,7 @@ body:not(:-moz-handler-blocked) fieldset { } a { - color: #069; + color: var(--link-color); text-decoration: none; } @@ -107,8 +108,8 @@ hr { #header { grid-area: header; - background: var(--background-color); - border-bottom: 1px solid #eee; + background: var(--text-background-color); + border-bottom: 1px solid var(--border-color); transition: transform 0.2s; overflow-x: hidden; } @@ -131,7 +132,7 @@ hr { flex-direction: row; justify-content: space-around; background: var(--background-color); - border-top: 1px solid #eee; + border-top: 1px solid var(--border-color); } .nav_content { @@ -141,13 +142,12 @@ hr { #content { grid-area: content; margin-top: 12px; - overflow-y: auto; - -webkit-overflow-scrolling: touch; + overflow-y: scroll; } #footer { display: none; - background: #f8f8f8; + background: var(--background-color); border-top: 1px solid #ccc; color: var(--text-color); padding: 10px; @@ -224,7 +224,7 @@ hr { } #sidebar > a:hover { - background-color: #f8f8f8; + background-color: var(--background-color); border-top: 2px solid #ff339a; cursor: pointer; } @@ -237,14 +237,14 @@ hr { #ctitle a, .l a, .msg-button { - border-bottom: 2px solid #fdfdfe; + border-bottom: 2px solid var(--main-background-color); } #global a:hover, #ctitle a:hover, .l a:hover, .msg-button:hover { - background-color: #f8f8f8; + background-color: var(--background-color); border-bottom: 2px solid #ff339a; cursor: pointer; } @@ -299,8 +299,8 @@ hr { } .page { - background: #fdfdfe; - border: 1px solid #eee; + background: var(--main-background-color); + border: 1px solid var(--border-color); margin-bottom: 12px; padding: 6px; text-align: center; @@ -314,7 +314,7 @@ hr { width: 6px; } /* this targets the default scrollbar (compulsory) */ ::-webkit-scrollbar-track { - background-color: #f8f8f8; + background-color: var(--main-background-color); } /* the new scrollbar will have a flat appearance with the set background color */ ::-webkit-scrollbar-thumb { @@ -322,7 +322,7 @@ hr { } /* this will style the thumb, ignoring the track */ ::-webkit-scrollbar-button { - background-color: #eee; + background-color: var(--border-color); } /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */ ::-webkit-scrollbar-corner { @@ -351,7 +351,7 @@ hr { justify-content: initial; border-top: initial; margin: 12px; - border: 1px solid #eee; + border: 1px solid var(--border-color); } #sidebar > a:hover { border-top: initial; @@ -361,7 +361,11 @@ hr { @media (prefers-color-scheme: dark) { :root { - --background-color: #363636; - --text-color: #fff; + --main-background-color: #222; + --background-color: #333; + --text-background-color: #383838; + --border-color: #4c4c4c; + --text-color: #ccc; + --link-color: #c38855; } } |