aboutsummaryrefslogtreecommitdiff
path: root/static/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/style.css')
-rw-r--r--static/style.css104
1 files changed, 35 insertions, 69 deletions
diff --git a/static/style.css b/static/style.css
index 765f37a..3dbe22e 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 @@ html {
--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 @@ html, code, pre {
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 @@ html, code, pre {
/* 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 @@ a:link, a:visited {
border-radius: 2px;
padding: 2px;
}
-
-/* Readme word breaks to avoid overfull hboxes */
#readme {
word-break: break-word;
}
@@ -115,7 +104,7 @@ a:link, a:visited {
/* 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 @@ td, th {
.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 @@ td > pre {
.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 @@ td > pre {
background-color: yellow;
}
pre.chunk {
- margin-top: 0;
- margin-bottom: 0;
+ margin: 0;
}
.centering {
text-align: center;
@@ -228,72 +211,55 @@ pre.chunk {
}
/* 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;
}