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 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 font-size: 1rem;
76 --colIntIos: white;
77 --colIntIosOnBk: #2acc2a;
78 --colIntIosOnBkFc: #1bbb1b;
79 --colIntIosOffBk: #dbdbdb;
80 --colIntIosOffBkFc: #BDBDBD;
81 --md-sys-typescale-label-large-weight-prominent:
82 var(--md-ref-typeface-weight-bold);
83 --md-box_shadow_level4:
84 0 var(--md-sys-elevation-level4) var(--md-sys-elevation-level4) var(--md-sys-color-shadow);
85 --md-box_shadow_level3:
86 0 var(--md-sys-elevation-level3) var(--md-sys-elevation-level3) var(--md-sys-color-shadow);
87 --md-box_shadow_level2:
88 0 var(--md-sys-elevation-level2) var(--md-sys-elevation-level2) var(--md-sys-color-shadow);
89 --md-box_shadow_level1:
90 0 var(--md-sys-elevation-level1) var(--md-sys-elevation-level1) var(--md-sys-color-shadow);
91 --md-box_shadow_level0: none;
92 --iconSize: 1.5rem;
93 --avatarSize: 2.5rem;
94 --imageSize: 3.5rem;
95 --videoWidth: 7.125rem;
96 --videoHeight: 4rem;
97 --scroll-headline-duracion: 2s: --md-sys-state-focus-indicator-outer-offset: 0.125rem;
98 --md-sys-state-focus-indicator-thickness: 0.1875rem;
99 /* Pressed state layer opacity */
100 --state-pressed-transparency-percentage: 84%;
101 /* Focus state layer opacity */
102 --state-focus-transparency-percentage: 88%;
103 /* Hover state layer opacity */
104 --state-hover-transparency-percentage: 92%;
105 /* label - small */
106 --md-sys-typescale-label-small-font-family-name: var(--Font);
107 /* label - medium */
108 --md-sys-typescale-label-medium-font-family-name: var(--Font);
109 /* label - large */
110 --md-sys-typescale-label-large-font-family-name: var(--Font);
111 /* body - small */
112 --md-sys-typescale-body-small-font-family-name: var(--Font);
113 /* body - medium */
114 --md-sys-typescale-body-medium-font-family-name: var(--Font);
115 /* body - large */
116 --md-sys-typescale-body-large-font-family-name: var(--Font);
117 /* headline - small */
118 --md-sys-typescale-headline-small-font-family-name: var(--Font);
119 /* headline - medium */
120 --md-sys-typescale-headline-medium-font-family-name: var(--Font);
121 /* headline - large */
122 --md-sys-typescale-headline-large-font-family-name: var(--Font);
123 /* display - small */
124 --md-sys-typescale-display-small-font-family-name: var(--Font);
125 /* display - medium */
126 --md-sys-typescale-display-medium-font-family-name: var(--Font);
127 /* display - large */
128 --md-sys-typescale-display-large-font-family-name: var(--Font);
129 /* title - small */
130 --md-sys-typescale-title-small-font-family-name: var(--Font);
131 /* title - medium */
132 --md-sys-typescale-title-medium-font-family-name: var(--Font);
133 /* title - large */
134 --md-sys-typescale-title-large-font-family-name: var(--Font);
135}
136
137p {
138 margin: 1rem;
139}
140
141a {
142 color: var(--md-sys-color-on-background);
143}
144
145@media (prefers-color-scheme: light) {
146 html {
147 --md-riple-color: #00000020;
148 --md-sys-color-surface-container-low: var(--md-ref-palette-neutral95);
149 --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
150 }
151}
152
153@media (prefers-color-scheme: dark) {
154 html {
155 --md-riple-color: #ffffff40;
156 --md-sys-color-surface-container-low: var(--md-ref-palette-neutral20);
157 --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral30);
158 }
159}
160
161@keyframes salePorLaIzquierda {
162 to {
163 translate: -100vw 0;
164 }
165}
166
167@keyframes entraPorLaDerecha {
168 from {
169 translate: 100vw 0;
170 }
171}
172
173@keyframes aparece {
174 from {
175 opacity: 0;
176 }
177}
178
179@keyframes desvanece {
180 to {
181 opacity: 0;
182 }
183}
skip_previous skip_next