thandClaude Opus 4.6
b9345a410f
Simple watchface with second-hand wobble animation, 5-min idle auto-show, W key toggle, light/dark theme colors, backdrop blur from theme settings. Grace period prevents instant dismiss. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
94 lines
2.8 KiB
CSS
94 lines
2.8 KiB
CSS
/* ── Watch overlay ── */
|
|
|
|
#watch-overlay {
|
|
position: fixed; inset: 0; z-index: 9000;
|
|
display: grid; place-items: center;
|
|
cursor: pointer; overflow: hidden;
|
|
opacity: 0; transform: scale(0.985);
|
|
transition: opacity 220ms ease, transform 220ms ease;
|
|
pointer-events: none;
|
|
}
|
|
#watch-overlay.visible {
|
|
opacity: 1; transform: scale(1);
|
|
pointer-events: auto;
|
|
}
|
|
#watch-overlay.hidden { display: none; }
|
|
|
|
#watch-darkening {
|
|
position: absolute; inset: 0;
|
|
background: #000; opacity: 0.8;
|
|
pointer-events: none;
|
|
backdrop-filter: blur(var(--ui-blur-overlay, 0px));
|
|
-webkit-backdrop-filter: blur(var(--ui-blur-overlay, 0px));
|
|
}
|
|
|
|
#watch-analog {
|
|
position: relative; z-index: 1;
|
|
width: min(78vmin, 720px);
|
|
aspect-ratio: 1;
|
|
}
|
|
#watch-dial {
|
|
position: relative; width: 100%; height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
.watch-layer {
|
|
position: absolute; inset: 0;
|
|
transform-origin: 50% 50%;
|
|
will-change: transform;
|
|
}
|
|
.watch-layer svg { display: block; width: 100%; height: 100%; }
|
|
|
|
#watch-layer-digits { z-index: 1; filter: drop-shadow(0 0 12px rgba(0,0,0,0.8)); }
|
|
#watch-layer-hour { z-index: 3; }
|
|
#watch-layer-minute { z-index: 2; }
|
|
#watch-layer-second { z-index: 4; }
|
|
|
|
#watch-second-wobble {
|
|
width: 100%; height: 100%;
|
|
transform-origin: 50% 50%;
|
|
transition: transform 92ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
will-change: transform;
|
|
}
|
|
|
|
/* Dark theme (default): white hands/markers */
|
|
#watch-overlay {
|
|
--watch-svg-markers-fill: #fff;
|
|
--watch-svg-hour-fill: var(--t-accent, #68c6ed);
|
|
--watch-svg-minute-fill: #fff;
|
|
--watch-svg-second-fill: var(--t-accent, #68c6ed);
|
|
}
|
|
|
|
/* Light theme: black hands/markers */
|
|
@media (prefers-color-scheme: light) {
|
|
#watch-overlay {
|
|
--watch-svg-markers-fill: #111;
|
|
--watch-svg-hour-fill: var(--t-accent, #2563eb);
|
|
--watch-svg-minute-fill: #111;
|
|
--watch-svg-second-fill: var(--t-accent, #2563eb);
|
|
}
|
|
#watch-darkening { background: #fff; opacity: 0.85; }
|
|
#watch-layer-digits { filter: drop-shadow(0 0 12px rgba(255,255,255,0.6)); }
|
|
}
|
|
|
|
/* Also detect hyprcrd's own theme mode via body class / data attribute */
|
|
body.light-theme #watch-overlay,
|
|
[data-theme-mode="light"] #watch-overlay {
|
|
--watch-svg-markers-fill: #111;
|
|
--watch-svg-hour-fill: var(--t-accent, #2563eb);
|
|
--watch-svg-minute-fill: #111;
|
|
--watch-svg-second-fill: var(--t-accent, #2563eb);
|
|
}
|
|
body.light-theme #watch-darkening,
|
|
[data-theme-mode="light"] #watch-darkening {
|
|
background: #fff; opacity: 0.85;
|
|
}
|
|
body.light-theme #watch-layer-digits,
|
|
[data-theme-mode="light"] #watch-layer-digits {
|
|
filter: drop-shadow(0 0 12px rgba(255,255,255,0.6));
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#watch-overlay { transition: none !important; }
|
|
#watch-second-wobble { transition: none !important; }
|
|
}
|