1524 lines
57 KiB
CSS
1524 lines
57 KiB
CSS
@import "./themes/tokens.css";
|
|
@import "./themes/colors.module.css";
|
|
@import "./themes/typography.module.css";
|
|
@import "./themes/theme.dark.css" (prefers-color-scheme: dark);
|
|
@import "./themes/theme.light.css" (prefers-color-scheme: light);
|
|
div.m3.m3-card > :is(div.m3-card-footer, header.m3-card-header, section.m3-card-body) > .m3-card-media:first-child, div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content > .m3-card-media:first-child, div.m3.m3-card > .m3-card-media:first-child {
|
|
border-radius: 12px !important;
|
|
padding: 0px;
|
|
}
|
|
|
|
div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3 {
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
}
|
|
|
|
.m3.m3-card-media {
|
|
display: block;
|
|
contain: content;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
.m3.m3-card-media.m3-rounded {
|
|
border-radius: 28px;
|
|
}
|
|
|
|
div.m3.m3-card-action-area {
|
|
display: block;
|
|
cursor: pointer;
|
|
contain: content;
|
|
position: relative;
|
|
border-radius: inherit;
|
|
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
div.m3.m3-card-action-area > div.m3.m3-card-action-area-content {
|
|
top: 0;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
div.m3.m3-card-action-area > span.m3:is(.m3-card-state-layer, .m3-ripple-domain) {
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
div.m3.m3-card-action-area > .m3.m3-ripple-domain > .m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
}
|
|
div.m3.m3-card-action-area:hover > span.m3.m3-card-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
|
}
|
|
div.m3.m3-card-action-area:is(div.m3.m3-card-action-area:focus, div.m3.m3-card-action-area:focus-visible, div.m3.m3-card-action-area:focus-within) > span.m3.m3-card-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
}
|
|
div.m3.m3-card-action-area:is(div.m3.m3-card-action-area:focus, div.m3.m3-card-action-area:focus-visible, div.m3.m3-card-action-area:focus-within, div.m3.m3-card-action-area:hover):is(.m3-card-outlined, .m3-card-filled) {
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
div.m3.m3-card-action-area:is(div.m3.m3-card-action-area:focus, div.m3.m3-card-action-area:focus-visible, div.m3.m3-card-action-area:focus-within, div.m3.m3-card-action-area:hover).m3-card-elevated {
|
|
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
div.m3.m3-card-action-area:active:is(.m3-card-outlined, .m3-card-filled) {
|
|
box-shadow: none !important;
|
|
}
|
|
div.m3.m3-card-action-area:active.m3-card-elevated {
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
div.m3.m3-card-action-area:active:not(div.m3.m3-card-action-area:active:has(span.m3.m3-ripple-domain)) > span.m3.m3-card-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
}
|
|
|
|
svg.m3.m3-svg-icon > text {
|
|
text-anchor: middle;
|
|
dominant-baseline: middle;
|
|
alignment-baseline: middle;
|
|
}
|
|
svg.m3.m3-svg-icon > text.m3-size-12px {
|
|
width: 12px;
|
|
aspect-ratio: 1;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
}
|
|
svg.m3.m3-svg-icon > text.m3-size-16px {
|
|
width: 16px;
|
|
aspect-ratio: 1;
|
|
font-size: 16px;
|
|
line-height: 16px;
|
|
}
|
|
svg.m3.m3-svg-icon > text.m3-size-20px {
|
|
width: 20px;
|
|
aspect-ratio: 1;
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
}
|
|
svg.m3.m3-svg-icon > text.m3-size-24px {
|
|
width: 24px;
|
|
aspect-ratio: 1;
|
|
font-size: 24px;
|
|
line-height: 24px;
|
|
}
|
|
svg.m3.m3-svg-icon > text.m3-size-28px {
|
|
width: 28px;
|
|
aspect-ratio: 1;
|
|
font-size: 28px;
|
|
line-height: 28px;
|
|
}
|
|
svg.m3.m3-svg-icon > text.m3-size-32px {
|
|
width: 32px;
|
|
aspect-ratio: 1;
|
|
font-size: 32px;
|
|
line-height: 32px;
|
|
}
|
|
svg.m3.m3-svg-icon > text.m3-size-36px {
|
|
width: 36px;
|
|
aspect-ratio: 1;
|
|
font-size: 36px;
|
|
line-height: 36px;
|
|
}
|
|
svg.m3.m3-svg-icon > text.m3-size-40px {
|
|
width: 40px;
|
|
aspect-ratio: 1;
|
|
font-size: 40px;
|
|
line-height: 40px;
|
|
}
|
|
svg.m3.m3-svg-icon > text.m3-size-48px {
|
|
width: 48px;
|
|
aspect-ratio: 1;
|
|
font-size: 48px;
|
|
line-height: 48px;
|
|
}
|
|
svg.m3.m3-svg-icon > text.m3-Outlined {
|
|
font-family: Material-Symbols-Outlined-Regular;
|
|
}
|
|
svg.m3.m3-svg-icon > text.m3-Rounded {
|
|
font-family: Material-Symbols-Rounded-Regular;
|
|
}
|
|
svg.m3.m3-svg-icon > text.m3-Sharp {
|
|
font-family: Material-Symbols-Sharp-Regular;
|
|
}
|
|
|
|
svg.m3.m3-badge {
|
|
position: absolute;
|
|
background-color: var(--md-sys-color-error);
|
|
}
|
|
svg.m3.m3-badge.disable-value {
|
|
padding: 0;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
}
|
|
svg.m3.m3-badge.disable-value > text {
|
|
display: none;
|
|
}
|
|
svg.m3.m3-badge {
|
|
height: 16px;
|
|
border-radius: 8px;
|
|
}
|
|
svg.m3.m3-badge > text {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--md-sys-typescale-label-small-font-size);
|
|
font-weight: var(--md-sys-typescale-label-small-font-weight);
|
|
line-height: var(--md-sys-typescale-label-small-line-height);
|
|
font-family: var(--md-sys-typescale-label-small-font-family-name);
|
|
letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
|
|
text-anchor: middle;
|
|
font-optical-sizing: none;
|
|
alignment-baseline: central;
|
|
fill: var(--md-sys-color-on-error);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Material-Symbols-Rounded-Regular;
|
|
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
|
|
src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: Material-Symbols-Outlined-Regular;
|
|
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
|
|
src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: Material-Symbols-Sharp-Regular;
|
|
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
|
|
src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: Roboto;
|
|
font-face-name: Thin;
|
|
font-weight: 100;
|
|
src: url("./font/Roboto-Thin.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: Roboto;
|
|
font-face-name: Light;
|
|
font-weight: 300;
|
|
src: url("./font/Roboto-Light.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: Roboto;
|
|
font-face-name: Regular;
|
|
font-weight: 400;
|
|
src: url("./font/Roboto-Regular.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: Roboto;
|
|
font-face-name: Medium;
|
|
font-weight: 500;
|
|
src: url("./font/Roboto-Medium.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: Roboto;
|
|
font-face-name: Bold;
|
|
font-weight: 700;
|
|
src: url("./font/Roboto-Bold.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: Roboto;
|
|
font-face-name: Black;
|
|
font-weight: 900;
|
|
src: url("./font/Roboto-Black.ttf");
|
|
}
|
|
.m3.m3-ripple-domain {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 20;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.m3.m3-ripple {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
transform-origin: center;
|
|
opacity: 0;
|
|
z-index: 20;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
animation-duration: 0.55s;
|
|
animation-iteration-count: 1;
|
|
animation-name: rippleAppearanceAnimation;
|
|
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 0.55s;
|
|
transition-property: opacity, background-color;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.m3.m3-ripple.visible {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
@keyframes rippleAppearanceAnimation {
|
|
0% {
|
|
transform: scale3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
hr.m3.m3-divider {
|
|
border: none;
|
|
outline: 0.5px solid var(--md-sys-color-outline-variant);
|
|
position: relative;
|
|
margin: 0;
|
|
}
|
|
hr.m3.m3-divider.vertical {
|
|
height: auto;
|
|
writing-mode: vertical-lr;
|
|
}
|
|
hr.m3.m3-divider.vertical.inset {
|
|
margin-inline-start: 16px;
|
|
}
|
|
hr.m3.m3-divider.vertical.middle-inset {
|
|
margin-inline: 16px;
|
|
}
|
|
hr.m3.m3-divider.horizontal {
|
|
width: auto;
|
|
writing-mode: horizontal-tb;
|
|
}
|
|
hr.m3.m3-divider.horizontal.inset {
|
|
margin-inline-start: 16px;
|
|
}
|
|
hr.m3.m3-divider.horizontal.middle-inset {
|
|
margin-inline: 16px;
|
|
}
|
|
|
|
div.m3.m3-container {
|
|
display: block;
|
|
border-radius: 12px;
|
|
position: relative;
|
|
contain: content;
|
|
transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
div.m3.m3-container.m3-container-filled {
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
}
|
|
div.m3.m3-container.m3-container-outlined {
|
|
background-color: var(--md-sys-color-surface);
|
|
outline-offset: -1px;
|
|
outline: 1px solid var(--md-sys-color-outline-variant);
|
|
}
|
|
div.m3.m3-container.m3-container-elevated {
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
}
|
|
|
|
.m3.m3-typography {
|
|
position: relative;
|
|
}
|
|
|
|
button.m3.m3-fab {
|
|
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
|
}
|
|
button.m3.m3-fab > span.m3-icon {
|
|
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
|
}
|
|
button.m3.m3-fab.m3 {
|
|
contain: content;
|
|
box-sizing: border-box;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
border: none;
|
|
gap: 12px;
|
|
}
|
|
button.m3.m3-fab:before {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
|
content: "";
|
|
}
|
|
button.m3.m3-fab.surface {
|
|
color: var(--md-sys-color-primary);
|
|
background-color: var(--md-sys-color-surface-container-high);
|
|
}
|
|
button.m3.m3-fab.surface:not(.without-elevation) {
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
|
}
|
|
button.m3.m3-fab.surface > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
button.m3.m3-fab.surface > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-fab.surface:not(button.m3.m3-fab.surface:has(span.m3.m3-ripple-domain)):active:before {
|
|
background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
|
}
|
|
button.m3.m3-fab.primary {
|
|
color: var(--md-sys-color-on-primary-container);
|
|
background-color: var(--md-sys-color-primary-container);
|
|
}
|
|
button.m3.m3-fab.primary:not(.without-elevation) {
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
|
}
|
|
button.m3.m3-fab.primary > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-on-primary-container);
|
|
}
|
|
button.m3.m3-fab.primary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
|
|
}
|
|
button.m3.m3-fab.primary:not(button.m3.m3-fab.primary:has(span.m3.m3-ripple-domain)):active:before {
|
|
background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 20%, transparent);
|
|
}
|
|
button.m3.m3-fab.secondary {
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
}
|
|
button.m3.m3-fab.secondary:not(.without-elevation) {
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
|
}
|
|
button.m3.m3-fab.secondary > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
button.m3.m3-fab.secondary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
|
}
|
|
button.m3.m3-fab.secondary:not(button.m3.m3-fab.secondary:has(span.m3.m3-ripple-domain)):active:before {
|
|
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent);
|
|
}
|
|
button.m3.m3-fab.tertiary {
|
|
color: var(--md-sys-color-on-tertiary-container);
|
|
background-color: var(--md-sys-color-tertiary-container);
|
|
}
|
|
button.m3.m3-fab.tertiary:not(.without-elevation) {
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
|
|
}
|
|
button.m3.m3-fab.tertiary > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-on-tertiary-container);
|
|
}
|
|
button.m3.m3-fab.tertiary > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
|
|
}
|
|
button.m3.m3-fab.tertiary:not(button.m3.m3-fab.tertiary:has(span.m3.m3-ripple-domain)):active:before {
|
|
background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 20%, transparent);
|
|
}
|
|
button.m3.m3-fab.m3-small-fab {
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 11px;
|
|
border-radius: 12px;
|
|
font-size: 24px;
|
|
}
|
|
button.m3.m3-fab.m3-default-fab {
|
|
width: 56px;
|
|
height: 56px;
|
|
padding: 19px;
|
|
border-radius: 16px;
|
|
font-size: 24px;
|
|
}
|
|
button.m3.m3-fab.m3-large-fab {
|
|
width: 96px;
|
|
height: 96px;
|
|
padding: 34.5px;
|
|
border-radius: 28px;
|
|
font-size: 36px;
|
|
}
|
|
button.m3.m3-fab.m3-extended-fab {
|
|
width: auto;
|
|
height: 56px;
|
|
padding: 19px;
|
|
border-radius: 16px;
|
|
font-size: 24px;
|
|
}
|
|
button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):hover {
|
|
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
|
|
}
|
|
button.m3.m3-fab:not(.without-elevation):is(.surface, .primary, .secondary, .tertiary):active {
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
button.m3.m3-fab:hover.surface:before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
}
|
|
button.m3.m3-fab:hover.primary:before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, transparent);
|
|
}
|
|
button.m3.m3-fab:hover.secondary:before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
|
}
|
|
button.m3.m3-fab:hover.tertiary:before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, transparent);
|
|
}
|
|
button.m3.m3-fab:focus-visible.surface:before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-fab:focus-visible.primary:before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 12%, transparent);
|
|
}
|
|
button.m3.m3-fab:focus-visible.secondary:before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
|
}
|
|
button.m3.m3-fab:focus-visible.tertiary:before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
|
|
}
|
|
|
|
button.m3.m3-common-button.filled {
|
|
background-color: var(--md-sys-color-primary);
|
|
}
|
|
button.m3.m3-common-button.filled, button.m3.m3-common-button.filled > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-on-primary);
|
|
color: var(--md-sys-color-on-primary);
|
|
}
|
|
button.m3.m3-common-button.outlined {
|
|
outline-offset: -1px;
|
|
background-color: transparent;
|
|
color: var(--md-sys-color-primary);
|
|
outline: 1px solid var(--md-sys-color-outline) !important;
|
|
}
|
|
button.m3.m3-common-button.outlined > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
button.m3.m3-common-button.text {
|
|
background-color: transparent;
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
button.m3.m3-common-button.text > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
button.m3.m3-common-button.elevated {
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
color: var(--md-sys-color-primary);
|
|
background-color: var(--md-sys-color-surface-container-low);
|
|
}
|
|
button.m3.m3-common-button.elevated > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
button.m3.m3-common-button.tonal {
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
}
|
|
button.m3.m3-common-button.tonal > svg.m3-svg-icon {
|
|
fill: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
button.m3.m3-common-button.filled > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-common-button:is(.outlined, .text, .elevated) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-common-button.tonal > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
|
}
|
|
button.m3.m3-common-button:active:is(.filled, .tonal) {
|
|
box-shadow: none !important;
|
|
}
|
|
button.m3.m3-common-button:active.elevated {
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).outlined {
|
|
border-color: var(--md-sys-color-primary) !important;
|
|
}
|
|
button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).filled {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 20%, var(--md-sys-color-primary));
|
|
}
|
|
button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)):is(.outlined, .text, .elevated) {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
|
}
|
|
button.m3.m3-common-button:active:not(button.m3.m3-common-button:active:has(span.m3.m3-ripple-domain)).tonal {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, var(--md-sys-color-secondary-container));
|
|
}
|
|
button.m3.m3-common-button:focus-visible.outlined {
|
|
border-color: var(--md-sys-color-primary) !important;
|
|
}
|
|
button.m3.m3-common-button:focus-visible.filled {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, var(--md-sys-color-primary));
|
|
}
|
|
button.m3.m3-common-button:focus-visible:is(.outlined, .text, .elevated) {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-common-button:focus-visible.tonal {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, var(--md-sys-color-secondary-container));
|
|
}
|
|
button.m3.m3-common-button:hover:is(.filled, .tonal) {
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
button.m3.m3-common-button:hover.elevated {
|
|
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
button.m3.m3-common-button:hover.filled {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
|
|
}
|
|
button.m3.m3-common-button:hover:is(.outlined, .text, .elevated) {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
}
|
|
button.m3.m3-common-button:hover.tonal {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
|
|
}
|
|
button.m3.m3-common-button:disabled {
|
|
pointer-events: none;
|
|
}
|
|
button.m3.m3-common-button:disabled:is(.filled, .elevated, .tonal, .outlined, .text) {
|
|
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
|
}
|
|
button.m3.m3-common-button:disabled:is(.filled, .elevated, .tonal) {
|
|
background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
}
|
|
button.m3.m3-common-button:disabled.elevated {
|
|
box-shadow: none;
|
|
}
|
|
button.m3.m3-common-button:disabled.outlined {
|
|
outline: 1px solid color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
|
|
}
|
|
|
|
button.m3.m3-icon-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
contain: content;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
flex-direction: row;
|
|
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
|
}
|
|
button.m3.m3-icon-button::before {
|
|
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
button.m3.m3-icon-button > span.m3-icon {
|
|
z-index: 25;
|
|
font-size: 24px;
|
|
font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
|
|
}
|
|
button.m3.m3-icon-button.default, button.m3.m3-icon-button.default:not(.selected).toggled {
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent);
|
|
background-color: transparent;
|
|
}
|
|
button.m3.m3-icon-button.default.selected.toggled {
|
|
fill: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
|
|
background-color: transparent;
|
|
}
|
|
button.m3.m3-icon-button.default:disabled, button.m3.m3-icon-button.default.selected:disabled, button.m3.m3-icon-button.default.selected.toggled:disabled {
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
|
background-color: transparent;
|
|
}
|
|
button.m3.m3-icon-button.filled {
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-primary) 100%, transparent);
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
|
|
}
|
|
button.m3.m3-icon-button.filled:not(.selected).toggled {
|
|
fill: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
|
|
background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 100%, transparent);
|
|
}
|
|
button.m3.m3-icon-button.filled.selected.toggled {
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-primary) 100%, transparent);
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 100%, transparent);
|
|
}
|
|
button.m3.m3-icon-button.tonal:not(.selected).toggled {
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent);
|
|
background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 100%, transparent);
|
|
}
|
|
button.m3.m3-icon-button.tonal.selected.toggled, button.m3.m3-icon-button.tonal {
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 100%, transparent);
|
|
background-color: color-mix(in srgb, var(--md-sys-color-secondary-container) 100%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button.outlined {
|
|
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 100%, transparent);
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 100%, transparent);
|
|
background-color: transparent;
|
|
}
|
|
button.m3.m3-icon-button.outlined.selected.toggled {
|
|
border: 0 solid transparent;
|
|
fill: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 100%, transparent);
|
|
background-color: color-mix(in srgb, var(--md-sys-color-inverse-surface) 100%, transparent);
|
|
}
|
|
button.m3.m3-icon-button.outlined:disabled {
|
|
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 38%, transparent);
|
|
background-color: transparent;
|
|
}
|
|
button.m3.m3-icon-button.outlined.selected.toggled:disabled {
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button.filled:not(:disabled):is(button.m3.m3-icon-button.filled:not(:disabled).selected.toggled, button.m3.m3-icon-button.filled:not(:disabled)) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button.filled:not(:disabled):is(button.m3.m3-icon-button.filled:not(:disabled).toggled):not(button.m3.m3-icon-button.filled:not(:disabled).toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.outlined).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(.default).toggled.selected > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled, button.m3.m3-icon-button.tonal:not(:disabled)):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button.tonal:not(:disabled):is(button.m3.m3-icon-button.tonal:not(:disabled).toggled):not(button.m3.m3-icon-button.tonal:not(:disabled).toggled.selected) > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:hover:not(:disabled).filled::before, button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:hover:not(:disabled).tonal::before, button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 8%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))):is(.default, .outlined)::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.toggled.selected::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).filled.toggled::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal::before, button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled.selected::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
|
}
|
|
button.m3.m3-icon-button:is(button.m3.m3-icon-button:focus-visible:not(:disabled), button.m3.m3-icon-button:active:not(:disabled, button.m3.m3-icon-button:has(span.m3.m3-ripple-domain))).tonal.toggled::before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent);
|
|
}
|
|
|
|
.m3.m3-density-0 > button.m3.m3-button-segment {
|
|
height: 40px;
|
|
padding: 10px 12px;
|
|
}
|
|
.m3.m3-density-0 > button.m3.m3-button-segment:first-child {
|
|
border-radius: 20px 0 0 20px;
|
|
}
|
|
.m3.m3-density-0 > button.m3.m3-button-segment:last-child {
|
|
border-radius: 0 20px 20px 0;
|
|
}
|
|
|
|
.m3.m3-density--1 > button.m3.m3-button-segment {
|
|
height: 36px;
|
|
padding: 8px 12px;
|
|
}
|
|
.m3.m3-density--1 > button.m3.m3-button-segment:first-child {
|
|
border-radius: 18px 0 0 18px;
|
|
}
|
|
.m3.m3-density--1 > button.m3.m3-button-segment:last-child {
|
|
border-radius: 0 18px 18px 0;
|
|
}
|
|
|
|
.m3.m3-density--2 > button.m3.m3-button-segment {
|
|
height: 32px;
|
|
padding: 6px 12px;
|
|
}
|
|
.m3.m3-density--2 > button.m3.m3-button-segment:first-child {
|
|
border-radius: 16px 0 0 16px;
|
|
}
|
|
.m3.m3-density--2 > button.m3.m3-button-segment:last-child {
|
|
border-radius: 0 16px 16px 0;
|
|
}
|
|
|
|
.m3.m3-density--3 > button.m3.m3-button-segment {
|
|
height: 28px;
|
|
padding: 4px 12px;
|
|
}
|
|
.m3.m3-density--3 > button.m3.m3-button-segment:first-child {
|
|
border-radius: 14px 0 0 14px;
|
|
}
|
|
.m3.m3-density--3 > button.m3.m3-button-segment:last-child {
|
|
border-radius: 0 14px 14px 0;
|
|
}
|
|
|
|
div.m3.m3-segmented-buttons {
|
|
width: 100%;
|
|
padding: 4px 0;
|
|
border-radius: 20px;
|
|
display: inline-flex;
|
|
box-sizing: border-box;
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
|
|
width: 100%;
|
|
min-width: 48px;
|
|
border-radius: 0;
|
|
margin: 0 -0.5px;
|
|
display: inline-flex;
|
|
background-color: transparent;
|
|
border: 1px solid var(--md-sys-color-outline);
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:before {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
|
content: "";
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain {
|
|
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-ripple-domain > span.m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer) {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
height: inherit;
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3:is(.m3-button-segment-frame-layer, .m3-button-segment-content-layer) > svg.m3.m3-svg-icon {
|
|
height: inherit;
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-frame-layer {
|
|
box-sizing: border-box;
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-frame-layer > * {
|
|
visibility: hidden;
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer {
|
|
position: absolute;
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon {
|
|
display: none;
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
|
|
background-color: var(--md-sys-color-secondary-container);
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon > text {
|
|
fill: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > label.m3.m3-typography {
|
|
color: var(--md-sys-color-on-secondary-container);
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span.m3.m3-button-segment-content-layer > svg.m3.m3-svg-icon {
|
|
display: initial;
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:disabled):hover:before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:has(span.m3.m3-ripple-domain)):active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible):before {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 20%, transparent);
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled {
|
|
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
|
|
}
|
|
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * {
|
|
opacity: 38%;
|
|
}
|
|
|
|
div.m3.m3-radio-container {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
div.m3.m3-radio-container + label.m3.m3-radio-label {
|
|
margin-inline: 3px;
|
|
}
|
|
div.m3.m3-radio-container > span.m3-checkbox-ripple-layer, div.m3.m3-radio-container span.m3.m3-radio-state-layer {
|
|
z-index: 5;
|
|
width: 40px;
|
|
height: 40px;
|
|
aspect-ratio: 1;
|
|
}
|
|
div.m3.m3-radio-container > span.m3.m3-radio-state-layer {
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio {
|
|
margin: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
aspect-ratio: 1;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
position: absolute;
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio-container > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
|
|
stroke-opacity: 38%;
|
|
stroke: var(--md-sys-color-on-surface);
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
|
|
fill-opacity: 38%;
|
|
fill: var(--md-sys-color-on-surface);
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
|
|
stroke: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
|
|
fill-opacity: 0;
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
|
|
stroke: var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-radio-container > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
|
|
fill-opacity: 1;
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-radio-container svg {
|
|
margin: 0;
|
|
width: 20px;
|
|
z-index: 10;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
aspect-ratio: inherit;
|
|
}
|
|
div.m3.m3-radio-container svg > circle {
|
|
transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
div.m3.m3-radio-container svg > circle.m3-radio-outline {
|
|
r: 9px;
|
|
fill: black;
|
|
fill-opacity: 0;
|
|
stroke-width: 2px;
|
|
stroke: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
div.m3.m3-radio-container svg > circle.m3-radio-state {
|
|
r: 5px;
|
|
}
|
|
|
|
div.m3.m3-slider-container {
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
div.m3.m3-slider-container > datalist {
|
|
display: none;
|
|
}
|
|
|
|
input[type=range].m3.m3-slider {
|
|
margin: 0;
|
|
appearance: none;
|
|
border-radius: 2px;
|
|
margin-inline: 8px;
|
|
background: var(--md-sys-color-surface-container-highest);
|
|
}
|
|
input[type=range].m3.m3-slider:-moz-any(input[type=range].m3.m3-slider) {
|
|
height: 4px;
|
|
}
|
|
input[type=range].m3.m3-slider:-webkit-any(input[type=range].m3.m3-slider) {
|
|
background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%);
|
|
}
|
|
input[type=range].m3.m3-slider::-moz-range-track {
|
|
height: 4px;
|
|
overflow: hidden;
|
|
border-radius: 2px;
|
|
}
|
|
input[type=range].m3.m3-slider::-moz-range-progress {
|
|
height: 4px;
|
|
overflow: hidden;
|
|
border-radius: 2px;
|
|
background-color: var(--md-sys-color-primary);
|
|
}
|
|
input[type=range].m3.m3-slider::-moz-range-thumb {
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
width: 20px;
|
|
height: 20px;
|
|
appearance: none;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
outline: 10px solid transparent;
|
|
background: var(--md-sys-color-primary);
|
|
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
border: none;
|
|
}
|
|
input[type=range].m3.m3-slider::-moz-range-thumb:hover {
|
|
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
}
|
|
input[type=range].m3.m3-slider::-moz-range-thumb:hover::after {
|
|
content: "1";
|
|
}
|
|
input[type=range].m3.m3-slider::-moz-range-thumb:is(:active, :focus-visible) {
|
|
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
input[type=range].m3.m3-slider::-webkit-slider-container {
|
|
height: 4px;
|
|
appearance: none;
|
|
box-shadow: none;
|
|
border-radius: 2px;
|
|
min-block-size: 4px;
|
|
}
|
|
input[type=range].m3.m3-slider::-webkit-slider-runnable-track {
|
|
height: 20px;
|
|
}
|
|
input[type=range].m3.m3-slider::-webkit-slider-thumb {
|
|
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
width: 20px;
|
|
height: 20px;
|
|
appearance: none;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
outline: 10px solid transparent;
|
|
background: var(--md-sys-color-primary);
|
|
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
input[type=range].m3.m3-slider::-webkit-slider-thumb:hover {
|
|
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
}
|
|
input[type=range].m3.m3-slider::-webkit-slider-thumb:hover::after {
|
|
content: "1";
|
|
}
|
|
input[type=range].m3.m3-slider::-webkit-slider-thumb:is(:active, :focus-visible) {
|
|
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
|
|
div.m3.m3-switch {
|
|
gap: 20px;
|
|
margin: 4px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: left;
|
|
box-sizing: content-box;
|
|
}
|
|
div.m3.m3-switch > svg {
|
|
width: 52px;
|
|
height: 32px;
|
|
overflow: visible;
|
|
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
div.m3.m3-switch > svg > g {
|
|
transform: translate(11.5%, 81%);
|
|
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
div.m3.m3-switch > svg > g > text {
|
|
font-size: 20px;
|
|
font-family: Material-Symbols-Outlined-Regular, serif;
|
|
}
|
|
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
|
|
cy: 50%;
|
|
cx: 16px;
|
|
transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
|
|
r: 20px;
|
|
fill-opacity: 0;
|
|
}
|
|
div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
|
|
r: 8px;
|
|
}
|
|
div.m3.m3-switch > svg > rect.m3.m3-switch-track {
|
|
transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
stroke-width: 2px;
|
|
border-radius: 16px;
|
|
rx: 15px;
|
|
width: 50px;
|
|
height: 30px;
|
|
}
|
|
div.m3.m3-switch > input.m3 {
|
|
margin: 0;
|
|
width: 52px;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
position: absolute;
|
|
opacity: 0 !important;
|
|
}
|
|
div.m3.m3-switch > input.m3:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
|
|
fill: var(--md-sys-color-outline);
|
|
}
|
|
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
|
|
transform: translate(50%, 81%);
|
|
}
|
|
div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
|
|
fill: var(--md-sys-color-on-primary);
|
|
}
|
|
div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
|
|
fill: var(--md-sys-color-on-primary);
|
|
}
|
|
div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
|
|
fill: var(--md-sys-color-on-primary-container);
|
|
}
|
|
div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
|
|
fill: var(--md-sys-color-surface);
|
|
}
|
|
div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
|
|
r: 12px;
|
|
}
|
|
div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
|
|
opacity: 0;
|
|
}
|
|
div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
|
|
cx: calc(100% - 16px);
|
|
}
|
|
div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
|
|
opacity: 0;
|
|
}
|
|
div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:checked, div.m3.m3-switch > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
|
|
r: 14px;
|
|
}
|
|
div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
|
|
fill-opacity: 38%;
|
|
fill: var(--md-sys-color-on-surface);
|
|
}
|
|
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
|
|
fill: var(--md-sys-color-primary-container);
|
|
}
|
|
div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
|
|
fill-opacity: 8%;
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
|
|
fill: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
|
|
fill-opacity: 8%;
|
|
fill: var(--md-sys-color-on-surface);
|
|
}
|
|
div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
|
|
fill-opacity: 12%;
|
|
fill: var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
|
|
fill-opacity: 12%;
|
|
fill: var(--md-sys-color-on-surface);
|
|
}
|
|
div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
|
|
rx: 16px;
|
|
width: 52px;
|
|
height: 32px;
|
|
stroke-width: 0;
|
|
}
|
|
div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:not(:checked), div.m3.m3-switch > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
|
|
x: 1px;
|
|
y: 1px;
|
|
}
|
|
div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
|
|
stroke: var(--md-sys-color-outline);
|
|
fill: var(--md-sys-color-surface-container-highest);
|
|
}
|
|
div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
|
|
fill: var(--md-sys-color-primary);
|
|
stroke: var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
|
|
fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
|
|
}
|
|
div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
|
|
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent);
|
|
}
|
|
div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
|
|
transform: translateX(38.5%);
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
|
|
}
|
|
div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
|
|
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
|
|
}
|
|
|
|
div.m3.m3-checkbox-container {
|
|
gap: 16px;
|
|
height: 40px;
|
|
display: flex;
|
|
aspect-ratio: 1;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
div.m3.m3-checkbox-container > span.m3.m3-checkbox-state-layer {
|
|
width: 40px;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
div.m3.m3-checkbox-container > span.m3.m3-checkbox-ripple-layer {
|
|
z-index: 20;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
contain: content;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
}
|
|
|
|
input[type=checkbox].m3.m3-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
width: 1.125rem;
|
|
height: 1.125rem;
|
|
appearance: none;
|
|
position: absolute;
|
|
border-radius: 0.14rem;
|
|
box-sizing: content-box;
|
|
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
|
|
position: absolute;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
transition: color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) {
|
|
background: var(--md-sys-color-on-error);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate)) ~ span.m3-checkbox-state {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:is(:user-invalid, .m3.m3-error):not(:checked) ~ span.m3-checkbox-state {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) {
|
|
background: var(--md-sys-color-on-primary);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:is(:checked:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, input[type=checkbox].m3.m3-checkbox):not(.m3.m3-error, :disabled)) ~ span.m3-checkbox-state {
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:disabled ~ *:is(:hover, input[type=checkbox].m3.m3-checkbox:disabled ~ *, :checked) {
|
|
opacity: 38%;
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox ~ span.m3-checkbox-state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
line-height: 24px;
|
|
pointer-events: none;
|
|
font-family: Material-Symbols-Outlined-Regular, sans-serif;
|
|
font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before {
|
|
content: "check_box_outline_blank";
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:indeterminate ~ span.m3-checkbox-state::before {
|
|
content: "indeterminate_check_box";
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:checked ~ span.m3-checkbox-state::before {
|
|
content: "check_box";
|
|
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover) ~ span.m3.m3-checkbox-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:not(:disabled):is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:not(:disabled):hover ~ span.m3-checkbox-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
|
|
}
|
|
input[type=checkbox].m3.m3-checkbox:not(:disabled):active ~ span.m3.m3-checkbox-state-layer ~ span.m3-ripple-domain > .m3.m3-ripple {
|
|
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
|
|
}
|
|
|
|
div.m3.m3-text-field {
|
|
margin: 0;
|
|
display: flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
justify-content: center;
|
|
}
|
|
div.m3.m3-text-field span.m3-icon.icon-before {
|
|
align-self: start;
|
|
}
|
|
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder, div.m3.m3-text-field > input, div.m3.m3-text-field > label {
|
|
font-size: var(--md-sys-typescale-body-large-font-size);
|
|
font-weight: var(--md-sys-typescale-body-large-font-weight);
|
|
line-height: var(--md-sys-typescale-body-large-line-height);
|
|
font-family: var(--md-sys-typescale-body-large-font-family-name);
|
|
letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
|
|
}
|
|
div.m3.m3-text-field + span.m3-text-field-supporting-text {
|
|
font-size: var(--md-sys-typescale-body-small-font-size);
|
|
font-weight: var(--md-sys-typescale-body-small-font-weight);
|
|
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
font-family: var(--md-sys-typescale-body-small-font-family-name);
|
|
letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
|
|
display: flex;
|
|
margin: 4px 16px 2px 16px;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
div.m3.m3-text-field > label {
|
|
position: absolute;
|
|
padding-inline: 4px;
|
|
pointer-events: none;
|
|
transform: translate(16px, 0);
|
|
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
div.m3.m3-text-field > input {
|
|
border: none;
|
|
background-color: transparent;
|
|
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
div.m3.m3-text-field > span.m3-icon {
|
|
width: 24px;
|
|
margin: 12px;
|
|
font-size: 24px;
|
|
align-self: end;
|
|
cursor: pointer;
|
|
display: inherit;
|
|
line-height: 24px;
|
|
position: absolute;
|
|
align-items: center;
|
|
justify-content: inherit;
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
font-family: Material-Symbols-Outlined-Regular, serif;
|
|
}
|
|
div.m3.m3-text-field > span.m3-text-field-state-layer {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
div.m3.m3-text-field > input, div.m3.m3-text-field > label {
|
|
color: var(--md-sys-color-on-surface);
|
|
}
|
|
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
|
|
color: var(--md-sys-color-on-surface-variant);
|
|
}
|
|
div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
|
|
outline: none;
|
|
caret-color: var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *, div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) + span.m3-text-field-supporting-text {
|
|
opacity: 38%;
|
|
}
|
|
div.m3.m3-text-field.filled {
|
|
contain: content;
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
div.m3.m3-text-field.filled > input {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
box-sizing: border-box;
|
|
border-radius: 4px 4px 0 0;
|
|
background-color: var(--md-sys-color-surface-container-highest);
|
|
box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant);
|
|
}
|
|
div.m3.m3-text-field.filled > input.with-after-icon {
|
|
padding: 24px 48px 8px 16px;
|
|
}
|
|
div.m3.m3-text-field.filled > input.with-before-icon {
|
|
padding: 24px 16px 8px 48px;
|
|
}
|
|
div.m3.m3-text-field.filled > input.with-before-icon + label {
|
|
margin-left: 32px;
|
|
}
|
|
div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
|
|
padding: 24px 16px 8px;
|
|
}
|
|
div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
|
|
padding: 24px 48px 8px 48px;
|
|
}
|
|
div.m3.m3-text-field.filled > label.raised {
|
|
font-size: var(--md-sys-typescale-body-small-font-size);
|
|
font-weight: var(--md-sys-typescale-body-small-font-weight);
|
|
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
font-family: var(--md-sys-typescale-body-small-font-family-name);
|
|
letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
|
|
transform: translate(12px, -12px);
|
|
}
|
|
div.m3.m3-text-field.filled > input:required:user-invalid {
|
|
caret-color: var(--md-sys-color-error);
|
|
}
|
|
div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
|
|
box-shadow: inset 0 -3px 0 var(--md-sys-color-error);
|
|
}
|
|
div.m3.m3-text-field.filled > input:required:user-invalid {
|
|
box-shadow: inset 0 -1px 0 var(--md-sys-color-error);
|
|
}
|
|
div.m3.m3-text-field.filled:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.filled:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
div.m3.m3-text-field.filled > input:focus-visible {
|
|
outline-offset: 3px;
|
|
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-text-field.filled > input:focus-visible + label {
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-text-field.filled:hover > input:not(:disabled) ~ span.m3-text-field-state-layer {
|
|
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
|
|
}
|
|
div.m3.m3-text-field.outlined > fieldset {
|
|
margin: 0;
|
|
position: absolute;
|
|
border-radius: 4px;
|
|
pointer-events: none;
|
|
padding-inline: 12px;
|
|
inset: -7.5px 0px 0px 0px;
|
|
border: 1px solid var(--md-sys-color-outline);
|
|
transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
div.m3.m3-text-field.outlined > fieldset > legend > span {
|
|
width: 100%;
|
|
}
|
|
div.m3.m3-text-field.outlined > fieldset > legend {
|
|
width: 0;
|
|
opacity: 0;
|
|
padding: 0;
|
|
pointer-events: none;
|
|
border: 0 solid transparent;
|
|
transition: 0.05s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
div.m3.m3-text-field.outlined > fieldset > legend.raised {
|
|
width: auto;
|
|
visibility: visible;
|
|
border-style: solid;
|
|
border-inline-width: 6px;
|
|
border-color: transparent;
|
|
}
|
|
div.m3.m3-text-field.outlined > input {
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
}
|
|
div.m3.m3-text-field.outlined > input.with-after-icon {
|
|
padding: 16px 48px 16px 16px;
|
|
}
|
|
div.m3.m3-text-field.outlined > input.with-before-icon {
|
|
padding: 16px 16px 16px 48px;
|
|
}
|
|
div.m3.m3-text-field.outlined > input.with-before-icon + label {
|
|
transform: translate(48px, 0);
|
|
}
|
|
div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
|
|
padding: 16px;
|
|
}
|
|
div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
|
|
padding: 16px 48px;
|
|
}
|
|
div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
|
|
border: 3px solid var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(label.raised)):has(input:focus-visible) > fieldset > legend {
|
|
border-top-width: 0;
|
|
border-style: solid;
|
|
border-bottom-width: 0;
|
|
border-color: transparent;
|
|
border-inline-width: 5.5px;
|
|
}
|
|
div.m3.m3-text-field.outlined:not(div.m3.m3-text-field.outlined:has(input:focus-visible)):has(label.raised) > fieldset > legend {
|
|
border-top-width: 0;
|
|
border-style: solid;
|
|
border-bottom-width: 0;
|
|
border-color: transparent;
|
|
border-inline-width: 7.5px;
|
|
}
|
|
div.m3.m3-text-field.outlined > input:focus-visible + label {
|
|
color: var(--md-sys-color-primary);
|
|
}
|
|
div.m3.m3-text-field.outlined > label.raised, div.m3.m3-text-field.outlined > fieldset > * {
|
|
font-size: var(--md-sys-typescale-body-small-font-size);
|
|
font-weight: var(--md-sys-typescale-body-small-font-weight);
|
|
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
font-family: var(--md-sys-typescale-body-small-font-family-name);
|
|
letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
|
|
}
|
|
div.m3.m3-text-field.outlined > label.raised {
|
|
transform: translate(16px, -27px) !important;
|
|
}
|
|
div.m3.m3-text-field.outlined > input:required:user-invalid {
|
|
caret-color: var(--md-sys-color-error);
|
|
}
|
|
div.m3.m3-text-field.outlined:has(input:required:user-invalid) > *:not(input):nth-last-child(-n+3), div.m3.m3-text-field.outlined:has(input:required:user-invalid) + span.m3-text-field-supporting-text {
|
|
color: var(--md-sys-color-error);
|
|
}
|
|
div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
|
|
border: 3px solid var(--md-sys-color-error);
|
|
}
|
|
div.m3.m3-text-field.outlined:has(input:required:user-invalid:not(:focus-visible)) > fieldset {
|
|
border: 1px solid var(--md-sys-color-error);
|
|
}
|
|
div.m3.m3-text-field.outlined:hover:not(div.m3.m3-text-field.outlined:hover:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset {
|
|
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
|
|
border-color: var(--md-sys-color-on-surface);
|
|
}
|
|
|
|
html {
|
|
font-family: Roboto, serif;
|
|
color: var(--md-sys-color-on-surface);
|
|
background-color: var(--md-sys-color-surface-container);
|
|
}
|
|
|
|
.m3.m3-wrapper {
|
|
position: relative;
|
|
display: block;
|
|
background-color: var(--md-sys-color-surface);
|
|
border-radius: 25px;
|
|
}
|
|
|
|
button:not(.m3-fab, .m3-icon-button) {
|
|
font-size: var(--md-sys-typescale-label-large-font-size);
|
|
font-weight: var(--md-sys-typescale-label-large-font-weight);
|
|
line-height: var(--md-sys-typescale-label-large-line-height);
|
|
font-family: var(--md-sys-typescale-label-large-font-family-name);
|
|
letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
|
|
max-height: 40px;
|
|
width: min-content;
|
|
white-space: nowrap;
|
|
height: min-content;
|
|
box-sizing: border-box;
|
|
transition: background-color, box-shadow, 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
|
|
}
|
|
button:not(.m3-fab, .m3-icon-button).m3 {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
border: none;
|
|
contain: content;
|
|
text-align: center;
|
|
padding: 10px 24px;
|
|
flex-direction: row;
|
|
border-radius: 100px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/*# sourceMappingURL=generics.css.map */
|