| 1 |
/** |
| 2 |
* Drafts widget styles. The card chrome (glass, padding) comes from the |
| 3 |
* widget layer; these rules lay out the header + the list of drafts. |
| 4 |
* Built into assets/js/widget-drafts[.min].css by the Vite target. |
| 5 |
*/ |
| 6 |
|
| 7 |
.dm-drafts__header { |
| 8 |
display: flex; |
| 9 |
align-items: center; |
| 10 |
gap: 8px; |
| 11 |
margin-bottom: 8px; |
| 12 |
} |
| 13 |
|
| 14 |
.dm-drafts__title { |
| 15 |
font-size: 13px; |
| 16 |
font-weight: 600; |
| 17 |
} |
| 18 |
|
| 19 |
.dm-drafts__badge { |
| 20 |
display: none; |
| 21 |
min-width: 18px; |
| 22 |
height: 18px; |
| 23 |
padding: 0 5px; |
| 24 |
border-radius: 999px; |
| 25 |
background: color-mix( in srgb, currentColor 16%, transparent ); |
| 26 |
font-size: 11px; |
| 27 |
font-weight: 600; |
| 28 |
line-height: 18px; |
| 29 |
text-align: center; |
| 30 |
opacity: 0.85; |
| 31 |
} |
| 32 |
|
| 33 |
.dm-drafts__badge--visible { |
| 34 |
display: inline-block; |
| 35 |
} |
| 36 |
|
| 37 |
.dm-drafts__empty { |
| 38 |
font-size: 12px; |
| 39 |
opacity: 0.7; |
| 40 |
padding: 6px 0; |
| 41 |
} |
| 42 |
|
| 43 |
.dm-drafts__list { |
| 44 |
display: flex; |
| 45 |
flex-direction: column; |
| 46 |
gap: 2px; |
| 47 |
} |
| 48 |
|
| 49 |
.dm-drafts__row { |
| 50 |
display: flex; |
| 51 |
align-items: center; |
| 52 |
gap: 2px; |
| 53 |
margin: 0 -8px; |
| 54 |
border-radius: 8px; |
| 55 |
} |
| 56 |
|
| 57 |
.dm-drafts__row:hover { |
| 58 |
background: color-mix( in srgb, currentColor 10%, transparent ); |
| 59 |
} |
| 60 |
|
| 61 |
.dm-drafts__row.is-trashing { |
| 62 |
opacity: 0.5; |
| 63 |
pointer-events: none; |
| 64 |
} |
| 65 |
|
| 66 |
.dm-drafts__link { |
| 67 |
flex: 1 1 auto; |
| 68 |
min-width: 0; |
| 69 |
display: flex; |
| 70 |
align-items: baseline; |
| 71 |
justify-content: space-between; |
| 72 |
gap: 10px; |
| 73 |
padding: 6px 8px; |
| 74 |
color: inherit; |
| 75 |
text-decoration: none; |
| 76 |
} |
| 77 |
|
| 78 |
/* |
| 79 |
* Row actions (Trash, Suggest) are `<os-button variant="ghost">` hosts — |
| 80 |
* the component owns the focus ring, disabled semantics and theming; these |
| 81 |
* rules only tune it into a 26px icon square via the documented |
| 82 |
* `--os-ui-button-*` surface and the `button` shadow part. Both stay hidden |
| 83 |
* until the row is hovered or the control takes focus. |
| 84 |
*/ |
| 85 |
.dm-drafts__trash, |
| 86 |
.dm-drafts__spark { |
| 87 |
flex: 0 0 auto; |
| 88 |
opacity: 0; |
| 89 |
transition: opacity 120ms ease-out; |
| 90 |
--os-ui-button-padding: 0; |
| 91 |
--os-ui-button-border: none; |
| 92 |
--os-ui-button-border-radius: 6px; |
| 93 |
--os-ui-button-bg: transparent; |
| 94 |
/* Inherit the card's text color instead of the component's own |
| 95 |
light-theme default — widget cards can be dark glass. */ |
| 96 |
--os-ui-button-fg: currentColor; |
| 97 |
} |
| 98 |
|
| 99 |
.dm-drafts__trash { |
| 100 |
margin-right: 4px; |
| 101 |
} |
| 102 |
|
| 103 |
.dm-drafts__trash::part( button ), |
| 104 |
.dm-drafts__spark::part( button ) { |
| 105 |
width: 26px; |
| 106 |
height: 26px; |
| 107 |
} |
| 108 |
|
| 109 |
.dm-drafts__row:hover .dm-drafts__trash, |
| 110 |
.dm-drafts__row:hover .dm-drafts__spark, |
| 111 |
.dm-drafts__trash:focus-within, |
| 112 |
.dm-drafts__spark:focus-within { |
| 113 |
opacity: 0.65; |
| 114 |
} |
| 115 |
|
| 116 |
.dm-drafts__trash:hover { |
| 117 |
opacity: 1; |
| 118 |
--os-ui-button-bg-hover: color-mix( |
| 119 |
in srgb, |
| 120 |
var( --os-ui-danger, #d63638 ) 22%, |
| 121 |
transparent |
| 122 |
); |
| 123 |
--os-ui-button-fg: var( --dm-drafts-danger, #d63638 ); |
| 124 |
} |
| 125 |
|
| 126 |
.dm-drafts__spark:hover { |
| 127 |
opacity: 1; |
| 128 |
--os-ui-button-bg-hover: color-mix( |
| 129 |
in srgb, |
| 130 |
var( --os-ui-accent, #2271b1 ) 22%, |
| 131 |
transparent |
| 132 |
); |
| 133 |
--os-ui-button-fg: var( --dm-drafts-accent, #2271b1 ); |
| 134 |
} |
| 135 |
|
| 136 |
.dm-drafts__spark[aria-expanded='true'] { |
| 137 |
opacity: 1; |
| 138 |
--os-ui-button-bg: color-mix( |
| 139 |
in srgb, |
| 140 |
var( --os-ui-accent, #2271b1 ) 18%, |
| 141 |
transparent |
| 142 |
); |
| 143 |
--os-ui-button-fg: var( --dm-drafts-accent, #2271b1 ); |
| 144 |
} |
| 145 |
|
| 146 |
.dm-drafts__trash .dashicons, |
| 147 |
.dm-drafts__spark .dashicons { |
| 148 |
pointer-events: none; |
| 149 |
font-size: 16px; |
| 150 |
width: 16px; |
| 151 |
height: 16px; |
| 152 |
line-height: 16px; |
| 153 |
} |
| 154 |
|
| 155 |
/* The shell forces `cursor: default !important`; out-specify it. The |
| 156 |
`<os-button>` controls set their own cursor inside the shadow root, |
| 157 |
which that rule can't reach. */ |
| 158 |
body.os-active .dm-drafts__link { |
| 159 |
cursor: pointer !important; |
| 160 |
} |
| 161 |
|
| 162 |
/* |
| 163 |
* Adaptive accent for text + glyphs. `--os-ui-accent` neat is a mid blue |
| 164 |
* that sinks into a dark glass card; mixing it toward `currentColor` |
| 165 |
* keeps it legible whichever way the card leans. Backgrounds still use |
| 166 |
* the neat token — a low-alpha wash doesn't have a contrast problem. |
| 167 |
*/ |
| 168 |
.dm-drafts__row, |
| 169 |
.dm-drafts__suggest { |
| 170 |
--dm-drafts-accent: color-mix( |
| 171 |
in srgb, |
| 172 |
var( --os-ui-accent, #2271b1 ) 55%, |
| 173 |
currentColor |
| 174 |
); |
| 175 |
--dm-drafts-danger: color-mix( |
| 176 |
in srgb, |
| 177 |
var( --os-ui-danger, #d63638 ) 65%, |
| 178 |
currentColor |
| 179 |
); |
| 180 |
} |
| 181 |
|
| 182 |
/* --- 💡 suggestions panel ------------------------------------------ */ |
| 183 |
|
| 184 |
.dm-drafts__suggest { |
| 185 |
margin: 2px 0 8px; |
| 186 |
padding: 8px; |
| 187 |
border-radius: 8px; |
| 188 |
background: color-mix( in srgb, currentColor 7%, transparent ); |
| 189 |
font-size: 12px; |
| 190 |
display: flex; |
| 191 |
flex-direction: column; |
| 192 |
gap: 8px; |
| 193 |
} |
| 194 |
|
| 195 |
.dm-drafts__suggest-loading { |
| 196 |
display: flex; |
| 197 |
align-items: center; |
| 198 |
gap: 8px; |
| 199 |
opacity: 0.75; |
| 200 |
} |
| 201 |
|
| 202 |
.dm-drafts__suggest-hint { |
| 203 |
font-size: 11px; |
| 204 |
opacity: 0.7; |
| 205 |
font-style: italic; |
| 206 |
} |
| 207 |
|
| 208 |
/* |
| 209 |
* Notices inside the panel (readiness, load failure). |
| 210 |
* |
| 211 |
* `<os-notice>`'s built-in palette is tuned for a light window surface — |
| 212 |
* its text defaults to `--os-ui-fg` (#1d2327) over an 8%-alpha tone wash. |
| 213 |
* A widget card is glass over the wallpaper and can be arbitrarily dark, |
| 214 |
* so that pairing collapses to unreadable. Drive the component's |
| 215 |
* documented color surface from `currentColor` instead: the text tracks |
| 216 |
* whatever the card already proved legible, and the tone survives in the |
| 217 |
* accent stripe + icon, each mixed toward `currentColor` so it stays |
| 218 |
* visible on a dark and a light card alike. |
| 219 |
*/ |
| 220 |
.dm-drafts__notice { |
| 221 |
--os-ui-notice-color: currentColor; |
| 222 |
--os-ui-notice-bg: color-mix( in srgb, currentColor 8%, transparent ); |
| 223 |
--os-ui-notice-border: transparent; |
| 224 |
--os-ui-notice-font: inherit; |
| 225 |
--os-ui-notice-success: color-mix( |
| 226 |
in srgb, |
| 227 |
var( --os-ui-success-fg, #46b450 ) 65%, |
| 228 |
currentColor |
| 229 |
); |
| 230 |
--os-ui-notice-warning: color-mix( |
| 231 |
in srgb, |
| 232 |
var( --os-ui-warning-fg, #dba617 ) 65%, |
| 233 |
currentColor |
| 234 |
); |
| 235 |
--os-ui-notice-error: color-mix( |
| 236 |
in srgb, |
| 237 |
var( --os-ui-danger, #d63638 ) 65%, |
| 238 |
currentColor |
| 239 |
); |
| 240 |
/* Out-specifies the component's own `:host` padding — 10px/14px is |
| 241 |
window-banner scale and reads as a slab inside an 8px panel. */ |
| 242 |
padding: 8px 10px; |
| 243 |
border-radius: 6px; |
| 244 |
} |
| 245 |
|
| 246 |
/* Readiness — read-only diagnosis at the top of the panel, tone-coded |
| 247 |
success when nothing is missing, warning otherwise. */ |
| 248 |
.dm-drafts__readiness-summary { |
| 249 |
font-size: 12px; |
| 250 |
line-height: 1.35; |
| 251 |
} |
| 252 |
|
| 253 |
/* Block + disc, not flex-column: a flex container suppresses the list |
| 254 |
markers, which is what made these read as four orphaned grey lines. */ |
| 255 |
.dm-drafts__readiness-missing { |
| 256 |
margin: 4px 0 0; |
| 257 |
padding-inline-start: 16px; |
| 258 |
font-size: 11.5px; |
| 259 |
line-height: 1.4; |
| 260 |
opacity: 0.9; |
| 261 |
display: block; |
| 262 |
list-style: disc; |
| 263 |
} |
| 264 |
|
| 265 |
.dm-drafts__suggest-group { |
| 266 |
display: flex; |
| 267 |
flex-direction: column; |
| 268 |
gap: 3px; |
| 269 |
} |
| 270 |
|
| 271 |
.dm-drafts__suggest-label { |
| 272 |
font-size: 10px; |
| 273 |
font-weight: 700; |
| 274 |
text-transform: uppercase; |
| 275 |
letter-spacing: 0.04em; |
| 276 |
opacity: 0.72; |
| 277 |
} |
| 278 |
|
| 279 |
/* Suggestion buttons — `<os-button variant="ghost">` tuned to read as |
| 280 |
list rows (title / excerpt) or pills (tags / categories). */ |
| 281 |
.dm-drafts__suggest-item, |
| 282 |
.dm-drafts__suggest-tag { |
| 283 |
--os-ui-button-border: none; |
| 284 |
--os-ui-button-bg: transparent; |
| 285 |
--os-ui-button-fg: currentColor; |
| 286 |
} |
| 287 |
|
| 288 |
.dm-drafts__suggest-item { |
| 289 |
display: flex; |
| 290 |
--os-ui-button-padding: 4px 6px; |
| 291 |
--os-ui-button-border-radius: 6px; |
| 292 |
--os-ui-button-bg-hover: color-mix( in srgb, currentColor 12%, transparent ); |
| 293 |
} |
| 294 |
|
| 295 |
.dm-drafts__suggest-item::part( button ) { |
| 296 |
width: 100%; |
| 297 |
justify-content: flex-start; |
| 298 |
text-align: start; |
| 299 |
font-size: 12px; |
| 300 |
font-weight: 400; |
| 301 |
line-height: 1.35; |
| 302 |
} |
| 303 |
|
| 304 |
.dm-drafts__suggest-tags { |
| 305 |
display: flex; |
| 306 |
flex-wrap: wrap; |
| 307 |
gap: 4px; |
| 308 |
} |
| 309 |
|
| 310 |
.dm-drafts__suggest-tag { |
| 311 |
--os-ui-button-padding: 2px 8px; |
| 312 |
--os-ui-button-border-radius: 999px; |
| 313 |
--os-ui-button-border: 1px solid |
| 314 |
color-mix( in srgb, currentColor 30%, transparent ); |
| 315 |
--os-ui-button-bg-hover: color-mix( |
| 316 |
in srgb, |
| 317 |
var( --os-ui-accent, #2271b1 ) 16%, |
| 318 |
transparent |
| 319 |
); |
| 320 |
} |
| 321 |
|
| 322 |
.dm-drafts__suggest-tag::part( button ) { |
| 323 |
font-size: 11px; |
| 324 |
font-weight: 400; |
| 325 |
} |
| 326 |
|
| 327 |
.dm-drafts__suggest-tag:hover { |
| 328 |
--os-ui-button-fg: var( --dm-drafts-accent, #2271b1 ); |
| 329 |
--os-ui-button-border: 1px solid |
| 330 |
color-mix( in srgb, var( --dm-drafts-accent, #2271b1 ) 55%, transparent ); |
| 331 |
} |
| 332 |
|
| 333 |
/* |
| 334 |
* Applied — the suggestions the user accepted. |
| 335 |
* |
| 336 |
* A widget card is glass over an arbitrary wallpaper, so this state can't |
| 337 |
* ride on a hue: the LABEL stays at the card's own text color, which is |
| 338 |
* the one color the card already guarantees is readable. What marks it as |
| 339 |
* applied is a currentColor-derived wash, a tinted border and a ✓ — |
| 340 |
* shape and fill, both of which survive any background. |
| 341 |
* |
| 342 |
* Note also that this is not the component's `disabled` state: that dims |
| 343 |
* to 50% opacity, halving contrast exactly where we can least afford it. |
| 344 |
*/ |
| 345 |
.dm-drafts__suggest-item.is-applied, |
| 346 |
.dm-drafts__suggest-tag.is-applied { |
| 347 |
--dm-drafts-applied: color-mix( |
| 348 |
in srgb, |
| 349 |
var( --os-ui-success-fg, #46b450 ) 55%, |
| 350 |
currentColor |
| 351 |
); |
| 352 |
--os-ui-button-fg: currentColor; |
| 353 |
--os-ui-button-bg: color-mix( in srgb, currentColor 15%, transparent ); |
| 354 |
/* Same as the resting fill — an applied suggestion is inert, so it |
| 355 |
must not light up under the pointer as if it were still actionable. */ |
| 356 |
--os-ui-button-bg-hover: color-mix( in srgb, currentColor 15%, transparent ); |
| 357 |
--os-ui-button-border: 1px solid |
| 358 |
color-mix( in srgb, var( --dm-drafts-applied ) 60%, transparent ); |
| 359 |
opacity: 1; |
| 360 |
cursor: default; |
| 361 |
} |
| 362 |
|
| 363 |
/* Slotted, not a `::after` on the host — a shadow host's own |
| 364 |
pseudo-elements have no slot to render into. */ |
| 365 |
.dm-drafts__applied-check { |
| 366 |
margin-inline-start: 4px; |
| 367 |
font-weight: 700; |
| 368 |
color: var( --dm-drafts-applied, currentColor ); |
| 369 |
} |
| 370 |
|
| 371 |
.dm-drafts__name { |
| 372 |
flex: 1 1 auto; |
| 373 |
min-width: 0; |
| 374 |
font-size: 13px; |
| 375 |
overflow: hidden; |
| 376 |
text-overflow: ellipsis; |
| 377 |
white-space: nowrap; |
| 378 |
} |
| 379 |
|
| 380 |
.dm-drafts__time { |
| 381 |
flex: 0 0 auto; |
| 382 |
font-size: 11px; |
| 383 |
opacity: 0.6; |
| 384 |
font-variant-numeric: tabular-nums; |
| 385 |
} |
| 386 |
|
