/* TeamLayer design system - tokens + light/dark (inspired by design 18). * * Real palettes via CSS variables (NOT filter-invert). Light values match the * legacy Tailwind look so light mode is visually unchanged; dark mode is the * new capability. Toggle lives in wl-theme.js (floating button, html.wl-dark). * * Two layers: * 1) Semantic utilities (.wl-surface, .wl-text, .wl-bd, .wl-accent...) used by * the migrated shell chrome + dashboard + login. Authoritative, clean. * 2) A scoped dark "bridge" (html.wl-dark .wl-darkbridge ...) that recolors the * common legacy Tailwind utilities still present on not-yet-migrated pages, * so dark mode stays coherent app-wide without touching every view. Scoped * so it never leaks into modals / global widgets. */ :root { --wl-bg: #f5f5f7; --wl-surface: #ffffff; --wl-surface-2: #f8fafc; --wl-surface-3: #eef0f4; --wl-text: #1e293b; --wl-text-dim: #64748b; --wl-text-mute: #94a3b8; --wl-border: #e2e8f0; --wl-border-soft: #eef0f4; --wl-accent: #5b5fc7; --wl-accent-strong: #4b4fb5; --wl-accent-soft: #eef0fc; --wl-accent-on: #ffffff; --wl-rail: #3a3a55; --wl-rail-text: rgba(255, 255, 255, .72); --wl-rail-active: rgba(255, 255, 255, .14); --wl-danger: #ef4444; --wl-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08); --wl-shadow-lg: 0 12px 32px -12px rgba(15, 23, 42, .25); } html.wl-dark { --wl-bg: #0b1020; --wl-surface: #141a2b; --wl-surface-2: #1a2236; --wl-surface-3: #222d45; --wl-text: #e7ecf5; --wl-text-dim: #9aa6bd; --wl-text-mute: #6b7890; --wl-border: #283449; --wl-border-soft: #1f2940; --wl-accent: #8b91f0; --wl-accent-strong: #a3a8f5; --wl-accent-soft: #232a4a; --wl-accent-on: #ffffff; --wl-rail: #0a0e1c; --wl-rail-text: rgba(226, 232, 240, .7); --wl-rail-active: rgba(139, 145, 240, .22); --wl-danger: #f87171; --wl-shadow: 0 1px 2px rgba(0, 0, 0, .4); --wl-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .6); } /* Smooth the flip between themes (chrome only; avoid animating text). */ html.wl-theme-ready body, html.wl-theme-ready .wl-surface, html.wl-theme-ready .wl-surface-2, html.wl-theme-ready .wl-surface-3, html.wl-theme-ready .wl-app-bg, html.wl-theme-ready .wl-rail { transition: background-color .18s ease, border-color .18s ease; } /* ---- Layer 1: semantic utilities ---- */ .wl-app-bg { background: var(--wl-bg); } .wl-surface { background: var(--wl-surface); } .wl-surface-2 { background: var(--wl-surface-2); } .wl-surface-3 { background: var(--wl-surface-3); } .wl-text { color: var(--wl-text); } .wl-text-dim { color: var(--wl-text-dim); } .wl-text-mute { color: var(--wl-text-mute); } .wl-bd { border-color: var(--wl-border) !important; } .wl-bd-soft { border-color: var(--wl-border-soft) !important; } .wl-accent { color: var(--wl-accent); } .wl-accent-bg { background: var(--wl-accent); color: var(--wl-accent-on); } .wl-accent-bg:hover { background: var(--wl-accent-strong); } .wl-accent-soft { background: var(--wl-accent-soft); color: var(--wl-accent); } .wl-rail { background: var(--wl-rail); } /* Design 18 cards are flat: surface + 1px border, no drop shadow. */ .wl-card { background: var(--wl-surface); border: 1px solid var(--wl-border); } .wl-hover:hover { background: var(--wl-surface-3); } .wl-shadow { box-shadow: var(--wl-shadow); } .wl-shadow-lg { box-shadow: var(--wl-shadow-lg); } /* ---- Brand logo (inline SVG mark + wordmark, currentColor) ---- */ .wl-logo { display: inline-flex; align-items: center; gap: 6px; color: var(--wl-accent); text-decoration: none; line-height: 1; } /* Fill = the surface the logo sits on, so overlapping layers occlude cleanly * (white on light, dark on dark) without a stray white block. On colored * backgrounds (accent rail / gradient) the fill is transparent. */ .wl-logo svg { width: 1.9em; height: 1.9em; flex: 0 0 auto; fill: var(--wl-surface); } .wl-accent-bg .wl-logo svg, .wl-logo.wl-logo-light svg { fill: var(--wl-accent); } .wl-logo .wl-logo-text { font: 800 1.3rem/1 'Inter', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; color: inherit; white-space: nowrap; } /* White-label uploaded logo (replaces the TeamLayer mark+wordmark) */ .wl-logo-img { height: 32px; width: auto; max-width: 180px; object-fit: contain; display: block; } /* Skala wgranego logo (wybor admina w ustawieniach; md = domyslne 32px). */ .wl-logo-img--sm { height: 22px; max-width: 140px; } .wl-logo-img--lg { height: 52px; max-width: 260px; } /* Logo na tle akcentu / gradiencie - bialy */ .wl-accent-bg .wl-logo, .wl-logo.wl-logo-light { color: #fff; } /* ---- Reusable bits (design 18): chips, status dots, list rows ---- */ .wl-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 6px; background: var(--wl-surface-3); color: var(--wl-text-dim); } .wl-dot { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; flex: 0 0 auto; } .wl-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; transition: background-color .12s ease; } .wl-row:hover { background: var(--wl-surface-2); } .wl-divide-y > * + * { border-top: 1px solid var(--wl-border-soft); } /* Grupowanie wiadomosci: kolejne od tego samego nadawcy (w oknie czasu) * chowaja avatar i naglowek (nazwa+czas), zostaje sama tresc - jak Slack/Teams. */ .wl-msg-grouped .wl-grp-avatar { visibility: hidden; height: 0; } .wl-msg-grouped .wl-grp-meta { display: none; } .wl-msg-grouped .wl-grp-head { margin-bottom: 0 !important; min-height: 0; } .wl-msg-grouped { margin-top: 0 !important; } /* Oddech: wyrazna przerwa przed nowa GRUPA wiadomosci (inny nadawca lub po * przerwie czasowej), ciasno w obrebie serii tej samej osoby. Luzniejsza * interlinia tresci = lepsza czytelnosc. */ /* Kotwica dla paska akcji wiadomosci (.wl-msg-actions jest position:absolute). * Wiadomosci renderowane przez serwer mialy klase `relative`, ale te * dorysowywane przez JS (na zywo, doladowywane, optymistyczne) juz nie - pasek * uciekal wtedy do gory, do krawedzi listy, zamiast siedziec w ramce swojej * wiadomosci. Stad rozne zachowanie kanalow i rozmow prywatnych. */ .message-item { position: relative; } #messages-list .message-item + .message-item:not(.wl-msg-grouped) { margin-top: 1rem; } .message-item .wl-msg-body { line-height: 1.55; } .message-item .wl-grp-head { margin-bottom: 0.2rem; } .wl-avatar { width: 26px; height: 26px; border-radius: 9999px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; } /* ---- Icon rail (Teams-style primary nav, design 18) ---- */ .wl-rail-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 8px 4px; border-radius: 10px; color: var(--wl-rail-text); font-size: 10px; font-weight: 600; text-decoration: none; position: relative; transition: color .15s ease; } .wl-rail-item span { line-height: 1.1; text-align: center; } .wl-rail-item:hover { color: #fff; } .wl-rail-item:hover .wl-rail-ico { background: rgba(255, 255, 255, .07); } .wl-rail-item.active { color: #fff; } .wl-rail-item.active .wl-rail-ico { background: var(--wl-rail-active); } .wl-rail-ico { width: 40px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: background-color .15s ease; } .wl-rail-ico svg { width: 20px; height: 20px; } .wl-rail-badge { position: absolute; top: 3px; right: 13px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9999px; background: var(--wl-danger); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--wl-rail); } /* Header search trigger (opens command palette) */ .wl-search-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; min-width: 200px; border-radius: 10px; cursor: pointer; text-align: left; background: var(--wl-surface-2); border: 1px solid var(--wl-border); color: var(--wl-text-mute); font-size: 13px; } .wl-search-btn:hover { border-color: var(--wl-accent); } .wl-search-btn kbd { margin-left: auto; font: 600 10px/1 'Inter', sans-serif; padding: 3px 5px; border-radius: 5px; background: var(--wl-surface-3); color: var(--wl-text-dim); } /* Inputs / selects styled with tokens (used in migrated views). */ .wl-input { background: var(--wl-surface); border: 1px solid var(--wl-border); color: var(--wl-text); } .wl-input::placeholder { color: var(--wl-text-mute); } .wl-input:focus { outline: none; border-color: var(--wl-accent); box-shadow: 0 0 0 3px var(--wl-accent-soft); } /* ---- Floating theme toggle ---- */ #wlThemeToggle { position: fixed; bottom: 16px; right: 16px; /* Below modals/drawers (voice-video, confirm, command palette all sit at z>=50); the floating fallback only appears on standalone pages anyway. */ z-index: 40; height: 40px; padding: 0 14px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 'Inter', ui-sans-serif, system-ui, sans-serif; cursor: pointer; background: var(--wl-surface); color: var(--wl-text); border: 1px solid var(--wl-border); box-shadow: var(--wl-shadow-lg); transition: transform .15s ease, background-color .18s ease; } #wlThemeToggle:hover { transform: translateY(-1px); } #wlThemeToggle svg { width: 16px; height: 16px; } /* When mounted inline in the header (next to search) instead of floating. */ #wlThemeToggle.wl-theme-inline { position: static; bottom: auto; right: auto; height: 36px; padding: 0 12px; box-shadow: none; background: var(--wl-surface-2); border-radius: 10px; } #wlThemeToggle.wl-theme-inline:hover { transform: none; border-color: var(--wl-accent); } /* ---- Layer 2: scoped dark bridge for legacy Tailwind classes ---- * Only active in dark mode AND only inside an opted-in container * (.wl-darkbridge on the app content area). Keeps un-migrated pages coherent. */ html.wl-dark .wl-darkbridge .bg-white { background: var(--wl-surface) !important; } html.wl-dark .wl-darkbridge .bg-gray-50 { background: var(--wl-bg) !important; } html.wl-dark .wl-darkbridge .bg-gray-100 { background: var(--wl-surface-3) !important; } html.wl-dark .wl-darkbridge .hover\:bg-gray-50:hover, html.wl-dark .wl-darkbridge .hover\:bg-gray-100:hover { background: var(--wl-surface-3) !important; } html.wl-dark .wl-darkbridge .border-gray-100, html.wl-dark .wl-darkbridge .border-gray-200, html.wl-dark .wl-darkbridge .border-gray-300 { border-color: var(--wl-border) !important; } html.wl-dark .wl-darkbridge .text-gray-900, html.wl-dark .wl-darkbridge .text-gray-800, html.wl-dark .wl-darkbridge .text-gray-700 { color: var(--wl-text) !important; } html.wl-dark .wl-darkbridge .text-gray-600, html.wl-dark .wl-darkbridge .text-gray-500 { color: var(--wl-text-dim) !important; } html.wl-dark .wl-darkbridge .text-gray-400 { color: var(--wl-text-mute) !important; } html.wl-dark .wl-darkbridge .text-blue-600, html.wl-dark .wl-darkbridge .text-blue-700 { color: var(--wl-accent) !important; } /* Form controls on legacy pages. */ html.wl-dark .wl-darkbridge select, html.wl-dark .wl-darkbridge input:not([type="checkbox"]):not([type="radio"]), html.wl-dark .wl-darkbridge textarea { background: var(--wl-surface-2) !important; border-color: var(--wl-border) !important; color: var(--wl-text) !important; } html.wl-dark .wl-darkbridge .shadow-sm { box-shadow: var(--wl-shadow) !important; } /* ---- Mobile shell (design 18): rail hidden, tree as drawer, bottom nav ---- */ #wlBottomNav { display: none; } @media (max-width: 767px) { #wlRail { display: none !important; } #sidebarCollapsedRail { display: none !important; } /* Tree becomes an off-canvas drawer */ #sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: 18rem; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--wl-shadow-lg); } body.wl-drawer-open #sidebar { transform: translateX(0); } #wlMobileBackdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .22s ease; } body.wl-drawer-open #wlMobileBackdrop { opacity: 1; pointer-events: auto; } /* Bottom nav */ /* Safe-area przyciety tokenem --t-safe-b (wl2.css) - pelny env() na PWA * Android/iOS robil pusty pas pod ikonami. */ #wlBottomNav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(56px + var(--t-safe-b, 0px)); padding-bottom: var(--t-safe-b, 0px); display: flex; align-items: stretch; justify-content: space-around; background: var(--wl-surface); border-top: 1px solid var(--wl-border); } #appMain { padding-bottom: calc(56px + var(--t-safe-b, 0px)); } /* Nothing in the shell should produce horizontal scroll on a phone. */ html, body { max-width: 100%; overflow-x: hidden; } } @media (min-width: 768px) { #wlMobileBackdrop, #wlHamburger { display: none !important; } } #wlBottomNav .wl-bottom-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 600; color: var(--wl-text-dim); text-decoration: none; position: relative; } #wlBottomNav .wl-bottom-item.active { color: var(--wl-accent); } #wlBottomNav .wl-bottom-item svg { width: 20px; height: 20px; } #wlBottomNav .wl-bottom-badge { position: absolute; top: 6px; right: 50%; margin-right: -18px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 9999px; background: var(--wl-danger); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ---- Confirm modal ---- */ .wl-modal-overlay { position: fixed; inset: 0; z-index: 120; padding: 16px; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; } /* wl-theme.css laduje sie po styles.css, wiec .wl-modal-overlay{display:flex} bilby nadpisal Tailwindowy .hidden. Jawny override przywraca chowanie. */ .wl-modal-overlay.hidden { display: none; } .wl-modal-box { width: 100%; max-width: 380px; padding: 20px; background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: 14px; box-shadow: var(--wl-shadow-lg); } /* ---- Message hover actions (flat icons + kebab) ---- */ .wl-msg-actions { position: absolute; top: 4px; right: 8px; z-index: 5; display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .12s ease; background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: 8px; padding: 2px; box-shadow: var(--wl-shadow); } .message-item:hover .wl-msg-actions, .wl-msg-actions.open { opacity: 1; } .wl-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--wl-text-dim); cursor: pointer; background: none; border: none; } .wl-icon-btn:hover { background: var(--wl-surface-3); color: var(--wl-text); } .wl-icon-btn.danger:hover { color: var(--wl-danger); } .wl-icon-btn svg { width: 16px; height: 16px; } .wl-kebab-menu { position: absolute; z-index: 130; min-width: 180px; padding: 4px; background: var(--wl-surface); border: 1px solid var(--wl-border); border-radius: 10px; box-shadow: var(--wl-shadow-lg); } .wl-kebab-menu a, .wl-kebab-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 7px; font-size: 13px; text-align: left; color: var(--wl-text); background: none; border: none; cursor: pointer; text-decoration: none; } .wl-kebab-menu a:hover, .wl-kebab-menu button:hover { background: var(--wl-surface-3); } .wl-kebab-menu svg { width: 15px; height: 15px; color: var(--wl-text-dim); } .wl-edited { font-size: 11px; color: var(--wl-text-mute); font-style: italic; } /* Ekrany logowania stoja teraz na komponentach `.auth*` z wl2.css (sekcja 18) - * caly blok `.wl-auth*`, ktory tu byl, zostal usuniety razem z przepisaniem * login/register/teams/invites. Fix autouzupelniania przeniesiony na `.input`. */ /* Logo is dark-on-transparent (made for light surfaces). On dark surfaces * invert it to white so it stays visible: login card + app sidebar brand. */ html.wl-dark .wl-auth-logo, html.wl-dark .app-layout-brand img { filter: brightness(0) invert(1); } /* @mentions: highlighted token in message bodies + composer chip. */ .wl-mention { color: var(--wl-accent); background: var(--wl-accent-soft); border-radius: 5px; padding: 0 4px; font-weight: 600; white-space: nowrap; } .wl-msg-editor .wl-mention { cursor: default; } /* Wzmianka w wyrenderowanej wiadomosci jest linkiem do profilu - ma dalej wygladac jak chip (bez podkreslenia), podswietlenie dopiero po najechaniu. */ a.wl-mention { text-decoration: none; cursor: pointer; } a.wl-mention:hover { filter: brightness(0.94); text-decoration: none; } /* Inline photo attachment in a message (and in the composer preview). */ .wl-msg-img { display: block; max-width: min(340px, 100%); max-height: 340px; width: auto; height: auto; margin: 6px 0; border-radius: 12px; border: 1px solid var(--wl-border); object-fit: contain; cursor: zoom-in; background: var(--wl-surface-2); } .wl-msg-editor .wl-msg-img { max-width: 160px; max-height: 120px; cursor: default; } /* Pas i szelki dla ikon kompozera: styles.css (build Tailwinda) moze nie miec * uzytej klasy rozmiaru -> svg bez wymiaru renderuje sie 300x150 i rozsadza * layout (niewidoczne ikony, gigantyczny przycisk wyslij). Twarde wymiary tu, * w pliku ktory kontrolujemy bez rebuildu Tailwinda. */ [data-msg-toolbar] > button > svg { width: 18px; height: 18px; flex: 0 0 auto; } .wl-composer-box button[type="submit"] svg { width: 18px; height: 18px; flex: 0 0 auto; } /* Szczegoly zadania w modalu (board/lista) - wl-task-modal.js. */ .wl-task-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; } .wl-task-modal.hidden { display: none; } .wl-task-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); } .wl-task-modal-card { position: relative; z-index: 1; width: min(1100px, 100%); max-height: 92vh; overflow: auto; background: var(--wl-bg, #fff); color: var(--wl-text); border: 1px solid var(--wl-border); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); } .wl-task-modal-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--wl-border); background: var(--wl-surface); color: var(--wl-text-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .wl-task-modal-x:hover { background: var(--wl-surface-3); color: var(--wl-text); } .wl-task-modal-x svg { width: 18px; height: 18px; } /* Widok zadania ma wlasne marginesy (m-6) - w modalu je gasimy. */ .wl-task-modal-body > * { margin: 0 !important; } /* W modalu nie chcemy chromu strony: gornego paska z breadcrumbem i wyszukiwarka * (tytul i tak jest w karcie zadania) ani linku "Powrot do listy" - od zamykania * jest X/Esc/tlo. Bez tego modal dublowal tytul i mial obce pole Search. */ .wl-task-modal-body > header, .wl-task-modal-body [data-wl-back-link] { display: none !important; } .wl-task-modal-body .wl-card { box-shadow: none; } /* Mobile: modal na caly ekran (na waskim ekranie ramka tylko zabiera miejsce). */ @media (max-width: 767px) { .wl-task-modal { padding: 0; } .wl-task-modal-card { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; } } /* ================= MOBILE (<768px) - wg zatwierdzonych makiet ================= * Layout jest projektowany pod desktop, wiec na telefonie naglowki i odstepy * byly ogromne (na ekran wchodzilo kilka pozycji). Ponizej skala typograficzna * i gestosc z makiety; desktop pozostaje bez zmian. !important, bo nadpisujemy * utility Tailwinda. NIE uzywamy klas "arbitrary" (text-[10px]) - nie ma ich w * commitowanym buildzie styles.css. */ @media (max-width: 767px) { /* --- odstepy --- */ #appMain .p-6 { padding: 0.85rem !important; } #appMain .px-6 { padding-left: 0.85rem !important; padding-right: 0.85rem !important; } #appMain .py-6 { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; } #appMain .p-4 { padding: 0.7rem !important; } /* .m-6 CELOWO NIE RUSZAMY: layout ma juz regule .wl-card.m-6 { margin:0 } * (karta na pelna szerokosc na telefonie). Moj wczesniejszy '#appMain .m-6' * mial wyzsza specyficznosc (id+klasa) i przywracal marginesy = zmarnowane * miejsce po bokach. */ #appMain .gap-6 { gap: 0.7rem !important; } #appMain .mb-6 { margin-bottom: 0.7rem !important; } #appMain .mb-4 { margin-bottom: 0.6rem !important; } #appMain .space-y-6 > * + * { margin-top: 0.7rem !important; } #appMain .space-y-4 > * + * { margin-top: 0.5rem !important; } #appMain .space-y-3 > * + * { margin-top: 0.4rem !important; } /* --- skala typograficzna (makieta, sekcja 05) --- */ #appMain .text-3xl { font-size: 1.25rem !important; line-height: 1.25 !important; letter-spacing: -0.01em; } #appMain .text-2xl { font-size: 1.15rem !important; line-height: 1.3 !important; letter-spacing: -0.01em; } #appMain .text-xl { font-size: 1.06rem !important; line-height: 1.3 !important; letter-spacing: -0.01em; } #appMain .text-lg { font-size: 0.95rem !important; line-height: 1.4 !important; } #appMain h1, #appMain h2 { line-height: 1.25; } /* Naglowek ekranu: ZAWSZE jedna linia (dlugi tytul zadania rozpychal pasek * na trzy linie i wchodzil pod przycisk zamkniecia). */ #appMain > header h1 { font-size: 0.95rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #appMain > header { padding-left: 0.6rem !important; padding-right: 0.6rem !important; gap: 0.4rem; } /* --- wiersze list: 40px zamiast ~60px --- */ #appMain .py-4 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } #appMain .py-3 { padding-top: 0.42rem !important; padding-bottom: 0.42rem !important; } /* --- czat: czytelniejsza tresc, cyfry w kolumnie --- */ #messages-list .wl-msg-body { font-size: 0.9rem !important; line-height: 1.45 !important; } #messages-list .message-time { font-variant-numeric: tabular-nums; } /* --- SIDEBAR: segmenty Workspace'y / Wiadomosci (makieta, sekcja 01) --- * Obie listy naraz nie mieszcza sie na telefonie - pokazujemy jedna. */ .wl-sb-seg { display: flex; gap: 4px; padding: 8px 10px 4px; } .wl-sb-seg-btn { flex: 1; padding: 7px 0; border-radius: 9px; cursor: pointer; border: 1px solid var(--wl-border); background: var(--wl-surface); color: var(--wl-text-dim); font: 650 12px/1 inherit; font-family: inherit; } .wl-sb-seg-btn.on { background: var(--wl-accent); border-color: var(--wl-accent); color: var(--wl-accent-on); } /* Licznik trafien filtra drzewa - pokazuje, ile wynikow kryje druga zakladka. */ .wl-sb-seg-btn .wl-sb-seg-count { display: inline-block; min-width: 17px; padding: 2px 5px; margin-left: 5px; border-radius: 999px; font-size: 10px; line-height: 1; font-weight: 700; background: var(--wl-accent-soft); color: var(--wl-accent); } .wl-sb-seg-btn.on .wl-sb-seg-count { background: rgba(255, 255, 255, .25); color: inherit; } .wl-sb-seg-btn .wl-sb-seg-count[hidden] { display: none; } [data-wl-sb="dm"] { display: none; } body.wl-sb-dm [data-wl-sb="ws"] { display: none; } body.wl-sb-dm [data-wl-sb="dm"] { display: block; } /* Wiersze list w sidebarze - 40px zamiast ~60px (makieta). */ #sidebar .wl-row, #sidebar .workspace-toggle { padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; } /* Naglowek kanalu: na telefonie nazwa jest juz w gornym pasku, wiec * wewnetrzny tytul + "N osob - prywatny" zabieraly miejsce i byly sciskane * do jednej litery na kolumne. Zostawiamy same akcje. */ #appMain .wl-ch-head-meta { display: none !important; } #appMain .wl-ch-head { padding: 0.5rem 0.6rem !important; } /* --- ZADANIE: szczegoly (status/przypisanie) NAD opisem --- * Na telefonie sidebar ladowal na samym dole, czyli 2-3 przewiniecia do pol, * ktore zmienia sie najczesciej. Reorder samym CSS - bez ruszania szablonu. */ [data-wl-task-grid] { display: flex !important; flex-direction: column; } [data-wl-task-grid] > .lg\:col-span-2 { order: 2; } [data-wl-task-grid] > *:not(.lg\:col-span-2) { order: 1; } /* Tytul zadania: maks. 2 linie (pelny tekst widoczny po tapnieciu = edycja). */ .wl-task-title { font-size: 1.06rem !important; line-height: 1.3 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* --- TABLICA: jedna kolumna na ekran, z zatrzymaniem przy krawedzi --- */ [data-wl-board-scroller] { scroll-snap-type: x mandatory; } [data-wl-board-scroller] .w-80 { width: 82vw !important; scroll-snap-align: start; min-height: 340px !important; } } /* Segmenty sidebara istnieja tylko na telefonie (na desktopie obie listy * mieszcza sie naraz). MUSI byc min-width, nie goly selektor: ta regula stoi PO * bloku mobilnym, wiec przy rownej specyficznosci wygralaby takze na telefonie. */ @media (min-width: 768px) { .wl-sb-seg { display: none; } [data-wl-sb="dm"] { display: block; } } /* Licznik nieprzeczytanych (przelacznik zespolow). WLASNA klasa, nie utility * Tailwinda: text-[10px]/px-1.5 to klasy "arbitrary", ktorych NIE MA w * commitowanym buildzie styles.css - badge zostawal bez rozmiaru i paddingu * (wygladal na splaszczony). Tutaj mamy pewny, okragly ksztalt. */ .wl-unread-pill { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .wl-unread-pill.hidden { display: none; } /* Kolorowa kropka w comboboxie (np. status obecnosci):