ac/android_cast
1
0
Fork 0
mirror of git://f0xx.org/android_cast synced 2026-07-29 05:37:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

clock widget

Browse Source
This commit is contained in:
Anton Afanasyeu
2026-05-30 18:52:51 +02:00
parent 6e28ffa93b
commit de524b03f4
2 changed files with 136 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
examples/app_hub/hub.css
View File

@@ -8,6 +8,8 @@
font-display: swap;
}
/* Clockopia kept for legacy only; hub clock uses DSEG14 (see .hub-clock-widget rules). */
@font-face {
font-family: "DSEG14 Classic";
src: url("assets/fonts/DSEG14Classic-Regular.ttf") format("truetype");
@@ -339,7 +341,11 @@
overflow: visible;
background: rgba(18, 24, 34, 0.88);
backdrop-filter: blur(1.5px);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
transition:
transform 0.22s ease,
box-shadow 0.28s ease,
border-color 0.28s ease,
filter 0.22s ease;
cursor: move;
user-select: none;
touch-action: none;
@@ -347,7 +353,7 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
font-family: "DSEG14 Classic", "Consolas", monospace;
font-family: "Clockopia", "Consolas", monospace;
}
.cw-clock-inner {
@@ -379,8 +385,23 @@
.hub-clock-widget:hover {
transform: scale(1.035);
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62), 0 0 26px rgba(155, 205, 255, 0.22);
filter: saturate(1.04);
border-color: rgba(165, 225, 255, 0.98);
box-shadow:
0 16px 42px rgba(0, 0, 0, 0.62),
0 0 0 1px rgba(140, 210, 255, 0.55),
0 0 22px rgba(120, 200, 255, 0.52),
0 0 44px rgba(90, 175, 255, 0.32),
inset 0 0 14px rgba(120, 200, 255, 0.07);
filter: saturate(1.06);
}
.hub-clock-widget.is-dragging {
opacity: 0.25;
transition: opacity 0.12s ease;
}
.hub-clock-widget.is-dragging:hover {
transform: none;
}
.cw-primary-block {
@@ -393,6 +414,14 @@
background: transparent;
}
.cw-row-tz {
margin-top: 15px; /* 15dip between line 1 and line 2 */
}
.cw-row-date {
margin-top: 5px; /* 5dip between line 2 and line 3 */
}
.cw-row {
width: 100%;
min-height: 0;
@@ -569,7 +598,7 @@
letter-spacing: 0.16em;
font-weight: 400;
text-transform: uppercase;
font-family: "DSEG14 Classic", "Consolas", monospace;
font-family: "Digital-7 Mono Italic", "Consolas", monospace;
}
.cw-line-date {
@@ -578,7 +607,7 @@
letter-spacing: 0.12em;
font-weight: 400;
text-transform: uppercase;
font-family: "DSEG14 Classic", "Consolas", monospace;
font-family: "Digital-7 Mono Italic", "Consolas", monospace;
}
.cw-separator {
@@ -607,13 +636,12 @@
.cw-world-cell {
min-width: 0;
width: 100%;
min-height: 178px;
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 20px 4px;
padding: 16px 4px;
background: rgba(20, 28, 40, 0.62);
border-left: 1px solid rgba(255, 255, 255, 0.22);
}
@@ -622,88 +650,109 @@
border-left: 0;
}
.cw-world-stack {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.cw-world-label {
color: #a6b0c2;
font-size: 9.5px;
color: #c5d0e2;
font-size: clamp(0.95rem, 1.6vw, 1.15rem);
letter-spacing: 0.12em;
margin-top: 0;
margin-bottom: 8px;
font-family: "DSEG14 Classic", "Consolas", monospace;
font-weight: 400;
text-transform: uppercase;
margin: 0;
line-height: 1;
flex: 0 0 auto;
font-family: "Digital-7 Mono Italic", "Consolas", monospace;
}
.cw-dial {
width: 100%;
max-width: 70px;
aspect-ratio: 1;
height: auto;
margin-inline: auto;
--cw-dial-size: 90px;
--cw-roman-orbit: 28px;
width: var(--cw-dial-size);
max-width: var(--cw-dial-size);
height: var(--cw-dial-size);
flex: 0 0 auto;
margin: 0;
border-radius: 50%;
position: relative;
border: 2px solid rgba(239, 243, 252, 0.8);
background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 36%), #edf2fb;
box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.14), inset 6px 7px 9px rgba(255, 255, 255, 0.42);
border: none;
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 36%),
#edf2fb;
box-shadow:
0 0 0 4px #b8c6d8,
0 0 0 5px rgba(244, 248, 253, 0.94),
0 0 0 6px #7f94aa,
0 2px 8px rgba(0, 0, 0, 0.38),
inset 0 1px 2px rgba(255, 255, 255, 0.55),
inset 0 -2px 4px rgba(70, 86, 108, 0.22),
inset -4px -4px 8px rgba(0, 0, 0, 0.12),
inset 5px 6px 8px rgba(255, 255, 255, 0.38);
}
.cw-roman {
position: absolute;
left: 50%;
top: 50%;
width: 15px;
height: 15px;
margin: -7.5px;
transform: rotate(calc(var(--i) * 30deg)) translateY(-30px) rotate(calc(var(--i) * -30deg));
font-family: "Times New Roman", serif;
width: 14px;
height: 14px;
margin: -7px;
transform: rotate(calc(var(--i) * 30deg)) translateY(calc(-1 * var(--cw-roman-orbit))) rotate(calc(var(--i) * -30deg));
font-family: "Clockopia", "Consolas", monospace;
font-size: 9px;
font-weight: 700;
color: #223147;
text-align: center;
line-height: 1;
}
.cw-roman-major {
font-size: 11.5px;
font-size: 11px;
opacity: 1;
}
.cw-roman-minor {
font-size: 3.2px;
font-size: 3px;
opacity: 0.25;
}
html[data-clock-font="dseg14-modern"] .hub-clock-widget,
html[data-clock-font="dseg14-modern"] .cw-lcd-text {
font-family: "DSEG14 Modern", "Consolas", monospace;
}
html[data-clock-font="ds-digital"] .hub-clock-widget,
html[data-clock-font="ds-digital"] .cw-lcd-text {
font-family: "DS-Digital", "Consolas", monospace;
}
html[data-clock-font="digital-7-mono-italic"] .hub-clock-widget,
html[data-clock-font="digital-7-mono-italic"] .cw-lcd-text {
font-family: "Digital-7 Mono Italic", "Consolas", monospace;
}
.cw-lcd-text {
font-family: "DSEG14 Classic", "Consolas", monospace;
/* Mixed clock typography: line 1 DSEG14, lines 2–3 Digital-7, rest Clockopia */
.hub-clock-widget .cw-line-time,
.hub-clock-widget .cw-line-time .cw-lcd-text,
.hub-clock-widget .cw-time-main,
.hub-clock-widget .cw-time-main .cw-lcd-text {
font-family: "DSEG14 Classic", "Consolas", monospace !important;
font-variant-numeric: tabular-nums;
}
.hub-clock-widget .cw-line-region,
.hub-clock-widget .cw-line-region.cw-lcd-text,
.hub-clock-widget .cw-line-date,
.hub-clock-widget .cw-line-date.cw-lcd-text,
.hub-clock-widget .cw-world-label {
font-family: "Digital-7 Mono Italic", "Consolas", monospace !important;
font-variant-numeric: tabular-nums;
}
.hub-clock-widget .cw-world-section,
.hub-clock-widget .cw-roman {
font-family: "Clockopia", "Consolas", monospace !important;
}
.cw-resize-handle {
position: absolute;
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
color: rgba(220, 236, 255, 0.9);
filter: drop-shadow(0 0 4px rgba(150, 200, 255, 0.35));
pointer-events: auto;
background: transparent;
box-sizing: border-box;
display: none !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
}
.hub-clock-widget:hover .cw-resize-handle {
display: flex !important;
background: transparent !important;
}
.cw-resize-handle-visual {