From ff7e33a9c443fd49a67664d01e50655cc1dc58d3 Mon Sep 17 00:00:00 2001 From: Runxi Yu Date: Mon, 17 Feb 2025 22:32:48 +0800 Subject: [PATCH] style.css: Make it more concise --- static/style.css | 104 ++++++++++++++++++----------------------------------- diff --git a/static/style.css b/static/style.css index 765f37a341b51ec6491ed8d334a0c06cfd1cb292..3dbe22ebb745a2e8a7aa6c64e13f620fbd238f98 100644 --- a/static/style.css +++ b/static/style.css @@ -1,8 +1,6 @@ /* Base styles and variables */ html { font-family: sans-serif; - background-color: var(--background-color); - color: var(--text-color); --background-color: hsl(0, 0%, 100%); --text-color: hsl(0, 0%, 0%); --link-color: hsl(320, 50%, 36%); @@ -12,10 +10,12 @@ --lighter-border-color: hsl(0, 0%, 85%); --text-decoration-color: hsl(0, 0%, 72%); --darker-box-background-color: hsl(0, 0%, 92%); --lighter-box-background-color: hsl(0, 0%, 95%); - --primary-color: hsl(320, 50%, 36%); + --primary-color: var(--link-color); --primary-color-contrast: hsl(320, 0%, 100%); --danger-color: hsl(0, 50%, 36%); --danger-color-contrast: hsl(0, 0%, 100%); + background-color: var(--background-color); + color: var(--text-color); } /* Dark mode overrides */ @@ -59,10 +59,7 @@ display: inline-block; padding: 3px 0; cursor: pointer; } -.toggle-table-off:checked + table > tbody { - display: none; -} -.toggle-table-on + table > tbody { +.toggle-table-off:checked + table > tbody, .toggle-table-on + table > tbody { display: none; } .toggle-table-on:checked + table > tbody { @@ -71,31 +68,25 @@ } /* Footer styles */ footer { - margin-top: 1rem; - margin-left: auto; - margin-right: auto; - display: block; + margin: 1rem auto; padding: 0 5px; width: fit-content; text-align: center; color: var(--light-text-color); } -footer a:link, footer a:visited { +footer a { color: inherit; } /* Padding containers */ -.padding-wrapper { +.padding-wrapper, .padding { margin: 1rem auto; max-width: 60rem; padding: 0 5px; } -.padding { - padding: 0 5px; -} /* Link styles */ -a:link, a:visited { +a { text-decoration-color: var(--text-decoration-color); color: var(--link-color); } @@ -106,8 +97,6 @@ background-color: var(--lighter-box-background-color); border-radius: 2px; padding: 2px; } - -/* Readme word breaks to avoid overfull hboxes */ #readme { word-break: break-word; } @@ -115,7 +104,7 @@ /* Table styles */ table { border: var(--lighter-border-color) solid 1px; - border-spacing: 0px; + border-spacing: 0; border-collapse: collapse; } table.wide { @@ -128,24 +117,21 @@ } .pad { padding: 3px 5px; } -th, thead, tfoot { +th, thead, tfoot, tr.title-row > th, th.title-row { background-color: var(--lighter-box-background-color); } th[scope=row] { text-align: left; } -tr.title-row > th, th.title-row, .title-row { - background-color: var(--lighter-box-background-color); -} td > pre { margin: 0; } -#readme > *:last-child { - margin-bottom: 0; -} #readme > *:first-child { margin-top: 0; } +#readme > *:last-child { + margin-bottom: 0; +} /* Table misc and scrolling */ .commit-id { @@ -159,13 +145,11 @@ /* Diff/chunk styles */ .chunk-unchanged { color: grey; } -.chunk-addition { +.chunk-addition, @media (prefers-color-scheme: dark) .chunk-addition { background-color: green; } -@media (prefers-color-scheme: dark) { - .chunk-addition { - background-color: lime; - } +.chunk-addition@media (prefers-color-scheme: dark) { + background-color: lime; } .chunk-deletion { background-color: red; @@ -174,8 +158,7 @@ .chunk-unknown { background-color: yellow; } pre.chunk { - margin-top: 0; - margin-bottom: 0; + margin: 0; } .centering { text-align: center; @@ -228,72 +211,55 @@ font-family: monospace; } /* Form elements */ -textarea { +textarea, input[type=text], input[type=password] { box-sizing: border-box; background-color: var(--lighter-box-background-color); - resize: vertical; -} -textarea, -input[type=text], -input[type=password] { font-family: sans-serif; font-size: smaller; - background-color: var(--lighter-box-background-color); color: var(--text-color); border: none; padding: 0.3rem; width: 100%; - box-sizing: border-box; } td.tdinput, th.tdinput { padding: 0; } -td.tdinput textarea, -td.tdinput input[type=text], -td.tdinput input[type=password], -th.tdinput textarea, -th.tdinput input[type=text], -th.tdinput input[type=password] { +td.tdinput textarea, td.tdinput input[type=text], td.tdinput input[type=password], +th.tdinput textarea, th.tdinput input[type=text], th.tdinput input[type=password] { background-color: transparent; } /* Button styles */ +.btn-primary, .btn-danger, .btn-white, .btn-normal, +input[type=file]::file-selector-button { + border: var(--lighter-border-color) 1px solid; + font-weight: bold; + display: inline-block; + width: auto; + min-width: fit-content; + border-radius: 0; + padding: .1rem .75rem; + font-size: 0.9rem; + transition: background .1s linear; + cursor: pointer; +} .btn-primary { background: var(--primary-color); color: var(--primary-color-contrast); - border: var(--lighter-border-color) 1px solid; - font-weight: bold; } .btn-danger { background: var(--danger-color); color: var(--danger-color-contrast); - border: var(--lighter-border-color) 1px solid; - font-weight: bold; } .btn-white { background: var(--primary-color-contrast); color: var(--primary-color); - border: var(--lighter-border-color) 1px solid; } -.btn-normal, -input[type=file]::file-selector-button { +.btn-normal, input[type=file]::file-selector-button { background: var(--lighter-box-background-color); - border: var(--lighter-border-color) 1px solid !important; color: var(--light-text-color); } -.btn, .btn-white, .btn-danger, .btn-normal, .btn-primary, -input[type=submit], -input[type=file]::file-selector-button { - display: inline-block; - width: auto; - min-width: fit-content; - border-radius: 0; - padding: .1rem .75rem; - font-size: 0.9rem; - transition: background .1s linear; - cursor: pointer; -} -a.btn, a.btn-white, a.btn-danger, a.btn-normal, a.btn-primary { +a.btn { text-decoration: none; } -- 2.48.1