/* ML Accessibility - Medialive | v1.1.0 */ /* ========================================================= APPLIED CLASSES (djeluju na cijeli site, na ) ========================================================= */ /* Skaliranje sadržaja (zoom) — panel/launcher su djeca , ostaju netaknuti */ html.mlacc-zoom body{zoom:var(--mlacc-zoom,1)} /* Veličina fonta */ html.mlacc-fs{font-size:calc(100% * var(--mlacc-font-scale,1))} /* Visina retka */ html.mlacc-lh :is(p,li,a,span,td,th,h1,h2,h3,h4,h5,h6,blockquote,label,dd,dt){ line-height:var(--mlacc-lh,1.7) !important} /* Prored između slova */ html.mlacc-sp :is(p,li,a,span,td,th,blockquote,label,dd,dt){ letter-spacing:var(--mlacc-ls,.04em) !important;word-spacing:calc(var(--mlacc-ls,.04em) * 2.6) !important} /* Invertiraj boje */ html.mlacc-invert{filter:invert(1) hue-rotate(180deg)} html.mlacc-invert :is(img,picture,video,iframe,canvas,svg:not(.mlacc-i),[style*="background-image"]){ filter:invert(1) hue-rotate(180deg)} /* naš UI vraćamo u normalu */ html.mlacc-invert .mlacc-panel,html.mlacc-invert .mlacc-launcher{filter:invert(1) hue-rotate(180deg)} /* Sivi tonovi */ html.mlacc-grayscale{filter:grayscale(1)} html.mlacc-grayscale.mlacc-invert{filter:grayscale(1) invert(1) hue-rotate(180deg)} /* Istakni poveznice */ html.mlacc-links a{text-decoration:underline !important;text-underline-offset:2px} html.mlacc-links a:focus,html.mlacc-links a:hover{outline:2px solid currentColor;outline-offset:2px} /* Istakni naslove */ html.mlacc-headings :is(h1,h2,h3,h4,h5,h6){ outline:2px dashed currentColor !important;outline-offset:4px; background:rgba(255,214,0,.16) !important;padding-inline:.15em;border-radius:3px} /* Čitljiv font */ html.mlacc-readable body, html.mlacc-readable :is(p,li,span,a,td,th,h1,h2,h3,h4,h5,h6,button,input,label){ font-family:Verdana,Tahoma,"Segoe UI",Arial,sans-serif !important;letter-spacing:.01em} /* Veći pokazivač */ html.mlacc-bigcursor,html.mlacc-bigcursor *{ cursor:url('data:image/svg+xml;utf8,') 4 2, auto !important} /* Zaustavi animacije */ html.mlacc-nomotion *,html.mlacc-nomotion *::before,html.mlacc-nomotion *::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} /* Visoki kontrast */ html.mlacc-contrast,html.mlacc-contrast body{background:#000 !important;color:#fff !important} html.mlacc-contrast :is(p,span,li,div,td,th,label,strong,em,blockquote,figcaption,h1,h2,h3,h4,h5,h6,small,time,address){ color:#fff !important;background-color:transparent !important;border-color:#fff !important} html.mlacc-contrast a{color:#ffe600 !important} html.mlacc-contrast :is(header,footer,section,article,aside,nav,main){background:#000 !important} html.mlacc-contrast :is(button,.btn,input,select,textarea){background:#000 !important;color:#fff !important;border:1px solid #fff !important} html.mlacc-contrast img,html.mlacc-contrast svg{filter:none} /* naš UI ostaje čitljiv u kontrast modu */ html.mlacc-contrast .mlacc-panel{background:#11161f !important} html.mlacc-contrast .mlacc-panel :is(h2,span,a,button,div){color:#fff !important;border-color:#2a3140 !important} /* ========================================================= LAUNCHER ========================================================= */ .mlacc-launcher{--mlacc-accent:#2563eb;position:fixed;bottom:20px;z-index:2147483000} .mlacc-launcher.mlacc-pos-left{left:20px} .mlacc-launcher.mlacc-pos-right{right:20px} .mlacc-launch-btn{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%; border:0;cursor:pointer;background:var(--mlacc-accent);color:#fff; box-shadow:0 10px 26px rgba(15,23,42,.30);transition:transform .16s ease,box-shadow .16s ease} .mlacc-launch-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 32px rgba(15,23,42,.36)} .mlacc-launch-btn:focus-visible{outline:3px solid #fff;outline-offset:3px} /* ========================================================= PANEL ========================================================= */ .mlacc-panel{ --mlacc-accent:#2563eb; --mlacc-ink:#111827; --mlacc-muted:#6b7280; --mlacc-line:#eef0f4; --mlacc-card:#f6f7f9; --mlacc-card-bd:#eceef2; --mlacc-track:#e6e8ee; position:fixed;bottom:88px;z-index:2147483001; width:min(408px,calc(100vw - 28px));max-height:min(82vh,720px); display:flex;flex-direction:column; background:#fff;color:var(--mlacc-ink); border:1px solid var(--mlacc-line);border-radius:20px; box-shadow:0 24px 64px rgba(15,23,42,.24),0 4px 14px rgba(15,23,42,.10); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased; opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom left; transition:opacity .22s cubic-bezier(.2,.7,.3,1),transform .22s cubic-bezier(.2,.7,.3,1)} .mlacc-panel.mlacc-pos-left{left:20px} .mlacc-panel.mlacc-pos-right{right:20px;transform-origin:bottom right} .mlacc-panel.is-open{opacity:1;transform:none} /* ---- Header ---- */ .mlacc-head{display:flex;align-items:center;gap:12px;padding:18px 20px 16px;flex:0 0 auto} .mlacc-h{margin:0;font-size:1.18rem;font-weight:800;letter-spacing:-.01em;flex:1 1 auto} .mlacc-hbtn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%; border:0;cursor:pointer;background:transparent;color:var(--mlacc-muted);transition:background .15s ease,color .15s ease} .mlacc-hbtn svg{width:20px;height:20px} .mlacc-hbtn:hover{background:var(--mlacc-card);color:var(--mlacc-ink)} .mlacc-hbtn:focus-visible{outline:2px solid var(--mlacc-accent);outline-offset:2px} .mlacc-close{background:var(--mlacc-accent);color:#fff} .mlacc-close:hover{background:var(--mlacc-accent);color:#fff;filter:brightness(1.08)} /* ---- Scroll body ---- */ .mlacc-body{padding:2px 20px 20px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px} .mlacc-body::-webkit-scrollbar{width:10px} .mlacc-body::-webkit-scrollbar-thumb{background:#d7dae1;border-radius:99px;border:3px solid #fff} /* ---- Toggle grid (ikona + label) ---- */ .mlacc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .mlacc-tg{display:flex;align-items:center;gap:11px;text-align:left;min-height:58px;padding:12px 13px; border:1.5px solid var(--mlacc-card-bd);border-radius:14px;background:var(--mlacc-card);color:var(--mlacc-ink); font-weight:600;font-size:.9rem;line-height:1.2;cursor:pointer; transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .05s ease} .mlacc-tg:hover{border-color:var(--mlacc-accent);background:#fff} .mlacc-tg:active{transform:scale(.985)} .mlacc-tg:focus-visible{outline:2px solid var(--mlacc-accent);outline-offset:2px} .mlacc-tg .mlacc-i{flex:0 0 auto;width:26px;height:26px;color:var(--mlacc-ink)} .mlacc-tg .mlacc-i svg{width:26px;height:26px;display:block} .mlacc-tg span{flex:1 1 auto} .mlacc-tg[aria-pressed="true"]{ background:color-mix(in srgb,var(--mlacc-accent) 10%,#fff); border-color:var(--mlacc-accent);color:var(--mlacc-accent); box-shadow:inset 0 0 0 1px var(--mlacc-accent)} .mlacc-tg[aria-pressed="true"] .mlacc-i{color:var(--mlacc-accent)} /* ---- Slider redovi ---- */ .mlacc-sliders{display:flex;flex-direction:column;gap:10px;margin-top:2px} .mlacc-sl{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px; padding:12px 14px;border:1.5px solid var(--mlacc-card-bd);border-radius:14px;background:var(--mlacc-card); transition:border-color .15s ease,background .15s ease,box-shadow .15s ease} .mlacc-sl.is-active{border-color:var(--mlacc-accent);background:color-mix(in srgb,var(--mlacc-accent) 6%,#fff); box-shadow:inset 0 0 0 1px var(--mlacc-accent)} .mlacc-sl-label{grid-column:1;font-weight:600;font-size:.92rem} .mlacc-sl-val{grid-column:2;justify-self:end;min-width:52px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--mlacc-muted)} .mlacc-sl.is-active .mlacc-sl-val{color:var(--mlacc-accent)} .mlacc-sl-ctr{grid-column:1 / -1;display:flex;align-items:center;gap:10px} /* range track */ .mlacc-range{-webkit-appearance:none;appearance:none;flex:1 1 auto;height:8px;border-radius:99px; background:linear-gradient(to right,var(--mlacc-accent) var(--mlacc-fill,0%),var(--mlacc-track) var(--mlacc-fill,0%)); cursor:pointer;outline:none} .mlacc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%; background:var(--mlacc-accent);border:3px solid #fff;box-shadow:0 1px 4px rgba(15,23,42,.28);cursor:pointer;margin-top:0} .mlacc-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--mlacc-accent); border:3px solid #fff;box-shadow:0 1px 4px rgba(15,23,42,.28);cursor:pointer} .mlacc-range::-moz-range-track{height:8px;border-radius:99px;background:transparent} .mlacc-range:focus-visible{outline:2px solid var(--mlacc-accent);outline-offset:3px} .mlacc-step{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:38px;height:36px; border:1.5px solid var(--mlacc-card-bd);background:#fff;border-radius:10px; font-weight:800;font-size:1.1rem;line-height:1;cursor:pointer;color:var(--mlacc-ink);transition:border-color .15s ease,color .15s ease} .mlacc-step:hover{border-color:var(--mlacc-accent);color:var(--mlacc-accent)} .mlacc-step:focus-visible{outline:2px solid var(--mlacc-accent);outline-offset:2px} .mlacc-step[disabled]{opacity:.4;cursor:not-allowed} /* ---- Footer ---- */ .mlacc-foot{flex:0 0 auto;padding:14px 20px 18px;border-top:1px solid var(--mlacc-line); display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .mlacc-reset-lg{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--mlacc-card-bd); background:#fff;border-radius:11px;padding:10px 16px;font-weight:700;font-size:.9rem;cursor:pointer;color:var(--mlacc-ink)} .mlacc-reset-lg:hover{border-color:var(--mlacc-accent);color:var(--mlacc-accent)} .mlacc-reset-lg svg{width:17px;height:17px} .mlacc-statement{color:var(--mlacc-accent);font-weight:700;text-decoration:none;font-size:.88rem;border-bottom:1px solid transparent} .mlacc-statement:hover{border-bottom-color:currentColor} /* Section labels */ .mlacc-seclabel{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--mlacc-muted);margin:8px 2px 2px} /* ========================================================= DARK MODE ========================================================= */ @media (prefers-color-scheme:dark){ .mlacc-panel{ --mlacc-ink:#eef1f5;--mlacc-muted:#9aa3b0;--mlacc-line:#232a36; --mlacc-card:#161c27;--mlacc-card-bd:#242c3a;--mlacc-track:#2a3342; background:#0f141d;border-color:#232a36; box-shadow:0 24px 64px rgba(0,0,0,.5)} .mlacc-tg:hover,.mlacc-step{background:#1a2230} .mlacc-reset-lg{background:#1a2230} .mlacc-body::-webkit-scrollbar-thumb{border-color:#0f141d;background:#2a3342} } /* ========================================================= MOBILE ========================================================= */ @media (max-width:480px){ .mlacc-panel{left:14px !important;right:14px !important;bottom:82px;width:auto;max-height:78vh} .mlacc-panel.mlacc-pos-right{transform-origin:bottom center} .mlacc-panel.mlacc-pos-left{transform-origin:bottom center} }