LegoMyCode/index.css at main · DelvyG/LegoMyCode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
/* ==========================================================================
   LegoMyCode Global Styles (src/index.css)
   ========================================================================== */

/**
 * :root
 * --------------------------------------------------------------------------
 * Define las variables CSS globales para todo el proyecto LegoMyCode.
 * Estas variables controlan la paleta de colores base, tipografía, espaciados, etc.
 * Por defecto, definen el tema CLARO.
 * También se incluyen algunas configuraciones globales de renderizado de fuentes.
 */
 :root {
  /* === Paleta de Colores Base (Tema Claro por defecto) === */
  --lmc-global-color-primary: #007bff;      /* Azul primario para énfasis, botones, links */
  --lmc-global-color-secondary: #6c757d;   /* Gris secundario para elementos menos importantes */
  --lmc-global-color-background: #ffffff; /* Fondo principal de la página */
  --lmc-global-color-text: #212529;        /* Color de texto principal oscuro */
  --lmc-global-color-muted: #6c757d;      /* Color para texto secundario o atenuado */
  --lmc-global-color-border: #dee2e6;      /* Color estándar para bordes y separadores */
  /* Puedes añadir más colores según necesites (success, danger, warning, info, etc.) */
  /* --lmc-global-color-success: #198754; */

  /* === Tipografía Base === */
  --lmc-global-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Fuente moderna sans-serif */
  --lmc-global-font-size-base: 16px;       /* Tamaño de fuente raíz (1rem) */
  --lmc-global-line-height-base: 1.5;      /* Interlineado base para legibilidad */
  --lmc-global-font-weight-base: 400;      /* Peso normal */
  --lmc-global-font-weight-bold: 700;      /* Peso bold */

  /* === Espaciados y Radios === */
  --lmc-global-border-radius-base: 0.375rem; /* ~6px - Radio de borde estándar */
  --lmc-global-spacing-base: 1rem;         /* ~16px - Unidad de espaciado base */

  /* === Configuraciones Globales de Renderizado === */
  /* Controla cómo el navegador renderiza claro/oscuro elementos nativos (inputs, scrollbars) */
  color-scheme: light dark; /* Indica que soportamos ambos modos */

  /* Mejoras en el renderizado de fuentes */
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * body
 * --------------------------------------------------------------------------
 * Estilos base aplicados directamente al <body>.
 * Establece la fuente, tamaño, color y fondo por defecto usando las variables globales.
 * Elimina el margen por defecto del navegador.
 * NOTA: Se eliminaron los estilos `display:flex; place-items:center; min-width`
 *       de la plantilla Vite, ya que son más para centrar un logo/demo
 *       que para un layout de página real. `min-height: 100vh` se puede
 *       añadir si se busca un footer pegajoso, por ejemplo.
 */
body {
  margin: 0; /* Reset de margen */
  font-family: var(--lmc-global-font-family-base);
  font-size: var(--lmc-global-font-size-base);
  line-height: var(--lmc-global-line-height-base);
  font-weight: var(--lmc-global-font-weight-base);
  color: var(--lmc-global-color-text);
  background-color: var(--lmc-global-color-background);
  /* min-height: 100vh; */ /* Descomentar si necesitas que el body ocupe al menos toda la altura */
}

/**
 * Estilos Base para Elementos HTML Comunes
 * --------------------------------------------------------------------------
 * Proporciona estilos consistentes para elementos HTML básicos usando
 * las variables globales. Ayuda a que el contenido dentro y fuera de los
 * bloques LegoMyCode tenga una apariencia inicial coherente.
 */

/* Cabeceras (h1-h6) */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: calc(var(--lmc-global-spacing-base) * 0.5);
  font-weight: var(--lmc-global-font-weight-bold); /* Usa el peso bold definido */
  line-height: 1.2; /* Interlineado más ajustado para títulos */
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Párrafos */
p {
  margin-top: 0;
  margin-bottom: var(--lmc-global-spacing-base);
}

/* Listas */
ul, ol {
  margin-top: 0;
  margin-bottom: var(--lmc-global-spacing-base);
  padding-left: calc(var(--lmc-global-spacing-base) * 1.5);
}
li {
  margin-bottom: calc(var(--lmc-global-spacing-base) * 0.25);
}

/* Líneas Horizontales */
hr {
  margin-top: var(--lmc-global-spacing-base);
  margin-bottom: var(--lmc-global-spacing-base);
  border: 0;
  border-top: 1px solid var(--lmc-global-color-border);
  opacity: 0.75;
}

/* Enlaces */
a {
  color: var(--lmc-global-color-primary); /* Usa el color primario global */
  text-decoration: none; /* Quita subrayado por defecto */
  transition: opacity 0.15s ease-in-out;
}
a:hover {
  /* color: color-mix(in srgb, var(--lmc-global-color-primary), #000 10%); */ /* Ejemplo para oscurecer ligeramente */
  opacity: 0.8;
  text-decoration: underline; /* Subraya en hover */
}

/* Imágenes (Estilo base si no se usa lmc-simple-image) */
img {
  max-width: 100%;
  height: auto; /* Mantiene proporción por defecto */
  vertical-align: middle;
}

/**
 * Tema Oscuro (Activado con data-theme="dark" en <html> o <body>)
 * --------------------------------------------------------------------------
 * Sobreescribe las variables globales para adaptar la apariencia al modo oscuro.
 * Los componentes que usan estas variables se adaptarán automáticamente.
 */
[data-theme="dark"] {
  /* === Sobrescritura de Paleta de Colores para Tema Oscuro === */
  --lmc-global-color-primary: #58a6ff;       /* Azul más brillante para contraste en oscuro */
  --lmc-global-color-secondary: #8b949e;
  --lmc-global-color-background: #0d1117;   /* Fondo oscuro (ej: GitHub dark) */
  --lmc-global-color-text: #c9d1d9;          /* Texto claro principal */
  --lmc-global-color-muted: #8b949e;
  --lmc-global-color-border: #30363d;        /* Borde más oscuro */
  /* --lmc-global-color-success: #3fb950; */

  /* No es necesario redefinir tipografía, espaciados, etc. a menos que el diseño lo requiera */
}

/* === (Opcional) Sobrescrituras Específicas para Modo Oscuro === */
/* Si algún componente necesita ajustes finos ADEMÁS de las variables */

/* Ejemplo: Hacer que los HR sean un poco más visibles en oscuro */
/* [data-theme="dark"] hr {
  opacity: 0.5;
} */

/* Ejemplo: Ajustar botón por defecto en oscuro (si los fallbacks no son suficientes) */
/* [data-theme="dark"] lmc-basic-button {
   --lmc-button-background-color: #21262d;
   --lmc-button-text-color: #c9d1d9;
   --lmc-button-border-color: #30363d; /* Si tuviera borde
} */