A. Carpeta « lib / css »

Versión para imprimir.

1. lib / css / material-symbols-outlined.css

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}

2. lib / css / md-cards.css

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}

3. lib / css / md-fab-primary.css

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}

4. lib / css / md-filled-button.css

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}

5. lib / css / md-filled-text-field.css

1.md-filled-text-field {
2 position: relative;
3 overflow: hidden;
4 display: flex;
5 flex-direction: column;
6 align-items: stretch;
7 padding-top: calc(0.5rem + var(--md-sys-typescale-body-small-line-height));
8 border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left);
9 border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right);
10 overflow: hidden;
11}
12
13/* container */
14.md-filled-text-field::before {
15 content: "";
16 position: absolute;
17 z-index: -2;
18 top: 0;
19 right: 0;
20 left: 0;
21 bottom: 0;
22 background-color: var(--md-sys-color-surface-container-highest);
23}
24
25/* state layer */
26.md-filled-text-field::after {
27 content: "";
28 position: absolute;
29 z-index: -1;
30 top: 0;
31 right: 0;
32 left: 0;
33 bottom: 0;
34 background-color: transparent;
35}
36
37.md-filled-text-field span,
38.md-filled-text-field label {
39 position: absolute;
40 top: 0.5rem;
41 left: 1rem;
42 right: 1rem;
43 display: block;
44 transform: translateY(1rem);
45 transition-property: transform;
46 transition-duration: var(--md-sys-motion-duration-300);
47 white-space: nowrap;
48 text-overflow: ellipsis;
49 overflow: hidden;
50 color: var(--md-sys-color-on-surface-variant);
51 font-family: var(--md-sys-typescale-body-large-font);
52 font-weight: var(--md-sys-typescale-body-large-weight);
53 font-size: var(--md-sys-typescale-body-large-size);
54 font-style: var(--md-sys-typescale-body-large-font-style);
55 letter-spacing: var(--md-sys-typescale-body-large-tracking);
56 line-height: var(--md-sys-typescale-body-large-line-height);
57 text-transform: var(--md-sys-typescale-body-large-text-transform);
58 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
59}
60
61.md-filled-text-field :not(:placeholder-shown)+span,
62.md-filled-text-field :not(:placeholder-shown)+label,
63.md-filled-text-field .populated+span,
64.md-filled-text-field .populated+label,
65.md-filled-text-field:focus-within span,
66.md-filled-text-field:focus-within label,
67.md-filled-text-field.float span,
68.md-filled-text-field.float label {
69 transform: translateY(0);
70 font-family: var(--md-sys-typescale-body-small-font);
71 font-weight: var(--md-sys-typescale-body-small-weight);
72 font-size: var(--md-sys-typescale-body-small-size);
73 font-style: var(--md-sys-typescale-body-small-font-style);
74 letter-spacing: var(--md-sys-typescale-body-small-tracking);
75 line-height: var(--md-sys-typescale-body-small-line-height);
76 text-transform: var(--md-sys-typescale-body-small-text-transform);
77 text-decoration: var(--md-sys-typescale-body-small-text-decoration);
78}
79
80.md-filled-text-field :not(label, span, small) {
81 position: relative;
82 caret-color: var(--md-sys-color-primary);
83 min-height: 2rem;
84 box-sizing: border-box;
85 padding-left: 1rem;
86 padding-bottom: 0.5rem;
87 padding-right: 1rem;
88 border: none;
89 resize: none;
90 color: var(--md-sys-color-on-surface);
91 font-family: var(--md-sys-typescale-body-large-font);
92 font-weight: var(--md-sys-typescale-body-large-weight);
93 font-size: var(--md-sys-typescale-body-large-size);
94 font-style: var(--md-sys-typescale-body-large-font-style);
95 letter-spacing: var(--md-sys-typescale-body-large-tracking);
96 line-height: var(--md-sys-typescale-body-large-line-height);
97 text-transform: var(--md-sys-typescale-body-large-text-transform);
98 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
99 background-color: transparent;
100 outline: none;
101 border-bottom-width: 0.0625rem;
102 border-bottom-style: solid;
103 border-bottom-color: var(--md-sys-color-on-surface-variant);
104}
105
106.md-filled-text-field ::placeholder {
107 color: transparent;
108}
109
110.md-filled-text-field small {
111 display: block;
112 color: var(--md-sys-color-on-surface-variant);
113 background-color: var(--md-sys-color-background);
114 font-family: var(--md-sys-typescale-body-small-font);
115 font-weight: var(--md-sys-typescale-body-small-weight);
116 font-size: var(--md-sys-typescale-body-small-size);
117 font-style: var(--md-sys-typescale-body-small-font-style);
118 letter-spacing: var(--md-sys-typescale-body-small-tracking);
119 line-height: var(--md-sys-typescale-body-small-line-height);
120 text-transform: var(--md-sys-typescale-body-small-text-transform);
121 text-decoration: var(--md-sys-typescale-body-small-text-decoration);
122 padding: 0.25rem 1rem 0 1rem;
123 white-space: nowrap;
124 text-overflow: ellipsis;
125 overflow: hidden;
126}
127
128.md-filled-text-field:hover span,
129.md-filled-text-field:hover label {
130 color: var(--md-sys-color-on-surface-variant);
131}
132
133.md-filled-text-field:hover :not(label, span, small) {
134 padding-bottom: 0.5rem;
135 border-bottom-width: 0.0625rem;
136 border-bottom-color: var(--md-sys-color-on-surface);
137}
138
139.md-filled-text-field:hover::after {
140 background-color: var(--md-sys-color-on-surface);
141 opacity: var(--md-sys-state-hover-state-layer-opacity);
142}
143
144.md-filled-text-field:hover small {
145 color: var(--md-sys-color-on-surface-variant);
146}
147
148.md-filled-text-field:focus-within span,
149.md-filled-text-field:focus-within label {
150 color: var(--md-sys-color-primary);
151}
152
153.md-filled-text-field :focus {
154 color: var(--md-sys-color-on-surface);
155 outline: none;
156 padding-bottom: 0.4375rem;
157 border-bottom-width: 0.125rem;
158 border-bottom-color: var(--md-sys-color-primary);
159}
160
161.md-filled-text-field:hover :focus {
162 padding-bottom: 0.4375rem;
163 border-bottom-width: 0.125rem;
164}
165
166.md-filled-text-field:focus-within small {
167 color: var(--md-sys-color-on-surface-variant);
168}
169
170.md-filled-text-field :invalid {
171 color: var(--md-sys-color-on-surface);
172 border-bottom-color: var(--md-sys-color-error);
173}
174
175.md-filled-text-field :invalid+span,
176.md-filled-text-field :invalid+label {
177 color: var(--md-sys-color-error);
178}
179
180.md-filled-text-field :invalid~small,
181.md-filled-text-field:hover :invalid~small,
182.md-filled-text-field:focus-within .input-text:invalid~small {
183 color: var(--md-sys-color-error);
184}
185
186.md-filled-text-field :invalid:focus {
187 caret-color: var(--md-sys-color-error);
188 border-bottom-color: var(--md-sys-color-error);
189}
190
191.md-filled-text-field:hover :invalid {
192 color: var(--md-sys-color-on-surface);
193 border-bottom-color: var(--md-sys-color-error);
194}

