polar-recorder/public/css/components.css

A SignalK plugin to record boat polars based on sailing performance

/* Tarjetas genéricas */
.control-card,
body #optionsCard,
body #liveData,
body #errors{
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow);
}

/* Botonera card */
#optionsCard{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

/* Botones base */
.btn{
  appearance: none;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--text);
  font: 600 13px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .06s ease, background .2s ease,
              border-color .2s ease, box-shadow .2s ease;
}
.btn:hover{
  background: var(--hover);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 80%);
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent), transparent 40%) inset; }
.btn-ghost{ background: transparent; }

/* Aplica a tus botones existentes (fallback a falta de CSS Modules) */
.toggleFullChartBtn,
#showTableBtn,
#exportPolarBtn,
#importPolarBtn,
#newPolarBtn,
#recordPolarBtn,
#stopSaveBtn{
  appearance: none;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--text);
  font: 600 13px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .06s ease, background .2s ease,
              border-color .2s ease, box-shadow .2s ease;
  margin-top: 0;
}
.toggleFullChartBtn:hover,
#showTableBtn:hover,
#exportPolarBtn:hover,
#importPolarBtn:hover,
#newPolarBtn:hover,
#recordPolarBtn:hover,
#stopSaveBtn:hover{
  background: var(--hover);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 80%);
}

/* Live data */
#liveData{
  display: grid;
  gap: 8px;
  font: 500 13.5px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
}
#liveData span{ font-variant-numeric: tabular-nums; }
#liveData .badge{
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

/* Tabla embebida y overlay */
#tableWrapper{
  display: none;
  margin-top: 10px;
  overflow: auto;
  max-height: 100vh;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}

/* Oculto por defecto en todos los modos */
#toggleTableContainer{
  display: none;
}

#toggleTableContainer.expanded{
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 16px;
  display: flex;
  flex-direction: column;
}
#toggleTableContainer.expanded #tableWrapper{
  display: block;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Botón cerrar dentro del overlay */
#closeTableBtn{
  align-self: flex-start;
  appearance: none;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--text);
  font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
#closeTableBtn:hover{
  background: var(--hover);
  border-color: var(--accent);
}



#liveData .section-title{
  display: flex;
  align-items: center;
  gap: 8px;
  /* un poco más grandes que el body del card */
  font: 800 15.5px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 2px;
}

/* acento a la izquierda del título */
#liveData .section-title::before{
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 80%);
}

/* separador uniforme (reemplaza el inline style del <hr>) */
#liveData .section-sep{
  border: 0;
  border-top: 1px solid var(--border);
  opacity: .65;
  margin: 8px 0;
}


/* Fuente base coherente en todo el card */



#lastPolarUpdate{
  font: 500 13.5px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

#lastPolarUpdate .section-title{
  display: flex;
  align-items: center;
  gap: 8px;
  /* un poco más grandes que el body del card */
  font: 800 15.5px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 2px;
}

/* acento a la izquierda del título */
#lastPolarUpdate .section-title::before{
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 80%);
}



/* Cada fila con mismos ajustes tipográficos */
#lastPolarUpdate > div{
  font: inherit;
  color: inherit;
  font-variant-numeric: tabular-nums; /* cifras alineadas */
}

/* El título ya lo tienes, lo dejamos tal cual */

/* Negritas: solo peso, misma familia */
#lastPolarUpdate b{
  font-weight: 700;
  font-family: inherit;
}

/* Badge heredando familia (mantén tamaño si quieres más pequeño) */
#lastPolarUpdate .badge{
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
}

/* opcional: en pantallas estrechas baja un pelín el tamaño */
@media (max-width: 480px){
  #liveData .section-title{ font-size: 14.5px; }
}



/* Card de estado de grabación */
#recordingStatus{
  font: 500 13.5px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

#recordingStatus .status-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

#recordingStatus .file-row{
  margin-top: 8px;
  color: var(--muted);
}

/* “Pill” para el nombre del fichero */
.file-pill{
  display: inline-block;
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 85%);
  color: var(--text);
  font: 700 12.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Ocúltalo SIEMPRE salvo que tenga .expanded */
#toggleTableContainer:not(.expanded){
  display: none !important;
  visibility: hidden;
  opacity: 0;
}

/* Cuando está abierto */
#toggleTableContainer.expanded{
  display: flex !important;
  visibility: visible;
  opacity: 1;
}





/* Record buttons */
#recordActionsCard,
#fileActionsCard,
#selectedFileCard{
  font: 500 13.5px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

#recordActionsCard .section-title,
#fileActionsCard .section-title,
#selectedFileCard .section-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font: 800 15.5px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 2px;
  margin-bottom: 8px;
}

/* acento a la izquierda del título */
#recordActionsCard .section-title::before,
#fileActionsCard .section-title::before,
#selectedFileCard .section-title::before{
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 80%);
}



/* polar select */

/* Card: asegúrate de que el contenedor posiciona la flecha */
#selectedFileCard{ position: relative; }

/* Select moderno */
#polarFileSelect{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  display: block;
  width: 100%;
  padding: 10px 40px 10px 12px; /* espacio para la flecha a la derecha */
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--text);

  font: 600 13px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .2px;

  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .06s ease;
  box-shadow: 0 0 0 0 transparent; /* limpio por defecto */
  cursor: pointer;
}

#polarFileSelect:hover{
  background: var(--hover);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 85%);
}

#polarFileSelect:focus,
#polarFileSelect:focus-visible{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
}

#polarFileSelect:active{
  transform: translateY(1px);
}

/* Estado deshabilitado */
#polarFileSelect:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Color del menú desplegable (cuando el UA lo respeta) */
#polarFileSelect option{
  background: var(--surface);
  color: var(--text);
}

/* Flecha custom dibujada en el card (sin tocar el HTML) */
#selectedFileCard::after{
  content: "";
  position: absolute;
  pointer-events: none;
  right: 24px;
  top: 50px;              /* ajusta si cambias márgenes del título */
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  opacity: .9;
}

/* Si el select recibe foco, acentuamos la flecha */
#polarFileSelect:focus ~ .dummy,
#polarFileSelect:focus-visible ~ .dummy{} /* no hace nada, solo evita warnings */

#polarFileSelect:focus-visible + .select-arrow,
#selectedFileCard:has(#polarFileSelect:focus-visible)::after{
  border-color: var(--accent);
}

/* (Fallback si :has no está disponible en tu navegador)
   Puedes eliminar este bloque si no te preocupa Safari viejo */
@supports not (selector(:has(*))){
  #polarFileSelect:focus-visible{
    /* el anillo ya se ve; la flecha mantiene el color por defecto */
  }
}