I. Carpeta « public / css »

Versión para imprimir.

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
}

 


      

     

         
2. public / css / material-symbols-outlined.css

 
  
 
 
  
1
@font-face {

  
2
 font-family: 'Material Symbols Outlined';

  
3
 font-style: normal;

  
4
 font-display: block;

  
5
 src:

  
6
  url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].woff2) format('woff2'),

  
7
  url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].ttf) format('truetype');

  
8
}

  
9

  
10
.material-symbols-outlined {

  
11
 font-family: 'Material Symbols Outlined';

  
12
 font-weight: normal;

  
13
 font-style: normal;

  
14
 font-display: block;

  
15
 font-size: 1.5rem;

  
16
 width: 1.5rem;

  
17
 height: 1.5rem;

  
18
 display: inline-block;

  
19
 line-height: 1;

  
20
 text-transform: none;

  
21
 letter-spacing: normal;

  
22
 word-wrap: normal;

  
23
 white-space: nowrap;

  
24
 direction: ltr;

  
25
}

 


      

     

         
3. public / css / transicion_pestanas.css

 
  
 
 
  
1
@view-transition {

  
2
 navigation: auto;

  
3
}

  
4

  
5
md-app-bar {

  
6
 view-transition-name: encabezado;

  
7
 background-color: var(--md-sys-color-surface);

  
8
 contain: layout;

  
9
}

  
10

  
11
section {

  
12
 view-transition-name: contenido;

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

  
14
 contain: layout;

  
15
}

  
16

  
17
@keyframes salePorLaIzquierda {

  
18
 from {

  
19
  transform: translateX(0);

  
20
  opacity: 1;

  
21
 }

  
22

  
23
 to {

  
24
  transform: translateX(-100%);

  
25
  opacity: 1;

  
26
 }

  
27
}

  
28

  
29
@keyframes entraPorLaDerecha {

  
30
 from {

  
31
  transform: translateX(100%);

  
32
  opacity: 1;

  
33
 }

  
34

  
35
 to {

  
36
  transform: translateX(0);

  
37
  opacity: 1;

  
38
 }

  
39
}

  
40

  
41
::view-transition-old(root),

  
42
::view-transition-new(root) {

  
43
 animation: none;

  
44
 mix-blend-mode: normal;

  
45
 opacity: 1 !important;

  
46
}

  
47

  
48
::view-transition-group(encabezado) {

  
49
 background-color: var(--md-sys-color-surface) !important;

  
50
}

  
51

  
52
::view-transition-group(contenido) {

  
53
 background-color: var(--md-sys-color-background) !important;

  
54
}

  
55

  
56
::view-transition-group(encabezado),

  
57
::view-transition-group(contenido) {

  
58
 animation-duration: var(--md-sys-motion-duration-1000);

  
59
 mix-blend-mode: normal !important;

  
60
 opacity: 1 !important;

  
61
 animation-fill-mode: both;

  
62
 overflow: hidden;

  
63
}

  
64

  
65
html::view-transition-old(encabezado) {

  
66
 animation-name: salePorLaIzquierda;

  
67
}

  
68

  
69
html::view-transition-new(encabezado) {

  
70
 animation-name: entraPorLaDerecha;

  
71
}

  
72

  
73
html::view-transition-old(contenido) {

  
74
 animation-name: salePorLaIzquierda;

  
75
}

  
76

  
77
html::view-transition-new(contenido) {

  
78
 animation-name: entraPorLaDerecha;

  
79
}