aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/index.css
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-06-27 17:07:42 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:55 +0300
commit3b0ec0ec7aa923eb5359b3bc078bd8ca64d13d41 (patch)
tree2aab8997f3b718474ae6734adda40cbcb35f2983 /vnext/src/index.css
parent1c8b68b4d774e3809d0a3b8fba2d187cde18c660 (diff)
Light mode improvements
Diffstat (limited to 'vnext/src/index.css')
-rw-r--r--vnext/src/index.css54
1 files changed, 35 insertions, 19 deletions
diff --git a/vnext/src/index.css b/vnext/src/index.css
index 7bbc0a22..1ae327ab 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -1,4 +1,6 @@
@custom-media --viewport-desktop (width >=62.5rem);
+@custom-media --viewport-mobile (width < 62.5rem);
+
:root {
--main-width: 1000px;
--main-background-color: #fdfdfe;
@@ -7,6 +9,18 @@
--text-background-color: #fff;
--text-color: #363636;
--link-color: #3c77aa;
+ --dimmed-link-color: #88958d;
+}
+@media (prefers-color-scheme: dark) {
+ :root {
+ --main-background-color: #222;
+ --background-color: #333;
+ --text-background-color: #383838;
+ --border-color: #4c4c4c;
+ --text-color: #ccc;
+ --link-color: #c38855;
+ --dimmed-link-color: #88958d;
+ }
}
* {
@@ -70,7 +84,7 @@ ul {
}
legend {
- color: #88958d;
+ color: var(--dimmed-link-color);
margin: 0;
padding: 12px;
width: 100%;
@@ -131,7 +145,6 @@ hr {
display: flex;
flex-direction: row;
justify-content: space-around;
- background: var(--background-color);
border-top: 1px solid var(--border-color);
}
@@ -166,7 +179,6 @@ hr {
#logo {
height: 36px;
width: 110px;
- padding: 4px;
}
#logo a {
@@ -209,14 +221,13 @@ hr {
}
#global a {
- color: #88958d;
+ color: var(--dimmed-link-color);
padding: 14px 16px;
}
#sidebar > a,
.l > a {
- color: #88958d;
- border-right: 2px solid transparent;
+ color: var(--link-color);
display: flex;
padding: 14px;
align-items: center;
@@ -237,7 +248,7 @@ hr {
#ctitle a,
.l a,
.msg-button {
- border-bottom: 2px solid var(--main-background-color);
+ border-bottom: 2px solid transparent;
}
#global a:hover,
@@ -307,7 +318,7 @@ hr {
}
.page a {
- color: #88958d;
+ color: var(--dimmed-link-color);
}
::-webkit-scrollbar {
@@ -329,6 +340,15 @@ hr {
background-color: black;
}
+@media (--viewport-mobile) {
+ #content {
+ margin-bottom: 12px;
+ }
+ #sidebar {
+ background: var(--text-background-color);
+ }
+}
+
@media (--viewport-desktop) {
#app {
grid-template-areas: "header header header header"". footer content .";
@@ -346,6 +366,9 @@ hr {
.mobile {
display: none;
}
+ #content {
+ margin-bottom: 12px;
+ }
#sidebar {
flex-direction: column;
justify-content: initial;
@@ -353,19 +376,12 @@ hr {
margin: 12px;
border: 1px solid var(--border-color);
}
+ #sidebar a,
+ .l a {
+ border-right: 2px solid transparent;
+ }
#sidebar > a:hover {
border-top: initial;
border-right: 2px solid #ff339a;
}
}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --main-background-color: #222;
- --background-color: #333;
- --text-background-color: #383838;
- --border-color: #4c4c4c;
- --text-color: #ccc;
- --link-color: #c38855;
- }
-}