1. public / css / estilos.css

1
html {
2
 /* Indica los temas del sistema operativo que son soportados. */
3
 color-scheme: light dark;
4
 --tabWidth: 3.75rem;
5
 --anchoNav: 22.5rem;
6
}
7

  
8
body>section,

  
9
form>section {

  
10
 max-width: 600px;

  
11
 margin-left: auto;

  
12
 margin-right: auto;

  
13
}

  
14

  
15
/* Fonts utilizados */

  
16

  
17
/* Definición de Roboto Variable (Normal) */

  
18
@font-face {

  
19
 font-family: 'Roboto';

  
20
 src: url('../fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');

  
21
 /* Rango del eje de peso (wght) */

  
22
 font-weight: 100 900;

  
23
 /* Rango del eje de anchura (wdth) */

  
24
 font-stretch: 75% 100%;

  
25
 font-style: normal;

  
26
 /* Mejora el rendimiento de carga de texto */

  
27
 font-display: swap;

  
28
}

  
29

  
30
/* Definición de Roboto Variable (Itálica) */

  
31
@font-face {

  
32
 font-family: 'Roboto';

  
33
 src: url('../fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');

  
34
 font-weight: 100 900;

  
35
 font-stretch: 75% 100%;

  
36
 font-style: italic;

  
37
 font-display: swap;

  
38
}

  
39

  
40
html {

  
41
 --Font: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

  
42
 --colIntIos: white;

  
43
 --colIntIosOnBk: #2acc2a;

  
44
 --colIntIosOnBkFc: #1bbb1b;

  
45
 --colIntIosOffBk: #dbdbdb;

  
46
 --colIntIosOffBkFc: #BDBDBD;

  
47
 /* Plain typeface */

  
48
 --md-ref-typeface-plain: var(--Font);

  
49
 /* Brand typeface */

  
50
 --md-ref-typeface-brand: var(--Font);

  
51
 --md-sys-typescale-label-large-weight-prominent:

  
52
  var(--md-ref-typeface-weight-bold);

  
53
 --md-box_shadow_level4:

  
54
  0 var(--md-sys-elevation-level4) var(--md-sys-elevation-level4) var(--md-sys-color-shadow);

  
55
 --md-box_shadow_level3:

  
56
  0 var(--md-sys-elevation-level3) var(--md-sys-elevation-level3) var(--md-sys-color-shadow);

  
57
 --md-box_shadow_level2:

  
58
  0 var(--md-sys-elevation-level2) var(--md-sys-elevation-level2) var(--md-sys-color-shadow);

  
59
 --md-box_shadow_level1:

  
60
  0 var(--md-sys-elevation-level1) var(--md-sys-elevation-level1) var(--md-sys-color-shadow);

  
61
 --md-box_shadow_level0: none;

  
62
 --iconSize: 1.5rem;

  
63
 --avatarSize: 2.5rem;

  
64
 --imageSize: 3.5rem;

  
65
 --videoWidth: 7.125rem;

  
66
 --videoHeight: 4rem;

  
67
 --md-sys-state-focus-indicator-outer-offset: 0.125rem;

  
68
 --md-sys-state-focus-indicator-thickness: 0.1875rem;

  
69
 /* Pressed state layer opacity */

  
70
 --state-pressed-transparency-percentage: 84%;

  
71
 /* Focus state layer opacity */

  
72
 --state-focus-transparency-percentage: 88%;

  
73
 /* Hover state layer opacity */

  
74
 --state-hover-transparency-percentage: 92%;

  
75
 background-color: var(--md-sys-color-background);

  
76
}

  
77

  
78
/* Quita un borde rojo que coloca Firefox. */

  
79
:-moz-ui-invalid {

  
80
 box-shadow: none;

  
81
}

  
82

  
83
body {

  
84
 margin: 0;

  
85
 font-family: var(--md-sys-typescale-body-large-font);

  
86
 font-weight: var(--md-sys-typescale-body-large-weight);

  
87
 font-size: var(--md-sys-typescale-body-large-size);

  
88
 font-style: var(--md-sys-typescale-body-large-font-style);

  
89
 letter-spacing: var(--md-sys-typescale-body-large-tracking);

  
90
 line-height: var(--md-sys-typescale-body-large-line-height);

  
91
 text-transform: var(--md-sys-typescale-body-large-text-transform);

  
92
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);

  
93
 color: var(--md-sys-color-on-background);

  
94
 background-color: var(--md-sys-color-background);

  
95
}

  
96

  
97
p {

  
98
 margin: 1rem;

  
99
}

  
100

  
101
a {

  
102
 color: var(--md-sys-color-on-background);

  
103
}

  
104

  
105
@media (prefers-color-scheme: light) {

  
106
 html {

  
107
  --md-riple-color: #00000020;

  
108
 }

  
109
}

  
110

  
111
@media (prefers-color-scheme: dark) {

  
112
 html {

  
113
  --md-riple-color: #ffffff40;

  
114
 }

  
115
}

  
116

  
117
@keyframes md-ripple {

  
118

  
119
 from {

  
120
  background-size: 100%;

  
121
 }

  
122

  
123
 to {

  
124
  background-size: 15000%;

  
125
 }

  
126

  
127
}

 


 
 
 
     skip_previous
    
 
     skip_next