29. Carpeta « css »

Versión para imprimir.

A. css / estilos.css

1/* Temas de Material Design 3 */
2@import url(./tokens.css);
3@import url(../lib/css/shape.css);
4@import url(../lib/css/motion.css);
5@import url(../lib/css/state.css);
6@import url(../lib/css/elevation.css);
7@import url(../lib/css/colors.module.css);
8@import url(../lib/css/typography.css);
9@import url(../lib/css/theme.light.css) (prefers-color-scheme: light);
10@import url(../lib/css/theme.dark.css) (prefers-color-scheme: dark);
11/* Fonts utilizados */
12@import url(../lib/css/roboto.css);
13@import url(../lib/css/material-symbols-outlined.css);
14/* CSS de elementos utilizados */
15@import url(../lib/css/md-ripple.css);
16@import url(../lib/css/md-top-app-bar.css);
17@import url(../lib/css/md-menu.css);
18@import url(../lib/css/md-standard-icon-button.css);
19@import url(../lib/css/md-fab-primary.css);
20@import url(../lib/css/md-filled-button.css);
21@import url(../lib/css/md-filled-text-field.css);
22@import url(../lib/css/md-outline-button.css);
23@import url(../lib/css/md-switch.css);
24@import url(../lib/css/md-slider-field.css);
25@import url(../lib/css/md-segmented-button.css);
26@import url(../lib/css/md-list.css);
27@import url(../lib/css/md-cards.css);
28@import url(../lib/css/md-tab.css);
29@import url(../lib/css/md-navigation-bar.css);
30
31html {
32 --tabWidth: 3.75rem;
33 --anchoNav: 22.5rem;
34}
35
36main {
37 max-width: 600px;
38 margin-left: auto;
39 margin-right: auto;
40}
41
42/* Quita un borde rojo que coloca Firefox. */
43:-moz-ui-invalid {
44 box-shadow: none;
45}
46
47body {
48 margin: 0;
49 display: none;
50 font-family: var(--md-sys-typescale-body-large-font);
51 font-weight: var(--md-sys-typescale-body-large-weight);
52 font-size: var(--md-sys-typescale-body-large-size);
53 font-style: var(--md-sys-typescale-body-large-font-style);
54 letter-spacing: var(--md-sys-typescale-body-large-tracking);
55 line-height: var(--md-sys-typescale-body-large-line-height);
56 text-transform: var(--md-sys-typescale-body-large-text-transform);
57 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
58 color: var(--md-sys-color-on-background);
59 background-color: var(--md-sys-color-background);
60}
61
62body.fouc {
63 display: block;
64 opacity: 0;
65 animation-name: fouc;
66 animation-fill-mode: forwards;
67 animation-duration: 1s;
68}
69
70html {
71 --Font: -apple-system, BlinkMacSystemFont, roboto, sans-serif;
72 font-size: 1rem;
73 --colIntIos: white;
74 --colIntIosOnBk: #2acc2a;
75 --colIntIosOnBkFc: #1bbb1b;
76 --colIntIosOffBk: #dbdbdb;
77 --colIntIosOffBkFc: #BDBDBD;
78 --md-sys-typescale-label-large-weight-prominent:
79 var(--md-ref-typeface-weight-bold);
80 --md-box_shadow_level4:
81 0 var(--md-sys-elevation-level4) var(--md-sys-elevation-level4) var(--md-sys-color-shadow);
82 --md-box_shadow_level3:
83 0 var(--md-sys-elevation-level3) var(--md-sys-elevation-level3) var(--md-sys-color-shadow);
84 --md-box_shadow_level2:
85 0 var(--md-sys-elevation-level2) var(--md-sys-elevation-level2) var(--md-sys-color-shadow);
86 --md-box_shadow_level1:
87 0 var(--md-sys-elevation-level1) var(--md-sys-elevation-level1) var(--md-sys-color-shadow);
88 --md-box_shadow_level0: none;
89 --iconSize: 1.5rem;
90 --avatarSize: 2.5rem;
91 --imageSize: 3.5rem;
92 --videoWidth: 7.125rem;
93 --videoHeight: 4rem;
94 --md-sys-state-focus-indicator-outer-offset: 0.125rem;
95 --md-sys-state-focus-indicator-thickness: 0.1875rem;
96 /* Pressed state layer opacity */
97 --state-pressed-transparency-percentage: 84%;
98 /* Focus state layer opacity */
99 --state-focus-transparency-percentage: 88%;
100 /* Hover state layer opacity */
101 --state-hover-transparency-percentage: 92%;
102 /* label - small */
103 --md-sys-typescale-label-small-font-family-name: var(--Font);
104 /* label - medium */
105 --md-sys-typescale-label-medium-font-family-name: var(--Font);
106 /* label - large */
107 --md-sys-typescale-label-large-font-family-name: var(--Font);
108 /* body - small */
109 --md-sys-typescale-body-small-font-family-name: var(--Font);
110 /* body - medium */
111 --md-sys-typescale-body-medium-font-family-name: var(--Font);
112 /* body - large */
113 --md-sys-typescale-body-large-font-family-name: var(--Font);
114 /* headline - small */
115 --md-sys-typescale-headline-small-font-family-name: var(--Font);
116 /* headline - medium */
117 --md-sys-typescale-headline-medium-font-family-name: var(--Font);
118 /* headline - large */
119 --md-sys-typescale-headline-large-font-family-name: var(--Font);
120 /* display - small */
121 --md-sys-typescale-display-small-font-family-name: var(--Font);
122 /* display - medium */
123 --md-sys-typescale-display-medium-font-family-name: var(--Font);
124 /* display - large */
125 --md-sys-typescale-display-large-font-family-name: var(--Font);
126 /* title - small */
127 --md-sys-typescale-title-small-font-family-name: var(--Font);
128 /* title - medium */
129 --md-sys-typescale-title-medium-font-family-name: var(--Font);
130 /* title - large */
131 --md-sys-typescale-title-large-font-family-name: var(--Font);
132}
133
134p {
135 margin: 1rem;
136}
137
138a {
139 color: var(--md-sys-color-on-background);
140}
141
142@media (prefers-color-scheme: light) {
143 html {
144 --md-riple-color: #00000020;
145 --md-sys-color-surface-container-low: var(--md-ref-palette-neutral95);
146 --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
147 }
148}
149
150@media (prefers-color-scheme: dark) {
151 html {
152 --md-riple-color: #ffffff40;
153 --md-sys-color-surface-container-low: var(--md-ref-palette-neutral20);
154 --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral30);
155 }
156}
157
158@keyframes fouc {
159 from {
160 opacity: 0
161 }
162
163 to {
164 opacity: 1
165 }
166}

