/* Dock i okna nad konsola Many Minds. Wszystko pod #mm-dock albo z prefiksem dk-, zeby nie ruszyc stylow samej konsoli. Kolory z tokenow os.css. */ body.dk-ma-dock[data-dk-poz="dol"][data-dk-ukryj="0"] { padding-bottom: calc(var(--dk-rozmiar) + 40px); } body.dk-ma-dock #app { transition: transform .45s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 0; } #mm-dock { font-family: var(--sans); color: var(--ink); } #mm-dock button { font: inherit; } /* Dock */ #mm-dock .dk-dock { position: fixed; z-index: 9400; display: flex; align-items: flex-end; gap: 6px; padding: 7px 9px; border-radius: 22px; background: var(--mm-tlo-rgba-22-20-37-62); border: 1px solid var(--line2); box-shadow: var(--shadow-lg); transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s; } #mm-dock .dk-dock.poz-dol { bottom: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 20px); } #mm-dock .dk-dock.poz-lewo, #mm-dock .dk-dock.poz-prawo { top: 50%; transform: translateY(-50%); flex-direction: column; align-items: flex-start; max-height: calc(100vh - 20px); } #mm-dock .dk-dock.poz-lewo { left: 10px; } #mm-dock .dk-dock.poz-prawo { right: 10px; align-items: flex-end; } #mm-dock .dk-dock.poz-dol.ukryty { transform: translate(-50%, calc(100% + 24px)); opacity: .0; } #mm-dock .dk-dock.poz-lewo.ukryty { transform: translate(calc(-100% - 24px), -50%); opacity: 0; } #mm-dock .dk-dock.poz-prawo.ukryty { transform: translate(calc(100% + 24px), -50%); opacity: 0; } /* waski pasek przy krawedzi: najechanie wysuwa Dock */ #mm-dock .dk-strefa { position: fixed; z-index: 9390; } #mm-dock .dk-strefa.poz-dol { left: 0; right: 0; bottom: 0; height: 8px; } #mm-dock .dk-strefa.poz-lewo { left: 0; top: 0; bottom: 0; width: 8px; } #mm-dock .dk-strefa.poz-prawo { right: 0; top: 0; bottom: 0; width: 8px; } #mm-dock .dk-ik { position: relative; flex: none; border-radius: 24%; border: 1px solid var(--line); cursor: pointer; display: grid; place-items: center; background: linear-gradient(160deg, var(--mm-tlo-23203a), var(--mm-tlo-15131f)); transition: transform .09s linear, opacity .2s; transform-origin: center bottom; padding: 0; line-height: 1; } #mm-dock .dk-ik em { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 13px; background: var(--mm-tlo-rgba-11-10-18-92); border: 1px solid var(--line2); padding: 4px 9px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .12s; color: var(--ink); } #mm-dock .poz-lewo .dk-ik { transform-origin: left center; } #mm-dock .poz-prawo .dk-ik { transform-origin: right center; } #mm-dock .poz-lewo .dk-ik em { bottom: auto; top: 50%; left: calc(100% + 12px); transform: translateY(-50%); } #mm-dock .poz-prawo .dk-ik em { bottom: auto; top: 50%; left: auto; right: calc(100% + 12px); transform: translateY(-50%); } #mm-dock .dk-ik:hover em { opacity: 1; } #mm-dock .dk-ik.uruch::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink); } #mm-dock .poz-lewo .dk-ik.uruch::after { bottom: auto; top: 50%; left: -6px; margin: -2px 0 0; } #mm-dock .poz-prawo .dk-ik.uruch::after { bottom: auto; top: 50%; left: auto; right: -6px; margin: -2px 0 0; } #mm-dock .dk-ik.szary span { filter: grayscale(1); opacity: .5; } #mm-dock .dk-ik.ciagnie { opacity: .25; } #mm-dock .dk-ik.miejsce { box-shadow: -10px 0 0 -6px var(--purple); } #mm-dock .dk-luka { flex: none; border-radius: 24%; border: 1px dashed var(--purple); } #mm-dock .dk-orion img { width: 60%; height: 60%; } #mm-dock .dk-orion.na { box-shadow: 0 0 0 1px var(--purple), 0 0 18px var(--mm-cien-rgba-183-166-245-35); } #mm-dock .dk-launch { background: var(--mm-tlo-rgba-245-242-234-05); color: var(--muted); font-size: 22px; } #mm-dock .dk-plak { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--mm-tlo-e44e53); color: var(--mm-tekst-fff); font-size: 11px; display: grid; place-items: center; padding: 0 4px; } #mm-dock .dk-sep { flex: none; width: 1px; align-self: stretch; margin: 4px 3px; background: var(--line2); } #mm-dock .poz-lewo .dk-sep, #mm-dock .poz-prawo .dk-sep { width: auto; height: 1px; margin: 3px 4px; } /* menu kontekstowe i ustawienia */ #mm-dock .dk-menu { position: fixed; z-index: 9700; width: 270px; padding: 6px; border-radius: 12px; background: var(--mm-tlo-rgba-28-25-44-97); border: 1px solid var(--line2); box-shadow: var(--shadow-lg); backdrop-filter: blur(20px); display: flex; flex-direction: column; font-size: 13.5px; animation: dk-fade .12s; } #mm-dock .dk-menu > b { padding: 6px 10px 4px; font-size: 12px; color: var(--dim); font-weight: 600; } #mm-dock .dk-menu > button { text-align: left; background: none; border: 0; color: var(--ink); padding: 7px 10px; border-radius: 7px; cursor: pointer; } #mm-dock .dk-menu > button:hover { background: var(--mm-tlo-4542b4); } #mm-dock .dk-menu hr { border: 0; border-top: 1px solid var(--line2); margin: 5px 4px; width: auto; } #mm-dock .dk-ust label { display: flex; align-items: center; gap: 8px; padding: 7px 10px; color: var(--ink); } #mm-dock .dk-ust input[type=range] { flex: 1; accent-color: var(--mm-tlo-b7a6f5); } #mm-dock .dk-ust input[type=checkbox] { accent-color: var(--mm-tlo-b7a6f5); } #mm-dock .dk-poz { display: flex; gap: 4px; align-items: center; padding: 7px 10px; flex-wrap: wrap; } #mm-dock .dk-poz button { background: transparent; border: 1px solid var(--line2); color: var(--muted); border-radius: 7px; padding: 3px 8px; cursor: pointer; font-size: 12.5px; } #mm-dock .dk-poz button.on { background: var(--ink); color: var(--bg); } #mm-dock .dk-ust small { padding: 6px 10px 4px; color: var(--dim); line-height: 1.4; } /* wszystkie aplikacje */ #mm-dock .dk-launchpad { position: fixed; inset: 0; z-index: 9300; background: var(--mm-tlo-rgba-11-10-18-6); overflow: auto; animation: dk-fade .2s; padding: 50px 40px 140px; } #mm-dock .dk-lp-in { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; } #mm-dock .dk-lp-nag { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; } #mm-dock .dk-lp-nag h2 { margin: 0; font-size: 28px; font-weight: 800; } #mm-dock .dk-lp-nag .dk-ghost { margin-left: auto; } #mm-dock .dk-launchpad h3 { margin: 0 0 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 500; } #mm-dock .dk-lp-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 12px; } #mm-dock .dk-lp-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 12.5px; color: var(--muted); } #mm-dock .dk-lp-ik { width: 66px; height: 66px; border-radius: 24%; border: 1px solid var(--line2); background: linear-gradient(160deg, var(--mm-tlo-2a2644), var(--mm-tlo-15131f)); font-size: 32px; cursor: pointer; transition: transform .15s; } #mm-dock .dk-lp-ik:hover { transform: scale(1.08); } #mm-dock .dk-lp-pin { position: absolute; top: -6px; right: calc(50% - 42px); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: var(--mm-tlo-2a2740); border: 1px solid var(--line2); color: var(--ink); cursor: pointer; font-size: 13px; } #mm-dock .dk-lp-pin.on { background: var(--mm-tlo-2e7d4f); border-color: var(--mm-ramka-5bc77e); } /* wspolne */ #mm-dock .dk-tresc { overflow: auto; flex: 1; min-height: 0; padding: 26px 30px 90px; } #mm-dock .dk-ghost { background: transparent; border: 1px solid var(--line2); color: var(--ink); border-radius: 999px; padding: 6px 13px; cursor: pointer; font-size: 13px; } #mm-dock .dk-ghost:hover { background: var(--mm-tlo-rgba-245-242-234-07); } #mm-dock .dk-flex { flex: 1; } @keyframes dk-fade { from { opacity: 0; } to { opacity: 1; } } /* 1: okno */ #mm-dock .dk-tlo-rozmyte { position: fixed; inset: 0; z-index: 9000; background: var(--mm-tlo-rgba-11-10-18-52); } #mm-dock .dk-okno { position: fixed; z-index: 9100; inset: 28px; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--mm-tlo-rgba-18-16-28-96); border: 1px solid var(--line2); box-shadow: 0 30px 90px var(--mm-cien-rgba-0-0-0-6); transition: none; } #mm-dock .dk-okno.duze { inset: 0; border-radius: 0; } body[data-dk-ukryj="0"][data-dk-poz="dol"] #mm-dock .dk-okno { bottom: calc(var(--dk-rozmiar) + 40px); } body[data-dk-ukryj="0"][data-dk-poz="lewo"] #mm-dock .dk-okno { left: calc(var(--dk-rozmiar) + 44px); } body[data-dk-ukryj="0"][data-dk-poz="prawo"] #mm-dock .dk-okno { right: calc(var(--dk-rozmiar) + 44px); } #mm-dock .dk-pasek { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--mm-tlo-rgba-255-255-255-03); } #mm-dock .dk-pasek b { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink); } #mm-dock .dk-swiatla { display: flex; gap: 8px; } #mm-dock .dk-swiatla i { width: 12px; height: 12px; border-radius: 50%; cursor: pointer; } #mm-dock .dk-swiatla .r { background: var(--mm-tlo-ff5f57); } #mm-dock .dk-swiatla .y { background: var(--mm-tlo-febc2e); } #mm-dock .dk-swiatla .g { background: var(--mm-tlo-28c840); } /* tresc aplikacji */ #mm-dock .ekran { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } #mm-dock .naglowek-ekr { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } #mm-dock .naglowek-ekr h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; } #mm-dock .muted { color: var(--muted); } #mm-dock .dim { color: var(--dim); font-size: 12.5px; } #mm-dock .mono { font-family: var(--mono); } #mm-dock .przyklad { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); border: 1px dashed var(--mm-ramka-rgba-255-185-89-5); border-radius: 6px; padding: 2px 7px; } #mm-dock .siatka4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } #mm-dock .siatka3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } #mm-dock .siatka2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } #mm-dock .kafel, #mm-dock .karta { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; } #mm-dock .kafel b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } #mm-dock .kafel small { color: var(--muted); font-size: 12.5px; } #mm-dock .kafel.ok b { color: var(--green); } #mm-dock .kafel.zle b { color: var(--red); } #mm-dock .kafel.uwaga b { color: var(--orange); } #mm-dock .kafel.brak { border-style: dashed; } #mm-dock .kafel.brak b { color: var(--dim); font-size: 17px; } #mm-dock .kn { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); } #mm-dock .kafel .znacznik-dzialu { display: inline-block; margin-left: 6px; padding: 1px 5px; border: 1px solid var(--dim); border-radius: 4px; font-size: 9px; text-transform: none; letter-spacing: normal; } #mm-dock .spark { width: 100%; height: 34px; margin-top: 4px; } #mm-dock .karta h3 { margin: 0 0 6px; font-size: 15px; } #mm-dock .karta p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; } #mm-dock .dk-profil { margin-top: 12px; gap: 12px; } #mm-dock .dk-profil h4 { margin: 0; } #mm-dock .dk-profil label { display: flex; flex-direction: column; gap: 5px; overflow-wrap: anywhere; } #mm-dock .dk-profil input { box-sizing: border-box; width: 100%; max-width: 360px; background: var(--bg); color: var(--ink); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; font: inherit; } #mm-dock .dk-profil input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } #mm-dock .dk-profil .btn { align-self: flex-start; } #mm-dock .karta.dec { border-color: var(--mm-ramka-rgba-183-166-245-4); background: linear-gradient(160deg, var(--mm-tlo-rgba-69-66-180-22), var(--card)); } #mm-dock .karta.pusta { padding: 40px; align-items: flex-start; } #mm-dock .tor { flex: 1; height: 8px; border-radius: 4px; background: var(--mm-tlo-rgba-245-242-234-08); overflow: hidden; min-width: 80px; } #mm-dock .tor i { display: block; height: 100%; background: var(--grad); border-radius: 4px; } #mm-dock .pasek-kanalu { display: flex; align-items: center; gap: 14px; font-size: 14px; } #mm-dock .pasek-kanalu span { width: 190px; color: var(--muted); } #mm-dock .pasek-kanalu b { width: 44px; text-align: right; } #mm-dock .lista-kart { display: flex; flex-direction: column; gap: 8px; } #mm-dock .wiersz-zad { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 14px; } #mm-dock .wiersz-zad > b { flex: 1; font-weight: 600; } /* W waskiej karcie (Brief: cztery karty obok siebie) wiersz zadania lamie sie pod nazwa, zamiast wypychac status i date poza karte. */ #mm-dock .karta .wiersz-zad { flex-wrap: wrap; gap: 6px 10px; } #mm-dock .karta .wiersz-zad > b { flex-basis: 100%; } #mm-dock .chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; } #mm-dock .btn { background: var(--mm-tlo-rgba-245-242-234-06); border: 1px solid var(--line2); color: var(--ink); border-radius: 9px; padding: 6px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; } #mm-dock .btn.pri { background: var(--ink); color: var(--bg); border-color: var(--ink); } #mm-dock .tab { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--card); border-radius: var(--r); overflow: hidden; } #mm-dock .tab th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); font-weight: 500; padding: 12px 16px; border-bottom: 1px solid var(--line); } #mm-dock .tab td { padding: 13px 16px; border-bottom: 1px solid var(--line); } #mm-dock .tab td:last-child { width: 26%; } #mm-dock .petla .duza { font-size: 40px; font-weight: 800; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } #mm-dock .alert { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 12px; background: var(--mm-tlo-rgba-228-78-83-12); border: 1px solid var(--mm-ramka-rgba-245-143-146-4); font-size: 14px; } #mm-dock .alert b { color: var(--red); white-space: nowrap; } #mm-dock .alert .btn { margin-left: auto; } #mm-dock .galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } #mm-dock .miniatura { aspect-ratio: 4/5; border-radius: 10px; display: flex; align-items: flex-end; padding: 8px; font-family: var(--mono); font-size: 11px; } #mm-dock .st { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); } #mm-dock .st-DZIAŁA { color: var(--green); border-color: var(--mm-ramka-rgba-91-199-126-5); } #mm-dock .st-BETA, #mm-dock .st-W-TESTACH { color: var(--orange); } #mm-dock .st-DO-ZBUDOWANIA { color: var(--dim); border-style: dashed; } @media (max-width: 760px) { #mm-dock .dk-okno { inset: 8px; } #mm-dock .dk-tresc { padding: 18px 16px; } } body.dk-ma-dock #gate.hidden { display: none; } /* Konsola z Orionem jako nieruchoma tapeta: na stronie glownej widac tylko ja, wypelnia ekran i nic sie nie przewija. Reszta strony (szybki start, Command Center, moduly, radar, konektory) w tym ukladzie trafia do Docka jako aplikacje. */ html:has(body.dk-ma-dock #viewHome:not(.hiddenview)), body.dk-ma-dock:has(#viewHome:not(.hiddenview)) { height: 100%; overflow: hidden; } body.dk-ma-dock:has(#viewHome:not(.hiddenview)) { padding-bottom: 0 !important; } body.dk-ma-dock #viewHome > :not(.hero) { display: none !important; } body.dk-ma-dock #viewHome { height: calc(100vh - var(--dk-top, 64px)); display: flex; flex-direction: column; padding-top: 14px; padding-bottom: 0; overflow: hidden; } body.dk-ma-dock #viewHome > .hero { flex: 1; min-height: 0; margin-bottom: 0; display: flex; flex-direction: column; } body[data-dk-ukryj="0"][data-dk-poz="dol"].dk-ma-dock #viewHome { height: calc(100vh - var(--dk-top, 64px) - var(--dk-rozmiar) - 30px); } body.dk-ma-dock #viewHome .hero-dol { display: none; } /* Orion bierze cala wolna wysokosc karty; orbita rysuje sie sama do wysokosci obszaru (ekran.js czyta jego wymiary), wiec nie skalujemy jej z zewnatrz. */ body.dk-ma-dock #viewHome #zywyEkran:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 4px -6px 4px; } body.dk-ma-dock #viewHome .zy-scena { flex: 1; min-height: 0; display: flex; flex-direction: column; } body.dk-ma-dock #viewHome .zy-obszar { flex: 1; min-height: 260px; height: auto; } body.dk-ma-dock #viewHome .zy-lista .zy-obszar { overflow: auto; } /* Wiecej miejsca na orbite: opis i przyciski karty schowane (moduly i reszta sa w Docku), mniejsze marginesy, podpowiedzi Oriona w jednym wierszu. */ body.dk-ma-dock #viewHome #heroP, body.dk-ma-dock #viewHome .hero .cta { display: none; } body.dk-ma-dock #viewHome .hero h1 { margin-bottom: 0; } body.dk-ma-dock #viewHome.main { padding: 10px 12px 0; max-width: none; } body.dk-ma-dock #viewHome .hero { padding: 16px 18px 12px; } body.dk-ma-dock #viewHome .zy-wynik p { margin: 4px 0; } body.dk-ma-dock #viewHome .zy-podpowiedzi { flex-wrap: nowrap; overflow: hidden; justify-content: flex-start; margin-top: 8px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } body.dk-ma-dock #viewHome .zy-podpowiedzi > * { flex: none; } #mm-dock .dk-tel-pole { display: flex; gap: 8px; } #mm-dock .dk-tel-pole input { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--line2); border-radius: 10px; color: var(--ink); padding: 9px 11px; font: inherit; font-size: 13px; } #mm-dock .dk-tel-pyt { text-align: left; color: var(--ink); cursor: pointer; font-size: 13px; } /* lider i podglad */ #mm-dock .dk-podglad-pas { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 9600; display: flex; gap: 10px; align-items: center; padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--mm-tlo-rgba-193-71-138-92); color: var(--mm-tekst-fff); font-size: 12.5px; box-shadow: var(--shadow-lg); white-space: nowrap; } #mm-dock .dk-podglad-pas.lider { background: var(--mm-tlo-rgba-69-66-180-9); padding: 6px 14px; pointer-events: none; } #mm-dock .dk-podglad-pas button { background: var(--mm-tlo-fff); color: var(--mm-tekst-0b0a12); border: 0; border-radius: 999px; padding: 4px 11px; font-weight: 600; cursor: pointer; } #mm-dock .dk-liczby-os { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); } #mm-dock .dk-liczby-os .brak { color: var(--orange); } #mm-dock .dk-rano { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: start; padding: 10px 12px; border-radius: 10px; background: var(--mm-tlo-rgba-245-242-234-04); border: 1px solid var(--line); font-size: 13px; } #mm-dock .dk-rano b { font-size: 11px; font-weight: 600; color: var(--green); white-space: nowrap; } #mm-dock .dk-rano b.zle { color: var(--red); } /* Panel boczny ustepuje aplikacjom Docka. */ body.dk-ma-dock aside.side, body.dk-ma-dock .menu-btn, html.dk-start aside.side, html.dk-start .menu-btn { display: none !important; } body.dk-ma-dock .shell { grid-template-columns: minmax(0, 1fr); } #mm-dock .dk-system .hiddenview { display: block; } #mm-dock .dk-system .main { max-width: none; padding: 0; } #mm-dock .dk-system .rv { opacity: 1; transform: none; } #mm-dock .dk-system { min-width: 0; } @media (max-width: 600px) { #mm-dock .dk-dock.poz-dol { overflow-x: auto; overflow-y: hidden; gap: 4px; padding-bottom: 10px; } #mm-dock .dk-dock.poz-dol .dk-ik em { display: none; } #mm-dock .dk-podglad-pas { max-width: calc(100vw - 20px); white-space: normal; border-radius: 14px; } } /* Zgloszenia i oceny we wspolnym pasku kazdego okna. */ #mm-dock .dk-pasek { grid-template-columns: 80px minmax(0,1fr) auto; height: auto; min-height: 44px; gap: 8px; } #mm-dock .zg-akcje { display: flex; gap: 5px; position: relative; } #mm-dock .zg-akcje button { cursor: pointer; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--ink); padding: 5px 8px; } #mm-dock .zg-akcje button[aria-pressed="true"] { outline: 2px solid var(--mm-ramka-1a59b6); } #mm-dock .zg-dymek { position: absolute; right: 0; top: 38px; width: min(300px,80vw); padding: 14px; background: var(--bg, var(--mm-tlo-fff)); border: 1px solid var(--line); border-radius: 10px; z-index: 5; } #mm-dock .zg-blad { position: absolute; top: 40px; right: 0; padding: 12px; background: var(--bg, var(--mm-tlo-fff)); width: 240px; z-index: 6; } #mm-dock .zg-form { max-width: 780px; margin: auto; } #mm-dock .zg-form form { display: grid; gap: 12px; } #mm-dock .zg-form label, #mm-dock .zg-dymek label { display: grid; gap: 5px; } #mm-dock .zg-form input, #mm-dock .zg-form textarea, #mm-dock .zg-dymek textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 9px; } #mm-dock .zg-form textarea { min-height: 90px; } #mm-dock .zg-form pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; } #mm-dock .zg-form .zg-checkbox { display: flex; align-items: center; } #mm-dock .zg-checkbox input { width: auto; } @media (max-width: 560px) { #mm-dock .dk-pasek { grid-template-columns: 65px minmax(0,1fr); } #mm-dock .zg-akcje { grid-column: 1 / -1; justify-content: flex-end; padding-bottom: 6px; } } /* Jedna strona, mobilny host aplikacji. */ body.dk-mobil-aktywny { height: 100dvh; overflow: hidden !important; padding: 0 !important; background: var(--mm-tlo-0b0a12); } body.dk-mobil-aktywny #app { visibility: hidden; pointer-events: none; position: fixed; inset: 0; overflow: hidden; } body.dk-mobil-aktywny #app *, body.dk-mobil-aktywny #app *::before, body.dk-mobil-aktywny #app *::after { animation-play-state: paused !important; } body.dk-mobil-aktywny .ok-karta, body.dk-mobil-aktywny #orionKarta { display: none !important; } #mm-dock .dk-mobil { position: fixed; z-index: 9100; inset: 0; width: 100%; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--mm-tlo-0b0a12); color: var(--ink); } #mm-dock .dk-mobil, #mm-dock .dk-mobil * { box-sizing: border-box; min-width: 0; overflow-wrap: anywhere; } #mm-dock .dk-mobil button, #mm-dock .dk-mobil input { min-height: 44px; } #mm-dock .dk-mobil button { min-width: 44px; white-space: normal; } #mm-dock .dk-mobil input, #mm-dock .dk-mobil textarea { max-width: 100%; font-size: 16px; } #mm-dock .dk-mobil-gora { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid var(--line); } #mm-dock .dk-mobil-podglad { flex-shrink: 0; padding: 8px 12px; background: var(--mm-tlo-252039); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } #mm-dock .dk-mobil-gora, #mm-dock .dk-mobil-tab { flex-shrink: 0; } /* Linki w stylu przycisku i rozwijane naglowki tez maja cel dotyku 44 px. */ #mm-dock .dk-mobil a.btn { display: inline-flex; align-items: center; min-height: 44px; } #mm-dock .dk-mobil summary { min-height: 44px; padding-block: 10px; } #mm-dock .dk-mobil .pamiec-menu > summary { min-width: 44px; } /* Karta kolekcji na telefonie: rowne kolumny liczb i procent w jednej linii zamiast slow lamanych w polowie. */ #mm-dock .dk-mobil .kl-liczby > div { flex: 1 1 0; } #mm-dock .dk-mobil .kl-etap { grid-template-columns: 76px 1fr minmax(40px, auto); } #mm-dock .dk-mobil .kl-etap > :last-child { white-space: nowrap; overflow-wrap: normal; } #mm-dock .dk-mobil-tresc { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 12px; } #mm-dock .dk-mobil-tab { display: flex; border-top: 1px solid var(--line); background: var(--mm-tlo-14111f); padding-bottom: env(safe-area-inset-bottom); } #mm-dock .dk-mobil-tab button { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 10px 2px; border: 0; color: var(--muted); background: transparent; font: inherit; font-size: 12px; cursor: pointer; } #mm-dock .dk-mobil-tab button[aria-current="page"] { color: var(--mm-tekst-fff); background: var(--mm-tlo-302443); } #mm-dock .dk-mobil-tab button span:first-child { font-size: 20px; } #mm-dock .dk-mobil .siatka2, #mm-dock .dk-mobil .siatka3, #mm-dock .dk-mobil .siatka4 { grid-template-columns: minmax(0, 1fr); } #mm-dock .dk-mobil .wiersz-zad, #mm-dock .dk-mobil .naglowek-ekr, #mm-dock .dk-mobil-aplikacja { display: flex; flex-wrap: wrap; gap: 8px; } #mm-dock .dk-mobil .dk-tresc { padding: 0; overflow: visible; } #mm-dock .dk-mobil .tab { width: 100%; table-layout: fixed; } #mm-dock .dk-mobil .tab th, #mm-dock .dk-mobil .tab td { padding: 6px 3px; white-space: normal; } #mm-dock .dk-mobil .zg-akcje { flex-wrap: wrap; } #mm-dock .dk-mobil .zg-dymek { position: static; width: 100%; } #mm-dock .dk-mobil-lista { display: block; width: 100%; text-align: left; } #mm-dock .dk-mobil-aplikacja { align-items: center; margin-bottom: 12px; } #mm-dock .dk-dymek { padding: 12px; border-radius: 14px; background: var(--mm-tlo-211c30); margin: 8px 0; white-space: pre-wrap; } #mm-dock .dk-dymek.ja { background: var(--mm-tlo-24304b); margin-left: 20px; } #mm-dock .dk-dymek a { display: block; color: var(--mm-tekst-b8d6ff); } @media (min-width: 761px) and (pointer: fine), (min-width: 1025px) { #mm-dock .dk-mobil { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(390px, calc(100vw - 32px)); height: min(820px, calc(100dvh - 32px)); border: 8px solid var(--mm-ramka-282333); border-radius: 34px; box-shadow: 0 25px 90px var(--mm-cien-0009); } } #mm-dock .dk-mobil .chip, #mm-dock .dk-mobil .alert b { white-space: normal; } #mm-dock .dk-tresc:has(.pamiec-ekran) { display:flex; flex-direction:column; } #mm-dock .pamiec-ekran { flex:1; width:100%; gap:8px; min-height:0; } .pamiec-ekran h2 { margin:0; } .pamiec-kontener, .pamiec-plotno { display:flex; flex-direction:column; flex:1; width:100%; min-width:0; min-height:0; } .pamiec-kontener[hidden], .pamiec-plotno[hidden] { display:none; } .pamiec-informacje { display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--muted); } .pamiec-informacje .btn { padding:3px 8px; font-size:12px; } .pamiec-informacje label { white-space:nowrap; } .pamiec-warstwy { flex:1; min-height:420px; } @media (max-width:760px) { .pamiec-warstwy { min-height:max(420px, 60vh); } } .pamiec-narzedzia .pamiec-filtry { margin:0; } .pamiec-narzedzia, .pamiec-filtry { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0; } .pamiec-narzedzia input { min-width:0; max-width:100%; flex:1 1 180px; background:var(--bg); color:var(--ink); border:1px solid var(--line2); border-radius:8px; padding:9px; } .pamiec-graf { display:block; width:100%; height:100%; position:absolute; inset:0; border-radius:14px; touch-action:none; cursor:grab; user-select:none; } .pamiec-graf:active { cursor:grabbing; } .pamiec-filtry [aria-pressed="false"] { opacity:.5; } .pamiec-karta { overflow-wrap:anywhere; } .pamiec-karta textarea { display:block; width:100%; min-height:90px; } /* Podsumowania w tych samych kartach na komputerze i telefonie. */ #mm-dock .dk-zadanie { flex-wrap: wrap; min-width: 0; gap: 8px; } #mm-dock .dk-zadanie > b, #mm-dock .dk-mobil .wiersz-zad > b { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; } #mm-dock .wiersz-zad > span { min-width: 0; overflow-wrap: anywhere; } #mm-dock .dk-podsumowanie { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; line-height: 1.65; } #mm-dock .dk-krok { background: var(--mm-tlo-rgba-26-89-182-14); border-left: 3px solid var(--mm-ramka-c1478a); padding: 12px; border-radius: 8px; } #mm-dock .dk-zadanie .dk-clickup { margin-left: auto; font-size: 12px; } #mm-dock .dk-zadanie .dk-drugorzedny { flex-basis: 100%; text-align: center; color: var(--muted); } #mm-dock .dk-dzien { background: linear-gradient(120deg,var(--mm-tlo-rgba-26-89-182-14),var(--mm-tlo-rgba-193-71-138-10)); line-height: 1.7; margin-bottom: 20px; } #mm-dock .dk-mobil-orion { display: flex; flex-direction: column; min-width: 0; min-height: calc(100dvh - 160px); padding-bottom: 0; } #mm-dock .dk-rozmowa { flex: 1; min-width: 0; padding: 8px 0 18px; } #mm-dock .dk-orion-powitanie { padding: 28px 12px; text-align: center; } #mm-dock .dk-kula { display: inline-block; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 25% 22%,var(--mm-tlo-rgba-255-255-255-7),transparent 40%),linear-gradient(135deg,var(--mm-tlo-1a59b6),var(--mm-tlo-c1478a),var(--mm-tlo-f8991b)); box-shadow: 0 4px 28px var(--mm-cien-c1478a44-d468); animation: dk-oddech 4s ease-in-out infinite; } #mm-dock .dk-kula.mala { width: 22px; height: 22px; vertical-align: middle; margin-right: 8px; animation: none; } #mm-dock .dk-dymek { max-width: 88%; width: fit-content; padding: 14px 16px; margin: 14px 24px 14px 0; border-radius: 18px 18px 18px 5px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--line); } #mm-dock .dk-dymek.ja { margin-left: auto; margin-right: 0; border-radius: 18px 18px 5px 18px; color: var(--mm-tekst-fff); background: var(--mm-tlo-1a59b6); } #mm-dock .dk-dymek p { margin: 6px 0; white-space: pre-wrap; } #mm-dock .dk-dymek ul { padding-left: 20px; } #mm-dock .dk-autor { font-size: 12px; } #mm-dock .dk-zrodla { display: flex; flex-wrap: wrap; gap: 6px; } #mm-dock .dk-dymek .dk-zrodla a { border-radius: 20px; padding: 4px 10px; border: 1px solid var(--line); font-size: 12px; text-decoration: none; } #mm-dock .dk-orion-dol { position: sticky; bottom: 0; background: var(--bg, var(--mm-tlo-171323)); padding: 10px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 2; } #mm-dock .dk-orion-dol > small { display: block; text-align: center; margin-top: 6px; font-size: 11px; } #mm-dock .dk-pytania { display: flex; overflow-x: auto; gap: 8px; max-width: 100%; margin-bottom: 10px; padding-bottom: 4px; } #mm-dock .dk-pytania button { flex-shrink: 0; max-width: 85%; white-space: normal; text-align: left; border-radius: 18px; } #mm-dock .dk-tel-pole input { min-height: 44px; font-size: 16px; border-radius: 22px; } #mm-dock .dk-tel-pole button { border-radius: 50%; width: 44px; flex-shrink: 0; font-size: 24px; } #mm-dock .dk-pisze { display: flex; gap: 5px; padding: 14px; } #mm-dock .dk-pisze span { width: 6px; height: 6px; border-radius: 50%; background: var(--mm-tlo-c1478a); animation: dk-oddech 1s infinite alternate; } #mm-dock .dk-pisze span:nth-child(2) { animation-delay: .2s; } #mm-dock .dk-pisze span:nth-child(3) { animation-delay: .4s; } @keyframes dk-oddech { 50% { transform: scale(1.06); opacity: .7; } } @media (prefers-reduced-motion: reduce) { #mm-dock .dk-kula, #mm-dock .dk-pisze span { animation: none; } } @media (max-width: 400px) { #mm-dock .wiersz-zad { padding: 10px; gap: 6px; } #mm-dock .dk-zadanie .btn { max-width: 100%; white-space: normal; } } #mm-dock .dk-mobil-rozmowa:not([hidden]) { display: flex; height: 100%; min-height: 0; } #mm-dock .dk-mobil-rozmowa .dk-mobil-orion { flex: 1; height: 100%; min-height: 0; overflow: hidden; } #mm-dock .dk-mobil-rozmowa .dk-rozmowa { overflow-y: auto; min-height: 0; } #mm-dock .dk-mobil-rozmowa .dk-orbita .dk-orbita-satelity { /* Na telefonie satelity sa na ekranie Dzis, w powitaniu zostaje sama kula. */ display: none; } #mm-dock .dk-orion-dol { flex-shrink: 0; } .dk-rozmowy-akcje, .dk-rozmowy-lista form { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .dk-rozmowy-lista input { flex:1; min-width:140px; } .dk-rozmowy-lista .karta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; overflow-wrap:anywhere; } .dk-rozmowy-lista .karta > button:first-child { flex:1; text-align:left; white-space:normal; overflow-wrap:anywhere; } .dk-dymek { white-space:pre-wrap; overflow-wrap:anywhere; } #mm-dock .dk-google-start { border: 2px solid var(--mm-ramka-c1478a); background: var(--card); } #mm-dock .dk-google-akcje { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } #mm-dock .dk-google-akcje .btn { white-space: normal; } #mm-dock .dk-google-akcje .dk-drugorzedny { font-size: .85em; padding: 6px 10px; } #mm-dock .sklep-problem { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line2); padding: 12px 0; overflow-wrap: anywhere; } #mm-dock .sklep-problem h4, #mm-dock .sklep-problem p { margin: 0; white-space: pre-wrap; } #mm-dock .dk-profil .sklep-checkbox { flex-direction: row; align-items: center; } #mm-dock .dk-profil input[type="checkbox"] { width: auto; } @media (max-width: 760px) { #mm-dock .sklep-tabela, #mm-dock .sklep-tabela tbody, #mm-dock .sklep-tabela tr, #mm-dock .sklep-tabela td { display: block; width: auto; } #mm-dock .sklep-tabela thead { display: none; } #mm-dock .sklep-tabela td::before { content: attr(data-label) ": "; font-weight: bold; } #mm-dock .sklep-tabela tr { border-bottom: 1px solid var(--line2); padding: 10px 0; } } .dk-orion-tabela { max-width: 100%; overflow-x: auto; } .dk-orion-tabela table { border-collapse: collapse; width: 100%; } .dk-orion-tabela th, .dk-orion-tabela td { padding: .4rem; border: 1px solid currentColor; text-align: left; } .dk-orion-wykres { margin: .5rem 0; } .dk-orion-wykres svg { width: 100%; max-width: 400px; display: block; } .pamiec-warstwy { position:relative; isolation:isolate; background:var(--bg); border-radius:14px; } .pamiec-webgl { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; } .pamiec-plotno[hidden], .pamiec-podglad[hidden] { display:none; } .pamiec-narzedzia { flex-wrap:nowrap; } .pamiec-filtry { flex-wrap:nowrap; } .pamiec-narzedzia .btn { white-space:nowrap; } .pamiec-podglad { position:absolute; pointer-events:none; width:min(240px, 90%); padding:10px; background:var(--bg); color:var(--ink); border:1px solid var(--line2); border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere; } .pamiec-opis, .pamiec-eksport { font-size:12px; opacity:.75; } .pamiec-tresc { white-space:pre-wrap; } .pamiec-notatka { max-width:880px; margin:auto; } /* Szklo MM: wspolne powierzchnie, paleta z os.css i dk-wspolne. */ #mm-dock { --szklo-tlo: linear-gradient(135deg, var(--mm-tlo-rgba-255-255-255-10), var(--mm-tlo-rgba-255-255-255-03)); --szklo-ramka: 1px solid var(--mm-ramka-rgba-255-255-255-14); --szklo-polysk: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-18); --szklo-promien: var(--r, 16px); } #mm-dock .szklo { background: var(--szklo-tlo); border: var(--szklo-ramka); box-shadow: var(--szklo-polysk); border-radius: var(--szklo-promien); } #mm-dock .szklo-akcent { background: linear-gradient(135deg, var(--mm-tlo-4542b4), var(--mm-tlo-23203a)); } #mm-dock .szklo-poswiata { background-image: radial-gradient(ellipse at 20% 0, var(--mm-tlo-rgba-183-166-245-28), transparent 72%), linear-gradient(135deg, var(--mm-tlo-4542b4), var(--mm-tlo-23203a)); } #mm-dock .as-v2 { --ink: var(--mm-tekst-f5f2ea); --muted: var(--mm-tekst-rgba-245-242-234-78); --green: var(--mm-tlo-80dfa0); --red: var(--mm-tlo-ffadb0); color: var(--ink); background: var(--bg2); padding: 20px; border-radius: var(--szklo-promien); font-variant-numeric: tabular-nums; position: relative; } #mm-dock .as-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } #mm-dock .as-karta { min-width: 0; padding: 18px; animation: as-karta-wejscie .45s both; animation-delay: calc(var(--as-indeks, 0) * 50ms); } #mm-dock .as-karta h3 { color: var(--ink); font-size: 13px; font-weight: 600; margin: 0 0 12px; } #mm-dock .as-kpi-srodek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 76px; } #mm-dock .as-liczba { color: var(--ink); font-size: clamp(22px, 2.3vw, 36px); line-height: 1.15; letter-spacing: -.04em; overflow-wrap: anywhere; } #mm-dock .as-bohater { --muted: var(--ink); } #mm-dock .as-bohater .as-liczba { font-size: clamp(26px, 2.7vw, 42px); color: var(--mm-tekst-fff); } #mm-dock .as-bohater.strata { border-color: var(--red); } #mm-dock .as-bohater.zysk { border-color: var(--purple); } #mm-dock .as-karta p, #mm-dock .as-podpis { color: var(--muted); font-size: 12px; } #mm-dock .as-porownanie { display: block; color: var(--muted); font-size: 11px; margin-top: 10px; line-height: 1.7; } #mm-dock .as-chip { display: inline-block; border-radius: 8px; padding: 2px 5px; background: var(--bg2); } #mm-dock .as-v2 .zysk { color: var(--green); } #mm-dock .as-v2 .strata { color: var(--red); } #mm-dock .as-cel { width: 76px; flex: 0 0 76px; margin-left: auto; } #mm-dock .as-cel svg { display: block; width: 100%; } #mm-dock .as-cel-tor { stroke: var(--mm-tekst-rgba-255-255-255-14); } #mm-dock .as-cel-postep { stroke: var(--purple); stroke-linecap: round; animation: as-pierscien-wejscie .8s both; } #mm-dock .as-cel text { fill: var(--ink); font-size: 20px; font-weight: 700; } #mm-dock .as-zdanie { font-size: 14px; color: var(--ink); padding: 18px 2px; } #mm-dock .as-wykresy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; } #mm-dock .as-kanaly .ui-pierscien { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; } #mm-dock .as-kaskada { overflow-x: auto; padding-top: 24px; } #mm-dock .as-wodospad { display: grid; grid-template-columns: repeat(var(--as-kroki), minmax(58px, 1fr)); align-items: start; padding-bottom: 12px; } #mm-dock .as-krok { display: flex; flex-direction: column; align-items: stretch; padding: 0 2px 8px; min-width: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; } #mm-dock .as-krok:hover { background: var(--mm-tlo-rgba-255-255-255-07); } #mm-dock .as-krok:focus-visible, #mm-dock .as-zamknij:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; } #mm-dock .as-krok-kwota { color: var(--ink); font-size: 12px; line-height: 1.5; min-height: 30px; overflow-wrap: anywhere; } #mm-dock .as-krok-wykres { width: 100%; display: block; overflow: visible; } #mm-dock .as-slupek { fill: currentColor; animation: as-slupek-wejscie .55s both; animation-delay: calc(var(--as-indeks, 0) * 50ms); } #mm-dock .as-os { stroke: var(--mm-tekst-rgba-255-255-255-22); stroke-width: 1; } #mm-dock .as-lacznik { stroke: var(--mm-tekst-rgba-255-255-255-30); stroke-dasharray: 2 3; stroke-width: 1; } #mm-dock .as-krok-nazwa { font-size: 11px; line-height: 1.4; color: var(--ink); } #mm-dock .as-krok-opis { white-space: normal; overflow-wrap: normal; word-break: normal; font-size: 9px; line-height: 1.5; color: var(--muted); margin-top: 6px; } #mm-dock .as-poziomy { display: none; } #mm-dock .as-braki { padding-top: 14px; } #mm-dock .as-kanaly .ui-pierscien { padding: 0; margin-top: 12px; background: transparent; border: 0; color: var(--ink); } #mm-dock .as-kanaly .ui-pierscien svg { display: block; width: min(100%, 200px); height: auto; margin: auto; } #mm-dock .as-kanaly .ui-pierscien ul { padding: 12px 0 0; color: var(--ink); font-size: 11px; } #mm-dock .as-panel { margin-top: 16px; padding: 22px; background-color: var(--card); color: var(--ink); } #mm-dock .as-panel strong { display: block; font-size: 28px; } #mm-dock .as-panel p { font-size: 14px; margin-top: 8px; } #mm-dock .as-zamknij { float: right; border: 1px solid var(--purple); border-radius: 8px; background: var(--card); color: var(--ink); width: 36px; height: 36px; cursor: pointer; } @supports (backdrop-filter: blur(1px)) { #mm-dock .szklo-rozmyte { backdrop-filter: blur(18px) saturate(1.3); } } @keyframes as-karta-wejscie { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes as-slupek-wejscie { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } } @keyframes as-pierscien-wejscie { from { opacity: 0; stroke-dashoffset: 100; } } @media (max-width: 1000px) { #mm-dock .as-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } #mm-dock .as-wykresy { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { #mm-dock .as-v2 { padding: 12px; } #mm-dock .as-kpi { grid-template-columns: minmax(0, 1fr); } #mm-dock .as-wodospad { display: flex; flex-direction: column; gap: 14px; } #mm-dock .as-kanaly .ui-pierscien { grid-template-columns: minmax(0, 1fr); } #mm-dock .as-krok { width: 100%; text-align: left; padding: 6px; } #mm-dock .as-krok-wykres { display: none; } #mm-dock .as-krok-kwota { font-size: 14px; min-height: 0; } #mm-dock .as-krok-nazwa { font-size: 12px; } #mm-dock .as-krok-opis { white-space: normal; overflow-wrap: normal; word-break: normal; font-size: 11px; } #mm-dock .as-poziomy { display: block; height: 8px; margin: 7px 0; border-radius: 4px; background: var(--mm-tlo-rgba-255-255-255-10); } #mm-dock .as-poziomy i { display: block; height: 100%; background: currentColor; border-radius: inherit; } } #mm-dock .as-v2[data-animacje="nie"] .as-karta, #mm-dock .as-v2[data-animacje="nie"] .as-slupek, #mm-dock .as-v2[data-animacje="nie"] .as-cel-postep { animation: none; } @media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) { #mm-dock .szklo-rozmyte { backdrop-filter: none; background: var(--mm-tlo-rgba-24-20-40-96); } } @media (prefers-reduced-motion: reduce) { #mm-dock .as-v2 *, #mm-dock .as-v2 *::before, #mm-dock .as-v2 *::after { animation: none; transition: none; } } /* Stala kolumna obok okien, ponizej ich warstwy. */ .mm-ui-nowe #mm-dock .dk-kolumna { position: fixed; right: 16px; top: calc(var(--dk-top, 64px) + 14px); width: 272px; max-height: calc(100vh - var(--dk-top, 64px) - 14px - 190px); display: flex; flex-direction: column; overflow: hidden; z-index: 9050; animation: as-zakladka-wejscie 240ms ease-out; } .mm-ui-nowe #mm-dock .dk-kolumna header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .mm-ui-nowe #mm-dock #dk-widzety { overflow-y: auto; min-height: 0; overscroll-behavior: contain; --dk-gora: 0px; --dk-dol: 0px; mask-image: linear-gradient(to bottom, transparent, #000 var(--dk-gora), #000 calc(100% - var(--dk-dol)), transparent); } .mm-ui-nowe #mm-dock #dk-widzety.dk-wiecej-dol { --dk-dol: 24px; } .mm-ui-nowe #mm-dock #dk-widzety.dk-wiecej-gora { --dk-gora: 24px; } .mm-ui-nowe #mm-dock .dk-kolumna header button { border: var(--szklo-ramka); border-radius: 12px; padding: 8px; background: var(--mm-tlo-171520); color: var(--ink); font: inherit; cursor: pointer; } .mm-ui-nowe #mm-dock .dk-kolumna-zwinieta { width: 36px; } .mm-ui-nowe #mm-dock .dk-kolumna-zwinieta header button { writing-mode: vertical-rl; } .mm-ui-nowe #mm-dock .dk-widzet { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; margin-bottom: 12px; padding: 16px; text-align: left; font: inherit; color: var(--ink); background: var(--szklo-tlo), var(--mm-tlo-14121e); border: var(--szklo-ramka); box-shadow: var(--szklo-polysk); border-radius: 20px; cursor: pointer; } .mm-ui-nowe #mm-dock .dk-widzet:disabled { cursor: default; opacity: 1; } .mm-ui-nowe #mm-dock .dk-widzet small { color: var(--muted); } .mm-ui-nowe #mm-dock .dk-widzet-liczba { font-size: 28px; line-height: 1.2; } .mm-ui-nowe #mm-dock .dk-widzet-termin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .mm-ui-nowe #mm-dock .dk-widzet-sygnal { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .mm-ui-nowe #mm-dock .dk-kolumna button:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; } .mm-ui-nowe body.dk-kolumna-otwarta #viewHome { margin-right: calc(272px + 32px); } .mm-ui-nowe body.dk-kolumna-otwarta #mm-dock .dk-okno:not(.duze) { right: calc(272px + 32px); } .mm-ui-nowe body[data-dk-poz="prawo"][data-dk-ukryj="0"] #mm-dock .dk-kolumna { right: calc(var(--dk-rozmiar) + 44px + 16px); } .mm-ui-nowe body.dk-kolumna-otwarta[data-dk-poz="prawo"][data-dk-ukryj="0"] #viewHome { margin-right: calc(272px + 32px + var(--dk-rozmiar) + 44px); } .mm-ui-nowe body.dk-kolumna-otwarta[data-dk-poz="prawo"][data-dk-ukryj="0"] #mm-dock .dk-okno:not(.duze) { right: calc(272px + 32px + var(--dk-rozmiar) + 44px); } @media (prefers-reduced-motion: reduce) { .mm-ui-nowe #mm-dock #dk-widzety { scroll-behavior: auto; transition: none; } .mm-ui-nowe #mm-dock .dk-kolumna { animation: none; } .mm-ui-nowe #mm-dock .dk-kolumna .dk-na-zywo { animation: none; } } /* Edycja przypietych widzetow. */ .mm-ui-nowe #mm-dock .dk-kolumna header { flex-wrap: wrap; gap: 4px; } .mm-ui-nowe #mm-dock .dk-kolumna button { min-height: 44px; } .mm-ui-nowe #mm-dock .dk-widzet-obudowa { position: relative; } .mm-ui-nowe #mm-dock .dk-widzet-narzedzia { display: flex; justify-content: flex-end; gap: 4px; padding: 4px; border-radius: 14px 14px 0 0; background: var(--mm-tlo-211e30); color: var(--mm-tekst-f5f3ff); } .mm-ui-nowe #mm-dock .dk-widzet-narzedzia button, .mm-ui-nowe #mm-dock .dk-widzet-dodaj button { min-width: 44px; padding: 8px; border: 1px solid var(--mm-ramka-827b9c); border-radius: 10px; background: var(--mm-tlo-211e30); color: var(--mm-tekst-f5f3ff); font: inherit; cursor: pointer; } .mm-ui-nowe #mm-dock .dk-widzet-narzedzia button:disabled, .mm-ui-nowe #mm-dock .dk-widzet-dodaj button:disabled { color: var(--mm-tekst-bdb6d0); cursor: default; } .mm-ui-nowe #mm-dock .dk-widzet-uchwyt { display: grid; place-items: center; min-width: 44px; min-height: 44px; touch-action: none; cursor: grab; } .mm-ui-nowe #mm-dock .dk-widzet-przenoszony { z-index: 1; opacity: .85; } .mm-ui-nowe #mm-dock .dk-widzet-edycja .dk-widzet { border-top-left-radius: 0; border-top-right-radius: 0; } .mm-ui-nowe #mm-dock .dk-widzet-dodaj, .mm-ui-nowe #mm-dock .dk-widzet-dodaj [role="group"] { display: grid; gap: 8px; } .mm-ui-nowe #mm-dock .dk-widzet-dodaj button { display: grid; gap: 4px; text-align: left; } .mm-ui-nowe #mm-dock .dk-widzet-dodaj small { color: var(--mm-tekst-d1cbe0); } @media (prefers-reduced-motion: reduce) { .mm-ui-nowe #mm-dock .dk-widzet-obudowa { transition: none; } } .mm-ui-nowe #mm-dock .dk-spotkanie { padding: 0; overflow: hidden; } .mm-ui-nowe #mm-dock .dk-spotkanie-tresc { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 16px; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; } .mm-ui-nowe #mm-dock .dk-spotkanie > a, .mm-ui-nowe #mm-dock .dk-spotkanie > button { margin: 0 16px 16px; padding: 10px; border: 1px solid var(--mm-ramka-827b9c); border-radius: 10px; background: var(--mm-tlo-211e30); color: var(--mm-tekst-f5f3ff); font: inherit; text-align: center; cursor: pointer; } .mm-ui-nowe #mm-dock .dk-spotkanie > .dk-spotkanie-tresc { margin: 0; padding: 16px; border: 0; background: transparent; text-align: left; } /* Zywe kafle: jednorazowy przelot, petla tylko na kropce live. */ .mm-ui-nowe #mm-dock .dk-zywy-kafel { position: relative; } .mm-ui-nowe #mm-dock :is(.dk-okno, .dk-mobil-okno).dk-ruch .dk-karta:is(.dk-zywy-kafel, .szklo-rozmyte) { animation: none; } .mm-ui-nowe #mm-dock :is(.dk-okno, .dk-mobil-okno).dk-ruch .dk-karta.szklo-rozmyte:hover { transform: none; transition: none; } .mm-ui-nowe #mm-dock .dk-kafel-swiatlo:not(.as-karta):not(.szklo-rozmyte) { isolation: isolate; overflow: hidden; } .mm-ui-nowe #mm-dock .dk-kafel-swiatlo:not(.as-karta):not(.szklo-rozmyte)::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, var(--mm-tlo-rgba-255-255-255-12), transparent 70%); opacity: 0; transition: opacity 140ms cubic-bezier(.16,1,.3,1); } .mm-ui-nowe #mm-dock .dk-kafel-swiatlo:not(.as-karta):not(.szklo-rozmyte)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 25%, var(--mm-tlo-rgba-255-255-255-08) 48%, transparent 70%); transform: translate3d(-100%,0,0); } .mm-ui-nowe #mm-dock .dk-kafel-swiatlo.dk-kafel-blysk:not(.as-karta):not(.szklo-rozmyte)::after { animation: dk-kafel-przelot 650ms cubic-bezier(.16,1,.3,1); will-change: transform; } .mm-ui-nowe #mm-dock .kr-karta { content-visibility: auto; contain-intrinsic-size: auto 420px; } .mm-ui-nowe #mm-dock .dk-na-zywo { display: inline-block; margin-left: 8px; width: 7px; height: 7px; color: var(--green); background: currentColor; border-radius: 50%; } .mm-ui-nowe #mm-dock .dk-dziennik .dk-dziennik-live i { animation: none; } .mm-ui-nowe #mm-dock .dk-na-zywo, .mm-ui-nowe #mm-dock .dk-dziennik .dk-dziennik-live i { position: relative; } .mm-ui-nowe #mm-dock .dk-na-zywo::after, .mm-ui-nowe #mm-dock .dk-dziennik .dk-dziennik-live i::after { content: ''; position: absolute; inset: -3px; border: 1px solid currentColor; border-radius: 50%; animation: dk-zywe-live 1.8s ease-out infinite; } .mm-ui-nowe #mm-dock .dk-na-zywo[data-poza-ekranem]::after, .mm-ui-nowe #mm-dock .dk-dziennik-live i[data-poza-ekranem]::after, .mm-ui-nowe #mm-dock .dk-zywy-kafel[data-poza-ekranem] .dk-na-zywo::after, .mm-ui-nowe #mm-dock .dk-zywy-kafel[data-poza-ekranem] .dk-dziennik-live i::after, .mm-ui-nowe #mm-dock .dk-kafle-pauza .dk-na-zywo::after, .mm-ui-nowe #mm-dock .dk-kafle-pauza .dk-dziennik-live i::after { animation-play-state: paused; } .mm-ui-nowe #mm-dock .dk-kafle-bez-ruchu .dk-kafel-swiatlo::after, .mm-ui-nowe #mm-dock .dk-kafle-bez-ruchu .dk-na-zywo::after, .mm-ui-nowe #mm-dock .dk-kafle-bez-ruchu .dk-dziennik-live i::after { animation: none; opacity: 0; } .mm-ui-nowe #mm-dock .dk-kafle-bez-ruchu .dk-zywy-kafel { transform: none; transition: none; } .mm-ui-nowe #mm-dock .dk-kafle-bez-ruchu .dk-kafel-swiatlo::before { opacity: 0; transition: none; } @keyframes dk-kafel-przelot { from { transform: translate3d(-100%,0,0); } to { transform: translate3d(200%,0,0); } } @keyframes dk-zywe-live { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.8); opacity: 0; } } @media (hover: hover) and (pointer: fine) { .mm-ui-nowe #mm-dock .dk-zywy-kafel:not(.szklo-rozmyte) { transition: transform 140ms cubic-bezier(.16,1,.3,1); } .mm-ui-nowe #mm-dock .dk-zywy-kafel.dk-kafel-najazd:not(.szklo-rozmyte) { transform: translateY(-2px); } .mm-ui-nowe #mm-dock .dk-kafel-swiatlo.dk-kafel-najazd:not(.as-karta):not(.szklo-rozmyte)::before { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mm-ui-nowe #mm-dock .dk-kafel-swiatlo.dk-kafel-blysk::after, .mm-ui-nowe #mm-dock .dk-na-zywo::after, .mm-ui-nowe #mm-dock .dk-dziennik .dk-dziennik-live i::after { animation: none; opacity: 0; } .mm-ui-nowe #mm-dock .dk-zywy-kafel:not(.szklo-rozmyte), .mm-ui-nowe #mm-dock .dk-zywy-kafel.dk-kafel-najazd:not(.szklo-rozmyte) { transform: none; transition: none; } .mm-ui-nowe #mm-dock .dk-kafel-swiatlo.dk-kafel-najazd::before { opacity: 0; transition: none; } } /* Klocki widoków: klasy dodawane wyłącznie w nowym UI. */ .mm-ui-nowe #mm-dock .dk-bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; } .mm-ui-nowe #mm-dock .dk-brief-liczby { grid-column: 1 / -1; } .mm-ui-nowe #mm-dock .dk-bento > * { min-width: 0; } @media (min-width: 900px) { .mm-ui-nowe #mm-dock .dk-bento-szeroka { grid-column: span 2; } } .mm-ui-nowe #mm-dock .dk-podpowiedzi { list-style: none; padding: 0; display: grid; gap: 12px; } .mm-ui-nowe #mm-dock .dk-priorytet { display: inline-block; margin-right: 8px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--mm-ramka-rgba-120-120-140-2); background: var(--mm-tlo-rgba-255-255-255-08-da81); color: var(--muted); font-size: 11px; } .mm-ui-nowe #mm-dock .dk-priorytet[data-pilne="tak"] { color: var(--mm-tekst-ff9aac); border-color: var(--mm-ramka-rgba-196-43-73-45); background: var(--mm-tlo-rgba-196-43-73-16); } .mm-ui-nowe #mm-dock .dk-koszty-dnia { padding: 20px; min-width: 0; } .mm-ui-nowe #mm-dock .as-krok.zysk .as-slupek { fill: url(#as-gradient-zysk); } .mm-ui-nowe #mm-dock .as-krok.strata .as-slupek { fill: url(#as-gradient-strata); } .mm-ui-nowe #mm-dock .dk-gradient-zysk-od { stop-color: var(--seria-1-od, var(--mm-tlo-8b5cf6)); } .mm-ui-nowe #mm-dock .dk-gradient-zysk-do { stop-color: var(--seria-1-do, var(--mm-tlo-38bdf8)); } .mm-ui-nowe #mm-dock .dk-gradient-strata-od { stop-color: var(--seria-3-od, var(--mm-tlo-f59e0b)); } .mm-ui-nowe #mm-dock .dk-gradient-strata-do { stop-color: var(--seria-3-do, var(--mm-tlo-f43f5e)); } /* W kaflu liczby osoby nazwę i źródło pokazuje nagłówek kafla: karta wyspy nie dubluje nazwy ani ramki. */ .mm-ui-nowe #mm-dock .dk-metryka .tw\:wspolne.tw\:bento-karta { padding: 0; background: none; border: 0; box-shadow: none; } .mm-ui-nowe #mm-dock .dk-metryka .tw\:wspolne.tw\:bento-karta > h3 { display: none; } /* Moje liczby i Brief w bento: karta wyspy wypełnia kafel (jasne szkło z 27.10 tylko bez MM_UI_NOWE; nowe UI: ciemne szkło, decyzja Bartka 31.10.2026, ciemne tło var(--mm-tlo-196)). */ .mm-ui-nowe #mm-dock .dk-bento .dk-metryka .tw\:wspolne.tw\:bento-karta { width: 100%; } /* MM_UI_NOWE: ciemne szklo metryk, takze nad jasnym szklem okien w @supports. */ .mm-ui-nowe #mm-dock .dk-okno:not([data-app="rozmowy"]) .kafel.dk-metryka, .mm-ui-nowe #mm-dock .dk-mobil-okno .kafel.dk-metryka, .mm-ui-nowe #mm-dock .kafel.dk-metryka { --ink: var(--mm-tekst-f5f2ea); --muted: var(--mm-tekst-rgba-245-242-234-72); --dim: var(--mm-tekst-rgba-245-242-234-6); --line: var(--mm-ramka-rgba-255-255-255-12); color: var(--ink); background: var(--szklo-tlo); border: var(--szklo-ramka); box-shadow: var(--szklo-polysk); border-radius: 20px; } .mm-ui-nowe #mm-dock :is(.dk-okno:not([data-app="rozmowy"]), .dk-mobil-okno) .kafel.dk-metryka:hover, .mm-ui-nowe #mm-dock :is(.dk-okno:not([data-app="rozmowy"]), .dk-mobil-okno) .kafel.dk-metryka:focus-within, .mm-ui-nowe #mm-dock .kafel.dk-metryka:hover, .mm-ui-nowe #mm-dock .kafel.dk-metryka:focus-within { box-shadow: var(--szklo-polysk), 0 18px 34px var(--mm-cien-rgba-20-16-40-28), 0 0 0 1px color-mix(in srgb, var(--metryka-kolor) 35%, transparent), 0 10px 40px color-mix(in srgb, var(--metryka-kolor) 30%, transparent); } .mm-ui-nowe #mm-dock .dk-metryka .kn, .mm-ui-nowe #mm-dock .dk-metryka small, .mm-ui-nowe #mm-dock .dk-metryka .znacznik-dzialu { color: var(--muted); } .mm-ui-nowe #mm-dock .dk-metryka .dk-metryka-zrodlo, .mm-ui-nowe #mm-dock .dk-metryka .dk-metryka-dol, .mm-ui-nowe #mm-dock .dk-metryka .dk-metryka-zmiana.neutralnie { color: var(--dim); } .mm-ui-nowe #mm-dock .dk-metryka .dk-metryka-zmiana.gorzej { color: var(--ink); } .mm-ui-nowe #mm-dock .dk-metryka .dk-metryka-cisza { color: var(--muted); background: var(--mm-tlo-rgba-255-255-255-08); } .mm-ui-nowe #mm-dock .dk-metryka .dk-metryka-orion { background: var(--mm-tlo-rgba-255-255-255-08); color: var(--ink); border-color: var(--line); } .mm-ui-nowe #mm-dock .dk-metryka .dk-metryka-orion:focus-visible { outline-color: var(--mm-ramka-f5f2ea); } .mm-ui-nowe #mm-dock .dk-okno:not([data-app="rozmowy"]) .kafel.dk-metryka.wkrotce, .mm-ui-nowe #mm-dock .dk-mobil-okno .kafel.dk-metryka.wkrotce, .mm-ui-nowe #mm-dock .kafel.dk-metryka.wkrotce { border: 1.5px dashed var(--mm-ramka-rgba-255-255-255-28); background: transparent; color: var(--muted); box-shadow: none; } .mm-ui-nowe #mm-dock .dk-metryka.wkrotce .dk-metryka-wartosc { color: var(--muted); } /* Sklep: kafle obszarow wypelniaja rzad bez dziur przy dowolnej liczbie obszarow; trend (2/3) i ranking (1/3) w kolejnym rzedzie, na waskim ekranie kazde w pelnym rzedzie. */ .mm-ui-nowe #mm-dock .dk-sklep-bento { display: flex; flex-wrap: wrap; align-items: stretch; } .mm-ui-nowe #mm-dock .dk-sklep-bento > * { flex: 1 1 220px; } .mm-ui-nowe #mm-dock .dk-sklep-bento > .dk-sklep-trend { flex: 2 1 560px; margin: 0; } .mm-ui-nowe #mm-dock .dk-sklep-bento > .dk-sklep-ranking { flex: 1 1 360px; } .mm-ui-nowe #mm-dock .dk-sekcja { margin: 24px 0 12px; } .mm-ui-nowe #mm-dock .dk-braki { margin-top: 24px; color: var(--muted); } .mm-ui-nowe #mm-dock .dk-braki summary { cursor: pointer; } .mm-ui-nowe #mm-dock .dk-braki ul { list-style: none; padding: 0; } .mm-ui-nowe #mm-dock .dk-braki li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; } /* Kreacje: zaslepka reklamy bez miniatury (katalogowa, poza pobranymi przez CE, bledy obrazu); bez rozmycia i animacji, bo siatka ma do 300 kart. */ .mm-ui-nowe #mm-dock .kr-zaslepka { --kr-akcent: var(--mm-tlo-rgba-245-158-11-18); --kr-ikona: var(--mm-tlo-rgb-252-211-77); position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px 14px 30px; text-align: center; background: radial-gradient(circle at 50% 32%, var(--kr-akcent) 0, transparent 62%), linear-gradient(160deg, var(--mm-tlo-rgba-255-255-255-07), var(--mm-tlo-rgba-255-255-255-015)); color: var(--mm-tekst-rgb-236-233-247); } .mm-ui-nowe #mm-dock .kr-zaslepka[data-stan="catalog"] { --kr-akcent: var(--mm-tlo-rgba-139-92-246-30); --kr-ikona: var(--mm-tlo-rgb-196-181-253); } .mm-ui-nowe #mm-dock .kr-zaslepka[data-stan="poza_pobranymi"] { --kr-akcent: var(--mm-tlo-rgba-56-189-248-18); --kr-ikona: var(--mm-tlo-rgb-125-211-252); } .mm-ui-nowe #mm-dock .kr-zaslepka-znak { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--mm-ramka-rgba-255-255-255-14); background: var(--mm-tlo-rgba-255-255-255-06); color: var(--kr-ikona); } .mm-ui-nowe #mm-dock .kr-zaslepka-znak svg { width: 22px; height: 22px; } .mm-ui-nowe #mm-dock .kr-zaslepka strong { font-size: 14px; font-weight: 600; line-height: 1.25; } .mm-ui-nowe #mm-dock .kr-zaslepka small { font-size: 12px; line-height: 1.4; color: var(--mm-tekst-rgba-236-233-247-78); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .mm-ui-nowe #mm-dock .kr-zaslepka-nazwa { position: absolute; left: 10px; right: 10px; bottom: 8px; font-size: 11px; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Zwarte listy metryk sa widoczne tylko w nowym interfejsie. */ .mm-ui-nowe #mm-dock .dk-metryka-pozycje { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: 12px; } .mm-ui-nowe #mm-dock .dk-metryka-pozycje li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; } .mm-ui-nowe #mm-dock .dk-metryka-pozycja-nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-ui-nowe #mm-dock .dk-metryka-pozycje b { font-size: 13px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; } .mm-ui-nowe #mm-dock .dk-metryka-pozycje small { grid-column: 1 / -1; font-size: 11px; color: var(--muted); margin-top: -2px; } .mm-ui-nowe #mm-dock .dk-metryka-pasek { grid-column: 1 / -1; height: 3px; border-radius: 3px; overflow: hidden; background: var(--mm-tlo-rgba-255-255-255-12); } .mm-ui-nowe #mm-dock .dk-metryka-pasek i { display: block; height: 100%; background: var(--metryka-kolor); transform-origin: left; } .mm-ui-nowe #mm-dock .dk-metryka-link { align-self: flex-start; margin-top: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; background: var(--mm-tlo-rgba-255-255-255-08); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; } .mm-ui-nowe #mm-dock .dk-metryka-link:disabled { opacity: .5; cursor: default; } .mm-ui-nowe #mm-dock .dk-metryka-link:focus-visible { outline: 2px solid var(--mm-ramka-f5f2ea); outline-offset: 3px; } /* W17: wspolny wiersz listy, tylko w nowym interfejsie. */ .mm-ui-nowe #mm-dock .dk-wiersze { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; } .mm-ui-nowe #mm-dock .dk-wiersz { display: grid; grid-template-columns: 32px minmax(140px, 1fr) auto minmax(0, auto) auto auto; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--szklo-tlo); border: var(--szklo-ramka); box-shadow: var(--szklo-polysk); color: var(--ink); /* Bez content-visibility: pomiar 31.10 dal 12-19 klatek ponad 25 ms przy przewijaniu Zespolu, bez niego 0; listy sa stronicowane. */ transition: transform 200ms; } .mm-ui-nowe #mm-dock .dk-wiersz:hover { transform: translateY(-2px); } .mm-ui-nowe #mm-dock .dk-wiersz[data-ruch="tak"] { animation: as-karta-wejscie 200ms backwards; animation-delay: calc(var(--dk-wiersz-i) * 30ms); } .mm-ui-nowe #mm-dock .dk-wiersz:not([data-ruch="tak"]) { animation: none; } .mm-ui-nowe #mm-dock .dk-wiersz-awatar { grid-column: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--mm-tekst-fff); font-size: 13px; font-weight: 700; } .mm-ui-nowe #mm-dock .dk-wiersz-tresc { grid-column: 2; min-width: 0; overflow-wrap: anywhere; } .mm-ui-nowe #mm-dock .dk-wiersz-tytul { font-weight: 600; } .mm-ui-nowe #mm-dock .dk-wiersz-tytul a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .mm-ui-nowe #mm-dock .dk-wiersz-podtytul { color: var(--muted); font-size: 12px; margin-top: 4px; } .mm-ui-nowe #mm-dock .dk-wiersz-akcje { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .mm-ui-nowe #mm-dock .dk-wiersz-pigulka { display: inline-flex; gap: 6px; align-items: center; border-radius: 999px; padding: 4px 8px; background: var(--mm-tlo-rgba-255-255-255-08); font-size: 12px; color: var(--ink); --dk-wiersz-ton: var(--mm-tlo-c1c5d0); } .mm-ui-nowe #mm-dock .dk-wiersz-zrodlo { grid-column: 3; } .mm-ui-nowe #mm-dock .dk-wiersz-status { grid-column: 5; } .mm-ui-nowe #mm-dock .dk-wiersz-pigulka i { width: 5px; height: 5px; border-radius: 50%; background: var(--dk-wiersz-ton); flex-shrink: 0; } .mm-ui-nowe #mm-dock .dk-wiersz-pigulka[data-ton="clickup"] { --dk-wiersz-ton: var(--mm-tlo-c6a5ff); } .mm-ui-nowe #mm-dock .dk-wiersz-pigulka[data-ton="monday"] { --dk-wiersz-ton: var(--mm-tlo-ffbc7d); } .mm-ui-nowe #mm-dock .dk-wiersz-pigulka[data-ton="hub"], .mm-ui-nowe #mm-dock .dk-wiersz-pigulka[data-ton="ok"] { --dk-wiersz-ton: var(--mm-tlo-83e8bc); } .mm-ui-nowe #mm-dock .dk-wiersz-pigulka[data-ton="sentinel"], .mm-ui-nowe #mm-dock .dk-wiersz-pigulka[data-ton="uwaga"] { --dk-wiersz-ton: var(--mm-tlo-ffda83); } .mm-ui-nowe #mm-dock .dk-wiersz-pigulka[data-ton="zle"] { --dk-wiersz-ton: var(--mm-tlo-ff9aac); } .mm-ui-nowe #mm-dock .dk-wiersz-postep { grid-column: 4; min-width: 100px; max-width: 190px; font-size: 11px; color: var(--muted); } .mm-ui-nowe #mm-dock .dk-wiersz-tor { height: 6px; border-radius: 6px; overflow: hidden; background: var(--mm-tlo-rgba-255-255-255-12); margin-top: 5px; } .mm-ui-nowe #mm-dock .dk-wiersz-tor > span { display: block; height: 100%; background: linear-gradient(90deg, var(--seria-1-od, var(--mm-tlo-8a6bdf)), var(--seria-1-do, var(--mm-tlo-c6a5ff))); transform-origin: left; transform: scaleX(var(--dk-wiersz-postep)); } .mm-ui-nowe #mm-dock .dk-wiersz-czas { grid-column: 6; font-size: 12px; color: var(--muted); } .mm-ui-nowe #mm-dock .dk-wiersz-czas[data-ton="zle"] { color: var(--mm-tekst-ff9aac); } .mm-ui-nowe #mm-dock .dk-wiersz-filtry { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; } .mm-ui-nowe #mm-dock .dk-wiersz-filtry button { border-radius: 999px; } .mm-ui-nowe #mm-dock .dk-wiersz-filtry button[aria-pressed="true"] { background: var(--mm-tlo-rgba-198-165-255-22); color: var(--ink); } @media (max-width: 639px) { .mm-ui-nowe #mm-dock .dk-wiersz { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; } .mm-ui-nowe #mm-dock .dk-wiersz-zrodlo, .mm-ui-nowe #mm-dock .dk-wiersz-status, .mm-ui-nowe #mm-dock .dk-wiersz-postep, .mm-ui-nowe #mm-dock .dk-wiersz-czas { grid-column: 2; justify-self: start; } } @media (prefers-reduced-motion: reduce) { .mm-ui-nowe #mm-dock .dk-wiersz, .mm-ui-nowe #mm-dock .dk-wiersz[data-ruch="tak"] { animation: none; transition: none; } .mm-ui-nowe #mm-dock .dk-wiersz:hover { transform: none; } } .mm-ui-nowe #mm-dock .dk-wiersz-widocznosc label { border-radius: 999px; padding: 4px 8px; background: var(--mm-tlo-rgba-255-255-255-08); } /* Szkielety ukladow pojawiaja sie dopiero przy wolnym odczycie. */ .mm-ui-nowe #radarGrid .wizualnie-ukryte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad { opacity: 0; animation: dk-szkielet-pokaz 200ms ease-out 280ms forwards; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-siatka { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-czesc { height: 110px; border-radius: 18px; background: var(--mm-tlo-rgba-160-160-180-18); border: 1px solid var(--mm-ramka-rgba-160-160-180-12); animation: dk-szkielet-puls 1.4s ease-in-out infinite alternate; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-kpi { grid-column: span 3; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-duzy { grid-column: span 8; height: auto; min-height: 260px; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad-puls .dk-szkielet-duzy { grid-row: span 2; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-bok { grid-column: span 4; height: 130px; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-szeroki { grid-column: 1 / -1; height: 260px; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-brief { grid-column: span 4; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-wiersz { grid-column: 1 / -1; height: 42px; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-zakladki { grid-column: 1 / -1; display: flex; gap: 12px; height: 36px; background: none; border: 0; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-zakladki i { width: 90px; border-radius: 999px; background: var(--mm-tlo-rgba-160-160-180-18); } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-radar { grid-column: span 4; height: 240px; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad-radar { grid-column: 1 / -1; } @keyframes dk-szkielet-pokaz { to { opacity: 1; } } @media (max-width: 700px) { .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-siatka { grid-template-columns: minmax(0, 1fr); } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-czesc { grid-column: 1; grid-row: auto; } } @media (prefers-reduced-motion: reduce) { .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad { opacity: 1; animation: none; } .mm-ui-nowe :is(#mm-dock, #radarGrid) .dk-szkielet-uklad .dk-szkielet-czesc { animation: none; } } /* Kolejka v2: priorytety, dane calej kolejki i lokalny wykres terminow. */ .mm-ui-nowe #mm-dock .dk-kolejka-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(150px, 1fr); gap: 12px; margin-bottom: 20px; } .mm-ui-nowe #mm-dock .dk-kolejka-bento > article { min-width: 0; } .mm-ui-nowe #mm-dock .dk-kolejka-zgloszenia { padding: 18px; border: var(--szklo-ramka); background: var(--szklo-tlo); box-shadow: var(--szklo-polysk); border-radius: 20px; } .mm-ui-nowe #mm-dock .dk-kolejka-zgloszenia h3 { margin: 0 0 12px; font-size: 13px; } .mm-ui-nowe #mm-dock .dk-kolejka-zgloszenia strong { font-size: 32px; } .mm-ui-nowe #mm-dock .dk-kolejka-zgloszenia div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .mm-ui-nowe #mm-dock .dk-kolejka-bento > article[aria-label="Po terminie"] .tw\:bento-liczba { color: var(--mm-tekst-ff8a9c); } .mm-ui-nowe #mm-dock .dk-kolejka-filtry { padding: 16px 0; display: flex; flex-wrap: wrap; gap: 8px 20px; } /* Podpis grupy z aria-label; pusty tekst zastepczy, bo czytnik i tak oglasza nazwe grupy. */ .mm-ui-nowe #mm-dock .dk-kolejka-filtry > div::before { content: attr(aria-label) / ""; margin-right: 4px; font-size: 11px; color: var(--muted); } .mm-ui-nowe #mm-dock .dk-kolejka-filtr { font: inherit; font-size: 12px; padding: 8px 14px; border: var(--szklo-ramka); border-radius: 999px; background: var(--szklo-tlo); box-shadow: var(--szklo-polysk); color: var(--ink); cursor: pointer; } .mm-ui-nowe #mm-dock .dk-kolejka-filtr[aria-pressed="true"] { background: var(--mm-tlo-574077); color: var(--mm-tekst-fff); border-color: var(--mm-ramka-c6a5ff); } .mm-ui-nowe #mm-dock .dk-kolejka-sekcja { margin-bottom: 24px; } .mm-ui-nowe #mm-dock .dk-kolejka-sekcja h3 { margin: 0 0 10px; } .mm-ui-nowe #mm-dock .dk-kolejka-sekcja h3 button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 0; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; text-align: left; } .mm-ui-nowe #mm-dock .dk-kolejka-sekcja h3 small { font-size: 11px; font-weight: 400; color: var(--muted); border-radius: 999px; background: var(--szklo-tlo); padding: 4px 10px; } .mm-ui-nowe #mm-dock .dk-kolejka-sekcja h3 button > span:last-child { margin-left: auto; } .mm-ui-nowe #mm-dock .dk-kolejka-wiersz .dk-wiersz-tytul { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .mm-ui-nowe #mm-dock .dk-wiersz-klikalny { cursor: pointer; } .mm-ui-nowe #mm-dock .dk-kolejka-wiersz .dk-wiersz-czas { border-radius: 999px; padding: 6px 10px; background: var(--mm-tlo-rgba-255-255-255-08); white-space: nowrap; } .mm-ui-nowe #mm-dock .dk-kolejka-wiersz .dk-wiersz-czas[data-ton="zle"] { background: var(--mm-tlo-rgba-210-60-86-2); color: var(--mm-tekst-ff9aac); } .mm-ui-nowe #mm-dock .dk-wiersz-czas[data-ton="dzis"] { color: var(--mm-tekst-ffda83); } .mm-ui-nowe #mm-dock .dk-kolejka-wiersz .dk-wiersz-czas[data-ton="dzis"] { background: var(--mm-tlo-rgba-220-160-40-18); } @media (max-width: 1000px) { .mm-ui-nowe #mm-dock .dk-kolejka-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Brief poranka: wspólne ruchy z paczką mailową. */ .mm-ui-nowe #mm-dock .dk-brief { display: flex; flex-direction: column; gap: 24px; } .mm-ui-nowe #mm-dock .dk-brief > .karta { margin: 0; } /* Hero ma się mieścić w górnej części okna: powitanie z kulą, pod spodem pasek czterech zwartych liczb. */ .mm-ui-nowe #mm-dock .dk-brief-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; } .mm-ui-nowe #mm-dock .dk-brief-hero > div:first-child p { margin: 0; } .mm-ui-nowe #mm-dock .dk-brief-hero h2 { margin: 4px 0; font-size: clamp(26px, 3vw, 38px); } .mm-ui-nowe #mm-dock .dk-brief-sprawy { margin-top: 6px; font-weight: 600; } .mm-ui-nowe #mm-dock .dk-brief-pogoda { margin: 4px 0 0; color: var(--muted); max-width: 60ch; } .mm-ui-nowe #mm-dock .dk-brief-orion { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; } .mm-ui-nowe #mm-dock .dk-brief-kpi.dk-bento { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; } .mm-ui-nowe #mm-dock .dk-brief-kpi .dk-bento-szeroka { grid-column: auto; } .mm-ui-nowe #mm-dock .dk-brief-kpi .dk-metryka { padding: 12px 14px; min-height: 0; } .mm-ui-nowe #mm-dock .dk-brief-kpi :is(.dk-metryka-zrodlo, .dk-metryka-dol, .dk-metryka-pozycje, .dk-metryka-orion, .dk-metryka-cisza, .znacznik-dzialu) { display: none; } .mm-ui-nowe #mm-dock .dk-brief-kpi .dk-metryka-wartosc { font-size: clamp(22px, 2.2vw, 30px); } .mm-ui-nowe #mm-dock .dk-brief-kpi :is(svg, canvas) { max-height: 40px; } .mm-ui-nowe #mm-dock .dk-brief-ruchy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; } .mm-ui-nowe #mm-dock .dk-brief-ruch { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; min-width: 0; overflow-wrap: anywhere; } .mm-ui-nowe #mm-dock .dk-brief-ruch p { margin: 0; } .mm-ui-nowe #mm-dock .dk-brief-ruch small { color: var(--muted); } .mm-ui-nowe #mm-dock .dk-brief-ruch .dk-pigulka { margin-top: auto; } /* Pigułka akcji w Briefie: ten sam wygląd co filtry Kreacji (szkło, najazd, fokus). */ .mm-ui-nowe #mm-dock .dk-pigulka { border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; background: var(--szklo-tlo); background-color: var(--mm-tlo-rgba-255-255-255-06); border: var(--szklo-ramka); box-shadow: var(--szklo-polysk); color: var(--ink); cursor: pointer; } .mm-ui-nowe #mm-dock .dk-pigulka:hover:not(:disabled) { background-color: var(--mm-tlo-rgba-255-255-255-14); } .mm-ui-nowe #mm-dock .dk-pigulka:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; } .mm-ui-nowe #mm-dock .dk-pigulka:disabled { opacity: .55; cursor: default; } .mm-ui-nowe #mm-dock .dk-brief-liczba { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; } .mm-ui-nowe #mm-dock .dk-brief-waga { display: inline-block; border-radius: 999px; padding: 4px 10px; color: var(--ink); background: var(--card); font-size: 12px; font-weight: 700; } .mm-ui-nowe #mm-dock .dk-brief-waga[data-waga="alarm"] { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); } .mm-ui-nowe #mm-dock .dk-brief-waga[data-waga="pieniadze"] { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); } .mm-ui-nowe #mm-dock .dk-brief-waga[data-waga="termin"] { color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); } .mm-ui-nowe #mm-dock .dk-brief-braki { margin-top: 16px; color: var(--muted); } .mm-ui-nowe #mm-dock .dk-brief-braki summary { cursor: pointer; } .mm-ui-nowe #mm-dock .dk-brief-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .mm-ui-nowe #mm-dock .dk-brief-plan > .karta { margin: 0; min-width: 0; } .mm-ui-nowe #mm-dock .dk-brief-os { list-style: none; padding: 0; margin: 0; } .mm-ui-nowe #mm-dock .dk-brief-os li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .mm-ui-nowe #mm-dock .dk-brief-os time { color: var(--muted); font-variant-numeric: tabular-nums; } .mm-ui-nowe #mm-dock .dk-brief-wiersz { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); } .mm-ui-nowe #mm-dock .dk-brief-wiersz b { flex: 1 1 160px; overflow-wrap: anywhere; } .mm-ui-nowe #mm-dock .dk-brief-wiersz small { color: var(--muted); } .mm-ui-nowe #mm-dock .dk-brief-nie-teraz { border: 0; background: transparent; color: var(--ink); text-decoration: underline; cursor: pointer; font: inherit; padding: 10px; } .mm-ui-nowe #mm-dock .dk-brief-naglowek { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .mm-ui-nowe #mm-dock .dk-brief-naglowek h3 { margin: 0; } .mm-ui-nowe #mm-dock .dk-brief > .dk-zywy-kafel { animation: dk-kafel-wejscie 420ms both cubic-bezier(.16,1,.3,1); } .mm-ui-nowe #mm-dock .dk-brief > .dk-zywy-kafel:nth-child(2) { animation-delay: 60ms; } .mm-ui-nowe #mm-dock .dk-brief > .dk-zywy-kafel:nth-child(3) { animation-delay: 120ms; } .mm-ui-nowe #mm-dock .dk-brief > .dk-zywy-kafel:nth-child(n+4) { animation-delay: 180ms; } @media (max-width: 760px) { .mm-ui-nowe #mm-dock .dk-brief-hero, .mm-ui-nowe #mm-dock .dk-brief-plan { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .mm-ui-nowe #mm-dock .dk-brief > .dk-zywy-kafel { animation: none; } } .mm-ui-nowe #mm-dock .dk-kafle-bez-ruchu .dk-brief > .dk-zywy-kafel { animation: none; } .mm-ui-nowe #mm-dock .dk-brief-dzien ul { margin: 8px 0 0; padding-left: 20px; } .mm-ui-nowe #mm-dock .dk-brief-dzien li + li { margin-top: 4px; } .mm-ui-nowe #mm-dock .dk-brief-kula-czeka .dk-kula { width: 84px; height: 84px; opacity: .85; } .mm-ui-nowe #mm-dock a.dk-pigulka { display: inline-block; align-self: flex-start; text-decoration: none; } /* Wspólny układ osobisty, włączany przez widok. */ .mm-ui-nowe #mm-dock .dk-uklad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .mm-ui-nowe #mm-dock .dk-uklad-obudowa { min-width: 0; } .mm-ui-nowe #mm-dock .dk-uklad-pasek { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .mm-ui-nowe #mm-dock .dk-uklad-kafel { position: relative; min-width: 0; } /* Domyślnie kafel na całą szerokość; kafle z rozmiaryMozliwe można zwęzić do połowy (1×1) i ułożyć obok siebie. */ .mm-ui-nowe #mm-dock .dk-uklad-kafel { grid-column: span 2; } .mm-ui-nowe #mm-dock .dk-uklad-polowa { grid-column: span 1; } .mm-ui-nowe #mm-dock .dk-uklad-tresc > .karta { margin: 0; height: 100%; box-sizing: border-box; } .mm-ui-nowe #mm-dock .dk-uklad-edycja .dk-uklad-kafel { touch-action: none; cursor: grab; } .mm-ui-nowe #mm-dock .dk-uklad-edycja .dk-uklad-tresc { animation: dk-uklad-drzenie 320ms ease-in-out infinite alternate; pointer-events: none; } .mm-ui-nowe #mm-dock .dk-uklad-narzedzia { position: absolute; top: -12px; right: 12px; z-index: 3; display: flex; gap: 6px; } .mm-ui-nowe #mm-dock .dk-uklad-narzedzia .dk-pigulka { background-color: var(--mm-tlo-rgba-24-22-36-92); box-shadow: 0 4px 14px var(--mm-cien-rgba-0-0-0-45); } .mm-ui-nowe #mm-dock .dk-uklad-podniesiony { z-index: 5; transform-origin: top left; transition: none; cursor: grabbing; } .mm-ui-nowe #mm-dock .dk-uklad-podniesiony .dk-uklad-tresc { animation: none; } .mm-ui-nowe #mm-dock .dk-uklad-dodaj { margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line2); } .mm-ui-nowe #mm-dock .dk-uklad-dodaj button { margin: 4px; } .mm-ui-nowe #mm-dock .dk-uklad-komunikat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } @keyframes dk-uklad-drzenie { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } } @media (prefers-reduced-motion: reduce) { .mm-ui-nowe #mm-dock .dk-uklad-edycja .dk-uklad-tresc { animation: none; } .mm-ui-nowe #mm-dock .dk-uklad-kafel { transition: none; } } @media (max-width: 700px) { .mm-ui-nowe #mm-dock .dk-uklad { grid-template-columns: minmax(0, 1fr); } .mm-ui-nowe #mm-dock .dk-uklad-kafel, .mm-ui-nowe #mm-dock .dk-uklad-polowa { grid-column: span 1; } } /* Moj kalendarz osoby. Uklad bazowy dziala takze bez nowego UI. */ #mm-dock .mk-ekran { --mk-linia: var(--mm-tlo-rgba-127-127-150-24); --mk-tekst: var(--mm-tlo-e8edf7); padding: 20px; } #mm-dock .mk-naglowek { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } #mm-dock .mk-naglowek h2 { margin: 3px 0 8px; font-size: 26px; } #mm-dock .mk-nadtytul { font-size: 10px; letter-spacing: .16em; margin: 0; opacity: .8; } #mm-dock .mk-zakres { margin: 0; font-size: 13px; } #mm-dock .mk-nawigacja { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; } #mm-dock .mk-nawigacja button { min-height: 36px; min-width: 36px; padding: 6px 12px; } #mm-dock .mk-zrodlo { margin-left: auto; font-size: 11px; opacity: .8; } #mm-dock .mk-stan { text-align: center; padding: 64px 20px; } #mm-dock .mk-stan > span { font-size: 36px; } #mm-dock .mk-pusto { padding: 16px; border: 1px solid var(--mk-linia); border-radius: 10px; } #mm-dock .mk-przewijanie { overflow: auto; max-height: 68vh; border: 1px solid var(--mk-linia); border-radius: 14px; } #mm-dock .mk-siatka { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto 1fr; min-width: 720px; } #mm-dock .mk-siatka.mk-jeden { min-width: 260px; } #mm-dock .mk-os { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 3; } #mm-dock .mk-os-naglowek { min-height: 72px; } #mm-dock .mk-os-calodniowe { border-bottom: 1px solid var(--mk-linia); } #mm-dock .mk-os-godziny { position: relative; } #mm-dock .mk-os-godziny > span { position: absolute; left: 5px; font-size: 10px; line-height: 20px; } #mm-dock .mk-dni { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; grid-template-columns: repeat(var(--mk-dni), minmax(0, 1fr)); } #mm-dock .mk-dzien { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 3; min-width: 0; border-left: 1px solid var(--mk-linia); } #mm-dock .mk-dzien-naglowek { grid-row: 1; min-height: 72px; padding: 8px 3px; } #mm-dock .mk-dzien h3 { text-align: center; margin: 0 0 8px; font-size: 11px; font-weight: 500; text-transform: uppercase; } #mm-dock .mk-dzien h3 b { display: block; font-size: 22px; line-height: 32px; } #mm-dock .mk-calodniowe { display: grid; grid-row: 2; grid-column: 1 / -1; grid-template-columns: repeat(var(--mk-dni), minmax(0, 1fr)); gap: 4px 0; padding: 4px 0; border-bottom: 1px solid var(--mk-linia); z-index: 1; } #mm-dock .mk-calodniowe .mk-karta { margin: 0 2px; } #mm-dock .mk-godziny { grid-row: 3; position: relative; isolation: isolate; background: repeating-linear-gradient(to bottom, transparent 0, transparent 71px, var(--mk-linia) 71px, var(--mk-linia) 72px); } #mm-dock .mk-karta { box-sizing: border-box; background: var(--mm-tlo-252b3b); color: var(--mm-tekst-f5f7ff); border: 1px solid var(--mm-ramka-515b70); border-left: 3px solid var(--mk-akcent); border-radius: 7px; padding: 7px; min-width: 0; overflow: hidden; font-size: 12px; line-height: 1.35; overflow-wrap: normal; } #mm-dock .mk-karta strong { display: block; font-size: 12px; font-weight: 600; } #mm-dock .mk-czas { display: block; font-size: 10px; color: var(--mm-tekst-e0e6f4); white-space: nowrap; } #mm-dock .mk-miejsce { display: block; font-size: 11px; color: var(--mm-tekst-d3dbea); margin-top: 4px; } #mm-dock .mk-dolacz { display: inline-block; padding: 3px 7px; margin-top: 5px; border: 1px solid currentColor; border-radius: 5px; color: var(--mm-tekst-eef3ff); text-decoration: none; font-size: 11px; } #mm-dock .mk-etykieta { min-width: 0; } #mm-dock .mk-siatka .mk-karta strong, #mm-dock .mk-siatka .mk-miejsce, #mm-dock .mk-siatka .mk-czas { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mm-dock .mk-godziny .mk-karta { box-shadow: -2px 1px 5px var(--mm-cien-rgba-0-0-0-35); } #mm-dock .mk-godziny .mk-dolacz { position: absolute; top: 0; right: 0; box-sizing: border-box; min-width: 32px; min-height: 32px; padding: 8px 3px; margin: 0; font-size: 9px; line-height: 14px; background: var(--mm-tlo-252b3b); } #mm-dock .mk-godziny .mk-karta:has(.mk-dolacz) .mk-etykieta { padding-right: 37px; } #mm-dock .mk-godziny .mk-zwarty { padding: 0 4px; } #mm-dock .mk-zwarty .mk-etykieta { display: flex; align-items: center; gap: 4px; height: 100%; } #mm-dock .mk-zwarty .mk-czas { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } #mm-dock .mk-zwarty strong { min-width: 0; } #mm-dock .mk-wczesniej { min-height: 36px; margin-bottom: 8px; padding: 6px 12px; color: inherit; background: transparent; border: 1px solid var(--mk-linia); border-radius: 8px; } #mm-dock .mk-dzis .mk-godziny { background-color: var(--mm-tlo-rgba-115-141-245-06); } #mm-dock .mk-dzis h3 b { color: var(--mm-tekst-b9c8ff); } #mm-dock .mk-teraz { position: absolute; left: 0; right: 0; border-top: 2px solid var(--mm-ramka-fb8b9b); pointer-events: none; z-index: 2; } #mm-dock .mk-teraz i { display: block; width: 7px; height: 7px; background: var(--mm-tlo-fb8b9b); border-radius: 50%; transform: translate(-3px,-4px); } #mm-dock .mk-dzien-listy { margin-bottom: 24px; } #mm-dock .mk-dzien-listy h3 { font-size: 14px; margin: 12px 0; } #mm-dock .mk-kafle { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 10px; } #mm-dock .mk-kafle .mk-karta { padding: 14px; } #mm-dock .mk-ekran button:focus-visible, #mm-dock .mk-ekran a:focus-visible { outline: 2px solid var(--mm-ramka-c7d2fe); outline-offset: 3px; } /* Nowy UI: ciemne szklo, bez rozmywania kart wydarzen. */ .mm-ui-nowe #mm-dock .mk-ekran { color: var(--mm-tekst-edf1ff); --mk-linia: var(--mm-tlo-rgba-255-255-255-10); } .mm-ui-nowe #mm-dock .mk-nadtytul { color: var(--mm-tekst-bac8ee); opacity: 1; } .mm-ui-nowe #mm-dock .mk-zakres { color: var(--mm-tekst-c5cde0); } .mm-ui-nowe #mm-dock .mk-zrodlo { color: var(--mm-tekst-bbc6dc); opacity: 1; } .mm-ui-nowe #mm-dock .mk-nawigacja button { background: linear-gradient(135deg,var(--mm-tlo-rgba-255-255-255-10),var(--mm-tlo-rgba-255-255-255-03)); border: 1px solid var(--mm-ramka-rgba-255-255-255-14); border-radius: 10px; color: var(--mm-tekst-edf1ff); } .mm-ui-nowe #mm-dock .mk-przewijanie { background: var(--mm-tlo-rgba-12-17-32-46); border-color: var(--mm-ramka-rgba-255-255-255-14); } .mm-ui-nowe #mm-dock .mk-karta { background: linear-gradient(135deg,var(--mm-tlo-rgba-255-255-255-10),var(--mm-tlo-rgba-255-255-255-03)), var(--mm-tlo-1b2235); border: 1px solid var(--mm-ramka-rgba-255-255-255-14); border-left: 3px solid var(--mk-akcent); box-shadow: inset 0 0 18px color-mix(in srgb,var(--mk-akcent) 10%,transparent); } .mm-ui-nowe #mm-dock .mk-stan { border-radius: 16px; border: 1px solid var(--mm-ramka-rgba-255-255-255-14); background: linear-gradient(135deg,var(--mm-tlo-rgba-255-255-255-10),var(--mm-tlo-rgba-255-255-255-03)); } .mm-ui-nowe #mm-dock .mk-dzien-naglowek { color: var(--mm-tekst-c5cde0); } .mm-ui-nowe #mm-dock .mk-dzis h3 b { color: var(--mm-tekst-c7d2fe); } @media (max-width: 759px) { #mm-dock .mk-ekran { padding: 12px; } #mm-dock .mk-naglowek h2 { font-size: 22px; } #mm-dock .mk-przewijanie { max-height: 65vh; } } @media (prefers-reduced-motion: reduce) { #mm-dock .mk-ekran *, #mm-dock .mk-ekran *::before, #mm-dock .mk-ekran *::after { animation: none; transition: none; scroll-behavior: auto; } } /* Ruch okien jest sterowany przez WAAPI, karty uzywaja wspolnej klasy. Przy bialym tle za szklem dim .54 daje kontrast co najmniej 5:1. */ #mm-dock :is(.dk-okno, .dk-mobil-okno) { --dim: var(--mm-tekst-rgba-245-242-234-54); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { /* Jasne matowe szklo jak w inspiracji Bartka (27.10); okno Oriona zachowuje swoj ciemny wyglad. */ #mm-dock .dk-okno:not([data-app="rozmowy"]), #mm-dock .dk-mobil-okno { /* Grafitowa podstawa trzyma kontrast bialego tytulu takze nad jasna, rozmyta kula Oriona. */ background: linear-gradient(160deg, var(--mm-tlo-rgba-255-255-255-18), var(--mm-tlo-rgba-255-255-255-06)), var(--mm-tlo-rgba-24-20-40-3); border-color: var(--mm-ramka-rgba-255-255-255-34); backdrop-filter: blur(30px) saturate(170%); -webkit-backdrop-filter: blur(30px) saturate(170%); box-shadow: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-5), 0 40px 100px var(--mm-cien-rgba-0-0-0-45); border-radius: 26px; } /* Jasne szklo z 27.10 tylko bez MM_UI_NOWE. Nowe UI: ciemne szklo, decyzja Bartka 31.10.2026, ciemne tlo var(--mm-tlo-196). */ #mm-dock .dk-okno:not([data-app="rozmowy"]) .kafel.dk-metryka, #mm-dock .dk-mobil-okno .kafel.dk-metryka { --ink: var(--mm-tekst-1b1830); --muted: var(--mm-tekst-rgba-27-24-48-66); --dim: var(--mm-tekst-rgba-27-24-48-5); --line: var(--mm-ramka-rgba-27-24-48-12); color: var(--ink); background: var(--mm-tlo-rgba-255-255-255-78); border-color: var(--mm-ramka-rgba-255-255-255-85); border-radius: 20px; box-shadow: inset 0 1px 0 var(--mm-cien-fff), 0 10px 24px var(--mm-cien-rgba-20-16-40-18); } } #mm-dock .dk-tlo-rozmyte.dk-ruch { animation: dk-fade .25s; } #mm-dock :is(.dk-okno, .dk-mobil-okno).dk-ruch .dk-karta { animation: dk-karta-wejscie .65s cubic-bezier(.34,1.4,.64,1) both; animation-delay: calc(160ms + var(--dk-kolejnosc, 0) * 70ms); transition: transform .2s; } #mm-dock :is(.dk-okno, .dk-mobil-okno).dk-zamyka { pointer-events: none; } @keyframes dk-karta-wejscie { from { transform: translateY(30px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } } @media (hover: hover) { #mm-dock :is(.dk-okno, .dk-mobil-okno).dk-ruch .dk-karta:not(.dk-zywy-kafel):hover { transform: translateY(-6px); box-shadow: 0 18px 34px var(--mm-cien-rgba-20-16-40-3); } } #mm-dock :is(.dk-okno, .dk-mobil-okno):not(.dk-ruch) { transition: none; } @media (prefers-reduced-motion: reduce) { #mm-dock .dk-tlo-rozmyte.dk-ruch, #mm-dock :is(.dk-okno, .dk-mobil-okno).dk-ruch .dk-karta { animation: none; transition: none; } #mm-dock :is(.dk-okno, .dk-mobil-okno).dk-ruch .dk-karta:not(.dk-zywy-kafel):hover { transform: none; box-shadow: none; } #mm-dock :is(.dk-okno, .dk-mobil-okno) { transition: none; } } /* Centrum powiadomien osoby, wspolne dla telefonu i komputera. */ #mm-dock .dk-dzwonek-komputer { position: fixed; right: 24px; top: 70px; z-index: 9650; } #mm-dock .dk-dzwonek-panel { position: fixed; right: 16px; top: 112px; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 140px); overflow-y: auto; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg, var(--mm-tlo-171323)); color: var(--ink, var(--mm-tekst-fff)); box-shadow: 0 12px 48px var(--mm-cien-0006); z-index: 9660; } #mm-dock .dk-dzwonek-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #mm-dock .dk-dzwonek-panel h2 { margin: 0 0 10px; } #mm-dock .dk-dzwonek-wpis { padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; } #mm-dock .dk-dzwonek-wpis p { white-space: pre-wrap; margin: 6px 0; } #mm-dock .dk-dzwonek-wpis time { display: block; font-size: 12px; margin-bottom: 6px; } @media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) { #mm-dock .dk-dzwonek-panel { top: calc(60px + env(safe-area-inset-top)); max-height: calc(100dvh - 150px - env(safe-area-inset-top)); } } /* Liczby osoby: jasne szklo i kolory dziedzin Oriona. */ #mm-dock .dk-metryka { --metryka-kolor: var(--mm-tekst-f8991b); position: relative; overflow: hidden; border-radius: 20px; padding: 14px 16px 12px; color: var(--mm-tekst-1b1830); background: var(--mm-tlo-rgba-255-255-255-80); border: 1px solid var(--mm-ramka-rgba-255-255-255-85); box-shadow: inset 0 1px 0 var(--mm-cien-fff), 0 10px 24px var(--mm-cien-rgba-20-16-40-18); transition: transform .2s; } #mm-dock .dk-metryka.sprzedaz { --metryka-kolor: var(--mm-tekst-1a59b6); } #mm-dock .dk-metryka.ludzie { --metryka-kolor: var(--mm-tekst-c1478a); } #mm-dock .dk-metryka::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--metryka-kolor); } #mm-dock .dk-metryka:hover, #mm-dock .dk-metryka:focus-within { transform: translateY(-6px); box-shadow: inset 0 1px 0 var(--mm-cien-fff), 0 18px 34px var(--mm-cien-rgba-20-16-40-28), 0 0 0 1px color-mix(in srgb, var(--metryka-kolor) 35%, transparent), 0 10px 40px color-mix(in srgb, var(--metryka-kolor) 30%, transparent); } #mm-dock .dk-metryka-gora { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } #mm-dock .dk-metryka .kn { font-size: 12.5px; color: var(--mm-tekst-rgba-27-24-48-62); } #mm-dock .dk-metryka-zrodlo { margin-left: auto; font-size: 11px; color: var(--mm-tekst-rgba-27-24-48-55); } #mm-dock .dk-metryka .dk-metryka-wartosc { font-size: 26px; font-weight: 700; margin: 4px 0 2px; overflow-wrap: anywhere; } #mm-dock .dk-metryka small { color: var(--mm-tekst-rgba-27-24-48-62); } #mm-dock .dk-metryka .dk-metryka-zmiana.lepiej { color: color-mix(in srgb, var(--metryka-kolor) 85%, var(--mm-tekst-000)); } #mm-dock .dk-metryka .dk-metryka-zmiana.gorzej { color: var(--mm-tekst-373344); } #mm-dock .dk-metryka .dk-metryka-zmiana.neutralnie { color: var(--mm-tekst-rgba-27-24-48-55); } #mm-dock .dk-metryka-trend { display: block; width: 100%; height: 46px; margin-top: 8px; } #mm-dock .dk-metryka-dol { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--mm-tekst-rgba-27-24-48-55); } #mm-dock .dk-metryka-cisza { padding: 1px 7px; border-radius: 6px; font-size: 10.5px; letter-spacing: .06em; font-weight: 700; background: var(--mm-tlo-rgba-27-24-48-07); } #mm-dock .dk-metryka-orion { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 999px; border: 1px solid var(--mm-ramka-rgba-27-24-48-1); background: var(--mm-tlo-rgba-255-255-255-7); color: var(--mm-tekst-1b1830); font: inherit; cursor: pointer; opacity: 0; transition: opacity .2s; } #mm-dock .dk-metryka:hover .dk-metryka-orion, #mm-dock .dk-metryka:focus-within .dk-metryka-orion { opacity: 1; } #mm-dock .dk-metryka-orion:focus-visible { outline: 2px solid var(--mm-ramka-1b1830); outline-offset: 3px; } #mm-dock .dk-metryka-kula { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--mm-tlo-rgba-255-255-255-75), transparent 45%), linear-gradient(135deg, var(--mm-tlo-1a59b6), var(--mm-tlo-c1478a), var(--mm-tlo-f8991b)); } #mm-dock .dk-metryka.wkrotce { background: var(--mm-tlo-rgba-255-255-255-42); border: 1.5px dashed var(--mm-ramka-rgba-255-255-255-9); box-shadow: none; } #mm-dock .dk-metryka.wkrotce::before { display: none; } #mm-dock .dk-metryka.wkrotce .dk-metryka-wartosc { font-size: 18px; font-weight: 600; color: var(--mm-tekst-rgba-27-24-48-62); } @media (max-width: 760px), (hover: none) { #mm-dock .dk-metryka-orion { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #mm-dock .dk-metryka, #mm-dock .dk-metryka-orion { transition: none; translate: none; transform: none; animation: none; } #mm-dock .dk-metryka:hover, #mm-dock .dk-metryka:focus-within { transform: none; } } /* Ciemna podstawa Kolekcji ogranicza jasnosc takze nad bialym portalem. Dotyczy desktopu i telefonu; pozostale aplikacje zachowuja swoje szklo. */ #mm-dock .dk-okno[data-app="kolekcje"], #mm-dock .dk-mobil-okno:has(.kl-aplikacja) { --ink: var(--mm-tekst-f5f2ea); background: var(--mm-tlo-rgba-22-20-37-90); border-color: var(--mm-ramka-rgba-255-255-255-12); } /* Kolekcje: karuzela we wspolnym szklanym oknie, bez filtrow na kartach. */ #mm-dock [data-app="kolekcje"] .dk-tresc { padding: 12px 0 8px; display: flex; flex-direction: column; } #mm-dock .kl-aplikacja { --muted: var(--mm-tekst-rgba-245-242-234-78); --dim: var(--mm-tekst-rgba-245-242-234-60); --line: var(--mm-ramka-rgba-255-255-255-08); --line2: var(--mm-ramka-rgba-255-255-255-12); color: var(--ink); font-variant-numeric: tabular-nums; flex: 1; min-height: 540px; display: flex; flex-direction: column; overflow: hidden; } #mm-dock .kl-naglowek { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 22px 8px; font-size: 12px; color: var(--ink); } #mm-dock .kl-naglowek label { display: flex; align-items: center; gap: 6px; } #mm-dock .kl-tor { position: relative; flex: 1; min-height: 440px; perspective: 1400px; touch-action: pan-y; } #mm-dock .kl-karta { position: absolute; left: 50%; top: 10px; bottom: 14px; width: 340px; margin-left: -170px; border-radius: 20px; overflow: auto; cursor: pointer; color: var(--ink); background: var(--mm-tlo-rgba-255-255-255-07); border: 1px solid var(--line2); box-shadow: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-08), 0 10px 24px var(--mm-cien-rgba-20-16-40-18); font-size: 13px; transition: transform .55s cubic-bezier(.34,1.25,.64,1); } #mm-dock .kl-srodek { cursor: default; box-shadow: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-08), 0 10px 24px var(--mm-cien-rgba-20-16-40-18), 0 0 0 1px var(--kl-kolor); } #mm-dock .kl-karta::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--kl-kolor); z-index: 2; } #mm-dock .kl-obraz { position: relative; height: 38%; min-height: 130px; } #mm-dock .kl-okladka { height: 100%; } #mm-dock .kl-okladka, #mm-dock .kl-miniatura { background: var(--mm-tlo-rgba-255-255-255-04); display: flex; align-items: center; justify-content: center; color: var(--muted); text-align: center; } #mm-dock .kl-okladka > span { padding: 38px 16px 8px; } #mm-dock .kl-okladka img, #mm-dock .kl-miniatura img { width: 100%; height: 100%; object-fit: contain; } #mm-dock .kl-premiera { position: absolute; left: 12px; top: 12px; right: 12px; width: fit-content; padding: 4px 10px; border-radius: 20px; background: var(--mm-tlo-rgba-22-20-37-90); border: 1px solid var(--line2); font-size: 12px; font-weight: 650; } #mm-dock .kl-tresc { padding: 8px 16px 14px; } #mm-dock .kl-tresc h3 { font-size: 14px; font-weight: 700; margin: 0; color: var(--ink); } #mm-dock .kl-tablica { font-size: 12px; color: var(--dim); } #mm-dock .kl-liczby { display: flex; gap: 14px; margin: 10px 0 8px; font-size: 12px; color: var(--muted); } #mm-dock .kl-liczby b { display: block; font-size: 18px; color: var(--ink); } #mm-dock .kl-uwaga b { color: var(--mm-tekst-f8991b); } #mm-dock .kl-etapy { display: grid; gap: 5px; } #mm-dock .kl-etap { display: grid; grid-template-columns: 76px 1fr 32px; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } #mm-dock .kl-belka { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--mm-tlo-rgba-255-255-255-08); } #mm-dock .kl-miniatury { display: flex; gap: 6px; margin-top: 10px; } #mm-dock .kl-miniatura { flex: 1; height: 44px; min-width: 0; border-radius: 10px; overflow: hidden; font-size: 10px; } #mm-dock .kl-boczna .kl-etapy, #mm-dock .kl-boczna .kl-miniatury, #mm-dock .kl-boczna .kl-liczby { opacity: 0; } #mm-dock .kl-podpis { text-align: center; color: var(--ink); font-size: 12px; margin: 0 12px 10px; } #mm-dock .kl-os { display: flex; align-items: center; gap: 12px; margin: 0 auto 10px; padding: 8px 10px; border-radius: 24px; background: var(--mm-tlo-rgba-255-255-255-04); border: 1px solid var(--line2); max-width: 94%; } #mm-dock .kl-os button { flex-shrink: 0; border: 1px solid var(--line2); border-radius: 999px; background: var(--mm-tlo-rgba-255-255-255-07); color: var(--ink); width: 34px; height: 34px; cursor: pointer; } #mm-dock .kl-os button:disabled { opacity: .45; cursor: default; } #mm-dock .kl-kropki { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 5px; } #mm-dock .kl-kropki button { width: 9px; height: 9px; padding: 0; background: var(--mm-tlo-rgba-255-255-255-55); } #mm-dock .kl-kropki button.przeszla { background: var(--mm-tlo-rgba-255-255-255-3); } #mm-dock .kl-kropki button.on { width: 22px; background: var(--mm-tlo-fff); } #mm-dock .kl-dzis { width: 2px; height: 16px; flex-shrink: 0; background: var(--mm-tlo-f8991b-3006); } #mm-dock .kl-os .kl-orion { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; width: auto; height: auto; font-size: 12px; } #mm-dock .kl-kula { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg,var(--mm-tlo-1a59b6-3015),var(--mm-tlo-c1478a-30c4),var(--mm-tlo-f8991b-3006)); } #mm-dock .kl-aplikacja button:focus-visible, #mm-dock .kl-aplikacja .kl-tor:focus-visible { outline: 2px solid var(--mm-ramka-f8991b); outline-offset: 3px; } #mm-dock .kl-siatka .kl-tor { overflow: auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,340px)); justify-content: center; gap: 16px; perspective: none; padding: 12px; } #mm-dock .kl-siatka .kl-karta { position: relative; inset: auto; width: 100%; margin: 0; min-height: 440px; transition: none; } #mm-dock .kl-siatka .kl-boczna .kl-etapy, #mm-dock .kl-siatka .kl-boczna .kl-miniatury, #mm-dock .kl-siatka .kl-boczna .kl-liczby { opacity: 1; } @media (max-width: 700px) { #mm-dock .kl-os { flex-wrap: wrap; justify-content: center; } #mm-dock .kl-kropki { max-width: calc(100vw - 150px); } #mm-dock .kl-karta { width: 300px; margin-left: -150px; } #mm-dock .kl-siatka .kl-karta { margin: 0; } } @media (prefers-reduced-motion: reduce) { #mm-dock .kl-karta { transition: none; } } /* Panel Kolekcji */ #mm-dock .kl-uklad { position: relative; display: flex; gap: 10px; flex: 1; min-height: 0; } #mm-dock .kl-karuzela { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; } #mm-dock .kl-panel { flex: 0 0 320px; box-sizing: border-box; max-height: 720px; overflow: auto; padding: 12px; border-radius: 20px; background: var(--mm-tlo-rgba-255-255-255-04); color: var(--ink); border: 1px solid var(--line2); font-size: 13px; } #mm-dock .kl-panel[hidden] { display: none; } #mm-dock .kl-panel h3 { color: var(--ink); font-size: 15px; margin: 14px 0 8px; } #mm-dock .kl-pole { display: grid; gap: 6px; } #mm-dock .kl-pole input { box-sizing: border-box; width: 100%; min-width: 0; background: var(--mm-tlo-rgba-255-255-255-06); color: var(--ink); border: 1px solid var(--line2); padding: 9px; border-radius: 8px; font: inherit; } #mm-dock .kl-panel button, #mm-dock .kl-naglowek > button { background: var(--mm-tlo-rgba-255-255-255-06); color: var(--ink); border: 1px solid var(--line2); border-radius: 999px; padding: 6px 9px; cursor: pointer; } #mm-dock .kl-wyniki, #mm-dock .kl-pozycje { list-style: none; margin: 10px 0; padding: 0; } #mm-dock .kl-wyniki { max-height: 220px; overflow: auto; } #mm-dock .kl-wyniki button { display: grid; text-align: left; gap: 4px; width: 100%; } #mm-dock .kl-wyniki li + li { margin-top: 5px; } #mm-dock .kl-wyniki span, #mm-dock .kl-pozycja > span { color: var(--muted); font-size: 12px; } #mm-dock .kl-filtry { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; } #mm-dock .kl-filtry button[aria-pressed=true] { border-color: var(--purple); color: color-mix(in srgb, var(--purple) 45%, var(--ink)); } #mm-dock .kl-pozycja { display: grid; gap: 4px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--line2); border-radius: 20px; background: var(--mm-tlo-rgba-255-255-255-06); overflow-wrap: anywhere; } #mm-dock .kl-statusy { display: flex; gap: 5px; flex-wrap: wrap; } #mm-dock .kl-status { display: inline-flex; width: fit-content; padding: 3px 8px; border-radius: 999px; color: var(--mm-tekst-f5f2ea); background: color-mix(in srgb, var(--kl-status-kolor, var(--mm-tlo-c4c4c4)) 24%, var(--mm-tlo-161425)); border: 1px solid color-mix(in srgb, var(--kl-status-kolor, var(--mm-ramka-c4c4c4)) 65%, transparent); font-size: 11px; font-style: normal; } #mm-dock .kl-pozycja .kl-po-terminie { color: var(--purple); } #mm-dock .kl-pole input:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; } @media (max-width: 899px) { #mm-dock .kl-uklad { flex-direction: column; } #mm-dock .kl-panel { flex: none; width: 100%; max-height: 600px; } } /* Gotowosc, przeplyw i wspolny wskaznik filtrow */ #mm-dock .kl-aplikacja, #mm-dock .kl-uklad { min-width: 0; max-width: 100%; } #mm-dock .kl-filtry { position: relative; isolation: isolate; flex-wrap: nowrap; overflow-x: auto; padding: 3px; max-width: 100%; box-sizing: border-box; } #mm-dock .kl-filtry button { position: relative; z-index: 1; flex-shrink: 0; background: transparent; color: var(--ink); border: 1px solid transparent; border-radius: 999px; padding: 6px 9px; cursor: pointer; } #mm-dock .kl-filtry button[aria-pressed=true] { background: transparent; } #mm-dock .kl-kropla { position: absolute; pointer-events: none; z-index: 0; border-radius: 999px; background: color-mix(in srgb, var(--purple) 18%, transparent); box-shadow: inset 0 0 0 1px var(--purple); } #mm-dock .kl-widoki { margin-bottom: 0; } #mm-dock .kl-gotowosc { overflow: auto; padding: 12px; display: grid; align-content: start; gap: 12px; max-height: 720px; container-type: inline-size; } #mm-dock .kl-gotowosc-wiersz { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(100px, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px; min-width: 0; width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 20px; border: 1px solid var(--line2); background: var(--mm-tlo-rgba-255-255-255-06); color: var(--ink); text-align: left; cursor: pointer; font: inherit; } #mm-dock .kl-gotowosc-wiersz > span { font-size: 12px; min-width: 0; } #mm-dock .kl-gotowosc-nazwa, #mm-dock .kl-gotowosc-liczby, #mm-dock .kl-gotowosc-dopiski { display: flex; align-items: center; gap: 12px; } #mm-dock .kl-gotowosc-nazwa b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #mm-dock .kl-gotowosc-nazwa > span { color: var(--muted); flex-shrink: 0; } #mm-dock .kl-gotowosc-liczby { justify-content: flex-end; white-space: nowrap; } #mm-dock .kl-gotowosc-roznica { color: var(--muted); } #mm-dock .kl-gotowosc-uwaga { color: var(--mm-tekst-f8991b); } #mm-dock .kl-gotowosc-dopiski { grid-column: 1 / -1; flex-wrap: wrap; color: var(--muted); } #mm-dock .kl-gotowosc-wiersz > .kl-gotowosc-dopiski { font-size: 12px; } #mm-dock .kl-gotowosc-po { display: grid; gap: 12px; min-width: 0; } #mm-dock .kl-gotowosc-po h3 { margin: 12px 0 0; font-size: 14px; color: var(--muted); } @container (max-width: 1050px) { #mm-dock .kl-gotowosc-wiersz { grid-template-columns: minmax(0, 1fr) minmax(80px, 1fr); gap: 6px 12px; } #mm-dock .kl-gotowosc-liczby { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; white-space: normal; } #mm-dock .kl-gotowosc-nazwa { gap: 6px; min-width: 0; } #mm-dock .kl-gotowosc-nazwa > span { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } #mm-dock .kl-postep { display: block; position: relative; height: 10px; background: color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 6px; margin: 5px 0; } #mm-dock .kl-postep-wypelnienie { display: block; height: 100%; background: var(--purple); border-radius: inherit; } #mm-dock .kl-oczekiwany { position: absolute; width: 2px; top: -5px; bottom: -5px; background: var(--ink); box-shadow: 0 0 0 1px var(--mm-cien-rgba-22-20-37-90); transform: translateX(-50%); } #mm-dock .kl-oczekiwany.kl-mala-proba { opacity: .3; } #mm-dock .kl-wybor { display: grid; gap: 6px; padding: 12px; color: var(--ink); min-width: 0; } #mm-dock .kl-pole input::placeholder { color: var(--muted); opacity: 1; } #mm-dock .kl-przeplyw { display: flex; align-items: flex-start; gap: 8px; overflow: auto; padding: 10px; max-height: 660px; } #mm-dock .kl-przeplyw-kolumna { flex: 0 0 250px; padding: 10px; border-radius: 20px; background: var(--mm-tlo-rgba-255-255-255-04); border: 1px solid var(--line2); color: var(--ink); box-sizing: border-box; } #mm-dock .kl-przeplyw-kolumna header { display: grid; gap: 6px; font-size: 12px; } #mm-dock .kl-etap-pominiety { filter: grayscale(1); color: var(--muted); border-style: dashed; } #mm-dock .kl-przeplyw-kolumna h3 { margin: 0; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; } #mm-dock .kl-przeplyw-karta { display: grid; gap: 5px; padding: 10px; margin-top: 7px; background: var(--mm-tlo-rgba-255-255-255-07); border: 1px solid var(--line2); border-radius: 20px; font-size: 13px; overflow-wrap: anywhere; } #mm-dock .kl-biezacy-status { justify-self: start; max-width: 100%; box-sizing: border-box; padding: 3px 8px; border-radius: 999px; font-size: 11px; color: var(--mm-tekst-f5f2ea); background: color-mix(in srgb, var(--kl-status-kolor, var(--mm-tlo-c4c4c4)) 24%, var(--mm-tlo-161425)); border: 1px solid color-mix(in srgb, var(--kl-status-kolor, var(--mm-ramka-c4c4c4)) 65%, transparent); } #mm-dock .kl-problem { color: color-mix(in srgb, var(--purple) 45%, var(--ink)); } @media (prefers-reduced-motion: reduce) { #mm-dock .kl-kropla { animation: none; transition: none; } } /* Ciemne szklo Kolekcji, z dotychczasowym ruchem warstw. */ #mm-dock .kl-panel, #mm-dock .kl-przeplyw-kolumna, #mm-dock .kl-gotowosc-wiersz, #mm-dock .kl-przeplyw-karta, #mm-dock .kl-pozycja, #mm-dock .kl-wyniki button { box-shadow: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-08), 0 10px 24px var(--mm-cien-rgba-20-16-40-18); transition: transform .15s; } #mm-dock .kl-panel { backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); } #mm-dock .kl-filtry { border-radius: 999px; border: 1px solid var(--line2); background: var(--mm-tlo-rgba-255-255-255-06); box-shadow: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-08), 0 10px 24px var(--mm-cien-rgba-20-16-40-18); } #mm-dock .kl-wyniki button { border-radius: 20px; padding: 8px 10px; } #mm-dock .kl-karta:hover, #mm-dock .kl-karta:focus-visible, #mm-dock .kl-przeplyw-karta:hover, #mm-dock .kl-przeplyw-karta:focus-visible, #mm-dock .kl-pozycja:hover, #mm-dock .kl-pozycja:focus-visible, #mm-dock .kl-gotowosc-wiersz:hover, #mm-dock .kl-gotowosc-wiersz:focus-visible, #mm-dock .kl-wyniki button:hover, #mm-dock .kl-wyniki button:focus-visible { transform: translateY(-2px); border-color: var(--mm-ramka-rgba-255-255-255-24); box-shadow: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-08), 0 14px 28px var(--mm-cien-rgba-20-16-40-24); } #mm-dock [data-ruch-liczba] { font-variant-numeric: tabular-nums; } #mm-dock .dk-ruch-liczba { position: relative; display: inline-block; color: transparent; } #mm-dock .dk-ruch-cyfry { position: absolute; inset: 0; white-space: nowrap; pointer-events: none; } #mm-dock .dk-ruch-cyfry::after { content: attr(data-ruch-tekst); } @media (prefers-reduced-motion: reduce) { #mm-dock .kl-aplikacja *, #mm-dock .kl-aplikacja *::before, #mm-dock .kl-aplikacja *::after { animation: none; transition: none; } #mm-dock .kl-aplikacja .kl-karta:hover, #mm-dock .kl-aplikacja .kl-karta:focus-visible, #mm-dock .kl-aplikacja .kl-przeplyw-karta:hover, #mm-dock .kl-aplikacja .kl-przeplyw-karta:focus-visible, #mm-dock .kl-aplikacja .kl-pozycja:hover, #mm-dock .kl-aplikacja .kl-pozycja:focus-visible, #mm-dock .kl-aplikacja .kl-gotowosc-wiersz:hover, #mm-dock .kl-aplikacja .kl-gotowosc-wiersz:focus-visible, #mm-dock .kl-aplikacja .kl-wyniki button:hover, #mm-dock .kl-aplikacja .kl-wyniki button:focus-visible { transform: none; } } /* Wspolne klocki aplikacji: ciemne szklo niezalezne od motywu portalu. */ #mm-dock .dk-wspolne { --ink: var(--mm-tekst-f5f2ea); --muted: var(--mm-tekst-rgba-245-242-234-78); --dim: var(--mm-tekst-rgba-245-242-234-72); --line: var(--mm-ramka-rgba-255-255-255-08); --line2: var(--mm-ramka-rgba-255-255-255-12); --green: var(--mm-tlo-80dfa0); --red: var(--mm-tlo-ffadb0); --orange: var(--mm-tlo-ffbd68); color: var(--ink); color-scheme: dark; font-variant-numeric: tabular-nums; } #mm-dock .dk-wspolne .karta, #mm-dock .dk-wspolne .kafel:not(.dk-metryka), #mm-dock .dk-wspolne .tab, #mm-dock .dk-wspolne .wiersz-zad, #mm-dock .dk-wspolne .dk-system .qtile, #mm-dock .dk-wspolne .dk-system .statement, #mm-dock .dk-wspolne .dk-system .fin-pipeline { background: var(--mm-tlo-rgba-22-20-37-90); color: var(--ink); border: 1px solid var(--line2); border-radius: 20px; box-shadow: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-08), 0 10px 24px var(--mm-cien-rgba-20-16-40-18); transition: transform .15s; } #mm-dock .dk-wspolne .btn, #mm-dock .dk-wspolne input, #mm-dock .dk-wspolne textarea { background: var(--mm-tlo-rgba-22-20-37-90); color: var(--ink); border: 1px solid var(--line2); border-radius: 10px; padding: 7px 11px; font: inherit; } #mm-dock .dk-wspolne input::placeholder, #mm-dock .dk-wspolne textarea::placeholder { color: var(--muted); opacity: 1; } #mm-dock .dk-wspolne .btn:hover, #mm-dock .dk-wspolne .btn.pri { border-color: var(--purple); color: var(--ink); } #mm-dock .dk-wspolne .btn:focus-visible, #mm-dock .dk-wspolne input:focus-visible, #mm-dock .dk-wspolne textarea:focus-visible { outline: 2px solid var(--mm-ramka-b7a6f5); outline-offset: 2px; } #mm-dock .dk-wspolne .petla .duza { background: none; color: var(--ink); } #mm-dock .dk-wspolne .dk-filtry { display: flex; position: relative; isolation: isolate; gap: 3px; padding: 3px; width: fit-content; max-width: 100%; box-sizing: border-box; overflow-x: auto; border-radius: 999px; border: 1px solid var(--line2); background: var(--mm-tlo-rgba-22-20-37-90); box-shadow: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-08), 0 10px 24px var(--mm-cien-rgba-20-16-40-18); } #mm-dock .dk-wspolne .dk-filtry .btn { position: relative; z-index: 1; flex-shrink: 0; border-radius: 999px; background: transparent; border-color: transparent; } #mm-dock .dk-wspolne .dk-filtry .btn[aria-pressed=true] { color: var(--mm-tekst-f5f2ea); } #mm-dock .dk-wspolne .dk-kropla { position: absolute; pointer-events: none; z-index: 0; border-radius: 999px; background: var(--mm-tlo-rgba-183-166-245-18); box-shadow: inset 0 0 0 1px var(--mm-cien-b7a6f5); } /* Wejscie obsluguje ruchZawartosci, bez drugiej animacji CSS na tych samych kartach. */ #mm-dock :is(.dk-okno, .dk-mobil-okno).dk-ruch .dk-wspolne .dk-karta { animation: none; } @media (hover: hover) { #mm-dock .dk-wspolne .dk-system .qtile:hover, #mm-dock .dk-wspolne .karta:hover, #mm-dock .dk-wspolne .kafel:not(.dk-metryka):hover, #mm-dock :is(.dk-okno, .dk-mobil-okno).dk-ruch .dk-wspolne .karta:hover, #mm-dock :is(.dk-okno, .dk-mobil-okno).dk-ruch .dk-wspolne .kafel:not(.dk-metryka):hover { transform: translateY(-2px); border-color: var(--mm-ramka-rgba-255-255-255-24); box-shadow: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-08), 0 14px 28px var(--mm-cien-rgba-20-16-40-24); } } @media (prefers-reduced-motion: reduce) { #mm-dock .dk-wspolne *, #mm-dock .dk-wspolne *::before, #mm-dock .dk-wspolne *::after { animation: none; transition: none; } #mm-dock .dk-wspolne .dk-system .qtile:hover, #mm-dock .dk-wspolne .karta:hover, #mm-dock .dk-wspolne .kafel:not(.dk-metryka):hover, #mm-dock :is(.dk-okno, .dk-mobil-okno).dk-ruch .dk-wspolne .karta:hover, #mm-dock :is(.dk-okno, .dk-mobil-okno).dk-ruch .dk-wspolne .kafel:not(.dk-metryka):hover { transform: none; } } #mm-dock .dk-wspolne [data-ruch-liczba].dk-ruch-liczba { color: transparent; } /* Wynik dnia: ciemne szklo z wlasnymi tokenami w obu motywach. */ #mm-dock .dk-okno[data-app="wynik"], #mm-dock .dk-mobil-okno:has(.wd-aplikacja) { --ink: var(--mm-tekst-f5f2ea-a397); --muted: var(--mm-tekst-c1c4d4); background: var(--mm-tlo-rgba-18-20-32-96); color: var(--mm-tekst-f5f2ea-a397); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); } #mm-dock .wd-aplikacja { --ink: var(--mm-tekst-f5f2ea-a397); --muted: var(--mm-tekst-c1c4d4); color: var(--ink); font-variant-numeric: tabular-nums; max-width: 1280px; min-width: 0; margin: auto; padding: 12px; } #mm-dock .wd-dzien { display: flex; flex-direction: column; gap: 22px; } #mm-dock .wd-naglowek { background: var(--mm-tlo-rgba-30-32-49-96); border: 1px solid var(--mm-ramka-rgba-255-255-255-12); border-radius: 24px; padding: 28px; } #mm-dock .wd-nawigacja { display: flex; justify-content: space-between; align-items: center; gap: 12px; } #mm-dock .wd-nawigacja button { background: var(--mm-tlo-34374d); color: var(--mm-tekst-f5f2ea-a397); border: 1px solid var(--mm-ramka-686c86); border-radius: 14px; width: 44px; height: 44px; margin-left: 6px; cursor: pointer; font-size: 22px; } #mm-dock .wd-nawigacja button:disabled { color: var(--mm-tekst-c1c4d4); cursor: default; background: var(--mm-tlo-25283b); } #mm-dock .wd-aplikacja button:focus-visible { outline: 2px solid var(--mm-ramka-f8991b); outline-offset: 3px; } #mm-dock .wd-aplikacja h2 { font-size: clamp(20px, 2.4vw, 30px); margin: 6px 0 0; } #mm-dock .wd-aplikacja h3 { margin: 0 0 16px; font-size: 19px; } #mm-dock .wd-aplikacja h4 { margin: 0 0 18px; font-size: 17px; } #mm-dock .wd-aplikacja small, #mm-dock .wd-etykieta, #mm-dock .wd-zrodlo { color: var(--muted); } #mm-dock .wd-aplikacja h3 small { font-size: 12px; font-weight: 400; margin-left: 8px; } #mm-dock .wd-etykieta { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } #mm-dock .wd-hero { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 36px; margin: 32px 0 24px; } #mm-dock .wd-netto { font-size: clamp(26px, 4vw, 54px); font-weight: 650; letter-spacing: -.04em; line-height: 1.3; overflow-wrap: anywhere; } #mm-dock .wd-podsumowanie { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 22px; } #mm-dock .wd-podsumowanie span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; } #mm-dock .wd-podsumowanie b { font-size: 17px; font-weight: 500; } #mm-dock .wd-cel { display: grid; gap: 12px; } #mm-dock .wd-cel strong { font-size: 32px; font-weight: 550; } #mm-dock .wd-cel > span:last-child { font-size: 12px; color: var(--muted); } #mm-dock .wd-tor { height: 6px; border-radius: 8px; overflow: hidden; background: var(--mm-tlo-42465e); } #mm-dock .wd-tor i { display: block; height: 100%; background: var(--mm-tlo-f8991b-3006); border-radius: inherit; } #mm-dock .wd-siatka { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } #mm-dock .wd-karta { background: var(--mm-tlo-rgba-28-30-46-98); border: 1px solid var(--mm-ramka-rgba-255-255-255-1); border-radius: 20px; padding: 22px; min-width: 0; } #mm-dock .wd-atom { display: grid; grid-template-columns: minmax(0,1fr) 90px; align-items: center; gap: 8px; padding: 13px 0; border-top: 1px solid var(--mm-ramka-rgba-255-255-255-1); } #mm-dock .wd-atom-liczba > span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; overflow-wrap: anywhere; } #mm-dock .wd-atom-liczba b { font-size: 17px; font-weight: 500; overflow-wrap: anywhere; } #mm-dock .wd-mini { width: 90px; height: 34px; color: var(--mm-tekst-b9b0fb); } #mm-dock .wd-udzial { grid-column: 1 / -1; color: var(--muted); font-size: 11px; } #mm-dock .wd-udzial .wd-tor { margin-top: 7px; height: 4px; } #mm-dock .wd-kanaly { background: var(--mm-tlo-rgba-28-30-46-98); border: 1px solid var(--mm-ramka-rgba-255-255-255-1); border-radius: 20px; padding: 22px; min-width: 0; } #mm-dock .wd-tabela { overflow-x: auto; } #mm-dock .wd-kanaly table { border-collapse: collapse; width: 100%; font-size: 13px; } #mm-dock .wd-kanaly th, #mm-dock .wd-kanaly td { padding: 14px 10px; text-align: right; border-bottom: 1px solid var(--mm-ramka-rgba-255-255-255-12); white-space: nowrap; } #mm-dock .wd-kanaly th:first-child { text-align: left; } #mm-dock .wd-kanaly thead th { color: var(--muted); font-size: 11px; font-weight: 500; } #mm-dock .wd-kanaly th small { display: block; font-weight: 400; } #mm-dock .wd-brak { color: var(--muted); } #mm-dock .wd-niewypelniany { display: block; color: var(--muted); font-size: 13px; font-weight: 400; font-style: italic; } #mm-dock .wd-porownanie { background: var(--mm-tlo-rgba-28-30-46-98); border: 1px solid var(--mm-ramka-rgba-255-255-255-1); border-radius: 20px; padding: 22px; } #mm-dock .wd-porownanie p { font-size: 13px; line-height: 1.6; } #mm-dock .wd-zrodlo { font-size: 11px; line-height: 1.6; margin-bottom: 0; } #mm-dock .wd-uwaga { background: var(--mm-tlo-392d20); color: var(--mm-tekst-f5f2ea-a397); border: 1px solid var(--mm-ramka-ae7530); border-radius: 14px; padding: 16px 22px; } @media (max-width: 1000px) { #mm-dock .wd-siatka { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 640px) { #mm-dock .wd-aplikacja { padding: 4px; width: 100%; box-sizing: border-box; } #mm-dock .wd-hero, #mm-dock .wd-siatka { grid-template-columns: minmax(0,1fr); } #mm-dock .wd-hero { gap: 28px; margin-top: 26px; } #mm-dock .wd-naglowek, #mm-dock .wd-karta, #mm-dock .wd-kanaly, #mm-dock .wd-porownanie { padding: 18px; } #mm-dock .wd-nawigacja > div:last-child { display: flex; flex-shrink: 0; } #mm-dock .wd-nawigacja button { width: 40px; height: 44px; } #mm-dock .wd-podsumowanie { flex-direction: column; } } /* Paski, w tym slupki SVG, rosna od lewej bez zmiany ukladu. */ #mm-dock [data-ruch-pasek] { transform-origin: left; transform-box: fill-box; } /* Brief 57: tylko nowe wezly tworzone po fladze sesji. Bez rozmycia w oknie. */ #mm-dock .ui-os-etapow { background: var(--mm-tlo-171425); color: var(--mm-tekst-f5f3ff); border: 1px solid var(--mm-ramka-777181); border-radius: 14px; padding: 12px; margin-top: 10px; } #mm-dock .ui-os-etapow ol { display: flex; overflow-x: auto; list-style: none; padding: 0; margin: 0; gap: 12px; } #mm-dock .ui-os-etapow li { flex: 1 0 110px; text-align: center; align-items: center; border-top: 2px solid var(--mm-ramka-bdb6cd); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; } #mm-dock .ui-os-etapow .ui-biezacy { border-color: var(--mm-ramka-ffcd80); color: var(--mm-tekst-ffcd80); } #mm-dock .ui-os-etapow .ui-przyszly { color: var(--mm-tekst-bdb6cd); } #mm-dock .ui-os-etapow time { font-size: 12px; } #mm-dock .ui-os-etapow p { margin: 12px 0 0; color: var(--mm-tekst-bdb6cd); } #mm-dock .ui-liczby { background: var(--mm-tlo-171425); color: var(--mm-tekst-f5f3ff); border: 1px solid var(--mm-ramka-777181); border-radius: 16px; padding: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } #mm-dock .ui-liczba { display: flex; gap: 10px; align-items: center; min-width: 0; } #mm-dock .ui-liczba i { border: 1px solid var(--mm-ramka-777181); border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; font-style: normal; } #mm-dock .ui-liczba b, #mm-dock .ui-liczba span { display: block; overflow-wrap: anywhere; } #mm-dock .ui-liczba span { color: var(--mm-tekst-bdb6cd); font-size: 12px; } #mm-dock .ui-kanaly { background: var(--mm-tlo-171425); color: var(--mm-tekst-f5f3ff); border: 1px solid var(--mm-ramka-777181); border-radius: 18px; position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: 16px; } #mm-dock .ui-kanaly button { position: relative; z-index: 1; background: transparent; color: var(--mm-tekst-f5f3ff); border: 1px solid var(--mm-ramka-777181); border-radius: 999px; padding: 8px 12px; cursor: pointer; } #mm-dock .ui-kanaly .dk-kropla { position: absolute; background: var(--mm-tlo-454060); border-radius: 999px; pointer-events: none; } #mm-dock .ui-pierscien { background: var(--mm-tlo-171425); color: var(--mm-tekst-f5f3ff); border: 1px solid var(--mm-ramka-777181); border-radius: 16px; padding: 12px; min-width: 0; } #mm-dock .ui-pierscien svg { width: min(100%, 230px); display: block; margin: auto; } #mm-dock .ui-pierscien text { font-size: 12px; } #mm-dock .ui-pierscien ul { list-style: none; margin: 0; padding: 0; } #mm-dock .ui-pierscien li { font-size: 12px; margin: 8px 0; } #mm-dock .ui-pierscien i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; } #mm-dock .wd-kanaly:has(> .ui-pierscien) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 270px); gap: 12px; } #mm-dock .wd-kanaly:has(> .ui-pierscien) > h3, #mm-dock .wd-kanaly:has(> .ui-pierscien) > .ui-kanaly, #mm-dock .wd-kanaly:has(> .ui-pierscien) > p { grid-column: 1 / -1; } #mm-dock .ui-akcje { background: var(--mm-tlo-171425); color: var(--mm-tekst-f5f3ff); border: 1px solid var(--mm-ramka-777181); border-radius: 14px; position: absolute; left: 8px; top: 70px; display: flex; flex-direction: column; gap: 8px; padding: 6px; z-index: 4; } #mm-dock .ui-akcje button { background: transparent; color: var(--mm-tekst-f5f3ff); border: 1px solid var(--mm-ramka-777181); border-radius: 10px; width: 36px; height: 36px; cursor: pointer; } #mm-dock .dk-okno:has(> .ui-akcje) > .dk-tresc { padding-left: 74px; } #mm-dock .ui-akcje button:focus-visible, #mm-dock .ui-kanaly button:focus-visible { outline: 2px solid var(--mm-ramka-d7c5ff); outline-offset: 2px; } @media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) { #mm-dock .ui-akcje { display: none; } #mm-dock .dk-okno:has(> .ui-akcje) > .dk-tresc { padding-left: 16px; } #mm-dock .ui-liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); } #mm-dock .wd-kanaly:has(> .ui-pierscien) { grid-template-columns: minmax(0, 1fr); } } /* Prosty ekran telefonu, pozostale aplikacje sa w Wiecej. */ #mm-dock .dk-dzis-orion { text-align: center; padding: 16px 0; } #mm-dock .dk-dzis-kula { display: block; margin: 0 auto; padding: 16px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } #mm-dock .dk-dzis-kula .dk-kula { display: block; width: 144px; height: 144px; } #mm-dock .dk-dzis-kula:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } #mm-dock .dk-dzis-podsumowanie { margin: 12px 0 0; color: var(--ink); line-height: 1.5; } #mm-dock .dk-dzis-liczby { display: grid; gap: 8px; } #mm-dock .dk-dzis-liczby article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; } #mm-dock .dk-dzis-liczby b { text-align: right; } #mm-dock .dk-dzis-liczby small { grid-column: 1 / -1; color: var(--muted); } #mm-dock .dk-dzis-liczby small, #mm-dock .dk-dzis-sprawy li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mm-dock .dk-dzis-sprawy ul { padding: 0; list-style: none; } #mm-dock .dk-dzis-sprawy li { padding: 10px 0; border-bottom: 1px solid var(--line); } /* Spokojny stan huba w naglowku portalu i okna, tylko za MM_UI_NOWE. */ #mm-dock .ui-hub { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 11px; font-weight: 400; white-space: nowrap; } #mm-dock .ui-hub-kropka { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%; } #mm-dock .dk-dzwonek:has(> .ui-hub) { display: flex; align-items: center; gap: 8px; } @media (prefers-reduced-motion: reduce) { #mm-dock .ui-hub-kropka { animation: none; } } #mm-dock .dk-pasek:has(> .ui-hub) { grid-template-columns: 80px minmax(0,1fr) auto auto; } @media (max-width: 900px) { #mm-dock .dk-pasek:has(> .ui-hub) { grid-template-columns: 80px minmax(0,1fr) auto; } #mm-dock .dk-pasek > .ui-hub { grid-column: 2; grid-row: 2; justify-self: center; margin-bottom: 6px; } } /* Kolejka ze stanami: elementy powstaja tylko przy MM_UI_NOWE === true. */ #mm-dock .ui-zadanie-meta { flex: 1 1 100%; min-width: 0; display: grid; gap: 6px; } #mm-dock .ui-zadanie-stan-czas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #mm-dock .ui-zadanie-stan { display: inline-block; max-width: 100%; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--muted); background: var(--bg); } #mm-dock .ui-zadanie-stan[data-stan="po_terminie"] { color: var(--red); } #mm-dock .ui-zadanie-stan[data-stan="dzis"], #mm-dock .ui-zadanie-stan[data-stan="czeka"] { color: var(--orange); } #mm-dock .ui-zadanie-stan[data-stan="w_toku"] { color: var(--green); } #mm-dock .ui-zadanie-stan-czas time { color: var(--muted); font-size: 12px; } #mm-dock .ui-zadanie-kontekst { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; } @media (prefers-reduced-motion: reduce) { #mm-dock .ui-zadanie-stan { animation: none; transition: none; } } #mm-dock .pamiec-przewijanie { display:flex; align-items:center; gap:6px; min-width:0; } #mm-dock .pamiec-menu { display:none; } #mm-dock .pamiec-menu > summary { display:none; } #mm-dock .pamiec-meta { display:flex; flex-wrap:wrap; gap:4px 12px; color:var(--muted); font-size:12px; } #mm-dock .pamiec-rola { --rodzaj:var(--mm-tlo-c29aeb); } #mm-dock .pamiec-preferencja { --rodzaj:var(--mm-tlo-e0ae66); } #mm-dock .pamiec-temat { --rodzaj:var(--mm-tlo-6fbdba); } #mm-dock .pamiec-decyzja { --rodzaj:var(--mm-tlo-e68b9a); } #mm-dock .pamiec-kropka, #mm-dock .pamiec-rodzaj::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--rodzaj); flex:none; } #mm-dock .pamiec-rodzaj::before { margin-right:6px; } #mm-dock .pamiec-notatka { box-sizing:border-box; width:100%; max-width:76ch; margin:16px auto; padding:0 12px 32px; overflow-wrap:anywhere; } #mm-dock .pamiec-notatka .pamiec-tytul { font-size:24px; line-height:1.3; margin:20px 0 12px; font-weight:600; } #mm-dock .pamiec-notatka .pamiec-karta { background:none; border:0; box-shadow:none; padding:0; margin:0 0 28px; } #mm-dock .pamiec-notatka .pamiec-tresc { max-width:68ch; font-size:17px; line-height:1.6; margin:24px 0 18px; } #mm-dock .pamiec-akcje, #mm-dock .pamiec-powroty { display:flex; flex-wrap:wrap; gap:6px; } #mm-dock .pamiec-akcje .btn, #mm-dock .pamiec-powroty .btn { font-size:12px; padding:5px 9px; } #mm-dock .pamiec-strzalka::before { content:'←'; margin-right:6px; } #mm-dock .pamiec-notatka h4 { font-size:12px; font-weight:500; color:var(--muted); margin:20px 0 6px; } #mm-dock .pamiec-powiazanie { display:flex; align-items:center; gap:10px; width:100%; border:0; border-radius:8px; padding:10px; text-align:left; font:inherit; color:var(--ink); background:transparent; cursor:pointer; } #mm-dock .pamiec-powiazanie > span:nth-child(2) { flex:1; min-width:0; } #mm-dock .pamiec-powiazanie small { flex:none; font-size:11px; background:var(--bg); color:var(--muted); padding:2px 6px; border:1px solid var(--line2); border-radius:10px; } #mm-dock .pamiec-powiazanie:hover, #mm-dock .pamiec-powiazanie:focus-visible { background:var(--line2); } #mm-dock .pamiec-kontener:not([hidden]), #mm-dock .pamiec-notatka { animation:pamiec-wejscie 150ms ease-out; } @keyframes pamiec-wejscie { from { opacity:0; } to { opacity:1; } } @media (prefers-reduced-motion:reduce) { #mm-dock .pamiec-kontener, #mm-dock .pamiec-notatka { animation:none; } } @media (max-width:760px) { #mm-dock .pamiec-ekran, #mm-dock .pamiec-plotno { position:relative; } #mm-dock .pamiec-narzedzia { flex-direction:column; align-items:stretch; gap:6px; } #mm-dock .pamiec-narzedzia input { flex:none; width:100%; box-sizing:border-box; } #mm-dock .pamiec-przewijanie { overflow-x:auto; flex-wrap:nowrap; margin-right:42px; } #mm-dock .pamiec-filtry { flex:none; } #mm-dock .pamiec-przewijanie .btn { height:36px; min-width:36px; padding:0 9px; flex:none; font-size:12px; } #mm-dock .pamiec-etykieta-centruj { display:none; } #mm-dock .pamiec-menu { display:block; position:absolute; top:54px; right:0; z-index:2; } #mm-dock .pamiec-menu > summary { display:grid; place-items:center; width:36px; height:36px; cursor:pointer; border:1px solid var(--line2); border-radius:8px; background:var(--bg); list-style:none; } #mm-dock .pamiec-menu > summary::-webkit-details-marker { display:none; } #mm-dock .pamiec-menu:not([open]) + .pamiec-informacje { display:none; } #mm-dock .pamiec-menu[open] + .pamiec-informacje { position:absolute; z-index:3; right:0; top:94px; width:260px; padding:14px; background:var(--bg); border:1px solid var(--line2); border-radius:10px; box-shadow:0 8px 24px var(--mm-cien-0003); } #mm-dock .pamiec-warstwy { min-height:65vh; } #mm-dock .pamiec-podglad { display:none; } } #mm-dock .ui-etap-ikona { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--mm-ramka-777181); } #mm-dock .ui-gotowy .ui-etap-ikona { color: var(--mm-tekst-9ce4bd); border-color: var(--mm-ramka-9ce4bd); } #mm-dock .ui-biezacy .ui-etap-ikona { border-color: var(--mm-ramka-ffcd80); } #mm-dock .ui-wynik-szczegoly .wd-podsumowanie { margin-top: 16px; } /* Katalog i redakcja wiedzy: klasy wf- powstaja tylko przy MM_UI_NOWE === true. */ #mm-dock .wf-katalog { position: relative; isolation: isolate; min-height: 100%; padding: 8px 4px 32px; color: var(--mm-tekst-f0f2fa); } #mm-dock .wf-katalog button { color: inherit; font: inherit; cursor: pointer; } #mm-dock .wf-katalog button:disabled { opacity: .5; cursor: default; } #mm-dock .wf-katalog :focus-visible { outline: 2px solid var(--mm-ramka-c4b5fd); outline-offset: 3px; } #mm-dock .wf-katalog h3 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-tekst-aeb6c9); margin: 8px 0 14px; } #mm-dock .wf-naglowek { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 28px 28px 30px; margin-bottom: 20px; border-radius: 28px; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, var(--mm-tlo-rgba-167-139-250-38), transparent 55%), radial-gradient(90% 120% at 100% 100%, var(--mm-tlo-rgba-56-189-248-22), transparent 60%), linear-gradient(135deg, var(--mm-tlo-1b1735), var(--mm-tlo-0f1424)); border: 1px solid var(--mm-ramka-rgba-255-255-255-12); box-shadow: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-16), 0 24px 60px var(--mm-cien-rgba-8-6-20-45); } #mm-dock .wf-naglowek::after { content: ""; position: absolute; z-index: -1; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, var(--mm-tlo-rgba-196-181-253-35), transparent 70%); animation: wf-poswiata 9s ease-in-out infinite alternate; } #mm-dock .wf-naglowek h2 { font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: -.045em; margin: 10px 0 12px; background: linear-gradient(100deg, var(--mm-tlo-ffffff) 10%, var(--mm-tlo-d8ccff) 45%, var(--mm-tlo-93c5fd) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } #mm-dock .wf-podtytul { color: var(--mm-tekst-c1c9db); margin: 0; max-width: 520px; } #mm-dock .wf-statystyki { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; } #mm-dock .wf-statystyki span { padding: 6px 12px; border-radius: 999px; font-size: 12px; background: var(--mm-tlo-rgba-255-255-255-08); border: 1px solid var(--mm-ramka-rgba-255-255-255-12); color: var(--mm-tekst-e4e8f4); } #mm-dock .wf-etykieta { display: block; color: var(--wf-akcent, var(--mm-tekst-c4b5fd)); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } #mm-dock .wf-dodaj, #mm-dock .wf-glowny { flex: none; padding: 13px 22px; border: 0; border-radius: 999px; font-weight: 600; color: var(--mm-tekst-160f2e); background: linear-gradient(135deg, var(--mm-tlo-e9e3ff), var(--mm-tlo-b8a4ff) 55%, var(--mm-tlo-93c5fd)); box-shadow: 0 10px 30px var(--mm-cien-rgba-167-139-250-35); transition: transform .16s; } #mm-dock .wf-katalog .wf-dodaj, #mm-dock .wf-katalog .wf-glowny, #mm-dock .wf-edytor button.wf-glowny { color: var(--mm-tekst-160f2e); border: 0; background: linear-gradient(135deg, var(--mm-tlo-e9e3ff), var(--mm-tlo-b8a4ff) 55%, var(--mm-tlo-93c5fd)); } #mm-dock .wf-dodaj:hover, #mm-dock .wf-glowny:hover { transform: translateY(-2px); } #mm-dock .wf-szukaj { position: relative; display: block; margin-bottom: 22px; } #mm-dock .wf-lupa { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--mm-tekst-aeb6c9); pointer-events: none; } #mm-dock .wf-katalog input:not([type="file"]), #mm-dock .wf-katalog textarea { width: 100%; box-sizing: border-box; background: var(--mm-tlo-rgba-9-12-24-72); color: var(--mm-tekst-f0f2fa); border: 1px solid var(--mm-ramka-rgba-255-255-255-14); border-radius: 14px; padding: 12px 16px; font: inherit; } #mm-dock .wf-katalog input:not([type="file"]):focus, #mm-dock .wf-katalog textarea:focus { border-color: var(--mm-ramka-a78bfa); outline: none; box-shadow: 0 0 0 4px var(--mm-cien-rgba-167-139-250-18); } #mm-dock .wf-katalog .wf-szukaj input { font-size: 18px; padding: 20px 24px 20px 58px; border-radius: 22px; box-shadow: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-12), 0 14px 40px var(--mm-cien-rgba-8-6-20-35); } #mm-dock .wf-katalog input::placeholder, #mm-dock .wf-katalog textarea::placeholder { color: var(--mm-tekst-8f98ad); } #mm-dock .wf-kategorie { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 18px 0 30px; } #mm-dock .wf-kategoria, #mm-dock .wf-karta { background: linear-gradient(160deg, var(--mm-tlo-rgba-255-255-255-09), var(--mm-tlo-rgba-255-255-255-025)); border: 1px solid var(--mm-ramka-rgba-255-255-255-12); box-shadow: inset 0 1px 0 var(--mm-cien-rgba-255-255-255-14); border-radius: 20px; overflow-wrap: anywhere; min-width: 0; animation: wf-wejscie .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--wf-i, 0) * 35ms); } #mm-dock .wf-kategoria { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 16px; text-align: left; transition: transform .18s; } #mm-dock .wf-kategoria::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 0%, var(--wf-akcent), transparent 60%); opacity: .14; transition: opacity .18s; pointer-events: none; } #mm-dock .wf-kategoria:hover, #mm-dock .wf-karta:hover { transform: translateY(-3px); } #mm-dock .wf-kategoria:hover::before, #mm-dock .wf-kategoria[aria-pressed="true"]::before { opacity: .32; } #mm-dock .wf-monogram { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-weight: 700; font-size: 18px; color: var(--mm-tekst-0b0a12-f7a0); background: var(--wf-akcent); box-shadow: 0 0 24px color-mix(in srgb, var(--wf-akcent) 45%, transparent); } #mm-dock .wf-kategoria strong { font-size: 14px; line-height: 1.3; } #mm-dock .wf-kategoria strong + span { color: var(--mm-tekst-aeb6c9); font-size: 12px; margin-top: 4px; } #mm-dock .wf-akcent-1 { --wf-akcent: var(--mm-tlo-c4b5fd); } #mm-dock .wf-akcent-2 { --wf-akcent: var(--mm-tlo-93c5fd); } #mm-dock .wf-akcent-3 { --wf-akcent: var(--mm-tlo-6ee7b7); } #mm-dock .wf-akcent-4 { --wf-akcent: var(--mm-tlo-fcd34d); } #mm-dock .wf-akcent-5 { --wf-akcent: var(--mm-tlo-f9a8d4); } #mm-dock .wf-akcent-6 { --wf-akcent: var(--mm-tlo-67e8f9); } #mm-dock .wf-wszystkie { grid-column: 1 / -1; justify-self: start; } #mm-dock .wf-pigulki, #mm-dock .wf-akcje, #mm-dock .wf-podpowiedzi { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } #mm-dock .wf-podpowiedzi { margin: 8px 0 0; } #mm-dock .wf-pigulki button, #mm-dock .wf-wszystkie, #mm-dock .wf-akcje button, #mm-dock .wf-edytuj, #mm-dock .wf-zamknij, #mm-dock .wf-edytor button { background: var(--mm-tlo-rgba-255-255-255-07); border: 1px solid var(--mm-ramka-rgba-255-255-255-14); border-radius: 999px; padding: 9px 16px; } #mm-dock .wf-podpowiedzi button { padding: 5px 11px; font-size: 12px; } #mm-dock .wf-katalog [aria-pressed="true"] { background: var(--mm-tlo-rgba-167-139-250-2); border-color: var(--wf-akcent, var(--mm-ramka-c4b5fd)); box-shadow: inset 0 0 0 1px var(--wf-akcent, var(--mm-cien-c4b5fd)); } #mm-dock .wf-karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-bottom: 30px; } #mm-dock .wf-karta { position: relative; display: flex; flex-direction: column; overflow: hidden; transition: transform .18s; } #mm-dock .wf-karta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--wf-akcent), transparent); } #mm-dock .wf-otworz { flex: 1; text-align: left; width: 100%; border: 0; background: transparent; padding: 22px 22px 18px; } #mm-dock .wf-otworz h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--mm-tekst-f6f7fb); margin: 10px 0 8px; line-height: 1.3; } #mm-dock .wf-otworz p { color: var(--mm-tekst-c1c9db); margin: 0 0 6px; font-size: 13px; } #mm-dock .wf-fragment { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #mm-dock .wf-meta { display: inline-block; font-size: 12px; color: var(--mm-tekst-8f98ad); margin: 12px 10px 0 0; } #mm-dock .wf-dostep { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--mm-tlo-rgba-255-255-255-08); border: 1px solid var(--mm-ramka-rgba-255-255-255-12); color: var(--mm-tekst-dfe6f5); } #mm-dock .wf-edytuj { align-self: flex-start; margin: 0 22px 18px; font-size: 13px; } #mm-dock .wf-nakladka { position: relative; z-index: 5; min-height: 70vh; padding: 20px 28px 40px; border-radius: 24px; color: var(--mm-tekst-f0f2fa); background: radial-gradient(80% 50% at 50% 0%, var(--mm-tlo-rgba-167-139-250-16), transparent 70%), var(--mm-tlo-0e1220); border: 1px solid var(--mm-ramka-rgba-255-255-255-1); animation: wf-wejscie .35s cubic-bezier(.2,.8,.2,1) both; } #mm-dock .wf-pasek { position: sticky; top: -20px; z-index: 2; display: flex; justify-content: flex-end; margin: -20px -28px 0; padding: 14px 20px 10px; background: linear-gradient(var(--mm-tlo-0e1220) 70%, transparent); } #mm-dock .wf-czytnik { max-width: 760px; margin: 0 auto; padding-bottom: 40px; } #mm-dock .wf-czytnik > header { padding: 12px 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--mm-ramka-rgba-255-255-255-1); } #mm-dock .wf-czytnik > header h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.03em; line-height: 1.1; margin: 10px 0 14px; overflow-wrap: anywhere; } #mm-dock .wf-czytnik > header p { color: var(--mm-tekst-aeb6c9); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } #mm-dock .wf-markdown { font-size: 16px; line-height: 1.75; color: var(--mm-tekst-e4e8f4); overflow-wrap: anywhere; } #mm-dock .wf-markdown h1, #mm-dock .wf-markdown h2, #mm-dock .wf-markdown h3, #mm-dock .wf-markdown h4 { color: var(--mm-tekst-fff); letter-spacing: -.02em; line-height: 1.25; margin: 1.6em 0 .5em; text-transform: none; } #mm-dock .wf-markdown h1 { font-size: 28px; } #mm-dock .wf-markdown h2 { font-size: 23px; } #mm-dock .wf-markdown h3 { font-size: 19px; color: var(--mm-tekst-fff); } #mm-dock .wf-markdown h4 { font-size: 16px; } #mm-dock .wf-markdown ul, #mm-dock .wf-markdown ol { padding-left: 1.5em; } #mm-dock .wf-markdown li { margin: .25em 0; } #mm-dock .wf-markdown p, #mm-dock .wf-markdown blockquote { white-space: pre-wrap; } #mm-dock .wf-markdown a { color: var(--mm-tekst-93c5fd); text-decoration: underline; text-underline-offset: 3px; } #mm-dock .wf-markdown pre { overflow: auto; padding: 16px 18px; background: var(--mm-tlo-070a14); border: 1px solid var(--mm-ramka-rgba-255-255-255-08); border-radius: 14px; } #mm-dock .wf-markdown code { color: var(--mm-tekst-d8ccff); font-size: .9em; } #mm-dock .wf-markdown blockquote { border-left: 3px solid var(--mm-ramka-a78bfa); padding: 4px 0 4px 16px; margin-left: 0; color: var(--mm-tekst-c1c9db); background: linear-gradient(90deg, var(--mm-tlo-rgba-167-139-250-1), transparent); } #mm-dock .wf-markdown hr { border: 0; height: 1px; background: var(--mm-tlo-rgba-255-255-255-12); margin: 28px 0; } #mm-dock .wf-tabela { overflow-x: auto; margin: 16px 0; } #mm-dock .wf-markdown table { border-collapse: collapse; width: 100%; font-size: 14px; } #mm-dock .wf-markdown td, #mm-dock .wf-markdown th { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--mm-ramka-rgba-255-255-255-1); } #mm-dock .wf-markdown th { color: var(--mm-tekst-aeb6c9); font-weight: 600; } #mm-dock .wf-edytor { max-width: 1100px; margin: 0 auto; } #mm-dock .wf-edytor-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; } #mm-dock .wf-edytor-naglowek .wf-etykieta { flex-basis: 100%; } #mm-dock .wf-edytor-naglowek h2 { font-size: 30px; letter-spacing: -.03em; margin: 4px 0; } #mm-dock .wf-stan { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--mm-ramka-rgba-255-255-255-14); background: var(--mm-tlo-rgba-255-255-255-07); } #mm-dock .wf-stan-opublikowana { color: var(--mm-tekst-6ee7b7); border-color: var(--mm-ramka-rgba-110-231-183-4); } #mm-dock .wf-stan-szkic { color: var(--mm-tekst-fcd34d); border-color: var(--mm-ramka-rgba-252-211-77-4); } #mm-dock .wf-pola { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } #mm-dock .wf-podglad { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } #mm-dock .wf-edytor label { display: block; min-width: 0; font-size: 13px; color: var(--mm-tekst-aeb6c9); } #mm-dock .wf-edytor label > input, #mm-dock .wf-edytor label > textarea { margin-top: 6px; font-size: 15px; } #mm-dock .wf-edytor textarea { min-height: 420px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; line-height: 1.6; } #mm-dock .wf-edytor fieldset { border: 0; min-width: 0; margin: 0; padding: 0; } #mm-dock .wf-edytor fieldset fieldset { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--mm-ramka-rgba-255-255-255-1); border-radius: 18px; background: var(--mm-tlo-rgba-255-255-255-03); } #mm-dock .wf-edytor legend { padding: 0 6px; font-size: 13px; color: var(--mm-tekst-aeb6c9); } #mm-dock .wf-podglad > section { min-width: 0; max-height: 640px; overflow: auto; margin-top: 22px; padding: 6px 20px; background: var(--mm-tlo-rgba-255-255-255-04); border: 1px solid var(--mm-ramka-rgba-255-255-255-1); border-radius: 14px; } #mm-dock .wf-katalog [aria-invalid="true"] { border-color: var(--mm-ramka-fda4af); } #mm-dock .wf-blad { display: block; color: var(--mm-tekst-fda4af); white-space: pre-wrap; } #mm-dock .wf-uwaga { margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 13px; color: var(--mm-tekst-fde68a); background: var(--mm-tlo-rgba-252-211-77-08); border: 1px solid var(--mm-ramka-rgba-252-211-77-25); } #mm-dock .wf-import { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 18px 0; padding: 20px 22px; border: 2px dashed var(--mm-ramka-rgba-196-181-253-35); border-radius: 18px; background: var(--mm-tlo-rgba-167-139-250-05); } #mm-dock .wf-import > span:nth-child(2) { flex: 1; min-width: 180px; display: grid; gap: 2px; } #mm-dock .wf-import small { color: var(--mm-tekst-aeb6c9); } #mm-dock .wf-import-ikona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 22px; background: var(--mm-tlo-rgba-167-139-250-18); color: var(--mm-tekst-d8ccff); } #mm-dock .wf-przeciaga { border-color: var(--mm-ramka-c4b5fd); background: var(--mm-tlo-rgba-167-139-250-16); } #mm-dock .wf-akcje { position: sticky; bottom: -40px; padding: 14px 0; background: linear-gradient(transparent, var(--mm-tlo-0e1220) 35%); } #mm-dock .wf-historia ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } #mm-dock .wf-historia li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; border-radius: 14px; background: var(--mm-tlo-rgba-255-255-255-04); border: 1px solid var(--mm-ramka-rgba-255-255-255-08); } #mm-dock .wf-historia li span { flex: 1; color: var(--mm-tekst-aeb6c9); font-size: 13px; } @keyframes wf-wejscie { from { opacity: 0; transform: translateY(10px) scale(.985); } } @keyframes wf-poswiata { from { transform: translate(0, 0) scale(1); opacity: .7; } to { transform: translate(-40px, 30px) scale(1.15); opacity: 1; } } @media (max-width: 640px) { #mm-dock .wf-katalog { padding: 0 0 24px; } #mm-dock .wf-naglowek { align-items: flex-start; flex-direction: column; padding: 22px 18px; border-radius: 22px; } #mm-dock .wf-kategorie { grid-template-columns: repeat(2, minmax(0, 1fr)); } #mm-dock .wf-kategoria { grid-template-columns: 1fr; row-gap: 8px; } #mm-dock .wf-monogram { grid-row: auto; width: 34px; height: 34px; font-size: 15px; } #mm-dock .wf-karty, #mm-dock .wf-pola, #mm-dock .wf-podglad { grid-template-columns: 1fr; } #mm-dock .wf-nakladka { padding: 12px 14px 32px; border-radius: 0; } #mm-dock .wf-pasek { top: -12px; margin: -12px -14px 0; padding: 10px 12px 8px; } #mm-dock .wf-edytor textarea { min-height: 260px; } #mm-dock .wf-akcje { position: static; background: none; } } @media (prefers-reduced-motion: reduce) { #mm-dock .wf-katalog, #mm-dock .wf-katalog *, #mm-dock .wf-katalog *::before, #mm-dock .wf-katalog *::after { animation: none; transition: none; } } #mm-dock:where(.mm-ui-nowe *) .wf-katalog:has(.wf-graf) .wf-naglowek { padding: 14px 20px; margin-bottom: 12px; } #mm-dock:where(.mm-ui-nowe *) .wf-katalog:has(.wf-graf) .wf-podtytul { display: none; } #mm-dock:where(.mm-ui-nowe *) .wf-katalog:has(.wf-graf) .wf-naglowek h2 { font-size: clamp(26px, 3vw, 36px); } /* Graf wiedzy: klasy wf-graf powstaja tylko przy MM_UI_NOWE === true. */ #mm-dock:where(.mm-ui-nowe *) .wf-wiki { display: inline; border: 0; padding: 0 3px; background: var(--mm-tlo-c4b5fd18); color: var(--mm-tekst-d8ccff); text-decoration: underline; font: inherit; cursor: pointer; } #mm-dock:where(.mm-ui-nowe *) .wf-graf { position: relative; color: var(--mm-tekst-faf7ff); } #mm-dock:where(.mm-ui-nowe *) .wf-graf-narzedzia, #mm-dock:where(.mm-ui-nowe *) .wf-graf-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 0; } #mm-dock:where(.mm-ui-nowe *) .wf-graf button { border: 1px solid var(--mm-ramka-c4b5fd40); border-radius: 10px; background: var(--mm-tlo-262039); color: var(--mm-tekst-faf7ff); padding: 8px 12px; cursor: pointer; } #mm-dock:where(.mm-ui-nowe *) .wf-graf button:focus-visible, #mm-dock:where(.mm-ui-nowe *) .wf-wiki:focus-visible { outline: 2px solid var(--mm-ramka-c4b5fd); outline-offset: 3px; } #mm-dock:where(.mm-ui-nowe *) .wf-graf button[aria-pressed="true"] { background: var(--mm-tlo-51426e); } #mm-dock:where(.mm-ui-nowe *) .wf-graf-warstwy { position: relative; height: clamp(420px, calc(100vh - 260px), 900px); overflow: hidden; border-radius: 18px; background: radial-gradient(ellipse at 30% 35%, var(--mm-tlo-c4b5fd20), transparent 60%), radial-gradient(ellipse at 75% 65%, var(--mm-tlo-93c5fd18), transparent 60%), var(--mm-tlo-10101a); } #mm-dock:where(.mm-ui-nowe *) .wf-graf-plotno, #mm-dock:where(.mm-ui-nowe *) .wf-gpu { position: absolute; inset: 0; width: 100%; height: 100%; } #mm-dock:where(.mm-ui-nowe *) .wf-graf-plotno { touch-action: none; cursor: grab; } #mm-dock:where(.mm-ui-nowe *) .wf-gpu { pointer-events: none; } #mm-dock:where(.mm-ui-nowe *) .wf-legenda-szkic { color: var(--mm-tekst-fbbf24); } #mm-dock:where(.mm-ui-nowe *) .wf-graf-menu { border: 1px solid var(--mm-ramka-c4b5fd66); border-radius: 12px; padding: 12px; background: var(--mm-tlo-191524); } #mm-dock:where(.mm-ui-nowe *) .wf-graf-lista { display: flex; flex-direction: column; align-items: stretch; gap: 6px; max-height: 280px; overflow: auto; padding: 8px 0; } #mm-dock:where(.mm-ui-nowe *) .wf-graf-lista button { text-align: left; } #mm-dock:where(.mm-ui-nowe *) .wf-graf-mobil-lista { display: none; } @media (max-width: 640px) { #mm-dock:where(.mm-ui-nowe *) .wf-graf-mobil-lista { display: block; width: 100%; margin-top: 12px; } } /* Krok 3: szklane paski, kulka telefonu i skroty okna. */ #mm-dock .ui-kapsula { position: relative; isolation: isolate; margin: 10px 10px calc(10px + env(safe-area-inset-bottom)); border: 1px solid var(--line2); border-radius: 999px; padding: 0; min-height: 60px; background: linear-gradient(160deg, var(--mm-tlo-rgba-255-255-255-10), var(--mm-tlo-rgba-255-255-255-03)), var(--mm-tlo-171425); box-shadow: var(--shadow-lg); } #mm-dock .ui-tor { position: absolute; left: 0; top: 0; height: 100%; width: calc(100% / var(--ui-n)); transform: translateX(calc(var(--ui-i) * 100%)); transition: transform .45s cubic-bezier(.34,1.4,.64,1), opacity .2s; pointer-events: none; z-index: 1; } #mm-dock .ui-tor::after { content: ''; position: absolute; inset: 0 0 -12px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--ui-akcent) 35%, transparent), transparent 65%); filter: blur(16px); } #mm-dock .ui-kulka { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; left: 50%; top: 0; transform: translate(-50%, -45%); border-radius: 50%; background: var(--ui-akcent); color: var(--mm-tekst-0b0a12); font-size: 24px; box-shadow: 0 0 0 6px var(--mm-cien-0b0a12-6290), 0 0 24px color-mix(in srgb, var(--ui-akcent) 55%, transparent); pointer-events: none; } #mm-dock .ui-kapsula button.ui-wybrana { background: transparent; color: var(--ui-akcent); } #mm-dock .ui-kapsula button.ui-wybrana > span:first-child { opacity: 0; } #mm-dock .ui-kapsula button:not(.ui-wybrana) .ui-podpis, #mm-dock nav.ui-akcje .ui-akcje-etykieta { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Kulka wystaje nad pasek, wiec koniec przewijanej tresci nie moze pod nia zniknac. */ #mm-dock .dk-mobil:has(> .ui-kapsula) .dk-mobil-tresc { padding-bottom: 40px; } #mm-dock .ui-kapsula-dock { border-radius: 26px; background: linear-gradient(160deg, var(--mm-tlo-rgba-255-255-255-10), var(--mm-tlo-rgba-255-255-255-03)), var(--mm-tlo-rgba-22-20-37-62); } #mm-dock .dk-ik.ui-aktywna { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-akcent) 60%, transparent), 0 8px 22px -6px color-mix(in srgb, var(--ui-akcent) 70%, transparent); } #mm-dock .dk-ik.ui-aktywna::after { background: var(--ui-akcent); } /* Podpis aktywnej aplikacji to ta sama plywajaca etykieta co przy najechaniu: stoi nad ikona (absolutnie, bez wplywu na wysokosc paska) i pokazuje sie przy fokusie oraz chwile po otwarciu. */ #mm-dock .ui-kapsula-dock .dk-ik:focus-visible em { opacity: 1; } #mm-dock .ui-kapsula-dock .dk-ik.ui-aktywna em { color: var(--ui-akcent); animation: dk-podpis-chwila 2.4s cubic-bezier(1, 0, 1, 0); } /* Krzywa trzyma podpis widoczny prawie do konca i chowa go dopiero w ostatniej chwili. */ @keyframes dk-podpis-chwila { from { opacity: 1; } to { opacity: 0; } } #mm-dock nav.ui-akcje { width: 50px; box-sizing: border-box; border-radius: 18px; background: linear-gradient(160deg, var(--mm-tlo-rgba-255-255-255-08), var(--mm-tlo-rgba-255-255-255-02)), var(--mm-tlo-171425); } #mm-dock nav.ui-akcje > div { display: flex; flex-direction: column; gap: 8px; } #mm-dock nav.ui-akcje button { position: relative; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #mm-dock nav.ui-akcje .ui-akcje-ik { flex: none; width: 34px; text-align: center; } #mm-dock nav.ui-akcje .ui-akcje-etykieta { opacity: 0; transition: opacity .2s; } #mm-dock nav.ui-akcje.rozwiniety, #mm-dock nav.ui-akcje:not(.ui-po-escape):focus-within { width: 168px; } #mm-dock nav.ui-akcje.rozwiniety > div > button, #mm-dock nav.ui-akcje:not(.ui-po-escape):focus-within > div > button { width: 100%; min-height: 36px; height: auto; justify-content: flex-start; gap: 8px; } #mm-dock nav.ui-akcje.rozwiniety .ui-akcje-etykieta, #mm-dock nav.ui-akcje:not(.ui-po-escape):focus-within .ui-akcje-etykieta { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; font-size: 12px; text-align: left; opacity: 1; } #mm-dock nav.ui-akcje .ui-wcisniety::before { content: ''; position: absolute; left: -5px; top: 5px; bottom: 5px; width: 3px; border-radius: 3px; background: var(--purple); box-shadow: 0 0 10px var(--purple); } #mm-dock nav.ui-akcje .ui-akcje-licznik { font-size: 11px; color: var(--purple); } #mm-dock nav.ui-akcje button:focus-visible { outline: 2px solid var(--mm-ramka-d7c5ff); outline-offset: 2px; } @media (hover: hover) { #mm-dock nav.ui-akcje:not(.ui-po-escape):hover { width: 168px; } #mm-dock nav.ui-akcje:not(.ui-po-escape):hover > div > button { width: 100%; min-height: 36px; height: auto; justify-content: flex-start; gap: 8px; } #mm-dock nav.ui-akcje:not(.ui-po-escape):hover .ui-akcje-etykieta { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; font-size: 12px; text-align: left; opacity: 1; } } @media (prefers-reduced-motion: reduce) { #mm-dock .ui-tor, #mm-dock nav.ui-akcje .ui-akcje-etykieta, #mm-dock .dk-ik.ui-aktywna { transition: none; animation: none; } #mm-dock .ui-kapsula-dock .dk-ik.ui-aktywna em { animation: none; } } #mm-dock .dk-kula-czastki { display: block; margin: 0 auto; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 70%); mask-image: radial-gradient(circle, #000 52%, transparent 70%); } #mm-dock .dk-orion-dol .dk-kula-stan { margin: 0 0 4px; } #mm-dock .dk-orion-powitanie .dk-kula-czastki { margin: 0 auto 8px; } #mm-dock .dk-tresc:has(.dk-orbita) { padding-bottom: 0; } /* Przy kuli liczy sie kazdy piksel nad nia: przy oknie 600 px kafle wypychaja pasek na dol i kula ma tylko to, co zostaje nad nim. */ #mm-dock .dk-mobil-orion:has(.dk-orbita) { gap: 8px; } #mm-dock .dk-mobil-orion:has(.dk-orbita) .dk-rozmowy-akcje { margin-bottom: 0; } #mm-dock .dk-mobil-orion:has(.dk-orbita) .dk-rozmowa { padding-top: 0; } #mm-dock .dk-orion-powitanie:has(> .dk-orbita) { padding: 4px 12px; } #mm-dock .dk-orion-powitanie:has(> .dk-orbita) h3 { margin-top: 0; } #mm-dock .dk-orbita { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; width: 100%; margin: 0 auto 8px; flex-shrink: 0; } #mm-dock .dk-orbita-kula { position: relative; width: var(--rozmiar); height: var(--rozmiar); } #mm-dock .dk-orbita-kula > .dk-kula-czastki, #mm-dock .dk-orion-powitanie .dk-orbita-kula > .dk-kula-czastki, #mm-dock .dk-orbita-kula > .dk-kula { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; } #mm-dock .dk-orbita-srodek { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 150px; padding: 12px 4px; border: 0; background: transparent; color: var(--mm-tekst-f5f3ff); cursor: pointer; text-shadow: 0 1px 8px var(--mm-cien-0b0a12), 0 0 2px var(--mm-cien-0b0a12); } #mm-dock .dk-orbita-srodek b { font-size: 34px; font-weight: 700; line-height: 1.1; } #mm-dock .dk-orbita-srodek span { font-size: 12px; } #mm-dock .dk-orbita-satelity { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0; align-items: flex-start; } #mm-dock .dk-orbita-lewa { align-items: flex-end; } #mm-dock .dk-orbita-ciasna .dk-orbita-satelity { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px; justify-content: start; } #mm-dock .dk-orbita-ciasna .dk-orbita-lewa { justify-content: end; } #mm-dock .dk-orion-powitanie .dk-orbita { margin: 0 auto 8px; } #mm-dock .dk-satelita { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; min-height: 34px; padding: 6px 10px; border: 1px solid var(--green); border-radius: 999px; background: var(--mm-tlo-171425); color: var(--mm-tekst-f5f3ff); cursor: pointer; } #mm-dock .dk-satelita b { color: var(--green); font-size: 16px; } #mm-dock .dk-satelita span { font-size: 12px; } #mm-dock .dk-satelita[data-uwaga="true"] { border-color: var(--orange); } #mm-dock .dk-satelita[data-uwaga="true"] b { color: var(--orange); } #mm-dock .dk-orbita button:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; } @media (max-width: 760px) { #mm-dock .dk-orbita { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } #mm-dock .dk-orbita-kula { order: -1; flex-basis: 100%; } #mm-dock .dk-orbita-satelity { display: contents; } #mm-dock .dk-satelita { min-height: 44px; } } #mm-dock .wizualnie-ukryte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } #mm-dock .dk-szkielet { padding: 16px 0; } #mm-dock .dk-szkielet-blok { display: grid; gap: 14px; } #mm-dock .dk-szkielet-czesc { background: var(--mm-tlo-rgba-160-160-180-18); border-radius: 10px; height: 20px; animation: dk-szkielet-puls 1.4s ease-in-out infinite alternate; } #mm-dock .dk-szkielet-kafle .dk-szkielet-czesc { height: 100px; } #mm-dock .dk-szkielet-wiersze .dk-szkielet-czesc { height: 42px; } #mm-dock .dk-szkielet-karta .dk-szkielet-czesc:first-child { width: 40%; height: 28px; } #mm-dock .dk-szkielet-karta .dk-szkielet-czesc:last-child { width: 70%; } @keyframes dk-szkielet-puls { from { opacity: .45; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #mm-dock .dk-szkielet-czesc { animation: none; } } /* Kafle modulow pod Orionem. */ #mm-dock .dk-kafle-modulow { width: 100%; min-width: 0; margin: 8px 0 0; text-align: left; } #mm-dock .dk-kafle-modulow > ul { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0; } #mm-dock .dk-kafle-modulow > ul > li { flex: 1 0 180px; scroll-snap-align: start; min-width: 0; animation: dk-kafel-wejscie .45s ease-out both; animation-delay: calc(var(--i) * 70ms); } #mm-dock .dk-kafel-modulu { display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; height: 100%; min-height: 44px; box-sizing: border-box; padding: 8px 12px; white-space: normal; background: var(--mm-tlo-171425); border: 1px solid var(--line2); border-radius: 12px; color: var(--ink); text-align: left; cursor: pointer; } #mm-dock .dk-kafel-modulu { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; } #mm-dock .dk-kafel-modulu > :first-child { grid-row: 1 / 3; } #mm-dock .dk-kafel-modulu .dk-etap { grid-column: 2; font-size: 10px; white-space: normal; } #mm-dock .dk-mobil .dk-kafel-modulu { white-space: normal; } #mm-dock .dk-kafel-modulu strong { font-size: 14px; min-width: 0; line-height: 1.2; white-space: normal; } #mm-dock .dk-kafel-modulu > img { flex-shrink: 0; object-fit: cover; border-radius: 4px; } #mm-dock .dk-kafel-modulu > span { flex-shrink: 0; } #mm-dock .dk-kafle-modulow .dk-szkielet-czesc { height: 44px; } #mm-dock .dk-modul-opis { margin: 0; color: var(--muted); } #mm-dock .dk-kafel-modulu[aria-expanded="true"] { border-color: var(--purple); } #mm-dock .dk-kafel-modulu:focus-visible, #mm-dock .dk-modul-narzedzie:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; } #mm-dock .dk-etap { font-size: 12px; color: var(--muted); } #mm-dock .dk-etap-produkcja { color: var(--green); } #mm-dock .dk-etap-beta { color: var(--orange); } #mm-dock .dk-etap-plan, #mm-dock .dk-etap-odlaczone { color: var(--muted); } #mm-dock .dk-etap-odlaczone { border: 1px dashed var(--muted); border-radius: 4px; padding: 2px 5px; } #mm-dock .dk-kafel-panel { display: grid; gap: 10px; margin-top: 10px; } #mm-dock .dk-modul-narzedzie { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border: 1px solid var(--line2); border-radius: 12px; color: var(--ink); background: var(--mm-tlo-171425); text-decoration: none; overflow-wrap: anywhere; } @keyframes dk-kafel-wejscie { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #mm-dock .dk-kafle-modulow > ul > li { animation: none; } } #mm-dock .dk-dziennik-live { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 12px; } #mm-dock .dk-dziennik-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: dk-dziennik-puls 1s ease-in-out infinite alternate; } #mm-dock .dk-dziennik-lista { list-style: none; padding: 0; margin: 16px 0; } #mm-dock .dk-dziennik-wpis { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; } #mm-dock .dk-dziennik-wpis time { color: var(--dim); flex-shrink: 0; font-size: 12px; } #mm-dock .dk-dziennik-wpis p { margin: 4px 0 0; } #mm-dock .dk-dziennik-uwaga { border-left: 3px solid var(--orange); padding-left: 12px; } #mm-dock .dk-dziennik-wejscie { animation: dk-dziennik-wejscie 240ms ease-out both; } @keyframes dk-dziennik-puls { from { opacity: 1; } to { opacity: .35; } } @keyframes dk-dziennik-wejscie { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #mm-dock .dk-dziennik-live i, #mm-dock .dk-dziennik-wejscie { animation: none; } } /* Konektory: pomiar przeplywow i osobno deklaracje katalogu. */ #mm-dock .dk-konektory section { margin-top: 24px; } #mm-dock .dk-konektory .dk-konektory-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; } #mm-dock .dk-konektory .dk-konektory-kafel { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card, var(--mm-tlo-rgba-22-20-37-90)); min-width: 0; } #mm-dock .dk-konektory h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } #mm-dock .dk-konektory p { margin: 8px 0; overflow-wrap: anywhere; } #mm-dock .dk-konektory .dk-konektory-data { font-size: 12px; } #mm-dock .dk-konektory .dk-konektory-kropka { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--muted); } #mm-dock .dk-konektory .stan-ok, #mm-dock .dk-konektory .stan-green { background: var(--green); } #mm-dock .dk-konektory .stan-stary, #mm-dock .dk-konektory .stan-yellow { background: var(--yellow, var(--mm-tlo-rgb-217-166-41)); } #mm-dock .dk-konektory .stan-blad { background: var(--red); } #mm-dock .dk-konektory .dk-konektory-wykres { display: block; width: 100%; height: 40px; margin-top: 12px; fill: var(--blue); } @media (max-width: 600px) { #mm-dock .dk-konektory .dk-konektory-siatka { grid-template-columns: 1fr; } } /* AŚ v2: zakładki i historia. */ #mm-dock .as-pastylki { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 24px; width: fit-content; margin-bottom: 16px; } #mm-dock .as-pastylki button { border: 0; border-radius: 20px; padding: 9px 18px; color: var(--muted); background: transparent; cursor: pointer; } #mm-dock .as-pastylki button[aria-selected="true"], #mm-dock .as-pastylki button[aria-pressed="true"] { color: var(--ink); background: var(--card); box-shadow: 0 2px 12px var(--mm-cien-rgba-0-0-0-13); } #mm-dock .as-filtry { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; } #mm-dock .as-historia > .as-karta { margin-bottom: 16px; } #mm-dock .as-zawartosc { animation: as-zakladka-wejscie .22s both; transition: opacity .15s, transform .15s; } #mm-dock .as-zawartosc.as-wyjscie { opacity: 0; transform: translateX(-12px); animation: none; } #mm-dock .as-panel { position: fixed; inset: 5vh max(16px, calc((100vw - 1100px) / 2)); overflow: auto; z-index: 120; box-shadow: 0 0 0 100vmax var(--mm-cien-rgba-0-0-0-53); } #mm-dock .as-szkielet { padding: 70px 24px; min-height: 220px; } #mm-dock .as-v2 .wd-karta, #mm-dock .as-v2 .wd-kanaly, #mm-dock .as-v2 .wd-porownanie { animation: as-zakladka-wejscie .3s both; } @keyframes as-zakladka-wejscie { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } #mm-dock .as-v2[data-animacje="nie"] .as-zawartosc, #mm-dock .as-v2[data-animacje="nie"] .wd-karta, #mm-dock .as-v2[data-animacje="nie"] .wd-kanaly, #mm-dock .as-v2[data-animacje="nie"] .wd-porownanie { animation: none; transition: none; } @media (prefers-reduced-motion: reduce) { #mm-dock .as-v2 .as-zawartosc, #mm-dock .as-v2 .wd-karta, #mm-dock .as-v2 .wd-kanaly, #mm-dock .as-v2 .wd-porownanie { animation: none; transition: none; } } #mm-dock .as-zawartosc .wd-karta:nth-child(2) { animation-delay: 50ms; } #mm-dock .as-zawartosc .wd-karta:nth-child(3) { animation-delay: 100ms; } #mm-dock .as-zawartosc .wd-karta:nth-child(4) { animation-delay: 150ms; } #mm-dock .as-zawartosc .wd-karta:nth-child(5) { animation-delay: 200ms; } /* Karty czekaja na pierwsza widocznosc we wlasnym oknie Docka. */ #mm-dock .as-karta.as-czeka { animation: none; opacity: 0; } #mm-dock .dk-informacja { max-width: 680px; margin: 20px auto; padding: 28px; } #mm-dock .dk-informacja h2 { font-size: 24px; margin-bottom: 16px; } #mm-dock .dk-informacja p, #mm-dock .dk-informacja li { line-height: 1.7; color: var(--muted); } #mm-dock .dk-informacja ul { padding-left: 22px; margin: 20px 0; } #mm-dock .dk-informacja .btn { display: inline-flex; width: auto; max-width: 100%; white-space: normal; padding: 12px 18px; } @media (prefers-reduced-motion: reduce) { #mm-dock .as-karta.as-czeka { opacity: 1; animation: none; } } #mm-dock .kr-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 16px 0; } #mm-dock .kr-karta { padding: 12px; min-width: 0; overflow: hidden; } #mm-dock .kr-obraz { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; background: var(--mm-tlo-rgba-127-127-127-08); border-radius: var(--szklo-promien); } #mm-dock .kr-obraz img { width: 100%; height: 100%; object-fit: contain; } #mm-dock .kr-obraz p { padding: 12px; text-align: center; } #mm-dock .kr-karta h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #mm-dock .kr-karta > b, #mm-dock .kr-karta > span { display: inline-block; padding: 4px 8px; margin: 3px; border: var(--szklo-ramka); border-radius: var(--szklo-promien); } #mm-dock .kr-ekran nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } #mm-dock .kr-filtr { border-radius: 999px; padding: 6px 14px; background: var(--szklo-tlo); background-color: var(--mm-tlo-rgba-255-255-255-04); border: var(--szklo-ramka); box-shadow: var(--szklo-polysk); color: inherit; cursor: pointer; } #mm-dock .kr-filtr:hover { background-color: var(--mm-tlo-rgba-255-255-255-12); } #mm-dock .kr-filtr:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; } #mm-dock .kr-filtr[aria-pressed="true"] { background-color: color-mix(in srgb, var(--purple) 35%, transparent); border-color: color-mix(in srgb, var(--purple) 65%, white); } #mm-dock .kr-kampania { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mm-dock .kr-niska { position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 8px; font-size: 11px; line-height: 1.4; text-align: center; color: var(--mm-tekst-f5f3ff); background: var(--mm-tlo-rgba-18-15-30-85); } #mm-dock .dk-ux-pigulki{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0} #mm-dock .dk-ux-pigulki button{border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--glass-bg,var(--card));color:var(--ink);cursor:pointer;font:inherit} #mm-dock .dk-ux-pigulki button[aria-pressed="true"]{border-color:var(--purple);box-shadow:inset 0 0 0 1px var(--purple)} #mm-dock .dk-ux-pigulki button:focus-visible{outline:2px solid var(--purple);outline-offset:3px} #mm-dock .dk-ux-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start} #mm-dock .dk-ux-bento>*{min-width:0}#mm-dock .dk-ux-szeroka{grid-column:span 2} #mm-dock .dk-ux-lista{padding:20px;border-radius:20px}#mm-dock .dk-ux-lista ul{padding-left:18px}#mm-dock .dk-ux-lista li{overflow-wrap:anywhere;margin:10px 0} #mm-dock .dk-ux-ranking>p{font-size:13px;color:var(--muted);margin:0 0 8px} @media(max-width:1050px){#mm-dock .dk-ux-bento{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:650px){#mm-dock .dk-ux-bento{grid-template-columns:minmax(0,1fr)}#mm-dock .dk-ux-szeroka{grid-column:auto}} #mm-dock .dk-sklep-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;margin:16px 0} #mm-dock .dk-sklep-bento>*{min-width:0} #mm-dock .dk-sklep-ranking{grid-column:1/-1} #mm-dock .dk-sklep-karty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #mm-dock .dk-sklep-alert{padding:20px;border-radius:18px;border:var(--szklo-ramka);background:var(--szklo-tlo);min-width:0;overflow-wrap:anywhere} #mm-dock .dk-sklep-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px} #mm-dock .dk-sklep-meta b{flex-basis:100%} #mm-dock .dk-sklep-waga{padding:4px 10px;border-radius:999px;border:1px solid currentColor} #mm-dock .dk-sklep-waga-alarm{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)} #mm-dock .dk-sklep-waga-uwaga{color:var(--orange);background:color-mix(in srgb,var(--orange) 12%,transparent)} #mm-dock .dk-sklep-waga-neutralna{color:var(--muted);background:var(--mm-tlo-rgba-127-127-127-10)} #mm-dock .dk-sklep-alert h4{margin:14px 0 8px} #mm-dock .dk-sklep-alert p{white-space:pre-wrap} @media(max-width:1050px){#mm-dock .dk-sklep-bento{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:650px){#mm-dock .dk-sklep-bento,#mm-dock .dk-sklep-karty{grid-template-columns:minmax(0,1fr)}} /* Trend alertow Sentinela, osobna karta pod bento. */ #mm-dock .dk-sklep-trend { padding: 20px; margin: 16px 0; border-radius: 20px; min-width: 0; } #mm-dock .dk-sklep-trend-filtry { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } #mm-dock .dk-sklep-trend-filtry button, #mm-dock .dk-sklep-trend-regula button { font: inherit; color: inherit; cursor: pointer; padding: 6px 14px; border-radius: 999px; border: var(--szklo-ramka); background: var(--szklo-tlo); box-shadow: var(--szklo-polysk); } #mm-dock .dk-sklep-trend-filtry button[aria-pressed="true"], #mm-dock .dk-sklep-trend-reguly button[aria-selected="true"] { background: color-mix(in srgb, var(--purple) 35%, transparent); border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); } #mm-dock .dk-sklep-trend-filtry button:focus-visible, #mm-dock .dk-sklep-trend-regula button:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; } #mm-dock .dk-sklep-trend-regula { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } #mm-dock .dk-sklep-trend-reguly { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 8px; } #mm-dock .dk-sklep-trend-liczby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #mm-dock .dk-sklep-trend-liczby dd { margin: 6px 0 0; font-size: 22px; font-weight: 600; } @media (max-width: 650px) { #mm-dock .dk-sklep-trend-liczby { grid-template-columns: minmax(0, 1fr); } } /* Wspolny wybor bez natywnych kontrolek w animowanym oknie. */ #mm-dock .dk-wybor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } /* Wybor obok przyciskow w jednym wierszu (Dzial w Zespole i Widoku lidera). */ #mm-dock .dk-wybor.dk-wybor-wiersz { display: inline-flex; vertical-align: middle; max-width: 100%; margin-right: 8px; } #mm-dock .dk-wybor-etykieta { flex-basis: 100%; } #mm-dock .dk-wybor-pigulki, #mm-dock .dk-wybor-lista { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } #mm-dock .dk-wybor-lista { flex-basis: 100%; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; } #mm-dock .dk-wybor button { font: inherit; color: inherit; cursor: pointer; padding: 6px 14px; border-radius: 999px; border: var(--szklo-ramka); background: var(--szklo-tlo); box-shadow: var(--szklo-polysk); max-width: 100%; overflow-wrap: anywhere; } #mm-dock .dk-wybor button[aria-pressed="true"], #mm-dock .dk-wybor button[aria-selected="true"] { background: color-mix(in srgb, var(--purple) 35%, transparent); border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); } #mm-dock .dk-wybor.brak button { border-color: var(--mm-ramka-rgba-255-185-89-6); color: var(--orange); } #mm-dock .dk-wybor button:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; } @media (max-width: 650px) { #mm-dock .dk-wybor button { min-height: 44px; } }