catppuccin

static/style.css

@@ -1,18 +1,33 @@
 :root {
-  --green: #2ecc40;
-  --blue: #0074d9;
-  --yellow: #ffdc00;
-  --red: #ff4136;
-  --black: #000;
-  --white: #fff;
+  --rosewater: #f5e0dc;
+  --flamingo: #f2cdcd;
+  --pink: #f5c2e7;
+  --mauve: #cba6f7;
+  --red: #f38ba8;
+  --maroon: #eba0ac;
+  --peach: #fab387;
+  --yellow: #f9e2af;
+  --green: #a6e3a1;
+  --teal: #94e2d5;
+  --sky: #89dceb;
+  --sapphire: #74c7ec;
+  --blue: #89b4fa;
+  --lavender: #b4befe;
+  --text: #cdd6f4;
+  --subtext: #bac2de;
+  --overlay: #6c7086;
+  --surface: #313244;
+  --base: #1e1e2e;
+  --mantle: #181825;
+  --crust: #11111b;
 }
 
 * { box-sizing: border-box; }
 
 body {
   margin: 0;
-  background: #444;
-  color: #eee;
+  background: var(--base);
+  color: var(--text);
   font-family: system-ui, sans-serif;
 }
 
@@ -42,7 +57,9 @@ section { margin: 1.5rem 0; }
   display: flex;
   height: 14px;
   margin: 0.75rem auto;
-  border: 1px solid #222;
+  border: 1px solid var(--overlay);
+  border-radius: 4px;
+  overflow: hidden;
 }
 #zone-bar span { flex: 1 1 0; }
 #zone-marker {
@@ -50,7 +67,8 @@ section { margin: 1.5rem 0; }
   top: -6px;
   width: 3px;
   height: 26px;
-  background: #f0f;
+  background: var(--mauve);
+  box-shadow: 0 0 4px var(--crust);
   transition: left 0.2s linear;
 }
 
@@ -61,19 +79,19 @@ section { margin: 1.5rem 0; }
   font-size: 1.6rem;
   font-weight: bold;
   cursor: pointer;
-  border: 6px solid #222;
-  box-shadow: 0 8px 0 #222;
+  border: 6px solid var(--mantle);
+  box-shadow: 0 8px 0 var(--crust);
   transition: transform 0.05s;
 }
-#the-button:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 2px 0 #222; }
+#the-button:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 2px 0 var(--crust); }
 #the-button:disabled { cursor: not-allowed; opacity: 0.5; }
 
-.zone-green  { background: var(--green);  color: #000; }
-.zone-blue   { background: var(--blue);   color: #fff; }
-.zone-yellow { background: var(--yellow); color: #000; }
-.zone-red    { background: var(--red);    color: #fff; }
-.zone-black  { background: var(--black);  color: #fff; border-color: #888 !important; }
-.zone-white  { background: var(--white);  color: #000; }
+.zone-green  { background: var(--green);  color: var(--crust); }
+.zone-blue   { background: var(--blue);   color: var(--crust); }
+.zone-yellow { background: var(--yellow); color: var(--crust); }
+.zone-red    { background: var(--red);    color: var(--crust); }
+.zone-black  { background: var(--mantle); color: var(--text); border-color: var(--overlay) !important; }
+.zone-white  { background: var(--text);   color: var(--crust); }
 
 #countdown.zone-green  { color: var(--green); }
 #countdown.zone-blue   { color: var(--blue); }
@@ -86,7 +104,7 @@ section { margin: 1.5rem 0; }
   display: inline-block;
   padding: 0 0.4em;
   margin: 0 0.15em;
-  border: 1px solid #222;
+  border: 1px solid var(--overlay);
   border-radius: 3px;
 }
 
@@ -95,13 +113,36 @@ table {
   border-collapse: collapse;
   min-width: 60%;
 }
-th, td { padding: 0.3rem 0.6rem; border-bottom: 1px solid #555; }
+th, td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--surface); }
 
-input, form button {
+input, button {
   font-size: 1rem;
   padding: 0.4rem 0.8rem;
 }
 
+input {
+  border: 1px solid var(--overlay);
+  border-radius: 4px;
+  background: var(--mantle);
+  color: var(--text);
+}
+
+input::placeholder { color: var(--overlay); }
+
+button:not(#the-button) {
+  border: 1px solid var(--overlay);
+  border-radius: 4px;
+  background: var(--surface);
+  color: var(--text);
+  cursor: pointer;
+}
+
+button:not(#the-button):hover { background: var(--overlay); }
+button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
+  outline: 2px solid var(--mauve);
+  outline-offset: 2px;
+}
+
 .share-links {
   display: flex;
   flex-wrap: wrap;
@@ -114,17 +155,17 @@ input, form button {
 .share-link {
   display: inline-block;
   padding: 0.45rem 0.8rem;
-  border: 1px solid #bbb;
+  border: 1px solid var(--overlay);
   border-radius: 4px;
-  color: #fff;
+  color: var(--text);
   text-decoration: none;
 }
 
-.share-link:hover, .share-link:focus-visible { background: #666; }
+.share-link:hover, .share-link:focus-visible { background: var(--surface); }
 .share-link[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
 #mastodon-instance { max-width: 100%; }
 #share-controls label { display: block; }
 
 .error { color: var(--red); }
 
-#rules { text-align: left; font-size: 0.9rem; color: #ccc; }
+#rules { text-align: left; font-size: 0.9rem; color: var(--subtext); }