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}
skip_previous skip_next