1 files changed, 231 insertions, 0 deletions

diff --git a/options/style.css b/options/style.css
new file mode 100644
index 0000000..90ad300
--- /dev/null
+++ b/options/style.css
@@ -0,0 +1,231 @@
+:root {
+    color-scheme: dark light;
+
+    --primary-hue: 192;
+    --secondary-hue: 41;
+    --saturation: 100%;
+    --lightness: 25%;
+
+    --primary: hsl(var(--primary-hue), var(--saturation), var(--lightness));
+    --secondary: hsl(var(--secondary-hue), var(--saturation), var(--lightness));
+}
+
+@font-face {
+    font-family: "M PLUS 2";
+    font-display: swap;
+    src: url("MPLUS2.ttf"), local("M PLUS 2");
+}
+
+@font-face {
+    font-family: "M PLUS 1 Code";
+    font-display: swap;
+    src: url("MPLUS1Code.ttf"), local("M PLUS 1 Code");
+}
+
+html {
+    height: 100%;
+    width: 100%;
+    font-family: "M PLUS 2", sans-serif;
+    line-height: 120%;
+    text-rendering: optimizeLegibility;
+}
+
+h1 {
+    font-size: 150%;
+    line-height: 110%;
+}
+
+h2 {
+    font-size: 115%;
+}
+
+h3 {
+    font-size: 100%;
+}
+
+b {
+    color: hsl(var(--secondary-hue), var(--saturation), 30%);
+}
+
+u {
+    text-decoration-color: var(--secondary);
+}
+
+pre, code {
+    font-family: "M PLUS 1 Code", monospace;
+    color: var(--secondary);
+    background-color: #eee;
+    border-radius: 4px;
+}
+
+body {
+    background: hsl(var(--primary-hue), 10%, 99%);
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    height: 100%;
+    width: 100%;
+}
+
+header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;        /* Vertical align */
+    background: hsl(var(--secondary-hue), 10%, 74%);
+    margin-bottom: 1rem;
+    border-bottom: 1px solid black;
+    padding: 0.5rem 0;
+
+    font-size: 125%;
+    line-height: 150%;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+header * {
+    margin: 0.1rem 0.25rem auto;
+}
+
+header > * {
+    display: flex;
+    align-items: center;
+}
+
+header > .left {
+    justify-content: left;
+}
+
+header > .fill {
+    flex: 1;
+}
+
+header > .right {
+    justify-content: right;
+}
+
+header p {
+    margin: 0;
+}
+
+body > header svg,
+body > header img {
+    margin: 0.1rem;
+    height: 2.5rem;
+    width: 2.5rem;
+}
+
+footer {
+    display: flex;
+    background: hsl(var(--primary-hue), 10%, 94%);
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    font-height: 80%;
+    padding: 0.5rem;
+    border-top: 1px solid black;
+}
+
+#banners img {
+    height: 1.5rem;
+}
+
+a {
+    color: var(--secondary);
+    text-decoration: none;
+}
+
+a:hover {
+    color: var(--primary);
+    background-color: #eee;
+    border-radius: 4px;
+}
+
+a:visited {
+    color: var(--primary);
+}
+
+#banners a,
+header a,
+header a:visited {
+    color: currentcolor;
+}
+
+#banners a:hover,
+header a:hover {
+    background-color: transparent;
+    border-radius: 0;
+}
+
+fieldset {
+    background: hsl(var(--primary-hue), 10%, 90%);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+fieldset > * {
+    padding-right: 0.5rem;
+    border-right: 1px solid gray;
+    margin-right: 0.5rem;
+}
+
+fieldset > :last-child {
+    padding-right: initial;
+    border-right: initial;
+    margin-right: initial;
+}
+
+.field-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.field-row label {
+    margin-right: 1rem;
+}
+
+@media (min-width: 1140px) {
+    body > main {
+        margin-left: 14rem;
+        margin-right: 4rem;
+        max-width: 52rem;
+    }
+}
+
+@media (min-width: 800px) and (max-width: 1140px) {
+    body > main {
+        margin-left: 6rem;
+        margin-right: 4rem;
+        max-width: 52rem;
+    }
+}
+
+@media (max-width: 800px) {
+    body > main {
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: hsl(var(--primary-hue), 10%, 17%);
+    }
+
+    fieldset {
+        background: hsl(var(--primary-hue), 10%, 17%);
+    }
+
+    header {
+        background: hsl(var(--secondary-hue), 10%, 12%);
+    }
+
+    footer {
+        background: hsl(var(--primary-hue), 10%, 15%);
+    }
+
+    b {
+        color: hsl(var(--secondary-hue), var(--saturation), 75%);
+    }
+}