Corillo CSS

01 — Tokens

Design Tokens

Variables CSS globales con el prefijo --crl-*. Aplicar en cualquier elemento.

02 — Typography

Tipografía

Tres familias de fuentes: Display (Bebas Neue), Mono (Space Mono), Body (DM Sans).

<p class="crl-display crl-2xl">Título grande</p>
<p class="crl-mono crl-xs crl-upper">Etiqueta mono</p>
<p class="crl-sm" style="color:var(--crl-muted)">Descripción muted</p>

03 — Colors

Paleta Corillo

Colores base de la plataforma: cyan, amber y rojo.

<span class="crl-text-accent">cian</span>
<span class="crl-text-live">oro</span>
<span class="crl-text-confirm">verde</span>
<span class="crl-text-hot">rojo PR</span>

04 — Buttons

Botones

Variantes de color y tamaño. Base: .btn

<button class="btn btn-primary">Primary</button>
<button class="btn btn-gold">Gold</button>
<button class="btn btn-hot">Hot</button>
<button class="btn btn-sm btn-primary">Pequeño</button>
<button class="btn btn-icon btn-outline-accent"><i class="fa-solid fa-bell"></i></button>

05 — Badges

Badges

Etiquetas pequeñas. Base: .badge

<span class="badge badge-live">
  <i class="fa-solid fa-circle-dot"></i> En Vivo
</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-hot">Hot</span>

06 — Pills

Pills

Cápsulas de estado, más compactas que badges. Base: .pill

<span class="pill pill-live">
  <span class="dot dot-sm on"></span> En Vivo
</span>
<span class="pill pill-accent">Streaming</span>

07 — Cards

Cards

Contenedores con borde sutil. Base: .card

<div class="card card-accent">
  <p class="crl-mono crl-xs crl-text-accent crl-upper">Título</p>
  <p class="crl-sm">Contenido</p>
</div>

08 — Dots

Dots

Indicadores de estado pequeños. .dot.on pulsa en oro.

<span class="dot"></span>          // offline (muted)
<span class="dot on"></span>       // en vivo (gold, pulsa)
<span class="dot dot-sm on"></span>  // pequeño
<span class="dot dot-accent"></span> // cian
<span class="dot dot-hot"></span>    // rojo

09 — Avatars

Avatares

Letras o imágenes circulares. Rings de color disponibles.

<span class="ava ava-lg ava-live"
      style="background:linear-gradient(135deg,#e8c84a,#c09020)">K</span>

<span class="ava ava-xl" style="background:...">
  <img src="foto.jpg" alt="Avatar">
</span>

10 — Inputs

Inputs

Campos de texto. Base: .input

<input class="input" placeholder="Texto...">
<input class="input input-mono" placeholder="stream_key...">
<input class="input input-sm" placeholder="Compacto...">

11 — Animations

Animaciones

Clases utilitarias para animaciones. Respeta prefers-reduced-motion.

<span class="dot on crl-animate-blink"></span>
<i class="fa-solid fa-circle-notch crl-animate-spin"></i>
<div class="crl-animate-fade-up">aparece desde abajo</div>

12 — Layout

Layout Utilities

Helpers de flexbox y espaciado.

<div class="crl-flex crl-items-center crl-justify-between">
  <div class="crl-flex crl-items-center crl-gap-sm">...</div>
  <span class="pill pill-live">En Vivo</span>
</div>

/* Clases disponibles */
.crl-flex          → display: flex
.crl-flex-col      → flex-direction: column
.crl-items-center  → align-items: center
.crl-justify-between → justify-content: space-between
.crl-justify-center  → justify-content: center
.crl-wrap          → flex-wrap: wrap
.crl-gap-xs/sm/md/lg → gap (4/8/16/24px)
.crl-w-full        → width: 100%
.crl-min-w-0       → min-width: 0

13 — Code

Code Block

Bloques de código con tokens de color. .crl-code

/* Tokens de color */
.tok-tag   → --crl-accent (cian)
.tok-attr  → --crl-live (oro)
.tok-str   → --crl-confirm (verde)
.tok-com   → --crl-muted (gris)

<pre class="crl-code">
  <span class="tok-tag">cyan</span>
  <span class="tok-attr">gold</span>
  <span class="tok-str">green</span>
</pre>

14 — Dividers

Divisores

Separadores de contenido.

<hr class="crl-divider">
<hr class="crl-divider-fade">
<p class="crl-section-label">Sección</p> // línea auto via ::after

Demo — Componente Real

Stream Card

Card reusable para canales en vivo, VODs destacados o galerías de homepage. Combina media, overlays, metadata y acciones sin depender de CSS inline.

