Gaming/the-button
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

catppuccin

Browse Source
This commit is contained in:
Eric Meehan -X (ermeehan - ACTALENT SERVICES LLC at Cisco)
2026-10-18 16:31:22 -04:00
parent c86d9792cc
commit ca524840cf
1 changed files with 67 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+67 -26
View File
@@ -1,18 +1,33 @@
:root { :root {
--green: #2ecc40; --rosewater: #f5e0dc;
--blue: #0074d9; --flamingo: #f2cdcd;
--yellow: #ffdc00; --pink: #f5c2e7;
--red: #ff4136; --mauve: #cba6f7;
--black: #000; --red: #f38ba8;
--white: #fff; --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; } * { box-sizing: border-box; }
body { body {
margin: 0; margin: 0;
background: #444; background: var(--base);
color: #eee; color: var(--text);
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
} }
@@ -42,7 +57,9 @@ section { margin: 1.5rem 0; }
display: flex; display: flex;
height: 14px; height: 14px;
margin: 0.75rem auto; 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-bar span { flex: 1 1 0; }
#zone-marker { #zone-marker {
@@ -50,7 +67,8 @@ section { margin: 1.5rem 0; }
top: -6px; top: -6px;
width: 3px; width: 3px;
height: 26px; height: 26px;
background: #f0f; background: var(--mauve);
box-shadow: 0 0 4px var(--crust);
transition: left 0.2s linear; transition: left 0.2s linear;
} }
@@ -61,19 +79,19 @@ section { margin: 1.5rem 0; }
font-size: 1.6rem; font-size: 1.6rem;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
border: 6px solid #222; border: 6px solid var(--mantle);
box-shadow: 0 8px 0 #222; box-shadow: 0 8px 0 var(--crust);
transition: transform 0.05s; 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; } #the-button:disabled { cursor: not-allowed; opacity: 0.5; }
.zone-green { background: var(--green); color: #000; } .zone-green { background: var(--green); color: var(--crust); }
.zone-blue { background: var(--blue); color: #fff; } .zone-blue { background: var(--blue); color: var(--crust); }
.zone-yellow { background: var(--yellow); color: #000; } .zone-yellow { background: var(--yellow); color: var(--crust); }
.zone-red { background: var(--red); color: #fff; } .zone-red { background: var(--red); color: var(--crust); }
.zone-black { background: var(--black); color: #fff; border-color: #888 !important; } .zone-black { background: var(--mantle); color: var(--text); border-color: var(--overlay) !important; }
.zone-white { background: var(--white); color: #000; } .zone-white { background: var(--text); color: var(--crust); }
#countdown.zone-green { color: var(--green); } #countdown.zone-green { color: var(--green); }
#countdown.zone-blue { color: var(--blue); } #countdown.zone-blue { color: var(--blue); }
@@ -86,7 +104,7 @@ section { margin: 1.5rem 0; }
display: inline-block; display: inline-block;
padding: 0 0.4em; padding: 0 0.4em;
margin: 0 0.15em; margin: 0 0.15em;
border: 1px solid #222; border: 1px solid var(--overlay);
border-radius: 3px; border-radius: 3px;
} }
@@ -95,13 +113,36 @@ table {
border-collapse: collapse; border-collapse: collapse;
min-width: 60%; 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; font-size: 1rem;
padding: 0.4rem 0.8rem; 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 { .share-links {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -114,17 +155,17 @@ input, form button {
.share-link { .share-link {
display: inline-block; display: inline-block;
padding: 0.45rem 0.8rem; padding: 0.45rem 0.8rem;
border: 1px solid #bbb; border: 1px solid var(--overlay);
border-radius: 4px; border-radius: 4px;
color: #fff; color: var(--text);
text-decoration: none; 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; } .share-link[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
#mastodon-instance { max-width: 100%; } #mastodon-instance { max-width: 100%; }
#share-controls label { display: block; } #share-controls label { display: block; }
.error { color: var(--red); } .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); }