Andreas Reinhold / reiniandClaude Opus 5
247c596c3a
An over-engineering audit of the whole tree, applied in five reviewed batches. Behaviour stays the same except where UPGRADE.md says otherwise. PHP: the showcase and error-page stylesheets are prebuilt into resources/dist by bin/stylesheets.mjs, through Vite's own postcss-import (first occurrence kept, the order an application's build gives), instead of Stylesheets::bundle() inlining imports on every request; only the import walk DesignGuard needs stays. SchemeStylesheet::withProfiles() replaces three copies of the scheme-plus-profiles loop, material:scheme leaves spec and contrast checks to the node script that already made them, and the error page's scheme cache, the hashed view namespace, the translations path with no lang/ folder and DesignGuard's 1.x-name hints are gone. JS: the androidx shape port progress.js and both bin scripts each carried lives once in resources/js/shapes.js (the generated SVGs are unchanged); util.js holds ringIndex(), ms(), reopenGuard() and remember(), which were written out several times; listeners are released through AbortController; tooltip.js's hoverPopover() serves the rich tooltip too. CSS: every rule for an element inside the navigation rail queries `--md-navigation-rail-value` instead of repeating the seven collapsed conditions under five media branches; badge, alert, progress, slider and button read one non-inheriting colour-role table (components/color.css); the dialog chrome, the submenu's popover chrome, the chip's state layer and touch target, and the visually-hidden inputs use the shared rules they copied; foundation/tokens.css is folded into foundation.css. Views: Support\Field and Support\Link replace the error-key, bound-value and link-attribute blocks copied into the fields and link components; the timepicker period group, the menu filter and the showcase head are partials; the datepicker's steppers and entry fields are loops; component docblocks no longer restate SKILL.md. Tests and tooling: one dataset-driven ComponentStylesheetsTest replaces four per-group files, DesignGuardTest and the layout-component tests use datasets, browser tests share one ready() helper, CSS parsing lives in ComponentStylesheet alone. docs/audits and the finding IDs citing it are removed, as are pestphp/pest-plugin-laravel, the unused composer scripts and check:font; the lint job runs in the feature job, which now installs node packages so the prebuilt-stylesheet staleness test runs in CI. Feature suite 1177 passed, Chrome browser suite 299 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
10253 lines
350 KiB
CSS
10253 lines
350 KiB
CSS
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
|
@layer material.reset {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0 solid;
|
|
}
|
|
html,
|
|
:host {
|
|
line-height: 1.5;
|
|
-webkit-text-size-adjust: 100%;
|
|
tab-size: 4;
|
|
font-feature-settings: normal;
|
|
font-variation-settings: normal;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
hr {
|
|
height: 0;
|
|
color: inherit;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
abbr:where([title]) {
|
|
-webkit-text-decoration: underline dotted;
|
|
text-decoration: underline dotted;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
-webkit-text-decoration: inherit;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
samp,
|
|
pre {
|
|
font-family: var(--md-ref-typeface-mono);
|
|
font-feature-settings: normal;
|
|
font-variation-settings: normal;
|
|
font-size: 1em;
|
|
}
|
|
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
table {
|
|
text-indent: 0;
|
|
border-color: inherit;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
:-moz-focusring:where(:not(iframe)) {
|
|
outline: auto;
|
|
}
|
|
|
|
progress {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
summary {
|
|
display: list-item;
|
|
}
|
|
|
|
ol,
|
|
ul,
|
|
menu {
|
|
list-style: none;
|
|
}
|
|
img,
|
|
svg,
|
|
video,
|
|
canvas,
|
|
audio,
|
|
iframe,
|
|
embed,
|
|
object {
|
|
display: block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img,
|
|
video {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
button,
|
|
input,
|
|
select,
|
|
optgroup,
|
|
textarea,
|
|
::file-selector-button {
|
|
font: inherit;
|
|
font-feature-settings: inherit;
|
|
font-variation-settings: inherit;
|
|
letter-spacing: inherit;
|
|
color: inherit;
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
opacity: 1;
|
|
}
|
|
|
|
:where(select:is([multiple], [size])) optgroup {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
:where(select:is([multiple], [size])) optgroup option {
|
|
padding-inline-start: 20px;
|
|
}
|
|
|
|
::file-selector-button {
|
|
margin-inline-end: 4px;
|
|
}
|
|
|
|
::placeholder {
|
|
opacity: 1;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
::-webkit-date-and-time-value {
|
|
min-height: 1lh;
|
|
text-align: inherit;
|
|
}
|
|
|
|
::-webkit-datetime-edit {
|
|
display: inline-flex;
|
|
}
|
|
|
|
::-webkit-datetime-edit-fields-wrapper {
|
|
padding: 0;
|
|
}
|
|
|
|
::-webkit-datetime-edit,
|
|
::-webkit-datetime-edit-year-field,
|
|
::-webkit-datetime-edit-month-field,
|
|
::-webkit-datetime-edit-day-field,
|
|
::-webkit-datetime-edit-hour-field,
|
|
::-webkit-datetime-edit-minute-field,
|
|
::-webkit-datetime-edit-second-field,
|
|
::-webkit-datetime-edit-millisecond-field,
|
|
::-webkit-datetime-edit-meridiem-field {
|
|
padding-block: 0;
|
|
}
|
|
|
|
::-webkit-calendar-picker-indicator {
|
|
line-height: 1;
|
|
}
|
|
|
|
:-moz-ui-invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
button,
|
|
input:where([type='button'], [type='reset'], [type='submit']),
|
|
::file-selector-button {
|
|
appearance: button;
|
|
}
|
|
|
|
::-webkit-inner-spin-button,
|
|
::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
}
|
|
[hidden]:where(:not([hidden='until-found'])) {
|
|
display: none !important;
|
|
}
|
|
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
|
|
@layer material.tokens {
|
|
:root,
|
|
[data-theme='light'] {
|
|
color-scheme: light;
|
|
|
|
--md-sys-color-background: #fdf7fe;
|
|
--md-sys-color-on-background: #34313a;
|
|
--md-sys-color-surface: #fdf7fe;
|
|
--md-sys-color-surface-dim: #ded8e4;
|
|
--md-sys-color-surface-bright: #fdf7fe;
|
|
--md-sys-color-surface-container-lowest: #ffffff;
|
|
--md-sys-color-surface-container-low: #f8f1fa;
|
|
--md-sys-color-surface-container: #f2ecf5;
|
|
--md-sys-color-surface-container-high: #ece6f0;
|
|
--md-sys-color-surface-container-highest: #e7e0ec;
|
|
--md-sys-color-on-surface: #34313a;
|
|
--md-sys-color-on-surface-variant: #615d68;
|
|
--md-sys-color-outline: #7d7983;
|
|
--md-sys-color-outline-variant: #b5b0bb;
|
|
--md-sys-color-inverse-surface: #0f0d12;
|
|
--md-sys-color-inverse-on-surface: #a09ba1;
|
|
--md-sys-color-primary: #655789;
|
|
--md-sys-color-primary-dim: #594b7c;
|
|
--md-sys-color-on-primary: #fdf7ff;
|
|
--md-sys-color-primary-container: #d4c3fd;
|
|
--md-sys-color-on-primary-container: #493c6c;
|
|
--md-sys-color-primary-fixed: #d4c3fd;
|
|
--md-sys-color-primary-fixed-dim: #c6b6ee;
|
|
--md-sys-color-on-primary-fixed: #352857;
|
|
--md-sys-color-on-primary-fixed-variant: #524576;
|
|
--md-sys-color-inverse-primary: #d4c3fd;
|
|
--md-sys-color-secondary: #625c71;
|
|
--md-sys-color-secondary-dim: #565065;
|
|
--md-sys-color-on-secondary: #fdf7ff;
|
|
--md-sys-color-secondary-container: #e8def8;
|
|
--md-sys-color-on-secondary-container: #554f63;
|
|
--md-sys-color-secondary-fixed: #e8def8;
|
|
--md-sys-color-secondary-fixed-dim: #dad0ea;
|
|
--md-sys-color-on-secondary-fixed: #423c50;
|
|
--md-sys-color-on-secondary-fixed-variant: #5f586e;
|
|
--md-sys-color-tertiary: #7b5270;
|
|
--md-sys-color-tertiary-dim: #6e4664;
|
|
--md-sys-color-on-tertiary: #fff7f9;
|
|
--md-sys-color-tertiary-container: #f4bfe3;
|
|
--md-sys-color-on-tertiary-container: #5f3956;
|
|
--md-sys-color-tertiary-fixed: #f4bfe3;
|
|
--md-sys-color-tertiary-fixed-dim: #e5b2d5;
|
|
--md-sys-color-on-tertiary-fixed: #4a2642;
|
|
--md-sys-color-on-tertiary-fixed-variant: #694260;
|
|
--md-sys-color-error: #a8364b;
|
|
--md-sys-color-error-dim: #6b0221;
|
|
--md-sys-color-on-error: #fff7f7;
|
|
--md-sys-color-error-container: #f97386;
|
|
--md-sys-color-on-error-container: #6e0523;
|
|
--md-sys-color-success: #006d46;
|
|
--md-sys-color-on-success: #e7ffed;
|
|
--md-sys-color-success-container: #86f9bc;
|
|
--md-sys-color-on-success-container: #00734a;
|
|
--md-sys-color-warning: #7c5900;
|
|
--md-sys-color-on-warning: #fff8f1;
|
|
--md-sys-color-warning-container: #fab925;
|
|
--md-sys-color-on-warning-container: #6a4b00;
|
|
--md-sys-color-info: #005bc5;
|
|
--md-sys-color-on-info: #f9f8ff;
|
|
--md-sys-color-info-container: #1c7afc;
|
|
--md-sys-color-on-info-container: #001435;
|
|
--md-sys-color-inverse-error: #f97386;
|
|
--md-sys-color-inverse-success: #3bb27b;
|
|
--md-sys-color-inverse-warning: #f3b31e;
|
|
--md-sys-color-inverse-info: #699cff;
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
color-scheme: dark;
|
|
|
|
--md-sys-color-background: #0f0d12;
|
|
--md-sys-color-on-background: #eae3ef;
|
|
--md-sys-color-surface: #0f0d12;
|
|
--md-sys-color-surface-dim: #0f0d12;
|
|
--md-sys-color-surface-bright: #2e2b34;
|
|
--md-sys-color-surface-container-lowest: #000000;
|
|
--md-sys-color-surface-container-low: #141218;
|
|
--md-sys-color-surface-container: #1b181f;
|
|
--md-sys-color-surface-container-high: #211e26;
|
|
--md-sys-color-surface-container-highest: #27242d;
|
|
--md-sys-color-on-surface: #eae3ef;
|
|
--md-sys-color-on-surface-variant: #aea9b4;
|
|
--md-sys-color-outline: #78737e;
|
|
--md-sys-color-outline-variant: #4a4650;
|
|
--md-sys-color-inverse-surface: #fdf7fe;
|
|
--md-sys-color-inverse-on-surface: #575459;
|
|
--md-sys-color-primary: #cdc0ec;
|
|
--md-sys-color-primary-dim: #bfb2de;
|
|
--md-sys-color-on-primary: #443a5f;
|
|
--md-sys-color-primary-container: #574d72;
|
|
--md-sys-color-on-primary-container: #e9deff;
|
|
--md-sys-color-primary-fixed: #ded0fe;
|
|
--md-sys-color-primary-fixed-dim: #d0c3ef;
|
|
--md-sys-color-on-primary-fixed: #3c3256;
|
|
--md-sys-color-on-primary-fixed-variant: #594e74;
|
|
--md-sys-color-inverse-primary: #645980;
|
|
--md-sys-color-secondary: #cbc2db;
|
|
--md-sys-color-secondary-dim: #beb5cd;
|
|
--md-sys-color-on-secondary: #433d51;
|
|
--md-sys-color-secondary-container: #3e384c;
|
|
--md-sys-color-on-secondary-container: #c4bbd4;
|
|
--md-sys-color-secondary-fixed: #e8def8;
|
|
--md-sys-color-secondary-fixed-dim: #dad0ea;
|
|
--md-sys-color-on-secondary-fixed: #423c50;
|
|
--md-sys-color-on-secondary-fixed-variant: #5f586e;
|
|
--md-sys-color-tertiary: #ffcfef;
|
|
--md-sys-color-tertiary-dim: #f4bfe3;
|
|
--md-sys-color-on-tertiary: #69415f;
|
|
--md-sys-color-tertiary-container: #f4bfe3;
|
|
--md-sys-color-on-tertiary-container: #5f3956;
|
|
--md-sys-color-tertiary-fixed: #f4bfe3;
|
|
--md-sys-color-tertiary-fixed-dim: #e5b2d5;
|
|
--md-sys-color-on-tertiary-fixed: #4a2642;
|
|
--md-sys-color-on-tertiary-fixed-variant: #694260;
|
|
--md-sys-color-error: #f97386;
|
|
--md-sys-color-error-dim: #c44b5f;
|
|
--md-sys-color-on-error: #490013;
|
|
--md-sys-color-error-container: #871c34;
|
|
--md-sys-color-on-error-container: #ff97a3;
|
|
--md-sys-color-success: #3bb27b;
|
|
--md-sys-color-on-success: #002615;
|
|
--md-sys-color-success-container: #059460;
|
|
--md-sys-color-on-success-container: #001e10;
|
|
--md-sys-color-warning: #f3b31e;
|
|
--md-sys-color-on-warning: #4e3600;
|
|
--md-sys-color-warning-container: #e4a604;
|
|
--md-sys-color-on-warning-container: #593f00;
|
|
--md-sys-color-info: #699cff;
|
|
--md-sys-color-on-info: #001e4b;
|
|
--md-sys-color-info-container: #0c74f6;
|
|
--md-sys-color-on-info-container: #000a23;
|
|
--md-sys-color-inverse-error: #a8364b;
|
|
--md-sys-color-inverse-success: #006d46;
|
|
--md-sys-color-inverse-warning: #7c5900;
|
|
--md-sys-color-inverse-info: #005bc5;
|
|
}
|
|
|
|
[data-contrast='medium'],
|
|
[data-contrast='medium'][data-theme='light'],
|
|
[data-contrast='medium'] [data-theme='light'] {
|
|
color-scheme: light;
|
|
|
|
--md-sys-color-background: #fdf7fe;
|
|
--md-sys-color-on-background: #25232b;
|
|
--md-sys-color-surface: #fdf7fe;
|
|
--md-sys-color-surface-dim: #ded8e4;
|
|
--md-sys-color-surface-bright: #fdf7fe;
|
|
--md-sys-color-surface-container-lowest: #ffffff;
|
|
--md-sys-color-surface-container-low: #f8f1fa;
|
|
--md-sys-color-surface-container: #f2ecf5;
|
|
--md-sys-color-surface-container-high: #ece6f0;
|
|
--md-sys-color-surface-container-highest: #e7e0ec;
|
|
--md-sys-color-on-surface: #25232b;
|
|
--md-sys-color-on-surface-variant: #45414b;
|
|
--md-sys-color-outline: #615d68;
|
|
--md-sys-color-outline-variant: #7d7983;
|
|
--md-sys-color-inverse-surface: #0f0d12;
|
|
--md-sys-color-inverse-on-surface: #c8c3c9;
|
|
--md-sys-color-primary: #483b6b;
|
|
--md-sys-color-primary-dim: #3c305f;
|
|
--md-sys-color-on-primary: #e1d3ff;
|
|
--md-sys-color-primary-container: #7b6da0;
|
|
--md-sys-color-on-primary-container: #ffffff;
|
|
--md-sys-color-primary-fixed: #7b6da0;
|
|
--md-sys-color-primary-fixed-dim: #6e6093;
|
|
--md-sys-color-on-primary-fixed: #ffffff;
|
|
--md-sys-color-on-primary-fixed-variant: #ffffff;
|
|
--md-sys-color-inverse-primary: #d4c3fd;
|
|
--md-sys-color-secondary: #464054;
|
|
--md-sys-color-secondary-dim: #3a3548;
|
|
--md-sys-color-on-secondary: #dfd5ef;
|
|
--md-sys-color-secondary-container: #787187;
|
|
--md-sys-color-on-secondary-container: #ffffff;
|
|
--md-sys-color-secondary-fixed: #787187;
|
|
--md-sys-color-secondary-fixed-dim: #6c657b;
|
|
--md-sys-color-on-secondary-fixed: #ffffff;
|
|
--md-sys-color-on-secondary-fixed-variant: #ffffff;
|
|
--md-sys-color-tertiary: #5c3653;
|
|
--md-sys-color-tertiary-dim: #502b47;
|
|
--md-sys-color-on-tertiary: #ffcaee;
|
|
--md-sys-color-tertiary-container: #936787;
|
|
--md-sys-color-on-tertiary-container: #ffffff;
|
|
--md-sys-color-tertiary-fixed: #936787;
|
|
--md-sys-color-tertiary-fixed-dim: #855b7a;
|
|
--md-sys-color-on-tertiary-fixed: #ffffff;
|
|
--md-sys-color-on-tertiary-fixed-variant: #ffffff;
|
|
--md-sys-color-error: #821830;
|
|
--md-sys-color-error-dim: #6b0221;
|
|
--md-sys-color-on-error: #ffcdd1;
|
|
--md-sys-color-error-container: #c44b5f;
|
|
--md-sys-color-on-error-container: #ffffff;
|
|
--md-sys-color-success: #004d30;
|
|
--md-sys-color-on-success: #7df0b3;
|
|
--md-sys-color-success-container: #008656;
|
|
--md-sys-color-on-success-container: #ffffff;
|
|
--md-sys-color-warning: #593e00;
|
|
--md-sys-color-on-warning: #ffd385;
|
|
--md-sys-color-warning-container: #986d00;
|
|
--md-sys-color-on-warning-container: #ffffff;
|
|
--md-sys-color-info: #003f8e;
|
|
--md-sys-color-on-info: #cbd9ff;
|
|
--md-sys-color-info-container: #006fef;
|
|
--md-sys-color-on-info-container: #ffffff;
|
|
--md-sys-color-inverse-error: #ff9da8;
|
|
--md-sys-color-inverse-success: #5ace94;
|
|
--md-sys-color-inverse-warning: #f3b31e;
|
|
--md-sys-color-inverse-info: #98b8ff;
|
|
}
|
|
|
|
[data-contrast='medium'][data-theme='dark'],
|
|
[data-contrast='medium'] [data-theme='dark'] {
|
|
color-scheme: dark;
|
|
|
|
--md-sys-color-background: #0f0d12;
|
|
--md-sys-color-on-background: #ffffff;
|
|
--md-sys-color-surface: #0f0d12;
|
|
--md-sys-color-surface-dim: #0f0d12;
|
|
--md-sys-color-surface-bright: #2e2b34;
|
|
--md-sys-color-surface-container-lowest: #000000;
|
|
--md-sys-color-surface-container-low: #141218;
|
|
--md-sys-color-surface-container: #1b181f;
|
|
--md-sys-color-surface-container-high: #211e26;
|
|
--md-sys-color-surface-container-highest: #27242d;
|
|
--md-sys-color-on-surface: #ffffff;
|
|
--md-sys-color-on-surface-variant: #bcb6c2;
|
|
--md-sys-color-outline: #96919c;
|
|
--md-sys-color-outline-variant: #78737e;
|
|
--md-sys-color-inverse-surface: #fdf7fe;
|
|
--md-sys-color-inverse-on-surface: #39373c;
|
|
--md-sys-color-primary: #cdc0ec;
|
|
--md-sys-color-primary-dim: #bfb2de;
|
|
--md-sys-color-on-primary: #3a3054;
|
|
--md-sys-color-primary-container: #7a6f96;
|
|
--md-sys-color-on-primary-container: #ffffff;
|
|
--md-sys-color-primary-fixed: #ded0fe;
|
|
--md-sys-color-primary-fixed-dim: #d0c3ef;
|
|
--md-sys-color-on-primary-fixed: #180e30;
|
|
--md-sys-color-on-primary-fixed-variant: #3c3256;
|
|
--md-sys-color-inverse-primary: #5a4f75;
|
|
--md-sys-color-secondary: #cbc2db;
|
|
--md-sys-color-secondary-dim: #beb5cd;
|
|
--md-sys-color-on-secondary: #393347;
|
|
--md-sys-color-secondary-container: #787187;
|
|
--md-sys-color-on-secondary-container: #ffffff;
|
|
--md-sys-color-secondary-fixed: #e8def8;
|
|
--md-sys-color-secondary-fixed-dim: #dad0ea;
|
|
--md-sys-color-on-secondary-fixed: #221d2f;
|
|
--md-sys-color-on-secondary-fixed-variant: #423c50;
|
|
--md-sys-color-tertiary: #ffcfef;
|
|
--md-sys-color-tertiary-dim: #f4bfe3;
|
|
--md-sys-color-on-tertiary: #5e3855;
|
|
--md-sys-color-tertiary-container: #f4bfe3;
|
|
--md-sys-color-on-tertiary-container: #542f4c;
|
|
--md-sys-color-tertiary-fixed: #f4bfe3;
|
|
--md-sys-color-tertiary-fixed-dim: #e5b2d5;
|
|
--md-sys-color-on-tertiary-fixed: #180015;
|
|
--md-sys-color-on-tertiary-fixed-variant: #4a2642;
|
|
--md-sys-color-error: #ff9da8;
|
|
--md-sys-color-error-dim: #ff8695;
|
|
--md-sys-color-on-error: #5f001c;
|
|
--md-sys-color-error-container: #c44b5f;
|
|
--md-sys-color-on-error-container: #ffffff;
|
|
--md-sys-color-success: #5ace94;
|
|
--md-sys-color-on-success: #00341e;
|
|
--md-sys-color-success-container: #008656;
|
|
--md-sys-color-on-success-container: #ffffff;
|
|
--md-sys-color-warning: #f3b31e;
|
|
--md-sys-color-on-warning: #412d00;
|
|
--md-sys-color-warning-container: #e4a604;
|
|
--md-sys-color-on-warning-container: #332200;
|
|
--md-sys-color-info: #98b8ff;
|
|
--md-sys-color-on-info: #002a62;
|
|
--md-sys-color-info-container: #006fef;
|
|
--md-sys-color-on-info-container: #ffffff;
|
|
--md-sys-color-inverse-error: #821830;
|
|
--md-sys-color-inverse-success: #004d30;
|
|
--md-sys-color-inverse-warning: #593e00;
|
|
--md-sys-color-inverse-info: #003f8e;
|
|
}
|
|
|
|
[data-contrast='high'],
|
|
[data-contrast='high'][data-theme='light'],
|
|
[data-contrast='high'] [data-theme='light'] {
|
|
color-scheme: light;
|
|
|
|
--md-sys-color-background: #fdf7fe;
|
|
--md-sys-color-on-background: #000000;
|
|
--md-sys-color-surface: #fdf7fe;
|
|
--md-sys-color-surface-dim: #ded8e4;
|
|
--md-sys-color-surface-bright: #fdf7fe;
|
|
--md-sys-color-surface-container-lowest: #ffffff;
|
|
--md-sys-color-surface-container-low: #f8f1fa;
|
|
--md-sys-color-surface-container: #f2ecf5;
|
|
--md-sys-color-surface-container-high: #ece6f0;
|
|
--md-sys-color-surface-container-highest: #e7e0ec;
|
|
--md-sys-color-on-surface: #000000;
|
|
--md-sys-color-on-surface-variant: #25232b;
|
|
--md-sys-color-outline: #45414b;
|
|
--md-sys-color-outline-variant: #54505a;
|
|
--md-sys-color-inverse-surface: #0f0d12;
|
|
--md-sys-color-inverse-on-surface: #ffffff;
|
|
--md-sys-color-primary: #281b49;
|
|
--md-sys-color-primary-dim: #1e103f;
|
|
--md-sys-color-on-primary: #e1d3ff;
|
|
--md-sys-color-primary-container: #584a7b;
|
|
--md-sys-color-on-primary-container: #ffffff;
|
|
--md-sys-color-primary-fixed: #584a7b;
|
|
--md-sys-color-primary-fixed-dim: #4c3f6f;
|
|
--md-sys-color-on-primary-fixed: #ffffff;
|
|
--md-sys-color-on-primary-fixed-variant: #ffffff;
|
|
--md-sys-color-inverse-primary: #d4c3fd;
|
|
--md-sys-color-secondary: #262134;
|
|
--md-sys-color-secondary-dim: #1c1729;
|
|
--md-sys-color-on-secondary: #dfd6ef;
|
|
--md-sys-color-secondary-container: #554f64;
|
|
--md-sys-color-on-secondary-container: #ffffff;
|
|
--md-sys-color-secondary-fixed: #554f64;
|
|
--md-sys-color-secondary-fixed-dim: #494358;
|
|
--md-sys-color-on-secondary-fixed: #ffffff;
|
|
--md-sys-color-on-secondary-fixed-variant: #ffffff;
|
|
--md-sys-color-tertiary: #391733;
|
|
--md-sys-color-tertiary-dim: #2e0d28;
|
|
--md-sys-color-on-tertiary: #ffcbee;
|
|
--md-sys-color-tertiary-container: #6d4563;
|
|
--md-sys-color-on-tertiary-container: #ffffff;
|
|
--md-sys-color-tertiary-fixed: #6d4563;
|
|
--md-sys-color-tertiary-fixed-dim: #603a57;
|
|
--md-sys-color-on-tertiary-fixed: #ffffff;
|
|
--md-sys-color-on-tertiary-fixed-variant: #ffffff;
|
|
--md-sys-color-error: #500016;
|
|
--md-sys-color-error-dim: #3d000f;
|
|
--md-sys-color-on-error: #ffced2;
|
|
--md-sys-color-error-container: #97283e;
|
|
--md-sys-color-on-error-container: #ffffff;
|
|
--md-sys-color-success: #002a18;
|
|
--md-sys-color-on-success: #7df0b4;
|
|
--md-sys-color-success-container: #005f3c;
|
|
--md-sys-color-on-success-container: #ffffff;
|
|
--md-sys-color-warning: #312100;
|
|
--md-sys-color-on-warning: #ffd486;
|
|
--md-sys-color-warning-container: #6c4d00;
|
|
--md-sys-color-on-warning-container: #ffffff;
|
|
--md-sys-color-info: #002252;
|
|
--md-sys-color-on-info: #ccdaff;
|
|
--md-sys-color-info-container: #004eac;
|
|
--md-sys-color-on-info-container: #ffffff;
|
|
--md-sys-color-inverse-error: #ffdddf;
|
|
--md-sys-color-inverse-success: #89fcbf;
|
|
--md-sys-color-inverse-warning: #ffe2b1;
|
|
--md-sys-color-inverse-info: #dde5ff;
|
|
}
|
|
|
|
[data-contrast='high'][data-theme='dark'],
|
|
[data-contrast='high'] [data-theme='dark'] {
|
|
color-scheme: dark;
|
|
|
|
--md-sys-color-background: #0f0d12;
|
|
--md-sys-color-on-background: #ffffff;
|
|
--md-sys-color-surface: #0f0d12;
|
|
--md-sys-color-surface-dim: #0f0d12;
|
|
--md-sys-color-surface-bright: #2e2b34;
|
|
--md-sys-color-surface-container-lowest: #000000;
|
|
--md-sys-color-surface-container-low: #141218;
|
|
--md-sys-color-surface-container: #1b181f;
|
|
--md-sys-color-surface-container-high: #211e26;
|
|
--md-sys-color-surface-container-highest: #27242d;
|
|
--md-sys-color-on-surface: #ffffff;
|
|
--md-sys-color-on-surface-variant: #eae3ef;
|
|
--md-sys-color-outline: #bcb6c2;
|
|
--md-sys-color-outline-variant: #a7a1ad;
|
|
--md-sys-color-inverse-surface: #fdf7fe;
|
|
--md-sys-color-inverse-on-surface: #000000;
|
|
--md-sys-color-primary: #ebe1ff;
|
|
--md-sys-color-primary-dim: #ded0fe;
|
|
--md-sys-color-on-primary: #302649;
|
|
--md-sys-color-primary-container: #aa9dc8;
|
|
--md-sys-color-on-primary-container: #000000;
|
|
--md-sys-color-primary-fixed: #ded0fe;
|
|
--md-sys-color-primary-fixed-dim: #d0c3ef;
|
|
--md-sys-color-on-primary-fixed: #000000;
|
|
--md-sys-color-on-primary-fixed-variant: #180e30;
|
|
--md-sys-color-inverse-primary: #3c3256;
|
|
--md-sys-color-secondary: #ebe1fb;
|
|
--md-sys-color-secondary-dim: #ddd3ed;
|
|
--md-sys-color-on-secondary: #2e293c;
|
|
--md-sys-color-secondary-container: #a8a0b8;
|
|
--md-sys-color-on-secondary-container: #000000;
|
|
--md-sys-color-secondary-fixed: #e8def8;
|
|
--md-sys-color-secondary-fixed-dim: #dad0ea;
|
|
--md-sys-color-on-secondary-fixed: #000000;
|
|
--md-sys-color-on-secondary-fixed-variant: #221d2f;
|
|
--md-sys-color-tertiary: #ffdbf2;
|
|
--md-sys-color-tertiary-dim: #fac5e9;
|
|
--md-sys-color-on-tertiary: #43203b;
|
|
--md-sys-color-tertiary-container: #f4bfe3;
|
|
--md-sys-color-on-tertiary-container: #2e0e29;
|
|
--md-sys-color-tertiary-fixed: #f4bfe3;
|
|
--md-sys-color-tertiary-fixed-dim: #e5b2d5;
|
|
--md-sys-color-on-tertiary-fixed: #000000;
|
|
--md-sys-color-on-tertiary-fixed-variant: #180015;
|
|
--md-sys-color-error: #ffdddf;
|
|
--md-sys-color-error-dim: #ffc7cb;
|
|
--md-sys-color-on-error: #5f001c;
|
|
--md-sys-color-error-container: #ff798c;
|
|
--md-sys-color-on-error-container: #000000;
|
|
--md-sys-color-success: #89fcbf;
|
|
--md-sys-color-on-success: #00341e;
|
|
--md-sys-color-success-container: #42b880;
|
|
--md-sys-color-on-success-container: #000000;
|
|
--md-sys-color-warning: #ffe2b1;
|
|
--md-sys-color-on-warning: #3c2900;
|
|
--md-sys-color-warning-container: #e4a604;
|
|
--md-sys-color-on-warning-container: #000000;
|
|
--md-sys-color-info: #dde5ff;
|
|
--md-sys-color-on-info: #002a62;
|
|
--md-sys-color-info-container: #74a2ff;
|
|
--md-sys-color-on-info-container: #000000;
|
|
--md-sys-color-inverse-error: #500016;
|
|
--md-sys-color-inverse-success: #002a18;
|
|
--md-sys-color-inverse-warning: #312100;
|
|
--md-sys-color-inverse-info: #002252;
|
|
}
|
|
}
|
|
|
|
@layer material.tokens {
|
|
:root {
|
|
--md-sys-shape-corner-none: 0px;
|
|
--md-sys-shape-corner-xs: 4px;
|
|
--md-sys-shape-corner-sm: 8px;
|
|
--md-sys-shape-corner-md: 12px;
|
|
--md-sys-shape-corner-lg: 16px;
|
|
--md-sys-shape-corner-lg-increased: 20px;
|
|
--md-sys-shape-corner-xl: 28px;
|
|
--md-sys-shape-corner-xl-increased: 32px;
|
|
--md-sys-shape-corner-xxl: 48px;
|
|
--md-sys-shape-corner-full: 9999px;
|
|
}
|
|
}
|
|
|
|
@layer material.tokens {
|
|
:root {
|
|
--md-sys-color-shadow: #000000;
|
|
--md-sys-color-scrim: #000000;
|
|
|
|
--md-sys-elevation-1: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
|
--md-sys-elevation-2: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
|
--md-sys-elevation-3: 0 1px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
|
--md-sys-elevation-4: 0 2px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 6px 10px 4px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
|
--md-sys-elevation-5: 0 4px 4px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 8px 12px 6px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent);
|
|
}
|
|
}
|
|
|
|
@layer material.tokens {
|
|
:root {
|
|
--md-sys-motion-spatial-fast: linear(0, 0.0195, 0.0716, 0.1471, 0.2381, 0.3378, 0.4404, 0.5416, 0.6378, 0.7265, 0.806, 0.8754, 0.9342, 0.9826, 1.0211, 1.0503, 1.0713, 1.0849, 1.0924, 1.0948, 1.0931, 1.0882, 1.0812, 1.0726, 1.0632, 1.0534, 1.0438, 1.0347, 1.0263, 1.0187, 1.0121, 1.0064, 1.0018, 0.9981, 0.9953, 0.9933, 0.992, 0.9913, 0.991, 0.9912, 0.9916, 0.9923, 0.9931, 0.994, 0.9949, 0.9958, 0.9967, 0.9975, 1);
|
|
--md-sys-motion-spatial-fast-duration: 350ms;
|
|
--md-sys-motion-spatial-default: linear(0, 0.0185, 0.0663, 0.1336, 0.2126, 0.2973, 0.3832, 0.4669, 0.5461, 0.6192, 0.6854, 0.7443, 0.7958, 0.8402, 0.8779, 0.9094, 0.9354, 0.9564, 0.9731, 0.9861, 0.996, 1.0033, 1.0085, 1.0119, 1.014, 1.015, 1.0152, 1.0148, 1.014, 1.0129, 1.0117, 1.0104, 1.0091, 1.0078, 1.0066, 1.0055, 1.0046, 1.0037, 1.0029, 1.0023, 1.0017, 1.0013, 1.0009, 1.0006, 1.0004, 1.0002, 1, 0.9999, 1);
|
|
--md-sys-motion-spatial-default-duration: 500ms;
|
|
--md-sys-motion-spatial-slow: linear(0, 0.0166, 0.0597, 0.1211, 0.1939, 0.273, 0.354, 0.434, 0.5107, 0.5826, 0.6487, 0.7084, 0.7615, 0.8081, 0.8484, 0.8829, 0.912, 0.9361, 0.9559, 0.9719, 0.9845, 0.9943, 1.0017, 1.0071, 1.0108, 1.0132, 1.0146, 1.0151, 1.0151, 1.0145, 1.0137, 1.0126, 1.0114, 1.0102, 1.009, 1.0078, 1.0067, 1.0057, 1.0047, 1.0039, 1.0031, 1.0025, 1.0019, 1.0015, 1.0011, 1.0008, 1.0005, 1.0003, 1);
|
|
--md-sys-motion-spatial-slow-duration: 650ms;
|
|
--md-sys-motion-effects-fast: linear(0, 0.0163, 0.0576, 0.1147, 0.1807, 0.2507, 0.3214, 0.3902, 0.4558, 0.5172, 0.5737, 0.6253, 0.6718, 0.7136, 0.7508, 0.7837, 0.8128, 0.8383, 0.8606, 0.8801, 0.897, 0.9117, 0.9244, 0.9353, 0.9448, 0.9529, 0.9599, 0.9658, 0.9709, 0.9753, 0.979, 0.9822, 0.9849, 0.9872, 0.9892, 0.9909, 0.9923, 0.9935, 0.9945, 0.9954, 0.9961, 0.9967, 0.9972, 0.9977, 0.998, 0.9983, 0.9986, 0.9988, 1);
|
|
--md-sys-motion-effects-fast-duration: 150ms;
|
|
--md-sys-motion-effects-default: linear(0, 0.0124, 0.0446, 0.0902, 0.1443, 0.2032, 0.2642, 0.3253, 0.3849, 0.4422, 0.4963, 0.547, 0.594, 0.6372, 0.6768, 0.7127, 0.7452, 0.7745, 0.8009, 0.8244, 0.8454, 0.8641, 0.8807, 0.8954, 0.9084, 0.9199, 0.93, 0.9389, 0.9467, 0.9536, 0.9596, 0.9648, 0.9694, 0.9734, 0.9769, 0.98, 0.9826, 0.985, 0.987, 0.9887, 0.9902, 0.9916, 0.9927, 0.9937, 0.9946, 0.9953, 0.9959, 0.9965, 1);
|
|
--md-sys-motion-effects-default-duration: 200ms;
|
|
--md-sys-motion-effects-slow: linear(0, 0.0139, 0.0496, 0.0995, 0.1583, 0.2216, 0.2865, 0.3509, 0.4131, 0.4722, 0.5275, 0.5788, 0.6258, 0.6687, 0.7075, 0.7424, 0.7737, 0.8016, 0.8264, 0.8484, 0.8678, 0.8849, 0.8999, 0.9131, 0.9247, 0.9347, 0.9435, 0.9512, 0.9578, 0.9636, 0.9686, 0.973, 0.9767, 0.98, 0.9828, 0.9852, 0.9873, 0.9891, 0.9907, 0.992, 0.9931, 0.9941, 0.995, 0.9957, 0.9963, 0.9969, 0.9973, 0.9977, 1);
|
|
--md-sys-motion-effects-slow-duration: 300ms;
|
|
|
|
--md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
--md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
|
|
--md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
|
|
--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
|
--md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
|
|
--md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
|
|
--md-sys-motion-duration-short: 150ms;
|
|
--md-sys-motion-duration-medium: 300ms;
|
|
--md-sys-motion-duration-long: 500ms;
|
|
}
|
|
[data-motion="standard"] {
|
|
--md-sys-motion-spatial-fast: linear(0, 0.0316, 0.1076, 0.2062, 0.313, 0.4185, 0.517, 0.6056, 0.6828, 0.7486, 0.8036, 0.8487, 0.8852, 0.9142, 0.937, 0.9546, 0.968, 0.9781, 0.9856, 0.991, 0.9948, 0.9975, 0.9992, 1.0004, 1.001, 1.0014, 1.0015, 1.0015, 1.0014, 1.0013, 1.0011, 1.001, 1.0008, 1.0007, 1.0005, 1.0004, 1.0003, 1.0003, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1);
|
|
--md-sys-motion-spatial-fast-duration: 350ms;
|
|
--md-sys-motion-spatial-default: linear(0, 0.0322, 0.1094, 0.2094, 0.3173, 0.4237, 0.5227, 0.6114, 0.6886, 0.7541, 0.8086, 0.8532, 0.8891, 0.9175, 0.9397, 0.9569, 0.9699, 0.9796, 0.9867, 0.9918, 0.9954, 0.9979, 0.9995, 1.0006, 1.0011, 1.0014, 1.0015, 1.0015, 1.0014, 1.0012, 1.0011, 1.0009, 1.0007, 1.0006, 1.0005, 1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1, 1);
|
|
--md-sys-motion-spatial-default-duration: 500ms;
|
|
--md-sys-motion-spatial-slow: linear(0, 0.0311, 0.1061, 0.2037, 0.3095, 0.4143, 0.5125, 0.6009, 0.6782, 0.7442, 0.7995, 0.8451, 0.882, 0.9115, 0.9347, 0.9527, 0.9665, 0.9769, 0.9846, 0.9903, 0.9943, 0.9971, 0.999, 1.0002, 1.0009, 1.0013, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.001, 1.0008, 1.0007, 1.0006, 1.0005, 1.0004, 1.0003, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1, 1, 1, 1, 1, 1);
|
|
--md-sys-motion-spatial-slow-duration: 750ms;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root,
|
|
[data-motion="standard"] {
|
|
--md-sys-motion-spatial-fast-duration: 0ms;
|
|
--md-sys-motion-spatial-default-duration: 0ms;
|
|
--md-sys-motion-spatial-slow-duration: 0ms;
|
|
--md-sys-motion-effects-fast-duration: 0ms;
|
|
--md-sys-motion-effects-default-duration: 0ms;
|
|
--md-sys-motion-effects-slow-duration: 0ms;
|
|
--md-sys-motion-duration-short: 0ms;
|
|
--md-sys-motion-duration-medium: 0ms;
|
|
--md-sys-motion-duration-long: 0ms;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.tokens {
|
|
:root {
|
|
--md-ref-typeface-brand: 'Google Sans Flex', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--md-ref-typeface-plain: var(--md-ref-typeface-brand);
|
|
--md-ref-typeface-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
--md-ref-typeface-weight-regular: 400;
|
|
--md-ref-typeface-weight-medium: 500;
|
|
--md-ref-typeface-weight-bold: 700;
|
|
|
|
--md-sys-typescale-display-lg: var(--md-ref-typeface-weight-regular) 3.5625rem/4rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-display-lg-tracking: -0.0125rem;
|
|
--md-sys-typescale-emphasized-display-lg: var(--md-ref-typeface-weight-medium) 3.5625rem/4rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-emphasized-display-lg-tracking: 0rem;
|
|
--md-sys-typescale-display-md: var(--md-ref-typeface-weight-regular) 2.8125rem/3.25rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-display-md-tracking: 0rem;
|
|
--md-sys-typescale-emphasized-display-md: var(--md-ref-typeface-weight-medium) 2.8125rem/3.25rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-emphasized-display-md-tracking: 0rem;
|
|
--md-sys-typescale-display-sm: var(--md-ref-typeface-weight-regular) 2.25rem/2.75rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-display-sm-tracking: 0rem;
|
|
--md-sys-typescale-emphasized-display-sm: var(--md-ref-typeface-weight-medium) 2.25rem/2.75rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-emphasized-display-sm-tracking: 0rem;
|
|
--md-sys-typescale-headline-lg: var(--md-ref-typeface-weight-regular) 2rem/2.5rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-headline-lg-tracking: 0rem;
|
|
--md-sys-typescale-emphasized-headline-lg: var(--md-ref-typeface-weight-medium) 2rem/2.5rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-emphasized-headline-lg-tracking: 0rem;
|
|
--md-sys-typescale-headline-md: var(--md-ref-typeface-weight-regular) 1.75rem/2.25rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-headline-md-tracking: 0rem;
|
|
--md-sys-typescale-emphasized-headline-md: var(--md-ref-typeface-weight-medium) 1.75rem/2.25rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-emphasized-headline-md-tracking: 0rem;
|
|
--md-sys-typescale-headline-sm: var(--md-ref-typeface-weight-regular) 1.5rem/2rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-headline-sm-tracking: 0rem;
|
|
--md-sys-typescale-emphasized-headline-sm: var(--md-ref-typeface-weight-medium) 1.5rem/2rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-emphasized-headline-sm-tracking: 0rem;
|
|
--md-sys-typescale-title-lg: var(--md-ref-typeface-weight-regular) 1.375rem/1.75rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-title-lg-tracking: 0rem;
|
|
--md-sys-typescale-emphasized-title-lg: var(--md-ref-typeface-weight-medium) 1.375rem/1.75rem var(--md-ref-typeface-brand);
|
|
--md-sys-typescale-emphasized-title-lg-tracking: 0rem;
|
|
--md-sys-typescale-title-md: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-title-md-tracking: 0.0125rem;
|
|
--md-sys-typescale-emphasized-title-md: var(--md-ref-typeface-weight-bold) 1rem/1.5rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-emphasized-title-md-tracking: 0.009375rem;
|
|
--md-sys-typescale-title-sm: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-title-sm-tracking: 0.00625rem;
|
|
--md-sys-typescale-emphasized-title-sm: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-emphasized-title-sm-tracking: 0.00625rem;
|
|
--md-sys-typescale-body-lg: var(--md-ref-typeface-weight-regular) 1rem/1.5rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-body-lg-tracking: 0.03125rem;
|
|
--md-sys-typescale-emphasized-body-lg: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-emphasized-body-lg-tracking: 0.009375rem;
|
|
--md-sys-typescale-body-md: var(--md-ref-typeface-weight-regular) 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-body-md-tracking: 0.0125rem;
|
|
--md-sys-typescale-emphasized-body-md: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-emphasized-body-md-tracking: 0.015625rem;
|
|
--md-sys-typescale-body-sm: var(--md-ref-typeface-weight-regular) 0.75rem/1rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-body-sm-tracking: 0.025rem;
|
|
--md-sys-typescale-emphasized-body-sm: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-emphasized-body-sm-tracking: 0.025rem;
|
|
--md-sys-typescale-label-lg: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-label-lg-tracking: 0.00625rem;
|
|
--md-sys-typescale-emphasized-label-lg: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-emphasized-label-lg-tracking: 0.00625rem;
|
|
--md-sys-typescale-label-md: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-label-md-tracking: 0.03125rem;
|
|
--md-sys-typescale-emphasized-label-md: var(--md-ref-typeface-weight-bold) 0.75rem/1rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-emphasized-label-md-tracking: 0.03125rem;
|
|
--md-sys-typescale-label-sm: var(--md-ref-typeface-weight-medium) 0.6875rem/1rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-label-sm-tracking: 0.03125rem;
|
|
--md-sys-typescale-emphasized-label-sm: var(--md-ref-typeface-weight-bold) 0.6875rem/1rem var(--md-ref-typeface-plain);
|
|
--md-sys-typescale-emphasized-label-sm-tracking: 0.03125rem;
|
|
}
|
|
}
|
|
|
|
@layer material.tokens {
|
|
:root {
|
|
--md-sys-state-hover-state-layer-opacity: 0.08;
|
|
--md-sys-state-focus-state-layer-opacity: 0.1;
|
|
--md-sys-state-pressed-state-layer-opacity: 0.1;
|
|
--md-sys-state-dragged-state-layer-opacity: 0.16;
|
|
--md-sys-state-disabled-content-opacity: 0.38;
|
|
--md-sys-state-disabled-container-opacity: 0.12;
|
|
}
|
|
}
|
|
|
|
@layer material.tokens {
|
|
:root {
|
|
--md-sys-measurement-space25: 2px;
|
|
--md-sys-measurement-space50: 4px;
|
|
--md-sys-measurement-space75: 6px;
|
|
--md-sys-measurement-space100: 8px;
|
|
--md-sys-measurement-space125: 10px;
|
|
--md-sys-measurement-space200: 16px;
|
|
--md-sys-measurement-space300: 24px;
|
|
--md-sys-measurement-space400: 32px;
|
|
--md-sys-measurement-space500: 40px;
|
|
--md-sys-measurement-space600: 48px;
|
|
--md-sys-measurement-space700: 56px;
|
|
--md-sys-measurement-space800: 64px;
|
|
--md-sys-measurement-space900: 72px;
|
|
}
|
|
}
|
|
|
|
@layer material.base {
|
|
@font-face {
|
|
font-family: 'Google Sans Flex';
|
|
src: url('../fonts/google-sans-flex/GoogleSansFlex-Latin.woff2') format('woff2');
|
|
font-weight: 400 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
}
|
|
|
|
@layer material.base {
|
|
html {
|
|
background-color: var(--md-sys-color-surface);
|
|
color: var(--md-sys-color-on-surface);
|
|
font-family: var(--md-ref-typeface-brand);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
}
|
|
|
|
@layer material.base {
|
|
.md-state-layer {
|
|
position: relative;
|
|
isolation: isolate;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
border-radius: inherit;
|
|
background-color: currentColor;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:hover::before {
|
|
opacity: var(--md-sys-state-hover-state-layer-opacity);
|
|
}
|
|
}
|
|
|
|
&:focus-visible::before {
|
|
opacity: var(--md-sys-state-focus-state-layer-opacity);
|
|
}
|
|
|
|
&:active::before {
|
|
opacity: var(--md-sys-state-pressed-state-layer-opacity);
|
|
}
|
|
|
|
&[data-md-dragged]::before {
|
|
opacity: var(--md-sys-state-dragged-state-layer-opacity);
|
|
}
|
|
|
|
&:disabled::before,
|
|
&[aria-disabled='true']::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.md-focus-ring {
|
|
outline: none;
|
|
|
|
&:focus-visible {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
.md-touch-target {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: var(--md-sys-measurement-space600);
|
|
min-height: var(--md-sys-measurement-space600);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
|
|
.md-link {
|
|
cursor: pointer;
|
|
text-decoration-line: underline;
|
|
text-decoration-thickness: from-font;
|
|
text-underline-offset: 0.15em;
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
|
|
&:focus-visible {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.text {
|
|
.md-type-display-lg {
|
|
font: var(--md-sys-typescale-display-lg);
|
|
letter-spacing: var(--md-sys-typescale-display-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-display-lg {
|
|
font: var(--md-sys-typescale-emphasized-display-lg);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-display-lg-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-display-md {
|
|
font: var(--md-sys-typescale-display-md);
|
|
letter-spacing: var(--md-sys-typescale-display-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-display-md {
|
|
font: var(--md-sys-typescale-emphasized-display-md);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-display-md-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-display-sm {
|
|
font: var(--md-sys-typescale-display-sm);
|
|
letter-spacing: var(--md-sys-typescale-display-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-display-sm {
|
|
font: var(--md-sys-typescale-emphasized-display-sm);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-display-sm-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-headline-lg {
|
|
font: var(--md-sys-typescale-headline-lg);
|
|
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-headline-lg {
|
|
font: var(--md-sys-typescale-emphasized-headline-lg);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-headline-lg-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-headline-md {
|
|
font: var(--md-sys-typescale-headline-md);
|
|
letter-spacing: var(--md-sys-typescale-headline-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-headline-md {
|
|
font: var(--md-sys-typescale-emphasized-headline-md);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-headline-md-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-headline-sm {
|
|
font: var(--md-sys-typescale-headline-sm);
|
|
letter-spacing: var(--md-sys-typescale-headline-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-headline-sm {
|
|
font: var(--md-sys-typescale-emphasized-headline-sm);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-headline-sm-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-title-lg {
|
|
font: var(--md-sys-typescale-title-lg);
|
|
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-title-lg {
|
|
font: var(--md-sys-typescale-emphasized-title-lg);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-title-lg-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-title-md {
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-title-md {
|
|
font: var(--md-sys-typescale-emphasized-title-md);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-title-md-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-title-sm {
|
|
font: var(--md-sys-typescale-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-title-sm {
|
|
font: var(--md-sys-typescale-emphasized-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-title-sm-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-body-lg {
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-body-lg {
|
|
font: var(--md-sys-typescale-emphasized-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-body-lg-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-body-md {
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-body-md {
|
|
font: var(--md-sys-typescale-emphasized-body-md);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-body-md-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-body-sm {
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-body-sm {
|
|
font: var(--md-sys-typescale-emphasized-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-body-sm-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-label-lg {
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-label-lg {
|
|
font: var(--md-sys-typescale-emphasized-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-label-lg-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-label-md {
|
|
font: var(--md-sys-typescale-label-md);
|
|
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-label-md {
|
|
font: var(--md-sys-typescale-emphasized-label-md);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-label-md-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-type-label-sm {
|
|
font: var(--md-sys-typescale-label-sm);
|
|
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
.md-type-emphasized-label-sm {
|
|
font: var(--md-sys-typescale-emphasized-label-sm);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-label-sm-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
}
|
|
|
|
.md-ink {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
.md-ink-variant {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
.md-ink-quiet {
|
|
color: var(--md-sys-color-outline);
|
|
}
|
|
|
|
.md-ink-primary {
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
.md-ink-error {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
|
|
.md-ink-success {
|
|
color: var(--md-sys-color-success);
|
|
}
|
|
|
|
.md-ink-warning {
|
|
color: var(--md-sys-color-warning);
|
|
}
|
|
|
|
.md-ink-info {
|
|
color: var(--md-sys-color-info);
|
|
}
|
|
|
|
.md-ink-inverse {
|
|
color: var(--md-sys-color-inverse-on-surface);
|
|
}
|
|
|
|
.md-text-start {
|
|
text-align: start;
|
|
}
|
|
|
|
.md-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.md-text-end {
|
|
text-align: end;
|
|
}
|
|
|
|
.md-truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.md-line-clamp-2 {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.md-line-clamp-3 {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
|
|
.md-nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.md-tabular {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.md-mono {
|
|
font-family: var(--md-ref-typeface-mono);
|
|
}
|
|
|
|
.md-visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
}
|
|
|
|
@layer material.layout {
|
|
[data-md-gap='none'] {
|
|
--md-gap: 0px;
|
|
}
|
|
|
|
[data-md-gap='space25'] {
|
|
--md-gap: var(--md-sys-measurement-space25);
|
|
}
|
|
|
|
[data-md-gap='space50'] {
|
|
--md-gap: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-gap='space75'] {
|
|
--md-gap: var(--md-sys-measurement-space75);
|
|
}
|
|
|
|
[data-md-gap='space100'] {
|
|
--md-gap: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-gap='space125'] {
|
|
--md-gap: var(--md-sys-measurement-space125);
|
|
}
|
|
|
|
[data-md-gap='space200'] {
|
|
--md-gap: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-gap='space300'] {
|
|
--md-gap: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
[data-md-gap='space400'] {
|
|
--md-gap: var(--md-sys-measurement-space400);
|
|
}
|
|
|
|
[data-md-gap='space500'] {
|
|
--md-gap: var(--md-sys-measurement-space500);
|
|
}
|
|
|
|
[data-md-gap='space600'] {
|
|
--md-gap: var(--md-sys-measurement-space600);
|
|
}
|
|
|
|
[data-md-gap='space700'] {
|
|
--md-gap: var(--md-sys-measurement-space700);
|
|
}
|
|
|
|
[data-md-gap='space800'] {
|
|
--md-gap: var(--md-sys-measurement-space800);
|
|
}
|
|
|
|
[data-md-gap='space900'] {
|
|
--md-gap: var(--md-sys-measurement-space900);
|
|
}
|
|
|
|
[data-md-padding='space25'] {
|
|
padding: var(--md-sys-measurement-space25);
|
|
}
|
|
|
|
[data-md-padding='space50'] {
|
|
padding: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-padding='space75'] {
|
|
padding: var(--md-sys-measurement-space75);
|
|
}
|
|
|
|
[data-md-padding='space100'] {
|
|
padding: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-padding='space125'] {
|
|
padding: var(--md-sys-measurement-space125);
|
|
}
|
|
|
|
[data-md-padding='space200'] {
|
|
padding: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-padding='space300'] {
|
|
padding: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
[data-md-padding='space400'] {
|
|
padding: var(--md-sys-measurement-space400);
|
|
}
|
|
|
|
[data-md-padding='space500'] {
|
|
padding: var(--md-sys-measurement-space500);
|
|
}
|
|
|
|
[data-md-padding='space600'] {
|
|
padding: var(--md-sys-measurement-space600);
|
|
}
|
|
|
|
[data-md-padding='space700'] {
|
|
padding: var(--md-sys-measurement-space700);
|
|
}
|
|
|
|
[data-md-padding='space800'] {
|
|
padding: var(--md-sys-measurement-space800);
|
|
}
|
|
|
|
[data-md-padding='space900'] {
|
|
padding: var(--md-sys-measurement-space900);
|
|
}
|
|
}
|
|
|
|
@layer material.visibility {
|
|
@media (width < 600px) {
|
|
[data-md-hide-below='medium'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width < 840px) {
|
|
[data-md-hide-below='expanded'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width < 1200px) {
|
|
[data-md-hide-below='large'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width < 1600px) {
|
|
[data-md-hide-below='extra-large'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-hide-from='medium'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width >= 840px) {
|
|
[data-md-hide-from='expanded'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width >= 1200px) {
|
|
[data-md-hide-from='large'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width >= 1600px) {
|
|
[data-md-hide-from='extra-large'] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.layout {
|
|
:where([data-md-stack]) {
|
|
--md-gap: 0px;
|
|
}
|
|
|
|
[data-md-stack] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--md-gap);
|
|
}
|
|
|
|
[data-md-stack]:is(:not([data-md-align]), [data-md-align='stretch']) > [data-md-button] {
|
|
align-self: start;
|
|
}
|
|
|
|
[data-md-stack][data-md-align='start'] {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
[data-md-stack][data-md-align='center'] {
|
|
align-items: center;
|
|
}
|
|
|
|
[data-md-stack][data-md-align='end'] {
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
|
|
@layer material.layout {
|
|
:where([data-md-row]) {
|
|
--md-gap: 0px;
|
|
}
|
|
|
|
[data-md-row] {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: var(--md-gap);
|
|
}
|
|
|
|
[data-md-row][data-md-align='start'] {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
[data-md-row][data-md-align='end'] {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
[data-md-row][data-md-align='stretch'] {
|
|
align-items: stretch;
|
|
}
|
|
|
|
[data-md-row][data-md-align='baseline'] {
|
|
align-items: baseline;
|
|
}
|
|
|
|
[data-md-row][data-md-justify='start'] {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
[data-md-row][data-md-justify='center'] {
|
|
justify-content: center;
|
|
}
|
|
|
|
[data-md-row][data-md-justify='end'] {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
[data-md-row][data-md-justify='between'] {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
[data-md-row][data-md-wrap] {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-row][data-md-stack-below='medium'] {
|
|
flex-direction: column;
|
|
}
|
|
|
|
[data-md-row][data-md-stack-below='medium']:not([data-md-align]) {
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
|
|
@media (width < 840px) {
|
|
[data-md-row][data-md-stack-below='expanded'] {
|
|
flex-direction: column;
|
|
}
|
|
|
|
[data-md-row][data-md-stack-below='expanded']:not([data-md-align]) {
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
|
|
@media (width < 1200px) {
|
|
[data-md-row][data-md-stack-below='large'] {
|
|
flex-direction: column;
|
|
}
|
|
|
|
[data-md-row][data-md-stack-below='large']:not([data-md-align]) {
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
|
|
@media (width < 1600px) {
|
|
[data-md-row][data-md-stack-below='extra-large'] {
|
|
flex-direction: column;
|
|
}
|
|
|
|
[data-md-row][data-md-stack-below='extra-large']:not([data-md-align]) {
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.layout {
|
|
:where([data-md-grid]) {
|
|
--md-gap: 0px;
|
|
}
|
|
|
|
[data-md-grid] {
|
|
--md-columns: var(--md-columns-compact, 1);
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--md-columns), minmax(0, 1fr));
|
|
gap: var(--md-gap);
|
|
|
|
@media (width >= 600px) {
|
|
--md-columns: var(--md-columns-medium, 1);
|
|
}
|
|
|
|
@media (width >= 840px) {
|
|
--md-columns: var(--md-columns-expanded, 1);
|
|
}
|
|
|
|
@media (width >= 1200px) {
|
|
--md-columns: var(--md-columns-large, 1);
|
|
}
|
|
|
|
@media (width >= 1600px) {
|
|
--md-columns: var(--md-columns-extra-large, 1);
|
|
}
|
|
}
|
|
|
|
[data-md-grid][data-md-min-item] {
|
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--md-min-item)), 1fr));
|
|
}
|
|
|
|
[data-md-grid][data-md-min-item][data-md-columns] {
|
|
grid-template-columns: repeat(
|
|
auto-fill,
|
|
minmax(min(100%, max(var(--md-min-item), (100% - (var(--md-columns) - 1) * var(--md-gap)) / var(--md-columns))), 1fr)
|
|
);
|
|
}
|
|
}
|
|
|
|
@layer material.layout {
|
|
[data-md-surface] {
|
|
background-color: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface'] {
|
|
background-color: var(--md-sys-color-surface);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface-dim'] {
|
|
background-color: var(--md-sys-color-surface-dim);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface-bright'] {
|
|
background-color: var(--md-sys-color-surface-bright);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface-container-lowest'] {
|
|
background-color: var(--md-sys-color-surface-container-lowest);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface-container-low'] {
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface-container-high'] {
|
|
background-color: var(--md-sys-color-surface-container-high);
|
|
}
|
|
|
|
[data-md-surface][data-md-level='surface-container-highest'] {
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='none'] {
|
|
border-radius: var(--md-sys-shape-corner-none);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='xs'] {
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='sm'] {
|
|
border-radius: var(--md-sys-shape-corner-sm);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='md'] {
|
|
border-radius: var(--md-sys-shape-corner-md);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='lg'] {
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='lg-increased'] {
|
|
border-radius: var(--md-sys-shape-corner-lg-increased);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='xl'] {
|
|
border-radius: var(--md-sys-shape-corner-xl);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='xl-increased'] {
|
|
border-radius: var(--md-sys-shape-corner-xl-increased);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='xxl'] {
|
|
border-radius: var(--md-sys-shape-corner-xxl);
|
|
}
|
|
|
|
[data-md-surface][data-md-corner='full'] {
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
}
|
|
|
|
[data-md-surface][data-md-outlined] {
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
[data-md-surface] > * {
|
|
--md-layout-margin: initial;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-icon] {
|
|
flex-shrink: 0;
|
|
inline-size: var(--md-icon-size, 24px);
|
|
block-size: var(--md-icon-size, 24px);
|
|
}
|
|
|
|
[data-md-icon][data-md-mirror-rtl]:is([dir='rtl'], [dir='rtl'] *) {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-loading] {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--md-loading-size, 48px);
|
|
block-size: var(--md-loading-size, 48px);
|
|
color: var(--md-sys-color-primary);
|
|
|
|
& > svg {
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
}
|
|
|
|
& > [data-md-loading-still] {
|
|
display: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
& > [data-md-loading-animated] {
|
|
display: none;
|
|
}
|
|
|
|
& > [data-md-loading-still] {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-md-loading][data-md-contained] {
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-tooltip-anchor] {
|
|
display: inline-flex;
|
|
}
|
|
|
|
[data-md-tooltip] {
|
|
inset: auto;
|
|
margin: 0;
|
|
max-inline-size: 200px;
|
|
overflow: visible;
|
|
border-width: 0;
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
padding-block: var(--md-sys-measurement-space50);
|
|
padding-inline: var(--md-sys-measurement-space100);
|
|
background-color: var(--md-sys-color-inverse-surface);
|
|
color: var(--md-sys-color-inverse-on-surface);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
text-align: center;
|
|
white-space: normal;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition-property: opacity;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
|
|
&:popover-open:not([data-md-popover-closing]) {
|
|
opacity: 1;
|
|
|
|
@starting-style {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-md-tooltip]:is([data-md-side='top'], [data-md-side='bottom']) {
|
|
margin-block: var(--md-sys-measurement-space50);
|
|
position-try-fallbacks: flip-block;
|
|
}
|
|
|
|
[data-md-tooltip]:is([data-md-side='left'], [data-md-side='right']) {
|
|
margin-inline: var(--md-sys-measurement-space50);
|
|
position-try-fallbacks: flip-inline;
|
|
}
|
|
|
|
[data-md-tooltip][data-md-side='top'] {
|
|
position-area: top;
|
|
}
|
|
|
|
[data-md-tooltip][data-md-side='bottom'] {
|
|
position-area: bottom;
|
|
}
|
|
|
|
[data-md-tooltip][data-md-side='left'] {
|
|
position-area: left;
|
|
}
|
|
|
|
[data-md-tooltip][data-md-side='right'] {
|
|
position-area: right;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
@property --md-color {
|
|
syntax: '*';
|
|
inherits: false;
|
|
}
|
|
|
|
@property --md-on-color {
|
|
syntax: '*';
|
|
inherits: false;
|
|
}
|
|
|
|
@property --md-container {
|
|
syntax: '*';
|
|
inherits: false;
|
|
}
|
|
|
|
@property --md-on-container {
|
|
syntax: '*';
|
|
inherits: false;
|
|
}
|
|
|
|
[data-md-color='primary'] {
|
|
--md-color: var(--md-sys-color-primary);
|
|
--md-on-color: var(--md-sys-color-on-primary);
|
|
--md-container: var(--md-sys-color-primary-container);
|
|
--md-on-container: var(--md-sys-color-on-primary-container);
|
|
}
|
|
|
|
[data-md-color='secondary'] {
|
|
--md-color: var(--md-sys-color-secondary);
|
|
--md-on-color: var(--md-sys-color-on-secondary);
|
|
--md-container: var(--md-sys-color-secondary-container);
|
|
--md-on-container: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-color='tertiary'] {
|
|
--md-color: var(--md-sys-color-tertiary);
|
|
--md-on-color: var(--md-sys-color-on-tertiary);
|
|
--md-container: var(--md-sys-color-tertiary-container);
|
|
--md-on-container: var(--md-sys-color-on-tertiary-container);
|
|
}
|
|
|
|
[data-md-color='error'] {
|
|
--md-color: var(--md-sys-color-error);
|
|
--md-on-color: var(--md-sys-color-on-error);
|
|
--md-container: var(--md-sys-color-error-container);
|
|
--md-on-container: var(--md-sys-color-on-error-container);
|
|
}
|
|
|
|
[data-md-color='success'] {
|
|
--md-color: var(--md-sys-color-success);
|
|
--md-on-color: var(--md-sys-color-on-success);
|
|
--md-container: var(--md-sys-color-success-container);
|
|
--md-on-container: var(--md-sys-color-on-success-container);
|
|
}
|
|
|
|
[data-md-color='warning'] {
|
|
--md-color: var(--md-sys-color-warning);
|
|
--md-on-color: var(--md-sys-color-on-warning);
|
|
--md-container: var(--md-sys-color-warning-container);
|
|
--md-on-container: var(--md-sys-color-on-warning-container);
|
|
}
|
|
|
|
[data-md-color='info'] {
|
|
--md-color: var(--md-sys-color-info);
|
|
--md-on-color: var(--md-sys-color-on-info);
|
|
--md-container: var(--md-sys-color-info-container);
|
|
--md-on-container: var(--md-sys-color-on-info-container);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-button] {
|
|
--md-button-color: var(--md-color, var(--md-sys-color-primary));
|
|
--md-button-on-color: var(--md-on-color, var(--md-sys-color-on-primary));
|
|
--md-button-tone: var(--md-container, var(--md-sys-color-secondary-container));
|
|
--md-button-on-tone: var(--md-on-container, var(--md-sys-color-on-secondary-container));
|
|
--md-button-tone-selected: var(--md-sys-color-secondary);
|
|
--md-button-on-tone-selected: var(--md-sys-color-on-secondary);
|
|
--md-button-quiet: var(--md-sys-color-on-surface-variant);
|
|
|
|
--md-button-container: transparent;
|
|
--md-button-label: var(--md-button-color);
|
|
--md-button-outline: transparent;
|
|
--md-button-elevation: none;
|
|
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
block-size: var(--md-button-height);
|
|
background-color: var(--md-button-container);
|
|
color: var(--md-button-label);
|
|
box-shadow: var(--md-button-elevation);
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
transition-property: border-radius, padding, margin, bottom, background-color, color, box-shadow;
|
|
transition-duration:
|
|
var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration),
|
|
var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration),
|
|
var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function:
|
|
var(--md-sys-motion-spatial-fast), var(--md-sys-motion-spatial-fast),
|
|
var(--md-sys-motion-spatial-fast), var(--md-sys-motion-spatial-fast),
|
|
var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast);
|
|
}
|
|
[data-md-button][data-md-size='xs'] {
|
|
--md-button-height: 32px;
|
|
--md-button-padding: var(--md-sys-measurement-space200);
|
|
--md-button-gap: var(--md-sys-measurement-space100);
|
|
--md-button-icon: 20px;
|
|
--md-button-outline-width: 1px;
|
|
--md-button-square: var(--md-sys-shape-corner-md);
|
|
--md-button-pressed: var(--md-sys-shape-corner-sm);
|
|
--md-button-narrow: 28px;
|
|
--md-button-default: 32px;
|
|
--md-button-wide: 40px;
|
|
}
|
|
|
|
[data-md-button][data-md-size='sm'] {
|
|
--md-button-height: 40px;
|
|
--md-button-padding: var(--md-sys-measurement-space200);
|
|
--md-button-gap: var(--md-sys-measurement-space100);
|
|
--md-button-icon: 20px;
|
|
--md-button-outline-width: 1px;
|
|
--md-button-square: var(--md-sys-shape-corner-md);
|
|
--md-button-pressed: var(--md-sys-shape-corner-sm);
|
|
--md-button-narrow: 32px;
|
|
--md-button-default: 40px;
|
|
--md-button-wide: 52px;
|
|
}
|
|
|
|
[data-md-button][data-md-size='sm'][data-md-icon-button] {
|
|
--md-button-icon: 24px;
|
|
}
|
|
|
|
[data-md-button][data-md-size='md'] {
|
|
--md-button-height: 56px;
|
|
--md-button-padding: var(--md-sys-measurement-space300);
|
|
--md-button-gap: var(--md-sys-measurement-space100);
|
|
--md-button-icon: 24px;
|
|
--md-button-outline-width: 1px;
|
|
--md-button-square: var(--md-sys-shape-corner-lg);
|
|
--md-button-pressed: var(--md-sys-shape-corner-md);
|
|
--md-button-narrow: 48px;
|
|
--md-button-default: 56px;
|
|
--md-button-wide: 72px;
|
|
}
|
|
|
|
[data-md-button][data-md-size='lg'] {
|
|
--md-button-height: 96px;
|
|
--md-button-padding: var(--md-sys-measurement-space600);
|
|
--md-button-gap: 12px;
|
|
--md-button-icon: 32px;
|
|
--md-button-outline-width: 2px;
|
|
--md-button-square: var(--md-sys-shape-corner-xl);
|
|
--md-button-pressed: var(--md-sys-shape-corner-lg);
|
|
--md-button-narrow: 64px;
|
|
--md-button-default: 96px;
|
|
--md-button-wide: 128px;
|
|
}
|
|
|
|
[data-md-button][data-md-size='xl'] {
|
|
--md-button-height: 136px;
|
|
--md-button-padding: var(--md-sys-measurement-space800);
|
|
--md-button-gap: var(--md-sys-measurement-space200);
|
|
--md-button-icon: 40px;
|
|
--md-button-outline-width: 3px;
|
|
--md-button-square: var(--md-sys-shape-corner-xl);
|
|
--md-button-pressed: var(--md-sys-shape-corner-lg);
|
|
--md-button-narrow: 104px;
|
|
--md-button-default: 136px;
|
|
--md-button-wide: 184px;
|
|
}
|
|
|
|
[data-md-button]:not([data-md-icon-button]) {
|
|
gap: var(--md-button-gap);
|
|
padding-inline: var(--md-button-padding);
|
|
}
|
|
|
|
[data-md-button]:not([data-md-icon-button]):is([data-md-size='xs'], [data-md-size='sm']) {
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-button]:not([data-md-icon-button])[data-md-size='md'] {
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-button]:not([data-md-icon-button])[data-md-size='lg'] {
|
|
font: var(--md-sys-typescale-headline-sm);
|
|
letter-spacing: var(--md-sys-typescale-headline-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-button]:not([data-md-icon-button])[data-md-size='xl'] {
|
|
font: var(--md-sys-typescale-headline-lg);
|
|
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-button][data-md-icon-button] {
|
|
--md-button-width: var(--md-button-default);
|
|
|
|
inline-size: var(--md-button-width);
|
|
|
|
&[data-md-width='narrow'] {
|
|
--md-button-width: var(--md-button-narrow);
|
|
}
|
|
|
|
&[data-md-width='wide'] {
|
|
--md-button-width: var(--md-button-wide);
|
|
}
|
|
}
|
|
:where([data-md-button]) {
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
}
|
|
|
|
:where([data-md-button]):where([data-md-shape='square'], [data-md-selected='true']) {
|
|
border-radius: var(--md-button-square);
|
|
}
|
|
|
|
:where([data-md-button]):where([data-md-icon-button][data-md-shape='square'][data-md-selected='true']) {
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
}
|
|
|
|
:where([data-md-button]):where(:active) {
|
|
border-radius: var(--md-button-pressed);
|
|
}
|
|
[data-md-button][data-md-color='primary'] {
|
|
--md-button-tone: var(--md-sys-color-secondary-container);
|
|
--md-button-on-tone: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
[data-md-button]:not([data-md-color='primary']) {
|
|
--md-button-tone-selected: var(--md-button-color);
|
|
--md-button-on-tone-selected: var(--md-button-on-color);
|
|
--md-button-quiet: var(--md-button-color);
|
|
}
|
|
[data-md-button][data-md-variant='filled'] {
|
|
--md-button-container: var(--md-button-color);
|
|
--md-button-label: var(--md-button-on-color);
|
|
|
|
&[data-md-selected='false'] {
|
|
--md-button-container: var(--md-sys-color-surface-container);
|
|
--md-button-label: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
}
|
|
|
|
[data-md-button][data-md-variant='tonal'] {
|
|
--md-button-container: var(--md-button-tone);
|
|
--md-button-label: var(--md-button-on-tone);
|
|
|
|
&[data-md-selected='true'] {
|
|
--md-button-container: var(--md-button-tone-selected);
|
|
--md-button-label: var(--md-button-on-tone-selected);
|
|
}
|
|
}
|
|
|
|
[data-md-button][data-md-variant='outlined'] {
|
|
--md-button-label: var(--md-button-quiet);
|
|
--md-button-outline: var(--md-sys-color-outline-variant);
|
|
|
|
border: var(--md-button-outline-width) solid var(--md-button-outline);
|
|
|
|
&[data-md-selected='true'] {
|
|
--md-button-container: var(--md-sys-color-inverse-surface);
|
|
--md-button-label: var(--md-sys-color-inverse-on-surface);
|
|
--md-button-outline: transparent;
|
|
}
|
|
}
|
|
|
|
[data-md-button][data-md-variant='elevated'] {
|
|
--md-button-container: var(--md-sys-color-surface-container-low);
|
|
--md-button-elevation: var(--md-sys-elevation-1);
|
|
|
|
&[data-md-selected='true'] {
|
|
--md-button-container: var(--md-button-color);
|
|
--md-button-label: var(--md-button-on-color);
|
|
}
|
|
}
|
|
|
|
[data-md-button][data-md-variant='text'][data-md-icon-button]:not([data-md-selected='true']) {
|
|
--md-button-label: var(--md-button-quiet);
|
|
}
|
|
|
|
[data-md-button][data-md-variant='text']:not([data-md-icon-button])[data-md-selected='true'] {
|
|
--md-button-container: var(--md-button-tone);
|
|
--md-button-label: var(--md-button-on-tone);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-button]:is([data-md-variant='filled'], [data-md-variant='tonal']):hover {
|
|
--md-button-elevation: var(--md-sys-elevation-1);
|
|
}
|
|
|
|
[data-md-button][data-md-variant='elevated']:hover {
|
|
--md-button-elevation: var(--md-sys-elevation-2);
|
|
}
|
|
}
|
|
[data-md-button]:is(:disabled, [aria-disabled='true']) {
|
|
box-shadow: none;
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-button]:is([data-md-variant='filled'], [data-md-variant='tonal'], [data-md-variant='elevated'], [data-md-variant='outlined'][data-md-selected='true']):is(:disabled, [aria-disabled='true']) {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
|
|
}
|
|
|
|
[data-md-button]:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
[data-md-button][aria-disabled='true'] {
|
|
pointer-events: none;
|
|
}
|
|
[data-md-button-icon] {
|
|
display: contents;
|
|
}
|
|
|
|
[data-md-button-spinner] {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
[data-md-button-spinner] > [data-md-loading] {
|
|
inline-size: var(--md-button-icon);
|
|
block-size: var(--md-button-icon);
|
|
color: currentColor;
|
|
}
|
|
|
|
@media (width < 840px) {
|
|
[data-md-button] > [data-md-responsive] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-button][data-md-compact-fab] {
|
|
--md-button-height: 56px;
|
|
--md-button-padding: var(--md-sys-measurement-space200);
|
|
--md-button-gap: var(--md-sys-measurement-space100);
|
|
|
|
position: fixed;
|
|
inset-inline-end: var(--md-sys-measurement-space200);
|
|
bottom: calc(var(--material-bottom-bar, 0px) + var(--material-snackbar-height, 0px) + var(--md-sys-measurement-space200));
|
|
z-index: 30;
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-button][data-md-compact-fab] [data-md-icon] {
|
|
inline-size: 24px;
|
|
block-size: 24px;
|
|
}
|
|
[data-md-button][data-md-compact-fab][data-md-unavailable] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-bottom-sheet-scrim] {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 40;
|
|
background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
|
|
opacity: 0;
|
|
transition-property: opacity;
|
|
transition-duration: var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-default);
|
|
}
|
|
|
|
[data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-scrim] {
|
|
opacity: 1;
|
|
}
|
|
|
|
@starting-style {
|
|
[data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-scrim] {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
[data-md-bottom-sheet-probe] {
|
|
position: fixed;
|
|
inset-inline-start: 0;
|
|
top: 0;
|
|
width: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-md-bottom-sheet-panel] {
|
|
position: fixed;
|
|
inset-inline: 0;
|
|
bottom: 0;
|
|
z-index: 50;
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 640px;
|
|
margin-inline: auto;
|
|
flex-direction: column;
|
|
max-height: var(--sheet-max-height);
|
|
touch-action: pan-y;
|
|
border-radius: var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none);
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
color: var(--md-sys-color-on-surface);
|
|
box-shadow: var(--md-sys-elevation-1);
|
|
padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom));
|
|
translate: 0 100%;
|
|
transition-property: translate;
|
|
transition-duration: var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
|
|
}
|
|
|
|
[data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-panel] {
|
|
translate: 0 0;
|
|
transition-duration: var(--md-sys-motion-spatial-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
|
|
}
|
|
|
|
@starting-style {
|
|
[data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-panel] {
|
|
translate: 0 100%;
|
|
}
|
|
}
|
|
[data-md-bottom-sheet-panel][data-md-preset] {
|
|
height: var(--sheet-max-height);
|
|
transition-property: translate, height;
|
|
transition-duration: var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-spatial-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate), var(--md-sys-motion-spatial-default);
|
|
}
|
|
|
|
[data-md-bottom-sheet][data-md-open] > [data-md-bottom-sheet-panel][data-md-preset] {
|
|
transition-duration: var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate), var(--md-sys-motion-spatial-default);
|
|
}
|
|
|
|
[data-md-bottom-sheet-handle] {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
justify-content: center;
|
|
padding-block: 22px;
|
|
cursor: grab;
|
|
}
|
|
|
|
[data-md-bottom-sheet-handle]:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
[data-md-bottom-sheet-grip] {
|
|
width: 32px;
|
|
height: 4px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-bottom-sheet-grip]:focus-visible {
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
[data-md-bottom-sheet-body] {
|
|
min-height: 0;
|
|
flex: 1 1 0%;
|
|
overflow-y: auto;
|
|
padding-inline: var(--md-sys-measurement-space300);
|
|
padding-bottom: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
[data-md-bottom-sheet-title] {
|
|
margin-bottom: var(--md-sys-measurement-space200);
|
|
font: var(--md-sys-typescale-title-lg);
|
|
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
|
}
|
|
|
|
[data-md-bottom-sheet-actions] {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--md-sys-measurement-space100);
|
|
padding-inline: var(--md-sys-measurement-space300);
|
|
padding-bottom: var(--md-sys-measurement-space300);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-menu] {
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
|
|
[data-md-menu-trigger] {
|
|
display: inline-flex;
|
|
}
|
|
[data-md-menu-popover],
|
|
[data-md-submenu] {
|
|
inset: auto;
|
|
min-inline-size: 112px;
|
|
max-inline-size: 280px;
|
|
max-block-size: min(288px, calc(100dvh - 32px));
|
|
overflow-y: auto;
|
|
border-width: 0;
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
padding: var(--md-sys-measurement-space50);
|
|
background-color: var(--material-menu-surface, var(--md-sys-color-surface-container-low));
|
|
color: var(--material-menu-ink, var(--md-sys-color-on-surface));
|
|
box-shadow: var(--md-sys-elevation-2);
|
|
opacity: 0;
|
|
scale: 0.95;
|
|
transition-property: opacity, scale;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast), var(--md-sys-motion-spatial-fast);
|
|
|
|
&:popover-open:not([data-md-popover-closing]) {
|
|
opacity: 1;
|
|
scale: 1;
|
|
}
|
|
|
|
@starting-style {
|
|
&:popover-open {
|
|
opacity: 0;
|
|
scale: 0.95;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-md-menu-popover] {
|
|
--material-menu-surface: var(--md-sys-color-surface-container-low);
|
|
--material-menu-ink: var(--md-sys-color-on-surface);
|
|
|
|
margin: var(--md-sys-measurement-space50) 0;
|
|
position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
|
|
}
|
|
|
|
[data-md-menu-popover]:has(> [data-md-menu-filter]) {
|
|
padding: 0;
|
|
}
|
|
|
|
[data-md-menu-popover][data-md-vibrant] {
|
|
--material-menu-surface: var(--md-sys-color-tertiary-container);
|
|
--material-menu-ink: var(--md-sys-color-on-tertiary-container);
|
|
}
|
|
|
|
[data-md-menu-popover][data-md-position='bottom-start'] {
|
|
transform-origin: top;
|
|
position-area: bottom span-right;
|
|
}
|
|
|
|
[data-md-menu-popover][data-md-position='bottom-end'] {
|
|
transform-origin: top;
|
|
position-area: bottom span-left;
|
|
}
|
|
|
|
[data-md-menu-popover][data-md-position='top-start'] {
|
|
transform-origin: bottom;
|
|
position-area: top span-right;
|
|
}
|
|
|
|
[data-md-menu-popover][data-md-position='top-end'] {
|
|
transform-origin: bottom;
|
|
position-area: top span-left;
|
|
}
|
|
[data-md-menu-filter] {
|
|
position: sticky;
|
|
inset-block-start: 0;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-block-size: var(--md-sys-measurement-space600);
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
border-block-end: 1px solid var(--md-sys-color-outline-variant);
|
|
background-color: var(--material-menu-surface, var(--md-sys-color-surface-container-low));
|
|
}
|
|
|
|
[data-md-menu-filter] input {
|
|
flex: 1;
|
|
min-inline-size: 0;
|
|
border-width: 0;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
color: inherit;
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
font-variation-settings: normal;
|
|
outline: none;
|
|
}
|
|
|
|
[data-md-menu-filter] input::placeholder {
|
|
color: color-mix(in srgb, var(--material-menu-ink, var(--md-sys-color-on-surface)) 70%, transparent);
|
|
}
|
|
|
|
[data-md-menu-list] {
|
|
padding: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-menu-empty] {
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
padding-block: 12px;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
:is([data-md-menu-popover], [data-md-menu-sheet]) [hidden] {
|
|
display: none;
|
|
}
|
|
:is([data-md-menu-popover], [data-md-menu-sheet]) [role^="menuitem"][data-md-active]:not([aria-checked="true"], [aria-current="page"]) {
|
|
background-color: color-mix(in srgb, var(--material-menu-ink, var(--md-sys-color-on-surface)) 8%, transparent);
|
|
}
|
|
[data-md-menu-sheet] {
|
|
margin-inline: calc(-1 * var(--md-sys-measurement-space300));
|
|
padding-inline: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-menu-sheet]:has(> [data-md-menu-filter]) {
|
|
padding-inline: 0;
|
|
}
|
|
|
|
[data-md-menu-sheet] [data-md-menu-filter] {
|
|
padding-inline: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
[data-md-menu-sheet] [data-md-menu-list] {
|
|
padding-inline: var(--md-sys-measurement-space100);
|
|
padding-block: var(--md-sys-measurement-space50) 0;
|
|
}
|
|
[data-md-menu-sheet] [data-md-submenu] {
|
|
position: static;
|
|
inset: auto;
|
|
inline-size: auto;
|
|
max-inline-size: none;
|
|
block-size: auto;
|
|
max-block-size: none;
|
|
margin: 0;
|
|
padding-block: var(--md-sys-measurement-space25);
|
|
padding-inline: var(--md-sys-measurement-space200) 0;
|
|
overflow: visible;
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
color: inherit;
|
|
box-shadow: none;
|
|
opacity: 1;
|
|
scale: none;
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-menu-sheet] [aria-expanded="true"] + [data-md-submenu] {
|
|
display: block;
|
|
|
|
@starting-style {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
[data-md-menu-sheet] [data-md-submenu-chevron] {
|
|
transition: rotate var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
[data-md-menu-sheet] [aria-expanded="true"] > [data-md-submenu-chevron] {
|
|
rotate: 90deg;
|
|
|
|
&:is([dir='rtl'], [dir='rtl'] *) {
|
|
rotate: -90deg;
|
|
}
|
|
}
|
|
|
|
[data-md-field-menu] {
|
|
max-block-size: 18rem;
|
|
overflow-y: auto;
|
|
padding-block: var(--md-sys-measurement-space100);
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
box-shadow: var(--md-sys-elevation-2);
|
|
}
|
|
[data-md-field-menu][popover] {
|
|
inset: auto;
|
|
top: anchor(bottom);
|
|
left: anchor(left);
|
|
width: anchor-size(width);
|
|
margin: var(--md-sys-measurement-space50) 0;
|
|
border-width: 0;
|
|
padding-inline: 0;
|
|
color: var(--md-sys-color-on-surface);
|
|
position-try-fallbacks: flip-block;
|
|
}
|
|
|
|
[data-md-field-option][aria-disabled="true"] {
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
|
cursor: default;
|
|
}
|
|
|
|
[data-md-field-option] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-block-size: var(--md-sys-measurement-space600);
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
font-variation-settings: normal;
|
|
cursor: pointer;
|
|
}
|
|
[data-md-field-option][data-md-active] {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
|
}
|
|
|
|
[data-md-field-option][aria-selected="true"] {
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-field-option][aria-selected="true"][data-md-active] {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
|
|
}
|
|
|
|
[data-md-field-check] {
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
[data-md-field-option]:not([aria-selected="true"]) [data-md-field-check] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
@supports (appearance: base-select) {
|
|
select[data-md-field-control]::picker(select) {
|
|
appearance: base-select;
|
|
}
|
|
select[data-md-field-control]::picker(select) {
|
|
position-try-order: normal;
|
|
max-block-size: 18rem;
|
|
max-inline-size: calc(100vw - 32px);
|
|
margin-block: var(--md-sys-measurement-space50);
|
|
padding-block: var(--md-sys-measurement-space100);
|
|
border-width: 0;
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface);
|
|
box-shadow: var(--md-sys-elevation-2);
|
|
opacity: 0;
|
|
transform-origin: top;
|
|
transition-property: opacity, display, overlay;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
transition-behavior: allow-discrete;
|
|
}
|
|
|
|
select[data-md-field-control]:open::picker(select) {
|
|
opacity: 1;
|
|
transition-property: opacity, scale, display, overlay;
|
|
transition-duration: var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
@starting-style {
|
|
select[data-md-field-control]:open::picker(select) {
|
|
opacity: 0;
|
|
scale: 0.95;
|
|
}
|
|
}
|
|
|
|
select[data-md-field-control] option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-block-size: var(--md-sys-measurement-space600);
|
|
padding-block: 0;
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
background-color: transparent;
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
font-variation-settings: normal;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
select[data-md-field-control] option:hover {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
|
}
|
|
}
|
|
|
|
select[data-md-field-control] option:focus-visible {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
|
|
}
|
|
|
|
select[data-md-field-control] option:checked {
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
select[data-md-field-control] option:checked:hover {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
|
|
}
|
|
}
|
|
|
|
select[data-md-field-control] option:checked:focus-visible {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 10%, var(--md-sys-color-secondary-container));
|
|
}
|
|
|
|
select[data-md-field-control] option:disabled {
|
|
background-color: transparent;
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
|
cursor: default;
|
|
}
|
|
select[data-md-field-control] option::checkmark {
|
|
content: "";
|
|
order: 1;
|
|
flex: none;
|
|
inline-size: var(--md-sys-measurement-space300);
|
|
block-size: var(--md-sys-measurement-space300);
|
|
margin-inline-start: auto;
|
|
background-color: currentColor;
|
|
mask: url("../svg/symbols/outlined/check.svg") center / contain no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-badge] {
|
|
--md-badge-color: var(--md-color, var(--md-sys-color-error));
|
|
--md-badge-on-color: var(--md-on-color, var(--md-sys-color-on-error));
|
|
--md-badge-container: var(--md-container, var(--md-sys-color-error-container));
|
|
--md-badge-on-container: var(--md-on-container, var(--md-sys-color-on-error-container));
|
|
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
[data-md-badge][data-md-dot] {
|
|
inline-size: 6px;
|
|
block-size: 6px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
}
|
|
|
|
[data-md-badge]:not([data-md-dot], [data-md-variant]) {
|
|
min-inline-size: 16px;
|
|
block-size: 16px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
padding-inline: var(--md-sys-measurement-space50);
|
|
font: var(--md-sys-typescale-label-sm);
|
|
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
|
|
font-variation-settings: normal;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
[data-md-badge][data-md-variant] {
|
|
gap: var(--md-sys-measurement-space50);
|
|
block-size: 24px;
|
|
border-radius: var(--md-sys-shape-corner-sm);
|
|
padding-inline: var(--md-sys-measurement-space100);
|
|
font: var(--md-sys-typescale-label-md);
|
|
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-badge][data-md-variant='outline'] {
|
|
border: 1px solid;
|
|
}
|
|
|
|
[data-md-badge][data-md-color='neutral'] {
|
|
--md-badge-color: var(--md-sys-color-on-surface-variant);
|
|
--md-badge-on-color: var(--md-sys-color-surface);
|
|
--md-badge-container: var(--md-sys-color-surface-container-high);
|
|
--md-badge-on-container: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-badge]:not([data-md-color='plain']) {
|
|
background-color: var(--md-badge-color);
|
|
color: var(--md-badge-on-color);
|
|
|
|
&[data-md-variant='tonal'] {
|
|
background-color: var(--md-badge-container);
|
|
color: var(--md-badge-on-container);
|
|
}
|
|
|
|
&[data-md-variant='outline'] {
|
|
border-color: var(--md-sys-color-outline);
|
|
background-color: transparent;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
}
|
|
|
|
[data-md-badge][data-md-floating] {
|
|
position: absolute;
|
|
inset-block-start: calc(-1 * var(--md-sys-measurement-space25));
|
|
inset-inline-start: calc(100% - 12px);
|
|
}
|
|
|
|
[data-md-badge][data-md-floating][data-md-dot] {
|
|
inset-block-start: 0;
|
|
inset-inline: auto 0;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-menu-item] {
|
|
--md-menu-item-ink: var(--md-sys-color-on-surface-variant);
|
|
|
|
display: flex;
|
|
inline-size: 100%;
|
|
min-block-size: var(--md-sys-measurement-space600);
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
background-color: transparent;
|
|
color: var(--md-sys-color-on-surface);
|
|
text-align: start;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
transition-property: border-radius, background-color, color;
|
|
transition-duration:
|
|
var(--md-sys-motion-spatial-fast-duration),
|
|
var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function:
|
|
var(--md-sys-motion-spatial-fast),
|
|
var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast);
|
|
&:focus-visible {
|
|
outline-offset: -3px;
|
|
}
|
|
}
|
|
|
|
[data-md-menu-item]:first-child {
|
|
border-start-start-radius: var(--md-sys-shape-corner-md);
|
|
border-start-end-radius: var(--md-sys-shape-corner-md);
|
|
}
|
|
|
|
[data-md-menu-item]:last-child {
|
|
border-end-start-radius: var(--md-sys-shape-corner-md);
|
|
border-end-end-radius: var(--md-sys-shape-corner-md);
|
|
}
|
|
|
|
[data-md-menu-item][data-md-description] {
|
|
padding-block: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-menu-item][aria-checked='true'] {
|
|
--md-menu-item-ink: var(--md-sys-color-on-tertiary-container);
|
|
|
|
border-radius: var(--md-sys-shape-corner-md);
|
|
background-color: var(--md-sys-color-tertiary-container);
|
|
color: var(--md-sys-color-on-tertiary-container);
|
|
}
|
|
|
|
[data-md-menu-item][aria-current='page']:not([aria-checked='true']) {
|
|
--md-menu-item-ink: var(--md-sys-color-on-secondary-container);
|
|
|
|
border-radius: var(--md-sys-shape-corner-md);
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-menu-item][aria-disabled='true'] {
|
|
--md-menu-item-ink: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
|
|
pointer-events: none;
|
|
color: var(--md-menu-item-ink);
|
|
}
|
|
|
|
[data-md-menu-item] [data-md-icon] {
|
|
color: var(--md-menu-item-ink);
|
|
}
|
|
|
|
[data-md-menu-item][aria-disabled='true'] [data-md-icon] {
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent) !important;
|
|
}
|
|
|
|
[data-md-menu-item-text] {
|
|
min-inline-size: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
[data-md-menu-item-label] {
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-menu-item-description] {
|
|
display: block;
|
|
color: var(--md-menu-item-ink);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-menu-item-shortcut] {
|
|
flex-shrink: 0;
|
|
color: var(--md-menu-item-ink);
|
|
font: var(--md-sys-typescale-label-sm);
|
|
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
[data-md-submenu] {
|
|
margin: 0 var(--md-sys-measurement-space50);
|
|
transform-origin: top;
|
|
position-area: inline-end span-block-end;
|
|
position-try-fallbacks: flip-inline;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-app-bar] {
|
|
--app-bar-row: 64px;
|
|
--app-bar-height: var(--app-bar-row);
|
|
|
|
z-index: 20;
|
|
display: block;
|
|
min-height: var(--app-bar-height);
|
|
padding-top: var(--material-safe-top, env(safe-area-inset-top));
|
|
background-color: var(--md-sys-color-surface);
|
|
color: var(--md-sys-color-on-surface);
|
|
transition-property: background-color;
|
|
transition-duration: var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-default);
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='medium'] {
|
|
--app-bar-height: 112px;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='medium'][data-md-subtitled] {
|
|
--app-bar-height: 136px;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='large'] {
|
|
--app-bar-height: 120px;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='large'][data-md-subtitled] {
|
|
--app-bar-height: 152px;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-sticky] {
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
[data-md-app-bar][data-md-sticky]:is([data-md-variant='medium'], [data-md-variant='large']) {
|
|
top: calc(var(--app-bar-row) - var(--app-bar-measured, var(--app-bar-height)));
|
|
}
|
|
|
|
[data-md-app-bar][data-md-scrolled] {
|
|
background-color: var(--md-sys-color-surface-container);
|
|
}
|
|
|
|
[data-md-app-bar-row] {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
min-height: var(--app-bar-row);
|
|
padding-inline: var(--md-sys-measurement-space50);
|
|
background-color: inherit;
|
|
}
|
|
|
|
[data-md-app-bar-leading],
|
|
[data-md-app-bar-trailing] {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-app-bar-leading] {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-app-bar-trailing] {
|
|
margin-inline-start: auto;
|
|
}
|
|
[data-md-app-bar-action],
|
|
[data-md-app-bar-overflow] {
|
|
display: contents;
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-app-bar-action][data-md-overflows-compact],
|
|
[data-md-app-bar-overflow='medium'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-app-bar-overflow='compact'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-app-bar-headline] {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex: 1 1 0%;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-inline: 12px;
|
|
}
|
|
|
|
[data-md-app-bar-row]:has([data-md-app-bar-leading]) [data-md-app-bar-headline] {
|
|
padding-inline-start: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-app-bar-title] {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font: var(--md-sys-typescale-title-lg);
|
|
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
|
}
|
|
|
|
[data-md-app-bar-subtitle] {
|
|
overflow: hidden;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font: var(--md-sys-typescale-label-md);
|
|
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
|
}
|
|
[data-md-app-bar][data-md-variant='center'] [data-md-app-bar-row] {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='center'] [data-md-app-bar-leading] {
|
|
grid-column: 1;
|
|
justify-self: start;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='center'] [data-md-app-bar-headline] {
|
|
grid-column: 2;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-self: center;
|
|
padding-inline: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='center'] [data-md-app-bar-trailing] {
|
|
grid-column: 3;
|
|
justify-self: end;
|
|
margin-inline-start: 0;
|
|
}
|
|
[data-md-app-bar-search] {
|
|
min-width: 0;
|
|
max-width: calc(312px + (100% - 312px) / 2);
|
|
flex: 1 1 0%;
|
|
margin-inline: auto;
|
|
padding-inline: var(--md-sys-measurement-space50);
|
|
}
|
|
[data-md-app-bar]:is([data-md-variant='medium'], [data-md-variant='large']) [data-md-app-bar-row] [data-md-app-bar-headline] {
|
|
opacity: 0;
|
|
transition-property: opacity;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-app-bar][data-md-collapsed] [data-md-app-bar-row] [data-md-app-bar-headline] {
|
|
opacity: 1;
|
|
}
|
|
[data-md-app-bar-expanded] {
|
|
display: flex;
|
|
min-height: calc(var(--app-bar-height) - var(--app-bar-row));
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
[data-md-app-bar][data-md-subtitled] [data-md-app-bar-expanded] {
|
|
padding-bottom: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='large'][data-md-subtitled] [data-md-app-bar-expanded] {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
[data-md-app-bar-expanded] [data-md-app-bar-title] {
|
|
white-space: normal;
|
|
font: var(--md-sys-typescale-headline-md);
|
|
letter-spacing: var(--md-sys-typescale-headline-md-tracking);
|
|
}
|
|
|
|
[data-md-app-bar-expanded] [data-md-app-bar-subtitle] {
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='large'] [data-md-app-bar-expanded] [data-md-app-bar-title] {
|
|
font: var(--md-sys-typescale-display-sm);
|
|
letter-spacing: var(--md-sys-typescale-display-sm-tracking);
|
|
}
|
|
|
|
[data-md-app-bar][data-md-variant='large'] [data-md-app-bar-expanded] [data-md-app-bar-subtitle] {
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
}
|
|
}
|
|
|
|
@layer material.layout {
|
|
[data-md-pane] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
[data-md-pane][data-md-width='narrow'] {
|
|
max-inline-size: 40rem;
|
|
}
|
|
|
|
[data-md-pane][data-md-width='medium'] {
|
|
max-inline-size: 60rem;
|
|
}
|
|
|
|
[data-md-pane][data-md-width='wide'] {
|
|
max-inline-size: 80rem;
|
|
}
|
|
|
|
[data-md-pane-navigation],
|
|
[data-md-pane-body] {
|
|
padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space200));
|
|
|
|
@media (width >= 600px) {
|
|
padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300));
|
|
}
|
|
}
|
|
|
|
[data-md-pane-body] {
|
|
flex: 1 1 auto;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-md-pane-body] > * {
|
|
--md-layout-margin: 0px;
|
|
}
|
|
|
|
[data-md-pane-back] [data-md-icon]:is([dir='rtl'], [dir='rtl'] *) {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
@layer material.layout {
|
|
[data-md-list-detail] {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
align-items: start;
|
|
padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space200));
|
|
|
|
@media (width >= 600px) {
|
|
padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300));
|
|
}
|
|
|
|
@media (width >= 840px) {
|
|
grid-template-columns: 360px minmax(0, 1fr);
|
|
column-gap: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
@media (width >= 1200px) {
|
|
grid-template-columns: 412px minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
[data-md-list-detail] > * {
|
|
--md-layout-margin: 0px;
|
|
}
|
|
|
|
[data-md-list-detail-pane] {
|
|
min-inline-size: 0;
|
|
outline: none;
|
|
}
|
|
|
|
[data-md-list-detail-back-row] {
|
|
display: flex;
|
|
align-items: center;
|
|
min-block-size: var(--md-sys-measurement-space800);
|
|
}
|
|
|
|
[data-md-list-detail-back] [data-md-icon]:is([dir='rtl'], [dir='rtl'] *) {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
@media (width < 840px) {
|
|
[data-md-list-detail]:not([data-md-selected]) > [data-md-list-detail-pane='detail'],
|
|
[data-md-list-detail][data-md-selected] > [data-md-list-detail-pane='list'] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width >= 840px) {
|
|
[data-md-list-detail-back-row],
|
|
[data-md-list-detail] [data-md-list-detail-back] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.layout {
|
|
[data-md-supporting-pane] {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
align-items: start;
|
|
gap: var(--md-sys-measurement-space200);
|
|
padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space200));
|
|
|
|
@media (width >= 600px) {
|
|
gap: var(--md-sys-measurement-space300);
|
|
padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300));
|
|
}
|
|
|
|
@media (width >= 840px) {
|
|
grid-template-columns: minmax(0, 1fr) 360px;
|
|
}
|
|
|
|
@media (width >= 1200px) {
|
|
grid-template-columns: minmax(0, 1fr) 412px;
|
|
}
|
|
}
|
|
|
|
@media (width >= 840px) {
|
|
[data-md-supporting-pane][data-md-width='split'] {
|
|
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
[data-md-supporting-pane] > * {
|
|
--md-layout-margin: 0px;
|
|
}
|
|
|
|
[data-md-supporting-pane-main],
|
|
[data-md-supporting-pane-supporting] {
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-md-supporting-pane-handle] {
|
|
display: none;
|
|
}
|
|
|
|
@media (width < 840px) {
|
|
[data-md-compact='sheet'] > [data-md-supporting-pane-supporting] {
|
|
position: sticky;
|
|
inset-block-end: max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom)));
|
|
z-index: 20;
|
|
inline-size: 100%;
|
|
max-inline-size: 640px;
|
|
margin-inline: auto;
|
|
border-start-start-radius: var(--md-sys-shape-corner-xl);
|
|
border-start-end-radius: var(--md-sys-shape-corner-xl);
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
color: var(--md-sys-color-on-surface);
|
|
box-shadow: var(--md-sys-elevation-1);
|
|
}
|
|
|
|
[data-md-compact='sheet'] [data-md-supporting-pane-handle] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
inline-size: 100%;
|
|
min-block-size: var(--md-sys-measurement-space600);
|
|
border-start-start-radius: inherit;
|
|
border-start-end-radius: inherit;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-md-supporting-pane-grip] {
|
|
inline-size: var(--md-sys-measurement-space400);
|
|
block-size: var(--md-sys-measurement-space50);
|
|
margin-block: 22px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: currentColor;
|
|
}
|
|
|
|
[data-md-supporting-pane-label] {
|
|
margin-block-start: calc(-1 * var(--md-sys-measurement-space100));
|
|
padding-block-end: var(--md-sys-measurement-space200);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-compact='sheet'] [data-md-supporting-pane-body] {
|
|
max-block-size: 50dvh;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
[data-md-compact='sheet'] > [data-md-supporting-pane-supporting]:not([data-md-open]) [data-md-supporting-pane-body] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.layout {
|
|
:where([data-md-feed]) {
|
|
--md-gap: var(--md-sys-measurement-space200);
|
|
|
|
@media (width >= 600px) {
|
|
--md-gap: var(--md-sys-measurement-space300);
|
|
}
|
|
}
|
|
|
|
[data-md-feed] {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--md-gap);
|
|
|
|
@media (width >= 600px) {
|
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--md-min-item, 240px)), 1fr));
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-fab] {
|
|
--md-fab-color: var(--md-sys-color-primary);
|
|
--md-fab-on-color: var(--md-sys-color-on-primary);
|
|
--md-fab-container: var(--md-sys-color-primary-container);
|
|
--md-fab-on-container: var(--md-sys-color-on-primary-container);
|
|
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
block-size: var(--md-fab-size);
|
|
border-radius: var(--md-fab-corner);
|
|
background-color: var(--md-fab-container);
|
|
color: var(--md-fab-on-container);
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
transition-property: box-shadow, background-color, color;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
|
|
@media (hover: hover) {
|
|
&:hover {
|
|
box-shadow: var(--md-sys-elevation-4);
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-md-fab][data-md-size='sm'] {
|
|
--md-fab-size: 56px;
|
|
--md-fab-corner: var(--md-sys-shape-corner-lg);
|
|
--md-fab-extended-min: 80px;
|
|
}
|
|
|
|
[data-md-fab][data-md-size='md'] {
|
|
--md-fab-size: 80px;
|
|
--md-fab-corner: var(--md-sys-shape-corner-lg-increased);
|
|
--md-fab-extended-min: 80px;
|
|
}
|
|
|
|
[data-md-fab][data-md-size='lg'] {
|
|
--md-fab-size: 96px;
|
|
--md-fab-corner: var(--md-sys-shape-corner-xl);
|
|
--md-fab-extended-min: 96px;
|
|
}
|
|
|
|
[data-md-fab][data-md-color='secondary'] {
|
|
--md-fab-color: var(--md-sys-color-secondary);
|
|
--md-fab-on-color: var(--md-sys-color-on-secondary);
|
|
--md-fab-container: var(--md-sys-color-secondary-container);
|
|
--md-fab-on-container: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-fab][data-md-color='tertiary'] {
|
|
--md-fab-color: var(--md-sys-color-tertiary);
|
|
--md-fab-on-color: var(--md-sys-color-on-tertiary);
|
|
--md-fab-container: var(--md-sys-color-tertiary-container);
|
|
--md-fab-on-container: var(--md-sys-color-on-tertiary-container);
|
|
}
|
|
|
|
[data-md-fab][data-md-variant='filled'] {
|
|
background-color: var(--md-fab-color);
|
|
color: var(--md-fab-on-color);
|
|
}
|
|
|
|
[data-md-fab]:not([data-md-extended]) {
|
|
inline-size: var(--md-fab-size);
|
|
}
|
|
|
|
[data-md-fab][data-md-extended] {
|
|
min-inline-size: var(--md-fab-extended-min);
|
|
}
|
|
|
|
[data-md-fab][data-md-extended][data-md-size='sm'] {
|
|
gap: var(--md-sys-measurement-space100);
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-fab][data-md-extended][data-md-size='md'] {
|
|
gap: var(--md-sys-measurement-space200);
|
|
padding-inline: 26px;
|
|
font: var(--md-sys-typescale-title-lg);
|
|
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-fab][data-md-extended][data-md-size='lg'] {
|
|
gap: 20px;
|
|
padding-inline: 28px;
|
|
font: var(--md-sys-typescale-headline-sm);
|
|
letter-spacing: var(--md-sys-typescale-headline-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
[data-md-fab][data-md-collapse-on-scroll] {
|
|
transition-property: min-inline-size, padding-inline, gap, box-shadow, background-color, color;
|
|
transition-duration:
|
|
var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration),
|
|
var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function:
|
|
var(--md-sys-motion-spatial-default), var(--md-sys-motion-spatial-default), var(--md-sys-motion-spatial-default),
|
|
var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-fab-label] {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
transition-property: grid-template-columns, opacity;
|
|
transition-duration: var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-default), var(--md-sys-motion-effects-default);
|
|
|
|
& > span {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
[data-md-fab][data-md-collapse-on-scroll][data-md-collapsed] {
|
|
min-inline-size: var(--md-fab-size);
|
|
gap: 0;
|
|
|
|
& [data-md-fab-label] {
|
|
grid-template-columns: 0fr;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
[data-md-fab][data-md-collapse-on-scroll][data-md-size='lg'][data-md-collapsed] {
|
|
padding-inline: var(--md-sys-measurement-space400);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-navigation-rail] {
|
|
--navigation-rail-expanded-width: clamp(220px, var(--navigation-rail-width, 256px), 360px);
|
|
--navigation-rail-collapsed-width: 96px;
|
|
--md-navigation-rail-value: expanded;
|
|
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
width: var(--navigation-rail-expanded-width);
|
|
transition: width var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);
|
|
|
|
&:where(
|
|
[data-md-navigation-rail='collapsed'],
|
|
[data-md-navigation-rail='collapsed'] *,
|
|
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
|
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
|
[data-md-navigation-rail='modal']:not([data-md-open]),
|
|
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
|
) {
|
|
width: var(--navigation-rail-collapsed-width);
|
|
--md-navigation-rail-value: collapsed;
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
|
width: var(--navigation-rail-collapsed-width);
|
|
--md-navigation-rail-value: collapsed;
|
|
}
|
|
}
|
|
|
|
@media (width < 840px) {
|
|
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
|
width: var(--navigation-rail-collapsed-width);
|
|
--md-navigation-rail-value: collapsed;
|
|
}
|
|
}
|
|
|
|
@media (840px <= width < 1200px) {
|
|
&:where(
|
|
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
|
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
|
) {
|
|
width: var(--navigation-rail-collapsed-width);
|
|
--md-navigation-rail-value: collapsed;
|
|
}
|
|
}
|
|
|
|
@media (width >= 1200px) {
|
|
&:where(
|
|
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
|
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
|
) {
|
|
width: var(--navigation-rail-collapsed-width);
|
|
--md-navigation-rail-value: collapsed;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail][data-md-width='narrow'] {
|
|
--navigation-rail-collapsed-width: 80px;
|
|
}
|
|
|
|
[data-md-navigation-rail][data-md-hide-when-collapsed] {
|
|
&:where(
|
|
[data-md-navigation-rail='collapsed'],
|
|
[data-md-navigation-rail='collapsed'] *,
|
|
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]),
|
|
[data-rail='collapsed'] [data-md-navigation-rail='collapsible']:not([data-md-open]) *,
|
|
[data-md-navigation-rail='modal']:not([data-md-open]),
|
|
[data-md-navigation-rail='modal']:not([data-md-open]) *
|
|
) {
|
|
width: 0;
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
&:where([data-md-navigation-rail='collapsible']:not([data-md-open]), [data-md-navigation-rail='collapsible']:not([data-md-open]) *) {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
@media (width < 840px) {
|
|
&:where([data-md-navigation-rail='adaptive']:not([data-md-open]), [data-md-navigation-rail='adaptive']:not([data-md-open]) *) {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
@media (840px <= width < 1200px) {
|
|
&:where(
|
|
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
|
:is([data-rail='collapsed'], [data-rail-auto]) [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
|
) {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
@media (width >= 1200px) {
|
|
&:where(
|
|
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]),
|
|
[data-rail='collapsed'] [data-md-navigation-rail='adaptive']:not([data-md-open]) *
|
|
) {
|
|
width: 0;
|
|
}
|
|
}
|
|
}
|
|
[data-md-navigation-rail][data-md-width='narrow'] [data-md-navigation-rail-item] [data-md-navigation-label] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
[data-md-navigation-rail='modal'] {
|
|
width: var(--navigation-rail-collapsed-width);
|
|
}
|
|
|
|
@media (width < 840px) {
|
|
[data-md-navigation-rail='adaptive'] {
|
|
width: var(--navigation-rail-collapsed-width);
|
|
}
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-navigation-rail='adaptive'] {
|
|
width: 0;
|
|
}
|
|
[data-md-navigation-rail='collapsible'] {
|
|
width: var(--navigation-rail-collapsed-width);
|
|
}
|
|
}
|
|
[data-md-navigation-rail-panel] {
|
|
position: sticky;
|
|
top: var(--material-banner, 0px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: calc(100dvh - var(--material-banner, 0px));
|
|
overflow-x: clip;
|
|
padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom));
|
|
background-color: var(--md-sys-color-surface);
|
|
color: var(--md-sys-color-on-surface);
|
|
transition:
|
|
width var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast),
|
|
background-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);
|
|
}
|
|
[data-md-navigation-rail][data-md-divider]:not([data-md-open], [data-md-closing='sheet']) > [data-md-navigation-rail-panel] {
|
|
border-inline-end: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
[data-md-navigation-rail][data-md-fill='false']:not([data-md-open], [data-md-closing='sheet']) > [data-md-navigation-rail-panel] {
|
|
background-color: transparent;
|
|
}
|
|
[data-md-navigation-rail]:is([data-md-open], [data-md-closing='sheet']) > [data-md-navigation-rail-panel] {
|
|
position: fixed;
|
|
inset-block: 0;
|
|
inset-inline-start: 0;
|
|
z-index: 50;
|
|
width: var(--navigation-rail-expanded-width);
|
|
max-width: calc(100vw - 56px);
|
|
height: 100dvh;
|
|
max-height: none;
|
|
border-start-end-radius: var(--md-sys-shape-corner-lg);
|
|
border-end-end-radius: var(--md-sys-shape-corner-lg);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
box-shadow: var(--md-sys-elevation-2);
|
|
}
|
|
@media (width < 600px) {
|
|
[data-md-navigation-rail='adaptive'] > [data-md-navigation-rail-panel] {
|
|
position: fixed;
|
|
inset-block: 0;
|
|
inset-inline-start: 0;
|
|
z-index: 50;
|
|
display: none;
|
|
width: var(--navigation-rail-expanded-width);
|
|
max-width: calc(100vw - 56px);
|
|
height: 100dvh;
|
|
max-height: none;
|
|
border-start-end-radius: var(--md-sys-shape-corner-lg);
|
|
border-end-end-radius: var(--md-sys-shape-corner-lg);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
box-shadow: var(--md-sys-elevation-2);
|
|
translate: -100% 0;
|
|
transition:
|
|
translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate);
|
|
|
|
&:is([dir='rtl'], [dir='rtl'] *) {
|
|
translate: 100% 0;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail='adaptive'][data-md-open] > [data-md-navigation-rail-panel] {
|
|
display: flex;
|
|
translate: 0 0;
|
|
transition:
|
|
translate var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-easing-emphasized-decelerate);
|
|
|
|
@starting-style {
|
|
translate: -100% 0;
|
|
}
|
|
|
|
&:is([dir='rtl'], [dir='rtl'] *) {
|
|
translate: 0 0;
|
|
|
|
@starting-style {
|
|
translate: 100% 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
[data-md-navigation-rail][data-md-hide-when-collapsed] > [data-md-navigation-rail-panel] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
display: none;
|
|
translate: -100% 0;
|
|
transition:
|
|
translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate);
|
|
|
|
&:is([dir='rtl'], [dir='rtl'] *) {
|
|
translate: 100% 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail][data-md-hide-when-collapsed][data-md-open] > [data-md-navigation-rail-panel] {
|
|
display: flex;
|
|
translate: 0 0;
|
|
transition:
|
|
translate var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-easing-emphasized-decelerate);
|
|
|
|
@starting-style {
|
|
translate: -100% 0;
|
|
}
|
|
|
|
&:is([dir='rtl'], [dir='rtl'] *) {
|
|
translate: 0 0;
|
|
|
|
@starting-style {
|
|
translate: 100% 0;
|
|
}
|
|
}
|
|
}
|
|
[data-md-navigation-rail][data-md-hide-when-collapsed][data-md-closing='sheet'] > [data-md-navigation-rail-panel] {
|
|
display: flex;
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-navigation-rail='adaptive'][data-md-closing='sheet'] > [data-md-navigation-rail-panel] {
|
|
display: flex;
|
|
}
|
|
}
|
|
@media (width < 600px) {
|
|
[data-md-navigation-rail='collapsible'][data-md-hide-when-collapsed] {
|
|
width: var(--navigation-rail-collapsed-width);
|
|
}
|
|
|
|
[data-md-navigation-rail='collapsible'][data-md-hide-when-collapsed] > [data-md-navigation-rail-panel] {
|
|
display: flex;
|
|
translate: none;
|
|
}
|
|
}
|
|
|
|
@media (600px <= width < 840px) {
|
|
[data-md-navigation-rail='adaptive'][data-md-hide-when-collapsed] {
|
|
width: var(--navigation-rail-collapsed-width);
|
|
}
|
|
|
|
[data-md-navigation-rail='adaptive'][data-md-hide-when-collapsed] > [data-md-navigation-rail-panel] {
|
|
display: flex;
|
|
translate: none;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-scrim] {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 40;
|
|
display: none;
|
|
background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
|
|
opacity: 0;
|
|
transition: opacity var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);
|
|
}
|
|
|
|
[data-md-navigation-rail][data-md-closing] > [data-md-navigation-rail-scrim] {
|
|
display: block;
|
|
}
|
|
|
|
[data-md-navigation-rail][data-md-open] > [data-md-navigation-rail-scrim] {
|
|
display: block;
|
|
opacity: 1;
|
|
|
|
@starting-style {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
[data-md-navigation-rail-header] {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding-top: calc(var(--material-safe-top, env(safe-area-inset-top)) + 44px);
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
[data-md-navigation-rail-panel] > [data-md-navigation-rail-destinations]:first-child {
|
|
padding-top: calc(var(--material-safe-top, env(safe-area-inset-top)) + 44px);
|
|
}
|
|
[data-md-navigation-rail-menu-row] {
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding-inline-end: 20px;
|
|
padding-inline-start: 20px;
|
|
}
|
|
|
|
[data-md-navigation-rail-header]:has([data-md-navigation-rail-menu]) [data-md-navigation-rail-menu-row] {
|
|
padding-inline-start: 28px;
|
|
}
|
|
|
|
[data-md-navigation-rail][data-md-width='narrow'] [data-md-navigation-rail-header]:has([data-md-navigation-rail-menu]) [data-md-navigation-rail-menu-row] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
padding-inline-start: 20px;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-menu] {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
cursor: pointer;
|
|
}
|
|
[data-md-navigation-rail-menu-collapse-icon] {
|
|
display: contents;
|
|
}
|
|
|
|
[data-md-navigation-rail-menu-expand-icon] {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-navigation-rail-menu-collapse-icon],
|
|
[data-md-navigation-rail-menu-expand-icon] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-menu-expand-icon] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
display: contents;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-brand] {
|
|
min-width: 0;
|
|
flex: 1 1 0%;
|
|
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
display: none;
|
|
}
|
|
}
|
|
[data-md-navigation-rail-fab-row] {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding-inline: 20px;
|
|
}
|
|
|
|
[data-md-navigation-rail][data-md-width='narrow'] [data-md-navigation-rail-fab-row] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
padding-inline: 12px;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-destinations] {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
padding-block: 8px;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
[data-md-navigation-rail-destinations],
|
|
[data-md-navigation-rail-footer] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
gap: 4px;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-footer] {
|
|
flex-shrink: 0;
|
|
padding-block: 8px 16px;
|
|
}
|
|
[data-md-navigation-rail][data-md-align='center'] [data-md-navigation-rail-destinations] {
|
|
justify-content: safe center;
|
|
}
|
|
[data-md-navigation-rail-header] [data-md-fab][data-md-fab],
|
|
[data-md-navigation-rail-header] [data-md-fab][data-md-fab]:hover {
|
|
box-shadow: none;
|
|
}
|
|
[data-md-navigation-rail-header] [data-md-fab] > span {
|
|
max-width: 256px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
transition:
|
|
max-width var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default),
|
|
opacity var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);
|
|
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
max-width: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
[data-md-navigation-rail-header] [data-md-fab][data-md-extended][data-md-extended] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
min-inline-size: 0;
|
|
aspect-ratio: 1;
|
|
gap: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-navigation-bar-item] :is([data-md-navigation-indicator], [data-md-navigation-pill]),
|
|
[data-md-navigation-rail-item],
|
|
[data-md-navigation-rail-item] [data-md-navigation-indicator] {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
transition: background-size var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
:is([data-md-navigation-bar-item], [data-md-navigation-rail-item]):hover {
|
|
--navigation-layer: var(--md-sys-state-hover-state-layer-opacity);
|
|
}
|
|
}
|
|
|
|
:is([data-md-navigation-bar-item], [data-md-navigation-rail-item]):focus-visible {
|
|
--navigation-layer: var(--md-sys-state-focus-state-layer-opacity);
|
|
}
|
|
|
|
:is([data-md-navigation-bar-item], [data-md-navigation-rail-item]):active {
|
|
--navigation-layer: var(--md-sys-state-pressed-state-layer-opacity);
|
|
}
|
|
|
|
[data-md-navigation-bar-item] [data-md-navigation-indicator]::before,
|
|
[data-md-navigation-bar-item] [data-md-navigation-pill]::before,
|
|
[data-md-navigation-rail-item]::before,
|
|
[data-md-navigation-rail-item] [data-md-navigation-indicator]::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
border-radius: inherit;
|
|
background-color: var(--md-sys-color-on-secondary-container);
|
|
opacity: var(--navigation-layer, 0);
|
|
pointer-events: none;
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
[data-md-navigation-icon] {
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-navigation-rail-item] {
|
|
--navigation-layer: 0;
|
|
--navigation-item-layer: var(--navigation-layer);
|
|
--navigation-indicator-layer: 0;
|
|
|
|
position: relative;
|
|
isolation: isolate;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 56px;
|
|
margin-inline: 20px;
|
|
padding-inline: 16px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
text-align: start;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
outline: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
[data-md-navigation-rail-item][data-md-navigation-rail-item]::before {
|
|
background-color: var(--md-sys-color-on-secondary-container);
|
|
opacity: var(--navigation-item-layer);
|
|
}
|
|
|
|
[data-md-navigation-rail-item][data-md-navigation-rail-item] [data-md-navigation-indicator]::before {
|
|
background-color: var(--md-sys-color-on-secondary-container);
|
|
opacity: var(--navigation-indicator-layer);
|
|
}
|
|
|
|
[data-md-navigation-rail-item][data-md-active] {
|
|
background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container));
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-navigation-rail-item] [data-md-navigation-indicator] {
|
|
position: relative;
|
|
isolation: isolate;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
}
|
|
|
|
[data-md-navigation-rail-item] [data-md-navigation-label] {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
[data-md-navigation-rail-item]:focus-visible {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
[data-md-navigation-badge-end] {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-md-navigation-badge-icon] {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-navigation-rail-item] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
height: auto;
|
|
min-height: 64px;
|
|
margin-inline: 0;
|
|
padding: 6px 4px;
|
|
border-radius: 0;
|
|
font: var(--md-sys-typescale-label-md);
|
|
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
|
white-space: normal;
|
|
--navigation-item-layer: 0;
|
|
--navigation-indicator-layer: var(--navigation-layer);
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-item] [data-md-navigation-label] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
flex: none;
|
|
display: -webkit-box;
|
|
max-width: 100%;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
text-align: center;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-item][data-md-active] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
background-image: none;
|
|
color: var(--md-sys-color-secondary);
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-item] [data-md-navigation-indicator] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
width: 56px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-item][data-md-active] [data-md-navigation-indicator] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container));
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-item]:focus-visible {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-item]:focus-visible [data-md-navigation-indicator] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-badge-end],
|
|
[data-md-navigation-badge-icon] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-badge-icon] {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
display: contents;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-navigation-rail-section] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
[data-md-navigation-rail-section]:not(:first-child) {
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
|
|
[data-md-navigation-rail-heading] {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 48px;
|
|
padding-inline: 36px 20px;
|
|
overflow: hidden;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-navigation-bar] {
|
|
container-type: inline-size;
|
|
padding-inline: var(--material-safe-left, env(safe-area-inset-left)) var(--material-safe-right, env(safe-area-inset-right));
|
|
padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom));
|
|
background-color: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-navigation-bar-items] {
|
|
display: flex;
|
|
min-height: 64px;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
[data-md-navigation-bar][data-md-tall] [data-md-navigation-bar-items] {
|
|
min-height: 80px;
|
|
}
|
|
|
|
[data-md-navigation-bar][data-md-hide-on-scroll] {
|
|
transition: translate var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);
|
|
}
|
|
|
|
[data-md-navigation-bar][data-md-hide-on-scroll][data-md-hidden] {
|
|
translate: 0 100%;
|
|
}
|
|
@container (width >= 600px) {
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items] {
|
|
width: calc(10% * (var(--navigation-bar-count, 7) + 3));
|
|
min-width: fit-content;
|
|
max-width: 100%;
|
|
}
|
|
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(1)) { --navigation-bar-count: 1; }
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(2)) { --navigation-bar-count: 2; }
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(3)) { --navigation-bar-count: 3; }
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(4)) { --navigation-bar-count: 4; }
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(5)) { --navigation-bar-count: 5; }
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-items]:has(> :last-child:nth-child(6)) { --navigation-bar-count: 6; }
|
|
}
|
|
[data-md-scaffold]:has([data-md-navigation-bar][data-md-hide-on-scroll][data-md-hidden]) {
|
|
--material-bottom-bar: calc(var(--material-safe-bottom, env(safe-area-inset-bottom)) + var(--material-bottom-extra, 0px));
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-navigation-bar-item] {
|
|
--navigation-layer: 0;
|
|
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1 1 0%;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-block: 6px;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
outline: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
[data-md-navigation-bar-item][data-md-active] {
|
|
color: var(--md-sys-color-secondary);
|
|
}
|
|
|
|
[data-md-navigation-bar-item] [data-md-navigation-pill] {
|
|
display: flex;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
font: var(--md-sys-typescale-label-md);
|
|
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
|
}
|
|
|
|
[data-md-navigation-bar-item] [data-md-navigation-label] {
|
|
max-width: 100%;
|
|
padding-inline: 4px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
[data-md-navigation-bar-item] [data-md-navigation-indicator] {
|
|
position: relative;
|
|
isolation: isolate;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 56px;
|
|
height: 32px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
}
|
|
[data-md-navigation-bar-item][data-md-active] [data-md-navigation-indicator] {
|
|
background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container));
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-navigation-bar-item] [data-md-navigation-pill]::before {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-navigation-bar-item]:focus-visible [data-md-navigation-indicator] {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
@container (width >= 600px) {
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] {
|
|
min-width: max-content;
|
|
}
|
|
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-pill] {
|
|
position: relative;
|
|
isolation: isolate;
|
|
flex-direction: row;
|
|
height: 40px;
|
|
padding-inline: 16px;
|
|
}
|
|
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-label] {
|
|
padding-inline: 0;
|
|
}
|
|
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item][data-md-active] {
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item][data-md-active] [data-md-navigation-pill] {
|
|
background-image: linear-gradient(var(--md-sys-color-secondary-container), var(--md-sys-color-secondary-container));
|
|
}
|
|
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item][data-md-active] [data-md-navigation-indicator] {
|
|
background-image: none;
|
|
}
|
|
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-pill]::before {
|
|
display: block;
|
|
}
|
|
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item] [data-md-navigation-indicator]::before {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item]:focus-visible [data-md-navigation-indicator] {
|
|
outline: none;
|
|
}
|
|
|
|
[data-md-navigation-bar]:not([data-md-tall]) [data-md-navigation-bar-item]:focus-visible [data-md-navigation-pill] {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-toast] {
|
|
position: fixed;
|
|
z-index: 50;
|
|
inset-inline: var(--md-sys-measurement-space200);
|
|
bottom: calc(max(var(--material-bottom-bar, 0px), var(--material-bottom-toolbar, 0px)) + var(--md-sys-measurement-space200));
|
|
display: flex;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-md-toast][data-md-position='bottom-start'] {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-toast][data-md-position='bottom-start'] {
|
|
inset-inline-start: var(--md-sys-measurement-space300);
|
|
}
|
|
}
|
|
|
|
[data-md-toast-snackbar] {
|
|
pointer-events: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
max-width: min(100%, 576px);
|
|
min-height: var(--md-sys-measurement-space600);
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
padding-block: 6px;
|
|
padding-inline: var(--md-sys-measurement-space200) var(--md-sys-measurement-space100);
|
|
background-color: var(--md-sys-color-inverse-surface);
|
|
color: var(--md-sys-color-inverse-on-surface);
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
translate: 0;
|
|
opacity: 1;
|
|
transition-property: translate, opacity;
|
|
transition-duration: var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-fast);
|
|
|
|
@starting-style {
|
|
translate: 0 16px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
[data-md-toast-snackbar][data-md-two-line] {
|
|
min-height: 68px;
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-toast-snackbar] {
|
|
width: auto;
|
|
min-width: 344px;
|
|
}
|
|
}
|
|
|
|
[data-md-toast-content] {
|
|
min-width: 0;
|
|
flex: 1;
|
|
padding-block: 6px;
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-toast-content][data-md-toast-wrap] {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
|
|
[data-md-toast-title],
|
|
[data-md-toast-description] {
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
:is([data-md-toast-action], [data-md-toast-dismiss]) {
|
|
flex-shrink: 0;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-md-toast-action] {
|
|
margin-inline-start: auto;
|
|
height: var(--md-sys-measurement-space500);
|
|
padding-inline: 12px;
|
|
color: var(--md-sys-color-inverse-primary);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-toast-dismiss] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--md-sys-measurement-space500);
|
|
height: var(--md-sys-measurement-space500);
|
|
}
|
|
}
|
|
|
|
@layer material.layout {
|
|
[data-md-scaffold] {
|
|
--material-margin: var(--md-sys-measurement-space200);
|
|
|
|
display: flex;
|
|
min-block-size: 100dvh;
|
|
flex-direction: column;
|
|
background-color: var(--md-sys-color-surface);
|
|
color: var(--md-sys-color-on-surface);
|
|
|
|
@media (width >= 600px) {
|
|
--material-margin: var(--md-sys-measurement-space300);
|
|
}
|
|
}
|
|
|
|
[data-md-skip-link] {
|
|
position: absolute;
|
|
inline-size: 1px;
|
|
block-size: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
|
|
&:focus {
|
|
position: fixed;
|
|
z-index: 60;
|
|
inset-inline-start: var(--md-sys-measurement-space200);
|
|
top: calc(var(--material-safe-top, env(safe-area-inset-top)) + var(--md-sys-measurement-space200));
|
|
inline-size: auto;
|
|
block-size: auto;
|
|
padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
|
|
margin: 0;
|
|
overflow: visible;
|
|
clip-path: none;
|
|
white-space: normal;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-inverse-surface);
|
|
color: var(--md-sys-color-inverse-on-surface);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
[data-md-scaffold-banner] {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-md-scaffold-row] {
|
|
flex: 1 1 0%;
|
|
|
|
@media (width >= 600px) {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
[data-md-scaffold-content] {
|
|
display: flex;
|
|
min-inline-size: 0;
|
|
flex: 1 1 0%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
[data-md-scaffold-actions] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space50);
|
|
padding-block-start: var(--md-sys-measurement-space100);
|
|
padding-inline: 20px;
|
|
|
|
@container style(--md-navigation-rail-value: collapsed) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
[data-md-scaffold-content] > main {
|
|
--md-layout-margin: 0px;
|
|
|
|
min-inline-size: 0;
|
|
flex: 1 1 0%;
|
|
padding-inline: var(--material-margin);
|
|
outline: none;
|
|
|
|
@media (width < 840px) {
|
|
overflow-x: clip;
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
padding-block-end: var(--material-bottom-bar);
|
|
}
|
|
}
|
|
|
|
[data-md-scaffold-bar] {
|
|
position: fixed;
|
|
z-index: 30;
|
|
inset-inline: 0;
|
|
inset-block-end: 0;
|
|
|
|
@media (width >= 600px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-scaffold]:has(> [data-md-scaffold-bar] [data-md-navigation-bar]:not([data-md-tall])) {
|
|
@media (width < 600px) {
|
|
--material-bottom-bar: calc(64px + var(--material-safe-bottom, env(safe-area-inset-bottom)) + var(--material-bottom-extra, 0px));
|
|
}
|
|
}
|
|
|
|
[data-md-scaffold]:has(> [data-md-scaffold-bar] [data-md-navigation-bar][data-md-tall]) {
|
|
@media (width < 600px) {
|
|
--material-bottom-bar: calc(80px + var(--material-safe-bottom, env(safe-area-inset-bottom)) + var(--material-bottom-extra, 0px));
|
|
}
|
|
}
|
|
|
|
[data-md-scaffold-fab] {
|
|
--md-scaffold-fab-margin: var(--md-sys-measurement-space200);
|
|
|
|
position: fixed;
|
|
z-index: 30;
|
|
inset-inline-end: max(
|
|
var(--md-scaffold-fab-margin),
|
|
var(--material-safe-right, env(safe-area-inset-right))
|
|
);
|
|
inset-block-end: calc(
|
|
max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom)))
|
|
+ var(--md-scaffold-fab-margin)
|
|
+ var(--material-snackbar-height, 0px)
|
|
+ min(var(--material-snackbar-height, 0px), var(--md-sys-measurement-space200))
|
|
);
|
|
transition: inset-block-end var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);
|
|
|
|
@media (width >= 600px) {
|
|
--md-scaffold-fab-margin: var(--md-sys-measurement-space300);
|
|
}
|
|
}
|
|
|
|
[data-md-scaffold-fab]:is([dir='rtl'], [dir='rtl'] *) {
|
|
inset-inline-end: max(
|
|
var(--md-scaffold-fab-margin),
|
|
var(--material-safe-left, env(safe-area-inset-left))
|
|
);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-shape][style*='--md-shape-size'] {
|
|
inline-size: var(--md-shape-size);
|
|
block-size: var(--md-shape-size);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-button-group] {
|
|
--md-button-group-inner: var(--md-sys-shape-corner-sm);
|
|
--md-button-group-inner-pressed: var(--md-sys-shape-corner-xs);
|
|
--md-button-group-full: 20px;
|
|
--md-button-group-square: var(--md-sys-shape-corner-md);
|
|
--md-button-group-square-pressed: var(--md-sys-shape-corner-sm);
|
|
--md-button-group-outer: var(--md-button-group-full);
|
|
--md-button-group-pad: var(--md-sys-measurement-space200);
|
|
--md-button-group-grow: 6px;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
[data-md-button-group][data-md-size='xs'] {
|
|
--md-button-group-inner: var(--md-sys-shape-corner-xs);
|
|
--md-button-group-inner-pressed: 2px;
|
|
--md-button-group-full: 16px;
|
|
--md-button-group-grow: 4px;
|
|
}
|
|
|
|
[data-md-button-group][data-md-size='md'] {
|
|
--md-button-group-full: 28px;
|
|
--md-button-group-square: var(--md-sys-shape-corner-lg);
|
|
--md-button-group-square-pressed: var(--md-sys-shape-corner-md);
|
|
--md-button-group-pad: var(--md-sys-measurement-space300);
|
|
--md-button-group-grow: 8px;
|
|
}
|
|
|
|
[data-md-button-group][data-md-size='lg'] {
|
|
--md-button-group-inner: var(--md-sys-shape-corner-lg);
|
|
--md-button-group-inner-pressed: var(--md-sys-shape-corner-md);
|
|
--md-button-group-full: 48px;
|
|
--md-button-group-square: var(--md-sys-shape-corner-xl);
|
|
--md-button-group-square-pressed: var(--md-sys-shape-corner-lg);
|
|
--md-button-group-pad: var(--md-sys-measurement-space600);
|
|
--md-button-group-grow: 16px;
|
|
}
|
|
|
|
[data-md-button-group][data-md-size='xl'] {
|
|
--md-button-group-inner: var(--md-sys-shape-corner-lg-increased);
|
|
--md-button-group-inner-pressed: var(--md-sys-shape-corner-lg);
|
|
--md-button-group-full: 68px;
|
|
--md-button-group-square: var(--md-sys-shape-corner-xl);
|
|
--md-button-group-square-pressed: var(--md-sys-shape-corner-lg);
|
|
--md-button-group-pad: var(--md-sys-measurement-space800);
|
|
--md-button-group-grow: 20px;
|
|
}
|
|
|
|
[data-md-button-group='standard'] {
|
|
gap: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-button-group='standard'][data-md-size='xs'] {
|
|
gap: 18px;
|
|
}
|
|
|
|
[data-md-button-group='standard'][data-md-size='sm'] {
|
|
gap: 12px;
|
|
}
|
|
[data-md-button-group='standard'][data-md-shape='square'] > * {
|
|
border-radius: var(--md-button-group-square);
|
|
}
|
|
|
|
[data-md-button-group='standard'][data-md-shape='square'] > :active:not(:disabled, [aria-disabled='true']) {
|
|
border-radius: var(--md-button-group-square-pressed);
|
|
}
|
|
|
|
[data-md-button-group='standard'][data-md-shape='square'] > [aria-pressed='true'] {
|
|
border-radius: var(--md-button-group-full);
|
|
}
|
|
[data-md-button-group='standard'] > :not([data-md-icon-button]):active:not(:disabled, [aria-disabled='true']) {
|
|
padding-inline: calc(var(--md-button-group-pad) + var(--md-button-group-grow));
|
|
}
|
|
|
|
[data-md-button-group='standard'] > :not([data-md-icon-button]):has(+ :not([data-md-icon-button]):active:not(:disabled, [aria-disabled='true'])) {
|
|
padding-inline-end: calc(var(--md-button-group-pad) - var(--md-button-group-grow));
|
|
}
|
|
|
|
[data-md-button-group='standard'] > :not([data-md-icon-button]):active:not(:disabled, [aria-disabled='true']) + :not([data-md-icon-button]) {
|
|
padding-inline-start: calc(var(--md-button-group-pad) - var(--md-button-group-grow));
|
|
}
|
|
[data-md-button-group][data-md-shape='square'] {
|
|
--md-button-group-outer: var(--md-button-group-inner);
|
|
}
|
|
|
|
[data-md-button-group='connected'] {
|
|
gap: var(--md-sys-measurement-space25);
|
|
}
|
|
|
|
[data-md-button-group='connected']:is([data-md-size='xs'], [data-md-size='sm']) > * {
|
|
min-inline-size: var(--md-sys-measurement-space600);
|
|
}
|
|
|
|
[data-md-button-group='connected'] > * {
|
|
--md-button-group-corner: var(--md-button-group-inner);
|
|
|
|
border-radius: var(--md-button-group-corner);
|
|
}
|
|
|
|
[data-md-button-group='connected'] > :active {
|
|
--md-button-group-corner: var(--md-button-group-inner-pressed);
|
|
}
|
|
|
|
[data-md-button-group='connected'] > :is([aria-pressed='true'], :has(:checked)) {
|
|
--md-button-group-corner: var(--md-button-group-full);
|
|
}
|
|
|
|
[data-md-button-group='connected'] > :first-child {
|
|
border-start-start-radius: var(--md-button-group-outer);
|
|
border-end-start-radius: var(--md-button-group-outer);
|
|
}
|
|
|
|
[data-md-button-group='connected'] > :last-child {
|
|
border-start-end-radius: var(--md-button-group-outer);
|
|
border-end-end-radius: var(--md-button-group-outer);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-group] {
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-md-group-legend] {
|
|
margin-block-end: var(--md-sys-measurement-space100);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-group] > [data-md-button-group] {
|
|
display: flex;
|
|
align-items: normal;
|
|
inline-size: 100%;
|
|
}
|
|
|
|
[data-md-group][data-md-inline] > [data-md-button-group] {
|
|
inline-size: fit-content;
|
|
}
|
|
|
|
[data-md-group-segment] {
|
|
--md-group-container: var(--md-sys-color-secondary-container);
|
|
--md-group-label: var(--md-sys-color-on-secondary-container);
|
|
|
|
display: flex;
|
|
flex: 1 1 0%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-inline-size: 0;
|
|
background-color: var(--md-group-container);
|
|
color: var(--md-group-label);
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
transition-property: border-radius, padding, margin, bottom, background-color, color, box-shadow;
|
|
transition-duration:
|
|
var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration),
|
|
var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration),
|
|
var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function:
|
|
var(--md-sys-motion-spatial-fast), var(--md-sys-motion-spatial-fast),
|
|
var(--md-sys-motion-spatial-fast), var(--md-sys-motion-spatial-fast),
|
|
var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast), var(--md-sys-motion-effects-fast);
|
|
&:has(:focus-visible) {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
|
|
&::before {
|
|
opacity: var(--md-sys-state-focus-state-layer-opacity);
|
|
}
|
|
}
|
|
&:has(:disabled)::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-group][data-md-inline] [data-md-group-segment] {
|
|
flex: initial;
|
|
}
|
|
|
|
[data-md-group]:is([data-md-size='xs'], [data-md-size='sm']) [data-md-group-segment] {
|
|
min-inline-size: var(--md-sys-measurement-space600);
|
|
}
|
|
|
|
[data-md-group][data-md-size='xs'] [data-md-group-segment] {
|
|
gap: var(--md-sys-measurement-space100);
|
|
block-size: 32px;
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-group][data-md-size='sm'] [data-md-group-segment] {
|
|
gap: var(--md-sys-measurement-space100);
|
|
block-size: 40px;
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-group][data-md-size='md'] [data-md-group-segment] {
|
|
gap: var(--md-sys-measurement-space100);
|
|
block-size: 56px;
|
|
padding-inline: var(--md-sys-measurement-space300);
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-group][data-md-size='lg'] [data-md-group-segment] {
|
|
gap: 12px;
|
|
block-size: 96px;
|
|
padding-inline: var(--md-sys-measurement-space600);
|
|
font: var(--md-sys-typescale-headline-sm);
|
|
letter-spacing: var(--md-sys-typescale-headline-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-group][data-md-size='xl'] [data-md-group-segment] {
|
|
gap: var(--md-sys-measurement-space200);
|
|
block-size: 136px;
|
|
padding-inline: var(--md-sys-measurement-space800);
|
|
font: var(--md-sys-typescale-headline-lg);
|
|
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-group-segment]:has(:checked) {
|
|
--md-group-container: var(--md-sys-color-secondary);
|
|
--md-group-label: var(--md-sys-color-on-secondary);
|
|
}
|
|
|
|
[data-md-group][data-md-variant='filled'] [data-md-group-segment] {
|
|
--md-group-container: var(--md-sys-color-surface-container);
|
|
--md-group-label: var(--md-sys-color-on-surface-variant);
|
|
|
|
&:has(:checked) {
|
|
--md-group-container: var(--md-sys-color-primary);
|
|
--md-group-label: var(--md-sys-color-on-primary);
|
|
}
|
|
}
|
|
|
|
[data-md-group][data-md-variant='outlined'] [data-md-group-segment] {
|
|
--md-group-container: transparent;
|
|
--md-group-label: var(--md-sys-color-on-surface-variant);
|
|
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
|
|
&:has(:checked) {
|
|
--md-group-container: var(--md-sys-color-inverse-surface);
|
|
--md-group-label: var(--md-sys-color-inverse-on-surface);
|
|
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
[data-md-group-segment]:has(:disabled) {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
[data-md-group-label] {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
[data-md-group-hint],
|
|
[data-md-group-error] {
|
|
margin-block-start: var(--md-sys-measurement-space50);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-group-hint] {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-group-error] {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-split-button] {
|
|
--md-split-button-inner: var(--md-sys-shape-corner-xs);
|
|
--md-split-button-inner-pressed: var(--md-sys-shape-corner-md);
|
|
--md-split-button-full: 20px;
|
|
--md-split-button-icon: 22px;
|
|
--md-split-button-nudge: 1px;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space25);
|
|
}
|
|
|
|
[data-md-split-button][data-md-size='xs'] {
|
|
--md-split-button-inner-pressed: var(--md-sys-shape-corner-sm);
|
|
--md-split-button-full: 16px;
|
|
}
|
|
|
|
[data-md-split-button][data-md-size='md'] {
|
|
--md-split-button-full: 28px;
|
|
--md-split-button-icon: 26px;
|
|
--md-split-button-nudge: 2px;
|
|
}
|
|
|
|
[data-md-split-button][data-md-size='lg'] {
|
|
--md-split-button-inner: var(--md-sys-shape-corner-sm);
|
|
--md-split-button-inner-pressed: var(--md-sys-shape-corner-lg-increased);
|
|
--md-split-button-full: 48px;
|
|
--md-split-button-icon: 38px;
|
|
--md-split-button-nudge: 3px;
|
|
}
|
|
|
|
[data-md-split-button][data-md-size='xl'] {
|
|
--md-split-button-inner: var(--md-sys-shape-corner-md);
|
|
--md-split-button-inner-pressed: var(--md-sys-shape-corner-lg-increased);
|
|
--md-split-button-full: 68px;
|
|
--md-split-button-icon: 50px;
|
|
--md-split-button-nudge: 6px;
|
|
}
|
|
|
|
[data-md-split-button] [data-md-split] {
|
|
--md-split-button-corner: var(--md-split-button-inner);
|
|
|
|
border-radius: var(--md-split-button-corner);
|
|
}
|
|
|
|
[data-md-split-button] [data-md-split]:active {
|
|
--md-split-button-corner: var(--md-split-button-inner-pressed);
|
|
}
|
|
|
|
[data-md-split-button] [data-md-split='trailing'][aria-expanded='true'] {
|
|
--md-split-button-corner: var(--md-split-button-full);
|
|
}
|
|
|
|
[data-md-split-button] [data-md-split='leading'] {
|
|
border-start-start-radius: var(--md-split-button-full);
|
|
border-end-start-radius: var(--md-split-button-full);
|
|
}
|
|
|
|
[data-md-split-button] [data-md-split='trailing'] {
|
|
border-start-end-radius: var(--md-split-button-full);
|
|
border-end-end-radius: var(--md-split-button-full);
|
|
}
|
|
|
|
[data-md-split-button][data-md-size='xs'] [data-md-split='leading'] {
|
|
padding-inline-end: var(--md-sys-measurement-space125);
|
|
}
|
|
|
|
[data-md-split-button][data-md-size='sm'] [data-md-split='leading'] {
|
|
padding-inline-end: 12px;
|
|
}
|
|
|
|
[data-md-split-button]:is([data-md-size='xs'], [data-md-size='sm']) [data-md-split='trailing'] {
|
|
inline-size: var(--md-sys-measurement-space600);
|
|
}
|
|
|
|
[data-md-split-button] [data-md-split='trailing'] [data-md-icon] {
|
|
inline-size: var(--md-split-button-icon);
|
|
block-size: var(--md-split-button-icon);
|
|
margin-inline-start: calc(-1 * var(--md-split-button-nudge));
|
|
margin-inline-end: var(--md-split-button-nudge);
|
|
transition: rotate var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
|
|
}
|
|
|
|
[data-md-split-button] [data-md-split='trailing'][aria-expanded='true'] [data-md-icon] {
|
|
rotate: 180deg;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-menu-separator] {
|
|
block-size: 1px;
|
|
margin-block: var(--md-sys-measurement-space100);
|
|
margin-inline: var(--md-sys-measurement-space200);
|
|
border-width: 0;
|
|
background-color: var(--md-sys-color-outline-variant);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-menu-group]:not([data-md-gap]) {
|
|
padding-block: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-menu-group]:not([data-md-gap]):first-child {
|
|
padding-block-start: 0;
|
|
}
|
|
|
|
[data-md-menu-group]:not([data-md-gap]):last-child {
|
|
padding-block-end: 0;
|
|
}
|
|
|
|
[data-md-menu-group][data-md-gap]:not(:first-child) {
|
|
margin-block-start: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-menu-group-label] {
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
padding-block: var(--md-sys-measurement-space100) var(--md-sys-measurement-space50);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-menu-group-items] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--md-sys-measurement-space25);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-fab-menu-item] {
|
|
--md-fab-menu-item-container: var(--md-sys-color-primary-container);
|
|
--md-fab-menu-item-on-container: var(--md-sys-color-on-primary-container);
|
|
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space100);
|
|
block-size: var(--md-sys-measurement-space700);
|
|
padding-inline: var(--md-sys-measurement-space300);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-fab-menu-item-container);
|
|
color: var(--md-fab-menu-item-on-container);
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
white-space: nowrap;
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
font-variation-settings: normal;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
translate: 0 0;
|
|
opacity: 1;
|
|
transition-property: translate, opacity;
|
|
transition-duration: var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-fast), var(--md-sys-motion-effects-default);
|
|
|
|
@starting-style {
|
|
translate: 0 var(--md-sys-measurement-space100);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
[data-md-fab-menu-item][data-md-color='secondary'] {
|
|
--md-fab-menu-item-container: var(--md-sys-color-secondary-container);
|
|
--md-fab-menu-item-on-container: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-fab-menu-item][data-md-color='tertiary'] {
|
|
--md-fab-menu-item-container: var(--md-sys-color-tertiary-container);
|
|
--md-fab-menu-item-on-container: var(--md-sys-color-on-tertiary-container);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-fab-menu] {
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
|
|
[data-md-fab-menu-anchor] {
|
|
display: inline-flex;
|
|
}
|
|
|
|
[data-md-fab-menu-trigger] {
|
|
--md-fab-menu-container: var(--md-sys-color-primary-container);
|
|
--md-fab-menu-on-container: var(--md-sys-color-on-primary-container);
|
|
--md-fab-menu-color: var(--md-sys-color-primary);
|
|
--md-fab-menu-on-color: var(--md-sys-color-on-primary);
|
|
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--md-sys-measurement-space700);
|
|
block-size: var(--md-sys-measurement-space700);
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
background-color: var(--md-fab-menu-container);
|
|
color: var(--md-fab-menu-on-container);
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
transition-property: border-radius, background-color, color, box-shadow;
|
|
transition-duration:
|
|
var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-effects-default-duration),
|
|
var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function:
|
|
var(--md-sys-motion-spatial-default), var(--md-sys-motion-effects-default),
|
|
var(--md-sys-motion-effects-default), var(--md-sys-motion-effects-default);
|
|
|
|
@media (hover: hover) {
|
|
&:hover {
|
|
box-shadow: var(--md-sys-elevation-4);
|
|
}
|
|
}
|
|
|
|
&[aria-expanded='true'] {
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-fab-menu-color);
|
|
color: var(--md-fab-menu-on-color);
|
|
}
|
|
}
|
|
|
|
[data-md-fab-menu-trigger][data-md-color='secondary'] {
|
|
--md-fab-menu-container: var(--md-sys-color-secondary-container);
|
|
--md-fab-menu-on-container: var(--md-sys-color-on-secondary-container);
|
|
--md-fab-menu-color: var(--md-sys-color-secondary);
|
|
--md-fab-menu-on-color: var(--md-sys-color-on-secondary);
|
|
}
|
|
|
|
[data-md-fab-menu-trigger][data-md-color='tertiary'] {
|
|
--md-fab-menu-container: var(--md-sys-color-tertiary-container);
|
|
--md-fab-menu-on-container: var(--md-sys-color-on-tertiary-container);
|
|
--md-fab-menu-color: var(--md-sys-color-tertiary);
|
|
--md-fab-menu-on-color: var(--md-sys-color-on-tertiary);
|
|
}
|
|
|
|
[data-md-fab-menu-close-icon] {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-fab-menu-trigger][aria-expanded='true'] [data-md-fab-menu-icon] {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-fab-menu-trigger][aria-expanded='true'] [data-md-fab-menu-close-icon] {
|
|
display: inline-flex;
|
|
}
|
|
|
|
[data-md-fab-menu-popover] {
|
|
inset: auto;
|
|
margin: 0;
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: var(--md-sys-measurement-space50);
|
|
max-block-size: calc(100dvh - 128px);
|
|
overflow-y: auto;
|
|
border-width: 0;
|
|
background-color: transparent;
|
|
padding: var(--md-sys-measurement-space100);
|
|
|
|
&:popover-open {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
[data-md-fab-menu-popover][data-md-position='top-end'] {
|
|
margin-inline: calc(-1 * var(--md-sys-measurement-space100));
|
|
margin-block-start: calc(-1 * var(--md-sys-measurement-space100));
|
|
align-items: flex-end;
|
|
position-area: top span-left;
|
|
}
|
|
|
|
[data-md-fab-menu-popover][data-md-position='top-start'] {
|
|
margin-inline: calc(-1 * var(--md-sys-measurement-space100));
|
|
margin-block-start: calc(-1 * var(--md-sys-measurement-space100));
|
|
align-items: flex-start;
|
|
position-area: top span-right;
|
|
}
|
|
|
|
[data-md-fab-menu-popover][data-md-position='bottom-end'] {
|
|
margin-inline: calc(-1 * var(--md-sys-measurement-space100));
|
|
margin-block-end: calc(-1 * var(--md-sys-measurement-space100));
|
|
align-items: flex-end;
|
|
position-area: bottom span-left;
|
|
}
|
|
|
|
[data-md-fab-menu-popover][data-md-position='bottom-start'] {
|
|
margin-inline: calc(-1 * var(--md-sys-measurement-space100));
|
|
margin-block-end: calc(-1 * var(--md-sys-measurement-space100));
|
|
align-items: flex-start;
|
|
position-area: bottom span-right;
|
|
}
|
|
|
|
[data-md-fab-menu-popover]:not(:popover-open) > *,
|
|
[data-md-fab-menu-popover][data-md-popover-closing] > * {
|
|
translate: 0 var(--md-sys-measurement-space100);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-rich-tooltip] {
|
|
display: inline-flex;
|
|
}
|
|
|
|
[data-md-rich-tooltip-bubble] {
|
|
inset: auto;
|
|
margin: 0;
|
|
overflow: visible;
|
|
width: max-content;
|
|
max-width: 312px;
|
|
border-width: 0;
|
|
border-radius: var(--md-sys-shape-corner-md);
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
padding-block: 12px var(--md-sys-measurement-space100);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
box-shadow: var(--md-sys-elevation-2);
|
|
text-align: start;
|
|
white-space: normal;
|
|
opacity: 0;
|
|
transition-property: opacity;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
|
|
&:popover-open:not([data-md-popover-closing]) {
|
|
opacity: 1;
|
|
|
|
@starting-style {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-md-rich-tooltip-bubble]:is([data-md-side='top'], [data-md-side='bottom']) {
|
|
margin-block: var(--md-sys-measurement-space50);
|
|
position-try-fallbacks: flip-block, flip-inline;
|
|
}
|
|
|
|
[data-md-rich-tooltip-bubble]:is([data-md-side='left'], [data-md-side='right']) {
|
|
margin-inline: var(--md-sys-measurement-space50);
|
|
position-try-fallbacks: flip-inline, flip-block;
|
|
}
|
|
|
|
[data-md-rich-tooltip-bubble][data-md-side='top'] {
|
|
position-area: top span-right;
|
|
}
|
|
|
|
[data-md-rich-tooltip-bubble][data-md-side='bottom'] {
|
|
position-area: bottom span-right;
|
|
}
|
|
|
|
[data-md-rich-tooltip-bubble][data-md-side='left'] {
|
|
position-area: left span-bottom;
|
|
}
|
|
|
|
[data-md-rich-tooltip-bubble][data-md-side='right'] {
|
|
position-area: right span-bottom;
|
|
}
|
|
|
|
[data-md-rich-tooltip-title] {
|
|
display: block;
|
|
margin-block-end: var(--md-sys-measurement-space50);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-rich-tooltip-text] {
|
|
display: block;
|
|
padding-block-end: var(--md-sys-measurement-space100);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-rich-tooltip-actions] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--md-sys-measurement-space100);
|
|
margin-inline-start: -12px;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-progress] {
|
|
color: var(--md-color, var(--md-sys-color-primary));
|
|
stroke: var(--md-container, var(--md-sys-color-secondary-container));
|
|
|
|
& > svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular]) {
|
|
display: block;
|
|
width: 100%;
|
|
height: 4px;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular]):is([dir='rtl'], [dir='rtl'] *) {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular])[data-md-thick] {
|
|
height: 8px;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular])[data-md-wavy] {
|
|
height: 10px;
|
|
}
|
|
|
|
[data-md-progress]:not([data-md-circular])[data-md-wavy][data-md-thick] {
|
|
height: 14px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular] {
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
vertical-align: middle;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular][data-md-thick] {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular][data-md-wavy] {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
[data-md-progress][data-md-circular][data-md-wavy][data-md-thick] {
|
|
width: 52px;
|
|
height: 52px;
|
|
}
|
|
[data-md-progress][data-md-color='primary'] {
|
|
stroke: var(--md-sys-color-secondary-container);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-alert] {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
border-radius: var(--md-sys-shape-corner-md);
|
|
padding: var(--md-sys-measurement-space200);
|
|
background-color: var(--md-container, var(--md-sys-color-info-container));
|
|
color: var(--md-on-container, var(--md-sys-color-on-info-container));
|
|
}
|
|
|
|
[data-md-alert][data-md-color='neutral'] {
|
|
background-color: var(--md-sys-color-surface-container-high);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-alert-content] {
|
|
min-width: 0;
|
|
flex: 1;
|
|
align-self: center;
|
|
}
|
|
|
|
[data-md-alert-content] > * + * {
|
|
margin-top: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-alert-title] {
|
|
font: var(--md-sys-typescale-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-alert-description] {
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-alert-actions] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--md-sys-measurement-space100);
|
|
margin-inline-start: -12px;
|
|
padding-top: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-alert-dismiss] {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--md-sys-measurement-space500);
|
|
height: var(--md-sys-measurement-space500);
|
|
margin: -8px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-stat] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--md-sys-measurement-space50);
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
padding: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-stat-header] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space100);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-stat-value] {
|
|
font: var(--md-sys-typescale-emphasized-headline-md);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-headline-md-tracking);
|
|
font-variation-settings: "ROND" 100;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
[data-md-stat-description] {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-stat-extra] {
|
|
padding-top: var(--md-sys-measurement-space100);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-empty-state] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space200);
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
padding-block: var(--md-sys-measurement-space500);
|
|
text-align: center;
|
|
}
|
|
|
|
[data-md-empty-state-illustration] {
|
|
position: relative;
|
|
display: grid;
|
|
width: 112px;
|
|
height: 112px;
|
|
place-items: center;
|
|
}
|
|
|
|
[data-md-empty-state-shape] {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: var(--md-sys-color-secondary-container);
|
|
}
|
|
|
|
[data-md-empty-state-icon] {
|
|
position: relative;
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-empty-state-title] {
|
|
font: var(--md-sys-typescale-title-lg);
|
|
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-empty-state-description] {
|
|
max-width: 448px;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-empty-state-actions] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
padding-top: var(--md-sys-measurement-space100);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-divider] {
|
|
flex-shrink: 0;
|
|
background-color: var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
[data-md-divider][data-md-orientation='horizontal'] {
|
|
width: auto;
|
|
height: 1px;
|
|
}
|
|
|
|
[data-md-divider][data-md-orientation='vertical'] {
|
|
width: 1px;
|
|
align-self: stretch;
|
|
}
|
|
|
|
[data-md-divider][data-md-orientation='horizontal'][data-md-inset] {
|
|
margin-inline-start: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-divider][data-md-orientation='horizontal'][data-md-middle] {
|
|
margin-inline: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-divider][data-md-orientation='vertical'][data-md-middle] {
|
|
margin-block: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-divider-heading] {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space50);
|
|
padding-bottom: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-divider-heading][data-md-inset] {
|
|
margin-inline-start: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-divider-heading][data-md-middle] {
|
|
margin-inline: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-divider-text] {
|
|
flex-shrink: 0;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
|
}
|
|
|
|
[data-md-divider-heading] [data-md-divider] {
|
|
flex: 1 1 0%;
|
|
min-width: 0;
|
|
margin-inline-end: var(--md-sys-measurement-space100);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-form] {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-auto-rows: min-content;
|
|
gap: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-form] > [data-md-button] {
|
|
justify-self: start;
|
|
}
|
|
|
|
[data-md-form-actions] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--md-sys-measurement-space100);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-field] {
|
|
--field-height: 56px;
|
|
--field-pad: var(--md-sys-measurement-space200);
|
|
--field-icon: 24px;
|
|
--field-gap: var(--md-sys-measurement-space200);
|
|
--field-start: var(--field-pad);
|
|
--field-edge: var(--md-sys-color-outline);
|
|
--field-ink: var(--md-sys-color-on-surface-variant);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
@media (width >= 600px) {
|
|
[data-md-field]:not([data-md-full]) {
|
|
max-width: 40rem;
|
|
}
|
|
}
|
|
[data-md-field][data-md-variant='filled'] {
|
|
--field-edge: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-field][data-md-size='sm'] {
|
|
--field-height: 40px;
|
|
--field-pad: 12px;
|
|
--field-icon: 20px;
|
|
--field-gap: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-field][data-md-size='xs'] {
|
|
--field-height: 32px;
|
|
--field-pad: var(--md-sys-measurement-space125);
|
|
--field-icon: 16px;
|
|
--field-gap: var(--md-sys-measurement-space75);
|
|
}
|
|
|
|
[data-md-field]:has([data-md-field-icon]) {
|
|
--field-start: calc(var(--field-pad) + var(--field-icon) + var(--field-gap));
|
|
}
|
|
|
|
[data-md-field-box] {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--field-gap);
|
|
min-height: var(--field-height);
|
|
padding-inline: var(--field-pad);
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
cursor: text;
|
|
}
|
|
|
|
[data-md-field-control] {
|
|
flex: 1 1 0%;
|
|
min-width: 0;
|
|
align-self: stretch;
|
|
background: transparent;
|
|
color: var(--md-sys-color-on-surface);
|
|
caret-color: var(--md-sys-color-primary);
|
|
outline: none;
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
}
|
|
|
|
[data-md-field][data-md-size='xs'] [data-md-field-control] {
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
}
|
|
|
|
[data-md-field][data-md-mono] [data-md-field-control] {
|
|
font-family: var(--md-ref-typeface-mono);
|
|
}
|
|
[data-md-field-control]:-webkit-autofill {
|
|
-webkit-text-fill-color: var(--md-sys-color-on-surface);
|
|
transition: background-color 604800s, color 604800s;
|
|
}
|
|
[data-md-field]:has([data-md-field-control][aria-expanded='true']) [data-md-field-arrow] {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
[data-md-field-arrow] {
|
|
transition: rotate var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-field-icon],
|
|
[data-md-field-trailing] {
|
|
flex: none;
|
|
width: var(--field-icon);
|
|
height: var(--field-icon);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
[data-md-field-error] {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-field-icon],
|
|
[data-md-field-arrow] {
|
|
pointer-events: none;
|
|
}
|
|
[data-md-field-button] {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
margin-inline-end: calc(-1 * var(--md-sys-measurement-space50));
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
[data-md-field-button]::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 50% auto auto 50%;
|
|
width: calc(var(--field-icon) + var(--md-sys-measurement-space200));
|
|
height: calc(var(--field-icon) + var(--md-sys-measurement-space200));
|
|
translate: -50% -50%;
|
|
border-radius: inherit;
|
|
transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-field-button]:hover::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
|
|
}
|
|
}
|
|
|
|
[data-md-field-button]:focus-visible::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
[data-md-field-button]:active::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-field-button]:disabled::before,
|
|
[data-md-field-button][aria-disabled='true']::before {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-field-affix] {
|
|
flex: none;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
}
|
|
|
|
[data-md-field][data-md-size='xs'] [data-md-field-affix] {
|
|
font: var(--md-sys-typescale-body-md);
|
|
}
|
|
[data-md-field-outline] {
|
|
position: absolute;
|
|
inset: -0.3125rem 0 0;
|
|
margin: 0;
|
|
padding: 0 calc(var(--field-pad) - var(--md-sys-measurement-space50));
|
|
border: 1px solid var(--field-edge);
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
min-width: 0;
|
|
transition: border-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-field-outline] > legend {
|
|
display: block;
|
|
width: auto;
|
|
max-width: 100%;
|
|
height: 0.6875rem;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
white-space: nowrap;
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
transition: max-width var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-field-outline] > legend > span {
|
|
display: inline-block;
|
|
padding-inline: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-field-label] {
|
|
position: absolute;
|
|
inset-inline-start: var(--field-pad);
|
|
top: 0;
|
|
max-width: calc(100% - 2 * var(--field-pad));
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
translate: 0 -50%;
|
|
color: var(--field-ink);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
pointer-events: none;
|
|
transition-property: top, inset-inline-start, font-size, line-height, color;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
[data-md-field]:has([data-md-field-control]:required) [data-md-field-label]::after,
|
|
[data-md-field]:has([data-md-field-control]:required) [data-md-field-outline] > legend > span::after {
|
|
content: ' *';
|
|
}
|
|
[data-md-field]:not([data-md-floated]):has([data-md-field-label]):has([data-md-field-control]:placeholder-shown):not(:focus-within) {
|
|
[data-md-field-label] {
|
|
top: 50%;
|
|
inset-inline-start: var(--field-start);
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
}
|
|
|
|
[data-md-field-outline] > legend {
|
|
max-width: 0.01px;
|
|
}
|
|
|
|
[data-md-field-affix] {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
[data-md-field][data-md-size='xs']:not([data-md-floated]):has([data-md-field-label]):has([data-md-field-control]:placeholder-shown):not(:focus-within) [data-md-field-label] {
|
|
font: var(--md-sys-typescale-body-md);
|
|
}
|
|
|
|
[data-md-field]:has([data-md-field-label]):not(:focus-within) [data-md-field-control]::placeholder {
|
|
color: transparent;
|
|
}
|
|
[data-md-field]:has([data-md-field-control]:placeholder-shown) [data-md-field-clear] {
|
|
display: none;
|
|
}
|
|
@media (hover: hover) {
|
|
:where([data-md-field]:not(:has([data-md-field-control]:disabled))) [data-md-field-box]:hover {
|
|
--field-edge: var(--md-sys-color-on-surface);
|
|
}
|
|
}
|
|
|
|
[data-md-field] [data-md-field-box]:focus-within {
|
|
--field-edge: var(--md-sys-color-primary);
|
|
--field-ink: var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-field-box]:focus-within [data-md-field-outline] {
|
|
border-width: 2px;
|
|
}
|
|
|
|
[data-md-field][data-md-invalid] {
|
|
--field-edge: var(--md-sys-color-error);
|
|
--field-ink: var(--md-sys-color-error);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
:where([data-md-field]:not(:has([data-md-field-control]:disabled)))[data-md-invalid] [data-md-field-box]:hover {
|
|
--field-edge: var(--md-sys-color-on-error-container);
|
|
}
|
|
}
|
|
|
|
[data-md-field][data-md-invalid] [data-md-field-box]:focus-within {
|
|
--field-edge: var(--md-sys-color-error);
|
|
--field-ink: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-field]:has([data-md-field-control]:disabled) {
|
|
--field-edge: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
|
|
--field-ink: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
|
|
[data-md-field-box] {
|
|
cursor: default;
|
|
}
|
|
|
|
[data-md-field-control],
|
|
[data-md-field-icon],
|
|
[data-md-field-affix],
|
|
[data-md-field-trailing] {
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
}
|
|
[data-md-field-support-row] {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
[data-md-field-support] {
|
|
min-width: 0;
|
|
padding: var(--md-sys-measurement-space50) var(--field-pad) 0;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
}
|
|
|
|
[data-md-field][data-md-invalid] [data-md-field-support] {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-field-counter] {
|
|
flex: none;
|
|
margin-inline-start: auto;
|
|
padding-block-start: var(--md-sys-measurement-space50);
|
|
padding-inline-end: var(--field-pad);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
[data-md-field-counter][data-md-over] {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-field][data-md-variant='filled'] [data-md-field-box] {
|
|
border-radius: var(--md-sys-shape-corner-xs) var(--md-sys-shape-corner-xs) 0 0;
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-field][data-md-variant='filled'] [data-md-field-box]:hover {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-surface-container-highest));
|
|
}
|
|
}
|
|
[data-md-field][data-md-variant='filled'] [data-md-field-outline] {
|
|
inset: auto 0 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-block-end: 1px solid var(--field-edge);
|
|
border-radius: 0;
|
|
}
|
|
|
|
[data-md-field][data-md-variant='filled'] [data-md-field-outline] > legend {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-field][data-md-variant='filled'] [data-md-field-box]:focus-within [data-md-field-outline] {
|
|
border-block-end-width: 2px;
|
|
}
|
|
[data-md-field][data-md-variant='filled'] [data-md-field-label] {
|
|
top: var(--md-sys-measurement-space200);
|
|
inset-inline-start: var(--field-start);
|
|
max-width: calc(100% - var(--field-start) - var(--field-pad));
|
|
}
|
|
|
|
[data-md-field][data-md-variant='filled']:has([data-md-field-label]) [data-md-field-control] {
|
|
padding-block: var(--md-sys-measurement-space300) var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-field][data-md-variant='filled']:has([data-md-field-label]) [data-md-field-affix] {
|
|
align-self: stretch;
|
|
padding-block: var(--md-sys-measurement-space300) var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-field][data-md-variant='filled']:has([data-md-field-control]:disabled) {
|
|
--field-edge: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
|
|
[data-md-field-box] {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
textarea[data-md-field-control] {
|
|
--field-grip: var(--md-sys-measurement-space50);
|
|
--textarea-clear: var(--md-sys-measurement-space100);
|
|
--textarea-pad-top: calc((var(--field-height) - 1.5rem) / 2 - var(--textarea-clear));
|
|
--textarea-pad-bottom: calc((var(--field-height) - 1.5rem) / 2 - var(--field-grip));
|
|
|
|
margin-block: var(--textarea-clear) var(--field-grip);
|
|
margin-inline-end: calc(var(--field-grip) - var(--field-pad));
|
|
padding-block: var(--textarea-pad-top) var(--textarea-pad-bottom);
|
|
padding-inline-end: calc(var(--field-pad) - var(--field-grip));
|
|
resize: vertical;
|
|
}
|
|
textarea[data-md-field-control][data-md-autogrow] {
|
|
field-sizing: content;
|
|
min-block-size: calc(var(--field-rows, 3) * 1.5rem + var(--textarea-pad-top) + var(--textarea-pad-bottom));
|
|
max-block-size: calc(var(--field-max-rows, 1000) * 1.5rem + var(--textarea-pad-top) + var(--textarea-pad-bottom));
|
|
resize: none;
|
|
}
|
|
[data-md-field]:not([data-md-floated]):has([data-md-field-label]):has(textarea[data-md-field-control]:placeholder-shown):not(:focus-within) [data-md-field-label] {
|
|
top: calc(var(--field-height) / 2);
|
|
}
|
|
[data-md-field][data-md-variant='filled']:has([data-md-field-label]) textarea[data-md-field-control] {
|
|
--textarea-clear: var(--md-sys-measurement-space300);
|
|
--textarea-pad-top: 0px;
|
|
--textarea-pad-bottom: calc(var(--md-sys-measurement-space100) - var(--field-grip));
|
|
|
|
padding-block: var(--textarea-pad-top) var(--textarea-pad-bottom);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
select[data-md-field-control] {
|
|
--field-end: calc(var(--field-icon) + var(--field-gap) + var(--field-pad));
|
|
|
|
appearance: none;
|
|
cursor: pointer;
|
|
margin-inline: calc(-1 * var(--field-start)) calc(-1 * var(--field-end));
|
|
padding-inline: var(--field-start) var(--field-end);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
select[data-md-field-control]:disabled {
|
|
cursor: default;
|
|
}
|
|
@supports (appearance: base-select) {
|
|
select[data-md-field-control] {
|
|
appearance: base-select;
|
|
display: flex;
|
|
align-items: center;
|
|
border: 0;
|
|
padding-block: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
select[data-md-field-control] selectedcontent {
|
|
flex: 1 1 0%;
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
select[data-md-field-control]::picker-icon {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-field-box]:has(select[data-md-field-control]:open) {
|
|
--field-edge: var(--md-sys-color-primary);
|
|
--field-ink: var(--md-sys-color-primary);
|
|
|
|
[data-md-field-outline] {
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
|
|
[data-md-field][data-md-invalid] [data-md-field-box]:has(select[data-md-field-control]:open) {
|
|
--field-edge: var(--md-sys-color-error);
|
|
--field-ink: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-field]:has(select[data-md-field-control]:open) [data-md-field-arrow] {
|
|
rotate: 180deg;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
input[type='file'][data-md-field-control] {
|
|
align-self: center;
|
|
color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type='file'][data-md-field-control]::file-selector-button {
|
|
height: 32px;
|
|
margin-inline-end: 12px;
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
border: 0;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
cursor: pointer;
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
input[type='file'][data-md-field-control]:hover::file-selector-button {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-secondary-container));
|
|
}
|
|
}
|
|
|
|
input[type='file'][data-md-field-control]:disabled::file-selector-button {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
cursor: default;
|
|
}
|
|
[data-md-field][data-md-variant='filled']:has([data-md-field-label]) input[type='file'][data-md-field-control] {
|
|
padding-block: 22px var(--md-sys-measurement-space75);
|
|
}
|
|
|
|
[data-md-field][data-md-variant='filled'] input[type='file'][data-md-field-control]::file-selector-button {
|
|
height: 28px;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-selection-row] {
|
|
--selection-ink: var(--md-sys-color-on-surface);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space200);
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
[data-md-selection-row]:has([data-md-selection-hint]) {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
[data-md-selection-row][data-md-right] {
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
[data-md-selection-row]:has(input:disabled) {
|
|
cursor: default;
|
|
}
|
|
|
|
[data-md-selection-text] {
|
|
min-width: 0;
|
|
}
|
|
|
|
[data-md-selection-label] {
|
|
display: block;
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-selection-hint] {
|
|
display: block;
|
|
margin-top: var(--md-sys-measurement-space25);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-selection-row]:has(input:disabled) [data-md-selection-label] {
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
|
|
:is([data-md-checkbox-box], [data-md-radio-button], [data-md-switch-handle])::before {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
pointer-events: none;
|
|
transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
:is([data-md-checkbox-box], [data-md-radio-button], [data-md-switch]) input {
|
|
margin: 0;
|
|
appearance: none;
|
|
cursor: inherit;
|
|
outline: none;
|
|
transition-property: background-color, border-color;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-selection-row]:has(input:checked),
|
|
[data-md-selection-row]:has(input:indeterminate) {
|
|
--selection-ink: var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-selection-row][data-md-invalid] {
|
|
--selection-ink: var(--md-sys-color-error);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-selection-row]:hover:not(:has(input:disabled)) :is([data-md-checkbox-box], [data-md-radio-button], [data-md-switch-handle])::before {
|
|
background-color: color-mix(in srgb, var(--selection-ink) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
|
|
}
|
|
}
|
|
|
|
[data-md-selection-row]:has(input:focus-visible) :is([data-md-checkbox-box], [data-md-radio-button], [data-md-switch-handle])::before {
|
|
background-color: color-mix(in srgb, var(--selection-ink) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-selection-row]:not(:has(input:disabled)):active :is([data-md-checkbox-box], [data-md-radio-button], [data-md-switch-handle])::before {
|
|
background-color: color-mix(in srgb, var(--selection-ink) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-checkbox] {
|
|
min-width: auto;
|
|
}
|
|
|
|
[data-md-checkbox-box] {
|
|
position: relative;
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
[data-md-checkbox-box] > * {
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
[data-md-selection-row]:has([data-md-selection-hint]) [data-md-checkbox-box] {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
[data-md-checkbox-box]::before {
|
|
inset: -11px;
|
|
}
|
|
|
|
[data-md-checkbox-box]:has(input:focus-visible)::before {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
}
|
|
|
|
[data-md-checkbox-box] input {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--md-sys-color-on-surface-variant);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
[data-md-checkbox-box] input:is(:checked, :indeterminate) {
|
|
border-color: var(--md-sys-color-primary);
|
|
background-color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-checkbox-box] :is([data-md-checkbox-check], [data-md-checkbox-mixed]) {
|
|
color: var(--md-sys-color-on-primary);
|
|
opacity: 0;
|
|
scale: 0.5;
|
|
pointer-events: none;
|
|
transition-property: opacity, scale;
|
|
transition-duration: var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
[data-md-checkbox-box] input:checked:not(:indeterminate) ~ [data-md-checkbox-check],
|
|
[data-md-checkbox-box] input:indeterminate ~ [data-md-checkbox-mixed] {
|
|
opacity: 1;
|
|
scale: 1;
|
|
}
|
|
|
|
[data-md-selection-row][data-md-invalid] [data-md-checkbox-box] input {
|
|
border-color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-selection-row][data-md-invalid] [data-md-checkbox-box] input:is(:checked, :indeterminate) {
|
|
background-color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-selection-row][data-md-invalid] [data-md-checkbox-box] :is([data-md-checkbox-check], [data-md-checkbox-mixed]) {
|
|
color: var(--md-sys-color-on-error);
|
|
}
|
|
|
|
[data-md-checkbox-box] input:disabled {
|
|
border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-checkbox-box] input:disabled:is(:checked, :indeterminate) {
|
|
border-color: transparent;
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-checkbox-box] input:disabled ~ :is([data-md-checkbox-check], [data-md-checkbox-mixed]) {
|
|
color: var(--md-sys-color-surface);
|
|
}
|
|
|
|
[data-md-checkbox] [data-md-selection-support] {
|
|
margin-top: var(--md-sys-measurement-space50);
|
|
color: var(--md-sys-color-error);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-radio] {
|
|
min-width: 0;
|
|
}
|
|
|
|
[data-md-radio-legend] {
|
|
margin-bottom: 12px;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-radio-options] {
|
|
display: grid;
|
|
gap: var(--md-sys-measurement-space200);
|
|
}
|
|
@media (width >= 600px) {
|
|
[data-md-radio][data-md-inline] [data-md-radio-options] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: var(--md-sys-measurement-space300);
|
|
}
|
|
}
|
|
|
|
[data-md-radio] [data-md-selection-support] {
|
|
margin-top: var(--md-sys-measurement-space100);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-radio] [data-md-selection-support][role='alert'] {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-radio-button] {
|
|
position: relative;
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
[data-md-radio-button] > * {
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
[data-md-selection-row]:has([data-md-selection-hint]) [data-md-radio-button] {
|
|
margin-top: var(--md-sys-measurement-space25);
|
|
}
|
|
|
|
[data-md-radio-button]::before {
|
|
inset: -10px;
|
|
}
|
|
|
|
[data-md-radio-button]:has(input:focus-visible)::before {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
}
|
|
|
|
[data-md-radio-button] input {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--md-sys-color-on-surface-variant);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
}
|
|
|
|
[data-md-radio-button] [data-md-radio-dot] {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-primary);
|
|
scale: 0;
|
|
pointer-events: none;
|
|
transition: scale var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
[data-md-radio-button] input:checked {
|
|
border-color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-radio-button] input:checked ~ [data-md-radio-dot] {
|
|
scale: 1;
|
|
}
|
|
|
|
[data-md-selection-row][data-md-invalid] [data-md-radio-button] input {
|
|
border-color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-selection-row][data-md-invalid] [data-md-radio-button] [data-md-radio-dot] {
|
|
background-color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-radio-button] input:disabled {
|
|
border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-radio-button] input:disabled ~ [data-md-radio-dot] {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-toggle] {
|
|
min-width: auto;
|
|
}
|
|
[data-md-switch] {
|
|
position: relative;
|
|
display: grid;
|
|
flex: none;
|
|
width: 52px;
|
|
height: 32px;
|
|
}
|
|
|
|
[data-md-switch] input {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 2px solid var(--md-sys-color-outline);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
}
|
|
|
|
[data-md-switch] input:focus-visible {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
[data-md-switch-handle] {
|
|
--handle: 16px;
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
inset-inline-start: calc(16px - var(--handle) / 2);
|
|
display: grid;
|
|
place-items: center;
|
|
width: var(--handle);
|
|
height: var(--handle);
|
|
translate: 0 -50%;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-outline);
|
|
color: var(--md-sys-color-surface-container-highest);
|
|
pointer-events: none;
|
|
transition-property: inset-inline-start, width, height, background-color;
|
|
transition-duration: var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
[data-md-switch-handle]::before {
|
|
inset: 50% auto auto 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
translate: -50% -50%;
|
|
}
|
|
|
|
[data-md-switch-handle] > svg {
|
|
grid-area: 1 / 1;
|
|
opacity: 0;
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-switch][data-md-icons='both'] [data-md-switch-handle] {
|
|
--handle: 24px;
|
|
}
|
|
|
|
[data-md-switch][data-md-icons='both'] input:not(:checked) ~ [data-md-switch-handle] [data-md-switch-off],
|
|
[data-md-switch][data-md-icons] input:checked ~ [data-md-switch-handle] [data-md-switch-on] {
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-md-switch] input:checked {
|
|
border-color: var(--md-sys-color-primary);
|
|
background-color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-switch] input:checked ~ [data-md-switch-handle] {
|
|
--handle: 24px;
|
|
|
|
inset-inline-start: calc(36px - var(--handle) / 2);
|
|
background-color: var(--md-sys-color-on-primary);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
|
|
[data-md-selection-row]:active [data-md-switch] input:not(:disabled) ~ [data-md-switch-handle] {
|
|
--handle: 28px;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-selection-row]:hover [data-md-switch] input:not(:disabled) ~ [data-md-switch-handle] {
|
|
background-color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-selection-row]:hover [data-md-switch] input:checked:not(:disabled) ~ [data-md-switch-handle] {
|
|
background-color: var(--md-sys-color-primary-container);
|
|
}
|
|
}
|
|
|
|
[data-md-switch] input:focus-visible ~ [data-md-switch-handle],
|
|
[data-md-selection-row]:active [data-md-switch] input:not(:disabled) ~ [data-md-switch-handle] {
|
|
background-color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-switch] input:checked:focus-visible ~ [data-md-switch-handle],
|
|
[data-md-selection-row]:active [data-md-switch] input:checked:not(:disabled) ~ [data-md-switch-handle] {
|
|
background-color: var(--md-sys-color-primary-container);
|
|
}
|
|
|
|
[data-md-switch] input:disabled {
|
|
border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
|
|
background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-switch] input:disabled ~ [data-md-switch-handle] {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-switch] input:disabled:checked {
|
|
border-color: transparent;
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-switch] input:disabled:checked ~ [data-md-switch-handle] {
|
|
background-color: var(--md-sys-color-surface);
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-chip] {
|
|
--chip-disabled-container: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
|
|
--chip-disabled-ink: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
height: 32px;
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
border-radius: var(--md-sys-shape-corner-sm);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
white-space: nowrap;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
transition-property: background-color, border-color, color, box-shadow;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
[data-md-chip]:not([data-md-chip='input']) {
|
|
padding-inline: 15px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
|
|
&:has(:focus-visible)::before {
|
|
opacity: var(--md-sys-state-focus-state-layer-opacity);
|
|
}
|
|
|
|
&:is(:focus-visible, :has(:focus-visible)) {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
&[data-md-disabled]::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-chip]:is([data-md-chip='filter'], [data-md-icon-start]):not([data-md-chip='input']) {
|
|
padding-inline-start: 7px;
|
|
}
|
|
|
|
[data-md-chip][data-md-icon-end] {
|
|
padding-inline-end: 7px;
|
|
}
|
|
|
|
[data-md-chip='assist'] {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-chip='assist']:not([data-md-elevated], [data-md-disabled]):focus-visible {
|
|
border-color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
:is([data-md-chip='suggestion'], [data-md-chip='filter']):not([data-md-elevated], [data-md-disabled], :has(:checked), [aria-pressed='true']):is(:focus-visible, :has(:focus-visible)) {
|
|
border-color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-chip][data-md-elevated] {
|
|
border-color: transparent;
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
box-shadow: var(--md-sys-elevation-1);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-chip][data-md-elevated]:not([data-md-disabled]):hover {
|
|
box-shadow: var(--md-sys-elevation-2);
|
|
}
|
|
}
|
|
[data-md-chip='filter']:is(:has(:checked), [aria-pressed='true']),
|
|
[data-md-chip='input'][data-md-selected] {
|
|
border-color: transparent;
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-chip='filter']:not([data-md-elevated], [data-md-disabled]):is(:has(:checked), [aria-pressed='true']):hover {
|
|
box-shadow: var(--md-sys-elevation-1);
|
|
}
|
|
}
|
|
|
|
[data-md-chip][data-md-disabled] {
|
|
border-color: var(--chip-disabled-container);
|
|
color: var(--chip-disabled-ink);
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-md-chip][data-md-disabled]:is([data-md-elevated], [data-md-selected], :has(:checked), [aria-pressed='true']) {
|
|
border-color: transparent;
|
|
background-color: var(--chip-disabled-container);
|
|
}
|
|
|
|
[data-md-chip][data-md-disabled]:not(a) {
|
|
cursor: not-allowed;
|
|
}
|
|
a[data-md-chip][aria-disabled='true'] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-md-chip-label] {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:is([data-md-chip], [data-md-chip-action]) > [data-md-chip-icon] {
|
|
margin-inline-end: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-chip-trailing] {
|
|
margin-inline-start: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-chip]:not([data-md-chip='input'], [data-md-disabled]) [data-md-chip-icon],
|
|
[data-md-chip='input'][data-md-selected]:not([data-md-disabled]) [data-md-chip-icon],
|
|
:is([data-md-chip='assist'], [data-md-chip='suggestion']):not([data-md-disabled]) [data-md-chip-trailing] {
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-chip][data-md-actionable] [data-md-chip-icon] {
|
|
transition: color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-chip][data-md-actionable]:is(:active, :has(:focus-visible)) [data-md-chip-icon] {
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-chip][data-md-actionable]:hover [data-md-chip-icon] {
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
}
|
|
[data-md-chip-check-slot] {
|
|
display: grid;
|
|
flex-shrink: 0;
|
|
width: 0;
|
|
height: 18px;
|
|
margin-inline-end: var(--md-sys-measurement-space100);
|
|
overflow: hidden;
|
|
transition: width var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);
|
|
}
|
|
|
|
[data-md-chip-check-slot] > * {
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
[data-md-chip-check-slot]:has([data-md-chip-icon]) {
|
|
width: 18px;
|
|
transition: none;
|
|
}
|
|
|
|
[data-md-chip]:is(:has(:checked), [aria-pressed='true']) [data-md-chip-check-slot]:not(:has([data-md-chip-icon])) {
|
|
width: 18px;
|
|
transition-duration: var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
[data-md-chip-check-slot] [data-md-chip-icon] {
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-chip-check] {
|
|
opacity: 0;
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-chip]:is(:has(:checked), [aria-pressed='true']) [data-md-chip-check-slot] [data-md-chip-icon] {
|
|
opacity: 0;
|
|
}
|
|
|
|
[data-md-chip]:is(:has(:checked), [aria-pressed='true']) [data-md-chip-check] {
|
|
opacity: 1;
|
|
transition-duration: var(--md-sys-motion-effects-slow-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-slow);
|
|
}
|
|
|
|
[data-md-chip='input'] {
|
|
isolation: isolate;
|
|
}
|
|
|
|
[data-md-chip='input']:not([data-md-selected], [data-md-disabled]):has([data-md-chip-action]:focus-visible) {
|
|
border-color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-chip='input']:has([data-md-chip-action]:focus-visible) {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
[data-md-chip-action] {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
height: 100%;
|
|
padding-inline: 11px;
|
|
outline: none;
|
|
}
|
|
|
|
[data-md-chip][data-md-icon-start] [data-md-chip-action] {
|
|
padding-inline-start: 7px;
|
|
}
|
|
|
|
[data-md-chip][data-md-avatar] [data-md-chip-action] {
|
|
padding-inline-start: 3px;
|
|
}
|
|
|
|
[data-md-chip][data-md-removable] [data-md-chip-action] {
|
|
padding-inline-end: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
:is(a, button)[data-md-chip-action] {
|
|
cursor: pointer;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
top: 50%;
|
|
height: var(--md-sys-measurement-space600);
|
|
translate: 0 -50%;
|
|
}
|
|
}
|
|
|
|
[data-md-chip]:not([data-md-disabled]) :is(a, button)[data-md-chip-action] {
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -1px;
|
|
z-index: -1;
|
|
border-radius: var(--md-sys-shape-corner-sm);
|
|
background-color: currentColor;
|
|
opacity: 0;
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:hover::before {
|
|
opacity: var(--md-sys-state-hover-state-layer-opacity);
|
|
}
|
|
}
|
|
|
|
&:focus-visible::before {
|
|
opacity: var(--md-sys-state-focus-state-layer-opacity);
|
|
}
|
|
|
|
&:active::before {
|
|
opacity: var(--md-sys-state-pressed-state-layer-opacity);
|
|
}
|
|
}
|
|
|
|
[data-md-chip][data-md-disabled] :is(a, button)[data-md-chip-action] {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
[data-md-chip][data-md-disabled] a[data-md-chip-action] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-md-chip-avatar] {
|
|
flex-shrink: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-inline-end: var(--md-sys-measurement-space100);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
}
|
|
|
|
span[data-md-chip-avatar] {
|
|
display: grid;
|
|
place-items: center;
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
font: var(--md-sys-typescale-label-sm);
|
|
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
img[data-md-chip-avatar] {
|
|
object-fit: cover;
|
|
}
|
|
|
|
[data-md-chip][data-md-disabled] [data-md-chip-avatar] {
|
|
opacity: var(--md-sys-state-disabled-content-opacity);
|
|
}
|
|
[data-md-chip-remove] {
|
|
position: relative;
|
|
display: grid;
|
|
flex-shrink: 0;
|
|
place-items: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-inline-end: 7px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
outline: none;
|
|
cursor: pointer;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -15px;
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&:not(:disabled) {
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -3px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: currentColor;
|
|
opacity: 0;
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:hover::before {
|
|
opacity: var(--md-sys-state-hover-state-layer-opacity);
|
|
}
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
&:focus-visible::before {
|
|
opacity: var(--md-sys-state-focus-state-layer-opacity);
|
|
}
|
|
|
|
&:active::before {
|
|
opacity: var(--md-sys-state-pressed-state-layer-opacity);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-chip-set] {
|
|
min-width: 0;
|
|
}
|
|
|
|
[data-md-chip-set-label] {
|
|
margin-bottom: var(--md-sys-measurement-space100);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-chip-set-row] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-chip-set-hint],
|
|
[data-md-chip-set-errors] > p {
|
|
margin-top: var(--md-sys-measurement-space50);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-chip-set-errors] > p {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-chip-set-scroller] {
|
|
position: relative;
|
|
}
|
|
|
|
[data-md-chip-set-scroller] > [data-md-chip-set-row] {
|
|
--chip-fade-start: 0px;
|
|
--chip-fade-end: 0px;
|
|
|
|
flex-wrap: nowrap;
|
|
margin: calc(-1 * var(--md-sys-measurement-space100)) calc(-1 * var(--md-sys-measurement-space75));
|
|
padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space75);
|
|
overflow-x: auto;
|
|
scroll-padding-inline: var(--md-sys-measurement-space300);
|
|
scrollbar-width: none;
|
|
mask-image: linear-gradient(to right, transparent, black var(--chip-fade-start), black calc(100% - var(--chip-fade-end)), transparent);
|
|
|
|
&:is([dir='rtl'], [dir='rtl'] *) {
|
|
mask-image: linear-gradient(to left, transparent, black var(--chip-fade-start), black calc(100% - var(--chip-fade-end)), transparent);
|
|
}
|
|
|
|
&[data-md-scroll-start] {
|
|
--chip-fade-start: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
&[data-md-scroll-end] {
|
|
--chip-fade-end: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
@media (pointer: fine) {
|
|
scroll-padding-inline: var(--md-sys-measurement-space500);
|
|
}
|
|
}
|
|
|
|
[data-md-chip-scroll] {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
display: none;
|
|
place-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-block: auto;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-surface-container-high);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
box-shadow: var(--md-sys-elevation-1);
|
|
}
|
|
|
|
[data-md-chip-scroll='start'] {
|
|
inset-inline-start: 0;
|
|
}
|
|
|
|
[data-md-chip-scroll='end'] {
|
|
inset-inline-end: 0;
|
|
}
|
|
@media (pointer: fine) {
|
|
[data-md-chip-set-row][data-md-scroll-start] ~ [data-md-chip-scroll='start'],
|
|
[data-md-chip-set-row][data-md-scroll-end] ~ [data-md-chip-scroll='end'] {
|
|
display: grid;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-choices-empty] {
|
|
padding: 12px var(--md-sys-measurement-space200);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-slider] {
|
|
--slider-active: var(--md-color, var(--md-sys-color-primary));
|
|
--slider-inactive: var(--md-container, var(--md-sys-color-secondary-container));
|
|
--slider-on-active: var(--md-on-color, var(--md-sys-color-on-primary));
|
|
--slider-on-inactive: var(--md-on-container, var(--md-sys-color-on-secondary-container));
|
|
--slider-disabled-active: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
--slider-disabled-inactive: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
|
|
--slider-across: 48px;
|
|
--slider-track: 16px;
|
|
--slider-handle: 44px;
|
|
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
[data-md-slider][data-md-size='sm'] {
|
|
--slider-track: 24px;
|
|
}
|
|
|
|
[data-md-slider][data-md-size='md'] {
|
|
--slider-across: 52px;
|
|
--slider-track: 40px;
|
|
--slider-handle: 52px;
|
|
}
|
|
|
|
[data-md-slider][data-md-size='lg'] {
|
|
--slider-across: 68px;
|
|
--slider-track: 56px;
|
|
--slider-handle: 68px;
|
|
}
|
|
|
|
[data-md-slider][data-md-size='xl'] {
|
|
--slider-across: 108px;
|
|
--slider-track: 96px;
|
|
--slider-handle: 108px;
|
|
}
|
|
[data-md-slider][data-md-color='primary'] {
|
|
--slider-inactive: var(--md-sys-color-secondary-container);
|
|
--slider-on-inactive: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
[data-md-slider]:has([data-md-slider-input]:disabled) {
|
|
--slider-active: var(--slider-disabled-active);
|
|
--slider-inactive: var(--slider-disabled-inactive);
|
|
--slider-on-active: var(--slider-disabled-inactive);
|
|
--slider-on-inactive: var(--slider-disabled-active);
|
|
}
|
|
|
|
[data-md-slider][data-md-orientation='vertical'] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: fit-content;
|
|
}
|
|
|
|
[data-md-slider-label] {
|
|
display: block;
|
|
margin-bottom: var(--md-sys-measurement-space100);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-slider-control] {
|
|
position: relative;
|
|
height: var(--slider-across);
|
|
cursor: pointer;
|
|
touch-action: pan-y;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
[data-md-slider-control]:has(:disabled) {
|
|
cursor: not-allowed;
|
|
}
|
|
[data-md-slider][data-md-orientation='vertical'] [data-md-slider-control] {
|
|
flex: auto;
|
|
width: var(--slider-across);
|
|
height: 192px;
|
|
min-height: 0;
|
|
container-type: size;
|
|
touch-action: pan-x;
|
|
}
|
|
[data-md-slider][data-md-value-label='always'] [data-md-slider-control] {
|
|
margin-top: var(--md-sys-measurement-space600);
|
|
}
|
|
|
|
[data-md-slider][data-md-value-label='always'][data-md-orientation='vertical'] [data-md-slider-control] {
|
|
margin-top: 0;
|
|
margin-inline-start: var(--md-sys-measurement-space600);
|
|
}
|
|
|
|
[data-md-slider-drawing] {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
inset-inline: var(--md-sys-measurement-space25);
|
|
pointer-events: none;
|
|
|
|
&:is([dir='rtl'], [dir='rtl'] *) {
|
|
scale: -1 1;
|
|
}
|
|
}
|
|
[data-md-slider][data-md-orientation='vertical'] [data-md-slider-drawing] {
|
|
inset: auto;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: calc(100cqh - var(--md-sys-measurement-space50));
|
|
height: 100cqw;
|
|
translate: -50% -50%;
|
|
rotate: -90deg;
|
|
scale: none;
|
|
}
|
|
|
|
[data-md-slider-track] {
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
top: 50%;
|
|
height: var(--slider-track);
|
|
translate: 0 -50%;
|
|
}
|
|
|
|
[data-md-slider-segment] {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
background-color: var(--slider-inactive);
|
|
}
|
|
|
|
[data-md-slider-segment='active'] {
|
|
background-color: var(--slider-active);
|
|
}
|
|
|
|
:is([data-md-slider-tick], [data-md-slider-stop]) {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 4px;
|
|
height: 4px;
|
|
translate: -50% -50%;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--slider-on-inactive);
|
|
}
|
|
|
|
[data-md-slider-tick][data-md-active] {
|
|
background-color: var(--slider-on-active);
|
|
}
|
|
[data-md-slider]:has([data-md-slider-input]:disabled) [data-md-slider-icon] {
|
|
color: var(--slider-disabled-active);
|
|
}
|
|
|
|
[data-md-slider-icon] {
|
|
position: absolute;
|
|
top: 50%;
|
|
display: flex;
|
|
translate: 0 -50%;
|
|
color: var(--slider-on-inactive);
|
|
|
|
&[data-md-active] {
|
|
color: var(--slider-on-active);
|
|
}
|
|
|
|
&:is([dir='rtl'], [dir='rtl'] *) {
|
|
scale: -1 1;
|
|
}
|
|
}
|
|
[data-md-slider][data-md-orientation='vertical'] [data-md-slider-icon] {
|
|
rotate: 90deg;
|
|
scale: none;
|
|
}
|
|
|
|
[data-md-slider-handle] {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
width: 0;
|
|
}
|
|
|
|
[data-md-slider-thumb] {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 4px;
|
|
height: var(--slider-handle);
|
|
translate: -50% -50%;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--slider-active);
|
|
outline-offset: 2px;
|
|
transition-property: width, height;
|
|
transition-duration: var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
:is([data-md-pressed], [data-md-focused]) > [data-md-slider-thumb] {
|
|
width: 2px;
|
|
}
|
|
|
|
[data-md-focused] > [data-md-slider-thumb] {
|
|
height: calc(var(--slider-handle) - 6px);
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
}
|
|
|
|
[data-md-slider-value-anchor] {
|
|
position: absolute;
|
|
bottom: calc(50% + var(--slider-handle) / 2 + var(--md-sys-measurement-space50));
|
|
left: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
justify-content: center;
|
|
translate: -50% 0;
|
|
|
|
&:is([dir='rtl'], [dir='rtl'] *) {
|
|
scale: -1 1;
|
|
}
|
|
}
|
|
|
|
[data-md-slider][data-md-orientation='vertical'] [data-md-slider-value-anchor] {
|
|
scale: none;
|
|
}
|
|
|
|
[data-md-slider-value] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: var(--md-sys-measurement-space600);
|
|
height: 44px;
|
|
padding-inline: var(--md-sys-measurement-space125);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-inverse-surface);
|
|
color: var(--md-sys-color-inverse-on-surface);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
white-space: nowrap;
|
|
transform-origin: bottom;
|
|
transition-property: opacity, scale;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
[data-md-slider][data-md-orientation='vertical'] [data-md-slider-value] {
|
|
transform-origin: center;
|
|
rotate: 90deg;
|
|
}
|
|
|
|
[data-md-slider][data-md-value-label='drag'] [data-md-slider-value] {
|
|
opacity: 0;
|
|
scale: 0.75;
|
|
}
|
|
|
|
[data-md-slider][data-md-value-label='drag'] :is([data-md-pressed], [data-md-focused]) [data-md-slider-value] {
|
|
opacity: 1;
|
|
scale: 1;
|
|
}
|
|
|
|
[data-md-slider-input] {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
appearance: none;
|
|
background: transparent;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
accent-color: var(--slider-active);
|
|
}
|
|
|
|
[data-md-slider-hint],
|
|
[data-md-slider-errors] > p {
|
|
margin-top: var(--md-sys-measurement-space50);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-slider-errors] > p {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
@media (scripting: none) {
|
|
:is([data-md-slider], [data-md-slider][data-md-orientation]) [data-md-slider-control] {
|
|
height: auto;
|
|
cursor: auto;
|
|
}
|
|
|
|
[data-md-slider-control] > :not(:last-child) {
|
|
margin-block-end: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-slider-drawing] {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-slider-input] {
|
|
position: static;
|
|
display: block;
|
|
width: 100%;
|
|
height: 24px;
|
|
appearance: auto;
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-search] {
|
|
--search-height: 56px;
|
|
--search-width: 100%;
|
|
--search-open-width: 720px;
|
|
|
|
position: relative;
|
|
}
|
|
[data-md-search]:is([data-md-open], [data-md-full-screen], :has(> [data-md-search-view].md-transition)) {
|
|
z-index: 50;
|
|
}
|
|
[data-md-search-scrim] {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
|
|
transition-property: opacity;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@starting-style {
|
|
[data-md-search-scrim] {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
[data-md-search]:is(:not([data-md-open]), [data-md-full-screen]) > [data-md-search-scrim] {
|
|
opacity: 0;
|
|
}
|
|
|
|
[data-md-search-bar] {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space50);
|
|
width: min(100%, var(--search-width));
|
|
height: var(--search-height);
|
|
padding-inline: 12px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-surface-container-high);
|
|
color: var(--md-sys-color-on-surface);
|
|
cursor: text;
|
|
transition-property: background-color, width, padding-inline;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
[data-md-search][data-md-open] [data-md-search-bar] {
|
|
width: min(100%, var(--search-open-width));
|
|
padding-inline: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-search]:not([data-md-open]) [data-md-search-bar]:hover {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-surface-container-high));
|
|
}
|
|
}
|
|
|
|
[data-md-search][data-md-open] [data-md-search-bar] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
[data-md-search-leading],
|
|
[data-md-search-clear] {
|
|
display: grid;
|
|
flex: none;
|
|
place-items: center;
|
|
width: var(--md-sys-measurement-space600);
|
|
height: var(--md-sys-measurement-space600);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
}
|
|
|
|
[data-md-search-leading] {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-search-clear] {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-md-search-bar] button {
|
|
outline: none;
|
|
transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-search-bar] button:hover {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
|
|
}
|
|
}
|
|
|
|
[data-md-search-bar] button:focus-visible {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: -3px;
|
|
}
|
|
[data-md-search-field] {
|
|
display: flex;
|
|
flex: 1 1 0%;
|
|
min-width: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
[data-md-search-input] {
|
|
flex: 1 1 0%;
|
|
min-width: 0;
|
|
height: 100%;
|
|
padding-inline: var(--md-sys-measurement-space50);
|
|
appearance: none;
|
|
background: transparent;
|
|
color: var(--md-sys-color-on-surface);
|
|
caret-color: var(--md-sys-color-primary);
|
|
outline: none;
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
}
|
|
|
|
[data-md-search-input]::-webkit-search-cancel-button,
|
|
[data-md-search-input]::-webkit-search-decoration {
|
|
appearance: none;
|
|
display: none;
|
|
}
|
|
|
|
[data-md-search-bar]:has([data-md-search-input]:placeholder-shown) [data-md-search-clear] {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-search-trailing] {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space50);
|
|
padding-inline-end: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-search][data-md-open] [data-md-search-trailing] {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-search-view] {
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: var(--search-open-width);
|
|
max-height: min(640px, 70dvh);
|
|
padding-top: var(--search-height);
|
|
overflow: hidden;
|
|
border-radius: var(--md-sys-shape-corner-xl);
|
|
background-color: var(--md-sys-color-surface-container-high);
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
transform-origin: top;
|
|
transition-property: opacity, scale;
|
|
transition-duration: var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
@starting-style {
|
|
[data-md-search-view] {
|
|
opacity: 0;
|
|
scale: 1 0.9;
|
|
}
|
|
}
|
|
[data-md-search]:not([data-md-open]) > [data-md-search-view] {
|
|
opacity: 0;
|
|
scale: 1 0.9;
|
|
}
|
|
[data-md-search-view]:has([data-md-search-results], [data-md-search-suggestions]) {
|
|
min-height: 240px;
|
|
}
|
|
[data-md-search-results],
|
|
[data-md-search-suggestions] {
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
padding-block: var(--md-sys-measurement-space100);
|
|
}
|
|
[data-md-search][data-md-trigger='icon'] {
|
|
flex: none;
|
|
width: var(--md-sys-measurement-space600);
|
|
height: var(--md-sys-measurement-space600);
|
|
}
|
|
|
|
[data-md-search-trigger] {
|
|
display: grid;
|
|
place-items: center;
|
|
width: var(--md-sys-measurement-space600);
|
|
height: var(--md-sys-measurement-space600);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-search-trigger]:hover {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
|
|
}
|
|
}
|
|
|
|
[data-md-search-trigger]:focus-visible {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent);
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: -3px;
|
|
}
|
|
|
|
[data-md-search-trigger]:active {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-search][data-md-trigger='icon']:not([data-md-open], [data-md-full-screen]) [data-md-search-bar] {
|
|
display: none;
|
|
}
|
|
[data-md-search][data-md-full-screen] [data-md-search-bar] {
|
|
position: fixed;
|
|
inset: 0 0 auto;
|
|
width: auto;
|
|
height: calc(var(--md-sys-measurement-space900) + var(--material-safe-top, env(safe-area-inset-top)));
|
|
padding-top: var(--material-safe-top, env(safe-area-inset-top));
|
|
padding-inline: var(--md-sys-measurement-space50);
|
|
border-radius: 0;
|
|
}
|
|
[data-md-search][data-md-full-screen]:not([data-md-open]) [data-md-search-bar] {
|
|
opacity: 0;
|
|
background-color: transparent;
|
|
transition-property: opacity;
|
|
transition-duration: var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
[data-md-search][data-md-full-screen] [data-md-search-view] {
|
|
position: fixed;
|
|
inset: 0;
|
|
max-width: none;
|
|
max-height: none;
|
|
padding-top: calc(var(--md-sys-measurement-space900) + var(--material-safe-top, env(safe-area-inset-top)));
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
[data-md-search-empty] {
|
|
padding: 12px var(--md-sys-measurement-space200);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-list-item] {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space200);
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-list-item][data-md-lines='1'] {
|
|
min-height: 56px;
|
|
padding-block: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-list-item][data-md-lines='2'] {
|
|
min-height: 72px;
|
|
padding-block: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-list-item][data-md-lines='3'] {
|
|
min-height: 88px;
|
|
padding-block: 12px;
|
|
align-items: flex-start;
|
|
}
|
|
:where([data-md-list-row]) {
|
|
--md-list-row-fill: transparent;
|
|
}
|
|
[data-md-list='segmented'] > [data-md-list-item] {
|
|
--md-list-row-fill: var(--md-sys-color-surface-container);
|
|
|
|
background-color: var(--md-list-row-fill);
|
|
}
|
|
|
|
[data-md-list-item][data-md-selected] {
|
|
--md-list-row-fill: var(--md-sys-color-secondary-container);
|
|
|
|
background-color: var(--md-list-row-fill);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
[data-md-list-row][data-md-selected]:not([data-md-card], [data-md-list-item]) {
|
|
--md-list-row-fill: var(--md-sys-color-secondary-container);
|
|
|
|
background-color: var(--md-list-row-fill);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-list-item][aria-disabled='true'] {
|
|
pointer-events: none;
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-list-item]:not([data-md-selected], [aria-disabled='true']) :is([data-md-list-item-overline], [data-md-list-item-description], [data-md-list-item-trailing], [data-md-list-item-icon]) {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-list-item-leading],
|
|
[data-md-list-item-end] {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
}
|
|
|
|
[data-md-list-item-end] {
|
|
gap: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-list-item-video] {
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
border-radius: var(--md-sys-shape-corner-sm);
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
|
|
& > * {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
[data-md-list-item-video][data-md-size='sm'] {
|
|
width: 100px;
|
|
height: 56px;
|
|
}
|
|
|
|
[data-md-list-item-video][data-md-size='lg'] {
|
|
width: 114px;
|
|
height: 64px;
|
|
}
|
|
|
|
[data-md-list-item-avatar] {
|
|
flex-shrink: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
object-fit: cover;
|
|
}
|
|
|
|
span[data-md-list-item-avatar] {
|
|
display: grid;
|
|
place-items: center;
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
}
|
|
|
|
[data-md-list-item-image] {
|
|
flex-shrink: 0;
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: var(--md-sys-shape-corner-sm);
|
|
object-fit: cover;
|
|
}
|
|
|
|
[data-md-list-item-content] {
|
|
min-width: 0;
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
[data-md-list-item-overline] {
|
|
font: var(--md-sys-typescale-label-sm);
|
|
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
|
|
}
|
|
|
|
[data-md-list-item-title] {
|
|
display: block;
|
|
overflow: hidden;
|
|
outline: none;
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
[data-md-list-item-description] {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
}
|
|
|
|
[data-md-list-item-trailing] {
|
|
flex-shrink: 0;
|
|
font: var(--md-sys-typescale-label-sm);
|
|
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
|
|
}
|
|
|
|
[data-md-list][data-md-dividers] > [data-md-list-item]:not(:last-child)::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset-inline: var(--md-sys-measurement-space200);
|
|
bottom: 0;
|
|
height: 1px;
|
|
background-color: var(--md-sys-color-outline-variant);
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-md-list-row] {
|
|
cursor: pointer;
|
|
transition-property: background-color, border-radius;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast), var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-list-row]:not([data-md-card]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):hover)) {
|
|
background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-list-row-fill, transparent));
|
|
}
|
|
}
|
|
|
|
[data-md-list-row]:not([data-md-card]):has([data-md-list-open]:focus-visible) {
|
|
background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--md-list-row-fill, transparent));
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: -3px;
|
|
}
|
|
|
|
[data-md-list-row]:not([data-md-card]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):active)) {
|
|
background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--md-list-row-fill, transparent));
|
|
}
|
|
|
|
[data-md-list-row] [data-md-list-open]:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
[data-md-list='segmented'] > [data-md-list-item] {
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
}
|
|
|
|
[data-md-list='segmented'] > [data-md-list-item]:first-child {
|
|
border-start-start-radius: var(--md-sys-shape-corner-lg);
|
|
border-start-end-radius: var(--md-sys-shape-corner-lg);
|
|
}
|
|
|
|
[data-md-list='segmented'] > [data-md-list-item]:last-child {
|
|
border-end-start-radius: var(--md-sys-shape-corner-lg);
|
|
border-end-end-radius: var(--md-sys-shape-corner-lg);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-list='segmented'] > [data-md-list-item][data-md-list-row]:hover {
|
|
border-radius: var(--md-sys-shape-corner-md);
|
|
}
|
|
}
|
|
|
|
[data-md-list='segmented'] > [data-md-list-item]:is([data-md-selected], [data-md-list-row]:active, [data-md-list-row]:has([data-md-list-open]:focus-visible)) {
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-table] {
|
|
--cell-x: 12px;
|
|
--cell-y: var(--md-sys-measurement-space200);
|
|
|
|
position: relative;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
}
|
|
|
|
[data-md-table][data-md-size='xs'] {
|
|
--cell-x: var(--md-sys-measurement-space100);
|
|
--cell-y: var(--md-sys-measurement-space100);
|
|
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
}
|
|
|
|
[data-md-table][data-md-dense] {
|
|
--cell-y: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-table][data-md-size='xs'][data-md-dense] {
|
|
--cell-y: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-table] :where(th, td) {
|
|
padding: var(--cell-y) var(--cell-x);
|
|
text-align: start;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
[data-md-table] :where(thead th) {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
|
white-space: nowrap;
|
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
[data-md-table][data-md-size='xs'] :where(thead th) {
|
|
font: var(--md-sys-typescale-label-md);
|
|
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
|
}
|
|
|
|
[data-md-table] :where(tbody tr) {
|
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
[data-md-table] :where(tbody tr:last-child) {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
[data-md-table] :where(tbody tr:is([aria-selected='true'], [data-md-selected])) {
|
|
--md-list-row-fill: var(--md-sys-color-secondary-container);
|
|
|
|
background-color: var(--md-list-row-fill);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-sort-header-button] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space50);
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-md-sort-header][data-md-active] [data-md-sort-header-button] {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-sort-header-button]:hover {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
}
|
|
|
|
[data-md-sort-header-arrow] {
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-sort-header]:not([data-md-active]) [data-md-sort-header-arrow] {
|
|
opacity: 0;
|
|
}
|
|
|
|
[data-md-sort-header]:not([data-md-active]) [data-md-sort-header-button]:focus-visible [data-md-sort-header-arrow] {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-sort-header]:not([data-md-active]) [data-md-sort-header-button]:hover [data-md-sort-header-arrow] {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-pagination] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-pagination-summary] {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-pagination-steps] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-pagination-step] {
|
|
display: grid;
|
|
place-items: center;
|
|
width: var(--md-sys-measurement-space500);
|
|
height: var(--md-sys-measurement-space500);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
:is(a, button)[data-md-pagination-step] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-md-pagination-step][aria-current='page'] {
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-pagination-step][aria-disabled='true'] {
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-pagination-page],
|
|
[data-md-pagination-range] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-pagination-compact] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-modal] {
|
|
margin: auto;
|
|
max-width: 560px;
|
|
min-width: 280px;
|
|
width: calc(100vw - 48px);
|
|
max-height: calc(100dvh - 48px);
|
|
overflow: visible;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
[data-md-modal],
|
|
[data-md-timepicker-dialog],
|
|
[data-md-datepicker-picker]:modal {
|
|
opacity: 1;
|
|
scale: 1;
|
|
transition-property: opacity, scale;
|
|
transition-duration: var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
@starting-style {
|
|
[data-md-modal],
|
|
[data-md-timepicker-dialog],
|
|
[data-md-datepicker-picker]:modal {
|
|
opacity: 0;
|
|
scale: 0.95;
|
|
}
|
|
}
|
|
|
|
[data-md-modal]::backdrop,
|
|
[data-md-timepicker-dialog]::backdrop,
|
|
[data-md-datepicker-picker]:modal::backdrop {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-modal][data-md-fullscreen] {
|
|
margin: 0;
|
|
width: 100%;
|
|
max-width: none;
|
|
min-width: 0;
|
|
height: 100dvh;
|
|
max-height: none;
|
|
}
|
|
}
|
|
|
|
[data-md-modal-box] {
|
|
display: flex;
|
|
max-height: inherit;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border-radius: var(--md-sys-shape-corner-xl);
|
|
background-color: var(--md-sys-color-surface-container-high);
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-modal][data-md-fullscreen] > [data-md-modal-box] {
|
|
height: 100%;
|
|
border-radius: var(--md-sys-shape-corner-none);
|
|
padding-top: var(--material-safe-top, env(safe-area-inset-top));
|
|
}
|
|
}
|
|
[data-md-modal-bar] {
|
|
display: flex;
|
|
height: var(--md-sys-measurement-space700);
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space50);
|
|
padding-inline: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-modal-bar] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-modal-bar-title] {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font: var(--md-sys-typescale-title-lg);
|
|
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
|
}
|
|
|
|
[data-md-modal-head] {
|
|
flex-shrink: 0;
|
|
padding-inline: var(--md-sys-measurement-space300);
|
|
padding-top: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
[data-md-modal-head]:has(+ [data-md-modal-body]) {
|
|
padding-bottom: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-modal-head]:has(> [data-md-icon]) {
|
|
text-align: center;
|
|
}
|
|
@media (width < 600px) {
|
|
[data-md-modal][data-md-fullscreen] > [data-md-modal-box] > [data-md-modal-head]:not(:has(> [data-md-icon], > [data-md-modal-subtitle])) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-modal-head] > [data-md-icon] {
|
|
margin-inline: auto;
|
|
margin-bottom: var(--md-sys-measurement-space200);
|
|
color: var(--md-sys-color-secondary);
|
|
}
|
|
|
|
[data-md-modal-title] {
|
|
font: var(--md-sys-typescale-headline-sm);
|
|
letter-spacing: var(--md-sys-typescale-headline-sm-tracking);
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-modal][data-md-fullscreen] > [data-md-modal-box] > [data-md-modal-head]:not(:has(> [data-md-icon])) > [data-md-modal-title] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-modal-subtitle] {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
}
|
|
|
|
[data-md-modal-title] ~ [data-md-modal-subtitle],
|
|
[data-md-modal-head] > [data-md-icon] ~ [data-md-modal-subtitle] {
|
|
margin-top: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-modal][data-md-fullscreen] > [data-md-modal-box] > [data-md-modal-head]:not(:has(> [data-md-icon])) > [data-md-modal-subtitle] {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
[data-md-modal-body] {
|
|
min-height: 0;
|
|
flex: 1 1 0%;
|
|
overflow-y: auto;
|
|
padding-inline: var(--md-sys-measurement-space300);
|
|
padding-top: var(--md-sys-measurement-space300);
|
|
padding-bottom: var(--md-sys-measurement-space300);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
outline: none;
|
|
}
|
|
|
|
[data-md-modal-body]:focus-visible {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: -3px;
|
|
}
|
|
|
|
[data-md-modal-head] ~ [data-md-modal-body] {
|
|
padding-top: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-modal][data-md-fullscreen] > [data-md-modal-box] > [data-md-modal-head]:not(:has(> [data-md-icon], > [data-md-modal-subtitle])) ~ [data-md-modal-body] {
|
|
padding-top: var(--md-sys-measurement-space200);
|
|
}
|
|
}
|
|
|
|
[data-md-modal-body]:has(~ [data-md-modal-actions]) {
|
|
padding-bottom: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-modal-actions] {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--md-sys-measurement-space100);
|
|
padding-inline: var(--md-sys-measurement-space300);
|
|
padding-top: var(--md-sys-measurement-space300);
|
|
padding-bottom: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
[data-md-modal-body] ~ [data-md-modal-actions] {
|
|
padding-top: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-modal][data-md-fullscreen] > [data-md-modal-box] > [data-md-modal-actions] {
|
|
min-height: var(--md-sys-measurement-space700);
|
|
padding-top: var(--md-sys-measurement-space100);
|
|
padding-bottom: var(--md-sys-measurement-space100);
|
|
}
|
|
}
|
|
[data-md-modal-head],
|
|
[data-md-modal-bar],
|
|
[data-md-modal-actions] {
|
|
position: relative;
|
|
}
|
|
|
|
[data-md-modal-head]::after,
|
|
[data-md-modal-bar]::after,
|
|
[data-md-modal-actions]::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
height: 1px;
|
|
background-color: var(--md-sys-color-outline-variant);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-modal-head]::after,
|
|
[data-md-modal-bar]::after {
|
|
bottom: 0;
|
|
}
|
|
|
|
[data-md-modal-actions]::before {
|
|
top: 0;
|
|
}
|
|
|
|
dialog[data-md-overflow-top] > [data-md-modal-box] > [data-md-modal-head][data-md-modal-divider]::after,
|
|
dialog[data-md-overflow-top] > [data-md-modal-box] > [data-md-modal-bar][data-md-modal-divider]::after,
|
|
dialog[data-md-overflow-bottom] > [data-md-modal-box] > [data-md-modal-actions][data-md-modal-divider]::before,
|
|
[data-md-modal-head][data-md-modal-divider][data-md-separator]::after,
|
|
[data-md-modal-bar][data-md-modal-divider][data-md-separator]::after,
|
|
[data-md-modal-actions][data-md-modal-divider][data-md-separator]::before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-datepicker-support] {
|
|
--datepicker-pad: var(--md-sys-measurement-space200);
|
|
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
}
|
|
|
|
[data-md-datepicker-support] > * {
|
|
padding: var(--md-sys-measurement-space50) var(--datepicker-pad) 0;
|
|
}
|
|
|
|
[data-md-datepicker-support][data-md-size='sm'] {
|
|
--datepicker-pad: 12px;
|
|
}
|
|
|
|
[data-md-datepicker-support][data-md-size='xs'] {
|
|
--datepicker-pad: var(--md-sys-measurement-space125);
|
|
}
|
|
|
|
[data-md-datepicker-error] {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-datepicker-picker] {
|
|
inset: auto;
|
|
width: 360px;
|
|
max-width: calc(100vw - var(--md-sys-measurement-space200));
|
|
max-height: calc(100dvh - var(--md-sys-measurement-space200));
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: visible;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-datepicker-picker]:popover-open {
|
|
top: anchor(bottom);
|
|
left: anchor(left);
|
|
margin-block: var(--md-sys-measurement-space50);
|
|
position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
|
|
opacity: 1;
|
|
transition-property: opacity;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@starting-style {
|
|
[data-md-datepicker-picker]:popover-open {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
[data-md-datepicker-picker]:modal {
|
|
inset: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
[data-md-datepicker-surface] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: inherit;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
background-color: var(--md-sys-color-surface-container-high);
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
outline: none;
|
|
}
|
|
|
|
[data-md-datepicker-picker][data-md-presentation='modal'] [data-md-datepicker-surface] {
|
|
border-radius: var(--md-sys-shape-corner-xl);
|
|
}
|
|
[data-md-datepicker-picker][data-md-presentation='full'] {
|
|
inset: 0;
|
|
width: 100vw;
|
|
max-width: none;
|
|
height: 100dvh;
|
|
max-height: none;
|
|
margin: 0;
|
|
}
|
|
|
|
[data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-surface] {
|
|
height: 100%;
|
|
max-height: none;
|
|
padding-block: var(--material-safe-top, env(safe-area-inset-top)) var(--material-safe-bottom, env(safe-area-inset-bottom));
|
|
overflow: hidden;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-md-datepicker-full] {
|
|
flex: none;
|
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-datepicker-app-bar] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--md-sys-measurement-space100);
|
|
height: 64px;
|
|
padding-inline: var(--md-sys-measurement-space50) 12px;
|
|
}
|
|
|
|
[data-md-datepicker-app-bar-actions] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-datepicker-full-headline] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--md-sys-measurement-space50);
|
|
padding: 0 var(--md-sys-measurement-space300) var(--md-sys-measurement-space200);
|
|
}
|
|
[data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-calendar] {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
[data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-grid] thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
background-color: var(--md-sys-color-surface-container-high);
|
|
}
|
|
|
|
[data-md-datepicker-picker][data-md-presentation='full'] [data-md-datepicker-day] {
|
|
scroll-margin-block: 48px;
|
|
}
|
|
|
|
[data-md-datepicker-month-label] {
|
|
padding: 20px 0 var(--md-sys-measurement-space100);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
|
text-align: start;
|
|
}
|
|
|
|
[data-md-datepicker-header] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
flex: none;
|
|
min-height: 120px;
|
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-datepicker-header][data-md-range] {
|
|
min-height: 128px;
|
|
}
|
|
|
|
[data-md-datepicker-title] {
|
|
padding: var(--md-sys-measurement-space200) 12px 0 var(--md-sys-measurement-space300);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
}
|
|
|
|
[data-md-datepicker-headline-row] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--md-sys-measurement-space100);
|
|
padding: 0 12px 12px var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
[data-md-datepicker-headline] {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font: var(--md-sys-typescale-headline-lg);
|
|
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
|
|
}
|
|
|
|
[data-md-datepicker-header][data-md-range] [data-md-datepicker-headline] {
|
|
font: var(--md-sys-typescale-title-lg);
|
|
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
|
}
|
|
|
|
[data-md-datepicker-nav] {
|
|
display: flex;
|
|
flex: none;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 56px;
|
|
padding-inline: 12px;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-datepicker-nav][data-md-docked] {
|
|
height: 64px;
|
|
padding-inline: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-datepicker-stepper],
|
|
[data-md-datepicker-arrows] {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
[data-md-datepicker-arrows][data-md-concealed] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
[data-md-datepicker-menu-button] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space100);
|
|
height: 40px;
|
|
padding-inline: 12px var(--md-sys-measurement-space100);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-md-datepicker-nav][data-md-docked] [data-md-datepicker-menu-button] {
|
|
padding-inline: var(--md-sys-measurement-space100) var(--md-sys-measurement-space50);
|
|
gap: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-datepicker-menu-arrow] {
|
|
transition: rotate var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-datepicker-menu-button][aria-expanded='true'] [data-md-datepicker-menu-arrow] {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
[data-md-datepicker-grid] {
|
|
width: calc(100% - 24px);
|
|
margin-inline: 12px;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
[data-md-datepicker-grid] th {
|
|
height: 48px;
|
|
padding: 0;
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
text-align: center;
|
|
}
|
|
|
|
[data-md-datepicker-day] {
|
|
--datepicker-layer: var(--md-sys-color-on-surface-variant);
|
|
|
|
position: relative;
|
|
height: 48px;
|
|
padding: 0;
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
outline: none;
|
|
isolation: isolate;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
[data-md-datepicker-day] > span {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: auto;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
isolation: isolate;
|
|
transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
[data-md-datepicker-day] > span::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
border-radius: inherit;
|
|
background-color: var(--datepicker-layer);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-datepicker-day]:hover > span::before {
|
|
opacity: var(--md-sys-state-hover-state-layer-opacity);
|
|
}
|
|
}
|
|
|
|
[data-md-datepicker-day]:focus-visible > span::before {
|
|
opacity: var(--md-sys-state-focus-state-layer-opacity);
|
|
}
|
|
|
|
[data-md-datepicker-day]:active > span::before {
|
|
opacity: var(--md-sys-state-pressed-state-layer-opacity);
|
|
}
|
|
|
|
[data-md-datepicker-day]:is([aria-disabled='true'], [data-md-blank]) > span::before {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-datepicker-day]:focus-visible > span {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
[data-md-datepicker-day][data-md-blank] {
|
|
cursor: default;
|
|
}
|
|
[data-md-datepicker-day][data-md-outside] {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-datepicker-day][data-md-today] {
|
|
--datepicker-layer: var(--md-sys-color-primary);
|
|
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-datepicker-day][data-md-today] > span {
|
|
box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
|
|
}
|
|
[data-md-datepicker-day][data-md-between]::before,
|
|
[data-md-datepicker-day][data-md-start]::before,
|
|
[data-md-datepicker-day][data-md-end]::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset-block: var(--md-sys-measurement-space50);
|
|
inset-inline: 0;
|
|
z-index: -1;
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
}
|
|
|
|
[data-md-datepicker-day][data-md-start]::before {
|
|
inset-inline-start: 50%;
|
|
}
|
|
|
|
[data-md-datepicker-day][data-md-end]::before {
|
|
inset-inline-end: 50%;
|
|
}
|
|
|
|
[data-md-datepicker-day][data-md-between] {
|
|
--datepicker-layer: var(--md-sys-color-on-secondary-container);
|
|
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
|
|
[data-md-datepicker-day][data-md-selected] {
|
|
--datepicker-layer: var(--md-sys-color-on-primary);
|
|
|
|
color: var(--md-sys-color-on-primary);
|
|
}
|
|
|
|
[data-md-datepicker-day][data-md-selected] > span {
|
|
background-color: var(--md-sys-color-primary);
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-md-datepicker-day][aria-disabled='true'] {
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
cursor: default;
|
|
}
|
|
|
|
[data-md-datepicker-day][aria-disabled='true'][data-md-today] > span {
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-datepicker-years] {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
align-content: start;
|
|
justify-items: center;
|
|
row-gap: var(--md-sys-measurement-space200);
|
|
height: 335px;
|
|
padding: var(--md-sys-measurement-space100) 12px;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
[data-md-datepicker-year] {
|
|
width: 72px;
|
|
height: 36px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
cursor: pointer;
|
|
scroll-margin-block: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-datepicker-year][data-md-current] {
|
|
color: var(--md-sys-color-primary);
|
|
box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-datepicker-year][aria-selected='true'] {
|
|
background-color: var(--md-sys-color-primary);
|
|
color: var(--md-sys-color-on-primary);
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-md-datepicker-menu] {
|
|
height: 344px;
|
|
padding-block: var(--md-sys-measurement-space100);
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
border-top: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
[data-md-datepicker-option] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space200);
|
|
width: 100%;
|
|
height: 48px;
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
text-align: start;
|
|
cursor: pointer;
|
|
}
|
|
[data-md-datepicker-option]:focus-visible {
|
|
outline-offset: -3px;
|
|
}
|
|
|
|
[data-md-datepicker-option][aria-selected='true'] {
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
}
|
|
|
|
[data-md-datepicker-option][aria-disabled='true'] {
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
cursor: default;
|
|
}
|
|
|
|
[data-md-datepicker-check] {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-datepicker-option]:not([aria-selected='true']) [data-md-datepicker-check] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
[data-md-datepicker-entry] {
|
|
padding: var(--md-sys-measurement-space125) var(--md-sys-measurement-space300) var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-datepicker-entry-fields][data-md-range] {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-datepicker-actions] {
|
|
display: flex;
|
|
flex: none;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--md-sys-measurement-space100);
|
|
padding: var(--md-sys-measurement-space50) var(--md-sys-measurement-space75) var(--md-sys-measurement-space100) 12px;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
@property --timepicker-angle {
|
|
syntax: '<angle>';
|
|
inherits: true;
|
|
initial-value: 0deg;
|
|
}
|
|
|
|
[data-md-timepicker-field] [data-md-field-control] {
|
|
cursor: pointer;
|
|
caret-color: transparent;
|
|
}
|
|
[data-md-timepicker-dialog] {
|
|
max-width: calc(100vw - var(--md-sys-measurement-space400));
|
|
max-height: calc(100dvh - var(--md-sys-measurement-space400));
|
|
margin: auto;
|
|
padding: 0;
|
|
overflow: visible;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-timepicker-surface] {
|
|
display: grid;
|
|
grid-template-columns: max-content;
|
|
justify-content: center;
|
|
padding: var(--md-sys-measurement-space300);
|
|
border-radius: var(--md-sys-shape-corner-xl);
|
|
background-color: var(--md-sys-color-surface-container-high);
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-timepicker-title] {
|
|
padding-bottom: 20px;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-label-md);
|
|
letter-spacing: var(--md-sys-typescale-label-md-tracking);
|
|
}
|
|
|
|
[data-md-timepicker-picker] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
[data-md-timepicker-surface]:not([data-md-mode='input']) :is([data-md-timepicker-typing], [data-md-timepicker-when='input']),
|
|
[data-md-timepicker-surface][data-md-mode='input'] :is([data-md-timepicker-picker], [data-md-timepicker-when='dial']) {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-timepicker-when] {
|
|
display: contents;
|
|
}
|
|
|
|
[data-md-timepicker-display] {
|
|
display: flex;
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
[data-md-timepicker-numbers],
|
|
[data-md-timepicker-inputs] {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
direction: ltr;
|
|
}
|
|
|
|
[data-md-timepicker-box] {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 96px;
|
|
height: 80px;
|
|
border-radius: var(--md-sys-shape-corner-sm);
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-display-lg);
|
|
letter-spacing: var(--md-sys-typescale-display-lg-tracking);
|
|
font-variant-numeric: tabular-nums;
|
|
cursor: pointer;
|
|
transition-property: background-color, color;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-timepicker-box][aria-pressed='true'] {
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
[data-md-timepicker-display][data-md-cycle='24'] [data-md-timepicker-box] {
|
|
width: 114px;
|
|
}
|
|
|
|
[data-md-timepicker-separator] {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 24px;
|
|
height: 80px;
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-display-lg);
|
|
translate: 0 -4px;
|
|
user-select: none;
|
|
}
|
|
|
|
[data-md-timepicker-period] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--md-sys-measurement-space50);
|
|
width: 52px;
|
|
height: 80px;
|
|
margin-inline-start: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-timepicker-period] > button {
|
|
flex: 1 1 0%;
|
|
min-width: 0;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-surface-container-lowest);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
cursor: pointer;
|
|
transition-property: border-radius, background-color, color;
|
|
transition-duration: var(--md-sys-motion-spatial-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
[data-md-timepicker-period] > button:active,
|
|
[data-md-timepicker-period] > button[aria-checked='true'] {
|
|
border-radius: var(--md-sys-shape-corner-md);
|
|
}
|
|
[data-md-timepicker-period] > button[aria-checked='true'] {
|
|
background-color: var(--md-sys-color-tertiary-container);
|
|
color: var(--md-sys-color-on-tertiary-container);
|
|
font-weight: var(--md-ref-typeface-weight-bold);
|
|
}
|
|
|
|
[data-md-timepicker-period] > button:disabled {
|
|
cursor: default;
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
|
|
}
|
|
|
|
[data-md-timepicker-dial] {
|
|
--dial: 256px;
|
|
--unit: calc(var(--dial) / 256);
|
|
--outer: calc(101 * var(--unit));
|
|
--inner: calc(69 * var(--unit));
|
|
--handle: calc(48 * var(--unit));
|
|
--reach: var(--outer);
|
|
|
|
position: relative;
|
|
flex: none;
|
|
width: var(--dial);
|
|
height: var(--dial);
|
|
margin-bottom: var(--md-sys-measurement-space300);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
color: var(--md-sys-color-on-surface);
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
cursor: pointer;
|
|
touch-action: none;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
direction: ltr;
|
|
transition: --timepicker-angle var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);
|
|
}
|
|
[data-md-timepicker-dial][data-md-dragging] {
|
|
transition: none;
|
|
}
|
|
|
|
[data-md-timepicker-dial][data-md-inner] {
|
|
--reach: var(--inner);
|
|
}
|
|
|
|
[data-md-timepicker-labels],
|
|
[data-md-timepicker-ink],
|
|
[data-md-timepicker-set] {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
[data-md-timepicker-set] {
|
|
transition-property: opacity, visibility;
|
|
transition-duration: var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-default);
|
|
}
|
|
|
|
[data-md-timepicker-dial]:not([data-md-cycle='24']) [data-md-timepicker-set='hour24'],
|
|
[data-md-timepicker-dial][data-md-cycle='24'] [data-md-timepicker-set='hour12'] {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-timepicker-dial][data-md-view='minute'] :is([data-md-timepicker-set='hour12'], [data-md-timepicker-set='hour24']),
|
|
[data-md-timepicker-dial]:not([data-md-view='minute']) [data-md-timepicker-set='minute'] {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
[data-md-timepicker-set] > span {
|
|
--ring: var(--outer);
|
|
|
|
position: absolute;
|
|
left: calc(50% + var(--x) * var(--ring));
|
|
top: calc(50% + var(--y) * var(--ring));
|
|
display: grid;
|
|
place-items: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
translate: -50% -50%;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
[data-md-timepicker-set] > span[data-md-inner] {
|
|
--ring: var(--inner);
|
|
}
|
|
|
|
[data-md-timepicker-set] > span[data-md-disabled] {
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
|
|
}
|
|
[data-md-timepicker-selector] {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-md-timepicker-track] {
|
|
position: absolute;
|
|
left: calc(50% - 1px);
|
|
bottom: 50%;
|
|
width: 2px;
|
|
height: calc(var(--reach) - var(--handle) / 2);
|
|
background-color: var(--md-sys-color-primary);
|
|
transform-origin: 50% 100%;
|
|
rotate: var(--timepicker-angle);
|
|
}
|
|
|
|
[data-md-timepicker-centre],
|
|
[data-md-timepicker-handle] {
|
|
position: absolute;
|
|
translate: -50% -50%;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-timepicker-centre] {
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
[data-md-timepicker-handle] {
|
|
left: calc(50% + sin(var(--timepicker-angle)) * var(--reach));
|
|
top: calc(50% - cos(var(--timepicker-angle)) * var(--reach));
|
|
width: var(--handle);
|
|
height: var(--handle);
|
|
}
|
|
[data-md-timepicker-ink] {
|
|
color: var(--md-sys-color-on-primary);
|
|
pointer-events: none;
|
|
clip-path: circle(calc(var(--handle) / 2) at calc(50% + sin(var(--timepicker-angle)) * var(--reach)) calc(50% - cos(var(--timepicker-angle)) * var(--reach)));
|
|
}
|
|
|
|
[data-md-timepicker-ink] [data-md-timepicker-set] > span[data-md-disabled] {
|
|
color: inherit;
|
|
}
|
|
|
|
[data-md-timepicker-inputs] [data-md-timepicker-separator] {
|
|
height: 72px;
|
|
}
|
|
|
|
[data-md-timepicker-inputs] [data-md-timepicker-period] {
|
|
height: 72px;
|
|
}
|
|
|
|
[data-md-timepicker-column] {
|
|
width: 96px;
|
|
}
|
|
|
|
[data-md-timepicker-input] {
|
|
display: block;
|
|
width: 96px;
|
|
height: 72px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: var(--md-sys-shape-corner-sm);
|
|
outline: none;
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
color: var(--md-sys-color-on-surface);
|
|
caret-color: var(--md-sys-color-primary);
|
|
font: var(--md-sys-typescale-display-md);
|
|
letter-spacing: var(--md-sys-typescale-display-md-tracking);
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: center;
|
|
transition-property: background-color, color, box-shadow;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-timepicker-input]:focus {
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-timepicker-input][aria-invalid='true'] {
|
|
background-color: var(--md-sys-color-error-container);
|
|
color: var(--md-sys-color-error);
|
|
caret-color: var(--md-sys-color-error);
|
|
box-shadow: inset 0 0 0 1px var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-timepicker-input][aria-invalid='true']:focus {
|
|
box-shadow: inset 0 0 0 2px var(--md-sys-color-error);
|
|
}
|
|
[data-md-timepicker-support] {
|
|
min-height: 2rem;
|
|
padding-top: 7px;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
}
|
|
|
|
[data-md-timepicker-support][data-md-error],
|
|
[data-md-timepicker-range-error] {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
|
|
[data-md-timepicker-range-error] {
|
|
max-width: 272px;
|
|
padding-bottom: var(--md-sys-measurement-space100);
|
|
font: var(--md-sys-typescale-body-sm);
|
|
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
|
|
}
|
|
|
|
[data-md-timepicker-actions] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space100);
|
|
min-height: 48px;
|
|
}
|
|
|
|
[data-md-timepicker-actions] > [data-md-timepicker-spacer] {
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
@media (orientation: landscape) and (height < 560px) {
|
|
[data-md-timepicker-surface][data-md-mode='dial'] {
|
|
grid-template-columns: 216px auto;
|
|
grid-template-areas:
|
|
'display dial'
|
|
'actions actions';
|
|
column-gap: 36px;
|
|
padding: var(--md-sys-measurement-space200) var(--md-sys-measurement-space300) var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-title] {
|
|
grid-area: display;
|
|
align-self: start;
|
|
margin-top: var(--md-sys-measurement-space100);
|
|
padding: 0;
|
|
}
|
|
|
|
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-picker] {
|
|
display: contents;
|
|
}
|
|
|
|
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-display] {
|
|
grid-area: display;
|
|
flex-direction: column;
|
|
align-self: center;
|
|
margin: 0;
|
|
}
|
|
|
|
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-display][data-md-cycle='24'] [data-md-timepicker-box] {
|
|
width: 96px;
|
|
}
|
|
|
|
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-display] [data-md-timepicker-period] {
|
|
flex-direction: row;
|
|
width: 216px;
|
|
height: 38px;
|
|
margin: var(--md-sys-measurement-space200) 0 0;
|
|
}
|
|
|
|
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial] {
|
|
grid-area: dial;
|
|
margin: 0;
|
|
}
|
|
|
|
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-actions] {
|
|
grid-area: actions;
|
|
margin-top: var(--md-sys-measurement-space50);
|
|
}
|
|
}
|
|
|
|
@media (orientation: landscape) and (height <= 364px) {
|
|
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial] {
|
|
--dial: 238px;
|
|
}
|
|
}
|
|
|
|
@media (orientation: landscape) and (height <= 346px) {
|
|
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial] {
|
|
--dial: 200px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-collapse][data-md-variant='filled'] {
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
}
|
|
|
|
[data-md-collapse-summary] {
|
|
display: flex;
|
|
min-block-size: var(--md-sys-measurement-space600);
|
|
align-items: center;
|
|
gap: 12px;
|
|
border-radius: inherit;
|
|
cursor: pointer;
|
|
list-style-type: none;
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-collapse][data-md-variant='filled'] > [data-md-collapse-summary] {
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-collapse-icon] {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-collapse-title] {
|
|
min-width: 0;
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
[data-md-collapse-chevron] {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
transition: rotate var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
|
|
}
|
|
|
|
[data-md-collapse][open]:not([data-md-collapse-closing]) > [data-md-collapse-summary] > [data-md-collapse-chevron] {
|
|
rotate: 180deg;
|
|
}
|
|
|
|
[data-md-collapse-body] {
|
|
padding-block: var(--md-sys-measurement-space50) var(--md-sys-measurement-space200);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
}
|
|
|
|
[data-md-collapse][data-md-variant='filled'] > [data-md-collapse-body] {
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-card] {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
border-radius: var(--md-sys-shape-corner-md);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-card='filled'] {
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
}
|
|
|
|
[data-md-card='elevated'] {
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
box-shadow: var(--md-sys-elevation-1);
|
|
}
|
|
|
|
[data-md-card='outlined'] {
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
background-color: var(--md-sys-color-surface);
|
|
}
|
|
|
|
[data-md-card]:not([data-md-list-row], [data-md-dragged])::before {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-card][data-md-list-row] {
|
|
cursor: pointer;
|
|
transition-property: box-shadow;
|
|
transition-duration: var(--md-sys-motion-spatial-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-spatial-default);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-card][data-md-list-row]:not([data-md-dragged]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):hover)) {
|
|
box-shadow: var(--md-sys-elevation-1);
|
|
}
|
|
|
|
[data-md-card='elevated'][data-md-list-row]:not([data-md-dragged]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):hover)) {
|
|
box-shadow: var(--md-sys-elevation-2);
|
|
}
|
|
|
|
[data-md-card][data-md-list-row]:not([data-md-dragged]):hover:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):hover)::before {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
[data-md-card][data-md-list-row]:not([data-md-dragged]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):active)) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-md-card='elevated'][data-md-list-row]:not([data-md-dragged]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):active)) {
|
|
box-shadow: var(--md-sys-elevation-1);
|
|
}
|
|
|
|
[data-md-card][data-md-list-row]:not([data-md-dragged]):has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):active)::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
[data-md-card][data-md-dragged] {
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
}
|
|
|
|
[data-md-card='elevated'][data-md-dragged] {
|
|
box-shadow: var(--md-sys-elevation-4);
|
|
}
|
|
|
|
[data-md-card][data-md-list-row]:has([data-md-list-open]:focus-visible) {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
[data-md-card][data-md-list-row] [data-md-list-open]:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
[data-md-card-figure] {
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
|
|
& > img {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
[data-md-card-body] {
|
|
display: flex;
|
|
flex: 1 1 0%;
|
|
flex-direction: column;
|
|
gap: var(--md-sys-measurement-space200);
|
|
padding: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-card-header-row] {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-card-heading] {
|
|
min-width: 0;
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
[data-md-card-title] {
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
}
|
|
|
|
[data-md-card-subtitle] {
|
|
margin-top: var(--md-sys-measurement-space25);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
}
|
|
|
|
[data-md-card-menu] {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space50);
|
|
margin-block-start: calc(-1 * var(--md-sys-measurement-space100));
|
|
margin-inline-end: calc(-1 * var(--md-sys-measurement-space100));
|
|
}
|
|
|
|
[data-md-card-header] > [data-md-divider] {
|
|
margin-top: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-card-content] {
|
|
flex: 1 1 0%;
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
}
|
|
|
|
[data-md-card-actions] {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--md-sys-measurement-space100);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-list] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
[data-md-list='segmented'] {
|
|
gap: var(--md-sys-measurement-space25);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-drawer-scrim] {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 40;
|
|
background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
|
|
opacity: 0;
|
|
transition-property: opacity;
|
|
transition-duration: var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-default);
|
|
}
|
|
|
|
[data-md-drawer][data-md-open] > [data-md-drawer-scrim] {
|
|
opacity: 1;
|
|
}
|
|
|
|
@starting-style {
|
|
[data-md-drawer][data-md-open] > [data-md-drawer-scrim] {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
[data-md-drawer-sheet] {
|
|
--sheet-offset: 100%;
|
|
|
|
position: fixed;
|
|
top: var(--material-safe-top, env(safe-area-inset-top));
|
|
bottom: 0;
|
|
z-index: 50;
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
padding: var(--md-sys-measurement-space300);
|
|
padding-block-end: calc(var(--md-sys-measurement-space300) + var(--material-safe-bottom, env(safe-area-inset-bottom)));
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
color: var(--md-sys-color-on-surface);
|
|
box-shadow: var(--md-sys-elevation-1);
|
|
translate: var(--sheet-offset) 0;
|
|
transition-property: translate;
|
|
transition-duration: var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
|
|
}
|
|
|
|
[data-md-drawer-sheet][data-md-side='end'] {
|
|
inset-inline-end: 0;
|
|
}
|
|
|
|
[data-md-drawer-sheet][data-md-side='start'] {
|
|
--sheet-offset: -100%;
|
|
|
|
inset-inline-start: 0;
|
|
}
|
|
|
|
[data-md-drawer-sheet][data-md-side='end']:is([dir='rtl'], [dir='rtl'] *) {
|
|
--sheet-offset: -100%;
|
|
}
|
|
|
|
[data-md-drawer-sheet][data-md-side='start']:is([dir='rtl'], [dir='rtl'] *) {
|
|
--sheet-offset: 100%;
|
|
}
|
|
|
|
[data-md-drawer][data-md-open] > [data-md-drawer-sheet] {
|
|
translate: 0 0;
|
|
transition-duration: var(--md-sys-motion-spatial-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
|
|
}
|
|
|
|
@starting-style {
|
|
[data-md-drawer][data-md-open] > [data-md-drawer-sheet] {
|
|
translate: var(--sheet-offset) 0;
|
|
}
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-drawer-sheet] {
|
|
width: var(--sheet-width);
|
|
max-width: calc(100vw - 64px);
|
|
}
|
|
|
|
[data-md-drawer-sheet][data-md-side='end'] {
|
|
border-start-start-radius: var(--md-sys-shape-corner-lg);
|
|
border-end-start-radius: var(--md-sys-shape-corner-lg);
|
|
}
|
|
|
|
[data-md-drawer-sheet][data-md-side='start'] {
|
|
border-start-end-radius: var(--md-sys-shape-corner-lg);
|
|
border-end-end-radius: var(--md-sys-shape-corner-lg);
|
|
}
|
|
}
|
|
@media (width >= 840px) {
|
|
[data-md-drawer][data-md-standard] {
|
|
--drawer-top: var(--material-safe-top, env(safe-area-inset-top));
|
|
|
|
position: sticky;
|
|
top: var(--drawer-top);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
height: calc(100dvh - var(--drawer-top));
|
|
flex-shrink: 0;
|
|
align-self: flex-start;
|
|
overflow: clip;
|
|
inline-size: 0;
|
|
margin-inline-start: calc(-1 * var(--md-drawer-gap, 0px));
|
|
transition-property: inline-size, margin-inline;
|
|
transition-duration: var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
|
|
}
|
|
[data-md-scaffold-content]:has(> [data-md-app-bar][data-md-sticky]) [data-md-drawer][data-md-standard] {
|
|
--drawer-top: calc(var(--material-safe-top, env(safe-area-inset-top)) + 64px);
|
|
}
|
|
|
|
[data-md-scaffold-content]:has(> [data-md-app-bar][data-md-sticky]:is([data-md-variant='medium'], [data-md-variant='large'])) [data-md-drawer][data-md-standard] {
|
|
--drawer-top: max(var(--material-safe-top, env(safe-area-inset-top)), 64px);
|
|
}
|
|
[data-md-drawer][data-md-standard]:where(:has(> [data-md-drawer-sheet][data-md-side='start'])) {
|
|
justify-content: flex-start;
|
|
margin-inline-start: 0;
|
|
margin-inline-end: calc(-1 * var(--md-drawer-gap, 0px));
|
|
}
|
|
|
|
[data-md-drawer][data-md-standard][data-md-open] {
|
|
inline-size: min(var(--sheet-width), calc(100vw - 64px));
|
|
margin-inline: 0;
|
|
transition-duration: var(--md-sys-motion-spatial-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
|
|
}
|
|
|
|
@starting-style {
|
|
[data-md-drawer][data-md-standard][data-md-open] {
|
|
inline-size: 0;
|
|
margin-inline-start: calc(-1 * var(--md-drawer-gap, 0px));
|
|
}
|
|
|
|
[data-md-drawer][data-md-standard][data-md-open]:where(:has(> [data-md-drawer-sheet][data-md-side='start'])) {
|
|
margin-inline-start: 0;
|
|
margin-inline-end: calc(-1 * var(--md-drawer-gap, 0px));
|
|
}
|
|
}
|
|
|
|
[data-md-drawer][data-md-standard][data-md-drawer-collapsed] {
|
|
display: none;
|
|
}
|
|
[data-md-drawer][data-md-standard]:not([data-md-open], [data-md-drawer-settled]) {
|
|
display: none;
|
|
}
|
|
[data-md-drawer][data-md-standard]:not([data-md-drawer-settled]),
|
|
[data-md-drawer][data-md-standard]:not([data-md-drawer-settled]) > [data-md-drawer-sheet] {
|
|
transition: none;
|
|
}
|
|
|
|
[data-md-drawer][data-md-standard] > [data-md-drawer-scrim] {
|
|
display: none;
|
|
}
|
|
|
|
[data-md-drawer][data-md-standard] > [data-md-drawer-sheet] {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
top: 0;
|
|
z-index: auto;
|
|
height: 100%;
|
|
translate: 0 0;
|
|
border-radius: var(--md-sys-shape-corner-none);
|
|
background-color: var(--md-sys-color-surface);
|
|
box-shadow: none;
|
|
opacity: 0;
|
|
transition-property: opacity;
|
|
transition-duration: var(--md-sys-motion-effects-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
|
|
}
|
|
|
|
[data-md-drawer][data-md-standard][data-md-open] > [data-md-drawer-sheet] {
|
|
opacity: 1;
|
|
transition-duration: var(--md-sys-motion-spatial-default-duration);
|
|
transition-timing-function: var(--md-sys-motion-easing-emphasized-decelerate);
|
|
}
|
|
|
|
@starting-style {
|
|
[data-md-drawer][data-md-standard][data-md-open] > [data-md-drawer-sheet] {
|
|
translate: 0 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
[data-md-drawer][data-md-standard] > [data-md-drawer-sheet][data-md-side='end'] {
|
|
border-inline-start: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
[data-md-drawer][data-md-standard] > [data-md-drawer-sheet][data-md-side='start'] {
|
|
border-inline-end: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
}
|
|
|
|
[data-md-drawer-head] {
|
|
margin-bottom: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-drawer-head-row] {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
[data-md-drawer-heading] {
|
|
min-width: 0;
|
|
}
|
|
|
|
[data-md-drawer-title] {
|
|
font: var(--md-sys-typescale-title-lg);
|
|
letter-spacing: var(--md-sys-typescale-title-lg-tracking);
|
|
}
|
|
|
|
[data-md-drawer-subtitle] {
|
|
margin-top: var(--md-sys-measurement-space50);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-md);
|
|
letter-spacing: var(--md-sys-typescale-body-md-tracking);
|
|
}
|
|
|
|
[data-md-drawer-close] {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
margin-top: calc(-1 * var(--md-sys-measurement-space100));
|
|
margin-inline-end: -12px;
|
|
}
|
|
|
|
[data-md-drawer-head] > [data-md-divider] {
|
|
margin-top: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-drawer-body] {
|
|
container-type: inline-size;
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
[data-md-drawer-actions] {
|
|
display: flex;
|
|
min-height: var(--md-sys-measurement-space900);
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: var(--md-sys-measurement-space100);
|
|
padding-top: var(--md-sys-measurement-space200);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-carousel-item] {
|
|
position: relative;
|
|
height: 100%;
|
|
flex-shrink: 0;
|
|
scroll-snap-align: start;
|
|
scroll-snap-stop: always;
|
|
}
|
|
|
|
[data-md-carousel-item]:focus-visible {
|
|
outline-offset: -3px;
|
|
}
|
|
|
|
[data-md-carousel='full-screen'] > [data-md-carousel-scroller] > [data-md-carousel-item] {
|
|
width: 100%;
|
|
}
|
|
|
|
[data-md-carousel='multi-aspect'] > [data-md-carousel-scroller] > [data-md-carousel-item] {
|
|
width: auto;
|
|
border-radius: var(--md-sys-shape-corner-xl);
|
|
}
|
|
|
|
[data-md-carousel]:not([data-md-carousel='full-screen']):not([data-md-carousel='multi-aspect']) > [data-md-carousel-scroller] > [data-md-carousel-item] {
|
|
width: var(--material-carousel-slot);
|
|
max-width: 100%;
|
|
border-radius: var(--md-sys-shape-corner-xl);
|
|
}
|
|
|
|
[data-md-carousel-item] > [data-md-carousel-surface] {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-carousel='multi-aspect'] > [data-md-carousel-scroller] > [data-md-carousel-item] > [data-md-carousel-surface] {
|
|
border-radius: var(--md-sys-shape-corner-xl);
|
|
}
|
|
|
|
[data-md-carousel]:not([data-md-carousel='full-screen']):not([data-md-carousel='multi-aspect']) > [data-md-carousel-scroller] > [data-md-carousel-item] > [data-md-carousel-surface] {
|
|
border-radius: var(--md-sys-shape-corner-xl);
|
|
translate: var(--material-carousel-shift) 0;
|
|
clip-path: inset(0 var(--material-carousel-inset, 0px) round var(--md-sys-shape-corner-xl));
|
|
}
|
|
|
|
[data-md-carousel-surface] > [data-md-carousel-content] {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
& > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
[data-md-carousel-surface] > [data-md-carousel-label] {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
padding: var(--md-sys-measurement-space500) var(--md-sys-measurement-space200) var(--md-sys-measurement-space200);
|
|
background: linear-gradient(to top, color-mix(in srgb, var(--md-sys-color-scrim) 60%, transparent), transparent);
|
|
opacity: var(--material-carousel-label);
|
|
}
|
|
|
|
[data-md-carousel-label] > [data-md-carousel-label-text] {
|
|
overflow: hidden;
|
|
color: white;
|
|
font: var(--md-sys-typescale-title-md);
|
|
letter-spacing: var(--md-sys-typescale-title-md-tracking);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
translate: var(--material-carousel-label-shift) 0;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-carousel] {
|
|
position: relative;
|
|
}
|
|
|
|
[data-md-carousel] > [data-md-carousel-probe] {
|
|
position: absolute;
|
|
inset-inline-start: 0;
|
|
top: 0;
|
|
height: 0;
|
|
width: var(--material-carousel-item-width);
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-md-carousel] > [data-md-carousel-scroller] {
|
|
display: flex;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
[data-md-carousel='full-screen'] > [data-md-carousel-scroller] {
|
|
margin-inline: auto;
|
|
height: var(--material-carousel-height);
|
|
max-width: 840px;
|
|
flex-direction: column;
|
|
gap: var(--md-sys-measurement-space200);
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior-y: contain;
|
|
scroll-snap-type: y mandatory;
|
|
}
|
|
|
|
[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-scroller] {
|
|
height: calc(var(--material-carousel-height) + 16px);
|
|
gap: var(--md-sys-measurement-space100);
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
overscroll-behavior-x: contain;
|
|
padding-block: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-carousel='multi-aspect'] > [data-md-carousel-scroller] {
|
|
padding-inline-start: var(--material-carousel-pad);
|
|
}
|
|
|
|
[data-md-carousel='multi-browse'] > [data-md-carousel-scroller],
|
|
[data-md-carousel='hero'] > [data-md-carousel-scroller] {
|
|
scroll-snap-type: x mandatory;
|
|
}
|
|
|
|
[data-md-carousel] > [data-md-carousel-controls] {
|
|
display: none;
|
|
margin-top: 12px;
|
|
justify-content: flex-end;
|
|
gap: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-carousel] > [data-md-carousel-controls='always'] {
|
|
display: flex;
|
|
}
|
|
|
|
@media (pointer: fine) {
|
|
[data-md-carousel] > [data-md-carousel-controls='auto'] {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-previous]:is([dir='rtl'], [dir='rtl'] *),
|
|
[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-next]:is([dir='rtl'], [dir='rtl'] *) {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
body:has(> [data-md-error-page]) {
|
|
margin: 0;
|
|
min-height: 100dvh;
|
|
background-color: var(--md-sys-color-surface);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-error-page] {
|
|
display: flex;
|
|
min-height: 100dvh;
|
|
max-width: 576px;
|
|
margin-inline: auto;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-inline: var(--md-sys-measurement-space300);
|
|
padding-block: var(--md-sys-measurement-space600);
|
|
text-align: center;
|
|
}
|
|
|
|
[data-md-error-art] {
|
|
position: relative;
|
|
display: grid;
|
|
flex-shrink: 0;
|
|
place-items: center;
|
|
width: 192px;
|
|
height: 192px;
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-error-art] {
|
|
width: 240px;
|
|
height: 240px;
|
|
}
|
|
}
|
|
|
|
[data-md-error-shape] {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
[data-md-error-shape] svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: var(--md-sys-color-primary-container);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
[data-md-error-shape] {
|
|
animation: material-error-turn 60s linear infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes material-error-turn {
|
|
to {
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|
|
|
|
[data-md-error-code] {
|
|
position: relative;
|
|
margin: 0;
|
|
color: var(--md-sys-color-on-primary-container);
|
|
font: var(--md-sys-typescale-emphasized-display-lg);
|
|
letter-spacing: var(--md-sys-typescale-emphasized-display-lg-tracking);
|
|
font-variation-settings: 'ROND' 100;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
[data-md-error-headline] {
|
|
margin: var(--md-sys-measurement-space500) 0 0;
|
|
font: var(--md-sys-typescale-headline-md);
|
|
letter-spacing: var(--md-sys-typescale-headline-md-tracking);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
@media (width >= 600px) {
|
|
[data-md-error-headline] {
|
|
font: var(--md-sys-typescale-headline-lg);
|
|
letter-spacing: var(--md-sys-typescale-headline-lg-tracking);
|
|
}
|
|
}
|
|
|
|
[data-md-error-message] {
|
|
margin: 12px 0 0;
|
|
max-width: 448px;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font: var(--md-sys-typescale-body-lg);
|
|
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
[data-md-error-actions] {
|
|
display: flex;
|
|
margin-top: var(--md-sys-measurement-space500);
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-toolbar] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space50);
|
|
}
|
|
|
|
[data-md-toolbar][data-md-variant='docked'] {
|
|
width: 100%;
|
|
min-height: calc(64px + var(--material-safe-bottom, env(safe-area-inset-bottom)));
|
|
justify-content: center;
|
|
column-gap: clamp(var(--md-sys-measurement-space50), 4vw, var(--md-sys-measurement-space400));
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
padding-bottom: var(--material-safe-bottom, env(safe-area-inset-bottom));
|
|
background-color: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
|
|
[data-md-toolbar][data-md-variant='floating'] {
|
|
display: inline-flex;
|
|
height: 64px;
|
|
padding-inline: var(--md-sys-measurement-space100);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
}
|
|
|
|
[data-md-toolbar][data-md-variant='floating'][data-md-vertical] {
|
|
width: 64px;
|
|
height: auto;
|
|
flex-direction: column;
|
|
padding-block: var(--md-sys-measurement-space100);
|
|
padding-inline: 0;
|
|
}
|
|
|
|
[data-md-toolbar][data-md-vibrant] {
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
|
|
[data-md-toolbar][data-md-vibrant] [data-md-icon-button]:not([data-md-variant='filled'], [data-md-variant='tonal'], [data-md-selected='true'], [aria-pressed='true'], :disabled, [aria-disabled='true']) {
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
|
|
[data-md-toolbar][data-md-vibrant] [data-md-icon-button][aria-pressed='true']:not(:disabled, [aria-disabled='true']) {
|
|
background-color: var(--md-sys-color-surface-container);
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
[data-md-toolbar]:not([data-md-vibrant]) [data-md-icon-button]:not([data-md-variant='filled'], [data-md-variant='tonal'], [data-md-selected='true'], [aria-pressed='true'], :disabled, [aria-disabled='true']) {
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
[data-md-toolbar][data-md-variant='docked']:has(> [data-md-toolbar-fab]) {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
[data-md-toolbar-fab] {
|
|
display: flex;
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
[data-md-toolbar-fab] [data-md-fab],
|
|
[data-md-toolbar-fab] [data-md-fab]:hover {
|
|
box-shadow: none;
|
|
}
|
|
[data-md-toolbar]:not([data-md-vertical]) > [role='separator'][aria-orientation='vertical'] {
|
|
align-self: center;
|
|
height: 40px;
|
|
}
|
|
|
|
[data-md-toolbar][data-md-vertical] > [role='separator'][aria-orientation='horizontal'] {
|
|
align-self: center;
|
|
width: 40px;
|
|
}
|
|
[data-md-toolbar-group] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-toolbar-group][data-md-vertical] {
|
|
flex-direction: column;
|
|
}
|
|
[data-md-toolbar-place='bottom'] {
|
|
position: fixed;
|
|
bottom: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200));
|
|
left: 50%;
|
|
z-index: 30;
|
|
translate: -50% 0;
|
|
}
|
|
|
|
[data-md-toolbar-place='end'] {
|
|
position: fixed;
|
|
top: 50%;
|
|
inset-inline-end: calc(var(--md-sys-measurement-space200) + var(--material-safe-right, env(safe-area-inset-right)));
|
|
z-index: 30;
|
|
translate: 0 -50%;
|
|
}
|
|
[data-md-toolbar][data-md-vertical][data-md-toolbar-place='end'],
|
|
[data-md-toolbar-group][data-md-vertical][data-md-toolbar-place='end'] {
|
|
inset-inline-end: calc(var(--md-sys-measurement-space300) + var(--material-safe-right, env(safe-area-inset-right)));
|
|
}
|
|
|
|
[data-md-toolbar][data-md-variant='docked'][data-md-toolbar-place='bottom'] {
|
|
inset-inline: 0;
|
|
bottom: var(--material-bottom-bar, 0px);
|
|
left: 0;
|
|
translate: none;
|
|
}
|
|
@media (width >= 840px) {
|
|
[data-md-toolbar][data-md-variant='docked'][data-md-rounded] {
|
|
min-height: 64px;
|
|
padding-bottom: 0;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
}
|
|
|
|
[data-md-toolbar][data-md-variant='docked'][data-md-rounded][data-md-toolbar-place='bottom'] {
|
|
right: calc(var(--md-sys-measurement-space200) + var(--material-safe-right, env(safe-area-inset-right)));
|
|
bottom: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200));
|
|
left: calc(var(--md-sys-measurement-space200) + var(--material-safe-left, env(safe-area-inset-left)));
|
|
width: auto;
|
|
}
|
|
}
|
|
:root:has([data-md-toolbar-place='bottom']:is([data-md-toolbar], [data-md-toolbar-group]):not([data-md-vertical])),
|
|
[data-md-scaffold]:has([data-md-toolbar-place='bottom']:is([data-md-toolbar], [data-md-toolbar-group]):not([data-md-vertical])) {
|
|
--material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 64px);
|
|
}
|
|
|
|
:root:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='md']),
|
|
[data-md-scaffold]:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='md']) {
|
|
--material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 80px);
|
|
}
|
|
|
|
:root:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='lg']),
|
|
[data-md-scaffold]:has([data-md-toolbar-group][data-md-toolbar-place='bottom']:not([data-md-vertical]) [data-md-fab][data-md-size='lg']) {
|
|
--material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 96px);
|
|
}
|
|
|
|
:root:has([data-md-toolbar][data-md-variant='docked'][data-md-toolbar-place='bottom']),
|
|
[data-md-scaffold]:has([data-md-toolbar][data-md-variant='docked'][data-md-toolbar-place='bottom']) {
|
|
--material-bottom-toolbar: calc(var(--material-bottom-bar, 0px) + 64px + var(--material-safe-bottom, env(safe-area-inset-bottom)));
|
|
}
|
|
|
|
@media (width >= 840px) {
|
|
:root:has([data-md-toolbar][data-md-variant='docked'][data-md-rounded][data-md-toolbar-place='bottom']),
|
|
[data-md-scaffold]:has([data-md-toolbar][data-md-variant='docked'][data-md-rounded][data-md-toolbar-place='bottom']) {
|
|
--material-bottom-toolbar: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + var(--md-sys-measurement-space200) + 64px);
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-tabs] {
|
|
min-width: 0;
|
|
}
|
|
|
|
[data-md-tabs-bar] {
|
|
--tabs-ring: 5px;
|
|
|
|
position: relative;
|
|
display: flex;
|
|
overflow-x: auto;
|
|
overscroll-behavior-x: contain;
|
|
padding: var(--tabs-ring);
|
|
scroll-padding-inline: var(--tabs-ring);
|
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
|
scrollbar-width: thin;
|
|
}
|
|
[data-md-tabs-bar][data-md-scrollable] {
|
|
padding-inline-start: 52px;
|
|
scroll-padding-inline-start: 52px;
|
|
}
|
|
[data-md-tabs-bar] > li {
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
[data-md-tabs-bar] > li > [data-md-tab] {
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
[data-md-tab] {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1 1 0%;
|
|
min-width: 90px;
|
|
min-height: 48px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
cursor: pointer;
|
|
outline: none;
|
|
font: var(--md-sys-typescale-title-sm);
|
|
letter-spacing: var(--md-sys-typescale-title-sm-tracking);
|
|
white-space: nowrap;
|
|
transition-property: color;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
[data-md-tabs-bar][data-md-scrollable] > li,
|
|
[data-md-tabs-bar][data-md-scrollable] [data-md-tab] {
|
|
flex: none;
|
|
}
|
|
|
|
[data-md-tabs-bar][data-md-stacked] [data-md-tab] {
|
|
min-height: 64px;
|
|
}
|
|
[data-md-tab]::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset-block: calc(-1 * var(--tabs-ring));
|
|
inset-inline: 0;
|
|
pointer-events: none;
|
|
transition-property: background-color;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
[data-md-tab]:hover {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-tab]:hover::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
|
}
|
|
}
|
|
|
|
[data-md-tab]:focus-visible::before,
|
|
[data-md-tab]:active::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
|
|
}
|
|
|
|
[data-md-tab]:focus-visible {
|
|
color: var(--md-sys-color-on-surface);
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
}
|
|
[data-md-tab]:is([aria-selected='true'], [aria-current='page']) {
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
|
|
[data-md-tabs-bar][data-md-variant='secondary'] [data-md-tab]:is([aria-selected='true'], [aria-current='page']) {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
[data-md-tab]:disabled {
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
|
cursor: default;
|
|
}
|
|
|
|
[data-md-tab]:disabled::before {
|
|
background-color: transparent;
|
|
}
|
|
[data-md-tab-content] {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-self: stretch;
|
|
min-width: 24px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-tabs-bar][data-md-stacked] [data-md-tab-content] {
|
|
flex-direction: column;
|
|
gap: var(--md-sys-measurement-space25);
|
|
}
|
|
|
|
[data-md-tab-label] {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space75);
|
|
}
|
|
[data-md-tabs-bar]:not([data-md-scrollable]) [data-md-tab-text] {
|
|
display: -webkit-box;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: normal;
|
|
}
|
|
[data-md-tab-indicator] {
|
|
position: absolute;
|
|
inset-inline: 2px;
|
|
bottom: calc(-1 * var(--tabs-ring));
|
|
height: 3px;
|
|
border-radius: 3px 3px 0 0;
|
|
background-color: var(--md-sys-color-primary);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
view-transition-class: material-tab-indicator;
|
|
}
|
|
[data-md-tabs-bar][data-md-variant='secondary'] [data-md-tab-content] {
|
|
position: static;
|
|
}
|
|
|
|
[data-md-tabs-bar][data-md-variant='secondary'] [data-md-tab-indicator] {
|
|
inset-inline: 0;
|
|
height: 2px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
[data-md-tab]:is([aria-selected='true'], [aria-current='page']) [data-md-tab-indicator] {
|
|
opacity: 1;
|
|
view-transition-name: var(--tabs-indicator);
|
|
}
|
|
[data-md-tab-panel] {
|
|
padding-top: var(--md-sys-measurement-space300);
|
|
outline: none;
|
|
}
|
|
|
|
::view-transition-group(*.material-tab-indicator) {
|
|
animation-duration: var(--md-sys-motion-spatial-default-duration);
|
|
animation-timing-function: var(--md-sys-motion-spatial-default);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-section-nav] {
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-md-section-nav-picker] {
|
|
@media (width >= 600px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-section-nav] > nav {
|
|
@media (width < 600px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-md-section-nav-trigger] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
block-size: var(--md-sys-measurement-space600);
|
|
inline-size: min(320px, calc(100vw - 32px));
|
|
cursor: pointer;
|
|
border: 1px solid var(--md-sys-color-outline);
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
padding-inline: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-section-nav-trigger-label] {
|
|
min-inline-size: 0;
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
[data-md-section-nav] [data-md-tabs-bar] > li {
|
|
display: flex;
|
|
min-inline-size: 0;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-account-menu] {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--md-sys-measurement-space500);
|
|
block-size: var(--md-sys-measurement-space500);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
cursor: pointer;
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
font: var(--md-sys-typescale-label-lg);
|
|
letter-spacing: var(--md-sys-typescale-label-lg-tracking);
|
|
font-variation-settings: normal;
|
|
}
|
|
|
|
[data-md-account-menu-avatar] {
|
|
position: relative;
|
|
z-index: -2;
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
object-fit: cover;
|
|
}
|
|
|
|
[data-md-account-menu-header] {
|
|
padding-inline: 12px;
|
|
padding-block: var(--md-sys-measurement-space100) 12px;
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-theme-toggle='toggle'],
|
|
[data-md-theme-toggle='cycle'] {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--md-sys-measurement-space500);
|
|
block-size: var(--md-sys-measurement-space500);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
cursor: pointer;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
transition: border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
|
|
|
|
&:active {
|
|
border-radius: var(--md-sys-shape-corner-sm);
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-scheme-picker] {
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-md-scheme-picker-legend] {
|
|
margin-block-end: var(--md-sys-measurement-space100);
|
|
}
|
|
|
|
[data-md-scheme-picker-options] {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--md-sys-measurement-space100);
|
|
|
|
@media (width >= 600px) {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
[data-md-scheme-picker-option] {
|
|
display: flex;
|
|
min-inline-size: 0;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--md-sys-measurement-space100);
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
padding: 12px;
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
color: var(--md-sys-color-on-surface);
|
|
transition-property: background-color, border-color;
|
|
transition-duration: var(--md-sys-motion-effects-fast-duration);
|
|
transition-timing-function: var(--md-sys-motion-effects-fast);
|
|
|
|
&:has(:checked) {
|
|
border-color: transparent;
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
&:has(:focus-visible) {
|
|
outline: 3px solid var(--md-sys-color-secondary);
|
|
outline-offset: 2px;
|
|
|
|
&::before {
|
|
opacity: var(--md-sys-state-focus-state-layer-opacity);
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-md-scheme-picker-swatches] {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
[data-md-scheme-picker-swatches] > * + * {
|
|
margin-inline-start: -6px;
|
|
}
|
|
|
|
[data-md-scheme-picker-swatch] {
|
|
inline-size: 20px;
|
|
block-size: 20px;
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--swatch-light);
|
|
box-shadow: 0 0 0 2px var(--md-sys-color-surface-container-low);
|
|
}
|
|
|
|
[data-theme='dark'] [data-md-scheme-picker-swatch] {
|
|
background-color: var(--swatch-dark);
|
|
}
|
|
|
|
[data-md-scheme-picker-option]:has(:checked) [data-md-scheme-picker-swatch] {
|
|
box-shadow: 0 0 0 2px var(--md-sys-color-secondary-container);
|
|
}
|
|
|
|
[data-md-scheme-picker-label] {
|
|
inline-size: 100%;
|
|
padding-inline-end: var(--md-sys-measurement-space300);
|
|
}
|
|
|
|
[data-md-scheme-picker-check] {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
inset-inline-end: var(--md-sys-measurement-space100);
|
|
top: var(--md-sys-measurement-space100);
|
|
display: none;
|
|
}
|
|
|
|
[data-md-scheme-picker-option]:has(:checked) [data-md-scheme-picker-check] {
|
|
display: block;
|
|
}
|
|
|
|
[data-md-scheme-picker-hint] {
|
|
margin-block-start: var(--md-sys-measurement-space50);
|
|
}
|
|
}
|
|
|
|
@layer material.components {
|
|
[data-md-showcase-brand] {
|
|
display: block;
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
}
|
|
[data-md-showcase-search] {
|
|
width: 100%;
|
|
}
|
|
|
|
[data-md-showcase-search-hint] {
|
|
padding: var(--md-sys-measurement-space125) var(--md-sys-measurement-space200);
|
|
}
|
|
[data-md-showcase-kbd] {
|
|
display: inline-block;
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
padding: 0 var(--md-sys-measurement-space75);
|
|
}
|
|
[data-md-showcase-search-result] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
min-height: var(--md-sys-measurement-space700);
|
|
padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
|
|
}
|
|
[data-md-showcase-page] {
|
|
padding-block-end: var(--md-sys-measurement-space600);
|
|
}
|
|
[data-md-showcase-section-icon] {
|
|
display: grid;
|
|
place-items: center;
|
|
width: var(--md-sys-measurement-space600);
|
|
height: var(--md-sys-measurement-space600);
|
|
border-radius: var(--md-sys-shape-corner-lg);
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
[data-md-showcase-example] {
|
|
scroll-margin-top: var(--md-sys-measurement-space900);
|
|
}
|
|
|
|
[data-md-showcase-code-summary] {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
}
|
|
|
|
[data-md-showcase-code] {
|
|
margin-top: var(--md-sys-measurement-space100);
|
|
overflow-x: auto;
|
|
border-radius: var(--md-sys-shape-corner-sm);
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
padding: var(--md-sys-measurement-space125);
|
|
}
|
|
[data-md-showcase-swatch] {
|
|
display: block;
|
|
flex-shrink: 0;
|
|
width: var(--md-sys-measurement-space300);
|
|
height: var(--md-sys-measurement-space300);
|
|
border-radius: var(--md-sys-shape-corner-xs);
|
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
[data-md-showcase-swatch][data-md-showcase-size='lg'] {
|
|
width: var(--md-sys-measurement-space400);
|
|
height: var(--md-sys-measurement-space400);
|
|
}
|
|
[data-md-showcase-swatch-label] {
|
|
min-width: 0;
|
|
}
|
|
[data-md-showcase-type-row] {
|
|
display: grid;
|
|
gap: var(--md-sys-measurement-space100);
|
|
padding: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-showcase-type-row] + [data-md-showcase-type-row] {
|
|
border-top: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
|
|
@media (width >= 840px) {
|
|
[data-md-showcase-type-row] {
|
|
grid-template-columns: 192px 1fr 1fr;
|
|
align-items: baseline;
|
|
}
|
|
}
|
|
[data-md-showcase-shape-swatch] {
|
|
display: block;
|
|
height: 80px;
|
|
background-color: var(--md-sys-color-primary-container);
|
|
}
|
|
[data-md-showcase-elevation-tile] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 96px;
|
|
border-radius: var(--md-sys-shape-corner-md);
|
|
background-color: var(--md-sys-color-surface-container-high);
|
|
}
|
|
|
|
[data-md-showcase-elevation-tile][data-md-elevation='1'] {
|
|
box-shadow: var(--md-sys-elevation-1);
|
|
}
|
|
|
|
[data-md-showcase-elevation-tile][data-md-elevation='2'] {
|
|
box-shadow: var(--md-sys-elevation-2);
|
|
}
|
|
|
|
[data-md-showcase-elevation-tile][data-md-elevation='3'] {
|
|
box-shadow: var(--md-sys-elevation-3);
|
|
}
|
|
|
|
[data-md-showcase-elevation-tile][data-md-elevation='4'] {
|
|
box-shadow: var(--md-sys-elevation-4);
|
|
}
|
|
|
|
[data-md-showcase-elevation-tile][data-md-elevation='5'] {
|
|
box-shadow: var(--md-sys-elevation-5);
|
|
}
|
|
[data-md-showcase-motion-row] {
|
|
display: grid;
|
|
grid-template-columns: 144px 1fr;
|
|
align-items: center;
|
|
gap: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
[data-md-showcase-motion-track] {
|
|
height: var(--md-sys-measurement-space400);
|
|
}
|
|
|
|
[data-md-showcase-motion-dot] {
|
|
width: var(--md-sys-measurement-space400);
|
|
height: var(--md-sys-measurement-space400);
|
|
border-radius: var(--md-sys-shape-corner-full);
|
|
background-color: var(--md-sys-color-tertiary);
|
|
}
|
|
[data-md-showcase-icon-mask] {
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: currentColor;
|
|
}
|
|
|
|
[data-md-showcase-icon-mask][data-md-showcase-icon-size='20'] {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
[data-md-showcase-breakpoint-card] {
|
|
border-radius: var(--md-sys-shape-corner-md);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
padding: var(--md-sys-measurement-space200);
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
[data-md-showcase-breakpoint-card='compact'] {
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
}
|
|
|
|
@media (600px <= width < 840px) {
|
|
[data-md-showcase-breakpoint-card='medium'] {
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
}
|
|
|
|
@media (840px <= width < 1200px) {
|
|
[data-md-showcase-breakpoint-card='expanded'] {
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
}
|
|
|
|
@media (1200px <= width < 1600px) {
|
|
[data-md-showcase-breakpoint-card='large'] {
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
}
|
|
|
|
@media (width >= 1600px) {
|
|
[data-md-showcase-breakpoint-card='extra-large'] {
|
|
background-color: var(--md-sys-color-primary-container);
|
|
color: var(--md-sys-color-on-primary-container);
|
|
}
|
|
}
|
|
}
|
|
.showcase-w-narrow {
|
|
max-width: 320px;
|
|
}
|
|
.showcase-ink-tertiary {
|
|
color: var(--md-sys-color-tertiary);
|
|
}
|
|
|
|
.showcase-ink-secondary {
|
|
color: var(--md-sys-color-secondary);
|
|
}
|