6. lib / css / md-list.css

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}

7. lib / css / md-menu.css

1.md-menu {
2 display: none;
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-timing-function:
13 cubic-bezier(var(--md-sys-motion-easing-standard-x0),
14 var(--md-sys-motion-easing-standard-y0),
15 var(--md-sys-motion-easing-standard-x1),
16 var(--md-sys-motion-easing-standard-y1));
17 transition-property: display, transform;
18 transition-behavior: allow-discrete;
19 transition-duration: var(--md-sys-motion-duration-500);
20}
21
22.md-menu.open {
23 display: block;
24 transform: translateY(0) scaleY(1);
25}
26
27@starting-style {
28 .md-menu.open {
29 display: block;
30 transform: translateY(-50%) scaleY(0);
31 }
32}
33
34/* container */
35.md-menu>*::after {
36 content: "";
37 position: absolute;
38 z-index: -2;
39 top: 0;
40 right: 0;
41 left: 0;
42 bottom: 0;
43}
44
45/* container */
46.md-menu>.selected::after {
47 background-color: var(--md-sys-color-secondary-container);
48}
49
50/* label, shape */
51.md-menu>* {
52 position: relative;
53 display: block;
54 box-sizing: border-box;
55 height: 3rem;
56 line-height: 3rem;
57 padding: 0 0.75rem;
58 color: var(--md-sys-color-on-surface);
59 font-family: var(--md-sys-typescale-label-large-font);
60 font-weight: var(--md-sys-typescale-label-large-weight);
61 font-size: var(--md-sys-typescale-label-large-size);
62 font-style: var(--md-sys-typescale-label-large-font-style);
63 letter-spacing: var(--md-sys-typescale-label-large-tracking);
64 text-transform: var(--md-sys-typescale-label-large-text-transform);
65 text-decoration: var(--md-sys-typescale-label-large-text-decoration);
66 white-space: nowrap;
67 text-overflow: ellipsis;
68 overflow: hidden;
69}
70
71/* label, shape */
72.md-menu>.selected {
73 color: var(--md-sys-color-on-secondary-container);
74}
75
76/* state layer */
77.md-menu>*::before {
78 content: "";
79 position: absolute;
80 z-index: -1;
81 top: 0;
82 right: 0;
83 left: 0;
84 bottom: 0;
85}
86
87/* icon */
88.md-menu>* span {
89 position: relative;
90 margin-right: 0.75rem;
91 vertical-align: middle;
92 color: var(--md-sys-color-on-surface-variant);
93 font-size: 1.5rem;
94 width: 1.5rem;
95 height: 1.5rem;
96}
97
98/* icon */
99.md-menu>.selected span {
100 color: var(--md-sys-color-on-secondary-container);
101}
102
103/* state layer */
104.md-menu>:hover::before {
105 background-color: var(--md-sys-color-on-surface);
106 opacity: var(--md-sys-state-hover-state-layer-opacity);
107}
108
109/* label, shape */
110.md-menu>:hover {
111 color: var(--md-sys-color-on-surface);
112}
113
114/* icon */
115.md-menu>:hover span {
116 color: var(--md-sys-color-on-surface-variant);
117}
118
119/* state layer */
120.md-menu>:focus::before {
121 background-color: var(--md-sys-color-on-surface);
122 opacity: var(--md-sys-state-focus-state-layer-opacity);
123}
124
125/* label, shape */
126.md-menu>:focus {
127 color: var(--md-sys-color-on-surface);
128 outline: none;
129}
130
131/* icon */
132.md-menu>:focus span {
133 color: var(--md-sys-color-on-surface-variant);
134}
135
136/* label, shape */
137.md-menu>:active {
138 background-position: center;
139 background-image:
140 radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
141 background-size: 100%;
142 animation-name: md-ripple;
143 animation-duration: var(--md-sys-motion-duration-500);
144 color: var(--md-sys-color-on-surface);
145}
146
147/* state layer */
148.md-menu>:active::before {
149 background-color: var(--md-sys-color-on-surface);
150 opacity: var(--md-sys-state-pressed-state-layer-opacity);
151}
152
153
154/* icon */
155.md-menu>:active span {
156 color: var(--md-sys-color-on-surface-variant);
157}
158
159.md-menu input[type="radio"] {
160 appearance: none;
161 transform: scaleX(0);
162}

