1 | |
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 | |
12 | @import url(../lib/css/roboto.css); |
13 | @import url(../lib/css/material-symbols-outlined.css); |
14 | |
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 | |
31 | html { |
32 | --tabWidth: 3.75rem; |
33 | --anchoNav: 22.5rem; |
34 | } |
35 | |
36 | main { |
37 | max-width: 600px; |
38 | margin-left: auto; |
39 | margin-right: auto; |
40 | } |
41 | |
42 | |
43 | :-moz-ui-invalid { |
44 | box-shadow: none; |
45 | } |
46 | |
47 | body { |
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 | |
60 | |
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 | |
73 | html { |
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 | |
100 | --state-pressed-transparency-percentage: 84%; |
101 | |
102 | --state-focus-transparency-percentage: 88%; |
103 | |
104 | --state-hover-transparency-percentage: 92%; |
105 | |
106 | --md-sys-typescale-label-small-font-family-name: var(--Font); |
107 | |
108 | --md-sys-typescale-label-medium-font-family-name: var(--Font); |
109 | |
110 | --md-sys-typescale-label-large-font-family-name: var(--Font); |
111 | |
112 | --md-sys-typescale-body-small-font-family-name: var(--Font); |
113 | |
114 | --md-sys-typescale-body-medium-font-family-name: var(--Font); |
115 | |
116 | --md-sys-typescale-body-large-font-family-name: var(--Font); |
117 | |
118 | --md-sys-typescale-headline-small-font-family-name: var(--Font); |
119 | |
120 | --md-sys-typescale-headline-medium-font-family-name: var(--Font); |
121 | |
122 | --md-sys-typescale-headline-large-font-family-name: var(--Font); |
123 | |
124 | --md-sys-typescale-display-small-font-family-name: var(--Font); |
125 | |
126 | --md-sys-typescale-display-medium-font-family-name: var(--Font); |
127 | |
128 | --md-sys-typescale-display-large-font-family-name: var(--Font); |
129 | |
130 | --md-sys-typescale-title-small-font-family-name: var(--Font); |
131 | |
132 | --md-sys-typescale-title-medium-font-family-name: var(--Font); |
133 | |
134 | --md-sys-typescale-title-large-font-family-name: var(--Font); |
135 | } |
136 | |
137 | p { |
138 | margin: 1rem; |
139 | } |
140 | |
141 | a { |
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 | } |