| @@ -1,6 +1,6 @@ | ||
| 1 | 1 | /** |
| 2 | - * Desktop Mode — Games hub window styles (Steam-library layout). | |
| 2 | + * OpenStation — Games hub window styles (Steam-library layout). | |
| 3 | 3 | * |
| 4 | 4 | * Scoped to `.desktop-mode-games` so the rules can't leak into |
| 5 | 5 | * other windows. Layout: a compact game grid across the top; the |
| 6 | 6 | * selected game's detail panel (hero + scoreboard + challenges) |
| @@ -11,13 +11,13 @@ | ||
| 11 | 11 | display: flex; |
| 12 | 12 | flex-direction: column; |
| 13 | 13 | height: 100%; |
| 14 | 14 | width: 100%; |
| 15 | - background: var( --wpd-surface, #fff ); | |
| 16 | - color: var( --wpd-fg, #1d2327 ); | |
| 15 | + background: var( --os-ui-surface, #fff ); | |
| 16 | + color: var( --os-ui-fg, #1d2327 ); | |
| 17 | 17 | } |
| 18 | 18 | |
| 19 | -.desktop-mode-games__library { | |
| 19 | +.os-games__library { | |
| 20 | 20 | display: flex; |
| 21 | 21 | flex-direction: column; |
| 22 | 22 | flex: 1; |
| 23 | 23 | min-height: 0; |
| @@ -29,9 +29,9 @@ | ||
| 29 | 29 | /* ------------------------------------------------------------------ |
| 30 | 30 | * Game grid (compact tiles, selection = which detail shows below) |
| 31 | 31 | * ---------------------------------------------------------------- */ |
| 32 | 32 | |
| 33 | -.desktop-mode-games__grid { | |
| 33 | +.os-games__grid { | |
| 34 | 34 | display: flex; |
| 35 | 35 | flex-wrap: wrap; |
| 36 | 36 | gap: 10px; |
| 37 | 37 | align-content: start; |
| @@ -39,22 +39,22 @@ | ||
| 39 | 39 | } |
| 40 | 40 | |
| 41 | 41 | /* Empty state (no games registered): centered in the window body |
| 42 | 42 | instead of hugging the grid's top-left corner. */ |
| 43 | -.desktop-mode-games__grid:has( wpd-empty-state ) { | |
| 43 | +.os-games__grid:has( os-empty-state ) { | |
| 44 | 44 | flex: 1; |
| 45 | 45 | align-content: center; |
| 46 | 46 | justify-content: center; |
| 47 | 47 | } |
| 48 | 48 | |
| 49 | -.desktop-mode-games__tile { | |
| 49 | +.os-games__tile { | |
| 50 | 50 | display: flex; |
| 51 | 51 | align-items: center; |
| 52 | 52 | gap: 10px; |
| 53 | 53 | padding: 8px 14px 8px 10px; |
| 54 | - border: 1px solid var( --wpd-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 54 | + border: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 55 | 55 | border-radius: 10px; |
| 56 | - background: var( --wpd-surface, #fff ); | |
| 56 | + background: var( --os-ui-surface, #fff ); | |
| 57 | 57 | color: inherit; |
| 58 | 58 | cursor: pointer; |
| 59 | 59 | text-align: start; |
| 60 | 60 | transition: box-shadow 0.12s ease, border-color 0.12s ease; |
| @@ -59,19 +59,19 @@ | ||
| 59 | 59 | text-align: start; |
| 60 | 60 | transition: box-shadow 0.12s ease, border-color 0.12s ease; |
| 61 | 61 | } |
| 62 | 62 | |
| 63 | -.desktop-mode-games__tile:hover, | |
| 64 | -.desktop-mode-games__tile:focus-visible { | |
| 63 | +.os-games__tile:hover, | |
| 64 | +.os-games__tile:focus-visible { | |
| 65 | 65 | box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.12 ); |
| 66 | 66 | } |
| 67 | 67 | |
| 68 | -.desktop-mode-games__tile--selected { | |
| 69 | - border-color: var( --wpd-accent, #2271b1 ); | |
| 70 | - box-shadow: inset 0 0 0 1px var( --wpd-accent, #2271b1 ); | |
| 68 | +.os-games__tile--selected { | |
| 69 | + border-color: var( --os-ui-accent, #2271b1 ); | |
| 70 | + box-shadow: inset 0 0 0 1px var( --os-ui-accent, #2271b1 ); | |
| 71 | 71 | } |
| 72 | 72 | |
| 73 | -.desktop-mode-games__tile-visual { | |
| 73 | +.os-games__tile-visual { | |
| 74 | 74 | display: grid; |
| 75 | 75 | place-items: center; |
| 76 | 76 | width: 36px; |
| 77 | 77 | height: 36px; |
| @@ -77,20 +77,20 @@ | ||
| 77 | 77 | height: 36px; |
| 78 | 78 | flex-shrink: 0; |
| 79 | 79 | } |
| 80 | 80 | |
| 81 | -.desktop-mode-games__tile-visual .desktop-mode-games__icon-img { | |
| 81 | +.os-games__tile-visual .os-games__icon-img { | |
| 82 | 82 | max-width: 36px; |
| 83 | 83 | max-height: 36px; |
| 84 | 84 | } |
| 85 | 85 | |
| 86 | -.desktop-mode-games__tile-visual .desktop-mode-games__icon-dashicon { | |
| 86 | +.os-games__tile-visual .os-games__icon-dashicon { | |
| 87 | 87 | font-size: 28px; |
| 88 | 88 | width: 28px; |
| 89 | 89 | height: 28px; |
| 90 | 90 | } |
| 91 | 91 | |
| 92 | -.desktop-mode-games__tile-title { | |
| 92 | +.os-games__tile-title { | |
| 93 | 93 | font-weight: 600; |
| 94 | 94 | font-size: 13px; |
| 95 | 95 | } |
| 96 | 96 | |
| @@ -97,31 +97,31 @@ | ||
| 97 | 97 | /* ------------------------------------------------------------------ |
| 98 | 98 | * Detail panel — hero row + sections |
| 99 | 99 | * ---------------------------------------------------------------- */ |
| 100 | 100 | |
| 101 | -.desktop-mode-games__detail { | |
| 101 | +.os-games__detail { | |
| 102 | 102 | display: flex; |
| 103 | 103 | flex-direction: column; |
| 104 | 104 | gap: 18px; |
| 105 | - border-top: 1px solid var( --wpd-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 105 | + border-top: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 106 | 106 | padding-block-start: 14px; |
| 107 | 107 | } |
| 108 | 108 | |
| 109 | -.desktop-mode-games__detail[hidden] { | |
| 109 | +.os-games__detail[hidden] { | |
| 110 | 110 | display: none; |
| 111 | 111 | } |
| 112 | 112 | |
| 113 | -.desktop-mode-games__hero { | |
| 113 | +.os-games__hero { | |
| 114 | 114 | display: flex; |
| 115 | 115 | align-items: center; |
| 116 | 116 | gap: 16px; |
| 117 | 117 | padding: 16px; |
| 118 | - border: 1px solid var( --wpd-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 118 | + border: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 119 | 119 | border-radius: 12px; |
| 120 | - background: var( --wpd-surface-elevated, #f6f7f7 ); | |
| 120 | + background: var( --os-ui-surface-elevated, #f6f7f7 ); | |
| 121 | 121 | } |
| 122 | 122 | |
| 123 | -.desktop-mode-games__hero-visual { | |
| 123 | +.os-games__hero-visual { | |
| 124 | 124 | display: grid; |
| 125 | 125 | place-items: center; |
| 126 | 126 | width: 72px; |
| 127 | 127 | height: 72px; |
| @@ -127,38 +127,38 @@ | ||
| 127 | 127 | height: 72px; |
| 128 | 128 | flex-shrink: 0; |
| 129 | 129 | } |
| 130 | 130 | |
| 131 | -.desktop-mode-games__hero-visual .desktop-mode-games__icon-img { | |
| 131 | +.os-games__hero-visual .os-games__icon-img { | |
| 132 | 132 | max-width: 72px; |
| 133 | 133 | max-height: 72px; |
| 134 | 134 | } |
| 135 | 135 | |
| 136 | -.desktop-mode-games__hero-visual .desktop-mode-games__icon-dashicon { | |
| 136 | +.os-games__hero-visual .os-games__icon-dashicon { | |
| 137 | 137 | font-size: 56px; |
| 138 | 138 | width: 56px; |
| 139 | 139 | height: 56px; |
| 140 | 140 | } |
| 141 | 141 | |
| 142 | -.desktop-mode-games__hero-info { | |
| 142 | +.os-games__hero-info { | |
| 143 | 143 | flex: 1; |
| 144 | 144 | min-width: 0; |
| 145 | 145 | } |
| 146 | 146 | |
| 147 | -.desktop-mode-games__hero-title { | |
| 147 | +.os-games__hero-title { | |
| 148 | 148 | margin: 0 0 4px; |
| 149 | 149 | font-size: 20px; |
| 150 | 150 | line-height: 1.2; |
| 151 | 151 | } |
| 152 | 152 | |
| 153 | -.desktop-mode-games__hero-desc { | |
| 153 | +.os-games__hero-desc { | |
| 154 | 154 | margin: 0; |
| 155 | - color: var( --wpd-fg-muted, #646970 ); | |
| 155 | + color: var( --os-ui-fg-muted, #646970 ); | |
| 156 | 156 | font-size: 13px; |
| 157 | 157 | max-width: 60ch; |
| 158 | 158 | } |
| 159 | 159 | |
| 160 | -.desktop-mode-games__hero-playtime { | |
| 160 | +.os-games__hero-playtime { | |
| 161 | 161 | display: flex; |
| 162 | 162 | flex-wrap: wrap; |
| 163 | 163 | gap: 4px 24px; |
| 164 | 164 | margin-block-start: 10px; |
| @@ -163,28 +163,28 @@ | ||
| 163 | 163 | gap: 4px 24px; |
| 164 | 164 | margin-block-start: 10px; |
| 165 | 165 | } |
| 166 | 166 | |
| 167 | -.desktop-mode-games__playtime-stat { | |
| 167 | +.os-games__playtime-stat { | |
| 168 | 168 | display: flex; |
| 169 | 169 | flex-direction: column; |
| 170 | 170 | gap: 1px; |
| 171 | 171 | } |
| 172 | 172 | |
| 173 | -.desktop-mode-games__playtime-label { | |
| 174 | - color: var( --wpd-fg-muted, #646970 ); | |
| 173 | +.os-games__playtime-label { | |
| 174 | + color: var( --os-ui-fg-muted, #646970 ); | |
| 175 | 175 | font-size: 11px; |
| 176 | 176 | text-transform: uppercase; |
| 177 | 177 | letter-spacing: 0.04em; |
| 178 | 178 | } |
| 179 | 179 | |
| 180 | -.desktop-mode-games__playtime-value { | |
| 180 | +.os-games__playtime-value { | |
| 181 | 181 | font-size: 14px; |
| 182 | 182 | font-weight: 600; |
| 183 | 183 | font-variant-numeric: tabular-nums; |
| 184 | 184 | } |
| 185 | 185 | |
| 186 | -.desktop-mode-games__hero-actions { | |
| 186 | +.os-games__hero-actions { | |
| 187 | 187 | display: flex; |
| 188 | 188 | align-items: center; |
| 189 | 189 | gap: 10px; |
| 190 | 190 | flex-shrink: 0; |
| @@ -189,21 +189,21 @@ | ||
| 189 | 189 | gap: 10px; |
| 190 | 190 | flex-shrink: 0; |
| 191 | 191 | } |
| 192 | 192 | |
| 193 | -.desktop-mode-games__section { | |
| 193 | +.os-games__section { | |
| 194 | 194 | display: flex; |
| 195 | 195 | flex-direction: column; |
| 196 | 196 | gap: 8px; |
| 197 | 197 | } |
| 198 | 198 | |
| 199 | -.desktop-mode-games__section-heading { | |
| 199 | +.os-games__section-heading { | |
| 200 | 200 | margin: 0; |
| 201 | 201 | font-size: 13px; |
| 202 | 202 | font-weight: 600; |
| 203 | 203 | text-transform: uppercase; |
| 204 | 204 | letter-spacing: 0.04em; |
| 205 | - color: var( --wpd-fg-muted, #646970 ); | |
| 205 | + color: var( --os-ui-fg-muted, #646970 ); | |
| 206 | 206 | } |
| 207 | 207 | |
| 208 | 208 | /* ------------------------------------------------------------------ |
| 209 | 209 | * Scoreboard |
| @@ -208,22 +208,22 @@ | ||
| 208 | 208 | /* ------------------------------------------------------------------ |
| 209 | 209 | * Scoreboard |
| 210 | 210 | * ---------------------------------------------------------------- */ |
| 211 | 211 | |
| 212 | -.desktop-mode-games__scoreboard-table { | |
| 212 | +.os-games__scoreboard-table { | |
| 213 | 213 | max-height: 340px; |
| 214 | 214 | overflow: auto; |
| 215 | - border: 1px solid var( --wpd-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 215 | + border: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 216 | 216 | border-radius: 10px; |
| 217 | 217 | } |
| 218 | 218 | |
| 219 | -.desktop-mode-games__scoreboard-empty { | |
| 219 | +.os-games__scoreboard-empty { | |
| 220 | 220 | padding: 24px; |
| 221 | 221 | text-align: center; |
| 222 | - color: var( --wpd-fg-muted, #646970 ); | |
| 222 | + color: var( --os-ui-fg-muted, #646970 ); | |
| 223 | 223 | } |
| 224 | 224 | |
| 225 | -.desktop-mode-games__pager { | |
| 225 | +.os-games__pager { | |
| 226 | 226 | display: flex; |
| 227 | 227 | align-items: center; |
| 228 | 228 | justify-content: center; |
| 229 | 229 | gap: 10px; |
| @@ -228,11 +228,11 @@ | ||
| 228 | 228 | justify-content: center; |
| 229 | 229 | gap: 10px; |
| 230 | 230 | } |
| 231 | 231 | |
| 232 | -.desktop-mode-games__pager-label { | |
| 232 | +.os-games__pager-label { | |
| 233 | 233 | font-variant-numeric: tabular-nums; |
| 234 | - color: var( --wpd-fg-muted, #646970 ); | |
| 234 | + color: var( --os-ui-fg-muted, #646970 ); | |
| 235 | 235 | } |
| 236 | 236 | |
| 237 | 237 | /* ------------------------------------------------------------------ |
| 238 | 238 | * Challenges |
| @@ -237,9 +237,9 @@ | ||
| 237 | 237 | /* ------------------------------------------------------------------ |
| 238 | 238 | * Challenges |
| 239 | 239 | * ---------------------------------------------------------------- */ |
| 240 | 240 | |
| 241 | -.desktop-mode-games__challenge-list { | |
| 241 | +.os-games__challenge-list { | |
| 242 | 242 | list-style: none; |
| 243 | 243 | margin: 0; |
| 244 | 244 | padding: 0; |
| 245 | 245 | display: flex; |
| @@ -246,36 +246,36 @@ | ||
| 246 | 246 | flex-direction: column; |
| 247 | 247 | gap: 10px; |
| 248 | 248 | } |
| 249 | 249 | |
| 250 | -.desktop-mode-games__challenge { | |
| 250 | +.os-games__challenge { | |
| 251 | 251 | display: flex; |
| 252 | 252 | align-items: center; |
| 253 | 253 | gap: 12px; |
| 254 | 254 | padding: 12px 14px; |
| 255 | - border: 1px solid var( --wpd-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 255 | + border: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 256 | 256 | border-radius: 10px; |
| 257 | 257 | } |
| 258 | 258 | |
| 259 | -.desktop-mode-games__challenge--pending { | |
| 260 | - border-inline-start: 3px solid var( --wpd-accent, #2271b1 ); | |
| 259 | +.os-games__challenge--pending { | |
| 260 | + border-inline-start: 3px solid var( --os-ui-accent, #2271b1 ); | |
| 261 | 261 | } |
| 262 | 262 | |
| 263 | -.desktop-mode-games__challenge-main { | |
| 263 | +.os-games__challenge-main { | |
| 264 | 264 | flex: 1; |
| 265 | 265 | min-width: 0; |
| 266 | 266 | } |
| 267 | 267 | |
| 268 | -.desktop-mode-games__challenge-main p { | |
| 268 | +.os-games__challenge-main p { | |
| 269 | 269 | margin: 0 0 2px; |
| 270 | 270 | } |
| 271 | 271 | |
| 272 | -.desktop-mode-games__challenge-main wpd-relative-time { | |
| 272 | +.os-games__challenge-main os-relative-time { | |
| 273 | 273 | font-size: 12px; |
| 274 | - color: var( --wpd-fg-muted, #646970 ); | |
| 274 | + color: var( --os-ui-fg-muted, #646970 ); | |
| 275 | 275 | } |
| 276 | 276 | |
| 277 | -.desktop-mode-games__challenge-actions { | |
| 277 | +.os-games__challenge-actions { | |
| 278 | 278 | display: flex; |
| 279 | 279 | align-items: center; |
| 280 | 280 | gap: 8px; |
| 281 | 281 | } |
| @@ -283,9 +283,9 @@ | ||
| 283 | 283 | /* ------------------------------------------------------------------ |
| 284 | 284 | * Send-challenge dialog |
| 285 | 285 | * ---------------------------------------------------------------- */ |
| 286 | 286 | |
| 287 | -.desktop-mode-games__challenge-dialog { | |
| 287 | +.os-games__challenge-dialog { | |
| 288 | 288 | display: flex; |
| 289 | 289 | flex-direction: column; |
| 290 | 290 | gap: 12px; |
| 291 | 291 | min-width: 280px; |
| @@ -290,22 +290,22 @@ | ||
| 290 | 290 | gap: 12px; |
| 291 | 291 | min-width: 280px; |
| 292 | 292 | } |
| 293 | 293 | |
| 294 | -.desktop-mode-games__challenge-summary { | |
| 294 | +.os-games__challenge-summary { | |
| 295 | 295 | margin: 0; |
| 296 | 296 | } |
| 297 | 297 | |
| 298 | -.desktop-mode-games__challenge-picked { | |
| 298 | +.os-games__challenge-picked { | |
| 299 | 299 | display: flex; |
| 300 | 300 | align-items: center; |
| 301 | 301 | gap: 10px; |
| 302 | 302 | padding: 8px 10px; |
| 303 | - border: 1px solid var( --wpd-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 303 | + border: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) ); | |
| 304 | 304 | border-radius: 8px; |
| 305 | 305 | } |
| 306 | 306 | |
| 307 | -.desktop-mode-games__challenge-footer { | |
| 307 | +.os-games__challenge-footer { | |
| 308 | 308 | display: flex; |
| 309 | 309 | align-items: center; |
| 310 | 310 | justify-content: flex-end; |
| 311 | 311 | gap: 10px; |