8. lib / css / md-navigation-bar.css

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}

9. lib / css / md-outline-button.css

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}

10. lib / css / md-ripple.css

1@keyframes md-ripple {
2
3 from {
4 background-size: 100%;
5 }
6
7 to {
8 background-size: 15000%;
9 }
10
11}

11. lib / css / md-segmented-button.css

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}

12. lib / css / md-slider-field.css

1md-slider-field input::-webkit-slider-runnable-track {
2 height: 0.25rem;
3 border-radius: 0.125rem;
4}
5
6md-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
15md-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
19md-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
23md-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
33md-slider-field.material::-moz-range-track {
34 height: 0.25rem;
35 border-radius: 0.125rem;
36}
37
38md-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
48md-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
52md-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
56md-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}

13. lib / css / md-standard-icon-button.css

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}

14. lib / css / md-switch.css

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 */
18body.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
26body.material .md-switch:checked {
27 background-color: var(--md-sys-color-primary);
28}
29
30/* State */
31body.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
42body.material .md-switch:checked:before {
43 left: auto;
44 right: -0.375rem;
45}
46
47/* Handle */
48body.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
63body.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
73body.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
79body.material .md-switch:checked:hover::before {
80 background-color: var(--md-sys-color-primary);
81}
82
83body.material .md-switch:hover::after {
84 background-color: var(--md-sys-color-on-surface-variant);
85}
86
87body.material .md-switch:checked:hover::after {
88 background-color: var(--md-sys-color-primary-container);
89}
90
91body.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
97body.material .md-switch:checked:focus::before {
98 background-color: var(--md-sys-color-primary);
99}
100
101body.material .md-switch:focus::after {
102 background-color: var(--md-sys-color-on-surface-variant);
103}
104
105body.material .md-switch:checked:focus::after {
106 background-color: var(--md-sys-color-primary-container);
107}
108
109body.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
116body.material .md-switch:checked:active::before {
117 background-color: var(--md-sys-color-primary);
118}
119
120body.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
136body.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
145body.apple .md-switch {
146 width: 3rem;
147 border-radius: 0.875rem;
148 height: 1.75rem;
149 background-color: var(--colIntIosOffBk);
150}
151
152body.apple .md-switch:checked {
153 background-color: var(--colIntIosOnBk);
154}
155
156body.apple .md-switch:focus {
157 background-color: var(--colIntIosOffBkFc);
158}
159
160body.apple .md-switch:checked:focus {
161 background-color: var(--colIntIosOnBkFc);
162}
163
164body.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
176body.apple .md-switch:checked::after {
177 left: auto;
178 right: 0.125rem;
179 border-color: var(--colIntIosOnBk);
180}
181
182body.apple .md-switch:focus::after {
183 border-color: var(--colIntIosOffBkFc);
184}
185
186body.apple .md-switch:checked:focus::after {
187 border-color: var(--colIntIosOnBkFc);
188}

