29. Carpeta « css »

Versión para imprimir.

A. css / dark-hc.css

1.dark-high-contrast {
2 --md-sys-color-primary: rgb(251 250 255);
3 --md-sys-color-surface-tint: rgb(170 199 255);
4 --md-sys-color-on-primary: rgb(0 0 0);
5 --md-sys-color-primary-container: rgb(177 203 255);
6 --md-sys-color-on-primary-container: rgb(0 0 0);
7 --md-sys-color-secondary: rgb(251 250 255);
8 --md-sys-color-on-secondary: rgb(0 0 0);
9 --md-sys-color-secondary-container: rgb(194 203 224);
10 --md-sys-color-on-secondary-container: rgb(0 0 0);
11 --md-sys-color-tertiary: rgb(255 249 250);
12 --md-sys-color-on-tertiary: rgb(0 0 0);
13 --md-sys-color-tertiary-container: rgb(225 192 229);
14 --md-sys-color-on-tertiary-container: rgb(0 0 0);
15 --md-sys-color-error: rgb(255 249 249);
16 --md-sys-color-on-error: rgb(0 0 0);
17 --md-sys-color-error-container: rgb(255 186 177);
18 --md-sys-color-on-error-container: rgb(0 0 0);
19 --md-sys-color-background: rgb(17 19 24);
20 --md-sys-color-on-background: rgb(226 226 233);
21 --md-sys-color-surface: rgb(17 19 24);
22 --md-sys-color-on-surface: rgb(255 255 255);
23 --md-sys-color-surface-variant: rgb(68 71 78);
24 --md-sys-color-on-surface-variant: rgb(251 250 255);
25 --md-sys-color-outline: rgb(200 202 212);
26 --md-sys-color-outline-variant: rgb(200 202 212);
27 --md-sys-color-shadow: rgb(0 0 0);
28 --md-sys-color-scrim: rgb(0 0 0);
29 --md-sys-color-inverse-surface: rgb(226 226 233);
30 --md-sys-color-inverse-on-surface: rgb(0 0 0);
31 --md-sys-color-inverse-primary: rgb(0 41 89);
32 --md-sys-color-primary-fixed: rgb(221 231 255);
33 --md-sys-color-on-primary-fixed: rgb(0 0 0);
34 --md-sys-color-primary-fixed-dim: rgb(177 203 255);
35 --md-sys-color-on-primary-fixed-variant: rgb(0 22 52);
36 --md-sys-color-secondary-fixed: rgb(222 231 253);
37 --md-sys-color-on-secondary-fixed: rgb(0 0 0);
38 --md-sys-color-secondary-fixed-dim: rgb(194 203 224);
39 --md-sys-color-on-secondary-fixed-variant: rgb(13 22 38);
40 --md-sys-color-tertiary-fixed: rgb(252 221 255);
41 --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
42 --md-sys-color-tertiary-fixed-dim: rgb(225 192 229);
43 --md-sys-color-on-tertiary-fixed-variant: rgb(35 14 41);
44 --md-sys-color-surface-dim: rgb(17 19 24);
45 --md-sys-color-surface-bright: rgb(55 57 62);
46 --md-sys-color-surface-container-lowest: rgb(12 14 19);
47 --md-sys-color-surface-container-low: rgb(25 28 32);
48 --md-sys-color-surface-container: rgb(29 32 36);
49 --md-sys-color-surface-container-high: rgb(40 42 47);
50 --md-sys-color-surface-container-highest: rgb(51 53 58);
51}
52

B. css / dark-mc.css

