/* * postovy_client — vlastný skin (overlay nad Elastic). * * Dedičnosť: `meta.json` má "extends": "elastic". `rcmail_output_html::load_skin()` * registruje cesty ['skins/postovy_client', 'skins/elastic'] — čo máme my, vyhrá. * Zdedená `layout.html` linkuje `/styles/styles.css`; keďže náš existuje, vyhrá on, * takže Elastic-ove štýly načítavame sami cez @import nižšie. * * @import MUSÍ zostať prvým pravidlom v súbore. * * ⚠️ Z Elastic (CC BY-SA 3.0) nekopírujeme žiaden CSS/LESS — iba referencujeme * cez @import a prepisujeme cez vlastné selektory. Viď README.md. * * Štruktúra súboru: * 1) @import Elastic * 2) Dizajnové tokeny (z prototypu, light + dark) * 3) Prihlasovacia obrazovka (PK-0001 viditeľná zmena) * 4) Vertikálny rez: zoznam správ, kontextové menu, skratky (PK-0002) */ @import url("../../elastic/styles/styles.min.css"); /* ═══════════════════════════════════════════════════════════════════════════ * 2) DIZAJNOVÉ TOKENY — pôvodné dielo z prototypu (docs/prototype/tokens.css). * Žiadne hodnoty neprevzaté z Elastic LESS. Light = default, dark cez triedu * `dark-mode` na (konvencia Elastic) + fallback na prefers-color-scheme. * ═══════════════════════════════════════════════════════════════════════════ */ :root { --pk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --pk-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; --pk-ink: #1f2330; --pk-ink-2: #585f6e; --pk-ink-3: #9096a3; --pk-app: #ffffff; --pk-side: #f7f8fb; --pk-hover: #eef0f5; --pk-chip: #eef0f5; --pk-desk: #c9ccd6; --pk-line: #ecedf1; --pk-line-2: #e0e2e8; --pk-sel: #2f6bff; --pk-sel-bg: #e9f0ff; --pk-sel-d: #255ad6; --pk-on-accent: #ffffff; --pk-grad: linear-gradient(135deg, #3f6dff 0%, #7c3aed 100%); --pk-purple-bg: #efe8fd; --pk-purple-fg: #7c3aed; --pk-purple-dot: #a855f7; --pk-blue-bg: #e6effe; --pk-blue-fg: #2563eb; --pk-blue-dot: #3b82f6; --pk-green-bg: #e2f5ea; --pk-green-fg: #0f8a4d; --pk-green-dot: #22a565; --pk-red-bg: #fdeaea; --pk-red-fg: #d83b3b; --pk-red-dot: #ef4444; --pk-amber: #f5a623; --pk-sh-sm: 0 1px 2px rgba(30,35,55,.08); --pk-sh-md: 0 6px 20px rgba(30,35,55,.12); --pk-sh-lg: 0 22px 55px rgba(24,28,50,.28); --pk-r-sm: 7px; --pk-r-md: 10px; --pk-r-lg: 14px; --pk-r-pill: 999px; --pk-s-1: 4px; --pk-s-2: 8px; --pk-s-3: 12px; --pk-s-4: 16px; --pk-s-5: 20px; --pk-s-6: 24px; --pk-s-7: 32px; --pk-s-8: 40px; } :root.dark-mode { --pk-ink: #e7e9f0; --pk-ink-2: #a9b0c0; --pk-ink-3: #737b8d; --pk-app: #1a1d26; --pk-side: #14161d; --pk-hover: #242834; --pk-chip: #242834; --pk-desk: #0c0d12; --pk-line: #262a36; --pk-line-2: #333a48; --pk-sel: #5b86ff; --pk-sel-bg: #1d2740; --pk-sel-d: #9db8ff; --pk-grad: linear-gradient(135deg, #4f77ff 0%, #8b5cf6 100%); --pk-purple-bg: #2a2140; --pk-purple-fg: #c4a9ff; --pk-blue-bg: #16233f; --pk-blue-fg: #8fb4ff; --pk-green-bg: #15291f; --pk-green-fg: #63d29a; --pk-red-bg: #331a1c; --pk-red-fg: #ff8f8f; --pk-sh-sm: 0 1px 2px rgba(0,0,0,.4); --pk-sh-md: 0 6px 20px rgba(0,0,0,.5); --pk-sh-lg: 0 22px 55px rgba(0,0,0,.65); } @media (prefers-color-scheme: dark) { :root:not(.light-mode):not(.dark-mode) { --pk-ink:#e7e9f0; --pk-ink-2:#a9b0c0; --pk-ink-3:#737b8d; --pk-app:#1a1d26; --pk-side:#14161d; --pk-hover:#242834; --pk-chip:#242834; --pk-line:#262a36; --pk-line-2:#333a48; --pk-sel:#5b86ff; --pk-sel-bg:#1d2740; --pk-sel-d:#9db8ff; --pk-grad:linear-gradient(135deg,#4f77ff 0%,#8b5cf6 100%); } } /* ═══════════════════════════════════════════════════════════════════════════ * 3) PRIHLASOVACIA OBRAZOVKA — karta podľa prototypu. * DOM (overené): #layout-content > form#login-form.pk-login-card > * .pk-brand + [loginform tabuľka td.title/td.input] + button#rcmloginsubmit * + #login-footer. Šablónu dodáva náš skin (templates/login.html). * Marker skinu "skin postovy_client" ostáva v komentári nižšie (PK-0001). * ═══════════════════════════════════════════════════════════════════════════ */ /* skin postovy_client — prihlasovacia obrazovka */ body.task-login { background: var(--pk-grad); } body.task-login #layout-content { display: flex; align-items: center; justify-content: center; padding: 24px; background: transparent; } /* --- karta --- */ .pk-login-card { width: 100%; max-width: 400px; background: var(--pk-app); border-radius: 18px; box-shadow: var(--pk-sh-lg); padding: 38px 34px 30px; } /* --- značka --- */ .pk-login-card .pk-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; text-align: center; } .pk-login-card .pk-mark { width: 58px; height: 58px; border-radius: 16px; background: var(--pk-grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--pk-sh-md); } .pk-login-card .pk-wordmark { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--pk-ink); } .pk-login-card .pk-sub { font-size: 13px; color: var(--pk-ink-3); margin-top: -6px; } /* --- polia (loginform je tabuľka; rozbijeme ju na stĺpec) --- */ .pk-login-card table, .pk-login-card tbody, .pk-login-card tr { display: block; width: 100%; } .pk-login-card td.title { display: block; padding: 0 0 5px; font-size: 11.5px; font-weight: 700; color: var(--pk-ink-3); letter-spacing: .01em; } .pk-login-card td.input { display: block; margin-bottom: 14px; padding: 0; } .pk-login-card input.form-control, .pk-login-card input[type="text"], .pk-login-card input[type="password"] { width: 100%; height: 44px; padding: 0 13px; background: var(--pk-side); border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-md); color: var(--pk-ink); font-size: 14px; transition: border-color .12s, background .12s; } .pk-login-card input.form-control:focus { border-color: var(--pk-sel); background: var(--pk-app); outline: none; } /* --- tlačidlo Prihlásiť --- */ .pk-login-card p.formbuttons { margin: 6px 0 0; } .pk-login-card button#rcmloginsubmit, .pk-login-card .formbuttons button.mainaction { width: 100%; height: 44px; border: 0; border-radius: var(--pk-r-md); background: var(--pk-grad); color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: filter .12s; } .pk-login-card button#rcmloginsubmit:hover { filter: brightness(1.06); } /* --- oko na hesle (prepínač zobrazenia) --- */ .pk-login-card td.input.pk-pw-wrap { position: relative; } .pk-login-card .pk-pw-wrap input { padding-right: 44px; } .pk-login-card .pk-pw-eye { position: absolute; top: 0; right: 6px; height: 44px; width: 34px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; color: var(--pk-ink-3); padding: 0; } .pk-login-card .pk-pw-eye:hover { color: var(--pk-sel); } /* --- pätička --- */ .pk-login-card #login-footer { margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--pk-ink-3); } .pk-login-card #login-footer a { color: var(--pk-sel); } /* --- prípadné chybové hlásenie nad kartou --- */ body.task-login .voice { position: absolute; } /* ═══════════════════════════════════════════════════════════════════════════ * 4) VERTIKÁLNY REZ (PK-0002) — zoznam správ. * Aditívne prepisy overených Elastic selektorov (skins/elastic/styles/ * widgets/lists.less: .messagelist td, td.subject, tr.unread, tr.selected…). * NEKOPÍRUJEME Elastic LESS — iba prepisujeme vypočítané selektory, scoped * pod body.task-mail, cez naše tokeny. Layout mechaniku Elastic nechávame. * ═══════════════════════════════════════════════════════════════════════════ */ body.task-mail .messagelist { font-family: var(--pk-font); } body.task-mail .messagelist td { border-bottom: 1px solid var(--pk-line); } body.task-mail .messagelist tr.message { transition: background-color .1s ease; } body.task-mail .messagelist tr.message:hover td { background-color: var(--pk-hover); } /* --- RIADOK ako grid: [avatar] [odosielateľ · dátum] / [predmet] ---------- */ body.task-mail .messagelist td.subject { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "avatar from date" "avatar subj subj"; align-items: center; column-gap: 11px; row-gap: 2px; padding: 9px 14px 9px 12px; height: auto; } body.task-mail .messagelist td.subject .pk-avatar { grid-area: avatar; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; align-self: start; margin-top: 1px; } body.task-mail .messagelist td.subject span.fromto { grid-area: from; min-width: 0; /* PREČÍTANÁ (default): normálna hrúbka, jemne stlmená */ font-size: 14px; color: var(--pk-ink-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.task-mail .messagelist td.subject span.date { grid-area: date; font-size: 12px; color: var(--pk-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } body.task-mail .messagelist td.subject span.subject { grid-area: subj; min-width: 0; /* PREČÍTANÁ: stlmený predmet, normálna hrúbka */ font-size: 13.5px; color: var(--pk-ink-3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.task-mail .messagelist td.subject span.size { display: none; } /* NEPREČÍTANÁ: výrazne tučnejšie + tmavšie + modrý dátum + modrá bodka vľavo. `.unroot` = ZBALENÝ koreň vlákna, ktorý je sám prečítaný, ale vnútri má neprečítané odpovede (Roundcube app.js set_unread_children) — konverzácia sa tak označí ako neprečítaná vždy, keď do nej pribudne nová správa. */ body.task-mail .messagelist tr.unread td.subject span.fromto, body.task-mail .messagelist tr.unroot td.subject span.fromto { font-weight: 800; color: var(--pk-ink); } body.task-mail .messagelist tr.unread td.subject span.subject, body.task-mail .messagelist tr.unroot td.subject span.subject { font-weight: 700; color: var(--pk-ink); } body.task-mail .messagelist tr.unread td.subject span.date, body.task-mail .messagelist tr.unroot td.subject span.date { color: var(--pk-sel); font-weight: 700; } /* modrá bodka neprečítanej správy (zmizne po otvorení = odobratí triedy .unread, pri vlákne po otvorení konverzácie = odobratí triedy .unroot) */ body.task-mail .messagelist tr.unread td.subject, body.task-mail .messagelist tr.unroot td.subject { position: relative; } body.task-mail .messagelist tr.unread td.subject::before, body.task-mail .messagelist tr.unroot td.subject::before { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--pk-sel); } /* vybraná: tinta + ľavý akcent */ body.task-mail .messagelist tr.selected td { background-color: var(--pk-sel-bg); } body.task-mail .messagelist tr.selected td.subject { box-shadow: inset 3px 0 0 var(--pk-sel); } body.task-mail .messagelist tr.selected td.subject span.fromto { color: var(--pk-sel-d); } /* príznaky */ body.task-mail .messagelist tr.flagged td.subject span.fromto, body.task-mail .messagelist span.flagged::before { color: var(--pk-amber); } body.task-mail .messagelist span.attachment span { color: var(--pk-ink-3); } body.task-mail .messagelist tr.deleted td { color: var(--pk-ink-3); opacity: .6; } /* selection checkbox stĺpec — jemnejší */ body.task-mail .messagelist td.selection { padding-left: 8px; } /* --- STRÁNKOVANIE preč → nekonečný scroll (plugin JS dopĺňa ďalšie stránky) - */ body.task-mail #layout-list .pagenav.footer, body.task-mail #layout-list > .pagenav { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ * 4b) PRIEČINKY (#layout-sidebar) — rounded pill-rows, farebné počty * ═══════════════════════════════════════════════════════════════════════════ */ /* --- hlavička konta ako čip (avatar + meno) ------------------------------- */ body.task-mail #layout-sidebar > .header { gap: 10px; padding: 10px 12px; min-height: var(--topbar-h, 52px); } body.task-mail #layout-sidebar .header-title.username { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--pk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.task-mail #layout-sidebar .pk-acct-avatar { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--pk-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } body.task-mail #layout-sidebar .pk-acct-avatar.sm { width: 26px; height: 26px; font-size: 11px; } body.task-mail #layout-sidebar .pk-acct-chevron { color: var(--pk-ink-3); font-size: 11px; margin-left: 2px; } /* dropdown prepínača kont */ body.task-mail #layout-sidebar > .header { position: relative; } /* hlavička sidebaru nesmie dropdown orezať (Elastic má overflow:hidden) */ body.task-mail #layout-sidebar > .header { overflow: visible; } body.task-mail .pk-acct-menu { position: absolute; top: calc(100% - 4px); left: 10px; right: 10px; z-index: 60; background: var(--pk-app); border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-md); box-shadow: var(--pk-sh-md); padding: 6px; font-family: var(--pk-font); line-height: 1.35; /* hlavička dedí obrovský line-height — resetuj pre menu */ } /* riadok účtu v prepínači (anchor aj sekundárne z trezoru) */ body.task-mail .pk-acct-row { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 1px 0; border: 0; background: transparent; text-align: left; border-radius: var(--pk-r-sm); cursor: pointer; font: inherit; font-family: var(--pk-font); } body.task-mail .pk-acct-row:hover { background: var(--pk-hover); } body.task-mail .pk-acct-row.current { background: var(--pk-sel-bg); cursor: default; } body.task-mail .pk-acct-row .pk-acct-meta { flex: 1; min-width: 0; } body.task-mail .pk-acct-row .pk-acct-meta b { display: block; font-size: 13px; color: var(--pk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.task-mail .pk-acct-row .pk-acct-meta span { display: block; font-size: 11.5px; color: var(--pk-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.task-mail .pk-acct-row .pk-acct-check { color: var(--pk-sel-d); font-weight: 700; } body.task-mail .pk-acct-sep { height: 1px; background: var(--pk-line); margin: 6px 4px; } body.task-mail .pk-acct-add { width: 100%; display: flex; align-items: center; gap: 6px; padding: 9px 10px; border: 0; background: transparent; color: var(--pk-ink-2); font-weight: 600; font-size: 13px; border-radius: var(--pk-r-sm); cursor: pointer; text-align: left; font-family: var(--pk-font); } body.task-mail .pk-acct-add:hover { background: var(--pk-hover); color: var(--pk-ink); } /* ── Nastavenia → sekcia „Účty" (postovy_settings.js, #postovy-accounts) ────── Beží vo framovanom settings paneli, preto BEZ body.task-* scope; --pk-* tokeny sú z nášho skinu (:root) dostupné aj v tomto iframe. */ #postovy-accounts { max-width: 640px; } #postovy-accounts fieldset { border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-lg); padding: 16px 20px 18px; margin: 0 0 20px; } #postovy-accounts legend { padding: 0 8px; font-weight: 700; font-size: 14px; color: var(--pk-ink); } .pk-set-note { margin: 0 0 14px; font-size: 12.5px; color: var(--pk-ink-3); line-height: 1.45; } .pk-set-field { display: block; margin: 0 0 12px; } .pk-set-flabel { display: block; margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--pk-ink-2); } .pk-set-flabel i { font-weight: 400; color: var(--pk-ink-3); } .pk-set-field input, .pk-set-field select { display: block; width: 100%; padding: 8px 11px; border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-sm); background: var(--pk-app); color: var(--pk-ink); font: inherit; font-size: 13.5px; box-sizing: border-box; } .pk-set-field input:focus, .pk-set-field select:focus { outline: none; border-color: var(--pk-sel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-sel) 18%, transparent); } .pk-set-pw { position: relative; display: block; } .pk-set-pw input { padding-right: 40px; } .pk-set-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; font-size: 15px; color: var(--pk-ink-3); padding: 4px 8px; } .pk-set-actions { margin-top: 6px; } .pk-set-save { padding: 9px 18px; border: 0; border-radius: var(--pk-r-md); background: var(--pk-sel); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .pk-set-save:hover { filter: brightness(1.08); } .pk-set-save:disabled { opacity: .6; cursor: default; } .pk-set-acct { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--pk-r-md); border: 1px solid var(--pk-line); } .pk-set-acct + .pk-set-acct { margin-top: 8px; } .pk-set-acct.current { background: var(--pk-sel-bg); border-color: color-mix(in srgb, var(--pk-sel) 30%, var(--pk-line-2)); } .pk-set-acct-meta { flex: 1; min-width: 0; } .pk-set-acct-meta b { display: block; font-size: 13.5px; color: var(--pk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-set-acct-meta span { display: block; font-size: 12px; color: var(--pk-ink-3); } .pk-set-acct-actions { display: flex; align-items: center; gap: 8px; flex: none; } .pk-set-badge { font-size: 12.5px; font-weight: 700; color: var(--pk-sel-d); } .pk-set-acct-actions .button { padding: 6px 12px; border-radius: var(--pk-r-sm); border: 1px solid var(--pk-line-2); background: var(--pk-app); color: var(--pk-ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .pk-set-acct-actions .button:hover { background: var(--pk-hover); color: var(--pk-ink); } .pk-set-del.armed { border-color: var(--pk-danger, #c8352e); color: var(--pk-danger, #c8352e); background: var(--pk-danger-bg, #fdecec); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════════ * 4d) CONVERSATION READER — vlákno ako stoh kariet (#pk-conv v #layout-content) * ═══════════════════════════════════════════════════════════════════════════ */ body.task-mail #pk-conv { flex: 1; min-height: 0; overflow-y: auto; background: var(--pk-app); font-family: var(--pk-font); color: var(--pk-ink); } /* Čítací panel je flex-item s min-width:auto → nezmrštil by sa pod min-content šírku tela správy (napr. široká podpisová tabuľka), čím by pretiekol viewport a dátum/akcie kariet by zmizli mimo obrazovku. min-width:0 mu dovolí zmrštiť sa. (Náš skin override, nie zásah do Roundcube core.) */ body.task-mail #layout-content { min-width: 0; } body.task-mail .pk-conv-head { padding: 18px 26px 10px; } body.task-mail .pk-conv-subject { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--pk-ink); overflow: hidden; text-overflow: ellipsis; } body.task-mail .pk-conv-parts { display: flex; align-items: center; gap: 10px; } body.task-mail .pk-conv-avstack { display: flex; } body.task-mail .pk-conv-av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } body.task-mail .pk-conv-avstack .pk-conv-av { border: 2px solid var(--pk-app); margin-left: -8px; width: 28px; height: 28px; } body.task-mail .pk-conv-avstack .pk-conv-av:first-child { margin-left: 0; } body.task-mail .pk-conv-cap { font-size: 12.5px; color: var(--pk-ink-3); } body.task-mail .pk-conv-body { padding: 4px 26px 30px; } body.task-mail .pk-conv-card { margin-bottom: 12px; border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-lg); background: var(--pk-app); box-shadow: var(--pk-sh-sm); overflow: hidden; } body.task-mail .pk-conv-card.open { border-color: color-mix(in srgb, var(--pk-sel) 40%, var(--pk-line-2)); } body.task-mail .pk-conv-card-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; } body.task-mail .pk-conv-card-head:hover { background: var(--pk-hover); } body.task-mail .pk-conv-card .pk-conv-av.lg { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; } body.task-mail .pk-conv-who { flex: 1; min-width: 0; } body.task-mail .pk-conv-who b { display: block; font-size: 14px; color: var(--pk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.task-mail .pk-conv-card.unread .pk-conv-who b { font-weight: 700; } body.task-mail .pk-conv-when { flex: none; font-size: 12.5px; color: var(--pk-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } /* zbalená karta: telo skryté */ body.task-mail .pk-conv-card:not(.open) .pk-conv-card-body { display: none; } body.task-mail .pk-conv-card-body { border-top: 1px solid var(--pk-line); } body.task-mail .pk-conv-frame { display: block; width: 100%; min-height: 120px; border: 0; background: var(--pk-app); } /* --- Gmail-style: zbalená karta = meno + náhľad textu na jednom riadku --- */ body.task-mail .pk-conv-who { display: flex; align-items: baseline; gap: 8px; } body.task-mail .pk-conv-who b { flex: 0 1 auto; min-width: 40px; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.task-mail .pk-conv-preview { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--pk-ink-3); } /* rozbalená karta: meno na vlastnom riadku, náhľad skrytý (telo ho nahrádza) */ body.task-mail .pk-conv-card.open .pk-conv-who { display: block; } body.task-mail .pk-conv-card.open .pk-conv-who b { max-width: none; } body.task-mail .pk-conv-card.open .pk-conv-preview { display: none; } /* per-bublina akcie (odpovedať / viac) — pri hoveri zbalenej karty nahradia dátum, na otvorenej karte sú zobrazené spolu s dátumom */ body.task-mail .pk-conv-actions { display: none; align-items: center; gap: 2px; flex: none; } body.task-mail .pk-conv-card-head:hover .pk-conv-actions, body.task-mail .pk-conv-card.open .pk-conv-actions { display: flex; } body.task-mail .pk-conv-card:not(.open) .pk-conv-card-head:hover .pk-conv-when { display: none; } body.task-mail .pk-conv-act { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--pk-ink-3); cursor: pointer; } body.task-mail .pk-conv-act:hover { background: var(--pk-hover); color: var(--pk-ink); } /* dropdown menu bubliny — pripája sa priamo na , preto bez .task-mail scope */ .pk-conv-menu { position: fixed; z-index: 1200; min-width: 194px; padding: 6px; background: var(--pk-app); border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-md); box-shadow: var(--pk-sh-lg); } .pk-conv-menu-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--pk-ink); font: inherit; font-size: 13.5px; cursor: pointer; } .pk-conv-menu-item:hover { background: var(--pk-hover); } body.task-mail #layout-sidebar { background: var(--pk-app); } body.task-mail #layout-sidebar .header { border-bottom: 1px solid var(--pk-line); } body.task-mail #layout-sidebar .header-title.username { font-weight: 700; color: var(--pk-ink); } body.task-mail #mailboxlist { padding: 6px 8px; font-family: var(--pk-font); } body.task-mail #mailboxlist li.mailbox > a { display: flex; align-items: center; gap: 10px; padding: 8px 11px; margin: 1px 0; border-radius: var(--pk-r-md); color: var(--pk-ink-2); font-weight: 600; font-size: 13.5px; border: 0; } body.task-mail #mailboxlist li.mailbox > a:hover { background: var(--pk-hover); } body.task-mail #mailboxlist li.mailbox.selected > a { background: var(--pk-sel-bg); color: var(--pk-sel-d); } body.task-mail #mailboxlist li.mailbox span.unreadcount { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 9px; background: var(--pk-sel); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ * 4c) TASK RAIL (#layout-menu) — svetlejší, čistejší * ═══════════════════════════════════════════════════════════════════════════ */ body.task-mail #layout-menu, body.task-addressbook #layout-menu, body.task-settings #layout-menu { background: var(--pk-side); border-right: 1px solid var(--pk-line); } body.task-mail #taskmenu a, body.task-addressbook #taskmenu a, body.task-settings #taskmenu a { color: var(--pk-ink-2); } body.task-mail #taskmenu a:hover { background: var(--pk-hover); color: var(--pk-ink); } body.task-mail #taskmenu a.selected, body.task-addressbook #taskmenu a.selected, body.task-settings #taskmenu a.selected { background: var(--pk-sel-bg); color: var(--pk-sel-d); } body.task-mail #taskmenu a.compose { background: var(--pk-grad); color: #fff; border-radius: var(--pk-r-md); } /* ═══════════════════════════════════════════════════════════════════════════ * 5) KONTEXTOVÉ MENU (pravý klik) — vlastný komponent nášho pluginu. * Dedí vzhľad z Elastic .popupmenu / .menu.listing, pridávame len jemné * tokenové doladenie a značkový hover. * ═══════════════════════════════════════════════════════════════════════════ */ #postovy-ctxmenu.popupmenu { min-width: 220px; border-radius: var(--pk-r-md); box-shadow: var(--pk-sh-md); padding: var(--pk-s-1) 0; font-family: var(--pk-font); } #postovy-ctxmenu .menu.listing a { display: flex; align-items: center; gap: var(--pk-s-2); padding: var(--pk-s-2) var(--pk-s-4); color: var(--pk-ink); cursor: pointer; white-space: nowrap; } #postovy-ctxmenu .menu.listing a:hover, #postovy-ctxmenu .menu.listing a.pk-focus { background: var(--pk-sel-bg); color: var(--pk-sel-d); } #postovy-ctxmenu .menu.listing li.pk-sep { height: 1px; margin: var(--pk-s-1) 0; background: var(--pk-line); } #postovy-ctxmenu .menu.listing a .pk-key { margin-left: auto; padding-left: var(--pk-s-5); color: var(--pk-ink-3); font-size: .8em; font-family: var(--pk-font-mono); } /* ═══════════════════════════════════════════════════════════════════════════ * 6) NÁPOVEDA KLÁVESOVÝCH SKRATIEK (overlay '?') * ═══════════════════════════════════════════════════════════════════════════ */ #postovy-shortcuts-overlay { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(12,13,18,.55); font-family: var(--pk-font); } #postovy-shortcuts-overlay.pk-open { display: flex; } #postovy-shortcuts-overlay .pk-card { background: var(--pk-app); color: var(--pk-ink); border-radius: var(--pk-r-lg); box-shadow: var(--pk-sh-lg); padding: var(--pk-s-6); max-width: 460px; width: calc(100% - 40px); max-height: 80vh; overflow: auto; } #postovy-shortcuts-overlay h2 { margin: 0 0 var(--pk-s-4); font-size: 1.1rem; } #postovy-shortcuts-overlay .pk-row { display: flex; justify-content: space-between; align-items: center; padding: var(--pk-s-2) 0; border-bottom: 1px solid var(--pk-line); } #postovy-shortcuts-overlay .pk-row:last-child { border-bottom: 0; } #postovy-shortcuts-overlay kbd { display: inline-block; min-width: 1.4em; padding: 2px 7px; border: 1px solid var(--pk-line-2); border-bottom-width: 2px; border-radius: var(--pk-r-sm); background: var(--pk-chip); color: var(--pk-ink); font-family: var(--pk-font-mono); font-size: .82em; text-align: center; } /* Reading pane (čítanie správy) — Elastic templates/message.html (rendered for action=preview in #messagecontframe, and action=show for extwin/print) scope=body.task-mail iframe=True */ /* ═══════════════════════════════════════════════════════════════════════════ * 7) ČÍTANIE SPRÁVY — reading pane (message.html). * Rámovaná stránka náhľadu: (pri "otvoriť v okne" action-show). Náš styles.css sa * načítava aj v tomto iframe, preto scopujeme pod body.task-mail a cielime * IBA na id/triedy, ktoré existujú v message.html (#message-header, * #message-content, #messagebody, .message-part, .attachmentslist) — v zozname * správ (tiež task-mail) tieto id nie sú, takže sa pravidlá neprelievajú. * Akčná lišta (reply/forward) je v RODIČOVSKEJ stránke: #layout-content > * .header[role=toolbar] > #mailtoolbar (a v extwin/print aj v message.html). * Aditívne prepisy overených Elastic selektorov; z Elastic LESS nič nekopírované. * ═══════════════════════════════════════════════════════════════════════════ */ /* --- čítacia plocha: pohodlnejší padding + čitateľná šírka riadku ---------- */ body.task-mail .content.frame-content { padding: 18px 24px 30px; font-family: var(--pk-font); color: var(--pk-ink); } body.task-mail #message-header, body.task-mail #message-content { max-width: 900px; } /* --- AKČNÁ LIŠTA (reply / reply-all / forward / delete / print / more / nav) Rodičovská stránka náhľadu aj extwin. Scoped na #layout-content, aby sme sa nedotkli hlavičky zoznamu (#messagelist-header) ani bočného panela. -------- */ body.task-mail #layout-content > .header[role="toolbar"] { border-bottom: 1px solid var(--pk-line); background: var(--pk-app); } body.task-mail #mailtoolbar a.button { color: var(--pk-ink-2); border-radius: var(--pk-r-sm); transition: background .12s, color .12s; } body.task-mail #mailtoolbar a.button:hover { background: var(--pk-hover); color: var(--pk-ink); } body.task-mail #mailtoolbar a.button.disabled { color: var(--pk-ink-3); opacity: .5; } body.task-mail #mailtoolbar a.button.reply:hover, body.task-mail #mailtoolbar a.button.reply-all:hover, body.task-mail #mailtoolbar a.button.forward:hover { background: var(--pk-sel-bg); color: var(--pk-sel-d); } body.task-mail #mailtoolbar a.button.delete:hover { background: var(--pk-red-bg); color: var(--pk-red-fg); } body.task-mail #mailtoolbar .dropbutton .dropdown { color: var(--pk-ink-3); border-radius: var(--pk-r-sm); } body.task-mail #mailtoolbar .dropbutton .dropdown:hover { background: var(--pk-hover); color: var(--pk-ink); } /* --- PREDMET (h2.subject) ------------------------------------------------- */ body.task-mail #message-header { margin-bottom: 18px; } body.task-mail #message-header > .subject { font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--pk-ink); margin: 2px 0 14px; } /* príznakový (flagged) predmet — amber vlajka namiesto červenej */ body.task-mail.status-flagged #message-header > .subject:before { color: var(--pk-amber); } /* „otvoriť v novom okne" ikonka pri predmete */ body.task-mail #message-header > .subject a.extwin { color: var(--pk-ink-3); } body.task-mail #message-header > .subject a.extwin:hover { color: var(--pk-sel); } /* --- ODOSIELATEĽ: avatar (contactphoto) + súhrn / hlavičky ---------------- */ body.task-mail #message-header > .header { display: flex; align-items: flex-start; gap: 12px; } body.task-mail #message-header img.contactphoto { width: 44px; height: 44px; margin: 0; border-radius: 12px; /* rounded-rect avatar (nie kruh) podľa prototypu */ object-fit: cover; background: var(--pk-chip); border: 1px solid var(--pk-line-2); } body.task-mail #message-header .header-content { min-width: 0; flex: 1; } /* kompaktný súhrn „Od · dátum" */ body.task-mail #message-header .header-summary { margin-top: 1px; font-size: 13.5px; color: var(--pk-ink-2); line-height: 1.5; } body.task-mail #message-header .header-summary a { color: var(--pk-ink); font-weight: 700; text-decoration: none; } body.task-mail #message-header .header-summary a:hover { color: var(--pk-sel); } body.task-mail #message-header .header-summary .text-nowrap { color: var(--pk-ink-3); font-weight: 400; } /* rozbalené hlavičky (details-view) — tabuľka Od/Komu/Kópia/Dátum */ body.task-mail #message-header .header-headers { font-size: 13px; line-height: 1.6; color: var(--pk-ink); } body.task-mail #message-header .header-headers .header-title { color: var(--pk-ink-3); font-weight: 700; font-size: 11.5px; letter-spacing: .01em; padding: 1px 12px 1px 0; vertical-align: top; } body.task-mail #message-header .header-headers td.header { padding: 1px 0; color: var(--pk-ink); } body.task-mail #message-header .header-headers a { color: var(--pk-sel); text-decoration: none; } body.task-mail #message-header .header-headers a:hover { text-decoration: underline; } body.task-mail #message-header .header-headers .prio1, body.task-mail #message-header .header-headers .prio2 { color: var(--pk-red-fg); font-weight: 700; } /* odkazy pod hlavičkou: „podrobnosti / všetky hlavičky / HTML|text" */ body.task-mail #message-header .header-links { margin-top: 8px; } body.task-mail #message-header .header-links a { font-size: 12px; color: var(--pk-ink-3); margin-right: 12px; text-decoration: none; } body.task-mail #message-header .header-links a:hover { color: var(--pk-sel); } /* --- INFO/UPOZORNENIE (blokované obrázky, koncept…) v #message-objects ----- */ body.task-mail #message-objects > .notice, body.task-mail #message-objects > .information { border-radius: var(--pk-r-md); border: 1px solid var(--pk-line-2); background: var(--pk-side); color: var(--pk-ink-2); } body.task-mail #message-objects a { color: var(--pk-sel); font-weight: 600; } /* --- PRÍLOHY ako karty (attachmentslist) ---------------------------------- */ /* Elastic dáva zoznamu rámik/pozadie a li ako inline riadok; prerobíme na mriežku kariet. Fontawesome ikonu (li:before) len prefarbíme/zväčšíme. */ body.task-mail #message-content .attachmentslist { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 16px; border: 0; background: transparent; } body.task-mail #message-content .attachmentslist:empty { display: none; } body.task-mail #message-content .attachmentslist li { display: inline-flex; align-items: center; gap: 10px; max-width: 260px; min-height: 0; padding: 8px 13px; line-height: 1.3; border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-md); background: var(--pk-side); transition: border-color .12s, background .12s; } body.task-mail #message-content .attachmentslist li:hover { border-color: var(--pk-sel); background: var(--pk-app); } body.task-mail #message-content .attachmentslist li:before { color: var(--pk-sel); font-size: 19px; height: auto; line-height: 1; margin: 0; flex: none; } body.task-mail #message-content .attachmentslist li a.filename { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; height: auto; min-width: 0; line-height: 1.3; text-decoration: none; } body.task-mail #message-content .attachmentslist li .attachment-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--pk-ink); } body.task-mail #message-content .attachmentslist li .attachment-size { font-size: 11px; color: var(--pk-ink-3); } /* voliteľné rozbaľovacie tlačidlo prílohy */ body.task-mail #message-content .attachmentslist li a.dropdown { color: var(--pk-ink-3); align-self: center; } /* --- TELO SPRÁVY: typografia obalu (nie surové HTML pošty) ----------------- */ /* Štýlujeme kontajner, ktorý dáva Roundcube (#messagebody, .message-part). HTML telo pošty je používateľský obsah — nedotýkame sa .rcmBody vnútra. */ body.task-mail #messagebody { font-family: var(--pk-font); color: var(--pk-ink); } body.task-mail .message-part, body.task-mail .message-htmlpart { font-size: 14.5px; line-height: 1.65; color: var(--pk-ink); } /* predformátovaný / plain-text part necháme mono, len doladíme rytmus */ body.task-mail .message-part div.pre { font-family: var(--pk-font-mono); font-size: 13px; line-height: 1.6; } body.task-mail .message-part span.sig { color: var(--pk-ink-3); } /* citácie v plain-text parte (nie v HTML tele pošty) */ body.task-mail .message-part blockquote { color: var(--pk-ink-2); border-left: 2px solid var(--pk-line-2); border-right: 0; background: var(--pk-side); border-radius: 0 var(--pk-r-sm) var(--pk-r-sm) 0; margin: 4px 0; padding: 2px 10px; } body.task-mail .message-part blockquote blockquote { background: transparent; border-left-color: var(--pk-sel); } body.task-mail .message-part blockquote span.blockquote-link { color: var(--pk-ink-2); background: var(--pk-chip); border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-sm); font-family: var(--pk-font); } /* Compose (písanie správy) scope=body.task-mail.action-compose iframe=False */ /* ═══════════════════════════════════════════════════════════════════════════ * 7) NOVÁ SPRÁVA (compose) — body.task-mail.action-compose * Aditívne prepisy overených Elastic selektorov (compose.html + recipient * widget z ui.js). Compose je top-level stránka (nie iframe), no body trieda * je task-mail action-compose aj v extwin — scope teda platí v oboch. Layout * mechaniku Elastic (Bootstrap grid, input-group, flex) nechávame; meníme len * typografiu, farby, medzery a tvary cez naše tokeny. NEKOPÍRUJEME Elastic LESS. * ═══════════════════════════════════════════════════════════════════════════ */ /* --- plátno + hlavička obsahu -------------------------------------------- */ body.task-mail.action-compose #layout-content { background: var(--pk-app); } body.task-mail.action-compose #compose-content { background: var(--pk-app); } body.task-mail.action-compose #layout-content > .header { background: var(--pk-app); border-bottom: 1px solid var(--pk-line); } body.task-mail.action-compose #layout-content > .header .header-title { color: var(--pk-ink); font-weight: 700; } /* --- horný toolbar (Uložiť / Priložiť / Podpis / Odpovede) ---------------- */ body.task-mail.action-compose #layout-content > .header a.button, body.task-mail.action-compose #messagetoolbar a { color: var(--pk-ink-2); border-radius: var(--pk-r-sm); transition: background .12s, color .12s; } body.task-mail.action-compose #layout-content > .header a.button:hover, body.task-mail.action-compose #messagetoolbar a:not(.disabled):hover { background: var(--pk-hover); color: var(--pk-ink); } /* --- riadky hlavičiek (Od / Komu / Kópia / Predmet) ----------------------- */ body.task-mail.action-compose .compose-headers .form-group.row { margin: 0; padding: 5px 22px; align-items: center; border-bottom: 1px solid var(--pk-line); } /* úzky pevný štítok vľavo, pole zaberie zvyšok (bližšie k prototypu) */ body.task-mail.action-compose .compose-headers .form-group.row > .col-2.col-form-label { flex: 0 0 92px; max-width: 92px; padding: 5px 8px 5px 0; color: var(--pk-ink-3); font-weight: 600; font-size: 13px; } body.task-mail.action-compose .compose-headers .form-group.row > .col-10 { flex: 1 1 auto; max-width: none; } /* jemný akcent pri fokuse: spodná linka + štítok */ body.task-mail.action-compose .compose-headers .form-group.row:focus-within { border-bottom-color: var(--pk-sel); } body.task-mail.action-compose .compose-headers .form-group.row:focus-within > .col-form-label { color: var(--pk-sel); } /* --- polia bez rámu (splynú s riadkom, oddeľuje ich spodná linka) --------- */ body.task-mail.action-compose .compose-headers .form-control, body.task-mail.action-compose .compose-headers select.form-control, body.task-mail.action-compose .compose-headers .recipient-input { border: 0; background: transparent; box-shadow: none; color: var(--pk-ink); padding-left: 2px; padding-right: 2px; min-height: 34px; } body.task-mail.action-compose .compose-headers select.form-control { cursor: pointer; } /* zruš modrý glow Elasticu na recipient poli — akcent nesie riadok */ body.task-mail.action-compose .compose-headers .recipient-input.focus { border-color: transparent; background: transparent; box-shadow: none; } body.task-mail.action-compose .compose-headers .recipient-input input { color: var(--pk-ink); } /* --- príjemcovia ako čisté „pills" --------------------------------------- */ body.task-mail.action-compose .recipient-input .recipient { border: 1px solid var(--pk-line-2); background: var(--pk-chip); border-radius: var(--pk-r-sm); color: var(--pk-ink); padding: 1px 4px 1px 8px; margin: 4px 6px 0 0; max-width: 100%; } body.task-mail.action-compose .recipient-input .recipient .name { color: var(--pk-ink); font-size: 13px; padding: 2px 2px; } body.task-mail.action-compose .recipient-input .recipient a.button.icon.remove { color: var(--pk-ink-3); transition: color .12s; } body.task-mail.action-compose .recipient-input .recipient a.button.icon.remove:hover { color: var(--pk-red-fg); } /* --- pripojené ikonové tlačidlá poľa (upraviť identitu / +kontakt / +hlavička / zmazať) */ body.task-mail.action-compose .compose-headers .input-group-append .input-group-text { min-width: 2.2rem; border: 0; background: transparent; color: var(--pk-ink-3); border-radius: var(--pk-r-sm); transition: background .12s, color .12s; } body.task-mail.action-compose .compose-headers .input-group-append .input-group-text:hover { background: var(--pk-hover); color: var(--pk-ink); } /* --- predmet: o čosi výraznejší ------------------------------------------ */ body.task-mail.action-compose #compose-subject { font-size: 14.5px; font-weight: 600; color: var(--pk-ink); } /* --- telo správy (plain-text editor; TinyMCE internals NEupravujeme) ------ */ body.task-mail.action-compose #composebodycontainer { background: var(--pk-app); } body.task-mail.action-compose textarea#composebody { border: 0; background: transparent; color: var(--pk-ink); font-family: var(--pk-font); font-size: 15px; line-height: 1.7; padding: 18px 22px; } body.task-mail.action-compose textarea#composebody:focus { box-shadow: none; } /* --- pätkový akčný panel (Odoslať / otvoriť v okne) ----------------------- */ body.task-mail.action-compose .formbuttons { padding: 12px 22px; background: var(--pk-app); border-top: 1px solid var(--pk-line); } body.task-mail.action-compose .formbuttons .btn.btn-primary, body.task-mail.action-compose .formbuttons .btn.send { border: 0; background: var(--pk-grad); color: var(--pk-on-accent); border-radius: var(--pk-r-md); font-weight: 600; height: 38px; padding: 0 22px; transition: filter .12s; } body.task-mail.action-compose .formbuttons .btn.btn-primary:hover, body.task-mail.action-compose .formbuttons .btn.send:hover { background: var(--pk-grad); filter: brightness(1.06); } body.task-mail.action-compose .formbuttons .btn-link { color: var(--pk-ink-3); } body.task-mail.action-compose .formbuttons .btn-link:hover { color: var(--pk-ink); } /* --- pravý bočný panel: Možnosti a prílohy -------------------------------- */ body.task-mail.action-compose #layout-sidebar { background: var(--pk-app); } body.task-mail.action-compose #layout-sidebar > .header { background: var(--pk-app); border-bottom: 1px solid var(--pk-line); } body.task-mail.action-compose #layout-sidebar .header-title { color: var(--pk-ink); font-weight: 700; } /* tlačidlo „Priložiť prílohu" */ body.task-mail.action-compose #layout-sidebar .btn.btn-secondary, body.task-mail.action-compose #layout-sidebar .upload-form .attach { background: var(--pk-side); border: 1px solid var(--pk-line-2); color: var(--pk-ink); border-radius: var(--pk-r-md); font-weight: 600; } body.task-mail.action-compose #layout-sidebar .btn.btn-secondary:hover, body.task-mail.action-compose #layout-sidebar .upload-form .attach:hover { background: var(--pk-hover); } /* zoznam príloh */ body.task-mail.action-compose .attachmentslist { background: var(--pk-side); border: 1px solid var(--pk-line); border-radius: var(--pk-r-md); } body.task-mail.action-compose .attachmentslist li { color: var(--pk-ink); } body.task-mail.action-compose .attachmentslist li a { color: var(--pk-ink); } /* voľby kompozície (priorita, uložiť do…, potvrdenia) */ body.task-mail.action-compose #compose-options .col-form-label { color: var(--pk-ink-2); } body.task-mail.action-compose #compose-options .custom-select { background-color: var(--pk-side); border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-sm); color: var(--pk-ink); } body.task-mail.action-compose #compose-options .custom-select:focus { border-color: var(--pk-sel); box-shadow: none; } /* Kontakty (Address book / task=addressbook) scope=body.task-addressbook (top-document chrome: groups rail + contact list + toolbar) · body.task-addressbook.action-show (contact detail, rendered in #contact-frame iframe on ) iframe=True */ /* ═══════════════════════════════════════════════════════════════════════════ * 7) KONTAKTY — task "addressbook" * Vonkajší chróm (skupiny + zoznam kontaktov + toolbar) sa renderuje v hlavnom * okne: body.task-addressbook (index → action-none). * Detail kontaktu (contact.html) je v iframe #contact-frame; tá stránka nesie * body.task-addressbook.action-show na a naše styles.css * sa načíta aj v nej — preto detail scope-ujeme pod .action-show. * Overené proti Elastic 1.7.2. Žiadny CSS z Elastic-u nekopírujeme. * ═══════════════════════════════════════════════════════════════════════════ */ /* --- povrchy panelov + hlavičky ------------------------------------------- */ body.task-addressbook #layout-sidebar, body.task-addressbook #layout-list { background: var(--pk-app); border-right: 1px solid var(--pk-line); } body.task-addressbook #layout-content { background: var(--pk-app); } body.task-addressbook #layout-sidebar > .header, body.task-addressbook #layout-list > .header, body.task-addressbook #layout-content > .header { background: var(--pk-app); border-bottom: 1px solid var(--pk-line); } body.task-addressbook .header .header-title { font-weight: 700; color: var(--pk-ink); } /* toolbar tlačidlá v hlavičke detailu (create/print/delete/…): jemný hover */ body.task-addressbook #addressbooktoolbar a.button:not(.disabled):hover { background: var(--pk-hover); color: var(--pk-ink); border-radius: var(--pk-r-sm); } /* --- SKUPINY (#directorylist / #savedsearchlist) — pill-riadky ------------- */ body.task-addressbook #directorylist, body.task-addressbook #savedsearchlist { padding: 6px 8px; font-family: var(--pk-font); } body.task-addressbook #directorylist li, body.task-addressbook #savedsearchlist li { border-bottom: 0; } body.task-addressbook #directorylist li > a, body.task-addressbook #savedsearchlist li > a { display: block; padding: 8px 11px; margin: 1px 0; border: 0; border-radius: var(--pk-r-md); color: var(--pk-ink-2); font-weight: 600; font-size: 13.5px; line-height: 1.5; } body.task-addressbook #directorylist li > a:hover, body.task-addressbook #savedsearchlist li > a:hover { background: var(--pk-hover); color: var(--pk-ink); } body.task-addressbook #directorylist li.selected > a, body.task-addressbook #savedsearchlist li.selected > a { background: var(--pk-sel-bg); color: var(--pk-sel-d); } body.task-addressbook #directorylist li > a:before { color: var(--pk-ink-3); } body.task-addressbook #directorylist li.selected > a:before { color: var(--pk-sel-d); } /* --- ZOZNAM KONTAKTOV (#contacts-table) ----------------------------------- */ body.task-addressbook #contacts-table { font-family: var(--pk-font); } body.task-addressbook #contacts-table tbody td { border-bottom: 1px solid var(--pk-line); } body.task-addressbook #contacts-table tr.contact td.name { padding: 11px 12px; color: var(--pk-ink); font-weight: 600; font-size: 14px; } /* vedúca ikona (FA user/users) → kruhový avatar-čip v akcente */ body.task-addressbook #contacts-table tr.contact td.name:before { display: inline-block; width: 32px; height: 32px; line-height: 32px; margin-right: 11px; text-align: center; vertical-align: middle; border-radius: 50%; background: var(--pk-sel-bg); color: var(--pk-sel); font-size: 14px; } body.task-addressbook #contacts-table tr.contact.group td.name:before { background: var(--pk-purple-bg); color: var(--pk-purple-fg); } /* e-mail za menom — odkurzívnený, sekundárny */ body.task-addressbook #contacts-table span.email { font-style: normal; font-weight: 400; font-size: 13px; color: var(--pk-ink-3); margin-left: 8px; } body.task-addressbook #contacts-table tr.contact.readonly td { font-style: normal; } body.task-addressbook #contacts-table tbody tr:hover td { background: var(--pk-hover); } body.task-addressbook #contacts-table tbody tr.selected td { background: var(--pk-sel-bg); color: var(--pk-sel-d); box-shadow: inset 3px 0 0 var(--pk-sel); } body.task-addressbook #contacts-table tbody tr.selected td.name { color: var(--pk-ink); } /* na vybranom (tintovanom) riadku má čip biele pozadie pre kontrast */ body.task-addressbook #contacts-table tbody tr.selected td.name:before { background: var(--pk-app); color: var(--pk-sel); } /* ═══════════════════════════════════════════════════════════════════════════ * 7b) DETAIL KONTAKTU — iframe #contact-frame (contact.html, action-show) * ═══════════════════════════════════════════════════════════════════════════ */ body.task-addressbook.action-show { background: var(--pk-app); color: var(--pk-ink); } body.task-addressbook.action-show .formcontent { max-width: 640px; padding: 32px 36px 8px; } /* hlavička: foto + meno */ body.task-addressbook.action-show .contact-header { align-items: center; gap: 20px; margin-bottom: 22px; } body.task-addressbook.action-show #contactpic { border-radius: var(--pk-r-lg); background: var(--pk-sel-bg); box-shadow: var(--pk-sh-sm); } body.task-addressbook.action-show #contactpic img { object-fit: cover; } body.task-addressbook.action-show .contact-head { margin-left: 0; } body.task-addressbook.action-show #contacthead .names { margin-bottom: 5px; } body.task-addressbook.action-show #contacthead .names span.namefield { font-size: 24px; font-weight: 700; color: var(--pk-ink); letter-spacing: -.01em; line-height: 1.15; } /* jednostĺpcové head bloky (organization/jobtitle/…) → sekundárny podnadpis */ body.task-addressbook.action-show #contacthead .row span.namefield { font-size: 14px; font-weight: 500; color: var(--pk-ink-2); } body.task-addressbook.action-show #contacthead .source.row span.namefield { font-size: 12.5px; color: var(--pk-ink-3); } /* skupiny detailov: legenda sekcie + key/value riadky */ body.task-addressbook.action-show #contacttabs fieldset.propform > legend { margin: 20px 0 6px; padding: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pk-ink-3); } body.task-addressbook.action-show .contactfieldgroup { border: 0; padding: 0; margin: 0; } body.task-addressbook.action-show .contactfieldgroup > legend { margin: 10px 0 2px; padding: 0; font-size: 12px; font-weight: 600; color: var(--pk-ink-3); } body.task-addressbook.action-show .contactfieldgroup .row { display: flex; align-items: baseline; gap: 14px; margin: 0; padding: 12px 2px; border-top: 1px solid var(--pk-line); } body.task-addressbook.action-show .contactfieldgroup .row .contactfieldlabel { flex: 0 0 132px; max-width: 132px; margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pk-ink-3); } body.task-addressbook.action-show .contactfieldgroup .row .contactfieldcontent { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; color: var(--pk-ink); word-break: break-word; } body.task-addressbook.action-show .contactfieldcontent a { color: var(--pk-sel); font-weight: 600; } body.task-addressbook.action-show .contactfieldcontent a:hover { color: var(--pk-sel-d); } /* primárne tlačidlo (Upraviť) */ body.task-addressbook.action-show .formbuttons { padding: 4px 36px 28px; } body.task-addressbook.action-show .formbuttons .btn.btn-primary { height: 40px; padding: 0 20px; border: 0; border-radius: var(--pk-r-md); background: var(--pk-grad); color: var(--pk-on-accent); font-weight: 600; box-shadow: var(--pk-sh-sm); } body.task-addressbook.action-show .formbuttons .btn.btn-primary:hover { filter: brightness(1.06); } /* Nastavenia (task=settings) — settings sections nav + preferences form scope=Split across two documents that both load our styles.css. PARENT frame (settings.html) is NOT framed: html (no .iframe) > body.task-settings.action-none — holds the settings-tabs list (#layout-sidebar #settings-menu) and the preference-sections list (#layout-list #sections-table). FRAMED prefs form (settingsedit.html) IS framed: html.iframe > body.task-settings.action-edit-prefs — holds .formcontent > .propform.cols-sm-6-6, .custom-switch toggles and .formbuttons. All rules are scoped under body.task-settings, with the framed-only background rule additionally guarded by html.iframe. Verified via includes/layout.html: and when env:framed. iframe=True */ /* ═══════════════════════════════════════════════════════════════════════════ * 7) NASTAVENIA (task=settings) * Rozdelené na dva dokumenty (oba načítavajú tento styles.css): * A) NADRADENÝ rám — settings.html (body.task-settings, html BEZ .iframe): * #layout-sidebar > #settings-menu — hlavné záložky nastavení * #layout-list > #sections-table — zoznam sekcií predvolieb * #layout-content > .header/.iframe-wrapper — hlavička nad iframe * B) RÁMOVANÝ formulár — settingsedit.html * (html.iframe, body.task-settings.action-edit-prefs): * .formcontent > .propform.cols-sm-6-6 · .custom-switch · .formbuttons * Selektory overené v skins/elastic: widgets/lists.less (.listing.iconized), * styles.less (.settings-default-icon), widgets/forms.less (.propform, * .custom-switch, .form-control.custom-select) a ui.js (pretty_checkbox → * div.custom-control.custom-switch > input.custom-control-input + label). * Prepisujeme cez naše --pk-* tokeny; Elastic layout mechaniku nechávame. * ═══════════════════════════════════════════════════════════════════════════ */ /* --- A) Záložky nastavení (#settings-menu v #layout-sidebar) --------------- */ body.task-settings #layout-sidebar { background: var(--pk-app); } body.task-settings #layout-sidebar .header { border-bottom: 1px solid var(--pk-line); } body.task-settings #layout-sidebar .header-title { font-weight: 700; color: var(--pk-ink); } body.task-settings #settings-menu { padding: 6px 8px; font-family: var(--pk-font); } body.task-settings #settings-menu li { border-bottom: 0; } body.task-settings #settings-menu li a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin: 1px 0; border: 0; border-radius: var(--pk-r-md); color: var(--pk-ink-2); font-weight: 600; font-size: 13.5px; } body.task-settings #settings-menu li a::before { color: var(--pk-ink-3); } body.task-settings #settings-menu li a:hover { background: var(--pk-hover); color: var(--pk-ink); } body.task-settings #settings-menu li.selected a, body.task-settings #settings-menu li.selected { background: var(--pk-sel-bg); color: var(--pk-sel-d); } body.task-settings #settings-menu li.selected a::before { color: var(--pk-sel-d); } /* --- B) Zoznam sekcií predvolieb (#sections-table v #layout-list) ---------- */ body.task-settings #layout-list { background: var(--pk-app); } body.task-settings #layout-list .header { border-bottom: 1px solid var(--pk-line); } body.task-settings #layout-list .header-title { font-weight: 700; color: var(--pk-ink); } body.task-settings #sections-table { font-family: var(--pk-font); } body.task-settings #sections-table td.section { border-bottom: 1px solid var(--pk-line); padding: 12px 14px; color: var(--pk-ink-2); font-weight: 600; font-size: 13.5px; } body.task-settings #sections-table td.section::before { color: var(--pk-ink-3); margin-right: 10px; } body.task-settings #sections-table tr:hover td.section { background: var(--pk-hover); color: var(--pk-ink); } body.task-settings #sections-table tr.selected td.section { background: var(--pk-sel-bg); color: var(--pk-sel-d); box-shadow: inset 3px 0 0 var(--pk-sel); } body.task-settings #sections-table tr.selected td.section::before { color: var(--pk-sel-d); } /* --- C) Hlavička nad rámovaným formulárom (#layout-content) ---------------- */ body.task-settings #layout-content .header { border-bottom: 1px solid var(--pk-line); } body.task-settings #layout-content .header-title { font-weight: 700; color: var(--pk-ink); font-size: 16px; } /* --- D) Rámovaný formulár predvolieb (settingsedit.html, html.iframe) ------ */ /* overený scope rámu: body.task-settings.action-edit-prefs */ html.iframe body.task-settings { background: var(--pk-app); } body.task-settings .formcontent { padding: 20px 24px 10px; } body.task-settings .propform:not(.popupmenu) { max-width: 680px; } /* sekcie ako nadpisy + jemné oddelenie (fieldset/legend) */ body.task-settings .formcontent fieldset, body.task-settings .propform fieldset { border: 0; padding: 0; margin: 0; } body.task-settings .formcontent fieldset:not(.tab-pane):nth-of-type(n+2), body.task-settings .propform fieldset:not(.tab-pane):nth-of-type(n+2) { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--pk-line); } body.task-settings .formcontent legend, body.task-settings .propform legend { margin: 0 0 12px; padding: 0; font-size: 15px; font-weight: 700; color: var(--pk-ink); letter-spacing: -.01em; } /* menovky polí a nápovedy */ body.task-settings .propform td.title label, body.task-settings .propform label.col-form-label, body.task-settings .formcontent label.col-form-label { color: var(--pk-ink-2); font-weight: 600; font-size: 13px; } body.task-settings .propform .hint, body.task-settings .formcontent .hint { color: var(--pk-ink-3); font-style: normal; font-size: 12px; } /* vstupy / selecty / textarea */ body.task-settings .propform .form-control, body.task-settings .formcontent .form-control, body.task-settings .propform select, body.task-settings .propform textarea, body.task-settings .propform input[type=text], body.task-settings .propform input[type=email], body.task-settings .propform input[type=password], body.task-settings .propform input[type=number], body.task-settings .propform input[type=url] { background: var(--pk-side); border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-md); color: var(--pk-ink); box-shadow: none; } body.task-settings .propform .form-control:focus, body.task-settings .formcontent .form-control:focus, body.task-settings .propform select:focus, body.task-settings .propform textarea:focus, body.task-settings .propform input[type=text]:focus, body.task-settings .propform input[type=email]:focus, body.task-settings .propform input[type=password]:focus, body.task-settings .propform input[type=number]:focus, body.task-settings .propform input[type=url]:focus { background: var(--pk-app); border-color: var(--pk-sel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-sel) 18%, transparent); } /* dropdown šípka pre .custom-select cez náš tón (Elastic má tmavé SVG) */ body.task-settings .propform .form-control.custom-select, body.task-settings .formcontent .form-control.custom-select, body.task-settings .custom-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239096a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px; padding-right: 32px; } /* natívne checkboxy / rádiá (mimo pretty-switch) */ body.task-settings .propform input[type=radio], body.task-settings .propform input[type=checkbox]:not(.custom-control-input) { accent-color: var(--pk-sel); } /* --- E) Prepínače (Elastic pretty-checkbox → .custom-switch) --------------- */ body.task-settings .custom-switch .custom-control-label { color: var(--pk-ink); font-weight: 600; } body.task-settings .custom-switch .custom-control-label::before { background-color: var(--pk-line-2); border-color: var(--pk-line-2); } body.task-settings .custom-switch .custom-control-label::after { background-color: #fff; box-shadow: var(--pk-sh-sm); } body.task-settings .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--pk-sel); border-color: var(--pk-sel); } body.task-settings .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; } body.task-settings .custom-switch .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-sel) 22%, transparent); } body.task-settings .custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--pk-sel); } /* --- F) Tlačidlá formulára (.formbuttons + .btn v .propform) --------------- */ body.task-settings .formbuttons { padding: 12px 24px; border-top: 1px solid var(--pk-line); background: var(--pk-app); } body.task-settings .formbuttons .btn, body.task-settings .propform .btn { border-radius: var(--pk-r-md); font-weight: 600; } body.task-settings .formbuttons .btn.btn-primary, body.task-settings .btn.btn-primary.submit { background: var(--pk-grad); border: 0; color: var(--pk-on-accent); box-shadow: var(--pk-sh-sm); } body.task-settings .formbuttons .btn.btn-primary:hover, body.task-settings .btn.btn-primary.submit:hover { background: var(--pk-grad); filter: brightness(1.06); } /* Správa priečinkov (Settings › Folders) — folder subscription tree + folder edit/create form scope=Two scopes (screen is split across two documents). LIST + toolbar render in the PARENT settings document: body.task-settings.action-folders (has #layout, NOT framed). The folder EDIT/CREATE form renders INSIDE the #preferences-frame iframe (html.iframe): body.task-settings.action-edit-folder and body.task-settings.action-add-folder. iframe=True */ /* ═══════════════════════════════════════════════════════════════════════════ * 7) SPRÁVA PRIEČINKOV (Nastavenia › Priečinky) * Overené Elastic selektory (skins/elastic/templates/folders.html + * folderedit.html + program/actions/settings/folders.php, folder_edit.php): * * A) ZOZNAM + panel → body.task-settings.action-folders (rodičovský doc) * #layout-list (.header/.scroller/.footer.small), * ul#subscription-table.treelist.listing.folderlist.iconized * > li.mailbox[.inbox|.sent|.drafts|.trash|.junk|.archive|.virtual] * > a (názov; FontAwesome ikona cez a:before) * > .custom-switch (odberový prepínač — absolútne vpravo) * > div.treetoggle (rozbaľovač vetvy) * #folderstoolbar .button.icon (create/delete/purge) * * B) FORMULÁR priečinka → v iframe #preferences-frame (html.iframe), * body.task-settings.action-edit-folder / .action-add-folder * .formcontent > form > fieldset > legend + table.propform * (tr: td.title>label · td>.form-control / select / .input-group) * .formbuttons > button.btn.btn-primary.submit * * Aditívne prepisy vypočítaných selektorov cez naše --pk-* tokeny; žiadny * Elastic LESS neprevzatý. Layout mechaniku (absolútny prepínač, treetoggle, * šírky stĺpcov, flex #layout-list) nechávame na Elastic. Dark-mode rieši * automaticky redefinícia --pk-* pod html.dark-mode (sekcia 2). * Pozn.: #layout je v selektoroch zámerne, aby prekonal Elastic ID pravidlá * (napr. #layout>div>.header). * ═══════════════════════════════════════════════════════════════════════════ */ /* ---- A) panel, hlavička, pätička zoznamu ---------------------------------- */ body.task-settings.action-folders #layout-list { background: var(--pk-app); border-right: 1px solid var(--pk-line); } body.task-settings.action-folders #layout-content { background: var(--pk-app); } body.task-settings.action-folders #layout > div > .header { background: var(--pk-app); border-bottom: 1px solid var(--pk-line); color: var(--pk-ink); font-weight: 700; } body.task-settings.action-folders .header a.button.icon:not(.disabled):hover { background: var(--pk-hover); color: var(--pk-ink); } body.task-settings.action-folders #layout .footer, body.task-settings.action-folders #layout .footer.small { background: var(--pk-side); border-top: 1px solid var(--pk-line); color: var(--pk-ink-3); } body.task-settings.action-folders #layout .footer .count { color: var(--pk-ink-2); font-weight: 700; } /* ---- A) stromové riadky --------------------------------------------------- */ body.task-settings.action-folders #subscription-table { font-family: var(--pk-font); } body.task-settings.action-folders #subscription-table li > a { color: var(--pk-ink); font-size: 14.5px; font-weight: 600; border-bottom: 1px solid var(--pk-line); transition: background-color .12s ease, color .12s ease; } body.task-settings.action-folders #subscription-table li > a:hover { background: var(--pk-hover); } body.task-settings.action-folders #subscription-table li.selected > a, body.task-settings.action-folders #subscription-table li > a.selected { background: var(--pk-sel-bg); color: var(--pk-sel-d); box-shadow: inset 3px 0 0 var(--pk-sel); } /* ikony priečinkov (FA cez a:before) — jemné, INBOX značkovo modrá */ body.task-settings.action-folders #subscription-table li > a:before { color: var(--pk-ink-3); } body.task-settings.action-folders #subscription-table li.inbox > a:before { color: var(--pk-sel); } /* virtuálne/neodoberateľné vetvy ostávajú stlmené (Elastic: opacity .4) */ /* rozbaľovač vetvy */ body.task-settings.action-folders #subscription-table li div.treetoggle { color: var(--pk-ink-3); } /* ---- A) odberový prepínač (Bootstrap custom-switch) ----------------------- */ body.task-settings.action-folders #subscription-table li .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--pk-sel); border-color: var(--pk-sel); } body.task-settings.action-folders #subscription-table li .custom-switch .custom-control-input:checked:disabled ~ .custom-control-label::before { background-color: color-mix(in srgb, var(--pk-sel) 42%, transparent); border-color: transparent; } body.task-settings.action-folders #subscription-table li .custom-switch .custom-control-input:focus ~ .custom-control-label::before { border-color: var(--pk-sel); box-shadow: 0 0 0 .2rem var(--pk-sel-bg); } /* fallback, ak checkbox neprejde na prepínač */ body.task-settings.action-folders #subscription-table input[type="checkbox"] { accent-color: var(--pk-sel); } /* ═══════════════════════════════════════════════════════════════════════════ * B) FORMULÁR priečinka — v iframe (folderedit.html: edit-folder / add-folder) * ═══════════════════════════════════════════════════════════════════════════ */ body.task-settings.action-edit-folder, body.task-settings.action-add-folder { background: var(--pk-app); color: var(--pk-ink); } body.task-settings.action-edit-folder .formcontent, body.task-settings.action-add-folder .formcontent { max-width: 680px; padding: 22px 24px; font-family: var(--pk-font); } /* sekcie ako čisté skupiny s podčiarknutým nadpisom (namiesto orámovania) */ body.task-settings.action-edit-folder .formcontent fieldset, body.task-settings.action-add-folder .formcontent fieldset { border: 0; padding: 0; margin: 0 0 22px; } body.task-settings.action-edit-folder .formcontent legend, body.task-settings.action-add-folder .formcontent legend { display: block; width: 100%; padding: 0 0 9px; margin: 0 0 10px; border-bottom: 1px solid var(--pk-line); font-size: 14px; font-weight: 700; color: var(--pk-ink); } /* riadky label / hodnota */ body.task-settings.action-edit-folder .formcontent .propform, body.task-settings.action-add-folder .formcontent .propform { width: 100%; } body.task-settings.action-edit-folder .formcontent .propform td, body.task-settings.action-add-folder .formcontent .propform td { padding: 6px 0; vertical-align: middle; } body.task-settings.action-edit-folder .formcontent .propform td.title, body.task-settings.action-add-folder .formcontent .propform td.title { width: 9em; padding-right: 14px; line-height: 1.3; } body.task-settings.action-edit-folder .formcontent .propform td.title label, body.task-settings.action-add-folder .formcontent .propform td.title label { font-size: 12px; font-weight: 600; color: var(--pk-ink-3); } body.task-settings.action-edit-folder .formcontent .propform td:not(.title), body.task-settings.action-add-folder .formcontent .propform td:not(.title) { color: var(--pk-ink); } /* polia (textové vstupy + selecty) */ body.task-settings.action-edit-folder .formcontent .form-control, body.task-settings.action-add-folder .formcontent .form-control, body.task-settings.action-edit-folder .formcontent .propform select, body.task-settings.action-add-folder .formcontent .propform select { height: 40px; padding: 0 12px; background-color: var(--pk-side); border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-md); color: var(--pk-ink); transition: border-color .12s, background-color .12s; } body.task-settings.action-edit-folder .formcontent .form-control:focus, body.task-settings.action-add-folder .formcontent .form-control:focus, body.task-settings.action-edit-folder .formcontent .propform select:focus, body.task-settings.action-add-folder .formcontent .propform select:focus { border-color: var(--pk-sel); background-color: var(--pk-app); box-shadow: none; outline: none; } /* select: vlastný chevron (nahrádza Elastic .custom-select šípku) */ body.task-settings.action-edit-folder .formcontent .propform select, body.task-settings.action-add-folder .formcontent .propform select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239096a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* rozumná šírka hodnôt */ body.task-settings.action-edit-folder .formcontent .propform td:not(.title) > .form-control, body.task-settings.action-add-folder .formcontent .propform td:not(.title) > .form-control, body.task-settings.action-edit-folder .formcontent .propform td:not(.title) > select, body.task-settings.action-add-folder .formcontent .propform td:not(.title) > select { min-width: 260px; } /* skupina vstupu s príponou (lokalizovaný názov špeciálneho priečinka) */ body.task-settings.action-edit-folder .formcontent .input-group, body.task-settings.action-add-folder .formcontent .input-group { max-width: 380px; } body.task-settings.action-edit-folder .formcontent .input-group > .form-control:not(:last-child), body.task-settings.action-add-folder .formcontent .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } body.task-settings.action-edit-folder .formcontent .input-group-text, body.task-settings.action-add-folder .formcontent .input-group-text { background: var(--pk-chip); border: 1px solid var(--pk-line-2); color: var(--pk-ink-3); border-radius: 0 var(--pk-r-md) var(--pk-r-md) 0; } /* odkazy vo formulári (napr. „zistiť veľkosť“) */ body.task-settings.action-edit-folder .formcontent .propform a, body.task-settings.action-add-folder .formcontent .propform a { color: var(--pk-sel); } /* ---- B) tlačidlá formulára ------------------------------------------------ */ body.task-settings.action-edit-folder .formbuttons, body.task-settings.action-add-folder .formbuttons { padding: 14px 24px; border-top: 1px solid var(--pk-line); background: var(--pk-app); } body.task-settings.action-edit-folder .formbuttons button.btn-primary, body.task-settings.action-add-folder .formbuttons button.btn-primary, body.task-settings.action-edit-folder .formbuttons .btn.btn-primary, body.task-settings.action-add-folder .formbuttons .btn.btn-primary { height: 40px; padding: 0 22px; border: 0; border-radius: var(--pk-r-md); background: var(--pk-grad); color: #fff; font-weight: 700; box-shadow: var(--pk-sh-sm); transition: filter .12s; } body.task-settings.action-edit-folder .formbuttons button.btn-primary:hover, body.task-settings.action-add-folder .formbuttons button.btn-primary:hover, body.task-settings.action-edit-folder .formbuttons .btn.btn-primary:hover, body.task-settings.action-add-folder .formbuttons .btn.btn-primary:hover { filter: brightness(1.06); } /* Vyhľadávanie — mail search: .searchbar quick-search field + inline advanced panel #searchmenu (filter chips, labeled selects, search button) scope=body.task-mail iframe=False */ /* ═══════════════════════════════════════════════════════════════════════════ * 7) VYHĽADÁVANIE (PK — search) — HLAVNÁ mailová stránka (NIE iframe). * Scope: body.task-mail (telo hlavnej stránky: ; * layout.html: task- action-). Náhľad správy je iný iframe. * * Overené Elastic selektory (skins/elastic/templates/mail.html, program search_form(), * styles/widgets/menu.less, ui.js searchbar_init/pretty_checkbox): * .searchbar (wrapper="searchbar menu", role=search) * > form[name=rcmqsearchform] > input#mailsearchform[name=_q] (+ form:before = lupa) * + a.button.reset a.button.options[data-target=searchmenu] a.button.search * #searchmenu.searchoptions — otvára sa INLINE: ui.js searchbar_init toggluje * .hidden na #searchmenu + .open na .searchbar (NIE Bootstrap popover); skryje zoznam. * s_mods[] checkboxy → ui.js pretty_checkbox → .custom-control.custom-switch * > input.custom-control-input + label.custom-control-label. * .input-group > .input-group-prepend > label.input-group-text + select.custom-select * .formbuttons > button.btn.btn-primary.icon.search * Dizajn: prototyp docs/prototype/screens/07-search.html (.search-field, .adv-search, * .filter-chip, .select). Žiaden Elastic LESS nekopírujeme — iba prepis vypočítaných * selektorov cez naše --pk-* tokeny. Content ikon (FontAwesome) nechávame Elasticu, * prepisujeme len geometriu/farby; zobrazenie reset-tlačidla riadi Elastic (.active). * ═══════════════════════════════════════════════════════════════════════════ */ /* --- vyhľadávacia lišta: pole ako zaoblený chip + akčné ikony vpravo ------ */ body.task-mail .searchbar { display: flex; align-items: center; gap: var(--pk-s-2); height: auto; min-height: 52px; line-height: normal; padding: 8px 12px; background: var(--pk-app); border-bottom: 1px solid var(--pk-line); } body.task-mail .searchbar form { flex: 1; min-width: 0; display: flex; align-items: center; height: 38px; background: var(--pk-chip); border: 1px solid transparent; border-radius: var(--pk-r-md); overflow: hidden; transition: background-color .12s, border-color .12s; } body.task-mail .searchbar form:focus-within { background: var(--pk-app); border-color: var(--pk-sel); } body.task-mail .searchbar form::before { /* Elastic FontAwesome lupa — len prefarbenie */ color: var(--pk-ink-3); height: auto; margin: 0 2px 0 12px; } body.task-mail .searchbar input { flex: 1; min-width: 0; height: 100%; padding: 0 12px 0 8px; background: transparent; color: var(--pk-ink); font-size: 13.5px; } body.task-mail .searchbar input::placeholder { color: var(--pk-ink-3); } /* akčné ikony (options caret / unread / reset) ako icon-buttony ----------- */ body.task-mail .searchbar a.button.options, body.task-mail .searchbar a.button.unread { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--pk-ink-2); border-radius: var(--pk-r-sm); transition: background-color .12s, color .12s; } body.task-mail .searchbar a.button.options::before, body.task-mail .searchbar a.button.unread::before, body.task-mail .searchbar a.button.reset::before { width: auto; height: auto; margin: 0; } body.task-mail .searchbar a.button.options:hover, body.task-mail .searchbar a.button.unread:hover { background: var(--pk-hover); color: var(--pk-ink); } body.task-mail .searchbar.open a.button.options { /* panel otvorený → akcentovaný */ background: var(--pk-sel-bg); color: var(--pk-sel-d); } body.task-mail .searchbar a.button.unread.selected { color: var(--pk-sel); } /* reset (times): zobrazenie riadi Elastic (.searchbar.active) — my len vzhľad + centrovanie */ body.task-mail .searchbar a.button.reset { color: var(--pk-ink-3); border-radius: var(--pk-r-sm); } body.task-mail .searchbar.active a.button.reset { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; } body.task-mail .searchbar a.button.reset:hover { background: var(--pk-hover); color: var(--pk-ink); } /* --- rozšírený panel #searchmenu (inline, prekrýva zoznam) --------------- */ /* .hidden (display:none) riadi Elastic; štýlujeme len vzhľad, nie display. */ body.task-mail #searchmenu.searchoptions { padding: 18px 20px 20px; background: var(--pk-side); border-bottom: 1px solid var(--pk-line); font-family: var(--pk-font); } body.task-mail #searchmenu .formcontent { display: flex; flex-direction: column; gap: var(--pk-s-4); max-width: 680px; } /* skupiny filtrov (s_mods[]) ako čipy — prototyp .filter-chip ------------- */ body.task-mail #searchmenu ul.proplist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pk-s-2); } body.task-mail #searchmenu ul.proplist > li { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 0; } body.task-mail #searchmenu ul.proplist ul.proplist { /* vnorený sublist na vlastný riadok */ flex-basis: 100%; width: 100%; margin-top: 2px; padding-left: 4px; } body.task-mail #searchmenu .custom-control.custom-switch { display: inline-flex; align-items: center; min-height: 0; margin: 0; padding: 0; } /* zrušíme vizuál prepínača (switch) a spravíme z labelu čip */ body.task-mail #searchmenu .custom-control-label::before, body.task-mail #searchmenu .custom-control-label::after { display: none !important; } body.task-mail #searchmenu .custom-control-label { display: inline-flex; align-items: center; min-height: 0; margin: 0; padding: 6px 13px; line-height: 1.25; border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-pill); background: var(--pk-app); color: var(--pk-ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s; } body.task-mail #searchmenu .custom-control-label:hover { background: var(--pk-hover); } body.task-mail #searchmenu .custom-control-input:checked ~ .custom-control-label { background: var(--pk-sel-bg); border-color: var(--pk-sel); color: var(--pk-sel-d); } body.task-mail #searchmenu .custom-control-input:focus ~ .custom-control-label { box-shadow: 0 0 0 3px var(--pk-sel-bg); } body.task-mail #searchmenu .custom-control-input:disabled ~ .custom-control-label { opacity: .55; cursor: not-allowed; } /* caret na rozbalenie podskupín odosielateľ/príjemca (from/replyto/to/cc/bcc) */ body.task-mail #searchmenu ul.proplist > li > a.button.icon.dropdown { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--pk-ink-3); border-radius: var(--pk-r-sm); } body.task-mail #searchmenu ul.proplist > li > a.button.icon.dropdown::before { width: auto; height: auto; margin: 0; } body.task-mail #searchmenu ul.proplist > li > a.button.icon.dropdown:hover { background: var(--pk-hover); color: var(--pk-ink); } /* labelované výbery (typ / dátum / rozsah) — prototyp .select ------------- */ body.task-mail #searchmenu .input-group { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--pk-s-3); margin: 0; } body.task-mail #searchmenu .input-group .input-group-prepend { flex: none; width: auto; min-width: 96px; } body.task-mail #searchmenu .input-group-text { display: inline-flex; align-items: center; width: 100%; padding: 0; border: 0; background: transparent; color: var(--pk-ink-3); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } body.task-mail #searchmenu select.custom-select { flex: 1; min-width: 0; height: 38px; padding: 0 34px 0 12px; border: 1px solid var(--pk-line-2); border-radius: var(--pk-r-md); background-color: var(--pk-app); color: var(--pk-ink); font-size: 13.5px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239096a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color .12s, background-color .12s; } body.task-mail #searchmenu select.custom-select:focus { border-color: var(--pk-sel); outline: none; } /* tlačidlo Hľadať — značkový gradient (prototyp .btn-primary) ------------- */ body.task-mail #searchmenu .formbuttons { margin-top: var(--pk-s-4); } body.task-mail #searchmenu .formbuttons button.search { display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-s-2); width: auto; min-width: 152px; height: 38px; padding: 0 22px; border: 0; border-radius: var(--pk-r-md); background: var(--pk-grad); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: var(--pk-sh-sm); transition: filter .12s; } body.task-mail #searchmenu .formbuttons button.search:hover { filter: brightness(1.06); }