<a class="crl-stream-card">
  <div class="crl-stream-card-media">
    <img src="/thumb.jpg" alt="">
    <div class="crl-stream-card-top">
      <span class="badge badge-live">Live</span>
      <span class="badge badge-dim">12</span>
    </div>
  </div>
  <div class="crl-stream-card-body">
    <div class="crl-stream-card-head">...</div>
    <div class="crl-stream-card-tags">...</div>
    <div class="crl-stream-card-actions">...</div>
  </div>
</a>

// opcional: .is-featured para destacar la card

Componente

Page Header

Header sticky reutilizable para páginas internas con título, tag y acciones.

Componente

Filter Panel

Panel para filtros activos, chips y contadores. Pensado para multiplayer, listings y dashboards.

Layout

Gallery Layouts

Grid adaptable para colecciones de streams, cards o media. Soporta modos equal, focus y col.

Estado

Empty Hero

Versión más expresiva del empty state para páginas principales.

Componente

Stat Grid

Grid compacto para métricas rápidas en dashboards, player panels o paneles internos.

Componente

Player Shell

Base estructural del player: nav sticky, layout principal, video shell, panel overlay, stats y chat panel.

Componente

Player Rail

Lista lateral o inferior para enlaces del canal y bloques compactos como "Otros en vivo".

Componente

Player VODs

Carrusel horizontal para las últimas transmisiones del canal, con soporte para hover preview y versión responsive en grid.

15 — Form Group

Form Group

Campos con label, hint y estados de validación. Añade has-error · has-success · has-warning al .crl-form-group.

/* Estado de error */
<div class="crl-form-group has-error">
  <label class="crl-label">Stream key</label>
  <div class="crl-input-wrap">
    <input class="crl-input crl-input-mono" type="text">
    <button class="crl-input-action"><i class="fa-solid fa-eye"></i></button>
  </div>
  <span class="crl-hint crl-error">Formato inválido</span>
</div>

/* Otros estados: has-success · has-warning */
/* Hints:        .crl-success · .crl-warning */

16 — Table

Tablas

Contenedor scrolleable para datos tabulares. Base: .crl-table-wrap > .crl-table

<div class="crl-table-wrap">
  <table class="crl-table">
    <thead><tr>
      <th>Canal</th>
      <th class="crl-table-num">Viewers</th>  // alinea derecha
    </tr></thead>
    <tbody>
      <tr><td>KATATONIA</td><td class="crl-table-num">24</td></tr>
    </tbody>
  </table>
</div>

17 — Tabs

Tabs

Navegación por pestañas. Base: .crl-tabs > .crl-tab[data-tab]

<div class="crl-tabs">
  <button class="crl-tab active" data-tab="perfil">Perfil</button>
  <button class="crl-tab" data-tab="vods">VODs</button>
</div>
<div class="crl-tab-panels">
  <div class="crl-tab-panel active" data-panel="perfil">...</div>
  <div class="crl-tab-panel" data-panel="vods">...</div>
</div>

// JS — activar tab
tabs.forEach(t => t.addEventListener('click', () => {
  tabs.forEach(x => x.classList.remove('active'));
  panels.forEach(p => p.classList.remove('active'));
  t.classList.add('active');
  container.querySelector(`[data-panel="${t.dataset.tab}"]`).classList.add('active');
}));

18 — Accordion

Accordion

Collapse animado vía grid-template-rows: 0fr → 1fr. Requiere <div> wrapper dentro del content.

<div class="crl-accordion">
  <div class="crl-accordion-item open">  // .open = abierto
    <button class="crl-accordion-trigger">
      <span>Pregunta</span>
      <i class="fa-solid fa-chevron-down crl-accordion-icon"></i>
    </button>
    <div class="crl-accordion-content">
      <div>Respuesta aquí</div>  // wrapper requerido
    </div>
  </div>
</div>

19 — Select

Select

Dropdown nativo estilizado. Flecha SVG inline — no depende de Font Awesome. Tamaño .crl-select-sm disponible.

<div class="crl-select-wrap">
  <select class="crl-select">
    <option>Opción A</option>
    <option>Opción B</option>
  </select>
</div>

// Tamaño compacto
<select class="crl-select crl-select-sm">...</select>

20 — KPI Card

KPI Cards

Cards de métricas con delta de tendencia. .crl-kpi-delta.up verde · .down rojo · .flat muted.

<div class="crl-kpi-grid">
  <div class="crl-kpi">
    <p class="crl-kpi-label">Viewers promedio</p>
    <p class="crl-kpi-value">18</p>
    <p class="crl-kpi-delta up">+33%</p>
    <p class="crl-kpi-sub">vs semana pasada</p>
  </div>
</div>

// Delta: .up (verde) · .down (rojo) · .flat (muted)

Roadmap

Lo que viene

Corillo CSS crece con la plataforma. Lo que está listo, lo que viene y lo que se está pensando.