/* shared/ui.css — Tema visual común de Tools_Music
* Extraído de bateria.html: tema oscuro, tipografías (Bebas Neue + Space Mono),
* botones y sliders. Importa las fuentes y los iconos Tabler desde los
* de cada herramienta:
*
*
*/
:root {
--tm-bg: #0a0a0a;
--tm-panel: #111;
--tm-panel-2: #1a1a1a;
--tm-accent: #e74c3c;
--tm-accent-2: #3498db;
--tm-ok: #27ae60;
--tm-warn: #f1c40f;
--tm-text: #ddd;
--tm-muted: #555;
--tm-color-white: #fff;
--tm-color-black: #000;
--tm-overlay-02: rgba(255,255,255,0.02);
--tm-overlay-04: rgba(255,255,255,0.04);
--tm-overlay-05: rgba(255,255,255,0.05);
--tm-overlay-06: rgba(255,255,255,0.06);
--tm-overlay-07: rgba(255,255,255,0.07);
--tm-overlay-08: rgba(255,255,255,0.08);
--tm-overlay-10: rgba(255,255,255,0.1);
--tm-overlay-12: rgba(255,255,255,0.12);
--tm-overlay-15: rgba(255,255,255,0.15);
--tm-overlay-18: rgba(255,255,255,0.18);
--tm-overlay-20: rgba(255,255,255,0.2);
--tm-overlay-25: rgba(255,255,255,0.25);
--tm-overlay-35: rgba(255,255,255,0.35);
--tm-overlay-40: rgba(255,255,255,0.4);
--tm-overlay-50: rgba(255,255,255,0.5);
--tm-overlay-60: rgba(255,255,255,0.6);
--tm-overlay-70: rgba(255,255,255,0.7);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--tm-bg);
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
padding: 24px 12px;
font-family: 'Space Mono', monospace;
color: var(--tm-text);
}
.tm-root {
background: var(--tm-panel);
border-radius: 16px;
padding: 20px;
width: 100%;
max-width: 780px;
}
.tm-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.tm-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 28px;
letter-spacing: 6px;
color: #fff;
}
.tm-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-btn {
background: var(--tm-overlay-07);
border: 0.5px solid var(--tm-overlay-18);
border-radius: 8px;
color: var(--tm-text);
font-family: 'Space Mono', monospace;
font-size: 11px;
padding: 6px 14px;
cursor: pointer;
letter-spacing: 1px;
transition: background 0.15s;
}
.tm-btn:hover { background: rgba(255,255,255,0.13); }
.tm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tm-btn.playing { background: #c0392b; border-color: var(--tm-accent); color: #fff; }
.tm-btn.accent { border-color: rgba(52,152,219,0.5); color: #85b7eb; }
.tm-btn.accent:hover { background: rgba(52,152,219,0.15); }
.tm-btn.warn { border-color: rgba(241,196,15,0.5); color: var(--tm-warn); }
.tm-btn.warn:hover { background: rgba(241,196,15,0.1); }
/* Control numérico tipo BPM con botones +/- */
.tm-stepper { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #666; }
.tm-stepper input[type=range] { width: 80px; accent-color: var(--tm-accent); }
.tm-stepper-val {
color: #fff; font-weight: 700; min-width: 32px; text-align: center;
font-size: 13px; background: rgba(231,76,60,0.12);
border: 0.5px solid rgba(231,76,60,0.35); border-radius: 5px;
padding: 3px 8px; letter-spacing: 0.5px;
}
.tm-step-btn {
background: var(--tm-overlay-06); border: 0.5px solid var(--tm-overlay-18);
border-radius: 5px; color: #bbb; font-family: 'Space Mono', monospace;
font-size: 12px; font-weight: 700; width: 22px; height: 22px; cursor: pointer;
display: flex; align-items: center; justify-content: center; padding: 0;
line-height: 1; user-select: none;
transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.tm-step-btn:hover { background: rgba(231,76,60,0.2); border-color: var(--tm-accent); color: #fff; }
.tm-step-btn:active { background: rgba(231,76,60,0.4); }
.tm-panel {
background: var(--tm-panel-2);
border-radius: 12px;
border: 0.5px solid var(--tm-overlay-08);
padding: 16px;
margin-bottom: 14px;
}
.tm-section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 16px; letter-spacing: 3px; color: #aaa; margin-bottom: 12px;
}
.tm-hint { font-size: 10px; color: #444; letter-spacing: 0.5px; }
/* --- Light Mode --- */
body.light-mode {
--tm-bg: #f4f4f9;
--tm-panel: #ffffff;
--tm-panel-2: #eeeeee;
--tm-text: #222222;
--tm-muted: #666666;
--tm-color-white: #111;
--tm-color-black: #fff;
--tm-overlay-02: rgba(0,0,0,0.02);
--tm-overlay-04: rgba(0,0,0,0.04);
--tm-overlay-05: rgba(0,0,0,0.05);
--tm-overlay-06: rgba(0,0,0,0.06);
--tm-overlay-07: rgba(0,0,0,0.07);
--tm-overlay-08: rgba(0,0,0,0.08);
--tm-overlay-10: rgba(0,0,0,0.1);
--tm-overlay-12: rgba(0,0,0,0.12);
--tm-overlay-15: rgba(0,0,0,0.15);
--tm-overlay-18: rgba(0,0,0,0.18);
--tm-overlay-20: rgba(0,0,0,0.2);
--tm-overlay-25: rgba(0,0,0,0.25);
--tm-overlay-35: rgba(0,0,0,0.35);
--tm-overlay-40: rgba(0,0,0,0.4);
--tm-overlay-50: rgba(0,0,0,0.5);
--tm-overlay-60: rgba(0,0,0,0.6);
--tm-overlay-70: rgba(0,0,0,0.7);
}
body.light-mode .tm-title { color: #111; }
body.light-mode .tm-btn {
background: rgba(0,0,0,0.05);
border-color: rgba(0,0,0,0.1);
color: #333;
}
body.light-mode .tm-btn:hover { background: rgba(0,0,0,0.1); }
body.light-mode .tm-stepper-val { color: #111; background: rgba(231,76,60,0.15); }
body.light-mode .tm-step-btn { color: #333; border-color: rgba(0,0,0,0.2); }
body.light-mode .read-box .val { color: #111; }
/* --- Global Navbar --- */
.tm-global-nav {
position: fixed;
top: 0; left: 0; right: 0;
height: 50px;
background: var(--tm-panel);
border-bottom: 1px solid var(--tm-overlay-05);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
body.light-mode .tm-global-nav { border-bottom: 1px solid rgba(0,0,0,0.1); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.tm-global-nav a {
color: var(--tm-text);
text-decoration: none;
font-family: 'Bebas Neue', sans-serif;
font-size: 20px;
letter-spacing: 2px;
display: flex;
align-items: center;
gap: 8px;
}
.tm-nav-actions { display: flex; align-items: center; gap: 10px; }
/* Ajuste al body para no solapar con la navbar fija */
body { padding-top: 74px; }
/* --- Tooltips --- */
[data-tooltip] {
position: relative;
cursor: help;
}
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: var(--tm-text);
color: var(--tm-bg);
padding: 6px 10px;
border-radius: 6px;
font-size: 10px;
white-space: nowrap;
font-family: 'Space Mono', monospace;
z-index: 9999;
pointer-events: none;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
[data-tooltip]:hover::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: var(--tm-text) transparent transparent transparent;
z-index: 9999;
pointer-events: none;
}