mote.css 0.13.1 → 0.13.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -1
- package/README.md +2 -2
- package/mote.components.css +8 -1
- package/mote.components.min.css +2 -2
- package/mote.css +1 -1
- package/mote.min.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.13.2] - 2026-10-31
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- Kept a badge that is a direct child of `.mote-card` shaped like a marker instead of allowing the card's column-flex layout to stretch it across the card.
|
|
15
|
+
|
|
16
|
+
### Changed (documentation — round-18 findings)
|
|
17
|
+
|
|
18
|
+
- Made the narrow own-row header navigation recipe easier to discover from the header layout guidance.
|
|
19
|
+
- Clarified that `.mote-header` opts into the sticky translucent site-shell treatment, not only the header's appearance.
|
|
20
|
+
- Warned that mote's grouped definition-list wrappers use `display: contents` and must not be replaced with another display value without recreating the intended pair alignment.
|
|
21
|
+
- Made the phone-record contract's all-or-nothing copy instruction and the `--records-label` widening option more explicit.
|
|
22
|
+
- Expanded the paper checklist with page-break guidance for metadata blocks, forms, table rows, headings, and footers.
|
|
23
|
+
|
|
10
24
|
## [0.13.1] - 2026-10-30
|
|
11
25
|
|
|
12
26
|
### Fixed (documentation — round-17 findings)
|
|
@@ -1005,7 +1019,8 @@ Components:
|
|
|
1005
1019
|
- Opt-in helpers: `.mote-container`, `.mote-muted`, `.mote-note` surfaces.
|
|
1006
1020
|
- Element gallery demo page (`demo.html`).
|
|
1007
1021
|
|
|
1008
|
-
[Unreleased]: https://gitlab.com/abmach/mote/compare/v0.13.
|
|
1022
|
+
[Unreleased]: https://gitlab.com/abmach/mote/compare/v0.13.2...HEAD
|
|
1023
|
+
[0.13.2]: https://gitlab.com/abmach/mote/compare/v0.13.1...v0.13.2
|
|
1009
1024
|
[0.13.1]: https://gitlab.com/abmach/mote/compare/v0.13.0...v0.13.1
|
|
1010
1025
|
[0.13.0]: https://gitlab.com/abmach/mote/compare/v0.12.1...v0.13.0
|
|
1011
1026
|
[0.12.1]: https://gitlab.com/abmach/mote/compare/v0.12.0...v0.12.1
|
package/README.md
CHANGED
|
@@ -152,7 +152,7 @@ mote is class-optional by design — elements are styled from tags alone; these
|
|
|
152
152
|
| Component | Hook |
|
|
153
153
|
|---|---|
|
|
154
154
|
| Document layout (landmark grid) | `.mote-doc` on `<body>` — `:has()` reads your `header`/`nav`/`main`/`aside`/`footer` |
|
|
155
|
-
| Sticky site header / nav pills | `body > header` — semantic; `.mote-header
|
|
155
|
+
| Sticky site header / nav pills | `body > header` — semantic; `.mote-header` opts wrapped shells into the same sticky treatment, while `.mote-nav` styles navigation the landmark selector cannot see; goes static on paper |
|
|
156
156
|
| Semantic buttons (gated) | `class="mote-success"` etc. on the button itself — themed sections never recolor actions |
|
|
157
157
|
| Ghost buttons | `.mote-ghost` — transparent fill; status tints from the button's own class (gated like solids) |
|
|
158
158
|
| Solid button on any element | `.mote-btn` — the full solid recipe for anchors, spans; status classes gated |
|
|
@@ -185,7 +185,7 @@ mote is class-optional by design — elements are styled from tags alone; these
|
|
|
185
185
|
| Breadcrumbs | `nav[aria-label="breadcrumb"]` — semantic, no class |
|
|
186
186
|
| Card grids | `.mote-grid` — auto-fill columns from the container, no breakpoints |
|
|
187
187
|
| Cards | `.mote-card` — normalizes content: alignment reads start even inside centered regions |
|
|
188
|
-
| Badges | `.mote-badge` — gated: status from the badge's own class, never inherited; scales with surrounding text but never enlarges with headings |
|
|
188
|
+
| Badges | `.mote-badge` — gated: status from the badge's own class, never inherited; scales with surrounding text but never enlarges with headings; direct children of `.mote-card` keep marker width |
|
|
189
189
|
| Avatars | `.mote-avatar` |
|
|
190
190
|
| Skeleton / spinner | `.mote-skeleton`, `.mote-spinner` |
|
|
191
191
|
| Tooltips | `[popover].mote-tooltip` + `popovertarget` button |
|
package/mote.components.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* mote.components.css — opt-in components for mote.css.
|
|
3
|
-
* v0.13.
|
|
3
|
+
* v0.13.2 · MIT
|
|
4
4
|
* https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
|
|
5
5
|
*
|
|
6
6
|
* Requires mote.css loaded first (provides the --mote-* tokens).
|
|
@@ -75,6 +75,13 @@
|
|
|
75
75
|
color: var(--mote-accent-deep);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
+
/* Cards are column flex containers, whose default cross-axis alignment
|
|
79
|
+
stretches direct children. Keep a direct badge shaped like its marker;
|
|
80
|
+
badges nested in ordinary block content are unaffected. */
|
|
81
|
+
.mote-card > .mote-badge {
|
|
82
|
+
align-self: flex-start;
|
|
83
|
+
}
|
|
84
|
+
|
|
78
85
|
.mote-badge:where(.mote-success, .mote-warning, .mote-error, .mote-info, .mote-muted) {
|
|
79
86
|
background: var(--mote-status-soft);
|
|
80
87
|
color: var(--mote-status);
|
package/mote.components.min.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* mote.components.css — opt-in components for mote.css.
|
|
3
|
-
* v0.13.
|
|
3
|
+
* v0.13.2 · MIT
|
|
4
4
|
* https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
|
|
5
5
|
*
|
|
6
6
|
* Requires mote.css loaded first (provides the --mote-* tokens).
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* popovers, dialogs, exclusive <details> groups. No JavaScript required.
|
|
9
9
|
*
|
|
10
10
|
* MIT License.
|
|
11
|
-
*/.mote-card{display:flex;flex-direction:column;padding:1.25rem 1.5rem;border:var(--mote-border-width) solid var(--mote-border);border-color:color-mix(in oklab,var(--mote-status,var(--mote-border)),var(--mote-border) 60%);border-radius:var(--mote-radius-lg);background:color-mix(in oklab,var(--mote-surface) 55%,var(--mote-bg));box-shadow:var(--mote-shadow-sm);text-align:start}:where(.mote-card)>:first-child{margin-block-start:0}:where(.mote-card)>:last-child{margin-block-end:0}.mote-band{padding-block:var(--mote-band-pad,4rem);background:color-mix(in oklab,var(--mote-status,var(--mote-accent)) 12%,var(--mote-bg))}.mote-badge{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:min(.8em, .8rem);font-weight:500;line-height:1.4;background:var(--mote-accent-soft);color:var(--mote-accent-deep)}.mote-badge:where(.mote-success,.mote-warning,.mote-error,.mote-info,.mote-muted){background:var(--mote-status-soft);color:var(--mote-status)}a:where(.mote-badge){text-decoration:none}a:where(.mote-badge):hover{filter:brightness(.92)}.mote-avatar{width:var(--mote-avatar,2.5rem);height:var(--mote-avatar,2.5rem);border-radius:var(--mote-avatar-radius,999px);object-fit:cover;border:var(--mote-border-width) solid var(--mote-border);box-shadow:var(--mote-shadow-sm)}.mote-skeleton{display:inline-block;min-height:1em;border-radius:var(--mote-radius-sm);background:linear-gradient(100deg,color-mix(in oklab,var(--mote-fg) 5%,transparent) 40%,color-mix(in oklab,var(--mote-fg) 9%,transparent) 50%,color-mix(in oklab,var(--mote-fg) 5%,transparent) 60%);background-size:200% 100%;animation:1.6s ease-in-out infinite mote-shimmer}@keyframes mote-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}.mote-spinner{display:inline-block;vertical-align:-.25em;width:1.25em;height:1.25em;border:.15em solid color-mix(in oklab,var(--mote-status,var(--mote-accent)),transparent 65%);border-block-start-color:var(--mote-status,var(--mote-accent));border-radius:999px;animation:.7s linear infinite mote-spin}@keyframes mote-spin{to{rotate:1turn}}:where(body > header,.mote-header){position:sticky;top:0;z-index:10;background:color-mix(in oklab,var(--mote-bg) 82%,transparent);backdrop-filter:blur(10px);border-block-end:var(--mote-border-width) solid var(--mote-border);padding-block:0.7rem}@media print{:where(body > header,.mote-header){position:static}}:where(body > header nav,.mote-nav){flex:1 1 0%;position:relative;flex:1 1 0%;min-width:0}:where(body > header nav[data-nav]:not([data-nav=""]),.mote-nav[data-nav]:not([data-nav=""])){background:linear-gradient(var(--mote-border),var(--mote-border)) left bottom/100% 2px no-repeat}:where(body > header nav,.mote-nav)::after,:where(body > header nav,.mote-nav)::before{content:"";position:absolute;bottom:0;width:4rem;height:2px;opacity:0;transition:opacity var(--mote-transition);pointer-events:none}:where(body > header nav,.mote-nav)::before{inset-inline-start:0;background:linear-gradient(to left,transparent,color-mix(in oklab,var(--mote-accent) 55%,var(--mote-bg)) 40%)}:where(body > header nav,.mote-nav)::after{inset-inline-end:0;background:linear-gradient(to right,transparent,color-mix(in oklab,var(--mote-accent) 55%,var(--mote-bg)) 40%)}:where(body > header nav[data-nav~=end],nav.mote-nav[data-nav~=end])::after,:where(body > header nav[data-nav~=start],nav.mote-nav[data-nav~=start])::before{opacity:1}[dir=rtl] :where(body > header nav,.mote-nav)::before{background:linear-gradient(to right,transparent,color-mix(in oklab,var(--mote-accent) 55%,var(--mote-bg)) 40%)}[dir=rtl] :where(body > header nav,.mote-nav)::after{background:linear-gradient(to left,transparent,color-mix(in oklab,var(--mote-accent) 55%,var(--mote-bg)) 40%)}:where(body > header nav,.mote-nav) ul{display:flex;flex-wrap:nowrap;gap:.25rem;padding:0;margin:0;list-style:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}:where(body > header nav,.mote-nav) ul::-webkit-scrollbar{display:none}:where(body > header nav,.mote-nav) a{display:inline-block;padding:.35rem .8rem;border-radius:999px;white-space:nowrap;color:var(--mote-fg);text-decoration:none;transition:background var(--mote-transition),color var(--mote-transition)}:where(body > header nav,.mote-nav) a:hover{background:var(--mote-accent-soft);color:var(--mote-accent-deep)}:where(body > header nav,.mote-nav) a[aria-current=page]{background:var(--mote-accent);color:var(--mote-on-accent)}nav[aria-label=breadcrumb] ol{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0;font-size:.9em;list-style:none;color:var(--mote-muted)}nav[aria-label=breadcrumb] li+li::before{content:"/";margin-inline-end:.5rem;color:var(--mote-border-strong)}nav[aria-label=breadcrumb] [aria-current=page]{color:var(--mote-fg);font-weight:500}nav[aria-label=pagination] ul{display:flex;flex-wrap:wrap;gap:.25rem;padding:0;margin:0;list-style:none}nav[aria-label=pagination] :is(a,[aria-current=page]){display:inline-block;min-width:2.2rem;padding:.35rem .6rem;border-radius:var(--mote-radius-sm);text-align:center;text-decoration:none;color:var(--mote-fg);transition:background var(--mote-transition),color var(--mote-transition)}nav[aria-label=pagination] a:hover:not([aria-current]){background:var(--mote-accent-soft);color:var(--mote-accent-deep)}nav[aria-label=pagination] [aria-current=page]{background:var(--mote-accent);color:var(--mote-on-accent)}nav[aria-label=pagination] [aria-current=page]:hover{background:color-mix(in oklab,var(--mote-accent),var(--mote-fg) 14%);color:var(--mote-on-accent)}nav[aria-label=toc] ul{padding-inline-start:0.8rem;margin:0;list-style:none;font-size:.9em}nav[aria-label=toc] li{margin-block:0.2rem}nav[aria-label=toc] a{color:var(--mote-muted);text-decoration:none;transition:color var(--mote-transition)}nav[aria-label=toc] a:hover{color:var(--mote-accent-deep)}.mote-card-media{margin:-1.25rem -1.5rem 1rem;overflow:clip;border-radius:calc(var(--mote-radius-lg) - var(--mote-border-width)) calc(var(--mote-radius-lg) - var(--mote-border-width)) 0 0}.mote-card-media img,.mote-card-media video{display:block;width:100%;max-width:none;border-radius:inherit}.mote-card-media>svg{display:block;width:100%;height:auto;max-width:none;border-radius:inherit}.mote-table-scroll{overflow-x:auto;max-height:var(--mote-table-max,60vh);overflow-y:auto}.mote-table-scroll table{margin-block:0;border-collapse:separate;border-spacing:0}.mote-table-scroll thead th{position:sticky;top:0;background:var(--mote-bg)}@media print{.mote-table-scroll{max-height:none;overflow:visible}.mote-table-scroll thead th{position:static}}:where(body > footer,.mote-footer){margin-block-start:3rem;padding-block:1.5rem;border-block-start:var(--mote-border-width) solid var(--mote-border)}:where(body > footer,.mote-footer) nav ul{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;list-style:none;margin:0;padding:0}[popover]{padding:.8rem 1rem;border:var(--mote-border-width) solid var(--mote-border);border-radius:var(--mote-radius);background:var(--mote-bg);color:var(--mote-fg);box-shadow:var(--mote-shadow)}@supports (anchor-name:--mote-a){[popover][style*=position-anchor]{position-area:block-end;justify-self:anchor-center;position-try-fallbacks:flip-block,flip-inline;margin:.45rem}}menu[popover]{min-width:11rem;padding:.35rem}menu[popover] li{margin:0;list-style:none}menu[popover] :is(button,[role=menuitem]){display:block;width:100%;padding:.5rem .75rem;border:none;border-radius:var(--mote-radius-sm);background:0 0;color:var(--mote-fg);font:inherit;text-align:start;cursor:pointer}menu[popover] :is(button,[role=menuitem]):focus-visible,menu[popover] :is(button,[role=menuitem]):hover{background:var(--mote-accent-soft);color:var(--mote-accent-deep)}[popover].mote-tooltip{max-width:18rem;padding:.4rem .7rem;font-size:.85em;border-radius:var(--mote-radius-sm);box-shadow:var(--mote-shadow-sm)}[popover].mote-toast{position:fixed;inset:auto 1.25rem 1.25rem auto;max-width:22rem;font-size:.9em;border-block-start-width:3px;border-block-start-color:var(--mote-status,var(--mote-accent))}[popover],dialog{opacity:0;transform:translateY(8px) scale(.98);
|
|
11
|
+
*/.mote-card{display:flex;flex-direction:column;padding:1.25rem 1.5rem;border:var(--mote-border-width) solid var(--mote-border);border-color:color-mix(in oklab,var(--mote-status,var(--mote-border)),var(--mote-border) 60%);border-radius:var(--mote-radius-lg);background:color-mix(in oklab,var(--mote-surface) 55%,var(--mote-bg));box-shadow:var(--mote-shadow-sm);text-align:start}:where(.mote-card)>:first-child{margin-block-start:0}:where(.mote-card)>:last-child{margin-block-end:0}.mote-band{padding-block:var(--mote-band-pad,4rem);background:color-mix(in oklab,var(--mote-status,var(--mote-accent)) 12%,var(--mote-bg))}.mote-badge{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:min(.8em, .8rem);font-weight:500;line-height:1.4;background:var(--mote-accent-soft);color:var(--mote-accent-deep)}.mote-card>.mote-badge{align-self:flex-start}.mote-badge:where(.mote-success,.mote-warning,.mote-error,.mote-info,.mote-muted){background:var(--mote-status-soft);color:var(--mote-status)}a:where(.mote-badge){text-decoration:none}a:where(.mote-badge):hover{filter:brightness(.92)}.mote-avatar{width:var(--mote-avatar,2.5rem);height:var(--mote-avatar,2.5rem);border-radius:var(--mote-avatar-radius,999px);object-fit:cover;border:var(--mote-border-width) solid var(--mote-border);box-shadow:var(--mote-shadow-sm)}.mote-skeleton{display:inline-block;min-height:1em;border-radius:var(--mote-radius-sm);background:linear-gradient(100deg,color-mix(in oklab,var(--mote-fg) 5%,transparent) 40%,color-mix(in oklab,var(--mote-fg) 9%,transparent) 50%,color-mix(in oklab,var(--mote-fg) 5%,transparent) 60%);background-size:200% 100%;animation:1.6s ease-in-out infinite mote-shimmer}@keyframes mote-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}.mote-spinner{display:inline-block;vertical-align:-.25em;width:1.25em;height:1.25em;border:.15em solid color-mix(in oklab,var(--mote-status,var(--mote-accent)),transparent 65%);border-block-start-color:var(--mote-status,var(--mote-accent));border-radius:999px;animation:.7s linear infinite mote-spin}@keyframes mote-spin{to{rotate:1turn}}:where(body > header,.mote-header){position:sticky;top:0;z-index:10;background:color-mix(in oklab,var(--mote-bg) 82%,transparent);backdrop-filter:blur(10px);border-block-end:var(--mote-border-width) solid var(--mote-border);padding-block:0.7rem}@media print{:where(body > header,.mote-header){position:static}}:where(body > header nav,.mote-nav){flex:1 1 0%;position:relative;flex:1 1 0%;min-width:0}:where(body > header nav[data-nav]:not([data-nav=""]),.mote-nav[data-nav]:not([data-nav=""])){background:linear-gradient(var(--mote-border),var(--mote-border)) left bottom/100% 2px no-repeat}:where(body > header nav,.mote-nav)::after,:where(body > header nav,.mote-nav)::before{content:"";position:absolute;bottom:0;width:4rem;height:2px;opacity:0;transition:opacity var(--mote-transition);pointer-events:none}:where(body > header nav,.mote-nav)::before{inset-inline-start:0;background:linear-gradient(to left,transparent,color-mix(in oklab,var(--mote-accent) 55%,var(--mote-bg)) 40%)}:where(body > header nav,.mote-nav)::after{inset-inline-end:0;background:linear-gradient(to right,transparent,color-mix(in oklab,var(--mote-accent) 55%,var(--mote-bg)) 40%)}:where(body > header nav[data-nav~=end],nav.mote-nav[data-nav~=end])::after,:where(body > header nav[data-nav~=start],nav.mote-nav[data-nav~=start])::before{opacity:1}[dir=rtl] :where(body > header nav,.mote-nav)::before{background:linear-gradient(to right,transparent,color-mix(in oklab,var(--mote-accent) 55%,var(--mote-bg)) 40%)}[dir=rtl] :where(body > header nav,.mote-nav)::after{background:linear-gradient(to left,transparent,color-mix(in oklab,var(--mote-accent) 55%,var(--mote-bg)) 40%)}:where(body > header nav,.mote-nav) ul{display:flex;flex-wrap:nowrap;gap:.25rem;padding:0;margin:0;list-style:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}:where(body > header nav,.mote-nav) ul::-webkit-scrollbar{display:none}:where(body > header nav,.mote-nav) a{display:inline-block;padding:.35rem .8rem;border-radius:999px;white-space:nowrap;color:var(--mote-fg);text-decoration:none;transition:background var(--mote-transition),color var(--mote-transition)}:where(body > header nav,.mote-nav) a:hover{background:var(--mote-accent-soft);color:var(--mote-accent-deep)}:where(body > header nav,.mote-nav) a[aria-current=page]{background:var(--mote-accent);color:var(--mote-on-accent)}nav[aria-label=breadcrumb] ol{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0;font-size:.9em;list-style:none;color:var(--mote-muted)}nav[aria-label=breadcrumb] li+li::before{content:"/";margin-inline-end:.5rem;color:var(--mote-border-strong)}nav[aria-label=breadcrumb] [aria-current=page]{color:var(--mote-fg);font-weight:500}nav[aria-label=pagination] ul{display:flex;flex-wrap:wrap;gap:.25rem;padding:0;margin:0;list-style:none}nav[aria-label=pagination] :is(a,[aria-current=page]){display:inline-block;min-width:2.2rem;padding:.35rem .6rem;border-radius:var(--mote-radius-sm);text-align:center;text-decoration:none;color:var(--mote-fg);transition:background var(--mote-transition),color var(--mote-transition)}nav[aria-label=pagination] a:hover:not([aria-current]){background:var(--mote-accent-soft);color:var(--mote-accent-deep)}nav[aria-label=pagination] [aria-current=page]{background:var(--mote-accent);color:var(--mote-on-accent)}nav[aria-label=pagination] [aria-current=page]:hover{background:color-mix(in oklab,var(--mote-accent),var(--mote-fg) 14%);color:var(--mote-on-accent)}nav[aria-label=toc] ul{padding-inline-start:0.8rem;margin:0;list-style:none;font-size:.9em}nav[aria-label=toc] li{margin-block:0.2rem}nav[aria-label=toc] a{color:var(--mote-muted);text-decoration:none;transition:color var(--mote-transition)}nav[aria-label=toc] a:hover{color:var(--mote-accent-deep)}.mote-card-media{margin:-1.25rem -1.5rem 1rem;overflow:clip;border-radius:calc(var(--mote-radius-lg) - var(--mote-border-width)) calc(var(--mote-radius-lg) - var(--mote-border-width)) 0 0}.mote-card-media img,.mote-card-media video{display:block;width:100%;max-width:none;border-radius:inherit}.mote-card-media>svg{display:block;width:100%;height:auto;max-width:none;border-radius:inherit}.mote-table-scroll{overflow-x:auto;max-height:var(--mote-table-max,60vh);overflow-y:auto}.mote-table-scroll table{margin-block:0;border-collapse:separate;border-spacing:0}.mote-table-scroll thead th{position:sticky;top:0;background:var(--mote-bg)}@media print{.mote-table-scroll{max-height:none;overflow:visible}.mote-table-scroll thead th{position:static}}:where(body > footer,.mote-footer){margin-block-start:3rem;padding-block:1.5rem;border-block-start:var(--mote-border-width) solid var(--mote-border)}:where(body > footer,.mote-footer) nav ul{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;list-style:none;margin:0;padding:0}[popover]{padding:.8rem 1rem;border:var(--mote-border-width) solid var(--mote-border);border-radius:var(--mote-radius);background:var(--mote-bg);color:var(--mote-fg);box-shadow:var(--mote-shadow)}@supports (anchor-name:--mote-a){[popover][style*=position-anchor]{position-area:block-end;justify-self:anchor-center;position-try-fallbacks:flip-block,flip-inline;margin:.45rem}}menu[popover]{min-width:11rem;padding:.35rem}menu[popover] li{margin:0;list-style:none}menu[popover] :is(button,[role=menuitem]){display:block;width:100%;padding:.5rem .75rem;border:none;border-radius:var(--mote-radius-sm);background:0 0;color:var(--mote-fg);font:inherit;text-align:start;cursor:pointer}menu[popover] :is(button,[role=menuitem]):focus-visible,menu[popover] :is(button,[role=menuitem]):hover{background:var(--mote-accent-soft);color:var(--mote-accent-deep)}[popover].mote-tooltip{max-width:18rem;padding:.4rem .7rem;font-size:.85em;border-radius:var(--mote-radius-sm);box-shadow:var(--mote-shadow-sm)}[popover].mote-toast{position:fixed;inset:auto 1.25rem 1.25rem auto;max-width:22rem;font-size:.9em;border-block-start-width:3px;border-block-start-color:var(--mote-status,var(--mote-accent))}[popover],dialog{opacity:0;transform:translateY(8px) scale(.98);
|
|
12
12
|
transition:
|
|
13
13
|
opacity 180ms ease,
|
|
14
14
|
transform 180ms ease,
|
package/mote.css
CHANGED
package/mote.min.css
CHANGED