1.dark-medium-contrast {
2 --md-sys-color-primary: rgb(177 203 255);
3 --md-sys-color-surface-tint: rgb(170 199 255);
4 --md-sys-color-on-primary: rgb(0 22 52);
5 --md-sys-color-primary-container: rgb(116 145 199);
6 --md-sys-color-on-primary-container: rgb(0 0 0);
7 --md-sys-color-secondary: rgb(194 203 224);
8 --md-sys-color-on-secondary: rgb(13 22 38);
9 --md-sys-color-secondary-container: rgb(136 145 165);
10 --md-sys-color-on-secondary-container: rgb(0 0 0);
11 --md-sys-color-tertiary: rgb(225 192 229);
12 --md-sys-color-on-tertiary: rgb(35 14 41);
13 --md-sys-color-tertiary-container: rgb(164 135 169);
14 --md-sys-color-on-tertiary-container: rgb(0 0 0);
15 --md-sys-color-error: rgb(255 186 177);
16 --md-sys-color-on-error: rgb(55 0 1);
17 --md-sys-color-error-container: rgb(255 84 73);
18 --md-sys-color-on-error-container: rgb(0 0 0);
19 --md-sys-color-background: rgb(17 19 24);
20 --md-sys-color-on-background: rgb(226 226 233);
21 --md-sys-color-surface: rgb(17 19 24);
22 --md-sys-color-on-surface: rgb(251 250 255);
23 --md-sys-color-surface-variant: rgb(68 71 78);
24 --md-sys-color-on-surface-variant: rgb(200 202 212);
25 --md-sys-color-outline: rgb(160 163 172);
26 --md-sys-color-outline-variant: rgb(128 131 140);
27 --md-sys-color-shadow: rgb(0 0 0);
28 --md-sys-color-scrim: rgb(0 0 0);
29 --md-sys-color-inverse-surface: rgb(226 226 233);
30 --md-sys-color-inverse-on-surface: rgb(40 42 47);
31 --md-sys-color-inverse-primary: rgb(41 72 120);
32 --md-sys-color-primary-fixed: rgb(214 227 255);
33 --md-sys-color-on-primary-fixed: rgb(0 17 43);
34 --md-sys-color-primary-fixed-dim: rgb(170 199 255);
35 --md-sys-color-on-primary-fixed-variant: rgb(19 54 101);
36 --md-sys-color-secondary-fixed: rgb(218 226 249);
37 --md-sys-color-on-secondary-fixed: rgb(8 17 33);
38 --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
39 --md-sys-color-on-secondary-fixed-variant: rgb(46 54 71);
40 --md-sys-color-tertiary-fixed: rgb(250 216 253);
41 --md-sys-color-on-tertiary-fixed: rgb(29 8 35);
42 --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
43 --md-sys-color-on-tertiary-fixed-variant: rgb(69 46 74);
44 --md-sys-color-surface-dim: rgb(17 19 24);
45 --md-sys-color-surface-bright: rgb(55 57 62);
46 --md-sys-color-surface-container-lowest: rgb(12 14 19);
47 --md-sys-color-surface-container-low: rgb(25 28 32);
48 --md-sys-color-surface-container: rgb(29 32 36);
49 --md-sys-color-surface-container-high: rgb(40 42 47);
50 --md-sys-color-surface-container-highest: rgb(51 53 58);
51}
52

C. css / dark.css

1.dark {
2 --md-sys-color-primary: rgb(170 199 255);
3 --md-sys-color-surface-tint: rgb(170 199 255);
4 --md-sys-color-on-primary: rgb(10 48 95);
5 --md-sys-color-primary-container: rgb(40 71 119);
6 --md-sys-color-on-primary-container: rgb(214 227 255);
7 --md-sys-color-secondary: rgb(190 198 220);
8 --md-sys-color-on-secondary: rgb(40 49 65);
9 --md-sys-color-secondary-container: rgb(62 71 89);
10 --md-sys-color-on-secondary-container: rgb(218 226 249);
11 --md-sys-color-tertiary: rgb(221 188 224);
12 --md-sys-color-on-tertiary: rgb(63 40 68);
13 --md-sys-color-tertiary-container: rgb(87 62 92);
14 --md-sys-color-on-tertiary-container: rgb(250 216 253);
15 --md-sys-color-error: rgb(255 180 171);
16 --md-sys-color-on-error: rgb(105 0 5);
17 --md-sys-color-error-container: rgb(147 0 10);
18 --md-sys-color-on-error-container: rgb(255 218 214);
19 --md-sys-color-background: rgb(17 19 24);
20 --md-sys-color-on-background: rgb(226 226 233);
21 --md-sys-color-surface: rgb(17 19 24);
22 --md-sys-color-on-surface: rgb(226 226 233);
23 --md-sys-color-surface-variant: rgb(68 71 78);
24 --md-sys-color-on-surface-variant: rgb(196 198 208);
25 --md-sys-color-outline: rgb(142 144 153);
26 --md-sys-color-outline-variant: rgb(68 71 78);
27 --md-sys-color-shadow: rgb(0 0 0);
28 --md-sys-color-scrim: rgb(0 0 0);
29 --md-sys-color-inverse-surface: rgb(226 226 233);
30 --md-sys-color-inverse-on-surface: rgb(46 48 54);
31 --md-sys-color-inverse-primary: rgb(65 95 145);
32 --md-sys-color-primary-fixed: rgb(214 227 255);
33 --md-sys-color-on-primary-fixed: rgb(0 27 62);
34 --md-sys-color-primary-fixed-dim: rgb(170 199 255);
35 --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
36 --md-sys-color-secondary-fixed: rgb(218 226 249);
37 --md-sys-color-on-secondary-fixed: rgb(19 28 43);
38 --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
39 --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
40 --md-sys-color-tertiary-fixed: rgb(250 216 253);
41 --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
42 --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
43 --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
44 --md-sys-color-surface-dim: rgb(17 19 24);
45 --md-sys-color-surface-bright: rgb(55 57 62);
46 --md-sys-color-surface-container-lowest: rgb(12 14 19);
47 --md-sys-color-surface-container-low: rgb(25 28 32);
48 --md-sys-color-surface-container: rgb(29 32 36);
49 --md-sys-color-surface-container-high: rgb(40 42 47);
50 --md-sys-color-surface-container-highest: rgb(51 53 58);
51}
52

