/* * Nowy wygląd terminalu na komputerze (03.11.2026, makiety Kamila) - `docs/PROJEKT_NOWY_WYGLAD.md`. * * Wszystko pod `html.nowy-wyglad` (klasa stawiana w przez shim pamięci kont, tylko okno główne * na komputerze, przełącznik w Ustawieniach → Wygląd) i tylko szerzej niż próg telefonu. Bez klasy żadna * reguła tego pliku nie działa - wygląd dokładnie jak dotąd. Elementy ramy (`#nwRail`, `#nwOkna`, * `#nwDok`, menu) buduje leniwy `ts/nowy-wyglad.ts`; do jego wczytania miejsce na nie jest * już zarezerwowane (bez skoku układu). * * Węzły aplikacji (wykresy, lista obserwowanych, nastroje, kanał alertów, okna, karty DANE) to TE SAME * elementy co w starym wyglądzie - ten arkusz tylko je układa. `!important` tam, gdzie moduły piszą * styl w linii (`layout-manager.ts` - kolumny `.main` i `display` lewej kolumny, `dostep-funkcji.ts`). */ /* Elementy ramy poza nowym wyglądem nie istnieją dla oka. */ #nwRail, #nwOkna, #nwDok, #nwWysuwGlowa, .nw-tylko-nowy { display: none; } /* Listy (menu użytkownika, „+N ▾”, „+ Dodaj”) mają atrybut `hidden` do otwarcia; poza nowym wyglądem zawsze zamknięte. */ html:not(.nowy-wyglad) .nw-lista { display: none !important; } @media (min-width: 901px) { html.nowy-wyglad { --nw-rail: 68px; /* „Większy tekst” w nowym wyglądzie o punkt niżej (Kamil 03.11, 21:59): 11 / 10 px zamiast 12 / 11 (`czytelnosc.ts`). */ --czyt-12: 11px; --czyt-11: 10px; --nw-gora: 41px; --nw-wysuw-szer: 300px; --nw-dok-szer: 420px; --nw-dok-zwiniety: 64px; --nw-akcent: var(--blue, #2f81f7); } /* ── Rama: górny pasek na całą szerokość (logo jak dotąd - Kamil 03.11, 21:25), lewe menu pod nim ── */ html.nowy-wyglad .app > .main { margin-left: var(--nw-rail); } html.nowy-wyglad #nwRail { display: flex; flex-direction: column; align-items: stretch; position: fixed; left: 0; top: var(--nw-gora); bottom: var(--pos-bar-h, 28px); width: var(--nw-rail); background: var(--bg-2); border-right: 1px solid var(--border); z-index: 60; box-sizing: border-box; padding: 6px 0 6px; gap: 2px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } html.nowy-wyglad #nwRail::-webkit-scrollbar { display: none; } /* Logo zostaje tam, gdzie było, w tym samym wyglądzie (Kamil 03.11, 21:25: „logo musi pozostać to samo”). Skróty spod logo (Dashboard, ustawienia, portfel, nowe okno robocze) są w menu użytkownika, lewym menu i w OKNA („+”). */ html.nowy-wyglad .header-left { width: auto !important; min-width: 0; justify-content: flex-start; } html.nowy-wyglad .header-left > #hdrSkrot, html.nowy-wyglad .header-left > .hamburger { display: none !important; } html.nowy-wyglad .nw-poz { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin: 0 2px; padding: 7px 0 6px; min-height: 50px; box-sizing: border-box; background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; color: var(--text-2); font-weight: 600; font-size: 11px; line-height: 1.2; font-family: inherit; text-align: center; } html.nowy-wyglad .nw-poz[hidden] { display: none; } html.nowy-wyglad .nw-poz svg { width: 20px; height: 20px; flex-shrink: 0; } /* Etykieta do dwóch linii („Okna i układy”) - „Większy tekst” podnosi ją do 12 px, ucinanie gubiło słowa. */ html.nowy-wyglad .nw-poz .nw-etykieta { max-width: 100%; overflow: hidden; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: manual; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; } html.nowy-wyglad .nw-poz:hover, html.nowy-wyglad .nw-poz:focus-visible { background: var(--bg-3); color: var(--text-1); outline: none; } html.nowy-wyglad .nw-poz[aria-pressed="true"], html.nowy-wyglad .nw-poz[aria-expanded="true"] { background: color-mix(in srgb, var(--nw-akcent) 16%, transparent); border-color: color-mix(in srgb, var(--nw-akcent) 45%, transparent); color: var(--text-1); } html.nowy-wyglad .nw-poz .nw-znaczek { position: absolute; top: 3px; right: 9px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--nw-akcent); color: #fff; font: 700 10px/16px 'JetBrains Mono', monospace; } html.nowy-wyglad .nw-poz .nw-znaczek:empty { display: none; } html.nowy-wyglad #nwRail .nw-odstep { flex: 1 1 auto; min-height: 8px; } html.nowy-wyglad #nwRail .nw-kreska { height: 1px; background: var(--border); margin: 4px 10px; flex-shrink: 0; } /* Menu Narzędzia przy lewym menu: lista wysuwa się W PRAWO od pozycji (`menu-zaawansowane.ts::ustawKotwice`). „Okna i układy” i „Wskaźniki” mają własne pozycje w lewym menu - w Narzędziach ich nie ma (decyzje Kamila). */ html.nowy-wyglad #menuZaawansowanePanel #btnOknaUklady, html.nowy-wyglad #menuZaawansowanePanel #btnOknaUklady + .menu-zaaw-sep, html.nowy-wyglad #menuZaawansowanePanel #btnWskaźniki { display: none !important; } /* ── Górny pasek: OKNA z lewej, stan / licznik fps / użytkownik z prawej ─ */ html.nowy-wyglad .header-bottom-row, html.nowy-wyglad #odswiezTerminalBtn, html.nowy-wyglad .header-user-pill > button:not(.nw-uzytkownik) { display: none !important; } html.nowy-wyglad .header-user-pill > .nw-uzytkownik { display: inline-flex; } html.nowy-wyglad .header-top-row { border-bottom: 0; padding: 3px 10px; min-height: 40px; flex-wrap: nowrap; gap: 10px; } html.nowy-wyglad .header-top-row > nav { flex-shrink: 0; } html.nowy-wyglad .header-top-row > div:last-child { flex-wrap: nowrap; flex-shrink: 0; } html.nowy-wyglad #nwOkna { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden; } html.nowy-wyglad #nwOkna .nw-okna-et { font-weight: 700; font-size: 10px; line-height: 1; font-family: inherit; letter-spacing: .08em; color: var(--text-3); flex-shrink: 0; } html.nowy-wyglad #nwOkna .nw-okna-lista { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; flex: 0 1 auto; } html.nowy-wyglad .nw-okno { display: inline-flex; align-items: stretch; flex-shrink: 0; max-width: 220px; height: 26px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-3); overflow: hidden; } html.nowy-wyglad .nw-okno[hidden] { display: none; } html.nowy-wyglad .nw-okno > button { background: none; border: 0; color: var(--text-1); font-weight: 500; font-size: 11px; line-height: 1; font-family: inherit; cursor: pointer; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; } html.nowy-wyglad .nw-okno > button:hover, html.nowy-wyglad .nw-okno > button:focus-visible { background: var(--bg-4); outline: none; } html.nowy-wyglad .nw-okno .nw-okno-tytul { overflow: hidden; text-overflow: ellipsis; } html.nowy-wyglad .nw-okno .nw-stan { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); } html.nowy-wyglad .nw-okno[data-stan="aktywne"] { border-color: color-mix(in srgb, var(--nw-akcent) 55%, var(--border)); } html.nowy-wyglad .nw-okno[data-stan="aktywne"] .nw-stan { background: var(--green, #26a69a); } html.nowy-wyglad .nw-okno[data-stan="osobne"] .nw-stan { background: var(--nw-akcent); } html.nowy-wyglad .nw-okno .nw-okno-x { color: var(--text-3); padding: 0 7px; border-left: 1px solid var(--border); font-size: 10px; } html.nowy-wyglad .nw-okno .nw-okno-x:hover { background: #ef5350; color: #fff; } html.nowy-wyglad .nw-okna-wiecej, html.nowy-wyglad .nw-okna-nowe { flex-shrink: 0; height: 26px; padding: 0 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-3); color: var(--text-2); font-weight: 600; font-size: 11px; line-height: 1; font-family: inherit; cursor: pointer; white-space: nowrap; } html.nowy-wyglad .nw-okna-wiecej[hidden] { display: none; } html.nowy-wyglad .nw-okna-wiecej:hover, html.nowy-wyglad .nw-okna-nowe:hover { background: var(--bg-4); color: var(--text-1); } html.nowy-wyglad .nw-okna-pusto { color: var(--text-3); font-size: 10px; white-space: nowrap; } html.nowy-wyglad .nw-okna-pusto[hidden] { display: none; } /* Pasek „Okna:” na dole zastąpiony przez OKNA u góry (te same okna, ta sama logika `okna-zwiniete.ts`). */ html.nowy-wyglad #oknaZwiniete { display: none !important; } /* Menu użytkownika (Portfel, Dashboard, Uwagi, język, Wyloguj) i lista „+N ▾” - wspólny wygląd list. */ html.nowy-wyglad .nw-uzytkownik { background: none; border: 0; color: var(--text-2); cursor: pointer; padding: 0 2px; font-weight: 600; font-size: 10px; line-height: 1; font-family: inherit; } html.nowy-wyglad .nw-uzytkownik:hover { color: var(--text-1); } html.nowy-wyglad .nw-lista { display: flex; flex-direction: column; position: fixed; z-index: 9100; min-width: 200px; max-width: min(320px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow-y: auto; padding: 6px; box-sizing: border-box; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); } html.nowy-wyglad .nw-lista[hidden] { display: none; } html.nowy-wyglad .nw-lista > button, html.nowy-wyglad .nw-lista > a, html.nowy-wyglad .nw-lista .nw-lista-wyniki > button { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--text-1); font-weight: 500; font-size: 11px; line-height: 1.2; font-family: inherit; text-align: left; cursor: pointer; text-decoration: none; } html.nowy-wyglad .nw-lista > button[hidden], html.nowy-wyglad .nw-lista > a[hidden] { display: none; } html.nowy-wyglad .nw-lista .nw-lista-wyniki { display: flex; flex-direction: column; } html.nowy-wyglad .nw-lista .nw-lista-wyniki > button:hover, html.nowy-wyglad .nw-lista .nw-lista-wyniki > button:focus-visible { background: var(--bg-4); outline: none; } html.nowy-wyglad .nw-lista > button:hover, html.nowy-wyglad .nw-lista > a:hover, html.nowy-wyglad .nw-lista > button:focus-visible, html.nowy-wyglad .nw-lista > a:focus-visible { background: var(--bg-4); outline: none; } html.nowy-wyglad .nw-lista .nw-lista-sep { height: 1px; background: var(--border); margin: 4px 2px; flex-shrink: 0; } html.nowy-wyglad .nw-lista .nw-lista-et { padding: 6px 10px 2px; color: var(--text-3); font-weight: 700; font-size: 10px; line-height: 1; font-family: inherit; letter-spacing: .06em; text-transform: uppercase; } html.nowy-wyglad .nw-lista .nw-jezyki { display: flex; gap: 4px; padding: 4px 8px 6px; } html.nowy-wyglad .nw-lista .nw-jezyki button { flex: 1; padding: 5px 0; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-3); color: var(--text-2); font-weight: 700; font-size: 10px; line-height: 1; font-family: inherit; cursor: pointer; } html.nowy-wyglad .nw-lista .nw-jezyki button[aria-pressed="true"] { border-color: var(--nw-akcent); color: var(--text-1); } /* ── Środek: kolumny `.main` = [wysuw przypięty] [wykresy] [prawy panel] ─ */ html.nowy-wyglad .main { grid-template-columns: 0px minmax(0, 1fr) var(--nw-dok-szer) !important; } html.nowy-wyglad.nw-dok-zwiniety .main { grid-template-columns: 0px minmax(0, 1fr) var(--nw-dok-zwiniety) !important; } html.nowy-wyglad.nw-przypiety .main { grid-template-columns: var(--nw-wysuw-szer) minmax(0, 1fr) var(--nw-dok-szer) !important; } html.nowy-wyglad.nw-przypiety.nw-dok-zwiniety .main { grid-template-columns: var(--nw-wysuw-szer) minmax(0, 1fr) var(--nw-dok-zwiniety) !important; } html.nowy-wyglad .main > .chart-panel { grid-column: 2; grid-row: 1; min-width: 0; } html.nowy-wyglad .main > .layout-resize-left, html.nowy-wyglad .main > .layout-resize-right, html.nowy-wyglad .main > [class*="layout-resize"] { display: none !important; } /* Lewa kolumna = wysuwany panel „Rynki” (lista obserwowanych) albo „Nastroje” (nastroje + kanał alertów). Widżety zostają w `#leftPanel` (arkusz i moduły liczą na `#leftPanel > .widget[...]`). */ html.nowy-wyglad #leftPanel { display: none !important; } html.nowy-wyglad #leftPanel.nw-wysuniety { display: flex !important; flex-direction: column; overflow: hidden !important; position: fixed; left: var(--nw-rail); top: var(--nw-gora); bottom: var(--pos-bar-h, 28px); width: var(--nw-wysuw-szer); z-index: 58; background: var(--bg-2); border-right: 1px solid var(--border); box-shadow: 8px 0 24px rgba(0, 0, 0, .35); } html.nowy-wyglad.nw-przypiety #leftPanel.nw-wysuniety { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 100%; min-height: 0; grid-column: 1; grid-row: 1; box-shadow: none; z-index: auto; } html.nowy-wyglad #leftPanel[data-nw-wysuw="rynki"] > .widget:not([data-widget="watchlist"]), html.nowy-wyglad #leftPanel[data-nw-wysuw="nastroje"] > .widget[data-widget="watchlist"] { display: none !important; } html.nowy-wyglad #leftPanel[data-nw-wysuw="rynki"] > .widget[data-widget="watchlist"] { flex: 1 1 auto !important; min-height: 0; } html.nowy-wyglad #leftPanel > #nwWysuwGlowa { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--bg-2); } html.nowy-wyglad #nwWysuwGlowa strong { flex: 1; font-weight: 700; font-size: 11px; line-height: 1; font-family: inherit; letter-spacing: .04em; color: var(--text-1); } html.nowy-wyglad #nwWysuwGlowa button { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; } html.nowy-wyglad #nwWysuwGlowa button svg { width: 15px; height: 15px; } html.nowy-wyglad #nwWysuwGlowa button:hover { background: var(--bg-4); color: var(--text-1); } html.nowy-wyglad #nwWysuwGlowa button[aria-pressed="true"] { color: var(--nw-akcent); border-color: color-mix(in srgb, var(--nw-akcent) 45%, transparent); } /* Przyciski 1 / 2 / 4 z nagłówka listy obserwowanych są w pasku WYKRESY. */ html.nowy-wyglad #wlLayoutBtns { display: none !important; } /* „DANE” z lewego menu: ta sama lista kart, rozwinięta szerzej i wyżej, przy menu. */ html.nowy-wyglad #kafelkiPasek.nw-rozwiniety { left: calc(var(--nw-rail) + 8px) !important; right: auto !important; top: calc(var(--nw-gora) + 6px) !important; width: min(560px, calc(100vw - var(--nw-rail) - 24px)) !important; max-height: calc(100vh - var(--nw-gora) - var(--pos-bar-h, 28px) - 16px) !important; } /* Pasek WYKRESY usunięty (Kamil 03.11, 21:44): 1 / 2 / 4 i wspólny krzyżyk są w „Okna i układy”. */ /* ── „Okna i układy” (`#layoutModal`) i Ustawienia (`#settingsModal`) - panele wysuwane z boku, jak Rynki ── */ html.nowy-wyglad #layoutModal, html.nowy-wyglad #settingsModal { top: var(--nw-gora) !important; left: var(--nw-rail) !important; right: auto !important; bottom: var(--pos-bar-h, 28px) !important; width: min(460px, calc(100vw - var(--nw-rail) - 24px)) !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; border-top: 0; border-left: 0; z-index: 59; box-shadow: 8px 0 24px rgba(0, 0, 0, .35); transform: translateX(-12px); transition: transform .16s ease, opacity .16s ease; } html.nowy-wyglad #settingsModal { width: min(480px, calc(100vw - var(--nw-rail) - 24px)) !important; } html.nowy-wyglad #layoutModal.show, html.nowy-wyglad #settingsModal.show { display: flex !important; flex-direction: column; transform: none; } html.nowy-wyglad #layoutModal > .alerts-header, html.nowy-wyglad #settingsModal > .alerts-header { flex-shrink: 0; } html.nowy-wyglad #layoutModal #wmBody, html.nowy-wyglad #settingsModal > div:not(.alerts-header) { max-height: none !important; flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* Nagłówek wykresu o 4 px niższy (Kamil 03.11, 21:59: „górne ramki wykresu za wysokie”): z „Większym tekstem” 28 → 24 px, pola i przyciski 20 px. Bez „Większego tekstu” nagłówek ma 20 px jak dotąd. */ html.nowy-wyglad.wiekszy-tekst .cp-hdr.widget-header { min-height: 24px !important; padding-top: 1px !important; padding-bottom: 1px !important; row-gap: 1px; } html.nowy-wyglad.wiekszy-tekst .cp-hdr .cp-ex-sel, html.nowy-wyglad.wiekszy-tekst .cp-hdr .cp-sym-sel, html.nowy-wyglad.wiekszy-tekst .cp-hdr .cp-tf-sel { height: 20px !important; min-height: 20px !important; } html.nowy-wyglad.wiekszy-tekst .cp-hdr .cpb { min-height: 20px !important; min-width: 20px !important; } /* ── Prawy panel (dok) z zakładkami kart DANE ──────────────────────── */ html.nowy-wyglad #nwDok { display: flex; flex-direction: column; grid-column: 3; grid-row: 1; min-width: 0; min-height: 0; position: relative; background: var(--bg-2); overflow: hidden; } html.nowy-wyglad #nwDok .nw-dok-uchwyt { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; } html.nowy-wyglad #nwDok .nw-dok-uchwyt:hover, html.nowy-wyglad #nwDok .nw-dok-uchwyt.nw-ciagnie { background: color-mix(in srgb, var(--nw-akcent) 50%, transparent); } html.nowy-wyglad #nwDok .nw-dok-zakladki { display: flex; align-items: stretch; gap: 2px; padding: 0 6px; flex-shrink: 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; min-height: 34px; } html.nowy-wyglad #nwDok .nw-zakladka { display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border: 0; border-bottom: 2px solid transparent; flex-shrink: 0; background: none; color: var(--text-2); font-weight: 600; font-size: 11px; line-height: 1; font-family: inherit; cursor: pointer; white-space: nowrap; } html.nowy-wyglad #nwDok .nw-zakladka[aria-selected="true"] { color: var(--text-1); border-bottom-color: var(--nw-akcent); } html.nowy-wyglad #nwDok .nw-zakladka:hover { color: var(--text-1); } html.nowy-wyglad #nwDok .nw-zakladka svg { width: 13px; height: 13px; } /* ✕ tylko na wybranej zakładce - na pozostałych nie zabiera miejsca (zakładki mieszczą się w 420 px). */ html.nowy-wyglad #nwDok .nw-zakladka .nw-zak-x { opacity: .55; font-size: 10px; padding: 2px; border-radius: 3px; display: none; } html.nowy-wyglad #nwDok .nw-zakladka[aria-selected="true"] .nw-zak-x { display: inline; } html.nowy-wyglad #nwDok .nw-zakladka .nw-zak-x:hover { opacity: 1; background: var(--bg-4); } html.nowy-wyglad #nwDok .nw-dok-narzedzia { margin-left: auto; display: flex; align-items: center; gap: 2px; padding-left: 6px; flex-shrink: 0; } html.nowy-wyglad #nwDok .nw-dok-narzedzia button, html.nowy-wyglad #nwDok .nw-dok-pion button { height: 26px; min-width: 26px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; font-weight: 600; font-size: 10px; line-height: 1; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } html.nowy-wyglad #nwDok .nw-dok-narzedzia button:hover, html.nowy-wyglad #nwDok .nw-dok-pion button:hover { background: var(--bg-4); color: var(--text-1); } html.nowy-wyglad #nwDok .nw-dok-narzedzia svg, html.nowy-wyglad #nwDok .nw-dok-pion svg { width: 15px; height: 15px; } /* Zakładka „Moje karty”: stos kart DANE („do stosu”) - w nowym wyglądzie w prawym panelu, nie między wykresami. */ html.nowy-wyglad #nwDok .nw-dok-stos { display: none; flex: 1 1 auto; min-height: 0; overflow: hidden; } html.nowy-wyglad #nwDok.nw-na-stosie .nw-dok-stos { display: flex; } html.nowy-wyglad #nwDok.nw-na-stosie .nw-dok-tresc { display: none; } html.nowy-wyglad #nwDok .nw-dok-stos > #kafelkiStos { width: auto !important; flex: 1 1 auto; min-width: 0; height: 100%; border-left: 0; } html.nowy-wyglad #nwDok .nw-dok-stos > #kafelkiStosUchwyt { display: none !important; } html.nowy-wyglad #nwDok .nw-zakladka .nw-licznik { font: 700 10px/1 'JetBrains Mono', monospace; color: var(--text-3); } html.nowy-wyglad #nwDok .nw-dok-tresc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 1px; background: var(--border); overflow: hidden; } html.nowy-wyglad #nwDok .nw-pole { flex: var(--nw-waga, 1) 1 0; min-height: 120px; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-2); position: relative; } html.nowy-wyglad #nwDok .nw-pole > .kafelek-karta { flex: 1 1 auto; min-height: 0; height: auto !important; width: auto !important; margin: 0 !important; border-radius: 0 !important; } html.nowy-wyglad #nwDok .nw-pole-pusto { padding: 16px; color: var(--text-3); font-size: 10px; text-align: center; margin: auto; } html.nowy-wyglad #nwDok .nw-dok-pion { display: none; } /* Zwinięty: pionowy pasek - zakładki jako ikony. Karty zamknięte (nic nie odpytuje). */ html.nowy-wyglad.nw-dok-zwiniety #nwDok > :not(.nw-dok-pion) { display: none !important; } html.nowy-wyglad.nw-dok-zwiniety #nwDok .nw-dok-pion { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; height: 100%; box-sizing: border-box; } html.nowy-wyglad .nw-dodaj-lista .nw-lista-szukaj { margin: 2px 4px 6px; padding: 6px 8px; background: var(--bg-3); color: var(--text-1); border: 1px solid var(--border); border-radius: 6px; font-size: 10px; } } /* Niski ekran (np. 1024 × 768): 11 pozycji menu bez przewijania. */ @media (min-width: 901px) and (max-height: 860px) { html.nowy-wyglad .nw-poz { min-height: 44px; padding: 4px 0 3px; gap: 2px; } html.nowy-wyglad .nw-poz svg { width: 18px; height: 18px; } } /* Okno o szerokości 901-1279 px: węższe kolumny, prawy panel domyślnie zwinięty (decyzja w `nowy-wyglad.ts`). */ @media (min-width: 901px) and (max-width: 1279px) { html.nowy-wyglad { --nw-rail: 64px; --nw-wysuw-szer: 270px; } html.nowy-wyglad .nw-poz { margin: 0 2px; font-size: 10px; } }