| 1 | .surface-tint { |
| 2 | background-color: var(--md-sys-color-surface-tint); |
| 3 | } |
| 4 | .surface-tint-text { |
| 5 | color: var(--md-sys-color-surface-tint); |
| 6 | } |
| 7 | .surface-tint-color { |
| 8 | background-color: var(--md-sys-color-surface-tint-color); |
| 9 | } |
| 10 | .surface-tint-color-text { |
| 11 | color: var(--md-sys-color-surface-tint-color); |
| 12 | } |
| 13 | .on-error-container { |
| 14 | background-color: var(--md-sys-color-on-error-container); |
| 15 | } |
| 16 | .on-error-container-text { |
| 17 | color: var(--md-sys-color-on-error-container); |
| 18 | } |
| 19 | .on-error { |
| 20 | background-color: var(--md-sys-color-on-error); |
| 21 | } |
| 22 | .on-error-text { |
| 23 | color: var(--md-sys-color-on-error); |
| 24 | } |
| 25 | .error-container { |
| 26 | background-color: var(--md-sys-color-error-container); |
| 27 | } |
| 28 | .error-container-text { |
| 29 | color: var(--md-sys-color-error-container); |
| 30 | } |
| 31 | .on-tertiary-container { |
| 32 | background-color: var(--md-sys-color-on-tertiary-container); |
| 33 | } |
| 34 | .on-tertiary-container-text { |
| 35 | color: var(--md-sys-color-on-tertiary-container); |
| 36 | } |
| 37 | .on-tertiary { |
| 38 | background-color: var(--md-sys-color-on-tertiary); |
| 39 | } |
| 40 | .on-tertiary-text { |
| 41 | color: var(--md-sys-color-on-tertiary); |
| 42 | } |
| 43 | .tertiary-container { |
| 44 | background-color: var(--md-sys-color-tertiary-container); |
| 45 | } |
| 46 | .tertiary-container-text { |
| 47 | color: var(--md-sys-color-tertiary-container); |
| 48 | } |
| 49 | .tertiary { |
| 50 | background-color: var(--md-sys-color-tertiary); |
| 51 | } |
| 52 | .tertiary-text { |
| 53 | color: var(--md-sys-color-tertiary); |
| 54 | } |
| 55 | .shadow { |
| 56 | background-color: var(--md-sys-color-shadow); |
| 57 | } |
| 58 | .shadow-text { |
| 59 | color: var(--md-sys-color-shadow); |
| 60 | } |
| 61 | .error { |
| 62 | background-color: var(--md-sys-color-error); |
| 63 | } |
| 64 | .error-text { |
| 65 | color: var(--md-sys-color-error); |
| 66 | } |
| 67 | .outline { |
| 68 | background-color: var(--md-sys-color-outline); |
| 69 | } |
| 70 | .outline-text { |
| 71 | color: var(--md-sys-color-outline); |
| 72 | } |
| 73 | .on-background { |
| 74 | background-color: var(--md-sys-color-on-background); |
| 75 | } |
| 76 | .on-background-text { |
| 77 | color: var(--md-sys-color-on-background); |
| 78 | } |
| 79 | .background { |
| 80 | background-color: var(--md-sys-color-background); |
| 81 | } |
| 82 | .background-text { |
| 83 | color: var(--md-sys-color-background); |
| 84 | } |
| 85 | .inverse-on-surface { |
| 86 | background-color: var(--md-sys-color-inverse-on-surface); |
| 87 | } |
| 88 | .inverse-on-surface-text { |
| 89 | color: var(--md-sys-color-inverse-on-surface); |
| 90 | } |
| 91 | .inverse-surface { |
| 92 | background-color: var(--md-sys-color-inverse-surface); |
| 93 | } |
| 94 | .inverse-surface-text { |
| 95 | color: var(--md-sys-color-inverse-surface); |
| 96 | } |
| 97 | .on-surface-variant { |
| 98 | background-color: var(--md-sys-color-on-surface-variant); |
| 99 | } |
| 100 | .on-surface-variant-text { |
| 101 | color: var(--md-sys-color-on-surface-variant); |
| 102 | } |
| 103 | .on-surface { |
| 104 | background-color: var(--md-sys-color-on-surface); |
| 105 | } |
| 106 | .on-surface-text { |
| 107 | color: var(--md-sys-color-on-surface); |
| 108 | } |
| 109 | .surface-variant { |
| 110 | background-color: var(--md-sys-color-surface-variant); |
| 111 | } |
| 112 | .surface-variant-text { |
| 113 | color: var(--md-sys-color-surface-variant); |
| 114 | } |
| 115 | .surface { |
| 116 | background-color: var(--md-sys-color-surface); |
| 117 | } |
| 118 | .surface-text { |
| 119 | color: var(--md-sys-color-surface); |
| 120 | } |
| 121 | .on-secondary-container { |
| 122 | background-color: var(--md-sys-color-on-secondary-container); |
| 123 | } |
| 124 | .on-secondary-container-text { |
| 125 | color: var(--md-sys-color-on-secondary-container); |
| 126 | } |
| 127 | .on-secondary { |
| 128 | background-color: var(--md-sys-color-on-secondary); |
| 129 | } |
| 130 | .on-secondary-text { |
| 131 | color: var(--md-sys-color-on-secondary); |
| 132 | } |
| 133 | .secondary-container { |
| 134 | background-color: var(--md-sys-color-secondary-container); |
| 135 | } |
| 136 | .secondary-container-text { |
| 137 | color: var(--md-sys-color-secondary-container); |
| 138 | } |
| 139 | .secondary { |
| 140 | background-color: var(--md-sys-color-secondary); |
| 141 | } |
| 142 | .secondary-text { |
| 143 | color: var(--md-sys-color-secondary); |
| 144 | } |
| 145 | .inverse-primary { |
| 146 | background-color: var(--md-sys-color-inverse-primary); |
| 147 | } |
| 148 | .inverse-primary-text { |
| 149 | color: var(--md-sys-color-inverse-primary); |
| 150 | } |
| 151 | .on-primary-container { |
| 152 | background-color: var(--md-sys-color-on-primary-container); |
| 153 | } |
| 154 | .on-primary-container-text { |
| 155 | color: var(--md-sys-color-on-primary-container); |
| 156 | } |
| 157 | .on-primary { |
| 158 | background-color: var(--md-sys-color-on-primary); |
| 159 | } |
| 160 | .on-primary-text { |
| 161 | color: var(--md-sys-color-on-primary); |
| 162 | } |
| 163 | .primary-container { |
| 164 | background-color: var(--md-sys-color-primary-container); |
| 165 | } |
| 166 | .primary-container-text { |
| 167 | color: var(--md-sys-color-primary-container); |
| 168 | } |
| 169 | .primary { |
| 170 | background-color: var(--md-sys-color-primary); |
| 171 | } |
| 172 | .primary-text { |
| 173 | color: var(--md-sys-color-primary); |
| 174 | } |
| 175 |
| 1 | /* |
| 2 | Copyright 2016 Google Inc. All rights reserved. |
| 3 | |
| 4 | Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | you may not use this file except in compliance with the License. |
| 6 | You may obtain a copy of the License at |
| 7 | |
| 8 | http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | |
| 10 | Unless required by applicable law or agreed to in writing, software |
| 11 | distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | See the License for the specific language governing permissions and |
| 14 | limitations under the License. |
| 15 | */ |
| 16 | |
| 17 | :root { |
| 18 | /* Surface tint color */ |
| 19 | --md-sys-elevation-surface-tint-color: var(--md-sys-color-primary); |
| 20 | /* +5 */ |
| 21 | --md-sys-elevation-level5-value: 12px; |
| 22 | --md-sys-elevation-level5-unit: 1px; |
| 23 | --md-sys-elevation-level5: 12px; |
| 24 | /* +4 */ |
| 25 | --md-sys-elevation-level4-value: 8px; |
| 26 | --md-sys-elevation-level4-unit: 1px; |
| 27 | --md-sys-elevation-level4: 8px; |
| 28 | /* +3 */ |
| 29 | --md-sys-elevation-level3-value: 6px; |
| 30 | --md-sys-elevation-level3-unit: 1px; |
| 31 | --md-sys-elevation-level3: 6px; |
| 32 | /* +2 */ |
| 33 | --md-sys-elevation-level2-value: 3px; |
| 34 | --md-sys-elevation-level2-unit: 1px; |
| 35 | --md-sys-elevation-level2: 3px; |
| 36 | /* +1 */ |
| 37 | --md-sys-elevation-level1-value: 1px; |
| 38 | --md-sys-elevation-level1-unit: 1px; |
| 39 | --md-sys-elevation-level1: 1px; |
| 40 | /* 0 */ |
| 41 | --md-sys-elevation-level0-value: 0px; |
| 42 | --md-sys-elevation-level0-unit: 1px; |
| 43 | --md-sys-elevation-level0: 0px; |
| 44 | } |
| 45 | .elevation-0 { |
| 46 | box-shadow: var(--md-sys-elevation-level0); |
| 47 | } |
| 48 | .elevation-1 { |
| 49 | box-shadow: var(--md-sys-elevation-level1); |
| 50 | } |
| 51 | .elevation-2 { |
| 52 | box-shadow: var(--md-sys-elevation-level2); |
| 53 | } |
| 54 | .elevation-3 { |
| 55 | box-shadow: var(--md-sys-elevation-level3); |
| 56 | } |
| 57 | .elevation-4 { |
| 58 | box-shadow: var(--md-sys-elevation-level4); |
| 59 | } |
| 60 | .elevation-5 { |
| 61 | box-shadow: var(--md-sys-elevation-level5); |
| 62 | } |
| 63 |
| 1 | @font-face { |
| 2 | font-family: 'Material Symbols Outlined'; |
| 3 | font-style: normal; |
| 4 | src: |
| 5 | url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].woff2) format('woff2'), |
| 6 | url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].ttf) format('truetype'); |
| 7 | } |
| 8 | |
| 9 | .material-symbols-outlined { |
| 10 | font-family: 'Material Symbols Outlined'; |
| 11 | font-weight: normal; |
| 12 | font-style: normal; |
| 13 | font-size: 1.5rem; |
| 14 | width: 1.5rem; |
| 15 | height: 1.5rem; |
| 16 | /* Preferred icon size */ |
| 17 | display: inline-block; |
| 18 | line-height: 1; |
| 19 | text-transform: none; |
| 20 | letter-spacing: normal; |
| 21 | word-wrap: normal; |
| 22 | white-space: nowrap; |
| 23 | direction: ltr; |
| 24 | } |
| 1 | .md-cards { |
| 2 | margin: 0.5rem; |
| 3 | gap: 0.5rem; |
| 4 | display: grid; |
| 5 | grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); |
| 6 | } |
| 7 | |
| 8 | /* container */ |
| 9 | .md-cards>*::before { |
| 10 | content: ""; |
| 11 | position: absolute; |
| 12 | z-index: -2; |
| 13 | top: 0; |
| 14 | right: 0; |
| 15 | left: 0; |
| 16 | bottom: 0; |
| 17 | background-color: var(--md-sys-color-surface-variant); |
| 18 | } |
| 19 | |
| 20 | /* state layer */ |
| 21 | .md-cards>*::after { |
| 22 | content: ""; |
| 23 | position: absolute; |
| 24 | z-index: -1; |
| 25 | top: 0; |
| 26 | right: 0; |
| 27 | left: 0; |
| 28 | bottom: 0; |
| 29 | background-color: transparent; |
| 30 | } |
| 31 | |
| 32 | .md-cards>* { |
| 33 | position: relative; |
| 34 | display: block; |
| 35 | text-decoration: none; |
| 36 | color: var(--md-sys-color-on-surface-variant); |
| 37 | border-radius: 0.75rem; |
| 38 | overflow: hidden; |
| 39 | box-shadow: var(--md-box_shadow_level0); |
| 40 | } |
| 41 | |
| 42 | /* state layer */ |
| 43 | .md-cards>:hover::after { |
| 44 | background-color: var(--md-sys-color-on-surface-variant); |
| 45 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 46 | } |
| 47 | |
| 48 | .md-cards>a:hover { |
| 49 | box-shadow: var(--md-box_shadow_level1); |
| 50 | } |
| 51 | |
| 52 | /* state layer */ |
| 53 | .md-cards>:focus::after { |
| 54 | background-color: var(--md-sys-color-on-surface-variant); |
| 55 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 56 | } |
| 57 | |
| 58 | .md-cards>a:focus { |
| 59 | outline: none; |
| 60 | } |
| 61 | |
| 62 | /* state layer */ |
| 63 | .md-cards>:active::after { |
| 64 | background-color: var(--md-sys-color-on-surface-variant); |
| 65 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
| 66 | } |
| 67 | |
| 68 | .md-cards a:active { |
| 69 | background-position: center; |
| 70 | background-image: |
| 71 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
| 72 | background-size: 100%; |
| 73 | animation-name: md-ripple; |
| 74 | animation-duration: var(--md-sys-motion-duration-500); |
| 75 | box-shadow: var(--md-box_shadow_level0) !important; |
| 76 | } |
| 77 | |
| 78 | .md-cards>*>* { |
| 79 | display: block; |
| 80 | } |
| 81 | |
| 82 | .md-cards figure { |
| 83 | border-radius: 0.75rem; |
| 84 | padding: 0; |
| 85 | margin: 0; |
| 86 | width: 100%; |
| 87 | } |
| 88 | |
| 89 | .md-cards figure * { |
| 90 | border-radius: 0.75rem; |
| 91 | width: 100%; |
| 92 | } |
| 93 | |
| 94 | .md-cards .headline { |
| 95 | margin: 1rem; |
| 96 | font-family: var(--md-sys-typescale-headline-small-font); |
| 97 | font-weight: var(--md-sys-typescale-headline-small-weight); |
| 98 | font-size: var(--md-sys-typescale-headline-small-size); |
| 99 | font-style: var(--md-sys-typescale-headline-small-font-style); |
| 100 | letter-spacing: var(--md-sys-typescale-headline-small-tracking); |
| 101 | line-height: var(--md-sys-typescale-headline-small-line-height); |
| 102 | text-transform: var(--md-sys-typescale-headline-small-text-transform); |
| 103 | text-decoration: var(--md-sys-typescale-headline-small-text-decoration); |
| 104 | } |
| 105 | |
| 106 | .md-cards a .headline { |
| 107 | text-decoration: underline; |
| 108 | } |
| 109 | |
| 110 | .md-cards .supporting { |
| 111 | margin: 1rem; |
| 112 | font-family: var(--md-sys-typescale-body-large-font); |
| 113 | font-weight: var(--md-sys-typescale-body-large-weight); |
| 114 | font-size: var(--md-sys-typescale-body-large-size); |
| 115 | font-style: var(--md-sys-typescale-body-large-font-style); |
| 116 | letter-spacing: var(--md-sys-typescale-body-large-tracking); |
| 117 | line-height: var(--md-sys-typescale-body-large-line-height); |
| 118 | text-transform: var(--md-sys-typescale-body-large-text-transform); |
| 119 | text-decoration: var(--md-sys-typescale-body-large-text-decoration); |
| 120 | } |
| 1 | .md-fab-primary { |
| 2 | position: relative; |
| 3 | display: inline-block; |
| 4 | border: none; |
| 5 | width: 3.5rem; |
| 6 | height: 3.5rem; |
| 7 | border-radius: var(--md-sys-shape-corner-large-default-size); |
| 8 | overflow: hidden; |
| 9 | padding: 0; |
| 10 | padding-block: 0; |
| 11 | padding-inline: 0; |
| 12 | text-decoration: none; |
| 13 | background-color: var(--md-sys-color-primary-container); |
| 14 | box-shadow: var(--md-box_shadow_level3); |
| 15 | } |
| 16 | |
| 17 | .md-fab-primary[hidden] { |
| 18 | display: none; |
| 19 | } |
| 20 | |
| 21 | /* state layer */ |
| 22 | .md-fab-primary::after { |
| 23 | content: ""; |
| 24 | position: absolute; |
| 25 | top: 0; |
| 26 | right: 0; |
| 27 | left: 0; |
| 28 | bottom: 0; |
| 29 | } |
| 30 | |
| 31 | .md-fab-primary span { |
| 32 | position: relative; |
| 33 | color: var(--md-sys-color-on-primary-container); |
| 34 | } |
| 35 | |
| 36 | .md-fab-primary:hover { |
| 37 | box-shadow: var(--md-box_shadow_level4); |
| 38 | } |
| 39 | |
| 40 | .md-fab-primary:hover::after { |
| 41 | background-color: var(--md-sys-color-on-primary-container); |
| 42 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 43 | } |
| 44 | |
| 45 | .md-fab-primary:hover span { |
| 46 | color: var(--md-sys-color-on-primary-container); |
| 47 | } |
| 48 | |
| 49 | |
| 50 | .md-fab-primary:focus { |
| 51 | box-shadow: var(--md-box_shadow_level3); |
| 52 | outline:none; |
| 53 | /* outline: |
| 54 | var(--md-sys-color-secondary) var(--md-sys-state-focus-indicator-thickness); |
| 55 | outline-offset: var(--md-sys-state-focus-indicator-outer-offset); */ |
| 56 | } |
| 57 | |
| 58 | .md-fab-primary:focus::after { |
| 59 | background-color: var(--md-sys-color-on-primary-container); |
| 60 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 61 | } |
| 62 | |
| 63 | .md-fab-primary:focus span { |
| 64 | color: var(--md-sys-color-on-primary-container); |
| 65 | } |
| 66 | |
| 67 | .md-fab-primary:active { |
| 68 | box-shadow: var(--md-box_shadow_level3); |
| 69 | background-position: center; |
| 70 | background-image: |
| 71 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
| 72 | background-size: 100%; |
| 73 | animation-name: md-ripple; |
| 74 | animation-duration: var(--md-sys-motion-duration-500); |
| 75 | } |
| 76 | |
| 77 | .md-fab-primary:active::after { |
| 78 | background-color: var(--md-sys-color-on-primary-container); |
| 79 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
| 80 | } |
| 81 | |
| 82 | .md-fab-primary:active span { |
| 83 | color: var(--md-sys-color-on-primary-container); |
| 84 | } |
| 1 | /* container */ |
| 2 | .md-filled-button::before { |
| 3 | content: ""; |
| 4 | position: absolute; |
| 5 | z-index: -2; |
| 6 | top: 0; |
| 7 | right: 0; |
| 8 | left: 0; |
| 9 | bottom: 0; |
| 10 | background-color: var(--md-sys-color-primary); |
| 11 | } |
| 12 | |
| 13 | /* state layer */ |
| 14 | .md-filled-button::after { |
| 15 | content: ""; |
| 16 | position: absolute; |
| 17 | z-index: -1; |
| 18 | top: 0; |
| 19 | right: 0; |
| 20 | left: 0; |
| 21 | bottom: 0; |
| 22 | background-color: transparent; |
| 23 | } |
| 24 | |
| 25 | /* label, shape */ |
| 26 | .md-filled-button { |
| 27 | position: relative; |
| 28 | box-sizing: border-box; |
| 29 | border-radius: 1.25rem; |
| 30 | height: 2.5rem; |
| 31 | line-height: 2.5rem; |
| 32 | padding: 0 1.5rem; |
| 33 | border: none; |
| 34 | background-color: transparent; |
| 35 | box-shadow: var(--md-box_shadow_level0); |
| 36 | font-family: var(--md-sys-typescale-label-large-font); |
| 37 | font-weight: var(--md-sys-typescale-label-large-weight); |
| 38 | font-size: var(--md-sys-typescale-label-large-size); |
| 39 | font-style: var(--md-sys-typescale-label-large-font-style); |
| 40 | letter-spacing: var(--md-sys-typescale-label-large-tracking); |
| 41 | text-transform: var(--md-sys-typescale-label-large-text-transform); |
| 42 | text-decoration: var(--md-sys-typescale-label-large-text-decoration); |
| 43 | color: var(--md-sys-color-on-primary); |
| 44 | white-space: nowrap; |
| 45 | text-overflow: ellipsis; |
| 46 | overflow: hidden; |
| 47 | } |
| 48 | |
| 49 | /* label, shape */ |
| 50 | .md-filled-button:hover { |
| 51 | color: var(--md-sys-color-on-primary); |
| 52 | box-shadow: var(--md-box_shadow_level1); |
| 53 | } |
| 54 | |
| 55 | /* state layer */ |
| 56 | .md-filled-button:hover::after { |
| 57 | background-color: var(--md-sys-color-on-primary); |
| 58 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 59 | } |
| 60 | |
| 61 | /* label, shape */ |
| 62 | .md-filled-button:focus { |
| 63 | outline: none; |
| 64 | color: var(--md-sys-color-on-primary); |
| 65 | box-shadow: var(--md-box_shadow_level0) !important; |
| 66 | } |
| 67 | |
| 68 | /* state layer */ |
| 69 | .md-filled-button:focus::after { |
| 70 | background-color: var(--md-sys-color-on-primary); |
| 71 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 72 | } |
| 73 | |
| 74 | /* label, shape */ |
| 75 | .md-filled-button:active { |
| 76 | color: var(--md-sys-color-on-primary); |
| 77 | background-position: center; |
| 78 | background-image: |
| 79 | radial-gradient(circle, var(--md-sys-color-on-primary-container) 1%, transparent 1%); |
| 80 | background-size: 100%; |
| 81 | animation-name: md-ripple; |
| 82 | animation-duration: var(--md-sys-motion-duration-500); |
| 83 | box-shadow: var(--md-box_shadow_level0) !important; |
| 84 | } |
| 85 | |
| 86 | /* state layer */ |
| 87 | .md-filled-button:active::after { |
| 88 | background-color: var(--md-sys-color-on-primary); |
| 89 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
| 90 | } |
| 91 | |
| 92 | /* label, shape */ |
| 93 | .md-filled-button:disabled { |
| 94 | background-color: transparent !important; |
| 95 | color: var(--md-sys-color-on-surface) !important; |
| 96 | opacity: 0.38 !important; |
| 97 | box-shadow: var(--md-box_shadow_level0) !important; |
| 98 | } |
| 99 | |
| 100 | /* container */ |
| 101 | .md-filled-button:disabled::before { |
| 102 | background-color: var(--md-sys-color-on-surface) !important; |
| 103 | opacity: 0.12 !important; |
| 104 | } |
| 105 | |
| 106 | /* state layer */ |
| 107 | .md-filled-button:disabled::after { |
| 108 | background-color: transparent !important; |
| 109 | opacity: 1 !important; |
| 110 | } |
| 1 | .md-filled-text-field { |
| 2 | position: relative; |
| 3 | margin: 1rem; |
| 4 | overflow: hidden; |
| 5 | display: flex; |
| 6 | flex-direction: column; |
| 7 | align-items: stretch; |
| 8 | padding-top: calc(0.5rem + var(--md-sys-typescale-body-small-line-height)); |
| 9 | border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left); |
| 10 | border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right); |
| 11 | overflow: hidden; |
| 12 | } |
| 13 | |
| 14 | /* container */ |
| 15 | .md-filled-text-field::before { |
| 16 | content: ""; |
| 17 | position: absolute; |
| 18 | z-index: -2; |
| 19 | top: 0; |
| 20 | right: 0; |
| 21 | left: 0; |
| 22 | bottom: 0; |
| 23 | background-color: var(--md-sys-color-surface-container-highest); |
| 24 | } |
| 25 | |
| 26 | /* state layer */ |
| 27 | .md-filled-text-field::after { |
| 28 | content: ""; |
| 29 | position: absolute; |
| 30 | z-index: -1; |
| 31 | top: 0; |
| 32 | right: 0; |
| 33 | left: 0; |
| 34 | bottom: 0; |
| 35 | background-color: transparent; |
| 36 | } |
| 37 | |
| 38 | .md-filled-text-field span, |
| 39 | .md-filled-text-field label { |
| 40 | position: absolute; |
| 41 | top: 0.5rem; |
| 42 | left: 1rem; |
| 43 | right: 1rem; |
| 44 | display: block; |
| 45 | transform: translateY(1rem); |
| 46 | transition-property: transform; |
| 47 | transition-duration: var(--md-sys-motion-duration-300); |
| 48 | white-space: nowrap; |
| 49 | text-overflow: ellipsis; |
| 50 | overflow: hidden; |
| 51 | color: var(--md-sys-color-on-surface-variant); |
| 52 | font-family: var(--md-sys-typescale-body-large-font); |
| 53 | font-weight: var(--md-sys-typescale-body-large-weight); |
| 54 | font-size: var(--md-sys-typescale-body-large-size); |
| 55 | font-style: var(--md-sys-typescale-body-large-font-style); |
| 56 | letter-spacing: var(--md-sys-typescale-body-large-tracking); |
| 57 | line-height: var(--md-sys-typescale-body-large-line-height); |
| 58 | text-transform: var(--md-sys-typescale-body-large-text-transform); |
| 59 | text-decoration: var(--md-sys-typescale-body-large-text-decoration); |
| 60 | } |
| 61 | |
| 62 | .md-filled-text-field :not(:placeholder-shown)+label, |
| 63 | .md-filled-text-field .populated+span, |
| 64 | .md-filled-text-field:focus-within span, |
| 65 | .md-filled-text-field:focus-within label, |
| 66 | .md-filled-text-field.float span, |
| 67 | .md-filled-text-field.float label { |
| 68 | transform: translateY(0); |
| 69 | font-family: var(--md-sys-typescale-body-small-font); |
| 70 | font-weight: var(--md-sys-typescale-body-small-weight); |
| 71 | font-size: var(--md-sys-typescale-body-small-size); |
| 72 | font-style: var(--md-sys-typescale-body-small-font-style); |
| 73 | letter-spacing: var(--md-sys-typescale-body-small-tracking); |
| 74 | line-height: var(--md-sys-typescale-body-small-line-height); |
| 75 | text-transform: var(--md-sys-typescale-body-small-text-transform); |
| 76 | text-decoration: var(--md-sys-typescale-body-small-text-decoration); |
| 77 | } |
| 78 | |
| 79 | .md-filled-text-field :not(label, span, small) { |
| 80 | position: relative; |
| 81 | caret-color: var(--md-sys-color-primary); |
| 82 | min-height: 2rem; |
| 83 | box-sizing: border-box; |
| 84 | padding-left: 1rem; |
| 85 | padding-bottom: 0.5rem; |
| 86 | padding-right: 1rem; |
| 87 | border: none; |
| 88 | resize: none; |
| 89 | color: var(--md-sys-color-on-surface); |
| 90 | font-family: var(--md-sys-typescale-body-large-font); |
| 91 | font-weight: var(--md-sys-typescale-body-large-weight); |
| 92 | font-size: var(--md-sys-typescale-body-large-size); |
| 93 | font-style: var(--md-sys-typescale-body-large-font-style); |
| 94 | letter-spacing: var(--md-sys-typescale-body-large-tracking); |
| 95 | line-height: var(--md-sys-typescale-body-large-line-height); |
| 96 | text-transform: var(--md-sys-typescale-body-large-text-transform); |
| 97 | text-decoration: var(--md-sys-typescale-body-large-text-decoration); |
| 98 | background-color: transparent; |
| 99 | outline: none; |
| 100 | border-bottom-width: 0.0625rem; |
| 101 | border-bottom-style: solid; |
| 102 | border-bottom-color: var(--md-sys-color-on-surface-variant); |
| 103 | } |
| 104 | |
| 105 | .md-filled-text-field ::placeholder { |
| 106 | color: transparent; |
| 107 | } |
| 108 | |
| 109 | .md-filled-text-field small { |
| 110 | display: block; |
| 111 | color: var(--md-sys-color-on-surface-variant); |
| 112 | background-color: var(--md-sys-color-background); |
| 113 | font-family: var(--md-sys-typescale-body-small-font); |
| 114 | font-weight: var(--md-sys-typescale-body-small-weight); |
| 115 | font-size: var(--md-sys-typescale-body-small-size); |
| 116 | font-style: var(--md-sys-typescale-body-small-font-style); |
| 117 | letter-spacing: var(--md-sys-typescale-body-small-tracking); |
| 118 | line-height: var(--md-sys-typescale-body-small-line-height); |
| 119 | text-transform: var(--md-sys-typescale-body-small-text-transform); |
| 120 | text-decoration: var(--md-sys-typescale-body-small-text-decoration); |
| 121 | padding: 0.25rem 1rem 0 1rem; |
| 122 | white-space: nowrap; |
| 123 | text-overflow: ellipsis; |
| 124 | overflow: hidden; |
| 125 | } |
| 126 | |
| 127 | .md-filled-text-field:hover span, |
| 128 | .md-filled-text-field:hover label { |
| 129 | color: var(--md-sys-color-on-surface-variant); |
| 130 | } |
| 131 | |
| 132 | .md-filled-text-field:hover :not(label, span, small) { |
| 133 | padding-bottom: 0.5rem; |
| 134 | border-bottom-width: 0.0625rem; |
| 135 | border-bottom-color: var(--md-sys-color-on-surface); |
| 136 | } |
| 137 | |
| 138 | .md-filled-text-field:hover::after { |
| 139 | background-color: var(--md-sys-color-on-surface); |
| 140 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 141 | } |
| 142 | |
| 143 | .md-filled-text-field:hover small { |
| 144 | color: var(--md-sys-color-on-surface-variant); |
| 145 | } |
| 146 | |
| 147 | .md-filled-text-field:focus-within span, |
| 148 | .md-filled-text-field:focus-within label { |
| 149 | color: var(--md-sys-color-primary); |
| 150 | } |
| 151 | |
| 152 | .md-filled-text-field :focus { |
| 153 | color: var(--md-sys-color-on-surface); |
| 154 | outline: none; |
| 155 | padding-bottom: 0.4375rem; |
| 156 | border-bottom-width: 0.125rem; |
| 157 | border-bottom-color: var(--md-sys-color-primary); |
| 158 | } |
| 159 | |
| 160 | .md-filled-text-field:hover :focus { |
| 161 | padding-bottom: 0.4375rem; |
| 162 | border-bottom-width: 0.125rem; |
| 163 | } |
| 164 | |
| 165 | .md-filled-text-field:focus-within small { |
| 166 | color: var(--md-sys-color-on-surface-variant); |
| 167 | } |
| 168 | |
| 169 | .md-filled-text-field :invalid { |
| 170 | color: var(--md-sys-color-on-surface); |
| 171 | border-bottom-color: var(--md-sys-color-error); |
| 172 | } |
| 173 | |
| 174 | .md-filled-text-field :invalid+span, |
| 175 | .md-filled-text-field :invalid+label { |
| 176 | color: var(--md-sys-color-error); |
| 177 | } |
| 178 | |
| 179 | .md-filled-text-field :invalid~small, |
| 180 | .md-filled-text-field:hover :invalid~small, |
| 181 | .md-filled-text-field:focus-within .input-text:invalid~small { |
| 182 | color: var(--md-sys-color-error); |
| 183 | } |
| 184 | |
| 185 | .md-filled-text-field :invalid:focus { |
| 186 | caret-color: var(--md-sys-color-error); |
| 187 | border-bottom-color: var(--md-sys-color-error); |
| 188 | } |
| 189 | |
| 190 | .md-filled-text-field:hover :invalid { |
| 191 | color: var(--md-sys-color-on-surface); |
| 192 | border-bottom-color: var(--md-sys-color-error); |
| 193 | } |
| 1 | .md-list { |
| 2 | margin: 0.5rem 0; |
| 3 | padding: 0; |
| 4 | list-style-type: none; |
| 5 | } |
| 6 | |
| 7 | .md-list .md-one-line, |
| 8 | .md-list .md-two-line, |
| 9 | .md-list .md-three-line { |
| 10 | position: relative; |
| 11 | display: flex; |
| 12 | box-sizing: border-box; |
| 13 | } |
| 14 | |
| 15 | /* container */ |
| 16 | .md-list .md-one-line::before, |
| 17 | .md-list .md-two-line::before, |
| 18 | .md-list .md-three-line::before { |
| 19 | content: ""; |
| 20 | position: absolute; |
| 21 | z-index: -2; |
| 22 | top: 0; |
| 23 | right: 0; |
| 24 | left: 0; |
| 25 | bottom: 0; |
| 26 | background-color: var(--md-sys-color-surface); |
| 27 | } |
| 28 | |
| 29 | /* state layer */ |
| 30 | .md-list .md-one-line::after, |
| 31 | .md-list .md-two-line::after, |
| 32 | .md-list .md-three-line::after { |
| 33 | content: ""; |
| 34 | position: absolute; |
| 35 | z-index: -1; |
| 36 | top: 0; |
| 37 | right: 0; |
| 38 | left: 0; |
| 39 | bottom: 0; |
| 40 | background-color: transparent; |
| 41 | } |
| 42 | |
| 43 | .md-list .md-one-line { |
| 44 | align-items: center; |
| 45 | gap: 1rem; |
| 46 | min-height: 3.5rem; |
| 47 | padding: 0.5rem 1.5rem 0.5rem 1rem; |
| 48 | } |
| 49 | |
| 50 | .md-list .md-one-line.video, |
| 51 | .md-list .md-two-line.video { |
| 52 | padding: 0.75rem 1.5rem 0.75rem 0; |
| 53 | } |
| 54 | |
| 55 | .md-list .md-two-line, |
| 56 | .md-list .md-three-line { |
| 57 | flex-flow: column; |
| 58 | } |
| 59 | |
| 60 | .md-list .md-two-line { |
| 61 | justify-content: center; |
| 62 | min-height: 4.5rem; |
| 63 | padding: 0.5rem 1.5rem 0.5rem 1rem; |
| 64 | } |
| 65 | |
| 66 | .md-list .md-two-line.icon, |
| 67 | .md-list .md-two-line.avatar, |
| 68 | .md-list .md-two-line.image, |
| 69 | .md-list .md-two-line.video, |
| 70 | .md-list .md-three-line.icon, |
| 71 | .md-list .md-three-line.avatar, |
| 72 | .md-list .md-three-line.image, |
| 73 | .md-list .md-three-line.video { |
| 74 | display: grid; |
| 75 | column-gap: 1rem; |
| 76 | row-gap: 0; |
| 77 | grid-template-areas: |
| 78 | "img headline" |
| 79 | "img supporting"; |
| 80 | } |
| 81 | |
| 82 | .md-list .md-two-line.icon, |
| 83 | .md-list .md-two-line.avatar, |
| 84 | .md-list .md-two-line.image, |
| 85 | .md-list .md-two-line.video { |
| 86 | align-content: center; |
| 87 | grid-template-rows: 1fr 1fr; |
| 88 | } |
| 89 | |
| 90 | .md-list .md-two-line.icon, |
| 91 | .md-list .md-three-line.icon { |
| 92 | grid-template-columns: var(--iconSize) 1fr; |
| 93 | } |
| 94 | |
| 95 | .md-list .md-two-line.avatar, |
| 96 | .md-list .md-three-line.avatar { |
| 97 | grid-template-columns: var(--avatarSize) 1fr; |
| 98 | } |
| 99 | |
| 100 | .md-list .md-two-line.image, |
| 101 | .md-list .md-three-line.image { |
| 102 | grid-template-columns: var(--imageSize) 1fr; |
| 103 | } |
| 104 | |
| 105 | .md-list .md-two-line.video, |
| 106 | .md-list .md-three-line.video { |
| 107 | grid-template-columns: var(--videoWidth) 1fr; |
| 108 | } |
| 109 | |
| 110 | .md-list .md-three-line { |
| 111 | align-content: flex-start; |
| 112 | min-height: 5.5rem; |
| 113 | padding: 0.75rem 1.5rem 0.75rem 1rem; |
| 114 | } |
| 115 | |
| 116 | .md-list .md-three-line.video { |
| 117 | padding: 0.75rem 1.5rem 0.75rem 0; |
| 118 | } |
| 119 | |
| 120 | .md-list .md-three-line.icon, |
| 121 | .md-list .md-three-line.avatar, |
| 122 | .md-list .md-three-line.image, |
| 123 | .md-list .md-three-line.video { |
| 124 | align-content: start; |
| 125 | grid-template-rows: var(--md-sys-typescale-label-large-line-height) 1fr; |
| 126 | } |
| 127 | |
| 128 | /* state layer */ |
| 129 | .md-list .md-one-line:hover::after, |
| 130 | .md-list .md-two-line:hover::after, |
| 131 | .md-list .md-three-line:hover::after { |
| 132 | background-color: var(--md-sys-color-on-surface); |
| 133 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 134 | } |
| 135 | |
| 136 | /* state layer */ |
| 137 | .md-list a.md-one-line:focus::after, |
| 138 | .md-list a.md-two-line:focus::after, |
| 139 | .md-list a.md-three-line:focus::after, |
| 140 | .md-list a.md-one-line:focus-visible::after, |
| 141 | .md-list a.md-two-line:focus-visible::after, |
| 142 | .md-list a.md-three-line:focus-visible::after { |
| 143 | background-color: var(--md-sys-color-on-surface); |
| 144 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 145 | } |
| 146 | |
| 147 | .md-list a:focus, |
| 148 | .md-list a:focus-visible { |
| 149 | outline: none; |
| 150 | } |
| 151 | |
| 152 | .md-list a:active { |
| 153 | background-position: center; |
| 154 | background-image: |
| 155 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
| 156 | background-size: 100%; |
| 157 | animation-name: md-ripple; |
| 158 | animation-duration: var(--md-sys-motion-duration-500); |
| 159 | box-shadow: var(--md-box_shadow_level0) !important; |
| 160 | } |
| 161 | |
| 162 | /* state layer */ |
| 163 | .md-list a.md-one-line:active::after, |
| 164 | .md-list a.md-two-line:active::after, |
| 165 | .md-list a.md-three-line:active::after { |
| 166 | background-color: var(--md-sys-color-on-surface); |
| 167 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
| 168 | } |
| 169 | |
| 170 | .md-list a.md-two-line, |
| 171 | .md-list a.md-three-line { |
| 172 | text-decoration: none; |
| 173 | } |
| 174 | |
| 175 | .md-list a.md-two-line .headline, |
| 176 | .md-list a.md-three-line .headline { |
| 177 | text-decoration: underline; |
| 178 | } |
| 179 | |
| 180 | .md-list .headline { |
| 181 | grid-area: headline; |
| 182 | display: block; |
| 183 | box-sizing: border-box; |
| 184 | color: var(--md-sys-color-on-surface); |
| 185 | font-family: var(--md-sys-typescale-body-large-font); |
| 186 | font-weight: var(--md-sys-typescale-body-large-weight); |
| 187 | font-size: var(--md-sys-typescale-body-large-size); |
| 188 | font-style: var(--md-sys-typescale-body-large-font-style); |
| 189 | letter-spacing: var(--md-sys-typescale-body-large-tracking); |
| 190 | line-height: var(--md-sys-typescale-body-large-line-height); |
| 191 | text-transform: var(--md-sys-typescale-body-large-text-transform); |
| 192 | text-decoration: var(--md-sys-typescale-body-large-text-decoration); |
| 193 | max-height: var(--md-sys-typescale-body-large-line-height); |
| 194 | white-space: nowrap; |
| 195 | text-overflow: ellipsis; |
| 196 | overflow: hidden; |
| 197 | } |
| 198 | |
| 199 | .md-list .md-two-line.icon .headline, |
| 200 | .md-list .md-two-line.avatar .headline, |
| 201 | .md-list .md-two-line.image .headline, |
| 202 | .md-list .md-two-line.video .headline, |
| 203 | .md-list .md-three-line.icon .headline, |
| 204 | .md-list .md-three-line.avatar .headline, |
| 205 | .md-list .md-three-line.image .headline, |
| 206 | .md-list .md-three-line.video .headline { |
| 207 | align-self: end; |
| 208 | } |
| 209 | |
| 210 | .md-list .supporting { |
| 211 | grid-area: supporting; |
| 212 | display: -webkit-box; |
| 213 | -webkit-box-orient: vertical; |
| 214 | overflow: hidden; |
| 215 | box-sizing: border-box; |
| 216 | align-self: start; |
| 217 | font-family: var(--md-sys-typescale-body-medium-font); |
| 218 | font-weight: var(--md-sys-typescale-body-medium-weight); |
| 219 | font-size: var(--md-sys-typescale-body-medium-size); |
| 220 | font-style: var(--md-sys-typescale-body-medium-font-style); |
| 221 | letter-spacing: var(--md-sys-typescale-body-medium-tracking); |
| 222 | line-height: var(--md-sys-typescale-body-medium-line-height); |
| 223 | text-transform: var(--md-sys-typescale-body-medium-text-transform); |
| 224 | text-decoration: var(--md-sys-typescale-body-medium-text-decoration); |
| 225 | } |
| 226 | |
| 227 | .md-list .md-two-line .supporting { |
| 228 | max-height: var(--md-sys-typescale-body-medium-line-height); |
| 229 | line-clamp: 1; |
| 230 | -webkit-line-clamp: 1; |
| 231 | } |
| 232 | |
| 233 | .md-list .md-three-line .supporting { |
| 234 | max-height: calc(2 * var(--md-sys-typescale-body-medium-line-height)); |
| 235 | line-clamp: 2; |
| 236 | -webkit-line-clamp: 2; |
| 237 | } |
| 238 | |
| 239 | .md-list .avatar img, |
| 240 | .md-list .avatar label, |
| 241 | .md-list .avatar .material-symbols-outlined:first-child { |
| 242 | flex-shrink: 0; |
| 243 | background-color: var(--md-sys-color-primary-container); |
| 244 | color: var(--md-sys-color-on-primary-container); |
| 245 | border-radius: 50%; |
| 246 | width: var(--avatarSize); |
| 247 | height: var(--avatarSize); |
| 248 | } |
| 249 | |
| 250 | .md-list .avatar label { |
| 251 | display: inline-block; |
| 252 | font-family: var(--md-sys-typescale-title-medium-font); |
| 253 | font-weight: var(--md-sys-typescale-title-medium-weight); |
| 254 | font-size: var(--md-sys-typescale-title-medium-size); |
| 255 | font-style: var(--md-sys-typescale-title-medium-font-style); |
| 256 | letter-spacing: var(--md-sys-typescale-title-medium-tracking); |
| 257 | line-height: var(--md-sys-typescale-title-medium-line-height); |
| 258 | text-transform: var(--md-sys-typescale-title-medium-text-transform); |
| 259 | text-decoration: var(--md-sys-typescale-title-medium-text-decoration); |
| 260 | overflow: hidden; |
| 261 | } |
| 262 | |
| 263 | .md-list .avatar .material-symbols-outlined:first-child { |
| 264 | font-size: var(--avatarSize); |
| 265 | } |
| 266 | |
| 267 | .md-list .avatar.md-two-line img, |
| 268 | .md-list .avatar.md-two-line label, |
| 269 | .md-list .avatar.md-two-line .material-symbols-outlined:first-child { |
| 270 | grid-area: img; |
| 271 | align-self: center; |
| 272 | } |
| 273 | |
| 274 | .md-list .avatar.md-three-line img, |
| 275 | .md-list .avatar.md-three-line label, |
| 276 | .md-list .avatar.md-three-line .material-symbols-outlined:first-child { |
| 277 | grid-area: img; |
| 278 | align-self: start; |
| 279 | } |
| 280 | |
| 281 | .md-list .icon img, |
| 282 | .md-list .icon .material-symbols-outlined:first-child { |
| 283 | flex-shrink: 0; |
| 284 | color: var(--md-sys-color-on-surface-variant); |
| 285 | width: var(--iconSize); |
| 286 | height: var(--iconSize); |
| 287 | } |
| 288 | |
| 289 | .md-list .icon .material-symbols-outlined:first-child { |
| 290 | font-size: var(--iconSize); |
| 291 | } |
| 292 | |
| 293 | .md-list .icon.md-two-line img, |
| 294 | .md-list .icon.md-two-line .material-symbols-outlined:first-child { |
| 295 | grid-area: img; |
| 296 | align-self: center; |
| 297 | } |
| 298 | |
| 299 | .md-list .icon.md-three-line img, |
| 300 | .md-list .icon.md-three-line .material-symbols-outlined:first-child { |
| 301 | grid-area: img; |
| 302 | align-self: start; |
| 303 | } |
| 304 | |
| 305 | .md-list .video img { |
| 306 | flex-shrink: 0; |
| 307 | color: var(--md-sys-color-on-surface-variant); |
| 308 | width: var(--videoWidth); |
| 309 | height: var(--videoHeight); |
| 310 | } |
| 311 | |
| 312 | .md-list .video.md-two-line img { |
| 313 | grid-area: img; |
| 314 | align-self: center; |
| 315 | } |
| 316 | |
| 317 | .md-list .video.md-three-line img { |
| 318 | grid-area: img; |
| 319 | align-self: start; |
| 320 | } |
| 321 | |
| 322 | .md-list .image img, |
| 323 | .md-list .image .material-symbols-outlined:first-child { |
| 324 | flex-shrink: 0; |
| 325 | color: var(--md-sys-color-on-surface-variant); |
| 326 | width: var(--imageSize); |
| 327 | height: var(--imageSize); |
| 328 | } |
| 329 | |
| 330 | .md-list .image .material-symbols-outlined:first-child { |
| 331 | font-size: var(--imageSize); |
| 332 | } |
| 333 | |
| 334 | .md-list .image.md-two-line img, |
| 335 | .md-list .image.md-two-line .material-symbols-outlined:first-child { |
| 336 | grid-area: img; |
| 337 | align-self: center; |
| 338 | } |
| 339 | |
| 340 | .md-list .image.md-three-line img, |
| 341 | .md-list .image.md-three-line .material-symbols-outlined:first-child { |
| 342 | grid-area: img; |
| 343 | align-self: start; |
| 344 | } |
| 1 | .md-menu { |
| 2 | display: block; |
| 3 | z-index: 2; |
| 4 | box-sizing: border-box; |
| 5 | cursor: default; |
| 6 | padding: 0.25rem 0; |
| 7 | border-radius: |
| 8 | var(--md-sys-shape-corner-extra-small-default-size); |
| 9 | background-color: var(--md-sys-color-surface-container-low); |
| 10 | box-shadow: var(--md-box_shadow_level2); |
| 11 | transform: translateY(-50%) scaleY(0); |
| 12 | transition-property: transform; |
| 13 | transition-duration: var(--md-sys-motion-duration-500); |
| 14 | } |
| 15 | |
| 16 | .md-menu[hidden] { |
| 17 | display: none |
| 18 | } |
| 19 | |
| 20 | .md-menu.open { |
| 21 | transform: translateY(0) scaleY(1); |
| 22 | } |
| 23 | |
| 24 | /* container */ |
| 25 | .md-menu>*::after { |
| 26 | content: ""; |
| 27 | position: absolute; |
| 28 | z-index: -2; |
| 29 | top: 0; |
| 30 | right: 0; |
| 31 | left: 0; |
| 32 | bottom: 0; |
| 33 | } |
| 34 | |
| 35 | /* container */ |
| 36 | .md-menu>.selected::after { |
| 37 | background-color: var(--md-sys-color-secondary-container); |
| 38 | } |
| 39 | |
| 40 | /* label, shape */ |
| 41 | .md-menu>* { |
| 42 | position: relative; |
| 43 | display: block; |
| 44 | box-sizing: border-box; |
| 45 | height: 3rem; |
| 46 | line-height: 3rem; |
| 47 | padding: 0 0.75rem; |
| 48 | color: var(--md-sys-color-on-surface); |
| 49 | font-family: var(--md-sys-typescale-label-large-font); |
| 50 | font-weight: var(--md-sys-typescale-label-large-weight); |
| 51 | font-size: var(--md-sys-typescale-label-large-size); |
| 52 | font-style: var(--md-sys-typescale-label-large-font-style); |
| 53 | letter-spacing: var(--md-sys-typescale-label-large-tracking); |
| 54 | text-transform: var(--md-sys-typescale-label-large-text-transform); |
| 55 | text-decoration: var(--md-sys-typescale-label-large-text-decoration); |
| 56 | white-space: nowrap; |
| 57 | text-overflow: ellipsis; |
| 58 | overflow: hidden; |
| 59 | } |
| 60 | |
| 61 | /* label, shape */ |
| 62 | .md-menu>.selected { |
| 63 | color: var(--md-sys-color-on-secondary-container); |
| 64 | } |
| 65 | |
| 66 | /* state layer */ |
| 67 | .md-menu>*::before { |
| 68 | content: ""; |
| 69 | position: absolute; |
| 70 | z-index: -1; |
| 71 | top: 0; |
| 72 | right: 0; |
| 73 | left: 0; |
| 74 | bottom: 0; |
| 75 | } |
| 76 | |
| 77 | /* icon */ |
| 78 | .md-menu>* span { |
| 79 | position: relative; |
| 80 | margin-right: 0.75rem; |
| 81 | vertical-align: middle; |
| 82 | color: var(--md-sys-color-on-surface-variant); |
| 83 | font-size: 1.5rem; |
| 84 | width: 1.5rem; |
| 85 | height: 1.5rem; |
| 86 | } |
| 87 | |
| 88 | /* icon */ |
| 89 | .md-menu>.selected span { |
| 90 | color: var(--md-sys-color-on-secondary-container); |
| 91 | } |
| 92 | |
| 93 | /* state layer */ |
| 94 | .md-menu>:hover::before { |
| 95 | background-color: var(--md-sys-color-on-surface); |
| 96 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 97 | } |
| 98 | |
| 99 | /* label, shape */ |
| 100 | .md-menu>:hover { |
| 101 | color: var(--md-sys-color-on-surface); |
| 102 | } |
| 103 | |
| 104 | /* icon */ |
| 105 | .md-menu>:hover span { |
| 106 | color: var(--md-sys-color-on-surface-variant); |
| 107 | } |
| 108 | |
| 109 | /* state layer */ |
| 110 | .md-menu>:focus::before { |
| 111 | background-color: var(--md-sys-color-on-surface); |
| 112 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 113 | } |
| 114 | |
| 115 | /* label, shape */ |
| 116 | .md-menu>:focus { |
| 117 | color: var(--md-sys-color-on-surface); |
| 118 | outline: none; |
| 119 | } |
| 120 | |
| 121 | /* icon */ |
| 122 | .md-menu>:focus span { |
| 123 | color: var(--md-sys-color-on-surface-variant); |
| 124 | } |
| 125 | |
| 126 | /* label, shape */ |
| 127 | .md-menu>:active { |
| 128 | background-position: center; |
| 129 | background-image: |
| 130 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
| 131 | background-size: 100%; |
| 132 | animation-name: md-ripple; |
| 133 | animation-duration: var(--md-sys-motion-duration-500); |
| 134 | color: var(--md-sys-color-on-surface); |
| 135 | } |
| 136 | |
| 137 | /* state layer */ |
| 138 | .md-menu>:active::before { |
| 139 | background-color: var(--md-sys-color-on-surface); |
| 140 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
| 141 | } |
| 142 | |
| 143 | |
| 144 | /* icon */ |
| 145 | .md-menu>:active span { |
| 146 | color: var(--md-sys-color-on-surface-variant); |
| 147 | } |
| 148 | |
| 149 | .md-menu input[type="radio"] { |
| 150 | appearance: none; |
| 151 | transform: scaleX(0); |
| 152 | } |
| 1 | .md-navigation-bar { |
| 2 | display: flex; |
| 3 | justify-content: center; |
| 4 | align-items: stretch; |
| 5 | position: fixed; |
| 6 | left: 0; |
| 7 | right: 0; |
| 8 | bottom: 0; |
| 9 | background-color: var(--md-sys-color-surface-container-low); |
| 10 | } |
| 11 | |
| 12 | .md-navigation-bar a { |
| 13 | position: relative; |
| 14 | display: block; |
| 15 | flex: 0 1 auto; |
| 16 | color: var(--md-sys-color-on-surface-variant); |
| 17 | font-family: var(--md-sys-typescale-label-medium-font); |
| 18 | font-weight: var(--md-sys-typescale-label-medium-weight); |
| 19 | font-size: var(--md-sys-typescale-label-medium-size); |
| 20 | font-style: var(--md-sys-typescale-label-medium-font-style); |
| 21 | letter-spacing: var(--md-sys-typescale-label-medium-tracking); |
| 22 | line-height: var(--md-sys-typescale-label-medium-line-height); |
| 23 | text-transform: var(--md-sys-typescale-label-medium-text-transform); |
| 24 | text-decoration: var(--md-sys-typescale-label-medium-text-decoration); |
| 25 | text-decoration: none; |
| 26 | padding-top: 0.75rem; |
| 27 | padding-bottom: 1rem; |
| 28 | padding-left: 0.25rem; |
| 29 | padding-right: 0.25rem; |
| 30 | text-align: center; |
| 31 | overflow: hidden; |
| 32 | box-sizing: border-box; |
| 33 | } |
| 34 | |
| 35 | .md-navigation-bar a.active { |
| 36 | color: var(--md-sys-color-on-surface); |
| 37 | } |
| 38 | |
| 39 | /* state layer */ |
| 40 | .md-navigation-bar a::after { |
| 41 | content: ""; |
| 42 | position: absolute; |
| 43 | z-index: -2; |
| 44 | top: 0; |
| 45 | right: 0; |
| 46 | left: 0; |
| 47 | bottom: 0; |
| 48 | background-color: transparent; |
| 49 | } |
| 50 | |
| 51 | /* state layer */ |
| 52 | .md-navigation-bar a:hover::after { |
| 53 | background-color: var(--md-sys-color-on-surface-variant); |
| 54 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 55 | } |
| 56 | |
| 57 | /* state layer */ |
| 58 | .md-navigation-bar a.active:hover::after { |
| 59 | background-color: var(--md-sys-color-on-surface); |
| 60 | } |
| 61 | |
| 62 | .md-navigation-bar a:focus { |
| 63 | outline: none; |
| 64 | } |
| 65 | |
| 66 | /* state layer */ |
| 67 | .md-navigation-bar a:focus::after { |
| 68 | background-color: var(--md-sys-color-on-surface-variant); |
| 69 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 70 | } |
| 71 | |
| 72 | /* state layer */ |
| 73 | .md-navigation-bar a.active:focus::after { |
| 74 | background-color: var(--md-sys-color-on-surface); |
| 75 | } |
| 76 | |
| 77 | .md-navigation-bar a:active { |
| 78 | background-position: center; |
| 79 | background-image: |
| 80 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
| 81 | background-size: 100%; |
| 82 | animation-name: md-ripple; |
| 83 | animation-duration: var(--md-sys-motion-duration-500); |
| 84 | } |
| 85 | |
| 86 | /* state layer */ |
| 87 | .md-navigation-bar a:active::after { |
| 88 | background-color: var(--md-sys-color-on-surface-variant); |
| 89 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
| 90 | } |
| 91 | |
| 92 | /* state layer */ |
| 93 | .md-navigation-bar a.active:active::after { |
| 94 | background-color: var(--md-sys-color-on-surface); |
| 95 | } |
| 96 | |
| 97 | .md-navigation-bar span { |
| 98 | color: var(--md-sys-color-on-surface-variant); |
| 99 | position: relative; |
| 100 | display: block; |
| 101 | height: 2rem; |
| 102 | width: 4rem; |
| 103 | line-height: 2rem; |
| 104 | margin-bottom: 0.25rem; |
| 105 | box-sizing: border-box; |
| 106 | margin-left: auto; |
| 107 | margin-right: auto; |
| 108 | overflow: hidden; |
| 109 | } |
| 110 | |
| 111 | .md-navigation-bar a.active span { |
| 112 | color: var(--md-sys-color-on-secondary-container); |
| 113 | } |
| 114 | |
| 115 | .md-navigation-bar a.active { |
| 116 | font-variation-settings: 'FILL'1, 'wght'700, 'GRAD'0, 'opsz'48; |
| 117 | } |
| 118 | |
| 119 | .md-navigation-bar span::before { |
| 120 | content: ""; |
| 121 | background-color: var(--md-sys-color-secondary-container); |
| 122 | position: absolute; |
| 123 | z-index: -1; |
| 124 | top: 0; |
| 125 | left: 0; |
| 126 | height: 2rem; |
| 127 | width: 4rem; |
| 128 | border-radius: 1rem; |
| 129 | box-sizing: border-box; |
| 130 | transform: scaleX(0); |
| 131 | transition-property: transform; |
| 132 | transition-duration: var(--md-sys-motion-duration-500); |
| 133 | } |
| 134 | |
| 135 | .md-navigation-bar a.active span::before, |
| 136 | .md-navigation-bar a:active span::before { |
| 137 | transform: scaleX(1); |
| 138 | } |
| 1 | .md-outline-button { |
| 2 | position: relative; |
| 3 | box-sizing: border-box; |
| 4 | border-radius: 1.25rem; |
| 5 | height: 2.5rem; |
| 6 | padding: 0 1.5rem; |
| 7 | border: 0.0625rem solid var(--md-sys-color-outline); |
| 8 | background-color: transparent; |
| 9 | box-shadow: var(--md-box_shadow_level0); |
| 10 | font-family: var(--md-sys-typescale-label-large-font); |
| 11 | font-weight: var(--md-sys-typescale-label-large-weight); |
| 12 | font-size: var(--md-sys-typescale-label-large-size); |
| 13 | font-style: var(--md-sys-typescale-label-large-font-style); |
| 14 | letter-spacing: var(--md-sys-typescale-label-large-tracking); |
| 15 | text-transform: var(--md-sys-typescale-label-large-text-transform); |
| 16 | text-decoration: var(--md-sys-typescale-label-large-text-decoration); |
| 17 | color: var(--md-sys-color-primary); |
| 18 | white-space: nowrap; |
| 19 | text-overflow: ellipsis; |
| 20 | overflow: hidden; |
| 21 | } |
| 22 | |
| 23 | /* state layer */ |
| 24 | .md-outline-button::after { |
| 25 | content: ""; |
| 26 | position: absolute; |
| 27 | z-index: -1; |
| 28 | top: 0; |
| 29 | right: 0; |
| 30 | left: 0; |
| 31 | bottom: 0; |
| 32 | background-color: transparent; |
| 33 | } |
| 34 | |
| 35 | .md-outline-button:hover { |
| 36 | color: var(--md-sys-color-primary); |
| 37 | border-color: var(--md-sys-color-outline); |
| 38 | } |
| 39 | |
| 40 | /* state layer */ |
| 41 | .md-outline-button:hover::after { |
| 42 | background-color: var(--md-sys-color-primary); |
| 43 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 44 | } |
| 45 | |
| 46 | .md-outline-button:focus { |
| 47 | outline: none; |
| 48 | color: var(--md-sys-color-primary); |
| 49 | border-color: var(--md-sys-color-outline); |
| 50 | } |
| 51 | |
| 52 | /* state layer */ |
| 53 | .md-outline-button:focus::after { |
| 54 | background-color: var(--md-sys-color-primary); |
| 55 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 56 | } |
| 57 | |
| 58 | .md-outline-button:active { |
| 59 | color: var(--md-sys-color-primary); |
| 60 | border-color: var(--md-sys-color-outline); |
| 61 | background-position: center; |
| 62 | background-image: |
| 63 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
| 64 | background-size: 100%; |
| 65 | animation-name: md-ripple; |
| 66 | animation-duration: var(--md-sys-motion-duration-500); |
| 67 | box-shadow: var(--md-box_shadow_level0) !important; |
| 68 | } |
| 69 | |
| 70 | /* state layer */ |
| 71 | .md-outline-button:active::after { |
| 72 | background-color: var(--md-sys-color-primary); |
| 73 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
| 74 | } |
| 75 | |
| 76 | .md-outline-button:disabled { |
| 77 | background-color: transparent !important; |
| 78 | border-color: var(--md-sys-color-on-surface) !important; |
| 79 | color: var(--md-sys-color-on-surface) !important; |
| 80 | opacity: 0.38 !important; |
| 81 | } |
| 82 | |
| 83 | /* container */ |
| 84 | .md-outline-button:disabled::after { |
| 85 | background-color: transparent !important; |
| 86 | opacity: 1 !important; |
| 87 | } |
| 1 | @keyframes md-ripple { |
| 2 | |
| 3 | from { |
| 4 | background-size: 100%; |
| 5 | } |
| 6 | |
| 7 | to { |
| 8 | background-size: 15000%; |
| 9 | } |
| 10 | |
| 11 | } |
| 1 | .md-segmented-button { |
| 2 | display: flex; |
| 3 | align-items: stretch; |
| 4 | box-sizing: border-box; |
| 5 | border: 0.0625rem solid var(--md-sys-color-outline); |
| 6 | height: 2.5rem; |
| 7 | border-radius: 1.25rem; |
| 8 | overflow: hidden; |
| 9 | } |
| 10 | |
| 11 | .md-segmented-button[hidden] { |
| 12 | display: none; |
| 13 | } |
| 14 | |
| 15 | .md-segmented-button input { |
| 16 | -webkit-appearance: none; |
| 17 | appearance: none; |
| 18 | flex: 0 1 0.0625rem; |
| 19 | width: 0.0625rem; |
| 20 | height: 2.375rem; |
| 21 | margin: 0; |
| 22 | padding: 0; |
| 23 | background-color: var(--md-sys-color-outline); |
| 24 | } |
| 25 | |
| 26 | .md-segmented-button input:first-of-type { |
| 27 | transform: scaleX(0); |
| 28 | } |
| 29 | |
| 30 | .md-segmented-button input:focus { |
| 31 | outline: none; |
| 32 | } |
| 33 | |
| 34 | .md-segmented-button :checked+label { |
| 35 | color: var(--md-sys-color-on-secondary-container); |
| 36 | } |
| 37 | |
| 38 | .md-segmented-button label { |
| 39 | position: relative; |
| 40 | flex: 1 1 1.5rem; |
| 41 | display: block; |
| 42 | box-sizing: border-box; |
| 43 | height: 2.375rem; |
| 44 | line-height: 2.375rem; |
| 45 | text-align: center; |
| 46 | color: var(--md-sys-color-on-surface); |
| 47 | font-family: var(--md-sys-typescale-label-large-font); |
| 48 | font-weight: var(--md-sys-typescale-label-large-weight); |
| 49 | font-size: var(--md-sys-typescale-label-large-size); |
| 50 | font-style: var(--md-sys-typescale-label-large-font-style); |
| 51 | letter-spacing: var(--md-sys-typescale-label-large-tracking); |
| 52 | text-transform: var(--md-sys-typescale-label-large-text-transform); |
| 53 | text-decoration: var(--md-sys-typescale-label-large-text-decoration); |
| 54 | padding: 0 0.75rem; |
| 55 | overflow: hidden; |
| 56 | white-space: nowrap; |
| 57 | text-overflow: ellipsis; |
| 58 | overflow: hidden; |
| 59 | } |
| 60 | |
| 61 | .md-segmented-button label::before { |
| 62 | /* container */ |
| 63 | content: ""; |
| 64 | position: absolute; |
| 65 | z-index: -2; |
| 66 | top: 0; |
| 67 | right: 0; |
| 68 | left: 0; |
| 69 | bottom: 0; |
| 70 | } |
| 71 | |
| 72 | .md-segmented-button label::after { |
| 73 | /* state layer */ |
| 74 | content: ""; |
| 75 | position: absolute; |
| 76 | z-index: -1; |
| 77 | top: 0; |
| 78 | right: 0; |
| 79 | left: 0; |
| 80 | bottom: 0; |
| 81 | background-color: transparent; |
| 82 | } |
| 83 | |
| 84 | .md-segmented-button :checked+label::before { |
| 85 | /* container */ |
| 86 | background-color: var(--md-sys-color-secondary-container); |
| 87 | } |
| 88 | |
| 89 | .md-segmented-button label span { |
| 90 | vertical-align: middle; |
| 91 | color: var(--md-sys-color-on-surface); |
| 92 | font-size: 1.125rem; |
| 93 | width: 1.125rem; |
| 94 | height: 1.125rem; |
| 95 | margin-right: 0.5rem; |
| 96 | } |
| 97 | |
| 98 | |
| 99 | .md-segmented-button label span:first-child { |
| 100 | display: none; |
| 101 | } |
| 102 | |
| 103 | .md-segmented-button :checked+label span:first-child { |
| 104 | display: inline-block; |
| 105 | color: var(--md-sys-color-on-secondary-container); |
| 106 | } |
| 107 | |
| 108 | /* state layer */ |
| 109 | .md-segmented-button label:hover::after { |
| 110 | background-color: var(--md-sys-color-on-surface); |
| 111 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 112 | } |
| 113 | |
| 114 | /* state layer */ |
| 115 | .md-segmented-button :checked+label:hover::after { |
| 116 | background-color: var(--md-sys-color-on-secondary-container); |
| 117 | } |
| 118 | |
| 119 | /* state layer */ |
| 120 | .md-segmented-button :focus+label::after { |
| 121 | background-color: var(--md-sys-color-on-surface); |
| 122 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 123 | } |
| 124 | |
| 125 | /* state layer */ |
| 126 | .md-segmented-button :focus:checked+label::after { |
| 127 | background-color: var(--md-sys-color-on-secondary-container); |
| 128 | } |
| 129 | |
| 130 | .md-segmented-button label:active, |
| 131 | .md-segmented-button :active+label { |
| 132 | background-position: center; |
| 133 | background-image: |
| 134 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
| 135 | background-size: 100%; |
| 136 | animation-name: md-ripple; |
| 137 | animation-duration: var(--md-sys-motion-duration-500); |
| 138 | } |
| 139 | |
| 140 | /* state layer */ |
| 141 | .md-segmented-button :active+label::after { |
| 142 | background-color: var(--md-sys-color-on-surface); |
| 143 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
| 144 | } |
| 145 | |
| 146 | /* state layer */ |
| 147 | .md-segmented-button :active:checked+label::after { |
| 148 | background-color: var(--md-sys-color-on-secondary-container); |
| 149 | } |
| 1 | md-slider-field input::-webkit-slider-runnable-track { |
| 2 | height: 0.25rem; |
| 3 | border-radius: 0.125rem; |
| 4 | } |
| 5 | |
| 6 | md-slider-field input::-webkit-slider-thumb { |
| 7 | -webkit-appearance: none; |
| 8 | background-color: var(--md-sys-color-primary); |
| 9 | width: 1.25rem; |
| 10 | height: 1.25rem; |
| 11 | border-radius: 0.625rem; |
| 12 | margin-top: -0.5625rem; |
| 13 | } |
| 14 | |
| 15 | md-slider-field input:hover::-webkit-slider-thumb { |
| 16 | box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-hover-transparency-percentage)); |
| 17 | } |
| 18 | |
| 19 | md-slider-field input:focus::-webkit-slider-thumb { |
| 20 | box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-focus-transparency-percentage)); |
| 21 | } |
| 22 | |
| 23 | md-slider-field input:active::-webkit-slider-thumb { |
| 24 | box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-pressed-transparency-percentage)) !important; |
| 25 | background-position: center; |
| 26 | background-image: |
| 27 | radial-gradient(circle, var(--md-sys-color-primary-container) 1%, transparent 1%); |
| 28 | background-size: 100%; |
| 29 | animation-name: md-ripple; |
| 30 | animation-duration: var(--md-sys-motion-duration-500); |
| 31 | } |
| 32 | |
| 33 | md-slider-field.material::-moz-range-track { |
| 34 | height: 0.25rem; |
| 35 | border-radius: 0.125rem; |
| 36 | } |
| 37 | |
| 38 | md-slider-field input::-moz-range-thumb { |
| 39 | -webkit-appearance: none; |
| 40 | appearance: none; |
| 41 | background-color: var(--md-sys-color-primary); |
| 42 | width: 1.25rem; |
| 43 | height: 1.25rem; |
| 44 | border: none; |
| 45 | border-radius: 0.625rem; |
| 46 | } |
| 47 | |
| 48 | md-slider-field input:hover::-moz-range-thumb { |
| 49 | box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-hover-transparency-percentage)); |
| 50 | } |
| 51 | |
| 52 | md-slider-field input:focus::-moz-range-thumb { |
| 53 | box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-focus-transparency-percentage)); |
| 54 | } |
| 55 | |
| 56 | md-slider-field input:active::-moz-range-thumb { |
| 57 | box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-pressed-transparency-percentage)) !important; |
| 58 | background-position: center; |
| 59 | background-image: |
| 60 | radial-gradient(circle, var(--md-sys-color-primary-container) 1%, transparent 1%); |
| 61 | background-size: 100%; |
| 62 | animation-name: md-ripple; |
| 63 | animation-duration: var(--md-sys-motion-duration-500); |
| 64 | } |
| 1 | .md-standard-icon-button { |
| 2 | position: relative; |
| 3 | display: inline-block; |
| 4 | border: none; |
| 5 | padding: 0.25rem; |
| 6 | background-color: transparent; |
| 7 | text-decoration: none; |
| 8 | border-radius: 50%; |
| 9 | overflow: hidden; |
| 10 | } |
| 11 | |
| 12 | .md-standard-icon-button[hidden] { |
| 13 | display: none; |
| 14 | } |
| 15 | |
| 16 | /* state layer */ |
| 17 | .md-standard-icon-button::after { |
| 18 | content: ""; |
| 19 | position: absolute; |
| 20 | top: 0.25rem; |
| 21 | right: 0.25rem; |
| 22 | left: 0.25rem; |
| 23 | bottom: 0.25rem; |
| 24 | border-radius: 50%; |
| 25 | } |
| 26 | |
| 27 | .md-standard-icon-button span { |
| 28 | position: relative; |
| 29 | padding: 0.5rem; |
| 30 | color: var(--md-sys-color-on-surface-variant); |
| 31 | font-size: 1.5rem; |
| 32 | width: 1.5rem; |
| 33 | height: 1.5rem; |
| 34 | } |
| 35 | |
| 36 | .md-standard-icon-button.avatar span { |
| 37 | padding: 0.3125rem; |
| 38 | font-size: 1.875rem; |
| 39 | width: 1.875rem; |
| 40 | height: 1.875rem; |
| 41 | } |
| 42 | |
| 43 | .md-standard-icon-button:hover::after { |
| 44 | background-color: var(--md-sys-color-on-surface-variant); |
| 45 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 46 | } |
| 47 | |
| 48 | .md-standard-icon-button:hover span { |
| 49 | color: var(--md-sys-color-on-surface-variant); |
| 50 | } |
| 51 | |
| 52 | .md-standard-icon-button:focus { |
| 53 | outline: none; |
| 54 | } |
| 55 | |
| 56 | .md-standard-icon-button:focus::after { |
| 57 | background-color: var(--md-sys-color-on-surface-variant); |
| 58 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 59 | } |
| 60 | |
| 61 | .md-standard-icon-button:focus span { |
| 62 | color: var(--md-sys-color-on-surface-variant); |
| 63 | } |
| 64 | |
| 65 | .md-standard-icon-button:active { |
| 66 | background-position: center; |
| 67 | background-image: |
| 68 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
| 69 | background-size: 100%; |
| 70 | animation-name: md-ripple; |
| 71 | animation-duration: var(--md-sys-motion-duration-500); |
| 72 | } |
| 73 | |
| 74 | .md-standard-icon-button:active::after { |
| 75 | background-color: var(--md-sys-color-on-surface-variant); |
| 76 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
| 77 | } |
| 78 | |
| 79 | .md-standard-icon-button:active span { |
| 80 | -color: var(--md-sys-color-on-surface-variant); |
| 81 | } |
| 82 | |
| 83 | .md-standard-icon-button:disabled::after { |
| 84 | background-color: transparent !important; |
| 85 | opacity: 1; |
| 86 | } |
| 87 | |
| 88 | .md-standard-icon-button:disabled span { |
| 89 | color: var(--md-sys-color-on-surface) !important; |
| 90 | opacity: 0.38; |
| 91 | } |
| 92 | |
| 93 | .md-standard-icon-button:disabled:active { |
| 94 | background-image: none; |
| 95 | animation-name: none; |
| 96 | animation-duration: unset; |
| 97 | } |
| 1 | .md-switch { |
| 2 | -webkit-appearance: none; |
| 3 | appearance: none; |
| 4 | position: relative; |
| 5 | display: inline-block; |
| 6 | vertical-align: middle; |
| 7 | box-sizing: content-box; |
| 8 | padding: 0; |
| 9 | padding-block: 0; |
| 10 | padding-inline: 0; |
| 11 | } |
| 12 | |
| 13 | .md-switch:focus { |
| 14 | outline: none; |
| 15 | } |
| 16 | |
| 17 | /* Track */ |
| 18 | body.material .md-switch { |
| 19 | width: 3rem; |
| 20 | height: 1.75rem; |
| 21 | border-radius: 1rem; |
| 22 | border: 0.125rem solid var(--md-sys-color-outline); |
| 23 | background-color: var(--md-sys-color-surface-container-highest); |
| 24 | } |
| 25 | |
| 26 | body.material .md-switch:checked { |
| 27 | background-color: var(--md-sys-color-primary); |
| 28 | } |
| 29 | |
| 30 | /* State */ |
| 31 | body.material .md-switch::before { |
| 32 | content: ""; |
| 33 | display: none; |
| 34 | position: absolute; |
| 35 | height: 2.5rem; |
| 36 | width: 2.5rem; |
| 37 | border-radius: 1.25rem; |
| 38 | top: -0.375rem; |
| 39 | left: -0.375rem; |
| 40 | } |
| 41 | |
| 42 | body.material .md-switch:checked:before { |
| 43 | left: auto; |
| 44 | right: -0.375rem; |
| 45 | } |
| 46 | |
| 47 | /* Handle */ |
| 48 | body.material .md-switch::after { |
| 49 | content: ""; |
| 50 | display: inline-block; |
| 51 | position: absolute; |
| 52 | transition-property: all; |
| 53 | transition-duration: var(--md-sys-motion-duration-700); |
| 54 | height: 1rem; |
| 55 | width: 1rem; |
| 56 | border-radius: 0.5rem; |
| 57 | top: 0.375rem; |
| 58 | left: 0.375rem; |
| 59 | background-color: var(--md-sys-color-outline); |
| 60 | box-shadow: var(--md-box_shadow_level1); |
| 61 | } |
| 62 | |
| 63 | body.material .md-switch:checked:after { |
| 64 | height: 1.5rem; |
| 65 | width: 1.5rem; |
| 66 | border-radius: 0.75rem; |
| 67 | top: 0.125rem; |
| 68 | left: auto; |
| 69 | right: 0.125rem; |
| 70 | background-color: var(--md-sys-color-on-primary); |
| 71 | } |
| 72 | |
| 73 | body.material .md-switch:hover::before { |
| 74 | display: inline-block; |
| 75 | background-color: var(--md-sys-color-on-surface); |
| 76 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 77 | } |
| 78 | |
| 79 | body.material .md-switch:checked:hover::before { |
| 80 | background-color: var(--md-sys-color-primary); |
| 81 | } |
| 82 | |
| 83 | body.material .md-switch:hover::after { |
| 84 | background-color: var(--md-sys-color-on-surface-variant); |
| 85 | } |
| 86 | |
| 87 | body.material .md-switch:checked:hover::after { |
| 88 | background-color: var(--md-sys-color-primary-container); |
| 89 | } |
| 90 | |
| 91 | body.material .md-switch:focus::before { |
| 92 | display: inline-block; |
| 93 | background-color: var(--md-sys-color-on-surface); |
| 94 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 95 | } |
| 96 | |
| 97 | body.material .md-switch:checked:focus::before { |
| 98 | background-color: var(--md-sys-color-primary); |
| 99 | } |
| 100 | |
| 101 | body.material .md-switch:focus::after { |
| 102 | background-color: var(--md-sys-color-on-surface-variant); |
| 103 | } |
| 104 | |
| 105 | body.material .md-switch:checked:focus::after { |
| 106 | background-color: var(--md-sys-color-primary-container); |
| 107 | } |
| 108 | |
| 109 | body.material .md-switch:active::before { |
| 110 | display: inline-block; |
| 111 | background-color: var(--md-sys-color-on-surface); |
| 112 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 113 | } |
| 114 | |
| 115 | |
| 116 | body.material .md-switch:checked:active::before { |
| 117 | background-color: var(--md-sys-color-primary); |
| 118 | } |
| 119 | |
| 120 | body.material .md-switch:active::after { |
| 121 | width: 1.75rem; |
| 122 | height: 1.75rem; |
| 123 | top: 0; |
| 124 | left: 0; |
| 125 | border-radius: 0.875rem; |
| 126 | background-position: center; |
| 127 | animation-name: md-ripple; |
| 128 | animation-duration: var(--md-sys-motion-duration-500); |
| 129 | background-size: 100%; |
| 130 | background-color: var(--md-sys-color-on-surface-variant); |
| 131 | background-image: |
| 132 | radial-gradient(circle, var(--md-sys-color-primary-container) 1%, transparent 1%); |
| 133 | box-shadow: var(--md-box_shadow_level1), 0 0 0 0.375rem color-mix(in srgb, var(--md-sys-color-on-surface), transparent var(--state-pressed-transparency-percentage)) !important; |
| 134 | } |
| 135 | |
| 136 | body.material .md-switch:checked:active::after { |
| 137 | left: auto; |
| 138 | right: 0; |
| 139 | background-color: var(--md-sys-color-primary-container); |
| 140 | background-image: |
| 141 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
| 142 | box-shadow: var(--md-box_shadow_level1), 0 0 0 0.375rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-pressed-transparency-percentage)) !important; |
| 143 | } |
| 144 | |
| 145 | body.apple .md-switch { |
| 146 | width: 3rem; |
| 147 | border-radius: 0.875rem; |
| 148 | height: 1.75rem; |
| 149 | background-color: var(--colIntIosOffBk); |
| 150 | } |
| 151 | |
| 152 | body.apple .md-switch:checked { |
| 153 | background-color: var(--colIntIosOnBk); |
| 154 | } |
| 155 | |
| 156 | body.apple .md-switch:focus { |
| 157 | background-color: var(--colIntIosOffBkFc); |
| 158 | } |
| 159 | |
| 160 | body.apple .md-switch:checked:focus { |
| 161 | background-color: var(--colIntIosOnBkFc); |
| 162 | } |
| 163 | |
| 164 | body.apple .md-switch::after { |
| 165 | content: ""; |
| 166 | display: inline-block; |
| 167 | position: absolute; |
| 168 | width: 1.5rem; |
| 169 | height: 1.5rem; |
| 170 | border-radius: 0.75rem; |
| 171 | top: 0.125rem; |
| 172 | left: 0.125rem; |
| 173 | background-color: var(--colIntIos); |
| 174 | } |
| 175 | |
| 176 | body.apple .md-switch:checked::after { |
| 177 | left: auto; |
| 178 | right: 0.125rem; |
| 179 | border-color: var(--colIntIosOnBk); |
| 180 | } |
| 181 | |
| 182 | body.apple .md-switch:focus::after { |
| 183 | border-color: var(--colIntIosOffBkFc); |
| 184 | } |
| 185 | |
| 186 | body.apple .md-switch:checked:focus::after { |
| 187 | border-color: var(--colIntIosOnBkFc); |
| 188 | } |
| 1 | .md-tab { |
| 2 | display: flex; |
| 3 | background-color: transparent; |
| 4 | align-items: stretch; |
| 5 | flex-wrap: nowrap; |
| 6 | overflow-x: auto; |
| 7 | position: sticky; |
| 8 | } |
| 9 | |
| 10 | .md-tab.fixed { |
| 11 | justify-content: center; |
| 12 | } |
| 13 | |
| 14 | .md-tab.scrollable { |
| 15 | padding-left: 2rem; |
| 16 | gap: 1rem; |
| 17 | } |
| 18 | |
| 19 | .md-tab.scroll { |
| 20 | background-color: var(--md-sys-color-surface-container-low); |
| 21 | } |
| 22 | |
| 23 | .md-tab a { |
| 24 | position: relative; |
| 25 | display: flex; |
| 26 | flex-direction: column; |
| 27 | justify-content: start; |
| 28 | align-items: center; |
| 29 | color: var(--md-sys-color-on-surface-variant); |
| 30 | font-family: var(--md-sys-typescale-title-small-font); |
| 31 | font-weight: var(--md-sys-typescale-title-small-weight); |
| 32 | font-size: var(--md-sys-typescale-title-small-size); |
| 33 | font-style: var(--md-sys-typescale-title-small-font-style); |
| 34 | letter-spacing: var(--md-sys-typescale-title-small-tracking); |
| 35 | line-height: var(--md-sys-typescale-title-small-line-height); |
| 36 | text-transform: var(--md-sys-typescale-title-small-text-transform); |
| 37 | text-decoration: var(--md-sys-typescale-title-small-text-decoration); |
| 38 | text-align: center; |
| 39 | box-sizing: border-box; |
| 40 | border-bottom: 0.1875rem solid var(--md-sys-color-surface); |
| 41 | } |
| 42 | |
| 43 | .md-tab.fixed a { |
| 44 | flex: 0 0 var(--tabWidth); |
| 45 | } |
| 46 | |
| 47 | .md-tab.scrollable a { |
| 48 | flex: 0 0 auto; |
| 49 | } |
| 50 | |
| 51 | .md-tab a.active { |
| 52 | border-bottom-color: var(--md-sys-color-primary); |
| 53 | } |
| 54 | |
| 55 | /* state layer */ |
| 56 | .md-tab a::after { |
| 57 | content: ""; |
| 58 | position: absolute; |
| 59 | z-index: -1; |
| 60 | top: 0; |
| 61 | right: 0; |
| 62 | left: 0; |
| 63 | bottom: 0; |
| 64 | background-color: transparent; |
| 65 | } |
| 66 | |
| 67 | .md-tab span { |
| 68 | font-size: var(--iconSize); |
| 69 | height: var(--iconSize); |
| 70 | width: var(--iconSize); |
| 71 | color: var(--md-sys-color-on-surface-variant); |
| 72 | } |
| 73 | |
| 74 | .md-tab .active span { |
| 75 | color: var(--md-sys-color-primary); |
| 76 | } |
| 77 | |
| 78 | .md-tab a:hover { |
| 79 | color: var(--md-sys-color-on-surface); |
| 80 | } |
| 81 | |
| 82 | /* state layer */ |
| 83 | .md-tab a:hover::after { |
| 84 | background-color: var(--md-sys-color-on-surface); |
| 85 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 86 | } |
| 87 | |
| 88 | .md-tab a.active:hover { |
| 89 | color: var(--md-sys-color-primary); |
| 90 | } |
| 91 | |
| 92 | /* state layer */ |
| 93 | .md-tab a.active:hover::after { |
| 94 | background-color: var(--md-sys-color-primary); |
| 95 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 96 | } |
| 97 | |
| 98 | .md-tab a:hover span { |
| 99 | color: var(--md-sys-color-on-surface); |
| 100 | } |
| 101 | |
| 102 | .md-tab a.active:hover span { |
| 103 | color: var(--md-sys-color-primary); |
| 104 | } |
| 105 | |
| 106 | .md-tab a:focus { |
| 107 | outline: none; |
| 108 | } |
| 109 | |
| 110 | /* state layer */ |
| 111 | .md-tab a:focus::after { |
| 112 | background-color: var(--md-sys-color-on-surface); |
| 113 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 114 | } |
| 115 | |
| 116 | /* state layer */ |
| 117 | .md-tab a.active:focus::after { |
| 118 | background-color: var(--md-sys-color-primary); |
| 119 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 120 | } |
| 121 | |
| 122 | .md-tab a:active { |
| 123 | background-position: center; |
| 124 | background-image: |
| 125 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
| 126 | background-size: 100%; |
| 127 | animation-name: md-ripple; |
| 128 | animation-duration: var(--md-sys-motion-duration-500); |
| 129 | } |
| 130 | |
| 131 | /* state layer */ |
| 132 | .md-tab a:active::after { |
| 133 | background-color: var(--md-sys-color-on-surface); |
| 134 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
| 135 | } |
| 136 | |
| 137 | /* state layer */ |
| 138 | .md-tab a.active:active::after { |
| 139 | background-color: var(--md-sys-color-primary); |
| 140 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
| 141 | } |
| 1 | .md-headline { |
| 2 | box-sizing: border-box; |
| 3 | margin: 0; |
| 4 | color: var(--md-sys-color-on-surface); |
| 5 | background-color: var(--md-sys-color-surface); |
| 6 | transition-property: color; |
| 7 | transition-duration: var(--md-sys-motion-duration-700); |
| 8 | } |
| 9 | |
| 10 | .md-headline.scroll-adicional { |
| 11 | color: var(--md-sys-color-surface-container-low); |
| 12 | background-color: var(--md-sys-color-surface-container-low); |
| 13 | } |
| 14 | |
| 15 | .md-headline.scroll { |
| 16 | color: var(--md-sys-color-surface); |
| 17 | } |
| 18 | |
| 19 | .md-headline.headline-small { |
| 20 | padding: 0 1rem 1.5rem 1rem; |
| 21 | } |
| 22 | |
| 23 | .md-headline.headline-medium { |
| 24 | padding: 0 1rem 1.75rem 1rem; |
| 25 | } |
| 1 | /* |
| 2 | Copyright 2016 Google Inc. All rights reserved. |
| 3 | |
| 4 | Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | you may not use this file except in compliance with the License. |
| 6 | You may obtain a copy of the License at |
| 7 | |
| 8 | http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | |
| 10 | Unless required by applicable law or agreed to in writing, software |
| 11 | distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | See the License for the specific language governing permissions and |
| 14 | limitations under the License. |
| 15 | */ |
| 16 | |
| 17 | :root { |
| 18 | /* Emphasized decelerate easing (out) */ |
| 19 | --md-sys-motion-easing-emphasized-decelerate-x0: 0.05000000074505806; |
| 20 | --md-sys-motion-easing-emphasized-decelerate-y0: 0.699999988079071; |
| 21 | --md-sys-motion-easing-emphasized-decelerate-x1: 0.10000000149011612; |
| 22 | --md-sys-motion-easing-emphasized-decelerate-y1: 1; |
| 23 | /* Emphasized accelerate easing (in) */ |
| 24 | --md-sys-motion-easing-emphasized-accelerate-x0: 0.30000001192092896; |
| 25 | --md-sys-motion-easing-emphasized-accelerate-y0: 0; |
| 26 | --md-sys-motion-easing-emphasized-accelerate-x1: 0.800000011920929; |
| 27 | --md-sys-motion-easing-emphasized-accelerate-y1: 0.15000000596046448; |
| 28 | /* Standard decelerate easing (out) */ |
| 29 | --md-sys-motion-easing-standard-decelerate-x0: 0; |
| 30 | --md-sys-motion-easing-standard-decelerate-y0: 0; |
| 31 | --md-sys-motion-easing-standard-decelerate-x1: 0; |
| 32 | --md-sys-motion-easing-standard-decelerate-y1: 1; |
| 33 | /* Standard accelerate easing (in) */ |
| 34 | --md-sys-motion-easing-standard-accelerate-x0: 0.30000001192092896; |
| 35 | --md-sys-motion-easing-standard-accelerate-y0: 0; |
| 36 | --md-sys-motion-easing-standard-accelerate-x1: 1; |
| 37 | --md-sys-motion-easing-standard-accelerate-y1: 1; |
| 38 | /* Duration 1000ms */ |
| 39 | --md-sys-motion-duration-1000: 1000ms; |
| 40 | /* Duration 900ms */ |
| 41 | --md-sys-motion-duration-900: 900ms; |
| 42 | /* Duration 800ms */ |
| 43 | --md-sys-motion-duration-800: 800ms; |
| 44 | /* Duration 700ms */ |
| 45 | --md-sys-motion-duration-700: 700ms; |
| 46 | /* Duration 600ms */ |
| 47 | --md-sys-motion-duration-600: 600ms; |
| 48 | /* Duration 550ms */ |
| 49 | --md-sys-motion-duration-550: 550ms; |
| 50 | /* Duration 500ms */ |
| 51 | --md-sys-motion-duration-500: 500ms; |
| 52 | /* Duration 450ms */ |
| 53 | --md-sys-motion-duration-450: 450ms; |
| 54 | /* Duration 400ms */ |
| 55 | --md-sys-motion-duration-400: 400ms; |
| 56 | /* Duration 350ms */ |
| 57 | --md-sys-motion-duration-350: 350ms; |
| 58 | /* Duration 300ms */ |
| 59 | --md-sys-motion-duration-300: 300ms; |
| 60 | /* Duration 250ms */ |
| 61 | --md-sys-motion-duration-250: 250ms; |
| 62 | /* Duration 200ms */ |
| 63 | --md-sys-motion-duration-200: 200ms; |
| 64 | /* Duration 150ms */ |
| 65 | --md-sys-motion-duration-150: 150ms; |
| 66 | /* Duration 100ms */ |
| 67 | --md-sys-motion-duration-100: 100ms; |
| 68 | /* Duration 50ms */ |
| 69 | --md-sys-motion-duration-50: 50ms; |
| 70 | /* Standard easing (in and out) */ |
| 71 | --md-sys-motion-easing-standard-x0: 0.20000000298023224; |
| 72 | --md-sys-motion-easing-standard-y0: 0; |
| 73 | --md-sys-motion-easing-standard-x1: 0; |
| 74 | --md-sys-motion-easing-standard-y1: 1; |
| 75 | /* Linear easing */ |
| 76 | --md-sys-motion-easing-linear-x0: 0; |
| 77 | --md-sys-motion-easing-linear-y0: 0; |
| 78 | --md-sys-motion-easing-linear-x1: 1; |
| 79 | --md-sys-motion-easing-linear-y1: 1; |
| 80 | /* Emphasized */ |
| 81 | --md-sys-motion-easing-emphasized-x0: 0.20000000298023224; |
| 82 | --md-sys-motion-easing-emphasized-y0: 0; |
| 83 | --md-sys-motion-easing-emphasized-x1: 0; |
| 84 | --md-sys-motion-easing-emphasized-y1: 1; |
| 85 | /* Motion path */ |
| 86 | --md-sys-motion-path-standard-path: 1; |
| 87 | } |
| 88 | .duration-50 { |
| 89 | transition-duration: var(--md-sys-motion-duration-50); |
| 90 | } |
| 91 | .duration-100 { |
| 92 | transition-duration: var(--md-sys-motion-duration-100); |
| 93 | } |
| 94 | .duration-150 { |
| 95 | transition-duration: var(--md-sys-motion-duration-150); |
| 96 | } |
| 97 | .duration-200 { |
| 98 | transition-duration: var(--md-sys-motion-duration-200); |
| 99 | } |
| 100 | .duration-250 { |
| 101 | transition-duration: var(--md-sys-motion-duration-250); |
| 102 | } |
| 103 | .duration-300 { |
| 104 | transition-duration: var(--md-sys-motion-duration-300); |
| 105 | } |
| 106 | .duration-350 { |
| 107 | transition-duration: var(--md-sys-motion-duration-350); |
| 108 | } |
| 109 | .duration-400 { |
| 110 | transition-duration: var(--md-sys-motion-duration-400); |
| 111 | } |
| 112 | .duration-450 { |
| 113 | transition-duration: var(--md-sys-motion-duration-450); |
| 114 | } |
| 115 | .duration-500 { |
| 116 | transition-duration: var(--md-sys-motion-duration-500); |
| 117 | } |
| 118 | .duration-550 { |
| 119 | transition-duration: var(--md-sys-motion-duration-550); |
| 120 | } |
| 121 | .duration-600 { |
| 122 | transition-duration: var(--md-sys-motion-duration-600); |
| 123 | } |
| 124 | .duration-700 { |
| 125 | transition-duration: var(--md-sys-motion-duration-700); |
| 126 | } |
| 127 | .duration-800 { |
| 128 | transition-duration: var(--md-sys-motion-duration-800); |
| 129 | } |
| 130 | .duration-900 { |
| 131 | transition-duration: var(--md-sys-motion-duration-900); |
| 132 | } |
| 133 | .duration-1000 { |
| 134 | transition-duration: var(--md-sys-motion-duration-1000); |
| 135 | } |
| 136 | .easing-standard { |
| 137 | transition-timing-function: cubic-bezier( |
| 138 | var(--md-sys-motion-easing-standard-x0), |
| 139 | var(--md-sys-motion-easing-standard-y0), |
| 140 | var(--md-sys-motion-easing-standard-x1), |
| 141 | var(--md-sys-motion-easing-standard-y1) |
| 142 | ); |
| 143 | } |
| 144 | .easing-linear { |
| 145 | transition-timing-function: cubic-bezier( |
| 146 | var(--md-sys-motion-easing-linear-x0), |
| 147 | var(--md-sys-motion-easing-linear-y0), |
| 148 | var(--md-sys-motion-easing-linear-x1), |
| 149 | var(--md-sys-motion-easing-linear-y1) |
| 150 | ); |
| 151 | } |
| 152 | .easing-standard-accelerate { |
| 153 | transition-timing-function: cubic-bezier( |
| 154 | var(--md-sys-motion-easing-standard-accelerate-x0), |
| 155 | var(--md-sys-motion-easing-standard-accelerate-y0), |
| 156 | var(--md-sys-motion-easing-standard-accelerate-x1), |
| 157 | var(--md-sys-motion-easing-standard-accelerate-y1) |
| 158 | ); |
| 159 | } |
| 160 | .easing-standard-decelerate { |
| 161 | transition-timing-function: cubic-bezier( |
| 162 | var(--md-sys-motion-easing-standard-decelerate-x0), |
| 163 | var(--md-sys-motion-easing-standard-decelerate-y0), |
| 164 | var(--md-sys-motion-easing-standard-decelerate-x1), |
| 165 | var(--md-sys-motion-easing-standard-decelerate-y1) |
| 166 | ); |
| 167 | } |
| 168 | .easing-emphasized { |
| 169 | transition-timing-function: cubic-bezier( |
| 170 | var(--md-sys-motion-easing-emphasized-x0), |
| 171 | var(--md-sys-motion-easing-emphasized-y0), |
| 172 | var(--md-sys-motion-easing-emphasized-x1), |
| 173 | var(--md-sys-motion-easing-emphasized-y1) |
| 174 | ); |
| 175 | } |
| 176 |
| 1 | /* roboto-regular - latin */ |
| 2 | @font-face { |
| 3 | /* Revisa |
| 4 | * https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display |
| 5 | * para otras opciones. */ |
| 6 | font-display: swap; |
| 7 | font-family: 'Roboto'; |
| 8 | font-style: normal; |
| 9 | font-weight: 400; |
| 10 | /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
| 11 | src: url('../fonts/roboto-v32-latin-regular.woff2') format('woff2'); |
| 12 | } |
| 1 | /* |
| 2 | Copyright 2016 Google Inc. All rights reserved. |
| 3 | |
| 4 | Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | you may not use this file except in compliance with the License. |
| 6 | You may obtain a copy of the License at |
| 7 | |
| 8 | http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | |
| 10 | Unless required by applicable law or agreed to in writing, software |
| 11 | distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | See the License for the specific language governing permissions and |
| 14 | limitations under the License. |
| 15 | */ |
| 16 | |
| 17 | :root { |
| 18 | /* Fully rounded */ |
| 19 | --md-sys-shape-corner-full-family: 3px; |
| 20 | /* Extra large top rounding */ |
| 21 | --md-sys-shape-corner-extra-large-top-family: 1px; |
| 22 | --md-sys-shape-corner-extra-large-top-default-size: 0px; |
| 23 | --md-sys-shape-corner-extra-large-top-top-left: 28px; |
| 24 | --md-sys-shape-corner-extra-large-top-top-right-unit: 1px; |
| 25 | --md-sys-shape-corner-extra-large-top-top-right: 28px; |
| 26 | /* Extra large rounding */ |
| 27 | --md-sys-shape-corner-extra-large-family: 1px; |
| 28 | --md-sys-shape-corner-extra-large-default-size-unit: 1px; |
| 29 | --md-sys-shape-corner-extra-large-default-size: 28px; |
| 30 | /* Large top rounding */ |
| 31 | --md-sys-shape-corner-large-top-family: 1px; |
| 32 | --md-sys-shape-corner-large-top-default-size-unit: 1px; |
| 33 | --md-sys-shape-corner-large-top-default-size: 0px; |
| 34 | --md-sys-shape-corner-large-top-top-left-unit: 1px; |
| 35 | --md-sys-shape-corner-large-top-top-left: 16px; |
| 36 | --md-sys-shape-corner-large-top-top-right-unit: 1px; |
| 37 | --md-sys-shape-corner-large-top-top-right: 16px; |
| 38 | /* Large end rounding */ |
| 39 | --md-sys-shape-corner-large-end-family: 1px; |
| 40 | --md-sys-shape-corner-large-end-default-size-unit: 1px; |
| 41 | --md-sys-shape-corner-large-end-default-size: 0px; |
| 42 | --md-sys-shape-corner-large-end-top-right-unit: 1px; |
| 43 | --md-sys-shape-corner-large-end-top-right: 16px; |
| 44 | --md-sys-shape-corner-large-end-bottom-right-unit: 1px; |
| 45 | --md-sys-shape-corner-large-end-bottom-right: 16px; |
| 46 | /* Large rounding */ |
| 47 | --md-sys-shape-corner-large-family: 1px; |
| 48 | --md-sys-shape-corner-large-default-size-unit: 1px; |
| 49 | --md-sys-shape-corner-large-default-size: 16px; |
| 50 | /* Medium rounding */ |
| 51 | --md-sys-shape-corner-medium-family: 1px; |
| 52 | --md-sys-shape-corner-medium-default-size-unit: 1px; |
| 53 | --md-sys-shape-corner-medium-default-size: 12px; |
| 54 | /* Small rounding */ |
| 55 | --md-sys-shape-corner-small-family: 1px; |
| 56 | --md-sys-shape-corner-small-default-size-unit: 1px; |
| 57 | --md-sys-shape-corner-small-default-size: 8px; |
| 58 | /* Extra small top rounding */ |
| 59 | --md-sys-shape-corner-extra-small-top-family: 1px; |
| 60 | --md-sys-shape-corner-extra-small-top-default-size-unit: 1px; |
| 61 | --md-sys-shape-corner-extra-small-top-default-size: 0px; |
| 62 | --md-sys-shape-corner-extra-small-top-top-left-unit: 1px; |
| 63 | --md-sys-shape-corner-extra-small-top-top-left: 4px; |
| 64 | --md-sys-shape-corner-extra-small-top-top-right-unit: 1px; |
| 65 | --md-sys-shape-corner-extra-small-top-top-right: 4px; |
| 66 | /* Extra small rounding */ |
| 67 | --md-sys-shape-corner-extra-small-family: 1px; |
| 68 | --md-sys-shape-corner-extra-small-default-size-unit: 1px; |
| 69 | --md-sys-shape-corner-extra-small-default-size: 4px; |
| 70 | /* No rounding */ |
| 71 | --md-sys-shape-corner-none-family: 1px; |
| 72 | --md-sys-shape-corner-none-default-size-unit: 1px; |
| 73 | --md-sys-shape-corner-none-default-size: 0px; |
| 74 | |
| 75 | --md-sys-shape-small: var(--md-sys-shape-corner-small-default-size); |
| 76 | --md-sys-shape-medium: var(--md-sys-shape-corner-medium-default-size); |
| 77 | --md-sys-shape-large: var(--md-sys-shape-corner-large-default-size); |
| 78 | } |
| 79 | |
| 80 | .shape-none { |
| 81 | border-radius: var(--md-sys-shape-corner-none-default-size); |
| 82 | } |
| 83 | .shape-extra-small { |
| 84 | border-radius: var(--md-sys-shape-corner-extra-small-default-size); |
| 85 | } |
| 86 | .shape-small { |
| 87 | border-radius: var(--md-sys-shape-corner-small-default-size); |
| 88 | } |
| 89 | .shape-medium { |
| 90 | border-radius: var(--md-sys-shape-corner-medium-default-size); |
| 91 | } |
| 92 | .shape-large { |
| 93 | border-radius: var(--md-sys-shape-corner-large-default-size); |
| 94 | } |
| 95 | .shape-extra-large { |
| 96 | border-radius: var(--md-sys-shape-corner-extra-large-default-size); |
| 97 | } |
| 98 | .extra-small-top { |
| 99 | border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left); |
| 100 | border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right); |
| 101 | } |
| 102 | .large-end { |
| 103 | border-top-right-radius: var(--md-sys-shape-corner-large-end-top-right); |
| 104 | border-bottom-right-radius: var(--md-sys-shape-corner-large-end-bottom-right); |
| 105 | } |
| 106 | .large-top { |
| 107 | border-top-left-radius: var(--md-sys-shape-corner-large-top-top-left); |
| 108 | border-top-right-radius: var(--md-sys-shape-corner-large-top-top-right); |
| 109 | } |
| 110 | .extra-large-top { |
| 111 | border-top-left-radius: var(--md-sys-shape-corner-extra-large-top-top-left); |
| 112 | border-top-right-radius: var(--md-sys-shape-corner-extra-large-top-top-right); |
| 113 | } |
| 114 |
| 1 | /* |
| 2 | Copyright 2016 Google Inc. All rights reserved. |
| 3 | |
| 4 | Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | you may not use this file except in compliance with the License. |
| 6 | You may obtain a copy of the License at |
| 7 | |
| 8 | http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | |
| 10 | Unless required by applicable law or agreed to in writing, software |
| 11 | distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | See the License for the specific language governing permissions and |
| 14 | limitations under the License. |
| 15 | */ |
| 16 | |
| 17 | :root { |
| 18 | /* Dragged state layer opacity */ |
| 19 | --md-sys-state-dragged-state-layer-opacity: 0.1599999964237213; |
| 20 | /* Pressed state layer opacity */ |
| 21 | /* --md-sys-state-pressed-state-layer-opacity: 0.11999999731779099; */ |
| 22 | --md-sys-state-pressed-state-layer-opacity: 0.15999999731779099; |
| 23 | /* Focus state layer opacity */ |
| 24 | --md-sys-state-focus-state-layer-opacity: 0.11999999731779099; |
| 25 | /* Hover state layer opacity */ |
| 26 | --md-sys-state-hover-state-layer-opacity: 0.07999999821186066; |
| 27 | } |
| 28 | .hover-state-layer { |
| 29 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
| 30 | } |
| 31 | .pressed-state-layer { |
| 32 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
| 33 | } |
| 34 | .dragged-state-layer { |
| 35 | opacity: var(--md-sys-state-dragged-state-layer-opacity); |
| 36 | } |
| 37 | .focus-state-layer { |
| 38 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
| 39 | } |
| 40 |
| 1 | :root { |
| 2 | --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark); |
| 3 | --md-sys-color-surface-tint-color: var(--md-sys-color-surface-tint-color-dark); |
| 4 | --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); |
| 5 | --md-sys-color-on-error: var(--md-sys-color-on-error-dark); |
| 6 | --md-sys-color-error-container: var(--md-sys-color-error-container-dark); |
| 7 | --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); |
| 8 | --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); |
| 9 | --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); |
| 10 | --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); |
| 11 | --md-sys-color-shadow: var(--md-sys-color-shadow-dark); |
| 12 | --md-sys-color-error: var(--md-sys-color-error-dark); |
| 13 | --md-sys-color-outline: var(--md-sys-color-outline-dark); |
| 14 | --md-sys-color-on-background: var(--md-sys-color-on-background-dark); |
| 15 | --md-sys-color-background: var(--md-sys-color-background-dark); |
| 16 | --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); |
| 17 | --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); |
| 18 | --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); |
| 19 | --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); |
| 20 | --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); |
| 21 | --md-sys-color-surface: var(--md-sys-color-surface-dark); |
| 22 | --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); |
| 23 | --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); |
| 24 | --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); |
| 25 | --md-sys-color-secondary: var(--md-sys-color-secondary-dark); |
| 26 | --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark); |
| 27 | --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); |
| 28 | --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); |
| 29 | --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); |
| 30 | --md-sys-color-primary: var(--md-sys-color-primary-dark); |
| 31 | } |
| 32 |
| 1 | :root { |
| 2 | --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light); |
| 3 | --md-sys-color-surface-tint-color: var(--md-sys-color-surface-tint-color-light); |
| 4 | --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); |
| 5 | --md-sys-color-on-error: var(--md-sys-color-on-error-light); |
| 6 | --md-sys-color-error-container: var(--md-sys-color-error-container-light); |
| 7 | --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); |
| 8 | --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); |
| 9 | --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); |
| 10 | --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); |
| 11 | --md-sys-color-shadow: var(--md-sys-color-shadow-light); |
| 12 | --md-sys-color-error: var(--md-sys-color-error-light); |
| 13 | --md-sys-color-outline: var(--md-sys-color-outline-light); |
| 14 | --md-sys-color-on-background: var(--md-sys-color-on-background-light); |
| 15 | --md-sys-color-background: var(--md-sys-color-background-light); |
| 16 | --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); |
| 17 | --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); |
| 18 | --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); |
| 19 | --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); |
| 20 | --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); |
| 21 | --md-sys-color-surface: var(--md-sys-color-surface-light); |
| 22 | --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); |
| 23 | --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); |
| 24 | --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); |
| 25 | --md-sys-color-secondary: var(--md-sys-color-secondary-light); |
| 26 | --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light); |
| 27 | --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); |
| 28 | --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); |
| 29 | --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); |
| 30 | --md-sys-color-primary: var(--md-sys-color-primary-light); |
| 31 | } |
| 32 |
| 1 | /* |
| 2 | Copyright 2016 Google Inc. All rights reserved. |
| 3 | |
| 4 | Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | you may not use this file except in compliance with the License. |
| 6 | You may obtain a copy of the License at |
| 7 | |
| 8 | http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | |
| 10 | Unless required by applicable law or agreed to in writing, software |
| 11 | distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | See the License for the specific language governing permissions and |
| 14 | limitations under the License. |
| 15 | */ |
| 16 | |
| 17 | /* This file is generated */ |
| 18 | |
| 19 | /* DO NOT EDIT */ |
| 20 | |
| 21 | :root { |
| 22 | /* Label Small */ |
| 23 | --md-sys-typescale-label-small-text-transform: unset; |
| 24 | --md-sys-typescale-label-small-axis-value: unset; |
| 25 | --md-sys-typescale-label-small-font-style: unset; |
| 26 | --md-sys-typescale-label-small-text-decoration: unset; |
| 27 | /* Label Small line height */ |
| 28 | --md-sys-typescale-label-small-line-height-value: 16px; |
| 29 | --md-sys-typescale-label-small-line-height-unit: 2px; |
| 30 | --md-sys-typescale-label-small-line-height: 16px; |
| 31 | /* Label Small font tracking */ |
| 32 | --md-sys-typescale-label-small-tracking-value: 0.5px; |
| 33 | --md-sys-typescale-label-small-tracking-unit: 2px; |
| 34 | --md-sys-typescale-label-small-tracking: 0.5px; |
| 35 | /* Label Small font size */ |
| 36 | --md-sys-typescale-label-small-size-value: 11px; |
| 37 | --md-sys-typescale-label-small-size-unit: 2px; |
| 38 | --md-sys-typescale-label-small-size: 11px; |
| 39 | /* Label Small font weight */ |
| 40 | --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium); |
| 41 | /* Label Small font name */ |
| 42 | --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain); |
| 43 | /* Label Medium */ |
| 44 | --md-sys-typescale-label-medium-axis-value: unset; |
| 45 | --md-sys-typescale-label-medium-font-style: unset; |
| 46 | --md-sys-typescale-label-medium-text-decoration: unset; |
| 47 | /* Label Medium text transform */ |
| 48 | --md-sys-typescale-label-medium-text-transform: 1; |
| 49 | /* Label Medium line height */ |
| 50 | --md-sys-typescale-label-medium-line-height-value: 16px; |
| 51 | --md-sys-typescale-label-medium-line-height-unit: 2px; |
| 52 | --md-sys-typescale-label-medium-line-height: 16px; |
| 53 | /* Label Medium font tracking */ |
| 54 | --md-sys-typescale-label-medium-tracking-value: 0.5px; |
| 55 | --md-sys-typescale-label-medium-tracking-unit: 2px; |
| 56 | --md-sys-typescale-label-medium-tracking: 0.5px; |
| 57 | /* Label Medium font size */ |
| 58 | --md-sys-typescale-label-medium-size-value: 12px; |
| 59 | --md-sys-typescale-label-medium-size-unit: 2px; |
| 60 | --md-sys-typescale-label-medium-size: 12px; |
| 61 | /* Label Medium font weight */ |
| 62 | --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium); |
| 63 | /* Label Medium font name */ |
| 64 | --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain); |
| 65 | /* Label Large */ |
| 66 | --md-sys-typescale-label-large-text-transform: unset; |
| 67 | --md-sys-typescale-label-large-axis-value: unset; |
| 68 | --md-sys-typescale-label-large-font-style: unset; |
| 69 | --md-sys-typescale-label-large-text-decoration: unset; |
| 70 | /* Label Large line height */ |
| 71 | --md-sys-typescale-label-large-line-height-value: 20px; |
| 72 | --md-sys-typescale-label-large-line-height-unit: 2px; |
| 73 | --md-sys-typescale-label-large-line-height: 20px; |
| 74 | /* Label Large font tracking */ |
| 75 | --md-sys-typescale-label-large-tracking-value: 0.10000000149011612px; |
| 76 | --md-sys-typescale-label-large-tracking-unit: 2px; |
| 77 | --md-sys-typescale-label-large-tracking: 0.10000000149011612px; |
| 78 | /* Label Large font size */ |
| 79 | --md-sys-typescale-label-large-size-value: 14px; |
| 80 | --md-sys-typescale-label-large-size-unit: 2px; |
| 81 | --md-sys-typescale-label-large-size: 14px; |
| 82 | /* Label Large font weight */ |
| 83 | --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium); |
| 84 | /* Label Large font name */ |
| 85 | --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain); |
| 86 | /* Body Small */ |
| 87 | --md-sys-typescale-body-small-text-transform: unset; |
| 88 | --md-sys-typescale-body-small-axis-value: unset; |
| 89 | --md-sys-typescale-body-small-font-style: unset; |
| 90 | --md-sys-typescale-body-small-text-decoration: unset; |
| 91 | /* Body Small line height */ |
| 92 | --md-sys-typescale-body-small-line-height-value: 16px; |
| 93 | --md-sys-typescale-body-small-line-height-unit: 2px; |
| 94 | --md-sys-typescale-body-small-line-height: 16px; |
| 95 | /* Body Small font tracking */ |
| 96 | --md-sys-typescale-body-small-tracking-value: 0.4000000059604645px; |
| 97 | --md-sys-typescale-body-small-tracking-unit: 2px; |
| 98 | --md-sys-typescale-body-small-tracking: 0.4000000059604645px; |
| 99 | /* Body Small font size */ |
| 100 | --md-sys-typescale-body-small-size-value: 12px; |
| 101 | --md-sys-typescale-body-small-size-unit: 2px; |
| 102 | --md-sys-typescale-body-small-size: 12px; |
| 103 | /* Body Small font weight */ |
| 104 | --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular); |
| 105 | /* Body Small font name */ |
| 106 | --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain); |
| 107 | /* Body Medium */ |
| 108 | --md-sys-typescale-body-medium-text-transform: unset; |
| 109 | --md-sys-typescale-body-medium-axis-value: unset; |
| 110 | --md-sys-typescale-body-medium-font-style: unset; |
| 111 | --md-sys-typescale-body-medium-text-decoration: unset; |
| 112 | /* Body Medium line height */ |
| 113 | --md-sys-typescale-body-medium-line-height-value: 20px; |
| 114 | --md-sys-typescale-body-medium-line-height-unit: 2px; |
| 115 | --md-sys-typescale-body-medium-line-height: 20px; |
| 116 | /* Body Medium font tracking */ |
| 117 | --md-sys-typescale-body-medium-tracking-value: 0.25px; |
| 118 | --md-sys-typescale-body-medium-tracking-unit: 2px; |
| 119 | --md-sys-typescale-body-medium-tracking: 0.25px; |
| 120 | /* Body Medium font size */ |
| 121 | --md-sys-typescale-body-medium-size-value: 14px; |
| 122 | --md-sys-typescale-body-medium-size-unit: 2px; |
| 123 | --md-sys-typescale-body-medium-size: 14px; |
| 124 | /* Body Medium font weight */ |
| 125 | --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular); |
| 126 | /* Body Medium font name */ |
| 127 | --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain); |
| 128 | /* Body Large */ |
| 129 | --md-sys-typescale-body-large-text-transform: unset; |
| 130 | --md-sys-typescale-body-large-axis-value: unset; |
| 131 | --md-sys-typescale-body-large-font-style: unset; |
| 132 | --md-sys-typescale-body-large-text-decoration: unset; |
| 133 | /* Body Large line height */ |
| 134 | --md-sys-typescale-body-large-line-height-value: 24px; |
| 135 | --md-sys-typescale-body-large-line-height-unit: 2px; |
| 136 | --md-sys-typescale-body-large-line-height: 24px; |
| 137 | /* Body Large font tracking */ |
| 138 | --md-sys-typescale-body-large-tracking-value: 0.5px; |
| 139 | --md-sys-typescale-body-large-tracking-unit: 2px; |
| 140 | --md-sys-typescale-body-large-tracking: 0.5px; |
| 141 | /* Body Large font size */ |
| 142 | --md-sys-typescale-body-large-size-value: 16px; |
| 143 | --md-sys-typescale-body-large-size-unit: 2px; |
| 144 | --md-sys-typescale-body-large-size: 16px; |
| 145 | /* Body Large font weight */ |
| 146 | --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular); |
| 147 | /* Body Large font name */ |
| 148 | --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain); |
| 149 | /* Title Small */ |
| 150 | --md-sys-typescale-title-small-text-transform: unset; |
| 151 | --md-sys-typescale-title-small-axis-value: unset; |
| 152 | --md-sys-typescale-title-small-font-style: unset; |
| 153 | --md-sys-typescale-title-small-text-decoration: unset; |
| 154 | /* Title Small line height */ |
| 155 | --md-sys-typescale-title-small-line-height-value: 20px; |
| 156 | --md-sys-typescale-title-small-line-height-unit: 2px; |
| 157 | --md-sys-typescale-title-small-line-height: 20px; |
| 158 | /* Title Small font tracking */ |
| 159 | --md-sys-typescale-title-small-tracking-value: 0.10000000149011612px; |
| 160 | --md-sys-typescale-title-small-tracking-unit: 2px; |
| 161 | --md-sys-typescale-title-small-tracking: 0.10000000149011612px; |
| 162 | /* Title Small font size */ |
| 163 | --md-sys-typescale-title-small-size-value: 14px; |
| 164 | --md-sys-typescale-title-small-size-unit: 2px; |
| 165 | --md-sys-typescale-title-small-size: 14px; |
| 166 | /* Title Small font weight */ |
| 167 | --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium); |
| 168 | /* Title Small font name */ |
| 169 | --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain); |
| 170 | /* Title Medium */ |
| 171 | --md-sys-typescale-title-medium-text-transform: unset; |
| 172 | --md-sys-typescale-title-medium-axis-value: unset; |
| 173 | --md-sys-typescale-title-medium-font-style: unset; |
| 174 | --md-sys-typescale-title-medium-text-decoration: unset; |
| 175 | /* Title Medium line height */ |
| 176 | --md-sys-typescale-title-medium-line-height-value: 24px; |
| 177 | --md-sys-typescale-title-medium-line-height-unit: 2px; |
| 178 | --md-sys-typescale-title-medium-line-height: 24px; |
| 179 | /* Title Medium font tracking */ |
| 180 | --md-sys-typescale-title-medium-tracking-value: 0.15000000596046448px; |
| 181 | --md-sys-typescale-title-medium-tracking-unit: 2px; |
| 182 | --md-sys-typescale-title-medium-tracking: 0.15000000596046448px; |
| 183 | /* Title Medium font size */ |
| 184 | --md-sys-typescale-title-medium-size-value: 16px; |
| 185 | --md-sys-typescale-title-medium-size-unit: 2px; |
| 186 | --md-sys-typescale-title-medium-size: 16px; |
| 187 | /* Title Medium font weight */ |
| 188 | --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium); |
| 189 | /* Title Medium font name */ |
| 190 | --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain); |
| 191 | /* Title Large */ |
| 192 | --md-sys-typescale-title-large-text-transform: unset; |
| 193 | --md-sys-typescale-title-large-axis-value: unset; |
| 194 | --md-sys-typescale-title-large-font-style: unset; |
| 195 | --md-sys-typescale-title-large-text-decoration: unset; |
| 196 | /* Title Large line height */ |
| 197 | --md-sys-typescale-title-large-line-height-value: 28px; |
| 198 | --md-sys-typescale-title-large-line-height-unit: 2px; |
| 199 | --md-sys-typescale-title-large-line-height: 28px; |
| 200 | /* Title Large font tracking */ |
| 201 | --md-sys-typescale-title-large-tracking-value: 0px; |
| 202 | --md-sys-typescale-title-large-tracking-unit: 2px; |
| 203 | --md-sys-typescale-title-large-tracking: 0px; |
| 204 | /* Title Large font size */ |
| 205 | --md-sys-typescale-title-large-size-value: 22px; |
| 206 | --md-sys-typescale-title-large-size-unit: 2px; |
| 207 | --md-sys-typescale-title-large-size: 22px; |
| 208 | /* Title Large font weight */ |
| 209 | --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular); |
| 210 | /* Title Large font name */ |
| 211 | --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand); |
| 212 | /* Headline Small */ |
| 213 | --md-sys-typescale-headline-small-text-transform: unset; |
| 214 | --md-sys-typescale-headline-small-axis-value: unset; |
| 215 | --md-sys-typescale-headline-small-font-style: unset; |
| 216 | --md-sys-typescale-headline-small-text-decoration: unset; |
| 217 | /* Headline Small line height */ |
| 218 | --md-sys-typescale-headline-small-line-height-value: 32px; |
| 219 | --md-sys-typescale-headline-small-line-height-unit: 2px; |
| 220 | --md-sys-typescale-headline-small-line-height: 32px; |
| 221 | /* Headline Small font tracking */ |
| 222 | --md-sys-typescale-headline-small-tracking-value: 0px; |
| 223 | --md-sys-typescale-headline-small-tracking-unit: 2px; |
| 224 | --md-sys-typescale-headline-small-tracking: 0px; |
| 225 | /* Headline Small font size */ |
| 226 | --md-sys-typescale-headline-small-size-value: 24px; |
| 227 | --md-sys-typescale-headline-small-size-unit: 2px; |
| 228 | --md-sys-typescale-headline-small-size: 24px; |
| 229 | /* Headline Small font weight */ |
| 230 | --md-sys-typescale-headline-small-weight: var( |
| 231 | --md-ref-typeface-weight-regular |
| 232 | ); |
| 233 | /* Headline Small font name */ |
| 234 | --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand); |
| 235 | /* Headline Medium */ |
| 236 | --md-sys-typescale-headline-medium-text-transform: unset; |
| 237 | --md-sys-typescale-headline-medium-axis-value: unset; |
| 238 | --md-sys-typescale-headline-medium-font-style: unset; |
| 239 | --md-sys-typescale-headline-medium-text-decoration: unset; |
| 240 | /* Headline Medium line height */ |
| 241 | --md-sys-typescale-headline-medium-line-height-value: 36px; |
| 242 | --md-sys-typescale-headline-medium-line-height-unit: 2px; |
| 243 | --md-sys-typescale-headline-medium-line-height: 36px; |
| 244 | /* Headline Medium font tracking */ |
| 245 | --md-sys-typescale-headline-medium-tracking-value: 0px; |
| 246 | --md-sys-typescale-headline-medium-tracking-unit: 2px; |
| 247 | --md-sys-typescale-headline-medium-tracking: 0px; |
| 248 | /* Headline Medium font size */ |
| 249 | --md-sys-typescale-headline-medium-size-value: 28px; |
| 250 | --md-sys-typescale-headline-medium-size-unit: 2px; |
| 251 | --md-sys-typescale-headline-medium-size: 28px; |
| 252 | /* Headline Medium font weight */ |
| 253 | --md-sys-typescale-headline-medium-weight: var( |
| 254 | --md-ref-typeface-weight-regular |
| 255 | ); |
| 256 | /* Headline Medium font name */ |
| 257 | --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand); |
| 258 | /* Headline Large */ |
| 259 | --md-sys-typescale-headline-large-text-transform: unset; |
| 260 | --md-sys-typescale-headline-large-axis-value: unset; |
| 261 | --md-sys-typescale-headline-large-font-style: unset; |
| 262 | --md-sys-typescale-headline-large-text-decoration: unset; |
| 263 | /* Headline Large line height */ |
| 264 | --md-sys-typescale-headline-large-line-height-value: 40px; |
| 265 | --md-sys-typescale-headline-large-line-height-unit: 2px; |
| 266 | --md-sys-typescale-headline-large-line-height: 40px; |
| 267 | /* Headline Large font tracking */ |
| 268 | --md-sys-typescale-headline-large-tracking-value: 0px; |
| 269 | --md-sys-typescale-headline-large-tracking-unit: 2px; |
| 270 | --md-sys-typescale-headline-large-tracking: 0px; |
| 271 | /* Headline Large font size */ |
| 272 | --md-sys-typescale-headline-large-size-value: 32px; |
| 273 | --md-sys-typescale-headline-large-size-unit: 2px; |
| 274 | --md-sys-typescale-headline-large-size: 32px; |
| 275 | /* Headline Large font name */ |
| 276 | --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand); |
| 277 | /* Headline Large font weight */ |
| 278 | --md-sys-typescale-headline-large-weight: var( |
| 279 | --md-ref-typeface-weight-regular |
| 280 | ); |
| 281 | /* Display Small */ |
| 282 | --md-sys-typescale-display-small-text-transform: unset; |
| 283 | --md-sys-typescale-display-small-axis-value: unset; |
| 284 | --md-sys-typescale-display-small-font-style: unset; |
| 285 | --md-sys-typescale-display-small-text-decoration: unset; |
| 286 | /* Display Small line height */ |
| 287 | --md-sys-typescale-display-small-line-height-value: 44px; |
| 288 | --md-sys-typescale-display-small-line-height-unit: 2px; |
| 289 | --md-sys-typescale-display-small-line-height: 44px; |
| 290 | /* Display Small font tracking */ |
| 291 | --md-sys-typescale-display-small-tracking-value: 0px; |
| 292 | --md-sys-typescale-display-small-tracking-unit: 2px; |
| 293 | --md-sys-typescale-display-small-tracking: 0px; |
| 294 | /* Display Small font size */ |
| 295 | --md-sys-typescale-display-small-size-value: 36px; |
| 296 | --md-sys-typescale-display-small-size-unit: 2px; |
| 297 | --md-sys-typescale-display-small-size: 36px; |
| 298 | /* Display Small font weight */ |
| 299 | --md-sys-typescale-display-small-weight: var( |
| 300 | --md-ref-typeface-weight-regular |
| 301 | ); |
| 302 | /* Display Small font name */ |
| 303 | --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand); |
| 304 | /* Display Medium */ |
| 305 | --md-sys-typescale-display-medium-text-transform: unset; |
| 306 | --md-sys-typescale-display-medium-axis-value: unset; |
| 307 | --md-sys-typescale-display-medium-font-style: unset; |
| 308 | --md-sys-typescale-display-medium-text-decoration: unset; |
| 309 | /* Display Medium line height */ |
| 310 | --md-sys-typescale-display-medium-line-height-value: 52px; |
| 311 | --md-sys-typescale-display-medium-line-height-unit: 2px; |
| 312 | --md-sys-typescale-display-medium-line-height: 52px; |
| 313 | /* Display Medium font tracking */ |
| 314 | --md-sys-typescale-display-medium-tracking-value: 0px; |
| 315 | --md-sys-typescale-display-medium-tracking-unit: 2px; |
| 316 | --md-sys-typescale-display-medium-tracking: 0px; |
| 317 | /* Display Medium font size */ |
| 318 | --md-sys-typescale-display-medium-size-value: 45px; |
| 319 | --md-sys-typescale-display-medium-size-unit: 2px; |
| 320 | --md-sys-typescale-display-medium-size: 45px; |
| 321 | /* Display Medium font weight */ |
| 322 | --md-sys-typescale-display-medium-weight: var( |
| 323 | --md-ref-typeface-weight-regular |
| 324 | ); |
| 325 | /* Display Medium font name */ |
| 326 | --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand); |
| 327 | /* Display Large */ |
| 328 | --md-sys-typescale-display-large-text-transform: unset; |
| 329 | --md-sys-typescale-display-large-axis-value: unset; |
| 330 | --md-sys-typescale-display-large-font-style: unset; |
| 331 | --md-sys-typescale-display-large-text-decoration: unset; |
| 332 | /* Display Large line height */ |
| 333 | --md-sys-typescale-display-large-line-height-value: 64px; |
| 334 | --md-sys-typescale-display-large-line-height-unit: 2px; |
| 335 | --md-sys-typescale-display-large-line-height: 64px; |
| 336 | /* Display Large font tracking */ |
| 337 | --md-sys-typescale-display-large-tracking-value: -0.25px; |
| 338 | --md-sys-typescale-display-large-tracking-unit: 2px; |
| 339 | --md-sys-typescale-display-large-tracking: -0.25px; |
| 340 | /* Display Large font size */ |
| 341 | --md-sys-typescale-display-large-size-value: 57px; |
| 342 | --md-sys-typescale-display-large-size-unit: 2px; |
| 343 | --md-sys-typescale-display-large-size: 57px; |
| 344 | /* Display Large font weight */ |
| 345 | --md-sys-typescale-display-large-weight: var( |
| 346 | --md-ref-typeface-weight-regular |
| 347 | ); |
| 348 | /* Display Large font name */ |
| 349 | --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand); |
| 350 | /* Plain typeface */ |
| 351 | --md-ref-typeface-plain: var(--Font); |
| 352 | /* Brand typeface */ |
| 353 | --md-ref-typeface-brand: var(--Font); |
| 354 | /* Bold weight */ |
| 355 | --md-ref-typeface-weight-bold: 700; |
| 356 | /* Medium weight */ |
| 357 | --md-ref-typeface-weight-medium: 500; |
| 358 | /* Regular weight */ |
| 359 | --md-ref-typeface-weight-regular: 400; |
| 360 | } |
| 361 | |
| 362 | /* Label Small */ |
| 363 | .label-small { |
| 364 | font-family: var(--md-sys-typescale-label-small-font); |
| 365 | font-weight: var(--md-sys-typescale-label-small-weight); |
| 366 | font-size: var(--md-sys-typescale-label-small-size); |
| 367 | font-style: var(--md-sys-typescale-label-small-font-style); |
| 368 | letter-spacing: var(--md-sys-typescale-label-small-tracking); |
| 369 | line-height: var(--md-sys-typescale-label-small-line-height); |
| 370 | text-transform: var(--md-sys-typescale-label-small-text-transform); |
| 371 | text-decoration: var(--md-sys-typescale-label-small-text-decoration); |
| 372 | } |
| 373 | /* Label Medium */ |
| 374 | .label-medium { |
| 375 | font-family: var(--md-sys-typescale-label-medium-font); |
| 376 | font-weight: var(--md-sys-typescale-label-medium-weight); |
| 377 | font-size: var(--md-sys-typescale-label-medium-size); |
| 378 | font-style: var(--md-sys-typescale-label-medium-font-style); |
| 379 | letter-spacing: var(--md-sys-typescale-label-medium-tracking); |
| 380 | line-height: var(--md-sys-typescale-label-medium-line-height); |
| 381 | text-transform: var(--md-sys-typescale-label-medium-text-transform); |
| 382 | text-decoration: var(--md-sys-typescale-label-medium-text-decoration); |
| 383 | } |
| 384 | /* Label Large */ |
| 385 | .label-large { |
| 386 | font-family: var(--md-sys-typescale-label-large-font); |
| 387 | font-weight: var(--md-sys-typescale-label-large-weight); |
| 388 | font-size: var(--md-sys-typescale-label-large-size); |
| 389 | font-style: var(--md-sys-typescale-label-large-font-style); |
| 390 | letter-spacing: var(--md-sys-typescale-label-large-tracking); |
| 391 | line-height: var(--md-sys-typescale-label-large-line-height); |
| 392 | text-transform: var(--md-sys-typescale-label-large-text-transform); |
| 393 | text-decoration: var(--md-sys-typescale-label-large-text-decoration); |
| 394 | } |
| 395 | /* Body Small */ |
| 396 | .body-small { |
| 397 | font-family: var(--md-sys-typescale-body-small-font); |
| 398 | font-weight: var(--md-sys-typescale-body-small-weight); |
| 399 | font-size: var(--md-sys-typescale-body-small-size); |
| 400 | font-style: var(--md-sys-typescale-body-small-font-style); |
| 401 | letter-spacing: var(--md-sys-typescale-body-small-tracking); |
| 402 | line-height: var(--md-sys-typescale-body-small-line-height); |
| 403 | text-transform: var(--md-sys-typescale-body-small-text-transform); |
| 404 | text-decoration: var(--md-sys-typescale-body-small-text-decoration); |
| 405 | } |
| 406 | /* Body Medium */ |
| 407 | .body-medium { |
| 408 | font-family: var(--md-sys-typescale-body-medium-font); |
| 409 | font-weight: var(--md-sys-typescale-body-medium-weight); |
| 410 | font-size: var(--md-sys-typescale-body-medium-size); |
| 411 | font-style: var(--md-sys-typescale-body-medium-font-style); |
| 412 | letter-spacing: var(--md-sys-typescale-body-medium-tracking); |
| 413 | line-height: var(--md-sys-typescale-body-medium-line-height); |
| 414 | text-transform: var(--md-sys-typescale-body-medium-text-transform); |
| 415 | text-decoration: var(--md-sys-typescale-body-medium-text-decoration); |
| 416 | } |
| 417 | /* Body Large */ |
| 418 | .body-large { |
| 419 | font-family: var(--md-sys-typescale-body-large-font); |
| 420 | font-weight: var(--md-sys-typescale-body-large-weight); |
| 421 | font-size: var(--md-sys-typescale-body-large-size); |
| 422 | font-style: var(--md-sys-typescale-body-large-font-style); |
| 423 | letter-spacing: var(--md-sys-typescale-body-large-tracking); |
| 424 | line-height: var(--md-sys-typescale-body-large-line-height); |
| 425 | text-transform: var(--md-sys-typescale-body-large-text-transform); |
| 426 | text-decoration: var(--md-sys-typescale-body-large-text-decoration); |
| 427 | } |
| 428 | /* Title Small */ |
| 429 | .title-small { |
| 430 | font-family: var(--md-sys-typescale-title-small-font); |
| 431 | font-weight: var(--md-sys-typescale-title-small-weight); |
| 432 | font-size: var(--md-sys-typescale-title-small-size); |
| 433 | font-style: var(--md-sys-typescale-title-small-font-style); |
| 434 | letter-spacing: var(--md-sys-typescale-title-small-tracking); |
| 435 | line-height: var(--md-sys-typescale-title-small-line-height); |
| 436 | text-transform: var(--md-sys-typescale-title-small-text-transform); |
| 437 | text-decoration: var(--md-sys-typescale-title-small-text-decoration); |
| 438 | } |
| 439 | /* Title Medium */ |
| 440 | .title-medium { |
| 441 | font-family: var(--md-sys-typescale-title-medium-font); |
| 442 | font-weight: var(--md-sys-typescale-title-medium-weight); |
| 443 | font-size: var(--md-sys-typescale-title-medium-size); |
| 444 | font-style: var(--md-sys-typescale-title-medium-font-style); |
| 445 | letter-spacing: var(--md-sys-typescale-title-medium-tracking); |
| 446 | line-height: var(--md-sys-typescale-title-medium-line-height); |
| 447 | text-transform: var(--md-sys-typescale-title-medium-text-transform); |
| 448 | text-decoration: var(--md-sys-typescale-title-medium-text-decoration); |
| 449 | } |
| 450 | /* Title Large */ |
| 451 | .title-large { |
| 452 | font-family: var(--md-sys-typescale-title-large-font); |
| 453 | font-weight: var(--md-sys-typescale-title-large-weight); |
| 454 | font-size: var(--md-sys-typescale-title-large-size); |
| 455 | font-style: var(--md-sys-typescale-title-large-font-style); |
| 456 | letter-spacing: var(--md-sys-typescale-title-large-tracking); |
| 457 | line-height: var(--md-sys-typescale-title-large-line-height); |
| 458 | text-transform: var(--md-sys-typescale-title-large-text-transform); |
| 459 | text-decoration: var(--md-sys-typescale-title-large-text-decoration); |
| 460 | } |
| 461 | /* Headline Small */ |
| 462 | .headline-small { |
| 463 | font-family: var(--md-sys-typescale-headline-small-font); |
| 464 | font-weight: var(--md-sys-typescale-headline-small-weight); |
| 465 | font-size: var(--md-sys-typescale-headline-small-size); |
| 466 | font-style: var(--md-sys-typescale-headline-small-font-style); |
| 467 | letter-spacing: var(--md-sys-typescale-headline-small-tracking); |
| 468 | line-height: var(--md-sys-typescale-headline-small-line-height); |
| 469 | text-transform: var(--md-sys-typescale-headline-small-text-transform); |
| 470 | text-decoration: var(--md-sys-typescale-headline-small-text-decoration); |
| 471 | } |
| 472 | /* Headline Medium */ |
| 473 | .headline-medium { |
| 474 | font-family: var(--md-sys-typescale-headline-medium-font); |
| 475 | font-weight: var(--md-sys-typescale-headline-medium-weight); |
| 476 | font-size: var(--md-sys-typescale-headline-medium-size); |
| 477 | font-style: var(--md-sys-typescale-headline-medium-font-style); |
| 478 | letter-spacing: var(--md-sys-typescale-headline-medium-tracking); |
| 479 | line-height: var(--md-sys-typescale-headline-medium-line-height); |
| 480 | text-transform: var(--md-sys-typescale-headline-medium-text-transform); |
| 481 | text-decoration: var(--md-sys-typescale-headline-medium-text-decoration); |
| 482 | } |
| 483 | /* Headline Large */ |
| 484 | .headline-large { |
| 485 | font-family: var(--md-sys-typescale-headline-large-font); |
| 486 | font-weight: var(--md-sys-typescale-headline-large-weight); |
| 487 | font-size: var(--md-sys-typescale-headline-large-size); |
| 488 | font-style: var(--md-sys-typescale-headline-large-font-style); |
| 489 | letter-spacing: var(--md-sys-typescale-headline-large-tracking); |
| 490 | line-height: var(--md-sys-typescale-headline-large-line-height); |
| 491 | text-transform: var(--md-sys-typescale-headline-large-text-transform); |
| 492 | text-decoration: var(--md-sys-typescale-headline-large-text-decoration); |
| 493 | } |
| 494 | /* Display Small */ |
| 495 | .display-small { |
| 496 | font-family: var(--md-sys-typescale-display-small-font); |
| 497 | font-weight: var(--md-sys-typescale-display-small-weight); |
| 498 | font-size: var(--md-sys-typescale-display-small-size); |
| 499 | font-style: var(--md-sys-typescale-display-small-font-style); |
| 500 | letter-spacing: var(--md-sys-typescale-display-small-tracking); |
| 501 | line-height: var(--md-sys-typescale-display-small-line-height); |
| 502 | text-transform: var(--md-sys-typescale-display-small-text-transform); |
| 503 | text-decoration: var(--md-sys-typescale-display-small-text-decoration); |
| 504 | } |
| 505 | /* Display Medium */ |
| 506 | .display-medium { |
| 507 | font-family: var(--md-sys-typescale-display-medium-font); |
| 508 | font-weight: var(--md-sys-typescale-display-medium-weight); |
| 509 | font-size: var(--md-sys-typescale-display-medium-size); |
| 510 | font-style: var(--md-sys-typescale-display-medium-font-style); |
| 511 | letter-spacing: var(--md-sys-typescale-display-medium-tracking); |
| 512 | line-height: var(--md-sys-typescale-display-medium-line-height); |
| 513 | text-transform: var(--md-sys-typescale-display-medium-text-transform); |
| 514 | text-decoration: var(--md-sys-typescale-display-medium-text-decoration); |
| 515 | } |
| 516 | /* Display Large */ |
| 517 | .display-large { |
| 518 | font-family: var(--md-sys-typescale-display-large-font); |
| 519 | font-weight: var(--md-sys-typescale-display-large-weight); |
| 520 | font-size: var(--md-sys-typescale-display-large-size); |
| 521 | font-style: var(--md-sys-typescale-display-large-font-style); |
| 522 | letter-spacing: var(--md-sys-typescale-display-large-tracking); |
| 523 | line-height: var(--md-sys-typescale-display-large-line-height); |
| 524 | text-transform: var(--md-sys-typescale-display-large-text-transform); |
| 525 | text-decoration: var(--md-sys-typescale-display-large-text-decoration); |
| 526 | } |
| 527 |