D. css / estilos.css

1/* Selecciona el tema claro para Material Design 3. Puedes elegir
2 * light.css, light-mc.css o light-hc.css */
3@import url(light.css) screen and (prefers-color-scheme: light);
4/* Selecciona el tema oscuro para Material Design 3. Puedes elegir
5 * dark.css, dark-mc.css o dark-hc.css */
6@import url(dark.css) screen and (prefers-color-scheme: dark);
7/* Definiciones para Material Design 3 */
8@import url(../material-tokens/css/baseline.css);
9/* Fonts utilizados */
10@import url(../lib/css/roboto.css);
11@import url(../lib/css/material-symbols-outlined.css);
12/* CSS de elementos utilizados */
13@import url(../lib/css/md-ripple.css);
14@import url(../lib/css/md-top-app-bar.css);
15@import url(../lib/css/md-menu.css);
16@import url(../lib/css/md-standard-icon-button.css);
17@import url(../lib/css/md-fab-primary.css);
18@import url(../lib/css/md-filled-button.css);
19@import url(../lib/css/md-filled-text-field.css);
20@import url(../lib/css/md-outline-button.css);
21@import url(../lib/css/md-switch.css);
22@import url(../lib/css/md-slider-field.css);
23@import url(../lib/css/md-segmented-button.css);
24@import url(../lib/css/md-list.css);
25@import url(../lib/css/md-cards.css);
26@import url(../lib/css/md-tab.css);
27@import url(../lib/css/md-navigation-bar.css);
28
29html {
30 /* Indica los temas del sistema operativo que son soportados. */
31 color-scheme: light dark;
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 font-family: var(--md-sys-typescale-body-large-font);
50 font-weight: var(--md-sys-typescale-body-large-weight);
51 font-size: var(--md-sys-typescale-body-large-size);
52 font-style: var(--md-sys-typescale-body-large-font-style);
53 letter-spacing: var(--md-sys-typescale-body-large-tracking);
54 line-height: var(--md-sys-typescale-body-large-line-height);
55 text-transform: var(--md-sys-typescale-body-large-text-transform);
56 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
57 color: var(--md-sys-color-on-background);
58 background-color: var(--md-sys-color-background);
59 /* Las siguientes líneas Evita los cambios de apariencia al cargar estilos y
60 + custom elements, que son conocidos como Flash Of Unstyled Content (fouc). */
61 opacity: 0;
62 animation-name: fouc;
63 animation-fill-mode: forwards;
64 animation-duration: 1.5s;
65}
66
67@keyframes fouc {
68 to {
69 opacity: 1;
70 }
71}
72
73html {
74 --Font: -apple-system, BlinkMacSystemFont, roboto, sans-serif;
75 --colIntIos: white;
76 --colIntIosOnBk: #2acc2a;
77 --colIntIosOnBkFc: #1bbb1b;
78 --colIntIosOffBk: #dbdbdb;
79 --colIntIosOffBkFc: #BDBDBD;
80 /* Plain typeface */
81 --md-ref-typeface-plain: var(--Font);
82 /* Brand typeface */
83 --md-ref-typeface-brand: var(--Font);
84 --md-sys-typescale-label-large-weight-prominent:
85 var(--md-ref-typeface-weight-bold);
86 --md-box_shadow_level4:
87 0 var(--md-sys-elevation-level4) var(--md-sys-elevation-level4) var(--md-sys-color-shadow);
88 --md-box_shadow_level3:
89 0 var(--md-sys-elevation-level3) var(--md-sys-elevation-level3) var(--md-sys-color-shadow);
90 --md-box_shadow_level2:
91 0 var(--md-sys-elevation-level2) var(--md-sys-elevation-level2) var(--md-sys-color-shadow);
92 --md-box_shadow_level1:
93 0 var(--md-sys-elevation-level1) var(--md-sys-elevation-level1) var(--md-sys-color-shadow);
94 --md-box_shadow_level0: none;
95 --iconSize: 1.5rem;
96 --avatarSize: 2.5rem;
97 --imageSize: 3.5rem;
98 --videoWidth: 7.125rem;
99 --videoHeight: 4rem;
100 --scroll-headline-duracion: 2s;
101 --md-sys-state-focus-indicator-outer-offset: 0.125rem;
102 --md-sys-state-focus-indicator-thickness: 0.1875rem;
103 /* Pressed state layer opacity */
104 --state-pressed-transparency-percentage: 84%;
105 /* Focus state layer opacity */
106 --state-focus-transparency-percentage: 88%;
107 /* Hover state layer opacity */
108 --state-hover-transparency-percentage: 92%;
109}
110
111p {
112 margin: 1rem;
113}
114
115a {
116 color: var(--md-sys-color-on-background);
117}
118
119@media (prefers-color-scheme: light) {
120 html {
121 --md-riple-color: #00000020;
122 }
123}
124
125@media (prefers-color-scheme: dark) {
126 html {
127 --md-riple-color: #ffffff40;
128 }
129}
130
131@keyframes salePorLaIzquierda {
132 to {
133 translate: -100vw 0;
134 }
135}
136
137@keyframes entraPorLaDerecha {
138 from {
139 translate: 100vw 0;
140 }
141}
142
143@keyframes aparece {
144 from {
145 opacity: 0;
146 }
147}
148
149@keyframes desvanece {
150 to {
151 opacity: 0;
152 }
153}

