/*
 * COPIA DESTE TEMPLATE -- default
 *
 * Este arquivo vale so para este template. Editar aqui NAO afeta os outros.
 * A base fica em assets/css/events.css; quando um template nao tem a sua copia,
 * e a base que carrega (e por isso que um template novo funciona sem copiar nada).
 *
 * Medidas em px e tamanho de fonte em em -- nunca rem: a raiz e do tema e varios
 * usam html { font-size: 62.5% }, o que faria toda medida sair 37% menor.
 */

/*
 * Horarios de Eventos -- widget dos temas que nao trazem um bloco proprio.
 *
 * Mesma regra do resto: medidas em px e tamanho de fonte em em, NUNCA rem. A raiz e do
 * tema e varios usam html { font-size: 62.5% }, o que faria toda medida sair 37% menor.
 *
 * A paleta e' um veu por cima do fundo do tema, nao cor chapada: os dezoito pintam com
 * imagem de fundo e transparencia, e um painel solido aqui apareceria como um retangulo
 * colado por cima do desenho deles.
 */

.ne-events {
	--ev-line:  rgba(0, 0, 0, .14);
	--ev-panel: rgba(0, 0, 0, .035);
	--ev-mute:  rgba(0, 0, 0, .55);
	--ev-accent: var(--ColorTemplate, #c0a062);

	margin: 0 0 16px;
	padding: 0;
	border: 1px solid var(--ev-line);
	border-radius: 4px;
	background: var(--ev-panel);
	color: inherit;
	overflow: hidden;
}

.ne-events-head {
	padding: 8px 12px;
	font-size: 1.05em;
	font-weight: bold;
	border-bottom: 1px solid var(--ev-line);
	background: rgba(0, 0, 0, .04);
}

.ne-events-head i { margin-right: 6px; color: var(--ev-accent); }

.ne-events-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Grade de duas colunas: nome + proximo horario em cima, rotulo + contador embaixo.
   Grid e nao float porque o contador cresce e encolhe (de "59s" a "6d 12h 30m") e com
   float ele empurrava o nome do evento para a linha de baixo. */
.ne-events-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 8px;
	padding: 8px 12px;
	border-top: 1px solid var(--ev-line);
	align-items: baseline;
}

.ne-events-item:first-child { border-top: 0; }

.ne-ev-name { font-weight: bold; }
.ne-ev-next { text-align: right; white-space: nowrap; }

.ne-ev-label,
.ne-ev-left {
	font-size: .9em;
	color: var(--ev-mute);
}

.ne-ev-left { text-align: right; white-space: nowrap; }

.ne-ev-open,
.ne-ev-running {
	font-weight: bold;
	color: var(--ev-accent);
}

/* Tema escuro: o veu vira claro, senao some no proprio fundo. A classe vem de
   eventosWidget(), que usa a mesma classificacao do market (temaDoMarket()). */
.ne-events.escuro {
	--ev-line:  rgba(255, 255, 255, .14);
	--ev-panel: rgba(255, 255, 255, .04);
	--ev-mute:  rgba(255, 255, 255, .55);
}

.ne-events.escuro .ne-events-head { background: rgba(255, 255, 255, .05); }