body {
margin: 0;
font-family: sans-serif;
+ font-size: 12pt;
line-height: 150%;
}
input {
- border: 1px solid #999999;
+ border: 1px solid #dbdbdb;
border-radius: 3px;
font-size: 1.0em;
}
background-color: #f5f5f5;
}
-.navbar {
- margin: 0;
- padding: 15px;
- padding-top: 10px;
- padding-bottom: 10px;
- line-height: 150%;
+nav {
border-bottom: 1px solid #ccc;
background-color: #f5f5f5;
+ padding: 10px;
+ padding-left: calc(max(50% - 400px, 0px) + 15px);
+ padding-right: calc(max(50% - 400px, 0px) + 15px);
}
-.navbar a {
+nav a, nav .link {
margin-right: 10px;
}
-.navbar form a {
- margin-left: 10px;
- font-size: 1.0em;
- font-weight: bold;
-}
-
-#container {
- max-width: 800px;
+nav img {
+ vertical-align: middle;
}
.page {
- margin: 15px;
+ max-width: 800px;
+ position: relative;
+ left: calc(max(-400px,-50%) + 50%);
+ padding: 15px;
}
.page img {
height: 16px;
}
+footer {
+ margin-top: 15px;
+ border-top: 1px dashed #ccc;
+ color: #666;
+ font-size: 10pt;
+}
+
@media screen and (max-width: 480px) {
input {
input[type=text] {
width: 100px;
}
+
+ nav img {
+ display: none;
+ }
}
@media screen and (max-width: 600px) {
- .navbar form a {
- display: none;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #202124;
+ color: #bdc1c6;
+ }
+
+ a {
+ color: #8ab4f8;
+ }
+
+ nav {
+ background-color: #373e48;
+ border-bottom: 1px solid #666;
+ }
+
+ footer {
+ border-top: 1px dashed #666;
+ color: #999;
+ }
+
+ input {
+ border: 1px solid #666;
+ }
+
+ tr:hover {
+ background-color: #373e48;
}
}