| 1 |
/** |
| 2 |
* Heartbeat widget styles. Bundled with the widget's JS (Vite |
| 3 |
* emits a separate `widget-heartbeat[.min].css`); the script |
| 4 |
* registration enqueues this CSS alongside the JS handle so it |
| 5 |
* loads on demand the same way the JS does. |
| 6 |
*/ |
| 7 |
|
| 8 |
.desktop-mode-widget-heartbeat { |
| 9 |
display: flex; |
| 10 |
flex-direction: column; |
| 11 |
gap: 8px; |
| 12 |
/* Only side padding here — the framework's `card-body` ships |
| 13 |
* with `padding: 16px` so vertical chrome already exists. |
| 14 |
* Adding more on top creates the dead-space-below-the-bar |
| 15 |
* problem. */ |
| 16 |
padding: 0 12px; |
| 17 |
user-select: none; |
| 18 |
-webkit-user-select: none; |
| 19 |
box-sizing: border-box; |
| 20 |
height: 100%; |
| 21 |
width: 100%; |
| 22 |
overflow: hidden; |
| 23 |
} |
| 24 |
|
| 25 |
/* Push the meta row (and the bar that follows it) to the BOTTOM |
| 26 |
* of the widget container — any vertical slack accumulates as |
| 27 |
* extra breathing room around the heart, not as dead space |
| 28 |
* below the progress bar. */ |
| 29 |
.desktop-mode-widget-heartbeat__meta { |
| 30 |
margin-top: auto; |
| 31 |
} |
| 32 |
|
| 33 |
/* Override the framework card-body's default `padding: 16px` — |
| 34 |
* the heartbeat widget owns its own layout and that padding |
| 35 |
* eats real estate the progress bar needs. */ |
| 36 |
.desktop-mode-widgets__card-body.desktop-mode-widget-heartbeat { |
| 37 |
padding: 8px; |
| 38 |
min-height: 0; |
| 39 |
flex: 1 1 auto; |
| 40 |
} |
| 41 |
|
| 42 |
/* Card-level flex so the body fills the card cleanly. Scoped to |
| 43 |
* cards hosting this widget so others keep their block layout. */ |
| 44 |
.desktop-mode-widgets__card.desktop-mode-widgets__card--heartbeat { |
| 45 |
display: flex; |
| 46 |
flex-direction: column; |
| 47 |
overflow: hidden; |
| 48 |
} |
| 49 |
|
| 50 |
.desktop-mode-widget-heartbeat__stage { |
| 51 |
position: relative; |
| 52 |
display: block; |
| 53 |
/* Stage height matches the available vertical room exactly so |
| 54 |
* the big-beat halo (the concentric glow rings around the |
| 55 |
* heart, which grow on each WP heartbeat tick) has the most |
| 56 |
* space possible without overflowing into the meta/bar row. |
| 57 |
* |
| 58 |
* Card 230 |
| 59 |
* − chrome 32 (6 + 6 padding + 20 px close icon) |
| 60 |
* − body padding 16 (8 + 8, this widget's override) |
| 61 |
* − widget padding 0 (zero vertical — see container rule) |
| 62 |
* − meta row 16 |
| 63 |
* − bar 10 |
| 64 |
* − 2 × 8 px gaps 16 |
| 65 |
* ──────────────────── |
| 66 |
* stage = 140 px |
| 67 |
* |
| 68 |
* The heart + halo geometry in index.ts is tuned so that at |
| 69 |
* the big-beat peak (heart × 1.55, halo × 1.15) the whole |
| 70 |
* lighting effect fits comfortably inside this 140 × ~270 box |
| 71 |
* without the outer ring colliding with the stage edges. */ |
| 72 |
flex: 0 0 140px; |
| 73 |
height: 140px; |
| 74 |
width: 100%; |
| 75 |
overflow: hidden; |
| 76 |
contain: strict; |
| 77 |
} |
| 78 |
.desktop-mode-widget-heartbeat__stage canvas { |
| 79 |
display: block; |
| 80 |
width: 100% !important; |
| 81 |
height: 100% !important; |
| 82 |
max-width: 100%; |
| 83 |
max-height: 100%; |
| 84 |
} |
| 85 |
|
| 86 |
.desktop-mode-widget-heartbeat__meta { |
| 87 |
display: flex; |
| 88 |
align-items: baseline; |
| 89 |
justify-content: space-between; |
| 90 |
font-size: 11px; |
| 91 |
color: rgba( 255, 255, 255, 0.7 ); |
| 92 |
letter-spacing: 0.04em; |
| 93 |
text-transform: uppercase; |
| 94 |
padding: 0 2px; |
| 95 |
} |
| 96 |
|
| 97 |
.desktop-mode-widget-heartbeat__label { |
| 98 |
font-weight: 600; |
| 99 |
} |
| 100 |
|
| 101 |
.desktop-mode-widget-heartbeat__remaining { |
| 102 |
font-variant-numeric: tabular-nums; |
| 103 |
font-size: 13px; |
| 104 |
color: #ff8ba3; |
| 105 |
letter-spacing: 0.02em; |
| 106 |
text-transform: none; |
| 107 |
font-weight: 600; |
| 108 |
} |
| 109 |
|
| 110 |
.desktop-mode-widget-heartbeat__bar { |
| 111 |
position: relative; |
| 112 |
height: 10px; |
| 113 |
border-radius: 5px; |
| 114 |
background: rgba( 255, 255, 255, 0.10 ); |
| 115 |
overflow: hidden; |
| 116 |
box-shadow: |
| 117 |
inset 0 1px 2px rgba( 0, 0, 0, 0.35 ), |
| 118 |
inset 0 0 0 1px rgba( 255, 255, 255, 0.04 ); |
| 119 |
} |
| 120 |
|
| 121 |
.desktop-mode-widget-heartbeat__bar-fill { |
| 122 |
position: absolute; |
| 123 |
left: 0; |
| 124 |
top: 0; |
| 125 |
bottom: 0; |
| 126 |
width: 0%; |
| 127 |
border-radius: 5px; |
| 128 |
background: linear-gradient( |
| 129 |
90deg, |
| 130 |
#ff8ba3 0%, |
| 131 |
#ff4d6d 60%, |
| 132 |
#ff2d5b 100% |
| 133 |
); |
| 134 |
box-shadow: |
| 135 |
0 0 10px rgba( 255, 77, 109, 0.65 ), |
| 136 |
inset 0 1px 0 rgba( 255, 255, 255, 0.35 ), |
| 137 |
inset 0 -1px 0 rgba( 0, 0, 0, 0.18 ); |
| 138 |
} |
| 139 |
|
| 140 |
/* Compact mode — right-click → "Show heart" toggled off. */ |
| 141 |
.desktop-mode-widget-heartbeat--no-heart .desktop-mode-widget-heartbeat__stage { |
| 142 |
display: none; |
| 143 |
} |
| 144 |
.desktop-mode-widget-heartbeat--no-heart { |
| 145 |
justify-content: center; |
| 146 |
} |
| 147 |
|
| 148 |
.desktop-mode-widget-heartbeat--fallback .desktop-mode-widget-heartbeat__fallback { |
| 149 |
display: flex; |
| 150 |
align-items: center; |
| 151 |
justify-content: center; |
| 152 |
height: 100%; |
| 153 |
font-size: 12px; |
| 154 |
color: rgba( 255, 255, 255, 0.6 ); |
| 155 |
text-align: center; |
| 156 |
padding: 12px; |
| 157 |
} |
| 158 |
|
