sergio
7728013012
Mobile drag fix (vista-web):
- pointermove listener ahora con `AddEventListenerOptions { passive: false }`.
Sin esto, en navegadores móviles `preventDefault()` es no-op y el browser
se traga el gesto horizontal como pan/scroll antes de que JS pueda
detectar la dirección y capturar el pointer.
- CSS: `.deck-strip` y `.deck-strip *` y `.deck-page` con
`touch-action: pan-y`. El touch-action del target inmediato es lo que
el browser consulta; sin esto, sobre un <p> dentro del strip el browser
asume `auto` y reclama horizontal.
Taskbar agnóstica (barra-web):
- Nuevo crate `crates/modules/barra/barra-web` que maneja sólo el LIST
dinámico de tareas; el resto del layout (home, brand, credits) es del
host. Misma filosofía que vista-web: separar lo reusable.
- API: Task::new(id, label).active() builder; TaskList::mount(ul) +
set_tasks/on_click/task_center. Click delegado, callback recibe
(id, cx, cy) en CSS pixels para origin de animaciones.
- Sanitiza IDs a [a-zA-Z0-9_-] y HTML-escapa labels.
- 3 tests unitarios.
- gioser-web refactoreado para consumir TaskList: sync_taskbar arma
Vec<Task> y delega; on_click del taskbar dispara minimize/restore_from_tab
según estado. install_taskbar reducido a sólo home buttons.
Trazos zodiacales (gioser-shaders + canvas-web):
- 12 líneas radiales muy sutiles entre la chacana y el aro principal, una
por signo, con colores significativos:
Aries→fuego rojo, Tauro→tierra verde, Géminis→aire amarillo,
Cáncer→agua plata, Leo→fuego dorado, Virgo→tierra marrón,
Libra→aire rosa, Escorpio→agua rojo profundo, Sagitario→fuego púrpura,
Capricornio→tierra verde oscuro, Acuario→aire celeste, Piscis→agua
verde mar.
- Aries empieza en el norte, giran en sentido horario (rueda zodiacal
clásica). Banda radial r∈[1.05*L, 0.96*ringR_main], gauss angular
con σ=0.0042 rad (~0.24° de ancho), multiplier 0.55 → apenas visible.
- Uniform `vec3 u_zodiac[12]` subido como array plano de 36 floats vía
uniform3fv. Constante ZODIAC_COLORS expuesta en canvas-web por si otros
callers la quieren.
Workspace verde + 21 tests (geom 6 + palette 4 + physics 3 + pluma-md 5
+ barra-web 3).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
668 lines
17 KiB
CSS
668 lines
17 KiB
CSS
/* === Tokens === */
|
|
:root {
|
|
--bg: #06050d;
|
|
--fg: #e8eaf5;
|
|
--gold: #d8a85d;
|
|
--gold-deep: #b77e34;
|
|
--aire: #d0dbff;
|
|
--agua: #6cd0f3;
|
|
--fuego: #f59056;
|
|
--tierra: #d49873;
|
|
|
|
--ease-emerge: cubic-bezier(0.22, 0.61, 0.20, 1);
|
|
--ease-magma: cubic-bezier(0.32, 0, 0.05, 1);
|
|
--ease-page: cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
|
|
--taskbar-height: 52px;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
font-weight: 300;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* === Canvas WebGL === */
|
|
#gioser-canvas {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: block;
|
|
z-index: 0;
|
|
transition: opacity 600ms var(--ease-emerge), filter 600ms var(--ease-emerge);
|
|
}
|
|
body.deck-visible #gioser-canvas {
|
|
opacity: 0.30;
|
|
filter: blur(4px) saturate(80%);
|
|
}
|
|
|
|
/* === Tips (botones cardinales sobre el aro) === */
|
|
#tips {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 5;
|
|
transition: opacity 250ms ease;
|
|
}
|
|
body.deck-visible #tips {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tip {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
pointer-events: auto;
|
|
text-decoration: none;
|
|
color: var(--fg);
|
|
user-select: none;
|
|
cursor: pointer;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
padding: 1.1rem 1.6rem 0.95rem;
|
|
min-width: 168px;
|
|
|
|
background:
|
|
radial-gradient(ellipse at top, rgba(255, 255, 255, 0.04), transparent 65%),
|
|
rgba(8, 6, 22, 0.55);
|
|
backdrop-filter: blur(12px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(140%);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(216, 168, 93, 0.25);
|
|
|
|
box-shadow:
|
|
0 12px 36px rgba(0, 0, 0, 0.40),
|
|
inset 0 0 0 1px rgba(255, 255, 255, 0.04);
|
|
|
|
transition:
|
|
box-shadow 350ms var(--ease-emerge),
|
|
border-color 350ms var(--ease-emerge),
|
|
background 350ms var(--ease-emerge);
|
|
}
|
|
.tip::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -10px;
|
|
border-radius: 26px;
|
|
border: 1px solid currentColor;
|
|
opacity: 0;
|
|
transition: opacity 400ms ease, inset 400ms var(--ease-emerge);
|
|
pointer-events: none;
|
|
}
|
|
.tip:hover {
|
|
border-color: currentColor;
|
|
background:
|
|
radial-gradient(ellipse at top, rgba(255, 255, 255, 0.07), transparent 65%),
|
|
rgba(20, 14, 40, 0.72);
|
|
}
|
|
.tip:hover::before {
|
|
opacity: 0.45;
|
|
inset: -16px;
|
|
}
|
|
.tip-glyph {
|
|
width: 54px;
|
|
height: 54px;
|
|
color: currentColor;
|
|
filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 16px currentColor);
|
|
transition: filter 320ms ease, transform 350ms var(--ease-emerge);
|
|
}
|
|
.tip:hover .tip-glyph {
|
|
filter: drop-shadow(0 0 14px currentColor) drop-shadow(0 0 28px currentColor);
|
|
transform: translateY(-3px);
|
|
}
|
|
.tip-label {
|
|
font-family: 'Cinzel', serif;
|
|
font-size: 0.95rem;
|
|
letter-spacing: 0.42em;
|
|
font-weight: 600;
|
|
text-indent: 0.42em;
|
|
margin-top: 0.15rem;
|
|
}
|
|
.tip-sub {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.22em;
|
|
font-weight: 300;
|
|
color: rgba(232, 234, 245, 0.62);
|
|
text-transform: uppercase;
|
|
text-indent: 0.22em;
|
|
}
|
|
.tip-aire { color: var(--aire); }
|
|
.tip-fuego { color: var(--fuego); }
|
|
.tip-agua { color: var(--agua); }
|
|
.tip-tierra { color: var(--tierra); }
|
|
|
|
/* === DECK: contenedor único de páginas swipeable === */
|
|
.deck {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: var(--taskbar-height);
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
|
|
transform: scale(0.0);
|
|
overflow: hidden;
|
|
touch-action: pan-y;
|
|
background:
|
|
radial-gradient(ellipse at center, var(--deck-glow, rgba(216, 168, 93, 0.15)), transparent 65%),
|
|
rgba(6, 5, 13, 0.96);
|
|
backdrop-filter: blur(28px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(28px) saturate(140%);
|
|
transition:
|
|
transform 600ms var(--ease-magma),
|
|
opacity 450ms ease,
|
|
visibility 0s 600ms;
|
|
}
|
|
.deck.open {
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: scale(1);
|
|
transition:
|
|
transform 600ms var(--ease-magma),
|
|
opacity 450ms ease,
|
|
visibility 0s;
|
|
}
|
|
/* Acento del deck según elemento activo: glow radial del color. */
|
|
body.deck-active-aire .deck { --deck-glow: rgba(208, 219, 255, 0.22); }
|
|
body.deck-active-fuego .deck { --deck-glow: rgba(245, 144, 86, 0.28); }
|
|
body.deck-active-agua .deck { --deck-glow: rgba(108, 208, 243, 0.22); }
|
|
body.deck-active-tierra .deck { --deck-glow: rgba(212, 152, 115, 0.24); }
|
|
|
|
/* Strip horizontal con páginas — vista-web traslada esto.
|
|
touch-action: pan-y declara al browser "yo manejo horizontal, el
|
|
vertical (scroll interno de cada página) lo dejas pasar". Sin esto
|
|
el navegador móvil se traga el gesto horizontal antes de que JS
|
|
pueda capturarlo. */
|
|
.deck-strip {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: translate3d(var(--vista-offset, 0px), 0, 0);
|
|
transition: transform 360ms var(--ease-page);
|
|
will-change: transform;
|
|
touch-action: pan-y;
|
|
}
|
|
/* Asegurar que TODOS los descendientes del strip hereden el contrato
|
|
touch-action — si el toque llega a un párrafo o <a>, el browser
|
|
chequea el touch-action del target, no del padre. */
|
|
.deck-strip * {
|
|
touch-action: pan-y;
|
|
}
|
|
.deck-strip.vista-dragging,
|
|
.deck-strip.vista-instant {
|
|
transition: none;
|
|
}
|
|
|
|
.deck-page {
|
|
flex: 0 0 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
touch-action: pan-y;
|
|
}
|
|
.deck-page[data-element="aire"] { --page-accent: var(--aire); }
|
|
.deck-page[data-element="fuego"] { --page-accent: var(--fuego); }
|
|
.deck-page[data-element="agua"] { --page-accent: var(--agua); }
|
|
.deck-page[data-element="tierra"] { --page-accent: var(--tierra); }
|
|
|
|
/* Ambience por página */
|
|
.page-ambience {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.deck-page[data-element="aire"] .page-ambience {
|
|
background:
|
|
radial-gradient(circle at 18% 22%, rgba(208, 219, 255, 0.20), transparent 38%),
|
|
radial-gradient(circle at 78% 68%, rgba(208, 219, 255, 0.14), transparent 40%),
|
|
radial-gradient(circle at 45% 90%, rgba(180, 200, 255, 0.10), transparent 45%);
|
|
animation: aire-drift 28s ease-in-out infinite alternate;
|
|
}
|
|
.deck-page[data-element="fuego"] .page-ambience {
|
|
background:
|
|
radial-gradient(circle at 50% 100%, rgba(245, 144, 86, 0.35), transparent 55%),
|
|
radial-gradient(circle at 25% 80%, rgba(255, 90, 40, 0.18), transparent 35%),
|
|
radial-gradient(circle at 80% 85%, rgba(255, 140, 60, 0.18), transparent 35%);
|
|
animation: fuego-flicker 5s ease-in-out infinite;
|
|
}
|
|
.deck-page[data-element="agua"] .page-ambience {
|
|
background:
|
|
radial-gradient(ellipse at 50% 95%, rgba(60, 160, 230, 0.30), transparent 60%),
|
|
radial-gradient(ellipse at 20% 70%, rgba(108, 208, 243, 0.15), transparent 50%),
|
|
radial-gradient(ellipse at 80% 75%, rgba(108, 208, 243, 0.12), transparent 50%);
|
|
animation: agua-tide 14s ease-in-out infinite alternate;
|
|
}
|
|
.deck-page[data-element="tierra"] .page-ambience {
|
|
background:
|
|
radial-gradient(ellipse at 50% 100%, rgba(120, 80, 40, 0.40), transparent 60%),
|
|
radial-gradient(ellipse at 22% 88%, rgba(180, 130, 80, 0.20), transparent 45%),
|
|
radial-gradient(ellipse at 78% 88%, rgba(150, 100, 60, 0.22), transparent 45%);
|
|
}
|
|
@keyframes aire-drift {
|
|
from { transform: translate(-4%, -1%); }
|
|
to { transform: translate(4%, 2%); }
|
|
}
|
|
@keyframes fuego-flicker {
|
|
0%, 100% { opacity: 0.85; transform: scaleY(1.00); }
|
|
35% { opacity: 1.00; transform: scaleY(1.04); }
|
|
60% { opacity: 0.92; transform: scaleY(0.98); }
|
|
}
|
|
@keyframes agua-tide {
|
|
from { transform: translateY(0); }
|
|
to { transform: translateY(-3%); }
|
|
}
|
|
|
|
/* Head + controls */
|
|
.page-controls {
|
|
position: absolute;
|
|
top: 1.8vh;
|
|
right: 1.8vw;
|
|
z-index: 5;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
.page-control-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
color: var(--page-accent, var(--gold));
|
|
font-size: 1.2rem;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
font-family: 'Inter', sans-serif;
|
|
transition:
|
|
background 200ms ease,
|
|
border-color 200ms ease,
|
|
transform 250ms var(--ease-emerge);
|
|
}
|
|
.page-control-btn:hover {
|
|
background: rgba(255, 255, 255, 0.10);
|
|
border-color: currentColor;
|
|
}
|
|
.page-minimize svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.page-close {
|
|
font-size: 1.6rem;
|
|
}
|
|
.page-close:hover { transform: rotate(90deg); }
|
|
|
|
.page-head {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
padding: 7vh 8vw 2vh;
|
|
color: var(--page-accent, var(--gold));
|
|
}
|
|
.page-mark {
|
|
display: inline-block;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.55em;
|
|
text-transform: uppercase;
|
|
color: rgba(232, 234, 245, 0.6);
|
|
margin-bottom: 0.4rem;
|
|
text-indent: 0.55em;
|
|
}
|
|
.page-title {
|
|
font-family: 'Cinzel', serif;
|
|
font-weight: 700;
|
|
font-size: clamp(2.4rem, 6vw, 4.6rem);
|
|
margin: 0;
|
|
letter-spacing: 0.08em;
|
|
color: var(--page-accent, var(--gold));
|
|
text-shadow: 0 0 28px currentColor, 0 0 56px rgba(255, 255, 255, 0.10);
|
|
}
|
|
.page-tag {
|
|
display: block;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.32em;
|
|
text-transform: uppercase;
|
|
color: rgba(232, 234, 245, 0.55);
|
|
margin-top: 0.7rem;
|
|
text-indent: 0.32em;
|
|
}
|
|
.page-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 1vh 10vw 8vh;
|
|
opacity: 0;
|
|
transition: opacity 400ms ease 250ms;
|
|
}
|
|
.deck.open .deck-page .page-content {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* === pluma-doc dentro de la página === */
|
|
.pluma-doc {
|
|
max-width: 760px;
|
|
margin: 0 auto;
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 300;
|
|
font-size: 1.05rem;
|
|
line-height: 1.78;
|
|
color: rgba(232, 234, 245, 0.92);
|
|
}
|
|
.pluma-doc > * + * { margin-top: 1.0em; }
|
|
.pluma-doc h1 {
|
|
font-family: 'Cinzel', serif;
|
|
font-weight: 700;
|
|
font-size: clamp(1.7rem, 3vw, 2.4rem);
|
|
color: var(--page-accent);
|
|
text-shadow: 0 0 18px currentColor;
|
|
letter-spacing: 0.04em;
|
|
margin-top: 1.4em;
|
|
}
|
|
.pluma-doc h2 {
|
|
font-family: 'Cinzel', serif;
|
|
font-weight: 500;
|
|
font-size: 1.5rem;
|
|
color: var(--page-accent);
|
|
letter-spacing: 0.04em;
|
|
margin-top: 1.6em;
|
|
padding-bottom: 0.3em;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
|
|
}
|
|
.pluma-doc h3 {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 1.18rem;
|
|
color: rgba(255, 255, 255, 0.92);
|
|
letter-spacing: 0.03em;
|
|
margin-top: 1.6em;
|
|
}
|
|
.pluma-doc p { margin: 0; }
|
|
.pluma-doc a {
|
|
color: var(--page-accent);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid currentColor;
|
|
transition: opacity 200ms ease;
|
|
}
|
|
.pluma-doc a:hover { opacity: 0.7; }
|
|
.pluma-doc strong { color: rgba(255, 255, 255, 0.98); font-weight: 600; }
|
|
.pluma-doc em { color: rgba(255, 255, 255, 0.92); }
|
|
.pluma-doc code {
|
|
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
padding: 0.12em 0.45em;
|
|
border-radius: 4px;
|
|
font-size: 0.92em;
|
|
color: var(--page-accent);
|
|
}
|
|
.pluma-doc pre {
|
|
background: rgba(0, 0, 0, 0.45);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-left: 3px solid var(--page-accent);
|
|
border-radius: 8px;
|
|
padding: 1rem 1.2rem;
|
|
overflow-x: auto;
|
|
font-size: 0.92rem;
|
|
}
|
|
.pluma-doc pre code {
|
|
background: transparent;
|
|
color: rgba(232, 234, 245, 0.92);
|
|
padding: 0;
|
|
}
|
|
.pluma-doc blockquote {
|
|
border-left: 3px solid var(--page-accent);
|
|
padding: 0.4em 1.2em;
|
|
color: rgba(232, 234, 245, 0.75);
|
|
font-style: italic;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 0 6px 6px 0;
|
|
}
|
|
.pluma-doc ul, .pluma-doc ol { padding-left: 1.6em; }
|
|
.pluma-doc li { margin: 0.4em 0; }
|
|
.pluma-doc li::marker { color: var(--page-accent); }
|
|
.pluma-doc hr {
|
|
border: none;
|
|
height: 1px;
|
|
background: linear-gradient(to right, transparent, var(--page-accent), transparent);
|
|
margin: 2em 0;
|
|
}
|
|
.pluma-doc table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
font-size: 0.95rem;
|
|
}
|
|
.pluma-doc th, .pluma-doc td {
|
|
padding: 0.55em 0.9em;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
text-align: left;
|
|
}
|
|
.pluma-doc th {
|
|
color: var(--page-accent);
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.pluma-loading, .pluma-error {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 30vh;
|
|
color: rgba(232, 234, 245, 0.55);
|
|
font-family: 'Cinzel', serif;
|
|
letter-spacing: 0.4em;
|
|
font-size: 0.9rem;
|
|
}
|
|
.pluma-loading::before {
|
|
content: "";
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-right: 1rem;
|
|
border: 1px solid var(--page-accent);
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
animation: pluma-spin 1s linear infinite;
|
|
}
|
|
.pluma-error { color: var(--fuego); font-style: italic; }
|
|
@keyframes pluma-spin { to { transform: rotate(360deg); } }
|
|
|
|
/* === Taskbar estilo Windows === */
|
|
.taskbar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: var(--taskbar-height);
|
|
z-index: 200;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0 0.8rem;
|
|
background: linear-gradient(to top, rgba(6, 5, 13, 0.94), rgba(8, 6, 22, 0.80));
|
|
backdrop-filter: blur(24px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(24px) saturate(140%);
|
|
border-top: 1px solid rgba(216, 168, 93, 0.22);
|
|
box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
.taskbar-home {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: transparent;
|
|
border: 1px solid rgba(216, 168, 93, 0.32);
|
|
color: var(--gold);
|
|
border-radius: 9px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
transition: all 220ms var(--ease-emerge);
|
|
}
|
|
.taskbar-home:hover {
|
|
border-color: var(--gold);
|
|
background: rgba(216, 168, 93, 0.12);
|
|
box-shadow: 0 0 16px rgba(216, 168, 93, 0.35);
|
|
transform: translateY(-1px);
|
|
}
|
|
.taskbar-home-glyph {
|
|
width: 22px;
|
|
height: 22px;
|
|
filter: drop-shadow(0 0 6px currentColor);
|
|
}
|
|
|
|
.taskbar-brand {
|
|
font-family: 'Cinzel', serif;
|
|
font-weight: 700;
|
|
font-size: 1.30rem;
|
|
letter-spacing: 0.07em;
|
|
color: #f4eedf;
|
|
text-decoration: none;
|
|
text-shadow: 0 0 14px rgba(216, 168, 93, 0.45);
|
|
padding: 0 0.55rem;
|
|
user-select: none;
|
|
transition: text-shadow 220ms ease, color 220ms ease;
|
|
white-space: nowrap;
|
|
}
|
|
.taskbar-brand:hover {
|
|
color: #ffffff;
|
|
text-shadow: 0 0 20px rgba(216, 168, 93, 0.7), 0 0 36px rgba(245, 144, 86, 0.30);
|
|
}
|
|
.taskbar-brand .brand-dot {
|
|
color: var(--gold);
|
|
margin: 0 0.05em;
|
|
}
|
|
|
|
.taskbar-divider {
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 26px;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
.taskbar-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
.taskbar-list::-webkit-scrollbar { display: none; }
|
|
|
|
.taskbar-item {
|
|
height: 38px;
|
|
padding: 0 1.0rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border: 1px solid rgba(255, 255, 255, 0.10);
|
|
border-radius: 9px;
|
|
color: var(--task-color, var(--fg));
|
|
font-family: 'Cinzel', serif;
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.36em;
|
|
text-indent: 0.36em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 260ms var(--ease-emerge);
|
|
white-space: nowrap;
|
|
}
|
|
.taskbar-item:hover {
|
|
background: rgba(255, 255, 255, 0.09);
|
|
border-color: var(--task-color, currentColor);
|
|
transform: translateY(-1px);
|
|
}
|
|
.taskbar-item.active {
|
|
background: rgba(255, 255, 255, 0.11);
|
|
border-color: var(--task-color);
|
|
box-shadow:
|
|
0 0 18px var(--task-color),
|
|
inset 0 -2px 0 0 var(--task-color);
|
|
}
|
|
.taskbar-item-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--task-color, var(--gold));
|
|
box-shadow: 0 0 8px currentColor;
|
|
}
|
|
.taskbar-item[data-task="aire"] { --task-color: var(--aire); }
|
|
.taskbar-item[data-task="fuego"] { --task-color: var(--fuego); }
|
|
.taskbar-item[data-task="tierra"] { --task-color: var(--tierra); }
|
|
.taskbar-item[data-task="agua"] { --task-color: var(--agua); }
|
|
|
|
.taskbar-spacer {
|
|
flex: 1;
|
|
min-width: 0.6rem;
|
|
}
|
|
|
|
.taskbar-credit {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.04em;
|
|
color: rgba(216, 168, 93, 0.75);
|
|
text-decoration: none;
|
|
padding: 0.35rem 0.7rem;
|
|
border-radius: 8px;
|
|
border: 1px solid transparent;
|
|
transition: all 220ms var(--ease-emerge);
|
|
white-space: nowrap;
|
|
}
|
|
.taskbar-credit:hover {
|
|
color: var(--gold);
|
|
border-color: rgba(216, 168, 93, 0.25);
|
|
background: rgba(216, 168, 93, 0.06);
|
|
}
|
|
.copyleft-mark {
|
|
display: inline-block;
|
|
font-size: 1rem;
|
|
/* © con escala horizontal -1 = copyleft visual. */
|
|
transform: scaleX(-1);
|
|
color: currentColor;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.tip { min-width: 110px; padding: 0.7rem 0.9rem; }
|
|
.tip-glyph { width: 36px; height: 36px; }
|
|
.tip-label { font-size: 0.72rem; }
|
|
.tip-sub { display: none; }
|
|
.page-head { padding: 5vh 5vw 1vh; }
|
|
.page-content { padding: 0 5vw 5vh; }
|
|
.taskbar { height: 46px; padding: 0 0.4rem; gap: 0.3rem; }
|
|
.taskbar-home { width: 36px; height: 36px; }
|
|
.taskbar-item { height: 34px; padding: 0 0.7rem; font-size: 0.65rem; }
|
|
.taskbar-brand { font-size: 1.05rem; padding: 0 0.3rem; }
|
|
.taskbar-credit-text { display: none; }
|
|
.deck { bottom: 46px; }
|
|
:root { --taskbar-height: 46px; }
|
|
}
|