E. css / light-hc.css

1.light-high-contrast {
2 --md-sys-color-primary: rgb(0 33 74);
3 --md-sys-color-surface-tint: rgb(65 95 145);
4 --md-sys-color-on-primary: rgb(255 255 255);
5 --md-sys-color-primary-container: rgb(35 67 115);
6 --md-sys-color-on-primary-container: rgb(255 255 255);
7 --md-sys-color-secondary: rgb(25 34 50);
8 --md-sys-color-on-secondary: rgb(255 255 255);
9 --md-sys-color-secondary-container: rgb(58 67 84);
10 --md-sys-color-on-secondary-container: rgb(255 255 255);
11 --md-sys-color-tertiary: rgb(48 26 53);
12 --md-sys-color-on-tertiary: rgb(255 255 255);
13 --md-sys-color-tertiary-container: rgb(82 58 88);
14 --md-sys-color-on-tertiary-container: rgb(255 255 255);
15 --md-sys-color-error: rgb(78 0 2);
16 --md-sys-color-on-error: rgb(255 255 255);
17 --md-sys-color-error-container: rgb(140 0 9);
18 --md-sys-color-on-error-container: rgb(255 255 255);
19 --md-sys-color-background: rgb(249 249 255);
20 --md-sys-color-on-background: rgb(25 28 32);
21 --md-sys-color-surface: rgb(249 249 255);
22 --md-sys-color-on-surface: rgb(0 0 0);
23 --md-sys-color-surface-variant: rgb(224 226 236);
24 --md-sys-color-on-surface-variant: rgb(33 36 43);
25 --md-sys-color-outline: rgb(64 67 74);
26 --md-sys-color-outline-variant: rgb(64 67 74);
27 --md-sys-color-shadow: rgb(0 0 0);
28 --md-sys-color-scrim: rgb(0 0 0);
29 --md-sys-color-inverse-surface: rgb(46 48 54);
30 --md-sys-color-inverse-on-surface: rgb(255 255 255);
31 --md-sys-color-inverse-primary: rgb(229 236 255);
32 --md-sys-color-primary-fixed: rgb(35 67 115);
33 --md-sys-color-on-primary-fixed: rgb(255 255 255);
34 --md-sys-color-primary-fixed-dim: rgb(4 44 91);
35 --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
36 --md-sys-color-secondary-fixed: rgb(58 67 84);
37 --md-sys-color-on-secondary-fixed: rgb(255 255 255);
38 --md-sys-color-secondary-fixed-dim: rgb(36 45 61);
39 --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
40 --md-sys-color-tertiary-fixed: rgb(82 58 88);
41 --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
42 --md-sys-color-tertiary-fixed-dim: rgb(59 36 64);
43 --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
44 --md-sys-color-surface-dim: rgb(217 217 224);
45 --md-sys-color-surface-bright: rgb(249 249 255);
46 --md-sys-color-surface-container-lowest: rgb(255 255 255);
47 --md-sys-color-surface-container-low: rgb(243 243 250);
48 --md-sys-color-surface-container: rgb(237 237 244);
49 --md-sys-color-surface-container-high: rgb(231 232 238);
50 --md-sys-color-surface-container-highest: rgb(226 226 233);
51}
52

