D. css / estilos.css

1
/* Definiciones para Material Design 3  */
2
@import url(baseline.css);
3
/* Fonts utilizados */
4
@import url(roboto.css);
5

  
6
html {

  
7
 /* Indica los temas del sistema operativo que son soportados. */

  
8
 color-scheme: light dark;

  
9
 --tabWidth: 3.75rem;

  
10
 --anchoNav: 22.5rem;

  
11
}

  
12

  
13
body>section,

  
14
form>section {

  
15
 max-width: 600px;

  
16
 margin-left: auto;

  
17
 margin-right: auto;

  
18
}

  
19

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

  
21
:-moz-ui-invalid {

  
22
 box-shadow: none;

  
23
}

  
24

  
25
body {

  
26
 margin: 0;

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

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

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

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

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

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

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

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

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

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

  
37
 /* Las siguientes líneas Evita los cambios de apariencia al cargar estilos y

  
38
 + custom elements, que son conocidos como Flash Of Unstyled Content (fouc). */

  
39
 opacity: 0;

  
40
 animation-name: fouc;

  
41
 animation-fill-mode: forwards;

  
42
 animation-duration: 1.5s;

  
43
}

  
44

  
45
@keyframes fouc {

  
46
 to {

  
47
  opacity: 1;

  
48
 }

  
49
}

  
50

  
51
html {

  
52
 --Font: -apple-system, BlinkMacSystemFont, roboto, sans-serif;

  
53
 --colIntIos: white;

  
54
 --colIntIosOnBk: #2acc2a;

  
55
 --colIntIosOnBkFc: #1bbb1b;

  
56
 --colIntIosOffBk: #dbdbdb;

  
57
 --colIntIosOffBkFc: #BDBDBD;

  
58
 /* Plain typeface */

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

  
60
 /* Brand typeface */

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

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

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

  
64
 --md-box_shadow_level4:

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

  
66
 --md-box_shadow_level3:

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

  
68
 --md-box_shadow_level2:

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

  
70
 --md-box_shadow_level1:

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

  
72
 --md-box_shadow_level0: none;

  
73
 --iconSize: 1.5rem;

  
74
 --avatarSize: 2.5rem;

  
75
 --imageSize: 3.5rem;

  
76
 --videoWidth: 7.125rem;

  
77
 --videoHeight: 4rem;

  
78
 --scroll-headline-duracion: 2s;

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

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

  
81
 /* Pressed state layer opacity */

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

  
83
 /* Focus state layer opacity */

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

  
85
 /* Hover state layer opacity */

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

  
87
}

  
88

  
89
p {

  
90
 margin: 1rem;

  
91
}

  
92

  
93
a {

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

  
95
}

  
96

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

  
98
 html {

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

  
100
 }

  
101
}

  
102

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

  
104
 html {

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

  
106
 }

  
107
}

  
108

  
109
@keyframes md-ripple {

  
110

  
111
 from {

  
112
  background-size: 100%;

  
113
 }

  
114

  
115
 to {

  
116
  background-size: 15000%;

  
117
 }

  
118

  
119
}

  
120

  
121
@keyframes salePorLaIzquierda {

  
122
 to {

  
123
  translate: -100vw 0;

  
124
 }

  
125
}

  
126

  
127
@keyframes entraPorLaDerecha {

  
128
 from {

  
129
  translate: 100vw 0;

  
130
 }

  
131
}

 


 
 
 
     skip_previous
    
 
     skip_next