Online Stopwatch (StartPauseReset) · MinuteBell
< type="text/tailwindcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
a {
@apply text-blue-600 dark:text-blue-400 no-underline hover:underline cursor-pointer visited:text-purple-700 dark:visited:text-purple-400;
}
kbd {
@apply font-mono bg-slate-100 border border-slate-300 text-slate-800 text-xs rounded-md inline-block py-0.5 px-1.5 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-200;
}
}
@layer components {
a.nav_link {
@apply no-underline hover:no-underline font-bold text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white;
}
a.nav_link_on {
@apply underline hover:underline font-bold text-slate-900 dark:text-white underline-offset-4 decoration-2 decoration-fg-brand;
}
a.hero_btn {
@apply rounded-lg bg-white/10 px-4 py-2 font-semibold backdrop-blur hover:bg-white/15 text-white visited:text-white no-underline hover:no-underline;
}
a.hero_btn_inverted {
@apply rounded-lg bg-white/95 px-4 py-2 font-semibold text-emerald-700 visited:text-emerald-700 shadow hover:bg-white no-underline hover:no-underline;
}
.index_card {
@apply no-underline hover:no-underline;
}
/* ── Tool card container ── */
.card {
@apply rounded-xl bg-white border border-slate-200/70 shadow-sm dark:bg-slate-800/50 dark:border-slate-700/60;
}
/* ── Flex row of controls ── */
.row {
@apply flex flex-wrap items-center gap-2;
}
/* ── Generic button ── */
.btn {
@apply rounded-lg px-4 py-2 text-sm font-medium cursor-pointer transition-colors;
}
.btn.secondary {
@apply border border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800;
}
/* ── Muted / secondary text ── */
.muted {
@apply text-slate-500 dark:text-slate-400;
}
}
:root {
--bg:#ffffff;
--panel:#151922;
--muted:#8b95a7;
--text:#e8eef9;
--accent:#26c281;
--ok:#26c281;
--warn:#ffc857;
--danger:#ff6b6b;
--line:#1f2531;
--theRing:#ffffff;
--ringActive:#26c281;
--progress: 0deg;
--accent-rest:#8a8a8a;
--accent-work:#26c281;
--accent-countdown:#ff0000;
--countdown-ring-color:#26c281;
--countdown-ring-rest-color:#8a8a8a;
--countdown-ring-delay-color:#000000;
}
/* Dark mode: update --bg so ring holes match the dark page background */
.dark {
--bg: #0f172a;
--theRing: #334155;
}
.hero { align-items:start; }
.ringBox { display:grid; place-items:center; padding:12px; }
.myring {
--size: 280px;
width: var(--size);
height: var(--size);
position: relative;
border-radius: 50%;
display:grid;
place-items:center;
}
/* Donut ring drawn with pseudos for cross-browser */
.myring::before { content:"";
position:absolute;
inset:0;
border-radius:50%;
background:
conic-gradient(var(--accent) var(--progress)transparent 0deg),
conic-gradient(var(--theRing) 0 360deg);
box-shadow: inset 0 0 0 5px var(--ringActive);
}
.myring::after { content:"";
position:absolute;
inset:12%;
border-radius:50%;
background: var(--bg);
}
.countdownring {
--size: 280px;
width: var(--size);
height: var(--size);
position: relative;
border-radius: 50%;
display:grid;
place-items:center;
}
/* Donut ring drawn with pseudos for cross-browser */
.countdownring::before { content:"";
position:absolute;
inset:0;
border-radius:50%;
background:
conic-gradient(var(--bg) var(--progress)transparent 0deg),
conic-gradient(var(--countdown-ring-color) 0 360deg);
box-shadow: inset 0 0 0 5px var(--countdown-ring-color);
}
.countdownring::after { content:"";
position:absolute;
inset:12%;
border-radius:50%;
background: var(--bg);
}
.digits { position:absolute; inset:0; font-variant-numeric:tabular-nums; z-index:2; text-align:center; }
.digits .main { padding:0; margin:88px 0 0 0; font-size:60px; letter-spacing:1px; }
.digits .sub { padding:0; margin:0; font-size:11px; color: var(--muted); margin-top: 4px; }
/* stopwatch */
table.stopwatch { width:100%; border-collapse: collapse; }
table.stopwatch thtable.stopwatch td { padding: 8px 10px; border-bottom: 1px solid rgba(148,163,184,0.2); font-variant-numeric: tabular-nums; }
table.stopwatch th { text-align:left; font-weight:600; opacity:.75; }
table.stopwatch tr.fastest td { color: var(--ok); }
table.stopwatch tr.slowest td { color: var(--danger); }
/* ===== Fullscreen mode ===== */
:fullscreen header:-webkit-full-screen header,
:fullscreen footer:-webkit-full-screen footer {
display: none !important;
}
:fullscreen aside:-webkit-full-screen aside {
display: none !important;
}
:fullscreen main:-webkit-full-screen main {
display: flex !important;
align-items: center;
justify-content: center;
min-height: 100dvh;
padding: 2rem !important;
max-width: 100% !important;
}
/* Flatten the grid wrapper so .hero fills the flex container */
:fullscreen .grid:-webkit-full-screen .grid {
display: contents !important;
}
:fullscreen .hero:-webkit-full-screen .hero {
display: flex !important;
flex-direction: column;
align-items: center;
border: none !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
width: 100%;
max-width: 640px;
}
:fullscreen .countdownring:-webkit-full-screen .countdownring,
:fullscreen .myring:-webkit-full-screen .myring {
--size: min(62dvh62dvw) !important;
}
:fullscreen .ringBox:-webkit-full-screen .ringBox {
padding: 24px;
}
:fullscreen .digits .main:-webkit-full-screen .digits .main {
font-size: clamp(64px14dvw120px);
margin-top: clamp(100px22%160px);
}
<>
body.is-fullscreen header,
body.is-fullscreen footer,
body.is-fullscreen aside,
body.is-fullscreen #mobileMenu { display: none !important; }
body.is-fullscreen main {
display: flex !important;
align-items: center;
justify-content: center;
min-height: 100dvh;
max-width: 100% !important;
padding: 0 !important;
}
body.is-fullscreen .grid { display: contents; }
body.is-fullscreen .hero {
display: flex !important;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
padding: 2rem;
gap: 2rem;
}
#swTimerArea {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
body.is-fullscreen #swLapsArea {
flex: 0 0 380px;
max-height: 80dvh;
overflow-y: auto;
}
body.is-fullscreen .myring { --size: min(55dvh55dvw); }
body.is-fullscreen .digits {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
body.is-fullscreen .digits .main {
font-size: clamp(24px12dvmin200px);
margin: 0;
}
body.is-fullscreen .digits .sub {
font-size: clamp(10px1.8dvmin18px);
margin-top: 0.4em;
}
00:00.00
hours:minutes:seconds.hundredths