F. css / light-mc.css

1.light-medium-contrast {
2 --md-sys-color-primary: rgb(35 67 115);
3 --md-sys-color-surface-tint: rgb(65 95 145);
4 --md-sys-color-on-primary: rgb(255 255 255);
5 --md-sys-color-primary-container: rgb(88 117 168);
6 --md-sys-color-on-primary-container: rgb(255 255 255);
7 --md-sys-color-secondary: rgb(58 67 84);
8 --md-sys-color-on-secondary: rgb(255 255 255);
9 --md-sys-color-secondary-container: rgb(108 117 136);
10 --md-sys-color-on-secondary-container: rgb(255 255 255);
11 --md-sys-color-tertiary: rgb(82 58 88);
12 --md-sys-color-on-tertiary: rgb(255 255 255);
13 --md-sys-color-tertiary-container: rgb(135 107 140);
14 --md-sys-color-on-tertiary-container: rgb(255 255 255);
15 --md-sys-color-error: rgb(140 0 9);
16 --md-sys-color-on-error: rgb(255 255 255);
17 --md-sys-color-error-container: rgb(218 52 46);
18 --md-sys-color-on-error-container: rgb(255 255 255);
19 --md-sys-color-background: rgb(249 249 255);
20 --md-sys-color-on-background: rgb(25 28 32);
21 --md-sys-color-surface: rgb(249 249 255);
22 --md-sys-color-on-surface: rgb(25 28 32);
23 --md-sys-color-surface-variant: rgb(224 226 236);
24 --md-sys-color-on-surface-variant: rgb(64 67 74);
25 --md-sys-color-outline: rgb(92 95 103);
26 --md-sys-color-outline-variant: rgb(120 122 131);
27 --md-sys-color-shadow: rgb(0 0 0);
28 --md-sys-color-scrim: rgb(0 0 0);
29 --md-sys-color-inverse-surface: rgb(46 48 54);
30 --md-sys-color-inverse-on-surface: rgb(240 240 247);
31 --md-sys-color-inverse-primary: rgb(170 199 255);
32 --md-sys-color-primary-fixed: rgb(88 117 168);
33 --md-sys-color-on-primary-fixed: rgb(255 255 255);
34 --md-sys-color-primary-fixed-dim: rgb(62 92 142);
35 --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
36 --md-sys-color-secondary-fixed: rgb(108 117 136);
37 --md-sys-color-on-secondary-fixed: rgb(255 255 255);
38 --md-sys-color-secondary-fixed-dim: rgb(83 92 111);
39 --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
40 --md-sys-color-tertiary-fixed: rgb(135 107 140);
41 --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
42 --md-sys-color-tertiary-fixed-dim: rgb(109 83 114);
43 --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
44 --md-sys-color-surface-dim: rgb(217 217 224);
45 --md-sys-color-surface-bright: rgb(249 249 255);
46 --md-sys-color-surface-container-lowest: rgb(255 255 255);
47 --md-sys-color-surface-container-low: rgb(243 243 250);
48 --md-sys-color-surface-container: rgb(237 237 244);
49 --md-sys-color-surface-container-high: rgb(231 232 238);
50 --md-sys-color-surface-container-highest: rgb(226 226 233);
51}
52

G. css / light.css