B. css / tokens.css

1:root {
2 --md-source: #6750A4;
3 /* error */
4 --md-ref-palette-error0: #000000;
5 --md-ref-palette-error10: #410E0B;
6 --md-ref-palette-error20: #601410;
7 --md-ref-palette-error30: #8C1D18;
8 --md-ref-palette-error40: #B3261E;
9 --md-ref-palette-error50: #DC362E;
10 --md-ref-palette-error60: #E46962;
11 --md-ref-palette-error70: #EC928E;
12 --md-ref-palette-error80: #F2B8B5;
13 --md-ref-palette-error90: #F9DEDC;
14 --md-ref-palette-error95: #FCEEEE;
15 --md-ref-palette-error99: #FFFBF9;
16 --md-ref-palette-error100: #FFFFFF;
17 /* primary */
18 --md-ref-palette-primary0: #000000;
19 --md-ref-palette-primary10: #21005D;
20 --md-ref-palette-primary20: #381E72;
21 --md-ref-palette-primary30: #4F378B;
22 --md-ref-palette-primary40: #6750A4;
23 --md-ref-palette-primary50: #7F67BE;
24 --md-ref-palette-primary60: #9A82DB;
25 --md-ref-palette-primary70: #B69DF8;
26 --md-ref-palette-primary80: #D0BCFF;
27 --md-ref-palette-primary90: #EADDFF;
28 --md-ref-palette-primary95: #F6EDFF;
29 --md-ref-palette-primary99: #FFFBFE;
30 --md-ref-palette-primary100: #FFFFFF;
31 /* secondary */
32 --md-ref-palette-secondary0: #000000;
33 --md-ref-palette-secondary10: #1D192B;
34 --md-ref-palette-secondary20: #332D41;
35 --md-ref-palette-secondary30: #4A4458;
36 --md-ref-palette-secondary40: #625B71;
37 --md-ref-palette-secondary50: #7A7289;
38 --md-ref-palette-secondary60: #958DA5;
39 --md-ref-palette-secondary70: #B0A7C0;
40 --md-ref-palette-secondary80: #CCC2DC;
41 --md-ref-palette-secondary90: #E8DEF8;
42 --md-ref-palette-secondary95: #F6EDFF;
43 --md-ref-palette-secondary99: #FFFBFE;
44 --md-ref-palette-secondary100: #FFFFFF;
45 /* tertiary */
46 --md-ref-palette-tertiary0: #000000;
47 --md-ref-palette-tertiary10: #31111D;
48 --md-ref-palette-tertiary20: #492532;
49 --md-ref-palette-tertiary30: #633B48;
50 --md-ref-palette-tertiary40: #7D5260;
51 --md-ref-palette-tertiary50: #986977;
52 --md-ref-palette-tertiary60: #B58392;
53 --md-ref-palette-tertiary70: #D29DAC;
54 --md-ref-palette-tertiary80: #EFB8C8;
55 --md-ref-palette-tertiary90: #FFD8E4;
56 --md-ref-palette-tertiary95: #FFECF1;
57 --md-ref-palette-tertiary99: #FFFBFA;
58 --md-ref-palette-tertiary100: #FFFFFF;
59 /* neutral */
60 --md-ref-palette-neutral0: #000000;
61 --md-ref-palette-neutral10: #1C1B1F;
62 --md-ref-palette-neutral20: #313033;
63 --md-ref-palette-neutral30: #484649;
64 --md-ref-palette-neutral40: #605D62;
65 --md-ref-palette-neutral50: #787579;
66 --md-ref-palette-neutral60: #939094;
67 --md-ref-palette-neutral70: #AEAAAE;
68 --md-ref-palette-neutral80: #C9C5CA;
69 --md-ref-palette-neutral90: #E6E1E5;
70 --md-ref-palette-neutral95: #F4EFF4;
71 --md-ref-palette-neutral99: #FFFBFE;
72 --md-ref-palette-neutral100: #FFFFFF;
73 --md-ref-palette-neutralNaN: #FFFFFF;
74 /* neutral-variant */
75 --md-ref-palette-neutral-variant0: #000000;
76 --md-ref-palette-neutral-variant10: #1D1A22;
77 --md-ref-palette-neutral-variant20: #322F37;
78 --md-ref-palette-neutral-variant30: #49454F;
79 --md-ref-palette-neutral-variant40: #605D66;
80 --md-ref-palette-neutral-variant50: #79747E;
81 --md-ref-palette-neutral-variant60: #938F99;
82 --md-ref-palette-neutral-variant70: #AEA9B4;
83 --md-ref-palette-neutral-variant80: #CAC4D0;
84 --md-ref-palette-neutral-variant90: #E7E0EC;
85 --md-ref-palette-neutral-variant95: #F5EEFA;
86 --md-ref-palette-neutral-variant99: #FFFBFE;
87 --md-ref-palette-neutral-variant100: #FFFFFF;
88 /* light */
89 --md-sys-color-surface-tint-light: #6750A4;
90 --md-sys-color-surface-tint-color-light: #6750A4;
91 --md-sys-color-on-error-container-light: #410E0B;
92 --md-sys-color-on-error-light: #FFFFFF;
93 --md-sys-color-error-container-light: #F9DEDC;
94 --md-sys-color-on-tertiary-container-light: #31111D;
95 --md-sys-color-on-tertiary-light: #FFFFFF;
96 --md-sys-color-tertiary-container-light: #FFD8E4;
97 --md-sys-color-tertiary-light: #7D5260;
98 --md-sys-color-shadow-light: #000000;
99 --md-sys-color-error-light: #B3261E;
100 --md-sys-color-outline-light: #79747E;
101 --md-sys-color-on-background-light: #1C1B1F;
102 --md-sys-color-background-light: #FFFBFE;
103 --md-sys-color-inverse-on-surface-light: #F4EFF4;
104 --md-sys-color-inverse-surface-light: #313033;
105 --md-sys-color-on-surface-variant-light: #49454F;
106 --md-sys-color-on-surface-light: #1C1B1F;
107 --md-sys-color-surface-variant-light: #E7E0EC;
108 --md-sys-color-surface-light: #FFFBFE;
109 --md-sys-color-on-secondary-container-light: #1D192B;
110 --md-sys-color-on-secondary-light: #FFFFFF;
111 --md-sys-color-secondary-container-light: #E8DEF8;
112 --md-sys-color-secondary-light: #625B71;
113 --md-sys-color-inverse-primary-light: #D0BCFF;
114 --md-sys-color-on-primary-container-light: #21005D;
115 --md-sys-color-on-primary-light: #FFFFFF;
116 --md-sys-color-primary-container-light: #EADDFF;
117 --md-sys-color-primary-light: #6750A4;
118 /* dark */
119 --md-sys-color-surface-tint-dark: #D0BCFF;
120 --md-sys-color-surface-tint-color-dark: #D0BCFF;
121 --md-sys-color-on-error-container-dark: #F2B8B5;
122 --md-sys-color-on-error-dark: #601410;
123 --md-sys-color-error-container-dark: #8C1D18;
124 --md-sys-color-on-tertiary-container-dark: #FFD8E4;
125 --md-sys-color-on-tertiary-dark: #492532;
126 --md-sys-color-tertiary-container-dark: #633B48;
127 --md-sys-color-tertiary-dark: #EFB8C8;
128 --md-sys-color-shadow-dark: #000000;
129 --md-sys-color-error-dark: #F2B8B5;
130 --md-sys-color-outline-dark: #938F99;
131 --md-sys-color-on-background-dark: #E6E1E5;
132 --md-sys-color-background-dark: #1C1B1F;
133 --md-sys-color-inverse-on-surface-dark: #313033;
134 --md-sys-color-inverse-surface-dark: #E6E1E5;
135 --md-sys-color-on-surface-variant-dark: #CAC4D0;
136 --md-sys-color-on-surface-dark: #E6E1E5;
137 --md-sys-color-surface-variant-dark: #49454F;
138 --md-sys-color-surface-dark: #1C1B1F;
139 --md-sys-color-on-secondary-container-dark: #E8DEF8;
140 --md-sys-color-on-secondary-dark: #332D41;
141 --md-sys-color-secondary-container-dark: #4A4458;
142 --md-sys-color-secondary-dark: #CCC2DC;
143 --md-sys-color-inverse-primary-dark: #6750A4;
144 --md-sys-color-on-primary-container-dark: #EADDFF;
145 --md-sys-color-on-primary-dark: #381E72;
146 --md-sys-color-primary-container-dark: #4F378B;
147 --md-sys-color-primary-dark: #D0BCFF;
148 /* label - small */
149 --md-sys-typescale-label-small-font-family-name: Roboto;
150 --md-sys-typescale-label-small-font-family-style: Medium;
151 --md-sys-typescale-label-small-font-weight: 500px;
152 --md-sys-typescale-label-small-font-size: 11px;
153 --md-sys-typescale-label-small-letter-spacing: 0.50px;
154 --md-sys-typescale-label-small-line-height: 16px;
155 /* label - medium */
156 --md-sys-typescale-label-medium-font-family-name: Roboto;
157 --md-sys-typescale-label-medium-font-family-style: Medium;
158 --md-sys-typescale-label-medium-font-weight: 500px;
159 --md-sys-typescale-label-medium-font-size: 12px;
160 --md-sys-typescale-label-medium-letter-spacing: 0.50px;
161 --md-sys-typescale-label-medium-line-height: 16px;
162 /* label - large */
163 --md-sys-typescale-label-large-font-family-name: Roboto;
164 --md-sys-typescale-label-large-font-family-style: Medium;
165 --md-sys-typescale-label-large-font-weight: 500px;
166 --md-sys-typescale-label-large-font-size: 14px;
167 --md-sys-typescale-label-large-letter-spacing: 0.10px;
168 --md-sys-typescale-label-large-line-height: 20px;
169 /* body - small */
170 --md-sys-typescale-body-small-font-family-name: Roboto;
171 --md-sys-typescale-body-small-font-family-style: Regular;
172 --md-sys-typescale-body-small-font-weight: 400px;
173 --md-sys-typescale-body-small-font-size: 12px;
174 --md-sys-typescale-body-small-letter-spacing: 0.40px;
175 --md-sys-typescale-body-small-line-height: 16px;
176 /* body - medium */
177 --md-sys-typescale-body-medium-font-family-name: Roboto;
178 --md-sys-typescale-body-medium-font-family-style: Regular;
179 --md-sys-typescale-body-medium-font-weight: 400px;
180 --md-sys-typescale-body-medium-font-size: 14px;
181 --md-sys-typescale-body-medium-letter-spacing: 0.25px;
182 --md-sys-typescale-body-medium-line-height: 20px;
183 /* body - large */
184 --md-sys-typescale-body-large-font-family-name: Roboto;
185 --md-sys-typescale-body-large-font-family-style: Regular;
186 --md-sys-typescale-body-large-font-weight: 400px;
187 --md-sys-typescale-body-large-font-size: 16px;
188 --md-sys-typescale-body-large-letter-spacing: 0.50px;
189 --md-sys-typescale-body-large-line-height: 24px;
190 /* headline - small */
191 --md-sys-typescale-headline-small-font-family-name: Roboto;
192 --md-sys-typescale-headline-small-font-family-style: Regular;
193 --md-sys-typescale-headline-small-font-weight: 400px;
194 --md-sys-typescale-headline-small-font-size: 24px;
195 --md-sys-typescale-headline-small-letter-spacing: 0px;
196 --md-sys-typescale-headline-small-line-height: 32px;
197 /* headline - medium */
198 --md-sys-typescale-headline-medium-font-family-name: Roboto;
199 --md-sys-typescale-headline-medium-font-family-style: Regular;
200 --md-sys-typescale-headline-medium-font-weight: 400px;
201 --md-sys-typescale-headline-medium-font-size: 28px;
202 --md-sys-typescale-headline-medium-letter-spacing: 0px;
203 --md-sys-typescale-headline-medium-line-height: 36px;
204 /* headline - large */
205 --md-sys-typescale-headline-large-font-family-name: Roboto;
206 --md-sys-typescale-headline-large-font-family-style: Regular;
207 --md-sys-typescale-headline-large-font-weight: 400px;
208 --md-sys-typescale-headline-large-font-size: 32px;
209 --md-sys-typescale-headline-large-letter-spacing: 0px;
210 --md-sys-typescale-headline-large-line-height: 40px;
211 /* display - small */
212 --md-sys-typescale-display-small-font-family-name: Roboto;
213 --md-sys-typescale-display-small-font-family-style: Regular;
214 --md-sys-typescale-display-small-font-weight: 400px;
215 --md-sys-typescale-display-small-font-size: 36px;
216 --md-sys-typescale-display-small-letter-spacing: 0px;
217 --md-sys-typescale-display-small-line-height: 44px;
218 /* display - medium */
219 --md-sys-typescale-display-medium-font-family-name: Roboto;
220 --md-sys-typescale-display-medium-font-family-style: Regular;
221 --md-sys-typescale-display-medium-font-weight: 400px;
222 --md-sys-typescale-display-medium-font-size: 45px;
223 --md-sys-typescale-display-medium-letter-spacing: 0px;
224 --md-sys-typescale-display-medium-line-height: 52px;
225 /* display - large */
226 --md-sys-typescale-display-large-font-family-name: Roboto;
227 --md-sys-typescale-display-large-font-family-style: Regular;
228 --md-sys-typescale-display-large-font-weight: 400px;
229 --md-sys-typescale-display-large-font-size: 57px;
230 --md-sys-typescale-display-large-letter-spacing: -0.25px;
231 --md-sys-typescale-display-large-line-height: 64px;
232 /* title - small */
233 --md-sys-typescale-title-small-font-family-name: Roboto;
234 --md-sys-typescale-title-small-font-family-style: Medium;
235 --md-sys-typescale-title-small-font-weight: 500px;
236 --md-sys-typescale-title-small-font-size: 14px;
237 --md-sys-typescale-title-small-letter-spacing: 0.10px;
238 --md-sys-typescale-title-small-line-height: 20px;
239 /* title - medium */
240 --md-sys-typescale-title-medium-font-family-name: Roboto;
241 --md-sys-typescale-title-medium-font-family-style: Medium;
242 --md-sys-typescale-title-medium-font-weight: 500px;
243 --md-sys-typescale-title-medium-font-size: 16px;
244 --md-sys-typescale-title-medium-letter-spacing: 0.15px;
245 --md-sys-typescale-title-medium-line-height: 24px;
246 /* title - large */
247 --md-sys-typescale-title-large-font-family-name: Roboto;
248 --md-sys-typescale-title-large-font-family-style: Regular;
249 --md-sys-typescale-title-large-font-weight: 400px;
250 --md-sys-typescale-title-large-font-size: 22px;
251 --md-sys-typescale-title-large-letter-spacing: 0px;
252 --md-sys-typescale-title-large-line-height: 28px;
253}
254