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