opnxng/website
0
0
Fork 0
Code

Added gray margin on light mode

Browse Source
This commit is contained in:
Opnxng 2024-05-24 21:44:52 +08:00
parent 577ad5f60f
commit 75001109a4
1 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/css/index.css
View File

@ -22,14 +22,16 @@
:root { :root {
--line-height: 1.35; --line-height: 1.35;
--text-color: #262626; --text-color: #262626;
--background-color: #FFFFFF; --primary-background-color: #FFFFFF;
--secondary-background-color: #FAFAFA;
--primary-color: #20599E; --primary-color: #20599E;
--secondary-color: #20599E; --secondary-color: #20599E;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--text-color: #D1D1CF; --text-color: #D1D1CF;
--background-color: #0E0E0F; --primary-background-color: #0E0E0F;
--secondary-background-color: #0E0E0F;
--primary-color: #1860A3; --primary-color: #1860A3;
--secondary-color: #1860A3; --secondary-color: #1860A3;
} }
@ -67,7 +69,7 @@ body {
color: var(--text-color); color: var(--text-color);
font-size: var(--font-size); font-size: var(--font-size);
background: var(--background-color); background: var(--secondary-background-color);
margin: 0 auto; margin: 0 auto;
line-height: var(--line-height); line-height: var(--line-height);
word-break: break-word; word-break: break-word;
@ -75,6 +77,10 @@ body {
-moz-hyphens: auto; -moz-hyphens: auto;
} }
@media (pointer: none), (pointer: coarse) {
body { background: var(--primary-background-color); }
}
::-webkit-scrollbar, .wrapper details::-webkit-scrollbar { ::-webkit-scrollbar, .wrapper details::-webkit-scrollbar {
width: 0; width: 0;
height: 0; height: 0;
@ -85,10 +91,12 @@ input:focus, select:focus, textarea:focus, button:focus {
} }
/*----------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------*/
.wrapper { .wrapper {
background: var(--primary-background-color);
max-width: 26.5rem; max-width: 26.5rem;
margin: 0 auto; margin: 0 auto;
min-height: calc(100vh - (var(--font-size) * var(--line-height) * (2.6 + 1)));
text-align: center; text-align: center;
padding: calc(var(--font-size) * var(--line-height) * 2.6) var(--font-size) 0; padding: calc(var(--font-size) * var(--line-height) * 2.6) calc(var(--font-size) * var(--line-height) * 2.6) calc(var(--font-size) * var(--line-height));
} }
@media (pointer: none), (pointer: coarse) { @media (pointer: none), (pointer: coarse) {
.wrapper { .wrapper {
@ -194,10 +202,10 @@ tr td {
padding-bottom: calc(var(--font-size) * var(--line-height)); padding-bottom: calc(var(--font-size) * var(--line-height));
} }
td:nth-child(1) { td:nth-child(1) {
color: var(--primary-color); color: var(--primary-color);
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
padding-right: calc(var(--font-size) * 1); padding-right: calc(var(--font-size) * 1);
} }
td:nth-child(2) { td:nth-child(2) {
text-align: left; text-align: left;