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

sync

Browse Source
This commit is contained in:
Anton Afanasyeu
2026-05-28 14:10:09 +02:00
parent 2b7397edd2
commit eebee1864d
2 changed files with 180 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
examples/app_hub/hub.css
View File

@@ -40,6 +40,18 @@
margin-bottom: 8px;
}
.hub-title-with-thunder {
position: relative;
display: inline-block;
max-width: 100%;
}
.hub-title-with-thunder .hub-title {
margin: 0;
position: relative;
z-index: 1;
}
.hub-logo-mark {
width: 56px;
height: 42px;
@@ -47,7 +59,7 @@
}
.hub-title {
margin: 0 0 8px;
margin: 0 0 4px;
font-size: 2.45rem;
font-weight: 800;
line-height: 1.02;
@@ -55,9 +67,15 @@
}
.hub-thunder {
width: clamp(220px, 34vw, 340px);
position: absolute;
left: 50%;
top: 50px;
width: 150%;
height: auto;
margin-top: -2px;
margin: 0;
transform: translateX(-50%);
z-index: 0;
pointer-events: none;
filter: drop-shadow(0 0 8px rgba(170, 220, 255, 0.35));
}
@@ -171,23 +189,52 @@
.hub-clock-widget {
position: fixed;
left: calc(50% + 290px);
top: calc(50% - 300px);
width: min(420px, 42vw);
min-width: 330px;
right: 24px;
top: 24px;
left: auto;
width: 420px;
z-index: 3;
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.48);
border-radius: 18px;
overflow: hidden;
background: linear-gradient(180deg, rgba(18, 24, 34, 0.92), rgba(13, 18, 28, 0.9));
overflow: visible;
background: rgba(226, 34, 34, 0.5);
backdrop-filter: blur(1.5px);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
cursor: move;
user-select: none;
touch-action: none;
padding: 30px;
padding: 60px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.cw-clock-inner {
flex: 1;
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(180deg, rgba(18, 24, 34, 0.92), rgba(13, 18, 28, 0.9));
}
.cw-clock-inner > * {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.cw-line {
width: 100%;
max-width: 100%;
box-sizing: border-box;
text-align: center;
}
.hub-clock-widget:hover {
@@ -196,46 +243,40 @@
filter: saturate(1.04);
}
.cw-primary-block {
padding: 0;
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
overflow: hidden;
background: rgba(0, 180, 80, 0.35);
}
.cw-row {
width: 100%;
display: grid;
border-top: 1px solid rgba(255, 255, 255, 0.32);
min-height: 0;
box-sizing: border-box;
}
.cw-row:first-child { border-top: 0; }
.cw-row-main { grid-template-columns: 1fr; }
.cw-row-mid { grid-template-columns: repeat(4, 1fr); }
.cw-row-world { grid-template-columns: repeat(3, 1fr); }
.cw-cell {
border-left: 1px solid rgba(255, 255, 255, 0.32);
min-height: 42px;
padding: 6px;
}
.cw-cell:first-child { border-left: 0; }
.cw-main-cell {
min-height: 168px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
padding: 0;
background: linear-gradient(180deg, rgba(30, 40, 28, 0.85), rgba(20, 28, 20, 0.85));
}
.cw-line-time {
width: 100%;
.cw-row-clock {
display: flex;
justify-content: center;
align-items: end;
overflow: hidden;
container-type: inline-size;
padding: 16px 0 6px;
}
.cw-line-time .cw-time-main {
font-weight: 800;
}
.cw-row-tz,
.cw-row-date {
display: flex;
align-items: center;
justify-content: center;
}
.cw-time-main {
display: inline-flex;
align-items: flex-end;
@@ -243,8 +284,13 @@
gap: 2px;
line-height: 1;
font-weight: 700;
width: 100%;
width: fit-content;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
border: 1px solid rgba(170, 255, 200, 0.95);
border-radius: 8px;
padding: 4px 6px;
}
.ot-lcd-line {
@@ -254,12 +300,28 @@
}
.ot-lcd-bold .ot-glyph-wrap--bold {
transform: scale(1.12, 1.2);
transform: scale(1.08, 1.12);
transform-origin: bottom center;
}
#cw-hm-lcd .ot-glyph {
height: 68px;
height: 136px;
width: auto;
max-width: 100%;
}
@container (max-width: 300px) {
#cw-hm-lcd .ot-glyph {
height: 108px;
}
.ot-lcd-sec .ot-glyph {
height: 26px;
}
.ot-lcd-tz .ot-glyph {
height: 24px;
}
}
.ot-lcd-sec {
@@ -291,7 +353,8 @@
}
.ot-glyph-wrap--bold {
transform: scale(1.08, 1.14);
transform: scale(1.06, 1.1);
transform-origin: bottom center;
}
.ot-glyph {
@@ -318,8 +381,6 @@
letter-spacing: 0.16em;
font-weight: 300;
text-transform: uppercase;
width: 100%;
text-align: center;
}
.cw-line-date {
@@ -328,22 +389,47 @@
letter-spacing: 0.12em;
font-weight: 400;
text-transform: uppercase;
width: 100%;
text-align: center;
}
.cw-row-mid {
display: none;
.cw-separator {
margin: 5px 0;
height: 2px;
width: 100%;
border: 0;
background: linear-gradient(
90deg,
rgba(239, 243, 252, 0) 0%,
rgba(239, 243, 252, 0.5) 50%,
rgba(239, 243, 252, 0) 100%
);
}
.cw-world-section {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
max-width: 100%;
border-top: 0;
justify-items: center;
background: rgba(40, 110, 255, 0.35);
}
.cw-world-cell {
min-width: 0;
width: 100%;
min-height: 178px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 25px 6px;
padding: 20px 4px;
background: rgba(20, 28, 40, 0.62);
border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.cw-world-cell:first-child {
border-left: 0;
}
.cw-world-label {
@@ -355,8 +441,11 @@
}
.cw-dial {
width: 95px;
height: 95px;
width: 100%;
max-width: 70px;
aspect-ratio: 1;
height: auto;
margin-inline: auto;
border-radius: 50%;
position: relative;
border: 2px solid rgba(239, 243, 252, 0.8);
@@ -371,7 +460,7 @@
width: 15px;
height: 15px;
margin: -7.5px;
transform: rotate(calc(var(--i) * 30deg)) translateY(-34px) rotate(calc(var(--i) * -30deg));
transform: rotate(calc(var(--i) * 30deg)) translateY(-30px) rotate(calc(var(--i) * -30deg));
font-family: "Times New Roman", serif;
font-size: 9px;
font-weight: 700;
@@ -391,19 +480,34 @@
.cw-resize-handle {
position: absolute;
width: 32px;
height: 32px;
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
z-index: 6;
display: grid;
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;
background: rgba(226, 34, 34, 0.5);
box-sizing: border-box;
}
.cw-resize-handle svg {
width: 16px;
height: 16px;
.cw-resize-handle-visual {
width: 5px;
height: 5px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.cw-resize-handle-visual svg {
width: 100%;
height: 100%;
fill: currentColor;
pointer-events: none;
}
@@ -412,14 +516,19 @@
left: 0;
bottom: 0;
cursor: nesw-resize;
place-items: end start;
}
.cw-resize-sw .cw-resize-handle-visual {
transform: none;
}
.cw-resize-nw {
left: 0;
top: 0;
cursor: nwse-resize;
place-items: start start;
}
.cw-resize-nw .cw-resize-handle-visual {
transform: scaleY(-1);
}
@@ -427,7 +536,9 @@
right: 0;
top: 0;
cursor: nesw-resize;
place-items: start end;
}
.cw-resize-ne .cw-resize-handle-visual {
transform: scale(-1, -1);
}
@@ -435,8 +546,10 @@
right: 0;
bottom: 0;
cursor: nwse-resize;
place-items: end end;
transform: scale(-1, 1);
}
.cw-resize-se .cw-resize-handle-visual {
transform: scaleX(-1);
}
.cw-hand {