131 lines
3.0 KiB
CSS
131 lines
3.0 KiB
CSS
:root {
|
|
--green: #2ecc40;
|
|
--blue: #0074d9;
|
|
--yellow: #ffdc00;
|
|
--red: #ff4136;
|
|
--black: #000;
|
|
--white: #fff;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: #444;
|
|
color: #eee;
|
|
font-family: system-ui, sans-serif;
|
|
}
|
|
|
|
main {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
h1 { letter-spacing: 0.3em; }
|
|
|
|
section { margin: 1.5rem 0; }
|
|
|
|
#countdown {
|
|
font-family: ui-monospace, monospace;
|
|
font-size: clamp(2rem, 9vw, 4rem);
|
|
font-weight: bold;
|
|
background: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
#zone-label { text-transform: uppercase; letter-spacing: 0.2em; }
|
|
|
|
#zone-bar {
|
|
position: relative;
|
|
display: flex;
|
|
height: 14px;
|
|
margin: 0.75rem auto;
|
|
border: 1px solid #222;
|
|
}
|
|
#zone-bar span { flex: 1 1 0; }
|
|
#zone-marker {
|
|
position: absolute;
|
|
top: -6px;
|
|
width: 3px;
|
|
height: 26px;
|
|
background: #f0f;
|
|
transition: left 0.2s linear;
|
|
}
|
|
|
|
#the-button {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 50%;
|
|
font-size: 1.6rem;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
border: 6px solid #222;
|
|
box-shadow: 0 8px 0 #222;
|
|
transition: transform 0.05s;
|
|
}
|
|
#the-button:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 2px 0 #222; }
|
|
#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; }
|
|
|
|
#countdown.zone-green { color: var(--green); }
|
|
#countdown.zone-blue { color: var(--blue); }
|
|
#countdown.zone-yellow { color: var(--yellow); }
|
|
#countdown.zone-red { color: var(--red); }
|
|
#countdown.zone-black { color: var(--black); }
|
|
#countdown.zone-white { color: var(--white); }
|
|
|
|
.swatch {
|
|
display: inline-block;
|
|
padding: 0 0.4em;
|
|
margin: 0 0.15em;
|
|
border: 1px solid #222;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
table {
|
|
margin: 0.5rem auto;
|
|
border-collapse: collapse;
|
|
min-width: 60%;
|
|
}
|
|
th, td { padding: 0.3rem 0.6rem; border-bottom: 1px solid #555; }
|
|
|
|
input, form button {
|
|
font-size: 1rem;
|
|
padding: 0.4rem 0.8rem;
|
|
}
|
|
|
|
.share-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin: 0.5rem 0 1rem;
|
|
}
|
|
|
|
.share-link {
|
|
display: inline-block;
|
|
padding: 0.45rem 0.8rem;
|
|
border: 1px solid #bbb;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.share-link:hover, .share-link:focus-visible { background: #666; }
|
|
.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; }
|