| @@ -4,9 +4,9 @@ | ||
| 4 | 4 | * registration enqueues this CSS alongside the JS handle so it |
| 5 | 5 | * loads on demand the same way the JS does. |
| 6 | 6 | */ |
| 7 | 7 | |
| 8 | -.desktop-mode-widget-heartbeat { | |
| 8 | +.os-widget-heartbeat { | |
| 9 | 9 | display: flex; |
| 10 | 10 | flex-direction: column; |
| 11 | 11 | gap: 8px; |
| 12 | 12 | /* Only side padding here — the framework's `card-body` ships |
| @@ -25,9 +25,9 @@ | ||
| 25 | 25 | /* Push the meta row (and the bar that follows it) to the BOTTOM |
| 26 | 26 | * of the widget container — any vertical slack accumulates as |
| 27 | 27 | * extra breathing room around the heart, not as dead space |
| 28 | 28 | * below the progress bar. */ |
| 29 | -.desktop-mode-widget-heartbeat__meta { | |
| 29 | +.os-widget-heartbeat__meta { | |
| 30 | 30 | margin-top: auto; |
| 31 | 31 | } |
| 32 | 32 | |
| 33 | 33 | /* Override the framework card-body's default `padding: 16px` — |
| @@ -32,9 +32,9 @@ | ||
| 32 | 32 | |
| 33 | 33 | /* Override the framework card-body's default `padding: 16px` — |
| 34 | 34 | * the heartbeat widget owns its own layout and that padding |
| 35 | 35 | * eats real estate the progress bar needs. */ |
| 36 | -.desktop-mode-widgets__card-body.desktop-mode-widget-heartbeat { | |
| 36 | +.os-widgets__card-body.os-widget-heartbeat { | |
| 37 | 37 | padding: 8px; |
| 38 | 38 | min-height: 0; |
| 39 | 39 | flex: 1 1 auto; |
| 40 | 40 | } |
| @@ -40,15 +40,15 @@ | ||
| 40 | 40 | } |
| 41 | 41 | |
| 42 | 42 | /* Card-level flex so the body fills the card cleanly. Scoped to |
| 43 | 43 | * cards hosting this widget so others keep their block layout. */ |
| 44 | -.desktop-mode-widgets__card.desktop-mode-widgets__card--heartbeat { | |
| 44 | +.os-widgets__card.os-widgets__card--heartbeat { | |
| 45 | 45 | display: flex; |
| 46 | 46 | flex-direction: column; |
| 47 | 47 | overflow: hidden; |
| 48 | 48 | } |
| 49 | 49 | |
| 50 | -.desktop-mode-widget-heartbeat__stage { | |
| 50 | +.os-widget-heartbeat__stage { | |
| 51 | 51 | position: relative; |
| 52 | 52 | display: block; |
| 53 | 53 | /* Stage height matches the available vertical room exactly so |
| 54 | 54 | * the big-beat halo (the concentric glow rings around the |
| @@ -74,9 +74,9 @@ | ||
| 74 | 74 | width: 100%; |
| 75 | 75 | overflow: hidden; |
| 76 | 76 | contain: strict; |
| 77 | 77 | } |
| 78 | -.desktop-mode-widget-heartbeat__stage canvas { | |
| 78 | +.os-widget-heartbeat__stage canvas { | |
| 79 | 79 | display: block; |
| 80 | 80 | width: 100% !important; |
| 81 | 81 | height: 100% !important; |
| 82 | 82 | max-width: 100%; |
| @@ -82,9 +82,9 @@ | ||
| 82 | 82 | max-width: 100%; |
| 83 | 83 | max-height: 100%; |
| 84 | 84 | } |
| 85 | 85 | |
| 86 | -.desktop-mode-widget-heartbeat__meta { | |
| 86 | +.os-widget-heartbeat__meta { | |
| 87 | 87 | display: flex; |
| 88 | 88 | align-items: baseline; |
| 89 | 89 | justify-content: space-between; |
| 90 | 90 | font-size: 11px; |
| @@ -93,13 +93,13 @@ | ||
| 93 | 93 | text-transform: uppercase; |
| 94 | 94 | padding: 0 2px; |
| 95 | 95 | } |
| 96 | 96 | |
| 97 | -.desktop-mode-widget-heartbeat__label { | |
| 97 | +.os-widget-heartbeat__label { | |
| 98 | 98 | font-weight: 600; |
| 99 | 99 | } |
| 100 | 100 | |
| 101 | -.desktop-mode-widget-heartbeat__remaining { | |
| 101 | +.os-widget-heartbeat__remaining { | |
| 102 | 102 | font-variant-numeric: tabular-nums; |
| 103 | 103 | font-size: 13px; |
| 104 | 104 | color: #ff8ba3; |
| 105 | 105 | letter-spacing: 0.02em; |
| @@ -106,9 +106,9 @@ | ||
| 106 | 106 | text-transform: none; |
| 107 | 107 | font-weight: 600; |
| 108 | 108 | } |
| 109 | 109 | |
| 110 | -.desktop-mode-widget-heartbeat__bar { | |
| 110 | +.os-widget-heartbeat__bar { | |
| 111 | 111 | position: relative; |
| 112 | 112 | height: 10px; |
| 113 | 113 | border-radius: 5px; |
| 114 | 114 | background: rgba( 255, 255, 255, 0.10 ); |
| @@ -117,9 +117,9 @@ | ||
| 117 | 117 | inset 0 1px 2px rgba( 0, 0, 0, 0.35 ), |
| 118 | 118 | inset 0 0 0 1px rgba( 255, 255, 255, 0.04 ); |
| 119 | 119 | } |
| 120 | 120 | |
| 121 | -.desktop-mode-widget-heartbeat__bar-fill { | |
| 121 | +.os-widget-heartbeat__bar-fill { | |
| 122 | 122 | position: absolute; |
| 123 | 123 | left: 0; |
| 124 | 124 | top: 0; |
| 125 | 125 | bottom: 0; |
| @@ -137,16 +137,16 @@ | ||
| 137 | 137 | inset 0 -1px 0 rgba( 0, 0, 0, 0.18 ); |
| 138 | 138 | } |
| 139 | 139 | |
| 140 | 140 | /* Compact mode — right-click → "Show heart" toggled off. */ |
| 141 | -.desktop-mode-widget-heartbeat--no-heart .desktop-mode-widget-heartbeat__stage { | |
| 141 | +.os-widget-heartbeat--no-heart .os-widget-heartbeat__stage { | |
| 142 | 142 | display: none; |
| 143 | 143 | } |
| 144 | -.desktop-mode-widget-heartbeat--no-heart { | |
| 144 | +.os-widget-heartbeat--no-heart { | |
| 145 | 145 | justify-content: center; |
| 146 | 146 | } |
| 147 | 147 | |
| 148 | -.desktop-mode-widget-heartbeat--fallback .desktop-mode-widget-heartbeat__fallback { | |
| 148 | +.os-widget-heartbeat--fallback .os-widget-heartbeat__fallback { | |
| 149 | 149 | display: flex; |
| 150 | 150 | align-items: center; |
| 151 | 151 | justify-content: center; |
| 152 | 152 | height: 100%; |