1.light {
2 --md-sys-color-primary: rgb(65 95 145);
3 --md-sys-color-surface-tint: rgb(65 95 145);
4 --md-sys-color-on-primary: rgb(255 255 255);
5 --md-sys-color-primary-container: rgb(214 227 255);
6 --md-sys-color-on-primary-container: rgb(0 27 62);
7 --md-sys-color-secondary: rgb(86 95 113);
8 --md-sys-color-on-secondary: rgb(255 255 255);
9 --md-sys-color-secondary-container: rgb(218 226 249);
10 --md-sys-color-on-secondary-container: rgb(19 28 43);
11 --md-sys-color-tertiary: rgb(112 85 117);
12 --md-sys-color-on-tertiary: rgb(255 255 255);
13 --md-sys-color-tertiary-container: rgb(250 216 253);
14 --md-sys-color-on-tertiary-container: rgb(40 19 46);
15 --md-sys-color-error: rgb(186 26 26);
16 --md-sys-color-on-error: rgb(255 255 255);
17 --md-sys-color-error-container: rgb(255 218 214);
18 --md-sys-color-on-error-container: rgb(65 0 2);
19 --md-sys-color-background: rgb(249 249 255);
20 --md-sys-color-on-background: rgb(25 28 32);
21 --md-sys-color-surface: rgb(249 249 255);
22 --md-sys-color-on-surface: rgb(25 28 32);
23 --md-sys-color-surface-variant: rgb(224 226 236);
24 --md-sys-color-on-surface-variant: rgb(68 71 78);
25 --md-sys-color-outline: rgb(116 119 127);
26 --md-sys-color-outline-variant: rgb(196 198 208);
27 --md-sys-color-shadow: rgb(0 0 0);
28 --md-sys-color-scrim: rgb(0 0 0);
29 --md-sys-color-inverse-surface: rgb(46 48 54);
30 --md-sys-color-inverse-on-surface: rgb(240 240 247);
31 --md-sys-color-inverse-primary: rgb(170 199 255);
32 --md-sys-color-primary-fixed: rgb(214 227 255);
33 --md-sys-color-on-primary-fixed: rgb(0 27 62);
34 --md-sys-color-primary-fixed-dim: rgb(170 199 255);
35 --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
36 --md-sys-color-secondary-fixed: rgb(218 226 249);
37 --md-sys-color-on-secondary-fixed: rgb(19 28 43);
38 --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
39 --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
40 --md-sys-color-tertiary-fixed: rgb(250 216 253);
41 --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
42 --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
43 --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
44 --md-sys-color-surface-dim: rgb(217 217 224);
45 --md-sys-color-surface-bright: rgb(249 249 255);
46 --md-sys-color-surface-container-lowest: rgb(255 255 255);
47 --md-sys-color-surface-container-low: rgb(243 243 250);
48 --md-sys-color-surface-container: rgb(237 237 244);
49 --md-sys-color-surface-container-high: rgb(231 232 238);
50 --md-sys-color-surface-container-highest: rgb(226 226 233);
51}
52

H. css / transicion_completa.css

1
2@view-transition {
3 navigation: auto;
4}
5
6::view-transition-group(root) {
7 animation-duration: var(--md-sys-motion-duration-700);
8}
9
10html::view-transition-old(root) {
11 animation-name: desvanece;
12}
13
14html::view-transition-new(root) {
15 animation-delay: var(--md-sys-motion-duration-700);
16 animation-name: aparece;
17}

I. css / transicion_pestanas.css

1@view-transition {
2 navigation: auto;
3}
4
5#headline {
6 view-transition-name: encabezado;
7}
8
9main {
10 view-transition-name: contenido;
11}
12
13::view-transition-group(encabezado) {
14 animation-duration: var(--md-sys-motion-duration-1000);
15}
16
17::view-transition-group(contenido) {
18 animation-duration: var(--md-sys-motion-duration-1000);
19}
20
21html::view-transition-old(encabezado) {
22 animation-name: salePorLaIzquierda;
23}
24
25html::view-transition-new(encabezado) {
26 animation-name: entraPorLaDerecha;
27}
28
29html::view-transition-old(contenido) {
30 animation-name: salePorLaIzquierda;
31}
32
33html::view-transition-new(contenido) {
34 animation-duration: var(--md-sys-motion-duration-700);
35 animation-name: entraPorLaDerecha;
36}