/* ========================================================================= * ZZZS Čakalne dobe — vir: eZdravje * Slog prevzame barve in pisavo iz teme: najprej Blocksy, nato Astra, nato fallback. * ====================================================================== */ .zzcd { /* Naglasna barva teme */ --zzcd-accent: var(--theme-palette-color-1, var(--ast-global-color-0, #2b6cb0)); --zzcd-accent-2: var(--theme-palette-color-2, var(--ast-global-color-1, #234e87)); /* Besedilo / naslovi / pridušeno */ --zzcd-heading: var(--theme-headings-color, var(--theme-palette-color-3, var(--ast-global-color-2, #1a202c))); --zzcd-text: var(--theme-text-color, var(--theme-palette-color-4, var(--ast-global-color-3, #4a5568))); --zzcd-muted: var(--theme-palette-color-5, #8a94a6); /* Ozadja / obrobe */ --zzcd-card-bg: var(--theme-palette-color-8, #ffffff); --zzcd-soft-bg: var(--theme-palette-color-7, #f6f8fb); --zzcd-border: var(--theme-border-color, var(--theme-palette-color-6, #e3e8ef)); /* Barve stopenj nujnosti */ --zzcd-redno: var(--zzcd-accent); --zzcd-hitro: #e0a100; --zzcd-zeloHitro: #d64545; --zzcd-radius: 14px; --zzcd-font: var(--theme-font-family, inherit); font-family: var(--zzcd-font); color: var(--zzcd-text); line-height: 1.45; } .zzcd * { box-sizing: border-box; } .zzcd-title { color: var(--zzcd-heading); font-size: 1.25em; margin: 0 0 .85em; } /* ---------------- Kartice ---------------- */ .zzcd-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } .zzcd-card { background: var(--zzcd-card-bg); border: 1px solid var(--zzcd-border); border-radius: var(--zzcd-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: box-shadow .2s ease, transform .2s ease; } .zzcd-card:hover { box-shadow: 0 10px 26px rgba(16, 24, 40, .10); transform: translateY(-2px); } .zzcd-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .65rem; padding: .95rem 1.05rem .85rem; background: var(--zzcd-head-bg, transparent); } .zzcd-card__headmain { min-width: 0; } .zzcd-card__provider { display: block; font-size: .68em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--zzcd-accent); margin-bottom: .25rem; } .zzcd-card__title { font-weight: 600; color: var(--zzcd-heading); font-size: 1.0em; line-height: 1.3; } .zzcd-table-cap { caption-side: top; text-align: left; padding: .7rem .85rem; font-weight: 700; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: var(--zzcd-accent); background: var(--zzcd-soft-bg); border-bottom: 1px solid var(--zzcd-border); } /* Info ikona (gumb) + popup */ .zzcd-info { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; margin-left: .35em; padding: 0; vertical-align: -.15em; color: var(--zzcd-muted); background: none; border: 0; cursor: pointer; flex: 0 0 auto; -webkit-appearance: none; appearance: none; } .zzcd-info svg { width: 100%; height: 100%; } .zzcd-info:hover, .zzcd-info:focus, .zzcd-info[aria-expanded="true"] { color: var(--zzcd-accent); outline: none; } .zzcd-td-name .zzcd-info { margin-left: .4em; } /* Popup je pripet na , zato uporablja nevtralne barve (lahko je izven .zzcd) */ .zzcd-pop { position: absolute; z-index: 99999; display: none; width: min(300px, 86vw); padding: .7rem .85rem; background: #ffffff; color: #2b2f36; border: 1px solid rgba(0, 0, 0, .14); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .18); font-size: 13px; line-height: 1.5; font-weight: 400; text-align: left; text-transform: none; letter-spacing: 0; } .zzcd-pop.is-open { display: block; } .zzcd-chip { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72em; font-weight: 600; letter-spacing: .02em; color: var(--zzcd-accent); background: var(--zzcd-soft-bg); border: 1px solid var(--zzcd-border); padding: .25rem .45rem; border-radius: 7px; white-space: nowrap; } .zzcd-chip--sm { font-size: .76em; padding: .1rem .4rem; vertical-align: middle; } /* Segmentirane stopnje nujnosti */ .zzcd-stats { display: flex; border-top: 1px solid var(--zzcd-border); } .zzcd-stat { flex: 1; text-align: center; padding: .7rem .5rem .8rem; border-top: 3px solid var(--zc, var(--zzcd-muted)); } .zzcd-stat + .zzcd-stat { border-left: 1px solid var(--zzcd-border); } .zzcd-stat--redno { --zc: var(--zzcd-redno); --zcl: var(--zzcd-accent-2); } .zzcd-stat--hitro { --zc: var(--zzcd-hitro); --zcl: #9a6f00; } .zzcd-stat--zeloHitro { --zc: var(--zzcd-zeloHitro); --zcl: #b23535; } .zzcd-stat__label { display: block; font-size: .66em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--zcl, var(--zzcd-muted)); margin-bottom: .35rem; } .zzcd-stat__val { display: block; font-weight: 700; color: var(--zzcd-heading); font-size: .98em; } .zzcd-stat__month { display: block; } .zzcd-stat__year { display: block; font-weight: 600; opacity: .75; font-size: .92em; margin-top: .1rem; } .zzcd-stat__val--empty { color: var(--zzcd-muted); font-weight: 500; } .zzcd-card__foot { margin-top: auto; display: flex; align-items: center; gap: .4rem; padding: .55rem 1.05rem; border-top: 1px solid var(--zzcd-border); background: var(--zzcd-soft-bg); font-size: .74em; color: var(--zzcd-muted); } /* Stat wrapping */ .zzcd-stat { min-width: 0; } .zzcd-stat__val { overflow-wrap: break-word; word-break: normal; } /* Oznaka: okvirni / prosti termin */ .zzcd-stat__type { display: block; margin-top: .35rem; font-size: .64em; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .zzcd-stat__type.is-approx { color: var(--zzcd-hitro); } .zzcd-stat__type.is-exact { color: var(--zzcd-redno); } .zzcd-cell-date .zzcd-stat__type { margin-top: .2rem; font-size: .72em; } .zzcd-stat__type .zzcd-info { width: 1.25em; height: 1.25em; margin-left: .25em; vertical-align: -.2em; color: inherit; } .zzcd-clock { width: .95em; height: .95em; flex: 0 0 auto; opacity: .8; } /* ---------------- Tabela ---------------- */ .zzcd-table-wrap { overflow-x: auto; } .zzcd-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--zzcd-card-bg); border: 1px solid var(--zzcd-border); border-radius: var(--zzcd-radius); overflow: hidden; font-size: .95em; } .zzcd-table th, .zzcd-table td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--zzcd-border); vertical-align: top; } .zzcd-table thead th { color: var(--zzcd-heading); font-weight: 600; font-size: .8em; letter-spacing: .04em; text-transform: uppercase; background: var(--zzcd-soft-bg); border-bottom: 2px solid var(--zzcd-border); white-space: nowrap; } .zzcd-table tbody tr:last-child td { border-bottom: 0; } .zzcd-table tbody tr:hover { background: var(--zzcd-soft-bg); } .zzcd-th--redno { box-shadow: inset 0 -2px 0 var(--zzcd-redno); } .zzcd-th--hitro { box-shadow: inset 0 -2px 0 var(--zzcd-hitro); } .zzcd-th--zeloHitro { box-shadow: inset 0 -2px 0 var(--zzcd-zeloHitro); } .zzcd-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .4em; vertical-align: baseline; background: var(--zzcd-muted); } .zzcd-dot--redno { background: var(--zzcd-redno); } .zzcd-dot--hitro { background: var(--zzcd-hitro); } .zzcd-dot--zeloHitro { background: var(--zzcd-zeloHitro); } .zzcd-td-name { font-weight: 600; color: var(--zzcd-heading); } .zzcd-cell-date { font-weight: 600; color: var(--zzcd-heading); } .zzcd-cell-empty { color: var(--zzcd-muted); } .zzcd-upd { display: block; font-weight: 400; font-size: .8em; color: var(--zzcd-muted); margin-top: .25rem; } /* ---------------- Skupno ---------------- */ .zzcd-source { margin: .9rem 0 0; font-size: .76em; color: var(--zzcd-muted); } .zzcd-source a { color: var(--zzcd-accent); } .zzcd-source a:hover { color: var(--zzcd-accent-2); } .zzcd-empty { padding: 1rem; border: 1px dashed var(--zzcd-border); border-radius: var(--zzcd-radius); background: var(--zzcd-soft-bg); color: var(--zzcd-muted); } @media (max-width: 380px) { .zzcd-grid { grid-template-columns: 1fr; } }