15. lib / css / md-tab.css

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 z-index: 1;
9}
10
11.md-tab.fixed {
12 justify-content: center;
13}
14
15.md-tab.scrollable {
16 padding-left: 2rem;
17 gap: 1rem;
18}
19
20.md-tab.scroll {
21 background-color: var(--md-sys-color-surface-container-low);
22}
23
24.md-tab a {
25 position: relative;
26 display: flex;
27 flex-direction: column;
28 justify-content: start;
29 align-items: center;
30 color: var(--md-sys-color-on-surface-variant);
31 font-family: var(--md-sys-typescale-title-small-font);
32 font-weight: var(--md-sys-typescale-title-small-weight);
33 font-size: var(--md-sys-typescale-title-small-size);
34 font-style: var(--md-sys-typescale-title-small-font-style);
35 letter-spacing: var(--md-sys-typescale-title-small-tracking);
36 line-height: var(--md-sys-typescale-title-small-line-height);
37 text-transform: var(--md-sys-typescale-title-small-text-transform);
38 text-decoration: var(--md-sys-typescale-title-small-text-decoration);
39 text-align: center;
40 box-sizing: border-box;
41 border-bottom: 0.1875rem solid var(--md-sys-color-surface);
42}
43
44.md-tab.fixed a {
45 flex: 0 0 var(--tabWidth);
46}
47
48.md-tab.scrollable a {
49 flex: 0 0 auto;
50}
51
52.md-tab a.active {
53 border-bottom-color: var(--md-sys-color-primary);
54}
55
56/* state layer */
57.md-tab a::after {
58 content: "";
59 position: absolute;
60 z-index: -1;
61 top: 0;
62 right: 0;
63 left: 0;
64 bottom: 0;
65 background-color: transparent;
66}
67
68.md-tab span {
69 font-size: var(--iconSize);
70 height: var(--iconSize);
71 width: var(--iconSize);
72 color: var(--md-sys-color-on-surface-variant);
73}
74
75.md-tab .active span {
76 color: var(--md-sys-color-primary);
77}
78
79.md-tab a:hover {
80 color: var(--md-sys-color-on-surface);
81}
82
83/* state layer */
84.md-tab a:hover::after {
85 background-color: var(--md-sys-color-on-surface);
86 opacity: var(--md-sys-state-hover-state-layer-opacity);
87}
88
89.md-tab a.active:hover {
90 color: var(--md-sys-color-primary);
91}
92
93/* state layer */
94.md-tab a.active:hover::after {
95 background-color: var(--md-sys-color-primary);
96 opacity: var(--md-sys-state-hover-state-layer-opacity);
97}
98
99.md-tab a:hover span {
100 color: var(--md-sys-color-on-surface);
101}
102
103.md-tab a.active:hover span {
104 color: var(--md-sys-color-primary);
105}
106
107.md-tab a:focus {
108 outline: none;
109}
110
111/* state layer */
112.md-tab a:focus::after {
113 background-color: var(--md-sys-color-on-surface);
114 opacity: var(--md-sys-state-focus-state-layer-opacity);
115}
116
117/* state layer */
118.md-tab a.active:focus::after {
119 background-color: var(--md-sys-color-primary);
120 opacity: var(--md-sys-state-hover-state-layer-opacity);
121}
122
123.md-tab a:active {
124 background-position: center;
125 background-image:
126 radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
127 background-size: 100%;
128 animation-name: md-ripple;
129 animation-duration: var(--md-sys-motion-duration-500);
130}
131
132/* state layer */
133.md-tab a:active::after {
134 background-color: var(--md-sys-color-on-surface);
135 opacity: var(--md-sys-state-pressed-state-layer-opacity);
136}
137
138/* state layer */
139.md-tab a.active:active::after {
140 background-color: var(--md-sys-color-primary);
141 opacity: var(--md-sys-state-pressed-state-layer-opacity);
142}

16. lib / css / md-top-app-bar.css

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-1000);
8 transition-timing-function: ease-in;
9}
10
11.md-headline.scroll-adicional {
12 color: var(--md-sys-color-surface-container-low);
13 background-color: var(--md-sys-color-surface-container-low);
14}
15
16.md-headline.scroll {
17 color: var(--md-sys-color-surface);
18}
19
20.md-headline.headline-small {
21 padding: 0 1rem 1.5rem 1rem;
22}
23
24.md-headline.headline-medium {
25 padding: 0 1rem 1.75rem 1rem;
26}
27
28md-top-app-bar[headline] h1 {
29 opacity: 0;
30 transition-property: opacity;
31 transition-duration: var(--md-sys-motion-duration-1000);
32}
33
34md-top-app-bar[headline].scroll h1 {
35 opacity: 1;
36 transition-timing-function: ease-in;
37}

17. lib / css / roboto.css

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}