que lo envuelve participe del flex igual que sus hermanos. */
.song-actionbar .dropdown {
flex: 1 1 0;
min-width: 0;
display: flex;
}
.song-actionbar .dropdown .btn {
width: 100%;
}
/* No lleva la clase "dropdown-toggle" de Bootstrap (que agrega una flechita
::after) — alcanza con "data-bs-toggle=dropdown" para que funcione el menú,
y el propio ícono de "⋮" ya cumple el rol visual de esa flechita. */
.song-actionbar .btn:active {
background-color: var(--sb-bg-content);
}
.song-actionbar .btn svg {
width: 1.25rem;
height: 1.25rem;
}
/* En celulares angostos, el padding por defecto de Bootstrap (0.75rem a los
lados) ya ocupa la mayor parte del espacio disponible entre 10 botones —
se achica acá para que además del min-width:0 de arriba, quede aire real
para el ícono, no sólo el mínimo indispensable. */
@media (max-width: 480px) {
.song-actionbar .btn,
.stage-bar .btn {
padding-left: 0.3rem;
padding-right: 0.3rem;
font-size: 1rem;
}
.song-actionbar .btn svg {
width: 1.1rem;
height: 1.1rem;
}
}
/* Paginación (Bootstrap ".pagination" — ver Areas/Admin/Views/Canciones/Index.cshtml):
por defecto es un solo renglón sin flex-wrap. Con "Anterior"/"Siguiente" +
hasta 7 números + "..." de cada lado, en celular se desborda del ancho de
pantalla igual que las barras de botones de arriba. row-gap (no gap: los
.page-link ya usan margin-left negativo para pegarse unos con otros
horizontalmente en la MISMA fila; con "gap" ese pegado se perdería incluso
sin wrap) da un respiro vertical sólo entre renglones cuando sí hace falta
bajar de línea. */
.pagination {
flex-wrap: wrap;
row-gap: 0.5rem;
}
/* Deja espacio abajo para que la barra fija no tape las últimas líneas de la
letra — sólo hace falta en el mismo breakpoint en el que la barra es
visible (ver "d-md-none" en Detalle.cshtml, que Bootstrap corta en 768px). */
@media (max-width: 767.98px) {
.pb-song-actionbar {
padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0));
}
}
/* ============================================================================
Modo escenario (ver wwwroot/js/stage-mode.js). Independiente del switch de
tema claro/oscuro del navbar: siempre fuerza fondo negro y oculta el
"chrome" del sitio (igual espíritu que @media print, pero en pantalla),
para aprovechar toda la pantalla y no distraer con luz de fondo clara
mientras alguien toca/canta en un lugar oscuro.
============================================================================ */
body.modo-escenario header,
body.modo-escenario footer,
body.modo-escenario .jumbotron,
body.modo-escenario .song-actionbar,
/* Antes esta barra vivía adentro del
de la canción, así que ya
quedaba oculta junto con el título al ocultar "header" de arriba. Al
sacarla del header (ver Views/Cancion/Detalle.cshtml y su comentario sobre
la barra pegajosa) quedó afuera de esa regla y quedaba visible flotando
en modo escenario — se agrega acá explícitamente. */
body.modo-escenario .barra-acciones-cancion {
display: none !important;
}
/* Con la pantalla dedicada sólo a la letra, tampoco tiene sentido mostrar la
nube de Notas, los botones Anterior/Siguiente ni el iframe de la muestra
(Sample): distraen y ocupan espacio que en modo escenario se quiere sólo
para la letra/acordes. Ver la clase "oculta-en-escenario" en Detalle.cshtml. */
body.modo-escenario .oculta-en-escenario {
display: none !important;
}
body.modo-escenario,
body.modo-escenario .medio {
background-color: #000 !important;
}
/* Texto en blanco por defecto para todo lo que quede visible dentro de
.medio (además de Cancion/Detalle.cshtml, ahora también Listas/Detalle.cshtml
usa modo escenario) — sin esto, un texto oscuro (el normal del sitio en tema
claro) quedaría ilegible sobre el fondo negro de arriba. Las reglas más
específicas de acá abajo (.song-lyrics, etc.) pisan a ésta donde hace falta
un tratamiento distinto. */
body.modo-escenario .medio {
color: #fff !important;
}
body.modo-escenario .text-muted {
color: rgba(255, 255, 255, 0.65) !important;
}
/* Views/Listas/Detalle.cshtml en modo escenario: las tarjetas de Bootstrap
(fondo claro, o el gris de tarjeta del tema oscuro) no combinan con el
negro de fondo de arriba — se hacen transparentes para que se vea el mismo
negro por detrás, con un borde apenas visible para separar cada canción. */
body.modo-escenario .list-group-item {
background-color: transparent !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
body.modo-escenario .song-lyrics {
background-color: #000 !important;
color: #fff !important;
box-shadow: none !important;
}
body.modo-escenario .chordline .chord {
background-color: #4a4a4a !important;
color: #fff !important;
}
/* Deja espacio abajo para la barra flotante de autoscroll/velocidad/salir. */
body.modo-escenario .pb-song-actionbar {
padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0));
}
.stage-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1040;
display: flex;
align-items: stretch;
background-color: rgba(20, 20, 20, 0.95);
border-top: 1px solid rgba(255, 255, 255, 0.15);
padding-left: env(safe-area-inset-left, 0);
padding-right: env(safe-area-inset-right, 0);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.stage-bar .btn {
flex: 1 1 0;
/* Mismo motivo que .song-actionbar .btn más arriba: sin esto, en un
celular angosto esta barra (position:fixed, ancho = pantalla) no puede
achicar sus botones lo suficiente y el último ("Salir", la X) queda
fuera de la pantalla — justo el botón para salir del modo escenario. */
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
font-size: 1.2rem;
font-weight: 600;
color: #fff;
background: transparent;
border: none;
border-radius: 0;
}
.stage-bar .btn:active {
background-color: rgba(255, 255, 255, 0.12);
}
.stage-bar-salir {
flex-grow: 0.6;
color: #ff8a8a !important;
}
/* ============================================================================
Tema oscuro: ajustes puntuales a componentes de Bootstrap que no se pueden
resolver sólo con las variables de arriba (usan sus propios colores fijos
por defecto). El navbar y el footer ya son oscuros en ambos temas (clases
"bg-dark"/".footer" de Bootstrap), así que no hace falta tocarlos.
============================================================================ */
:root[data-theme="dark"] {
color-scheme: dark;
}
:root[data-theme="dark"] a {
color: var(--sb-link);
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
background-color: #2b2b2b;
color: var(--sb-text-card);
border-color: #4a4a4a;
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
background-color: #2b2b2b;
color: var(--sb-text-card);
}
:root[data-theme="dark"] .form-control::placeholder {
color: #8a8a8a;
}
:root[data-theme="dark"] .form-text {
color: var(--sb-text-muted-card);
}
:root[data-theme="dark"] .table {
color: var(--sb-text-card);
border-color: var(--sb-border-card);
}
:root[data-theme="dark"] .table > :not(caption) > * > * {
background-color: transparent;
color: var(--sb-text-card);
border-bottom-color: var(--sb-border-card);
}
:root[data-theme="dark"] .list-group-item {
background-color: var(--sb-bg-card);
color: var(--sb-text-card);
border-color: var(--sb-border-card);
}
:root[data-theme="dark"] .alert-info {
background-color: #1f3a4a;
border-color: #2c5570;
color: #cfe8f7;
}
:root[data-theme="dark"] .page-link {
background-color: var(--sb-bg-card);
border-color: var(--sb-border-card);
color: var(--sb-link);
}
:root[data-theme="dark"] .page-item.active .page-link {
background-color: var(--sb-link);
border-color: var(--sb-link);
color: #121212;
}
:root[data-theme="dark"] .page-item.disabled .page-link {
background-color: var(--sb-bg-content);
color: var(--sb-text-muted-card);
}
:root[data-theme="dark"] .text-muted {
color: var(--sb-text-muted-card) !important;
}
:root[data-theme="dark"] .card {
background-color: var(--sb-bg-card);
color: var(--sb-text-card);
border-color: var(--sb-border-card);
}
:root[data-theme="dark"] .dropdown-menu {
background-color: var(--sb-bg-card);
color: var(--sb-text-card);
border-color: var(--sb-border-card);
}
:root[data-theme="dark"] .dropdown-item {
color: var(--sb-text-card);
}
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
background-color: var(--sb-bg-content);
color: var(--sb-text-card);
}
:root[data-theme="dark"] .dropdown-header {
color: var(--sb-text-muted-card);
}
/* Menú de usuario del navbar (ver _Layout.cshtml): el correo/nombre puede ser
largo, así que se corta con "..." en vez de agrandar el menú de más. */
#userMenuButton + .dropdown-menu .dropdown-header {
max-width: 260px;
}
/*
* Impresión (portado del espíritu de SongBook/Content/Print.css del proyecto
* original, que ocultaba el sidebar/header/footer de AdminLTE al imprimir).
* Bootstrap ya trae utilidades ".d-print-none" que se usan en las vistas para
* ocultar botones puntuales (transponer, editar, etc.); acá se oculta el
* "chrome" del sitio entero (menú, pie de página, fondo gris) para que al
* imprimir o "Guardar como PDF" desde el navegador sólo salga el contenido.
*/
@media print {
/* "body > header/footer" (no sólo "header"/"footer" a secas): Detalle.cshtml
tiene su propio anidado adentro de para el título de
la canción (ver Views/Cancion/Detalle.cshtml) — con el selector de tag
suelto, ese header también quedaba oculto al imprimir y desaparecía el
título junto con el navbar real. Acotarlo a los hijos directos de
(el navbar y el footer del sitio, ver _Layout.cshtml) deja el header de
la canción intacto. */
body > header,
body > footer,
.jumbotron {
display: none !important;
}
/* Al imprimir siempre se ve en "claro" — sin importar el tema oscuro que
esté activo en pantalla, papel/PDF con fondo blanco y texto negro. */
body, .medio, .song-lyrics {
background: #fff !important;
color: #000 !important;
}
.medio {
padding: 0 !important;
}
.song-lyrics {
box-shadow: none !important;
padding: 0 !important;
}
}