/* MarX — strato grafico "Liquid Glass" (stile macOS recente). Si carica dopo marx.css e ne ridefinisce l'aspetto: materiali in vetro, angoli concentrici, barra dei menu trasparente. */ :root { --lg-tint: rgba(255, 255, 255, .22); --lg-tint-strong: rgba(255, 255, 255, .42); --lg-edge: rgba(255, 255, 255, .75); --lg-edge-soft: rgba(255, 255, 255, .25); --lg-shadow: 0 12px 40px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08); --lg-blur: 18px; --lg-sat: 1.9; --lg-hover: rgba(255, 255, 255, .35); --menu-text: #fff; --r-window: 22px; --r-panel: 16px; --r-control: 999px; --win-bg: #fbfbfd; --win-sidebar: rgba(255, 255, 255, .55); --accent: #0a84ff; --wallpaper: radial-gradient(80% 60% at 18% 22%, rgba(120, 220, 255, .85) 0%, transparent 60%), radial-gradient(70% 55% at 85% 18%, rgba(170, 130, 255, .75) 0%, transparent 62%), radial-gradient(90% 70% at 70% 95%, rgba(20, 60, 190, .95) 0%, transparent 70%), radial-gradient(60% 50% at 10% 90%, rgba(0, 170, 200, .7) 0%, transparent 65%), linear-gradient(165deg, #6ec3f4 0%, #3f7fe0 38%, #2c4fc4 62%, #1a2a7c 100%); } :root[data-theme="dark"] { --lg-tint: rgba(28, 28, 34, .38); --lg-tint-strong: rgba(40, 40, 48, .6); --lg-edge: rgba(255, 255, 255, .32); --lg-edge-soft: rgba(255, 255, 255, .08); --lg-shadow: 0 14px 44px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3); --lg-hover: rgba(255, 255, 255, .14); --win-bg: #1c1c1e; --win-sidebar: rgba(44, 44, 50, .55); --wallpaper: radial-gradient(80% 60% at 18% 22%, rgba(40, 110, 170, .7) 0%, transparent 60%), radial-gradient(70% 55% at 85% 18%, rgba(90, 50, 170, .65) 0%, transparent 62%), radial-gradient(90% 70% at 70% 95%, rgba(10, 25, 90, .95) 0%, transparent 70%), radial-gradient(60% 50% at 10% 90%, rgba(0, 90, 120, .6) 0%, transparent 65%), linear-gradient(165deg, #12305a 0%, #0f1f4a 45%, #0a1033 100%); } /* ---------- Materiale vetro ---------- */ .dock, .lg-glass { position: relative; } .dock, .dropdown, .ctx, .control, .spotlight, .toast, .lg-glass { background: var(--lg-tint); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); border: 0; box-shadow: inset 0 1px 0 var(--lg-edge), inset 0 -1px 0 var(--lg-edge-soft), inset 0 0 0 .5px var(--lg-edge-soft), var(--lg-shadow); } /* Rifrazione: solo nei browser Chromium, che supportano filtri SVG nel backdrop (classe messa dal JS) */ .lg-refract .dock, .lg-refract .control, .lg-refract .spotlight { backdrop-filter: url(#lg-refract) blur(var(--lg-blur)) saturate(var(--lg-sat)); } /* Riflesso speculare sul bordo */ .dock::before, .dropdown::before, .ctx::before, .control::before, .spotlight::before, .toast::before, .lg-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,.1) 72%, rgba(255,255,255,.55) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; } :root[data-theme="dark"] .dock::before, :root[data-theme="dark"] .dropdown::before, :root[data-theme="dark"] .ctx::before, :root[data-theme="dark"] .control::before, :root[data-theme="dark"] .spotlight::before, :root[data-theme="dark"] .toast::before, :root[data-theme="dark"] .lg-glass::before { opacity: .35; } @media (prefers-reduced-transparency: reduce) { .dock, .dropdown, .ctx, .control, .spotlight, .toast, .lg-glass { background: var(--lg-tint-strong); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); } .lg-refract .dock, .lg-refract .control, .lg-refract .spotlight { backdrop-filter: blur(40px); } } /* ---------- Barra dei menu trasparente ---------- */ .menubar { background: linear-gradient(rgba(0,0,0,.14), rgba(0,0,0,0)); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--menu-text); text-shadow: 0 1px 2px rgba(0,0,0,.25); height: 28px; --menubar-h: 28px; } .menubar button, .menu-app, .menu-clock { border-radius: var(--r-control); padding: 2px 10px; height: 22px; } .menubar button:hover, .menubar button.open { background: var(--lg-hover); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35); } .desktop { inset: 28px 0 0 0; } /* ---------- Menu a tendina e tasto destro ---------- */ .dropdown, .ctx { border-radius: 14px; padding: 6px; color: var(--text); min-width: 230px; } .dropdown { top: 32px; } .dropdown button, .ctx button { border-radius: 8px; padding: 4px 10px; font-size: 13px; } .dropdown hr, .ctx hr { margin: 5px 10px; border-top-color: rgba(127,127,127,.25); } .dropdown button:hover:not(:disabled), .ctx button:hover:not(:disabled) { background: var(--accent); color: #fff; } /* ---------- Dock ---------- */ .dock-wrap { bottom: 8px; } .dock { border-radius: 28px; padding: 7px 9px; gap: 4px; align-items: flex-end; overflow: visible; } .dock-item { width: 54px; height: 54px; transition: width .12s ease-out, height .12s ease-out; will-change: width, height; } .dock-item .ico { border-radius: 24%; box-shadow: 0 3px 8px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 .5px rgba(255,255,255,.35); } .dock-item::after { background: var(--lg-tint-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--r-control); padding: 4px 12px; font-weight: 500; box-shadow: inset 0 1px 0 var(--lg-edge), var(--lg-shadow); } .dock-item.running::before { width: 5px; height: 5px; margin-left: -2.5px; bottom: -6px; background: var(--menu-text); opacity: .85; box-shadow: 0 0 4px rgba(0,0,0,.3); } .dock-sep { background: rgba(255,255,255,.35); margin: 6px 6px; } .dock.magnify .dock-item { transition: width .06s linear, height .06s linear; } /* ---------- Finestre ---------- */ .window { border-radius: var(--r-window); background: var(--win-bg); box-shadow: 0 30px 80px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.18); transition: box-shadow .2s; animation: none; } :root[data-theme="dark"] .window { box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4), 0 0 0 .5px rgba(255,255,255,.14); } .window.inactive { box-shadow: 0 16px 40px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.14); } .window > .titlebar { border-radius: var(--r-window) var(--r-window) 0 0; background: var(--win-bg); border-bottom: 0; height: 44px; padding: 0 16px; } .window > .win-body { border-radius: 0 0 var(--r-window) var(--r-window); } .titlebar .title { color: var(--text); font-weight: 600; opacity: .85; } .window.inactive .titlebar .title { opacity: .45; } .lights { gap: 9px; } .lights button { width: 13px; height: 13px; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.35); } /* Finder: barra laterale galleggiante in vetro, angoli concentrici con la finestra */ .window .finder { grid-template-columns: 200px 1fr; } .window .finder .sidebar, .window .notes .notes-list { margin: 0 0 10px 10px; border-radius: calc(var(--r-window) - 8px); background: var(--win-sidebar); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border: 0; box-shadow: inset 0 1px 0 var(--lg-edge-soft), inset 0 0 0 .5px rgba(127,127,127,.18), 0 2px 10px rgba(0,0,0,.06); } .window .notes { grid-template-columns: 220px 1fr; } .sidebar button { border-radius: 10px; padding: 5px 10px; } .sidebar button.active { background: rgba(127,127,127,.18); } .note-item { border-bottom: 0; border-radius: 10px; margin: 2px 6px; width: calc(100% - 12px); } .note-item.active { background: rgba(255, 204, 0, .35); } .notes-list .bar { border-bottom: 0; } .notes textarea { border-radius: 0 0 var(--r-window) 0; } /* Barra strumenti: controlli a capsula in vetro */ .toolbar { border-bottom: 0; padding: 8px 12px; gap: 8px; } .toolbar button { border-radius: var(--r-control); padding: 4px 12px; background: rgba(127,127,127,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 .5px rgba(127,127,127,.2); } .toolbar button:hover:not(:disabled) { background: rgba(127,127,127,.22); } .toolbar [data-nav] { width: 30px; padding: 4px 0; } .crumbs button { border-radius: var(--r-control); } .statusbar { border-top: 0; padding: 6px 16px 10px; } .file { border-radius: 12px; } .file.sel { background: color-mix(in srgb, var(--accent) 22%, transparent); } .files .ico { border-radius: 14px; } /* Dialoghi (sheet) */ .sheet-bg { inset: 44px 0 0; background: transparent; border-radius: 0 0 var(--r-window) var(--r-window); } .sheet { border-radius: 20px; margin-top: 10px; background: var(--lg-tint-strong); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); box-shadow: inset 0 1px 0 var(--lg-edge), inset 0 0 0 .5px var(--lg-edge-soft), 0 20px 50px rgba(0,0,0,.3); animation: lgPop .28s cubic-bezier(.2,1.2,.3,1); } @keyframes lgPop { from { transform: scale(.9); opacity: 0; } } .btn { border-radius: var(--r-control); padding: 5px 16px; } .sheet input, .sheet select, .pane .field input { border-radius: 10px; } /* Calcolatrice: tasti in vetro */ .calc { background: rgba(28, 28, 30, .92); border-radius: 0 0 var(--r-window) var(--r-window); } .window:has(.calc) > .titlebar { background: rgba(28, 28, 30, .92); } .window:has(.calc) .titlebar .title { color: #fff; } .calc-keys button { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 .5px rgba(255,255,255,.08); transition: filter .1s, transform .1s; } .calc-keys button:active { transform: scale(.94); } /* Impostazioni */ .seg { border-radius: var(--r-control); padding: 3px; background: rgba(127,127,127,.14); } .seg button { border-radius: var(--r-control); } .walls button { border-radius: 14px; } /* ---------- Spotlight, Centro di controllo, notifiche ---------- */ .spotlight { border-radius: 30px; top: 20%; } .spotlight input { padding: 16px 24px; font-size: 24px; } #spotlightResults button { border-radius: 12px; margin: 0 8px; width: calc(100% - 16px); } .control { border-radius: 26px; padding: 12px; top: 34px; } .cc-tile { border-radius: 20px; background: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 var(--lg-edge-soft), inset 0 0 0 .5px var(--lg-edge-soft); } :root[data-theme="dark"] .cc-tile { background: rgba(255,255,255,.08); } .toast { border-radius: 20px; padding: 12px 16px; top: 38px; animation: lgSlide .4s cubic-bezier(.2,1.1,.3,1); } @keyframes lgSlide { from { transform: translateX(120%); } } /* ---------- Launchpad e blocco schermo ---------- */ .launchpad { background: rgba(0,0,0,.18); backdrop-filter: blur(50px) saturate(1.6); -webkit-backdrop-filter: blur(50px) saturate(1.6); } .launchpad input { border-radius: var(--r-control); background: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); padding: 7px 16px; } .lp-grid .ico { border-radius: 24%; } .lock-input { border-radius: var(--r-control); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 .5px rgba(255,255,255,.3); } .avatar { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 24px rgba(0,0,0,.25); } /* Icone sulla scrivania */ .desk-icon { border-radius: 12px; } .desk-lasso { position: fixed; z-index: 5; pointer-events: none; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.14); border-radius: 4px; } .desk-icon:focus, .desk-icon.sel { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35); } @media (prefers-reduced-motion: reduce) { .dock-item { transition: none; } } /* Menu più leggibili: vetro più denso dove c'è testo da leggere */ .dropdown, .ctx, .toast { background: rgba(246, 246, 250, .62); } :root[data-theme="dark"] .dropdown, :root[data-theme="dark"] .ctx, :root[data-theme="dark"] .toast { background: rgba(36, 36, 42, .62); } /* ---------- Icone App Store e Monitoraggio, app installate ---------- */ .ico-appstore { background: linear-gradient(150deg, #34e0c8 0%, #2a9df4 48%, #7a5cff 100%); overflow: hidden; } /* Soft Store: borsa della spesa bianca con manico */ .ico-appstore::before { content: ""; position: absolute; left: 25%; right: 25%; top: 38%; bottom: 20%; border-radius: 9% 9% 18% 18%; background: linear-gradient(#fff, #eef4ff); box-shadow: 0 2px 4px rgba(0,0,0,.18); } .ico-appstore::after { content: ""; position: absolute; left: 36%; right: 36%; top: 22%; height: 26%; border: 2.5px solid #fff; border-bottom: 0; border-radius: 999px 999px 0 0; box-sizing: border-box; } .dock-item .ico-appstore::after { border-width: 3px; } .lp-grid .ico-appstore::after { border-width: 4px; } .ico-activity { background: linear-gradient(160deg, #3a3a3e, #111113); } .ico-activity::before { content: ""; position: absolute; inset: 22% 16%; background: linear-gradient(135deg, transparent 46%, #34c759 46% 54%, transparent 54%) 0 0 / 34% 100% no-repeat, linear-gradient(45deg, transparent 46%, #34c759 46% 54%, transparent 54%) 33% 0 / 34% 100% no-repeat, linear-gradient(135deg, transparent 46%, #34c759 46% 54%, transparent 54%) 66% 0 / 34% 100% no-repeat; } .ico-web { background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; } .ico-web img { width: 78%; height: 78%; object-fit: contain; } .dock-apps { display: contents; } .webapp { width: 100%; height: 100%; border: 0; display: block; background: #fff; border-radius: 0 0 var(--r-window) var(--r-window); } .logview { margin: 0; padding: 14px 16px; height: 100%; overflow: auto; font: 12px/1.5 ui-monospace, Menlo, monospace; background: #1c1c1e; color: #e5e5e7; white-space: pre-wrap; word-break: break-all; border-radius: 0 0 var(--r-window) var(--r-window); user-select: text; } /* ---------- App Store ---------- */ .as-wrap { height: 100%; } .as-side small { margin-left: auto; color: var(--muted); } .as-main { overflow: auto; padding: 6px 26px 26px; min-width: 0; } .as-main h2 { margin: 6px 0 2px; font-size: 26px; letter-spacing: -.01em; } .as-sub { color: var(--muted); margin: 0 0 14px; } .as-empty { color: var(--muted); text-align: center; padding: 50px 20px; } .as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 10px; } .as-card { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(127,127,127,.07); cursor: default; transition: background .15s, transform .15s; } .as-card:hover { background: rgba(127,127,127,.13); } .as-card:focus-visible { outline: 2px solid var(--accent); } .as-card img, .as-detail header img { width: 52px; height: 52px; border-radius: 12px; background: #fff; padding: 6px; object-fit: contain; box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 0 0 .5px rgba(0,0,0,.08); } .as-info { min-width: 0; display: flex; flex-direction: column; } .as-info strong { font-size: 14px; } .as-info span { color: var(--muted); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .as-btn { border-radius: 999px; padding: 4px 16px; font-weight: 700; font-size: 13px; color: var(--accent); background: rgba(10,132,255,.12); cursor: pointer; } .as-btn:hover { background: rgba(10,132,255,.2); } .as-btn.warn { color: #ff3b30; background: rgba(255,59,48,.12); } .as-progress { width: 64px; height: 6px; border-radius: 3px; background: rgba(127,127,127,.25); overflow: hidden; } .as-progress i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s; } .as-detail { max-width: 760px; } .as-back { color: var(--accent); padding: 8px 0; font-weight: 600; cursor: pointer; } .as-detail header { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; } .as-detail header img { width: 84px; height: 84px; border-radius: 20px; padding: 10px; } .as-detail header h2 { margin: 0; } .as-head-act { margin-left: auto; } .as-detail h3 { margin: 22px 0 6px; font-size: 16px; } .as-step { color: var(--accent); font-weight: 600; } .as-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; } .as-facts div { padding: 10px 12px; border-radius: 12px; background: rgba(127,127,127,.08); display: flex; flex-direction: column; gap: 2px; min-width: 0; } .as-facts span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .as-facts strong { overflow-wrap: anywhere; } .as-note { padding: 12px 14px; border-radius: 12px; background: rgba(10,132,255,.1); line-height: 1.5; } .as-note.err { background: rgba(255,59,48,.1); } .as-note code { font-size: 12px; overflow-wrap: anywhere; } .as-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .as-detail a { color: var(--accent); } .pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; } .pill.on { background: rgba(40,200,64,.15); color: #1f9d3a; } .pill.off { background: rgba(127,127,127,.18); color: var(--muted); } /* ---------- Monitoraggio Attività ---------- */ .am { padding: 4px 18px 16px; display: flex; flex-direction: column; gap: 14px; height: 100%; overflow: auto; } .am-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .am-tile { padding: 12px 14px; border-radius: 16px; background: rgba(127,127,127,.08); display: flex; flex-direction: column; gap: 2px; min-width: 0; } .am-tile span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .am-tile strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; } .am-tile small { color: var(--muted); font-variant-numeric: tabular-nums; } .spark { width: 100%; height: 34px; margin-top: 6px; } .am-bar { height: 6px; border-radius: 3px; background: rgba(127,127,127,.2); margin-top: 12px; overflow: hidden; } .am-bar i { display: block; height: 100%; background: #ff9f0a; } .am-table-wrap { overflow-x: auto; border-radius: 14px; background: rgba(127,127,127,.05); } .am-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .am-table th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; } .am-table th[data-sort] { cursor: pointer; } .am-table th.sorted { color: var(--accent); } .am-table td { padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; } .am-table tr:last-child td { border-bottom: 0; } .am-table td img { width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px; border-radius: 4px; background: #fff; } .am-table .num { text-align: right; } .as-search { padding: 2px 2px 8px; } .as-search input { width: 100%; padding: 6px 12px; border-radius: 999px; border: 0; background: rgba(127,127,127,.14); color: var(--text); outline: none; box-shadow: inset 0 0 0 .5px rgba(127,127,127,.25); } .as-search input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); background: var(--win-bg); } /* App Store: sezioni, app non compatibili, descrizioni */ .as-sec { margin: 22px 0 4px; font-size: 18px; display: flex; align-items: baseline; gap: 10px; } .as-sec small, .as-count { font-size: 13px; font-weight: 500; color: var(--muted); } .as-card.blocked img { filter: grayscale(1); opacity: .55; } .as-card.blocked .as-info strong { opacity: .6; } .as-btn.off { color: var(--muted); background: rgba(127,127,127,.14); font-weight: 600; font-size: 11px; padding: 4px 10px; } .as-md { line-height: 1.55; } .as-md h4 { margin: 16px 0 4px; font-size: 15px; } .as-md p { margin: 6px 0; } .as-md ul { margin: 6px 0; padding-left: 20px; } .as-md code { font-size: 12px; background: rgba(127,127,127,.14); padding: 1px 5px; border-radius: 5px; } .as-md a { color: var(--accent); } /* Calendario: la griglia resta proporzionata anche a finestra ingrandita */ .cal { max-width: 560px; margin: 0 auto; } /* ---------- Preferenze applicate all'interfaccia ---------- */ body:not(.loginscreen) { background: var(--desk-bg, var(--wallpaper)); font-size: var(--text-size, 13px); } .dock-item { width: var(--dock-size, 54px); height: var(--dock-size, 54px); } @media (max-width: 640px) { .dock-item { width: min(40px, var(--dock-size, 54px)); height: min(40px, var(--dock-size, 54px)); } } .dock-wrap { transition: transform .35s cubic-bezier(.3,.8,.3,1); } body.dock-autohide .dock-wrap { transform: translateY(calc(100% + 14px)); } body.dock-autohide .dock-wrap.show { transform: none; } body.no-desk-icons .desktop-icons { display: none; } .no-transparency { --lg-tint: rgba(246,246,248,.97); --lg-tint-strong: rgba(246,246,248,.98); --win-sidebar: #ececf0; } :root.no-transparency[data-theme="dark"] { --lg-tint: rgba(38,38,42,.97); --lg-tint-strong: rgba(44,44,48,.98); --win-sidebar: #2c2c30; } .no-transparency .dock, .no-transparency .dropdown, .no-transparency .ctx, .no-transparency .control, .no-transparency .spotlight, .no-transparency .toast, .no-transparency .sheet, .no-transparency .sidebar, .no-transparency .menubar button:hover { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .no-transparency .dropdown, .no-transparency .ctx, .no-transparency .toast { background: var(--lg-tint); } .reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; } /* ---------- Impostazioni ---------- */ .st { display: grid; grid-template-columns: 230px 1fr; height: 100%; } .st-side { overflow: auto; } .st-nav { gap: 10px !important; padding: 5px 8px !important; } .st-nav span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .st-nav b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-nav small { color: var(--muted); font-size: 11px; } .st-nav-acc { margin-bottom: 8px; padding: 8px !important; } .st-nav-acc b { font-weight: 600; } .st-nav.active { background: var(--accent) !important; color: #fff; } .st-nav.active small { color: rgba(255,255,255,.8); } .st-ico { width: 24px; height: 24px; border-radius: 7px; flex: none; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .st-ico svg { width: 16px; height: 16px; } .st-avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 24px; color: #fff; background: linear-gradient(160deg, #a1a1a6, #636366); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } .st-avatar.sm { width: 34px; height: 34px; font-size: 13px; } .st-main { overflow: auto; padding: 4px 28px 28px; min-width: 0; } .st-title { font-size: 20px; margin: 4px 0 14px; } .st-gt { margin: 18px 0 6px 4px; font-size: 12px; font-weight: 600; color: var(--muted); } .st-group { background: rgba(127,127,127,.08); border-radius: 12px; overflow: hidden; } .st-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; min-height: 44px; } .st-row + .st-row { border-top: 1px solid var(--line); } .st-row > div:first-child { display: flex; flex-direction: column; min-width: 0; } .st-row small { color: var(--muted); font-size: 11.5px; } .st-ctl { flex: none; display: flex; align-items: center; gap: 8px; } .st-ctl select { padding: 4px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); } .st-muted { color: var(--muted); } .st-note { color: var(--muted); font-size: 12px; margin: 12px 4px; } .st-inline { display: flex; gap: 6px; } .st-inline input { width: 190px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); } .st-form { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .st-form input { padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); } .st-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .st-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .st-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; } .st-hero h2 { margin: 0; font-size: 20px; } .st-hero p { margin: 2px 0 0; color: var(--muted); } /* Interruttore */ .sw { position: relative; display: inline-block; width: 38px; height: 22px; } .sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; } .sw i { position: absolute; inset: 0; border-radius: 999px; background: rgba(127,127,127,.35); transition: background .2s; } .sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; } .sw input:checked + i { background: var(--accent); } .sw input:checked + i::after { transform: translateX(16px); } .sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; } .st-range { display: flex; align-items: center; gap: 8px; } .st-range input { width: 170px; accent-color: var(--accent); } .st-range input:disabled { opacity: .4; } .st-range output { min-width: 46px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } /* Tema */ .st-themes { display: flex; gap: 18px; padding: 4px; } .st-theme { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; } .st-thumb { width: 92px; height: 60px; border-radius: 10px; position: relative; overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: var(--wallpaper); } .st-thumb i { position: absolute; left: 12px; top: 12px; right: 18px; bottom: 10px; border-radius: 6px; background: #fff; } .st-thumb b { position: absolute; left: 12px; top: 12px; width: 30%; bottom: 10px; border-radius: 6px 0 0 6px; background: #e9e9ee; } .st-thumb.t-dark i { background: #2c2c2e; } .st-thumb.t-dark b { background: #3a3a3c; } .st-thumb.t-auto i { background: linear-gradient(90deg, #fff 50%, #2c2c2e 50%); } .st-thumb.t-auto b { background: #e9e9ee; } .st-theme.on .st-thumb { box-shadow: 0 0 0 3px var(--accent); } .st-accents { display: flex; gap: 8px; } .st-accents button { width: 20px; height: 20px; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); } .st-accents button.on { box-shadow: 0 0 0 2px var(--win-bg), 0 0 0 4px var(--c); } /* Sfondo */ .st-preview { position: relative; height: 170px; border-radius: 14px; background: var(--desk-bg, var(--wallpaper)); overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 6px 20px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; } .st-preview > span { color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; } .st-preview:hover > span, .st-preview.drop > span { opacity: 1; } .st-preview.drop { box-shadow: 0 0 0 3px var(--accent); } .st-preview-bar { position: absolute; inset: 0 0 auto 0; height: 14px; background: linear-gradient(rgba(0,0,0,.15), transparent); display: flex; justify-content: flex-end; padding: 0 10px; color: #fff; font-size: 10px; line-height: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.4); } .st-preview-dock { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 46%; height: 16px; border-radius: 6px; background: rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); } .st-preview-mb { height: 60px; } .st-preview-mb .st-preview-bar { height: 24px; line-height: 24px; font-size: 12px; } .st-walls { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } .st-walls > * { aspect-ratio: 16 / 10; border-radius: 10px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); position: relative; overflow: hidden; } .st-walls .on { box-shadow: 0 0 0 3px var(--accent); } .st-wall-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .st-wall-color span { position: absolute; left: 6px; bottom: 5px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; } .st-wall-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgba(127,127,127,.1); border: 1.5px dashed rgba(127,127,127,.45); box-shadow: none !important; } .st-wall-add span { font-size: 22px; color: var(--accent); line-height: 1; } .st-wall-add small { font-size: 11px; color: var(--muted); } .st-wall-add:hover { background: rgba(127,127,127,.18); } .st-about { text-align: center; padding: 10px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .st-about .logo { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(145deg, var(--accent), #5e5ce6); color: #fff; display: flex; align-items: center; justify-content: center; } .st-about h2 { margin: 6px 0 0; } .st-about p { margin: 0; color: var(--muted); } @media (max-width: 640px) { .st { grid-template-columns: 1fr; } .st-side { display: none; } } /* ---------- Puntatori in stile Mac ---------- */ html.cur-mac, html.cur-mac * { cursor: var(--cur-default) !important; } html.cur-mac a[href], html.cur-mac a[href] *, html.cur-mac .as-btn, html.cur-mac .as-back, html.cur-mac label.sw input, html.cur-mac .st-accents button { cursor: var(--cur-pointer) !important; } html.cur-mac input:not([type]), html.cur-mac input[type=text], html.cur-mac input[type=search], html.cur-mac input[type=email], html.cur-mac input[type=password], html.cur-mac input[type=url], html.cur-mac input[type=number], html.cur-mac textarea, html.cur-mac [contenteditable], html.cur-mac .logview, html.cur-mac .as-md p { cursor: var(--cur-text) !important; } html.cur-mac .rz-n, html.cur-mac .rz-s { cursor: var(--cur-ns) !important; } html.cur-mac .rz-e, html.cur-mac .rz-w { cursor: var(--cur-ew) !important; } html.cur-mac .rz-nw, html.cur-mac .rz-se { cursor: var(--cur-nwse) !important; } html.cur-mac .rz-ne, html.cur-mac .rz-sw { cursor: var(--cur-nesw) !important; } html.cur-mac body.resizing * { cursor: inherit !important; } .st-cursor-preview { height: 90px; gap: 10px; flex-wrap: wrap; padding: 10px; } .st-cursor-preview .cp { padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.75); color: #1d1d1f; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.15); } html.cur-mac .st-cursor-preview .cp:nth-child(1) { cursor: var(--cur-default) !important; } html.cur-mac .st-cursor-preview .cp:nth-child(2) { cursor: var(--cur-pointer) !important; } html.cur-mac .st-cursor-preview .cp:nth-child(3) { cursor: var(--cur-text) !important; } html.cur-mac .st-cursor-preview .cp:nth-child(4) { cursor: var(--cur-ew) !important; } .st-color { width: 44px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: none; } .st-cursor-preview > span.cp { opacity: 1; } .st-range input[type=range] { height: 4px; } .toast { transition: top .25s ease; } /* ---------- webX ---------- */ /* Icona originale: globo con due anelli orbitali che si incrociano formando una «X» */ .ico-webx { background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E %3Cdefs%3E %3ClinearGradient id='bg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%233b7bff'/%3E%3Cstop offset='1' stop-color='%230b2fb0'/%3E%3C/linearGradient%3E %3ClinearGradient id='gl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.2'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E %3CclipPath id='c'%3E%3Ccircle cx='50' cy='50' r='25'/%3E%3C/clipPath%3E %3CclipPath id='back'%3E%3Crect x='-20' y='-20' width='140' height='70'/%3E%3C/clipPath%3E %3CclipPath id='front'%3E%3Crect x='-20' y='50' width='140' height='70'/%3E%3C/clipPath%3E %3C/defs%3E %3Crect width='100' height='100' fill='url%28%23bg%29'/%3E%3Crect width='100' height='100' fill='url%28%23gl%29'/%3E %3Cg fill='none'%3E%3Cg transform='rotate%2835 50 50%29'%3E%3Cellipse cx='50' cy='50' rx='44' ry='12' clip-path='url%28%23back%29' stroke='%23c94f00' stroke-width='7'/%3E%3C/g%3E%3Cg transform='rotate%28-35 50 50%29'%3E%3Cellipse cx='50' cy='50' rx='44' ry='12' clip-path='url%28%23back%29' stroke='%23c94f00' stroke-width='7'/%3E%3C/g%3E%3C/g%3E %3Ccircle cx='50' cy='52' r='25' fill='%2300135a' opacity='.35'/%3E %3Ccircle cx='50' cy='50' r='25' fill='%23fff'/%3E %3Cg clip-path='url%28%23c%29' fill='none' stroke='%232a66ff' stroke-width='3.2' stroke-linecap='round'%3E %3Cellipse cx='50' cy='50' rx='10.5' ry='25'/%3E%3Cpath d='M25 50H75M27 38.5Q50 43.5 73 38.5M27 61.5Q50 56.5 73 61.5'/%3E%3C/g%3E %3Cg fill='none'%3E%3Cg transform='rotate%2835 50 50%29'%3E%3Cellipse cx='50' cy='50' rx='44' ry='12' clip-path='url%28%23front%29' stroke='%230a2a9a' stroke-width='10'/%3E%3Cellipse cx='50' cy='50' rx='44' ry='12' clip-path='url%28%23front%29' stroke='%23ff6a00' stroke-width='7'/%3E%3C/g%3E%3Cg transform='rotate%28-35 50 50%29'%3E%3Cellipse cx='50' cy='50' rx='44' ry='12' clip-path='url%28%23front%29' stroke='%230a2a9a' stroke-width='10'/%3E%3Cellipse cx='50' cy='50' rx='44' ry='12' clip-path='url%28%23front%29' stroke='%23ff6a00' stroke-width='7'/%3E%3C/g%3E%3C/g%3E %3C/svg%3E") center / 100% no-repeat, #1d4ed8; } /* webX: classe propria, «.wx» è già di Meteo */ .wbx { display: flex; flex-direction: column; height: 100%; } .wx-bar { display: flex; align-items: center; gap: 4px; padding: 6px 12px 8px; } .wx-bar > button { width: 30px; height: 30px; border-radius: 999px; font-size: 18px; line-height: 1; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; } .wx-bar > button:hover:not(:disabled) { background: rgba(127,127,127,.15); } .wx-bar > button:disabled { opacity: .3; } .wx-bar > button.on { color: #f5b400; } .wx-addr { flex: 1; position: relative; display: flex; align-items: center; margin: 0 6px; min-width: 0; } .wx-addr input { width: 100%; padding: 7px 14px 7px 30px; border-radius: 999px; border: 0; background: rgba(127,127,127,.13); color: var(--text); outline: none; text-align: center; font-size: 13px; box-shadow: inset 0 0 0 .5px rgba(127,127,127,.2); } .wx-addr input:focus { text-align: left; background: var(--win-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } .wx-lock { position: absolute; left: 11px; width: 9px; height: 7px; border-radius: 1.5px; background: var(--muted); opacity: 0; } .wx-lock::before { content: ""; position: absolute; left: 1.5px; top: -5px; width: 6px; height: 6px; border: 1.5px solid var(--muted); border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; } .wx-lock.on { opacity: .8; } .wx-load { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 40% 100%; background-repeat: no-repeat; opacity: 0; } .wx-load.on { opacity: 1; animation: wxLoad 1s linear infinite; } @keyframes wxLoad { from { background-position: -40% 0; } to { background-position: 140% 0; } } .wx-tabs { display: flex; gap: 4px; padding: 0 12px 6px; overflow-x: auto; } .wx-tab { flex: 1 1 0; min-width: 110px; max-width: 240px; display: flex; align-items: center; gap: 7px; padding: 5px 6px 5px 10px; border-radius: 9px; background: rgba(127,127,127,.08); font-size: 12px; cursor: default; } .wx-tab.on { background: rgba(127,127,127,.2); } .wx-tab img, .wx-tab .ico { width: 14px; height: 14px; border-radius: 3px; flex: none; box-shadow: none; } .wx-tab span:not(.ico) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wx-tab button { width: 18px; height: 18px; border-radius: 5px; opacity: 0; font-size: 14px; line-height: 1; cursor: pointer; flex: none; } .wx-tab:hover button, .wx-tab.on button { opacity: .7; } .wx-tab button:hover { background: rgba(127,127,127,.25); opacity: 1; } .wx-pages { flex: 1; min-height: 0; position: relative; border-top: 1px solid var(--line); } .wx-page { position: absolute; inset: 0; overflow: auto; border-radius: 0 0 var(--r-window) var(--r-window); } .wx-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; } .wx-start { max-width: 760px; margin: 0 auto; padding: 46px 24px 30px; display: flex; flex-direction: column; gap: 10px; } .wx-logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; } .wx-logo .ico { width: 56px; height: 56px; flex: none; } .wx-logo h1 { margin: 0; font-size: 38px; letter-spacing: -.02em; } .wx-search input { width: 100%; padding: 12px 20px; border-radius: 999px; border: 0; font-size: 16px; background: rgba(127,127,127,.12); color: var(--text); outline: none; box-shadow: inset 0 0 0 .5px rgba(127,127,127,.25); } .wx-search input:focus { background: var(--win-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 6px 20px rgba(0,0,0,.08); } .wx-start h3 { margin: 22px 0 4px; font-size: 15px; } .wx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; } .wx-fav { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; padding: 8px 4px; border-radius: 12px; cursor: pointer; text-align: center; overflow-wrap: anywhere; } .wx-fav:hover { background: rgba(127,127,127,.1); } .wx-fav > span { width: 56px; height: 56px; border-radius: 14px; background: var(--win-bg); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; color: var(--muted); box-shadow: 0 2px 8px rgba(0,0,0,.1), inset 0 0 0 .5px rgba(127,127,127,.25); } .wx-fav img { width: 30px; height: 30px; } .wx-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .wx-recent button { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 10px; background: rgba(127,127,127,.07); cursor: pointer; min-width: 0; } .wx-recent button:hover { background: rgba(127,127,127,.14); } .wx-recent img { width: 18px; height: 18px; grid-row: span 2; } .wx-recent span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wx-recent small { color: var(--muted); font-size: 11px; } .wx-hint { color: var(--muted); font-size: 12px; margin-top: 22px; text-align: center; } .wx-blocked { max-width: 520px; margin: 70px auto; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .wx-blocked img { width: 48px; height: 48px; border-radius: 10px; } .wx-blocked h2 { margin: 6px 0 0; font-size: 20px; } .wx-blocked p { color: var(--muted); line-height: 1.5; margin: 4px 0 8px; } .wx-blocked .wx-actions { display: flex; gap: 8px; } .wx-blocked code { margin-top: 14px; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; } html.cur-mac .wx-tab button, html.cur-mac .wx-fav, html.cur-mac .wx-recent button { cursor: var(--cur-default) !important; } /* ---------- Fase 1: finestre ---------- */ .window.off-space { display: none !important; } .window { transition: box-shadow .2s, transform .35s cubic-bezier(.2,.8,.3,1); } body.resizing .window, .window.dragging { transition: none; } .snap-preview { position: fixed; z-index: 4; border-radius: 18px; background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0,0,0,.18); pointer-events: none; transition: all .15s ease-out; } .space-hud { position: fixed; z-index: 1500; top: 44%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 20px; background: var(--lg-tint-strong); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: var(--lg-shadow); color: var(--text); } .space-hud i { width: 34px; height: 22px; border-radius: 6px; background: rgba(127,127,127,.3); } .space-hud i.on { background: var(--accent); } .space-hud span { margin-left: 8px; font-weight: 600; } /* Mission Control */ body.mc::after { content: ""; position: fixed; inset: 0; z-index: 1; background: rgba(0,0,0,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; } body.mc .window { z-index: 5 !important; box-shadow: 0 10px 30px rgba(0,0,0,.35); cursor: pointer; } body.mc .window * { pointer-events: none !important; } body.mc .window:hover { outline: 4px solid var(--accent); outline-offset: 2px; } body.mc .rz { display: none; } .mc-layer { position: fixed; inset: 0; z-index: 4; } .mc-spaces { position: absolute; top: 34px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; align-items: flex-start; } .mc-space { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.5); cursor: pointer; } .mc-space-thumb { width: 150px; height: 90px; border-radius: 10px; background: var(--desk-bg, var(--wallpaper)); box-shadow: 0 4px 14px rgba(0,0,0,.35); border: 2px solid transparent; } .mc-space.on .mc-space-thumb { border-color: #fff; } .mc-space.drop .mc-space-thumb { border-color: var(--accent); transform: scale(1.06); } .mc-space-x { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(40,40,40,.85); color: #fff; font-size: 15px; line-height: 1; opacity: 0; cursor: pointer; } .mc-space:hover .mc-space-x { opacity: 1; } .mc-add { width: 56px; height: 90px; border-radius: 10px; background: rgba(255,255,255,.18); color: #fff; font-size: 26px; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); } .mc-add:hover { background: rgba(255,255,255,.3); } .mc-label { position: absolute; display: flex; justify-content: center; align-items: center; gap: 6px; color: #fff; font-size: 13px; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; } .mc-label .ico { width: 20px; height: 20px; flex: none; } .mc-empty { position: absolute; top: 45%; width: 100%; text-align: center; color: #fff; font-size: 16px; text-shadow: 0 1px 4px rgba(0,0,0,.5); } /* Mostra scrivania */ body.show-desktop .window { transition: transform .45s cubic-bezier(.3,.7,.3,1); } /* Stage Manager */ .window.stage-thumb { cursor: pointer; box-shadow: 0 18px 40px rgba(0,0,0,.45); border-radius: 14px; } /* carosello: le finestre scorrono sull'anello con una curva morbida, anche quando tornano davanti */ body.stage .window:not(.dragging):not(.resizing) { transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s, box-shadow .3s, filter .3s; } .window.stage-thumb:hover { filter: brightness(1.12); box-shadow: 0 0 0 3px var(--accent), 0 18px 40px rgba(0,0,0,.45); } .window.stage-thumb.stage-back { filter: blur(1px) brightness(.8); } .window.stage-thumb * { pointer-events: none !important; } .window.stage-thumb .rz { display: none; } /* Passaggio tra le app */ .app-switcher { position: fixed; z-index: 1600; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 90vw; padding: 18px 18px 40px; border-radius: 26px; background: var(--lg-tint-strong); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8); box-shadow: var(--lg-shadow); } .app-switcher > div { width: 96px; height: 96px; padding: 10px; border-radius: 18px; } .app-switcher > div.on { background: rgba(127,127,127,.3); } .app-switcher .ico { width: 76px; height: 76px; } .app-switcher span { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-weight: 600; color: var(--text); } /* Centro di controllo */ .cc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cc-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.2); color: var(--text); text-align: left; cursor: pointer; box-shadow: inset 0 1px 0 var(--lg-edge-soft), inset 0 0 0 .5px var(--lg-edge-soft); font-size: 12px; } .cc-btn small { color: var(--muted); font-size: 11px; } .cc-btn.on { background: var(--accent); color: #fff; } .cc-btn.on small { color: rgba(255,255,255,.85); } :root[data-theme="dark"] .cc-btn:not(.on) { background: rgba(255,255,255,.08); } /* Angoli attivi nelle impostazioni */ .st-hot { display: grid; grid-template-columns: 1fr 1.4fr 1fr; grid-template-rows: auto auto; gap: 10px; padding: 14px; align-items: center; } .st-hot-screen { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 16/10; border-radius: 10px; background: var(--desk-bg, var(--wallpaper)); display: flex; align-items: center; justify-content: center; padding: 12px; color: #fff; font-size: 11px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px var(--line); } .st-hot label { display: flex; flex-direction: column; gap: 4px; } .st-hot label small { color: var(--muted); font-size: 11px; } .st-hot label select { width: 100%; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); } .st-hot-tl { grid-column: 1; grid-row: 1; } .st-hot-bl { grid-column: 1; grid-row: 2; } .st-hot-tr { grid-column: 3; grid-row: 1; } .st-hot-br { grid-column: 3; grid-row: 2; } .kbd { font: 12px ui-monospace, Menlo, monospace; padding: 2px 8px; border-radius: 6px; background: rgba(127,127,127,.15); box-shadow: inset 0 -1px 0 rgba(127,127,127,.3); white-space: nowrap; } /* In Mission Control le finestre stanno sopra lo strato delle scrivanie (che resta cliccabile ai lati) */ body.mc .desktop { z-index: 5; pointer-events: none; } body.mc .desktop .window { pointer-events: auto; } body.mc .desktop-icons { opacity: 0; } .mc-layer .mc-label { z-index: 6; } .mc-label .ico, .app-switcher .ico { padding: 0 !important; font-size: 0; min-height: 0; } .mc-label .ico { height: 20px !important; } .app-switcher .ico { height: 76px !important; } /* ---------- Fase 2: notifiche ---------- */ .toast { display: flex; flex-direction: column; gap: 2px; min-width: 240px; } .toast small { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .menu-clock { cursor: default; border-radius: 999px; } .menu-clock:hover { background: var(--lg-hover); } .nc { position: fixed; z-index: 1002; top: 34px; right: 8px; bottom: 8px; width: 360px; max-width: calc(100vw - 16px); overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; border-radius: 26px; background: var(--lg-tint); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8); box-shadow: inset 0 1px 0 var(--lg-edge), inset 0 0 0 .5px var(--lg-edge-soft), var(--lg-shadow); color: var(--text); animation: ncIn .3s cubic-bezier(.2,.9,.3,1); } @keyframes ncIn { from { transform: translateX(110%); } } .nc-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; } .nc-head > div { display: flex; flex-direction: column; } .nc-head strong { font-size: 18px; text-transform: capitalize; } .nc-head span { color: var(--muted); } .nc-dnd { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(127,127,127,.15); cursor: pointer; font-size: 12px; font-weight: 600; } .nc-dnd.on { background: #5e5ce6; color: #fff; } .nc-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .nc-w { border-radius: 20px; padding: 12px; background: rgba(255,255,255,.35); box-shadow: inset 0 1px 0 var(--lg-edge-soft), inset 0 0 0 .5px var(--lg-edge-soft); min-width: 0; } :root[data-theme="dark"] .nc-w { background: rgba(255,255,255,.07); } .nc-clock { display: flex; flex-direction: column; justify-content: center; } .nc-clock span { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; } .nc-clock small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; } .nc-cal strong { text-transform: capitalize; color: #ff3b30; font-size: 12px; } .nc-cal > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-top: 4px; font-size: 9.5px; text-align: center; font-variant-numeric: tabular-nums; } .nc-cal b { color: var(--muted); font-weight: 600; } .nc-cal i { font-style: normal; padding: 1px 0; border-radius: 50%; } .nc-cal i.today { background: #ff3b30; color: #fff; font-weight: 700; } .nc-notes { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; } .nc-notes strong { color: #c99400; font-size: 12px; } .nc-notes button { text-align: left; padding: 4px 0; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .nc-notes button:first-child { border-top: 0; } .nc-list-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 0; } .nc-list-head button { color: var(--accent); font-size: 12px; cursor: pointer; } .nc-list { display: flex; flex-direction: column; gap: 8px; } .nc-item { position: relative; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.4); box-shadow: inset 0 0 0 .5px var(--lg-edge-soft); } :root[data-theme="dark"] .nc-item { background: rgba(255,255,255,.08); } .nc-item > div { display: flex; justify-content: space-between; } .nc-item small { font-size: 11px; color: var(--muted); font-weight: 600; } .nc-item p { margin: 2px 0 0; overflow-wrap: anywhere; } .nc-item button { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--win-bg); box-shadow: 0 1px 4px rgba(0,0,0,.2); opacity: 0; cursor: pointer; } .nc-item:hover button { opacity: 1; } .nc-empty { text-align: center; color: var(--muted); padding: 20px 0; } #dndIcon { color: inherit; } /* Salvaschermo */ .saver { position: fixed; inset: 0; z-index: 4000; background: #000; cursor: none !important; } .saver * { cursor: none !important; } .saver canvas { width: 100%; height: 100%; display: block; } .saver-clock { position: absolute; display: flex; flex-direction: column; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.4); pointer-events: none; } .saver-clock b { font-size: clamp(60px, 11vw, 150px); font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; } .saver-clock span { font-size: 20px; opacity: .8; text-transform: capitalize; margin-left: 6px; } .st-saver-prev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 6px; } .st-saver-prev button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; } .st-saver-prev span { width: 100%; aspect-ratio: 16/10; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); } .st-saver-prev .on span { box-shadow: 0 0 0 3px var(--accent); } .sv-orologio { background: #000 radial-gradient(circle at 40% 45%, transparent 0 0) !important; position: relative; } .sv-orologio::after { content: "21:45"; position: relative; top: 30%; display: block; text-align: center; color: #fff; font-size: 22px; font-weight: 200; } .sv-aurora { background: radial-gradient(60% 70% at 25% 30%, #2bd4c0aa, transparent 70%), radial-gradient(60% 70% at 75% 60%, #8b5cf6aa, transparent 70%), radial-gradient(50% 60% at 50% 90%, #f472b6aa, transparent 70%), #05070f; } .sv-bolle { background: radial-gradient(circle at 30% 40%, transparent 0 14px, #9fd8ff66 15px 17px, transparent 18px), radial-gradient(circle at 70% 60%, transparent 0 20px, #c4b5fd66 21px 23px, transparent 24px), radial-gradient(circle at 55% 25%, transparent 0 8px, #fbcfe866 9px 10px, transparent 11px), #05070f; } /* Spotlight con gruppi */ .sp-group { padding: 8px 18px 2px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } #spotlightResults { max-height: 60vh; overflow: auto; } #spotlightResults button { min-height: 40px; } .sp-txt { display: flex; flex-direction: column; min-width: 0; } .sp-txt b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-txt small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #spotlightResults button.hl .sp-txt small { color: rgba(255,255,255,.8); } /* Tastiera e utenti nelle impostazioni */ .st-key { cursor: pointer; min-width: 90px; text-align: center; } .st-key.custom { box-shadow: inset 0 0 0 1.5px var(--accent); } .st-key.rec { background: var(--accent); color: #fff; animation: keyPulse 1s infinite; } @keyframes keyPulse { 50% { opacity: .6; } } .st-user { display: flex; align-items: center; gap: 10px; } .st-user > span:last-child { display: flex; flex-direction: column; } .st-user small { color: var(--muted); font-size: 11.5px; } /* ---------- Fase 3: file ---------- */ /* Icone dei tipi di file */ .ico-video { background: linear-gradient(160deg, #3a3a3c, #1c1c1e); } .ico-video::before { content: ""; position: absolute; left: 38%; top: 30%; border-style: solid; border-width: 20% 0 20% 30%; border-color: transparent transparent transparent #fff; } .ico-audio { background: linear-gradient(160deg, #ff5e7e, #d6265b); } .ico-audio::before { content: "♪"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6em; font-weight: 700; } .ico-zip { background: linear-gradient(160deg, #d9d9de, #a8a8b0); } .ico-zip::before { content: ""; position: absolute; left: 44%; width: 12%; top: 10%; bottom: 30%; background: repeating-linear-gradient(#555 0 3px, #eee 3px 6px); border-radius: 2px; } .ico-sheet { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .ico-sheet::before { content: ""; position: absolute; inset: 22% 18%; background: linear-gradient(#1d8f4e, #1d8f4e) 0 0 / 100% 22% no-repeat, repeating-linear-gradient(90deg, #cfe9d9 0 1.5px, transparent 1.5px 33%), repeating-linear-gradient(#cfe9d9 0 1.5px, transparent 1.5px 25%); } .ico-slides { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .ico-slides::before { content: ""; position: absolute; inset: 28% 14%; border-radius: 3px; background: linear-gradient(135deg, #ff9500, #ff5e3a); } .ico-word { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .ico-word::before { content: ""; position: absolute; inset: 20% 18%; background: linear-gradient(#2b6fd6, #2b6fd6) 0 0 / 60% 12% no-repeat, repeating-linear-gradient(#c7c7cc 0 2px, transparent 2px 7px) 0 30% / 100% 70% no-repeat; } .ico-desk { background: linear-gradient(160deg, #5ac8fa, #0a84ff); } .ico-desk::before { content: ""; position: absolute; inset: 24% 16% 34%; border: 2px solid #fff; border-radius: 3px; } .ico-desk::after { content: ""; position: absolute; left: 35%; right: 35%; bottom: 20%; height: 8%; background: #fff; border-radius: 2px; } .ico-shared { background: linear-gradient(160deg, #7cc4ff, #3a9bf0); } .ico-shared::before { content: ""; position: absolute; left: 22%; top: 26%; width: 26%; height: 26%; border-radius: 50%; background: #fff; box-shadow: 30% 0 0 #fff; } .ico-shared::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 18%; height: 26%; border-radius: 40% 40% 10% 10%; background: #fff; } .ico-link { background: linear-gradient(160deg, #8e8e93, #636366); } .ico-link::before { content: "🔗"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8em; filter: grayscale(1) brightness(3); } .ico-thumb { background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px; } .ico-thumb img { width: 100%; height: 100%; object-fit: cover; } .ico-trash.full::before { background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 7px), radial-gradient(circle at 50% 18%, #fff 0 18%, transparent 19%), radial-gradient(circle at 35% 28%, #f2f2f2 0 14%, transparent 15%); } .ico-trash.full::after { content: ""; position: absolute; left: 30%; right: 30%; top: 8%; height: 18%; border-radius: 40% 40% 20% 20%; background: #f5f5f5; box-shadow: 0 1px 2px rgba(0,0,0,.25); transform: rotate(-8deg); } .dock-item.drop .ico { transform: scale(1.12); box-shadow: 0 0 0 3px var(--accent); } /* Finder */ .fx .fx-side button { gap: 8px; } .fx-si { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; } .fx-si .ico { width: 16px; height: 16px; border-radius: 4px; box-shadow: none; } .fx-tag { width: 11px; height: 11px; border-radius: 50%; } .fx-count { margin-left: auto; color: var(--muted); font-size: 11px; } .fx-side button.drop, .crumbs button.drop { background: color-mix(in srgb, var(--accent) 30%, transparent) !important; } .fx-views { flex: none; } .fx-views button { padding: 3px 10px !important; font-size: 14px; background: none !important; box-shadow: none !important; } .fx-views button.on { background: var(--win-bg) !important; box-shadow: 0 1px 2px rgba(0,0,0,.2) !important; } .crumbs b { font-weight: 600; } .fview { flex: 1; min-height: 0; overflow: auto; position: relative; outline: none; } .fview.v-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; align-content: start; padding: 14px; } .fview.drop { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 2px var(--accent); } .file { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border-radius: 10px; text-align: center; font-size: 12px; position: relative; user-select: none; } .file .ico { width: 54px; height: 54px; } .file .fname { word-break: break-word; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 1px 5px; border-radius: 4px; } .file.sel { background: rgba(127,127,127,.18); } .file.sel .fname { background: var(--accent); color: #fff; } .file.drop, .frow.drop, .fcrow.drop { background: color-mix(in srgb, var(--accent) 30%, transparent) !important; } .tagdots { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; } .tagdots i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px var(--win-bg); } .rubber { position: absolute; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 3px; pointer-events: none; z-index: 2; } /* Elenco */ .fview.v-list { padding: 0 10px 10px; } .frow { display: grid; grid-template-columns: minmax(180px, 2.4fr) 1.4fr 1fr 1.2fr; gap: 10px; align-items: center; padding: 3px 10px; border-radius: 6px; font-size: 12.5px; user-select: none; } .frow:nth-child(odd):not(.fhead):not(.sel) { background: rgba(127,127,127,.05); } .frow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); } .frow .frow-name { color: var(--text); display: flex; align-items: center; gap: 7px; } .frow-name .ico { width: 18px; height: 18px; flex: none; border-radius: 4px; } .frow-name > span:not(.ico):not(.tagdots) { overflow: hidden; text-overflow: ellipsis; } .frow.sel { background: var(--accent) !important; } .frow.sel > span, .frow.sel .frow-name { color: #fff; } .fhead { position: sticky; top: 0; z-index: 1; background: var(--win-bg); border-bottom: 1px solid var(--line); border-radius: 0; font-weight: 600; margin-bottom: 2px; } .fhead span { color: var(--muted); cursor: default; font-size: 11.5px; } .fhead span[data-sort]:hover, .fhead span.on { color: var(--text); } /* Colonne */ .fview.v-columns { overflow: hidden; } .fcols { display: flex; height: 100%; overflow-x: auto; } .fcol { flex: none; width: 220px; overflow-y: auto; border-right: 1px solid var(--line); padding: 4px; } .fcrow { display: flex; align-items: center; gap: 7px; padding: 3px 8px; border-radius: 6px; font-size: 12.5px; white-space: nowrap; user-select: none; } .fcrow .ico { width: 16px; height: 16px; flex: none; border-radius: 3px; } .fcrow > span:not(.ico):not(.tagdots) { flex: 1; overflow: hidden; text-overflow: ellipsis; } .fcrow b { color: var(--muted); font-weight: 400; } .fcrow.open { background: rgba(127,127,127,.2); } .fcrow.sel { background: var(--accent); color: #fff; } .fcrow.sel b { color: #fff; } .fcol-empty { color: var(--muted); font-size: 12px; text-align: center; margin-top: 20px; } .fprev { width: 260px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 14px; text-align: center; } .fprev img { max-width: 100%; max-height: 180px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.15); } .fprev .ico { width: 96px; height: 96px; } .fprev b { overflow-wrap: anywhere; } .fprev span { color: var(--muted); font-size: 12px; } /* Quick Look */ .ql { position: fixed; inset: 0; z-index: 1800; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.15); } .ql-panel { width: min(900px, 92vw); height: min(640px, 82vh); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--lg-tint-strong); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8); box-shadow: 0 30px 80px rgba(0,0,0,.4), inset 0 1px 0 var(--lg-edge-soft); animation: lgPop .22s cubic-bezier(.2,1.1,.3,1); } .ql-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); } .ql-bar span { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .ql-bar small { color: var(--muted); } .ql-bar button { width: 26px; height: 26px; border-radius: 50%; background: rgba(127,127,127,.2); font-size: 16px; line-height: 1; cursor: pointer; } .ql-bar .btn { text-decoration: none; color: var(--text); font-size: 12px; } .ql-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.04); } .ql-body img, .ql-body video { max-width: 100%; max-height: 100%; object-fit: contain; } .ql-body iframe { width: 100%; height: 100%; border: 0; background: #fff; } .ql-text { margin: 0; width: 100%; height: 100%; overflow: auto; padding: 16px 20px; font: 12.5px/1.55 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; background: var(--win-bg); user-select: text; } .ql-info, .ql-audio { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); } .ql-info .ico, .ql-audio .ico { width: 120px; height: 120px; margin-bottom: 8px; } .ql-info b { color: var(--text); font-size: 16px; } /* Scrivania: file e pile */ .desktop-icons { flex-wrap: wrap; flex-direction: column; align-content: flex-start; max-height: calc(100vh - var(--dock-size, 54px) - 80px); direction: rtl; } .desktop-icons > * { direction: ltr; } .desk-file.sel, .desk-stack.open { background: rgba(255,255,255,.25); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4); } .desk-file.in-stack { background: rgba(0,0,0,.12); } .desk-file.drop { background: color-mix(in srgb, var(--accent) 45%, transparent); } .desk-file .tagdots { margin: 0; } .desk-icon > span:nth-child(2) { max-width: 86px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: center; line-height: 1.25; } .stack-icons { position: relative; width: 56px; height: 56px; } .stack-icons .ico { position: absolute; width: 46px; height: 46px; } .stack-icons .ico:nth-child(1) { left: 0; top: 8px; transform: rotate(-8deg); } .stack-icons .ico:nth-child(2) { left: 5px; top: 4px; transform: rotate(4deg); } .stack-icons .ico:nth-child(3) { left: 10px; top: 0; } html.cur-mac .file, html.cur-mac .frow, html.cur-mac .fcrow { cursor: var(--cur-default) !important; } /* ---------- Aggiornamento software ---------- */ .toast.has-actions { min-width: 300px; } .toast-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; } .toast-acts button { padding: 4px 12px; border-radius: 999px; background: rgba(127,127,127,.18); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text); } .toast-acts button.primary { background: var(--accent); color: #fff; } .dock-item.badge::after { content: "1"; opacity: 1; bottom: auto; top: -4px; left: auto; right: -4px; transform: none; width: 18px; height: 18px; padding: 0; border-radius: 50%; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); backdrop-filter: none; } .dock-item.badge:hover::after { content: "1"; } .upd-hero { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 14px; background: rgba(127,127,127,.08); } .upd-hero.avail { background: color-mix(in srgb, var(--accent) 12%, transparent); } .upd-logo { width: 60px; height: 60px; border-radius: 15px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, var(--accent), #5e5ce6); } .upd-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .upd-txt span { color: var(--muted); font-size: 12px; } .upd-err { color: #ff3b30 !important; } .upd-acts { display: flex; flex-direction: column; gap: 6px; } .upd-notes { padding: 6px 16px; } .upd-overlay { position: fixed; inset: 0; z-index: 5000; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; } .upd-overlay > div { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(360px, 80vw); text-align: center; } .upd-overlay b { font-size: 17px; font-weight: 500; } .upd-overlay span { color: #aaa; font-size: 13px; min-height: 1.4em; } .upd-bar { width: 100%; height: 5px; border-radius: 3px; background: #333; overflow: hidden; } .upd-bar i { display: block; height: 100%; width: 2%; background: #fff; transition: width .5s; } .about-acts { display: flex; gap: 8px; margin-top: 14px; } /* ---------- 4A: scrivania a posizionamento libero ---------- */ .desktop-icons { position: absolute; inset: 0; display: block; max-height: none; direction: ltr; pointer-events: none; } .desktop-icons .desk-icon { position: absolute; width: 96px; pointer-events: auto; touch-action: none; transition: left .18s ease, top .18s ease; } .desktop-icons .desk-icon.dragging { transition: none; opacity: .85; z-index: 3; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); } .desktop-icons .desk-icon.sel { background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.45); } .desktop-icons .desk-icon.drop { background: color-mix(in srgb, var(--accent) 45%, transparent); } .window .fview.drop, .window [data-drop-path].drop { box-shadow: inset 0 0 0 2px var(--accent); } /* ---------- Icone delle nuove app ---------- */ .ico-reminders { background: #fff; } .ico-reminders::before { content: ""; position: absolute; left: 18%; top: 20%; width: 15%; height: 15%; border-radius: 50%; background: #0a84ff; box-shadow: 0 1.35em 0 #ff9500, 0 2.7em 0 #ff3b30; font-size: 10%; } .ico-reminders::after { content: ""; position: absolute; left: 42%; right: 16%; top: 24%; height: 7%; border-radius: 4px; background: #d1d1d6; box-shadow: 0 1.35em 0 #d1d1d6, 0 2.7em 0 #d1d1d6; font-size: 10%; } .dock-item .ico-reminders::before, .lp-grid .ico-reminders::before { box-shadow: 0 13px 0 #ff9500, 0 26px 0 #ff3b30; font-size: inherit; } .dock-item .ico-reminders::after, .lp-grid .ico-reminders::after { box-shadow: 0 13px 0 #d1d1d6, 0 26px 0 #d1d1d6; font-size: inherit; } .ico-contacts { background: linear-gradient(90deg, #8b6a4f 0 14%, #e9dcc6 14%); } .ico-contacts::before { content: ""; position: absolute; left: 40%; top: 22%; width: 30%; height: 30%; border-radius: 50%; background: #8e8e93; } .ico-contacts::after { content: ""; position: absolute; left: 30%; right: 12%; bottom: 18%; height: 26%; border-radius: 50% 50% 12% 12%; background: #8e8e93; } .ico-textedit { background: linear-gradient(#fff, #f3f3f3); } .ico-textedit::before { content: ""; position: absolute; inset: 18% 22% 22% 18%; background: repeating-linear-gradient(#c7c7cc 0 2px, transparent 2px 8px); } .ico-textedit::after { content: ""; position: absolute; right: 14%; bottom: 14%; width: 14%; height: 56%; border-radius: 2px; background: linear-gradient(#ffcc00 0 70%, #444 70%); transform: rotate(35deg); transform-origin: bottom; } /* ---------- TextEdit ---------- */ .te { display: flex; flex-direction: column; height: 100%; } .te-bar { display: flex; align-items: center; gap: 10px; padding: 6px 14px 8px; } .te-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; } .te-mode button.on { background: var(--win-bg); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .te-body { flex: 1; min-height: 0; display: grid; border-top: 1px solid var(--line); } .te-body textarea { border: 0; resize: none; outline: none; padding: 18px 22px; background: var(--win-bg); color: var(--text); line-height: 1.6; tab-size: 4; overflow: auto; } .te-prev { overflow: auto; padding: 14px 24px; border-left: 1px solid var(--line); } .te-body.m-edit { grid-template-columns: 1fr; } .te-body.m-edit .te-prev { display: none; } .te-body.m-split { grid-template-columns: 1fr 1fr; } .te-body.m-preview { grid-template-columns: 1fr; } .te-body.m-preview textarea { display: none; } .te-body.m-preview .te-prev { border: 0; } .te-status { padding: 4px 14px 8px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); } /* ---------- Promemoria ---------- */ /* Usate anche da Calendario e Foto */ .rm-add-list { color: var(--accent); margin-top: 8px; } .rm-empty { color: var(--muted); text-align: center; padding: 40px 0; } /* To Do (ex Promemoria) */ .td { display: grid; grid-template-columns: 230px minmax(0, 1fr); height: 100%; } .td.has-detail { grid-template-columns: 230px minmax(0, 1fr) 320px; } .td-side { overflow: auto; } .td-side button small { margin-left: auto; color: var(--muted); } .td-side hr { border: 0; border-top: 1px solid var(--line); margin: 8px 4px; } .td-ic { width: 22px; text-align: center; flex: none; } .td-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; margin: 0 5px; } .td-add-list { color: var(--accent); margin-top: 6px; } .td-main { overflow: auto; padding: 14px 26px 30px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .td-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .td-head h2 { font-size: 26px; margin: 0; color: var(--tc); } .td-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; } .td-head p::first-letter { text-transform: uppercase; } .td-tips-btn { border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; cursor: pointer; background: none; color: var(--text); white-space: nowrap; } .td-tips-btn.on { background: var(--tc); border-color: var(--tc); color: #fff; } .td-tips { border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px; } .td-tip { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .td-tip + .td-tip { border-top: 1px solid var(--line); } .td-tip span { flex: 1; display: flex; flex-direction: column; } .td-tip small { color: var(--muted); font-size: 12px; } .td-tip small.late { color: #e5484d; } .td-tip button { border: 0; background: none; color: var(--tc); font-size: 20px; cursor: pointer; } .td-new { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 9px 14px; background: color-mix(in srgb, var(--tc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 25%, transparent); } .td-new span { color: var(--tc); font-size: 20px; line-height: 1; } .td-new input { flex: 1; border: 0; background: none; outline: none; color: var(--text); font: inherit; font-size: 14px; } .td-list { display: flex; flex-direction: column; gap: 4px; } .td-group { margin: 10px 0 2px; font-size: 13px; color: var(--muted); } .td-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; background: color-mix(in srgb, var(--text) 4%, transparent); cursor: pointer; } .td-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } .td-item.sel { background: color-mix(in srgb, var(--tc, var(--accent)) 16%, transparent); } .td-check { width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid var(--muted); flex: none; cursor: pointer; background: none; padding: 0; position: relative; } .td-check:hover::after, .done > .td-check::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--muted); } .done > .td-check { background: var(--c, #5b8def); border-color: var(--c, #5b8def); } .done > .td-check::after { color: #fff; } .td-check.small { width: 16px; height: 16px; } .td-check.small::after { font-size: 10px; } .td-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .td-text span { overflow-wrap: anywhere; } .td-text small { color: var(--muted); font-size: 12px; } .td-text small .late { color: #e5484d; } .td-item.done .td-text span { text-decoration: line-through; color: var(--muted); } .td-star { border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 2px; } .td-star.on { color: #d6457a; } .td-done-toggle { align-self: flex-start; margin: 10px 0 4px; border: 0; border-radius: 6px; padding: 4px 8px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); cursor: pointer; } .td-empty { color: var(--muted); text-align: center; padding: 40px 10px; } .td-detail { overflow: auto; border-left: 1px solid var(--line); padding: 38px 14px 10px; display: flex; flex-direction: column; gap: 10px; position: relative; background: color-mix(in srgb, var(--text) 3%, transparent); } .td-close { position: absolute; top: 8px; right: 10px; border: 0; background: none; color: var(--muted); font-size: 15px; cursor: pointer; } .td-dtitle { cursor: default; align-items: flex-start; } .td-dtitle .td-check { margin-top: 4px; } .td-dtitle textarea { flex: 1; resize: none; border: 0; background: none; outline: none; color: var(--text); font: inherit; font-size: 17px; font-weight: 600; overflow: hidden; } .td-steps { display: flex; flex-direction: column; gap: 2px; padding-left: 4px; } .td-step { display: flex; align-items: center; gap: 8px; } .td-step input { flex: 1; border: 0; background: none; outline: none; color: var(--text); font: inherit; padding: 5px 0; } .td-step.done input { text-decoration: line-through; color: var(--muted); } .td-x { border: 0; background: none; color: var(--muted); cursor: pointer; opacity: 0; } .td-step:hover .td-x { opacity: 1; } .td-addstep { border: 0; background: none; outline: none; color: var(--accent); font: inherit; padding: 6px 0; } .td-addstep:focus { color: var(--text); } .td-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--win-bg); color: var(--text); font: inherit; text-align: left; } button.td-card { cursor: pointer; } button.td-card.on { color: var(--accent); } .td-fields { display: flex; flex-direction: column; gap: 8px; } .td-fields label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; } .td-fields input, .td-fields select { font: inherit; font-size: 13px; color: var(--text); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; max-width: 150px; } .td-notes { min-height: 90px; resize: vertical; outline: none; } .td-detail footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); padding-top: 8px; } .td-detail footer button { border: 0; background: none; cursor: pointer; font-size: 16px; } /* ---------- Calendario ---------- */ .cal2 { display: grid; grid-template-columns: 200px 1fr; height: 100%; } .cal2-side { overflow: auto; } .cal2-cal { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; cursor: default; } .cal2-cal:hover { background: rgba(127,127,127,.1); } .cal2-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .cal2-bar { display: flex; align-items: center; gap: 12px; padding: 6px 16px 10px; flex-wrap: wrap; } .cal2-bar h2 { margin: 0; flex: 1; font-size: 22px; text-transform: capitalize; min-width: 180px; } .cal2-bar .seg button.on { background: var(--win-bg); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .cal2-nav { display: flex; gap: 4px; } .cal2-view { flex: 1; min-height: 0; overflow: hidden; border-top: 1px solid var(--line); } .cm { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto repeat(6, 1fr); height: 100%; } .cm-dow { padding: 6px 8px; text-align: right; font-size: 11px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); } .cm-day { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; min-height: 0; } .cm-day.other { background: rgba(127,127,127,.05); } .cm-day.other .cm-n { color: var(--muted); } .cm-n { align-self: flex-end; font-size: 13px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-variant-numeric: tabular-nums; } .cm-day.today .cm-n { background: #ff3b30; color: #fff; font-weight: 700; } .cm-ev { font-size: 11.5px; padding: 1px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; display: flex; align-items: center; gap: 4px; } .cm-ev i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; } .cm-ev.allday { background: color-mix(in srgb, var(--c) 85%, transparent); color: #fff; } .cm-ev:hover { background: color-mix(in srgb, var(--c) 20%, transparent); } .cm-ev.allday:hover { background: var(--c); } .cm-more { font-size: 11px; color: var(--muted); padding-left: 6px; cursor: pointer; } .ct { display: grid; grid-template-rows: auto auto 1fr; height: 100%; } .ct-head, .ct-allday { display: grid; grid-template-columns: 56px repeat(var(--days), 1fr); border-bottom: 1px solid var(--line); } .ct-head > div { padding: 6px; text-align: center; display: flex; gap: 6px; justify-content: center; align-items: baseline; } .ct-head span { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 600; } .ct-head b { font-size: 18px; font-weight: 500; } .ct-head .today b { background: #ff3b30; color: #fff; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; } .ct-allday > div:first-child { font-size: 10px; color: var(--muted); padding: 4px; text-align: right; } .ct-allday-cell { border-left: 1px solid var(--line); padding: 2px; display: flex; flex-direction: column; gap: 2px; min-height: 22px; } .ct-scroll { overflow: auto; min-height: 0; } .ct-grid { display: grid; grid-template-columns: 56px repeat(var(--days), 1fr); position: relative; } .ct-hours > div { position: relative; border-bottom: 1px solid transparent; } .ct-hours span { position: absolute; top: -7px; right: 6px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; } .ct-col { position: relative; border-left: 1px solid var(--line); background: repeating-linear-gradient(transparent 0 45px, var(--line) 45px 46px); min-height: calc(46px * 24); } .ct-col.today { background-color: color-mix(in srgb, #ff3b30 4%, transparent); } .ct-ev { position: absolute; padding: 3px 6px; border-radius: 6px; overflow: hidden; font-size: 11.5px; background: color-mix(in srgb, var(--c) 22%, var(--win-bg)); border-left: 3px solid var(--c); display: flex; flex-direction: column; box-sizing: border-box; cursor: default; } .ct-ev b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-ev span { color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-now { position: absolute; left: 0; right: 0; height: 2px; background: #ff3b30; z-index: 2; } .ct-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; } /* ---------- Contatti ---------- */ .ctapp { display: grid; grid-template-columns: 190px 260px 1fr; height: 100%; } .ct-side { overflow: auto; } .ct-side button small { margin-left: auto; color: var(--muted); } .ct-side-btn { display: flex; padding: 4px 8px; border-radius: 6px; color: var(--accent); cursor: pointer; font-size: 13px; } .ct-side-btn:hover { background: rgba(127,127,127,.1); } .ct-list { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; } .ct-search { display: flex; gap: 6px; padding: 8px 10px; } .ct-search input { flex: 1; min-width: 0; padding: 5px 12px; border-radius: 999px; border: 0; background: rgba(127,127,127,.14); color: var(--text); outline: none; } .ct-items { overflow: auto; flex: 1; } .ct-letter { padding: 6px 14px 2px; font-size: 12px; font-weight: 700; color: var(--muted); } .ct-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 14px; text-align: left; } .ct-item span:last-child { display: flex; flex-direction: column; min-width: 0; } .ct-item b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-item small { color: var(--muted); font-size: 11px; } .ct-item.sel { background: var(--accent); color: #fff; } .ct-item.sel small { color: rgba(255,255,255,.8); } .ct-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; overflow: hidden; background: linear-gradient(160deg, #a1a1a6, #636366); } .ct-av.big { width: 84px; height: 84px; font-size: 30px; } .ct-av img { width: 100%; height: 100%; object-fit: cover; } .ct-detail { overflow: auto; min-width: 0; } .ctc-empty { color: var(--muted); text-align: center; padding: 60px 30px; line-height: 1.6; } .ctc { padding: 24px 32px; } .ctc-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .ctc-head h2 { margin: 6px 0 0; font-size: 22px; } .ctc-head p { margin: 0; color: var(--muted); } .ctc-fav { color: #ff9500; } .ctc-quick { display: flex; gap: 8px; margin-top: 6px; } .ctc-quick a { text-decoration: none; color: var(--text); } .ctc-fields { padding: 10px 0; } .ctc-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .ctc-row small { color: var(--muted); text-align: right; font-size: 12px; } .ctc-row a { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; } .ctc-map { font-size: 12px; color: var(--accent); cursor: pointer; padding: 0; } .ctc-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .ctf { padding: 20px 28px; display: flex; flex-direction: column; gap: 12px; } .ctf-photo { display: flex; align-items: center; gap: 14px; } .ctf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ctf input, .ctf textarea, .ctf select { padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); font: inherit; min-width: 0; } .ctf label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } .ctf-multi { display: flex; flex-direction: column; gap: 6px; } .ctf-multi > small { color: var(--muted); font-size: 12px; font-weight: 600; } .ctf-row { display: grid; grid-template-columns: 110px 1fr 28px; gap: 6px; align-items: start; } .ctf-del { width: 26px; height: 26px; border-radius: 50%; background: #ff3b30; color: #fff; font-weight: 700; cursor: pointer; } .ctf-add { align-self: flex-start; color: var(--accent); font-size: 12px; cursor: pointer; } .sheet textarea { width: 100%; padding: 6px 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); font: inherit; resize: vertical; } .sheet .acts [data-extra].danger { background: transparent; color: #ff3b30; box-shadow: inset 0 0 0 1px rgba(255,59,48,.4); } /* ---------- Dock personalizzabile ---------- */ .dock-day { font-weight: 400; } .dock.dragging .dock-item { transition: width .18s, height .18s, margin .18s; } .dock-item.dock-placeholder { opacity: .25; } .dock-item.dock-placeholder.collapsed { width: 0 !important; margin: 0 -2px; opacity: 0; overflow: hidden; } .dock-ghost { position: fixed; z-index: 2500; pointer-events: none; transition: opacity .15s; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); } .dock-ghost .ico { width: 100%; height: 100%; } .dock-ghost em { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--lg-tint-strong); color: var(--text); white-space: nowrap; opacity: 0; box-shadow: var(--lg-shadow); } .dock-ghost.remove { opacity: .65; } .dock-ghost.remove em { opacity: 1; } .dock.drop-stack [data-sep="stack"] { width: 3px; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .dock-item.drop .ico { transform: scale(1.12); box-shadow: 0 0 0 3px var(--accent); } .poof { position: fixed; z-index: 2600; width: 60px; height: 60px; margin: -30px 0 0 -30px; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0 20%, rgba(255,255,255,.6) 35%, transparent 65%); animation: poof .55s ease-out forwards; } @keyframes poof { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } } .dock-pop { position: fixed; z-index: 1300; width: 320px; max-height: 60vh; display: flex; flex-direction: column; border-radius: 20px; padding: 10px; background: var(--lg-tint-strong); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8); box-shadow: inset 0 1px 0 var(--lg-edge-soft), var(--lg-shadow); color: var(--text); animation: lgPop .22s cubic-bezier(.2,1.1,.3,1); } .dock-pop-head { text-align: center; padding: 2px 0 8px; } .dock-pop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; overflow: auto; } .dock-pop-grid > small { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 16px 0; } .dock-pop-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 10px; font-size: 11px; cursor: pointer; min-width: 0; } .dock-pop-grid button:hover { background: rgba(127,127,127,.18); } .dock-pop-grid .ico { width: 44px; height: 44px; } .dock-pop-grid span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dock-pop-open { margin-top: 8px; color: var(--accent); font-weight: 600; cursor: pointer; padding: 4px; } html.cur-mac .dock-pop-grid button, html.cur-mac .dock-pop-open { cursor: var(--cur-default) !important; } /* ---------- 4B: icone ---------- */ .ico-photos { background: #fff; } .ico-photos::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: conic-gradient(from 0deg, #ffcc00 0 45deg, #ff9500 45deg 90deg, #ff3b30 90deg 135deg, #af52de 135deg 180deg, #5856d6 180deg 225deg, #0a84ff 225deg 270deg, #34c759 270deg 315deg, #a8e063 315deg 360deg); -webkit-mask: radial-gradient(circle, transparent 16%, #000 17%); mask: radial-gradient(circle, transparent 16%, #000 17%); opacity: .9; } .ico-music { background: linear-gradient(160deg, #fb5c74, #fa233b); } .ico-music::before { content: "♫"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.9em; font-weight: 700; } .dock-item .ico-music::before, .lp-grid .ico-music::before, .app-switcher .ico-music::before { font-size: 30px; } .ico-preview { background: linear-gradient(160deg, #e8f4ff, #b9dbff); } .ico-preview::before { content: ""; position: absolute; inset: 20% 24% 16% 20%; border-radius: 4px; background: linear-gradient(160deg, #6ac3ff 0 55%, #48b06a 55%); box-shadow: 4px 4px 0 rgba(0,0,0,.12); } .ico-preview::after { content: ""; position: absolute; right: 14%; bottom: 12%; width: 30%; height: 30%; border-radius: 50%; border: 3px solid #555; background: rgba(255,255,255,.5); } /* ---------- Foto ---------- */ .ph { display: grid; grid-template-columns: 210px 1fr; height: 100%; position: relative; } .ph-side button small { margin-left: auto; color: var(--muted); } .ph-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .ph-main.drop { box-shadow: inset 0 0 0 3px var(--accent); } .ph-bar { display: flex; align-items: center; gap: 12px; padding: 6px 18px 10px; } .ph-bar h2 { margin: 0; font-size: 22px; } .ph-bar .sub { flex: 1; color: var(--muted); font-size: 12px; } .ph-bar input[type=range] { width: 120px; accent-color: var(--accent); } .ph-grid { flex: 1; overflow: auto; padding: 0 16px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--z), 1fr)); gap: 3px; align-content: start; } .ph-month { grid-column: 1 / -1; margin: 14px 2px 6px; font-size: 16px; text-transform: capitalize; } .ph-cell { aspect-ratio: 1; padding: 0; overflow: hidden; position: relative; background: rgba(127,127,127,.12); border-radius: 4px; } .ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; } .ph-cell:hover img { transform: scale(1.03); } .ph-cell.sel { box-shadow: inset 0 0 0 3px var(--accent); } .ph-cell.sel img { opacity: .85; } .ph-fav { position: absolute; left: 6px; bottom: 4px; color: #fff; font-style: normal; text-shadow: 0 1px 3px rgba(0,0,0,.6); } .ph-viewer { position: absolute; inset: 0; z-index: 4; background: #111; color: #fff; display: flex; flex-direction: column; border-radius: 0 0 var(--r-window) var(--r-window); } .ph-v-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; } .ph-v-bar span { flex: 1; display: flex; flex-direction: column; text-align: center; font-weight: 600; } .ph-v-bar small { font-weight: 400; color: #aaa; font-size: 11px; } .ph-v-bar button { color: #fff; padding: 4px 10px; border-radius: 8px; cursor: pointer; } .ph-v-bar button:hover { background: rgba(255,255,255,.12); } .ph-v-bar button.on { color: #ff375f; } .ph-v-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; } .ph-v-body img { max-width: 100%; max-height: 100%; object-fit: contain; } .ph-v-nav { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 24px; z-index: 1; cursor: pointer; } .ph-v-nav.r { left: auto; right: 10px; } .ph-info { position: absolute; right: 12px; top: 12px; width: 240px; padding: 14px; border-radius: 14px; background: rgba(30,30,32,.85); backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 6px; font-size: 12px; } .ph-info span { color: #aaa; overflow-wrap: anywhere; } .ph-exif { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .ph-exif small { display: block; color: #888; font-size: 10px; } .ph-slides { position: fixed; inset: 0; z-index: 4500; background: #000; display: flex; align-items: center; justify-content: center; cursor: none; } .ph-slides img { position: absolute; max-width: 100%; max-height: 100%; opacity: 0; transition: opacity 1.2s; } .ph-slides img.on { opacity: 1; } .ph-slides small { position: absolute; bottom: 16px; color: #555; font-size: 12px; } /* ---------- Anteprima ---------- */ .pv { display: flex; flex-direction: column; height: 100%; } .pv-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; flex-wrap: wrap; } .pv-tools button { padding: 3px 9px !important; font-size: 14px; } .pv-tools button.on { background: var(--accent) !important; color: #fff; } .pv-colors { display: flex; gap: 4px; } .pv-colors button { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); cursor: pointer; } .pv-colors button.on { box-shadow: 0 0 0 2px var(--win-bg), 0 0 0 4px var(--c); } .pv-bar select { padding: 3px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); } .pv-sp { flex: 1; } .pv-main { flex: 1; min-height: 0; display: flex; border-top: 1px solid var(--line); } .pv-thumbs { width: 120px; flex: none; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; background: var(--win-sidebar); } .pv-thumb { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; } .pv-thumb img { width: 100%; box-shadow: 0 1px 4px rgba(0,0,0,.25); } .pv-thumb small { color: var(--muted); font-size: 11px; } .pv-scroll { flex: 1; overflow: auto; background: rgba(127,127,127,.12); } .pv-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px; min-width: max-content; } .pv-page { position: relative; box-shadow: 0 2px 12px rgba(0,0,0,.25); background: #fff; } .pv-page canvas { display: block; } .pv-page canvas + canvas { position: absolute; left: 0; top: 0; } .pv-pages.drawing .pv-page canvas:last-child { cursor: crosshair; } html.cur-mac .pv-pages.drawing .pv-page canvas:last-child { cursor: crosshair !important; } /* ---------- Musica ---------- */ .mu { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 1fr auto; height: 100%; } .mu-side { grid-row: 1; overflow: auto; } .mu-main { overflow: auto; padding: 4px 20px 20px; min-width: 0; } .mu-main h3 { margin: 12px 0 8px; } .mu-table { display: flex; flex-direction: column; } .mu-row { display: grid; grid-template-columns: 36px 2fr 1.2fr 1.2fr 60px; gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 13px; align-items: center; user-select: none; } .mu-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mu-row > span:not(:nth-child(2)) { color: var(--muted); } .mu-row:not(.mu-head):hover { background: rgba(127,127,127,.1); } .mu-row.playing { color: #fa233b; } .mu-row.playing > span { color: #fa233b; } .mu-head { font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--line); border-radius: 0; } .mu-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; padding-top: 10px; } .mu-album { display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; } .mu-album img, .mu-nocover { width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; box-shadow: 0 4px 14px rgba(0,0,0,.18); } .mu-nocover { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #fb5c74, #8e8e93); color: #fff; font-size: 42px; } .mu-nocover.sm { width: 44px; height: 44px; font-size: 20px; border-radius: 6px; } .mu-album small { color: var(--muted); } .mu-artist { margin-top: 20px !important; } .mu-bar { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: center; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--win-sidebar); border-radius: 0 0 var(--r-window) var(--r-window); } .mu-now { display: flex; align-items: center; gap: 10px; min-width: 0; } .mu-now img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; } .mu-now div { display: flex; flex-direction: column; min-width: 0; } .mu-now b, .mu-now small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mu-now small { color: var(--muted); } .mu-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; } .mu-ctl button { font-size: 16px; padding: 4px 8px; border-radius: 8px; cursor: pointer; color: var(--text); } .mu-ctl button.big { font-size: 22px; } .mu-ctl button.on { color: #fa233b; } .mu-ctl input[type=range] { flex: 1; min-width: 120px; accent-color: #fa233b; } .mu-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .mu-vol { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .mu-vol input { width: 100px; accent-color: var(--text); } .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .eq i { width: 3px; background: currentColor; animation: eq 1s ease-in-out infinite; } .eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } @keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } } #musicMini { color: inherit; font-size: 14px; } .music-pop { position: fixed; z-index: 1300; top: 34px; width: 280px; padding: 12px; border-radius: 18px; background: var(--lg-tint-strong); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8); box-shadow: inset 0 1px 0 var(--lg-edge-soft), var(--lg-shadow); color: var(--text); display: flex; flex-direction: column; gap: 10px; } .mp-row { display: flex; gap: 10px; align-items: center; } .mp-row img, .mp-row .ico { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; } .mp-row div { display: flex; flex-direction: column; min-width: 0; } .mp-row b, .mp-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-row small { color: var(--muted); } .mp-ctl { display: flex; justify-content: space-around; } .mp-ctl button { font-size: 18px; padding: 4px 10px; border-radius: 8px; cursor: pointer; color: var(--text); } .mp-ctl button:hover { background: rgba(127,127,127,.15); } .pv-bar { gap: 6px; } .pv-bar .btn { padding: 4px 10px; } /* ---------- 4C: icone ---------- */ .ico-weather { background: linear-gradient(170deg, #3b9cff, #1663d6); overflow: hidden; } .ico-weather::before { content: ""; position: absolute; left: 22%; top: 18%; width: 38%; height: 38%; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff7a8, #ffd60a 60%, #ffb800); box-shadow: 0 0 10px rgba(255,214,10,.7); } .ico-weather::after { content: ""; position: absolute; left: 30%; top: 46%; width: 52%; height: 26%; border-radius: 999px; background: #fff; box-shadow: -10% 0 0 0 #fff; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); -webkit-mask: radial-gradient(circle at 35% 10%, #000 34%, transparent 35%) top/100% 100%, linear-gradient(#000, #000); } .ico-maps { overflow: hidden; background: linear-gradient(135deg, transparent 46%, #fff 46% 54%, transparent 54%), linear-gradient(45deg, transparent 60%, #ffd60a 60% 66%, transparent 66%), linear-gradient(160deg, #b4e3a1 0 45%, #f2ecd8 45% 70%, #9fd2ff 70%); } .ico-maps::after { content: ""; position: absolute; left: 50%; top: 20%; width: 30%; height: 30%; margin-left: -15%; background: #ff3b30; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: inset 0 0 0 3px #ff3b30, inset 0 0 0 6px #fff; } .ico-clock { background: #1c1c1e; } .ico-clock::before { content: ""; position: absolute; inset: 11%; border-radius: 50%; background: linear-gradient(#1c1c1e, #1c1c1e) 50% 30% / 5% 40% no-repeat, linear-gradient(#1c1c1e, #1c1c1e) 64% 50% / 30% 5% no-repeat, radial-gradient(circle, #ff9500 0 5%, transparent 6%), #fff; } .ico-clock::after { content: ""; position: absolute; left: 49.5%; top: 22%; width: 1.5%; height: 34%; background: #ff9500; transform-origin: 50% 82%; transform: rotate(210deg); border-radius: 2px; } /* ---------- Meteo ---------- */ .wx { display: grid; grid-template-columns: 250px 1fr; height: 100%; --sky: linear-gradient(180deg, #3b8de0, #78b5ef); } .wx[data-sky^="cloud"] { --sky: linear-gradient(180deg, #6f87a3, #a7b7c9); } .wx[data-sky^="rain"] { --sky: linear-gradient(180deg, #4b5d73, #7b8b9e); } .wx[data-sky^="storm"] { --sky: linear-gradient(180deg, #2d3343, #565d70); } .wx[data-sky^="snow"] { --sky: linear-gradient(180deg, #8ea6c0, #cfdae6); } .wx[data-sky^="fog"] { --sky: linear-gradient(180deg, #8d97a3, #c4c9cf); } .wx[data-sky$="-night"] { --sky: linear-gradient(180deg, #0b1630, #26375e); } .wx[data-sky="cloud-night"], .wx[data-sky="rain-night"], .wx[data-sky="storm-night"] { --sky: linear-gradient(180deg, #121a28, #343f52); } .wx-side { display: flex; flex-direction: column; min-height: 0; background: var(--win-sidebar); border-right: 1px solid var(--line); padding-top: 4px; } .wx-list { flex: 1; overflow: auto; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 8px; } .wx-card { display: flex; justify-content: space-between; gap: 6px; text-align: left; padding: 10px 12px; border-radius: 14px; color: #fff; cursor: pointer; background: linear-gradient(160deg, #3b8de0, #78b5ef); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3); text-shadow: 0 1px 2px rgba(0,0,0,.25); } .wx-card[data-wx-bg^="cloud"], .ncw[data-wx-bg^="cloud"] { background: linear-gradient(160deg, #6f87a3, #a7b7c9); } .wx-card[data-wx-bg^="rain"], .wx-card[data-wx-bg^="storm"] { background: linear-gradient(160deg, #4b5d73, #7b8b9e); } .wx-card[data-wx-bg^="snow"], .wx-card[data-wx-bg^="fog"] { background: linear-gradient(160deg, #8ea6c0, #b9c6d4); } .wx-card[data-wx-bg$="night"] { background: linear-gradient(160deg, #0b1630, #2b3d66); } .wx-card.on { box-shadow: 0 0 0 2.5px var(--accent); } .wx-card div { display: flex; flex-direction: column; min-width: 0; } .wx-card div:last-child { align-items: flex-end; flex: none; } .wx-card b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wx-card small { font-size: 11px; opacity: .9; } .wx-card-t { font-size: 30px; font-weight: 300; line-height: 1; } .wx-res { display: flex; flex-direction: column; text-align: left; padding: 8px 10px; border-radius: 9px; cursor: pointer; } .wx-res:hover { background: var(--hover); } .wx-res small { color: var(--muted); font-size: 11px; } .wx-none, .wx-loading { color: var(--muted); text-align: center; padding: 30px 10px; } .wx-locate { padding: 8px; color: var(--accent); cursor: pointer; border-radius: 9px; } .wx-locate:hover { background: var(--hover); } .wx-main { position: relative; min-width: 0; min-height: 0; background: var(--sky); color: #fff; transition: background .8s; border-radius: 0 0 var(--r-window) 0; overflow: hidden; } .wx-sky { position: absolute; inset: 0; pointer-events: none; } .wx[data-sky^="rain"] .wx-sky, .wx[data-sky^="storm"] .wx-sky { background: repeating-linear-gradient(105deg, transparent 0 18px, rgba(255,255,255,.18) 18px 19px, transparent 19px 40px); background-size: 120px 120px; animation: wxRain .5s linear infinite; } .wx[data-sky^="snow"] .wx-sky { background-image: radial-gradient(circle, rgba(255,255,255,.9) 1.5px, transparent 2px), radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.5px); background-size: 60px 60px, 37px 37px; animation: wxSnow 6s linear infinite; } .wx[data-sky^="storm"] .wx-sky::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; animation: wxFlash 7s infinite; } .wx[data-sky^="cloud"] .wx-sky, .wx[data-sky^="fog"] .wx-sky { background: radial-gradient(ellipse 40% 18% at 20% 20%, rgba(255,255,255,.35), transparent), radial-gradient(ellipse 35% 15% at 75% 35%, rgba(255,255,255,.25), transparent); animation: wxCloud 30s ease-in-out infinite alternate; } .wx[data-sky$="-night"] .wx-sky { background-image: radial-gradient(circle, #fff 1px, transparent 1.5px), radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1.5px); background-size: 97px 89px, 61px 53px; animation: none; opacity: .6; } @keyframes wxRain { to { background-position: -30px 120px; } } @keyframes wxSnow { to { background-position: 20px 60px, -15px 37px; } } @keyframes wxFlash { 0%, 90%, 93%, 100% { opacity: 0; } 91%, 94% { opacity: .35; } } @keyframes wxCloud { to { background-position: 80px 0, -60px 0; } } .reduce-motion .wx-sky, .reduce-motion .wx-sky::after { animation: none !important; } .wx-scroll { position: absolute; inset: 0; container-type: inline-size; overflow: auto; padding: 24px 28px 20px; text-shadow: 0 1px 3px rgba(0,0,0,.2); } .wx-head { text-align: center; margin: 10px 0 22px; } .wx-head h1 { margin: 0; font-size: 30px; font-weight: 500; } .wx-head > small { opacity: .85; } .wx-now { font-size: 92px; font-weight: 200; line-height: 1; margin-left: 24px; } .wx-head p { margin: 2px 0; font-size: 16px; font-weight: 500; } .wx-box { background: rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 16px; padding: 10px 14px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.22); margin-bottom: 12px; } .wx-box h5 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.2); font-size: 12px; font-weight: 500; opacity: .85; text-transform: none; } .wx-hours { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; } .wx-h { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 50px; font-size: 13px; } .wx-h span { font-size: 22px; } .wx-h b { font-weight: 600; font-size: 15px; } .wx-h em { font-style: normal; font-size: 10px; color: #a8dcff; margin-top: -4px; } .wx-h.sun b { font-size: 11px; } .wx-cols { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.15fr); gap: 12px; align-items: start; } .wx-day { display: grid; grid-template-columns: 52px 42px 38px 1fr 38px; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 15px; } .wx-day:last-child { border: 0; } .wx-day span { font-size: 20px; display: flex; flex-direction: column; align-items: center; line-height: 1; } .wx-day em { font-style: normal; font-size: 10px; color: #a8dcff; } .wx-day small { font-size: 15px; text-align: right; } .wx-day small:first-of-type { opacity: .65; } .wx-range { position: relative; height: 5px; border-radius: 3px; background: rgba(0,0,0,.2); } .wx-range > i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #7ecbff, #ffd60a, #ff9f0a); } .wx-range u, .wx-uv u { position: absolute; top: -2px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.25); } .wx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .wx-tile { margin: 0; min-height: 130px; display: flex; flex-direction: column; } .wx-tile > b { font-size: 30px; font-weight: 400; } .wx-tile b small { font-size: 14px; } .wx-tile p { margin: auto 0 0; font-size: 12px; opacity: .9; } .wx-uv { position: relative; display: block; height: 5px; border-radius: 3px; margin-top: 8px; background: linear-gradient(90deg, #34c759, #ffd60a, #ff9500, #ff3b30, #af52de); } .wx-compass { position: relative; width: 74px; height: 74px; margin: 0 auto; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; } .wx-compass i { position: absolute; inset: 4px; } .wx-compass i::before { content: ""; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-bottom: 12px solid #fff; border-top: 0; } .wx-compass b { display: flex; flex-direction: column; align-items: center; font-size: 18px; line-height: 1; } .wx-compass small { font-size: 10px; font-weight: 400; } .wx-credit { text-align: center; font-size: 11px; opacity: .6; margin: 8px 0 0; } .wx-empty { text-align: center; margin-top: 12%; } .wx-big-ico { font-size: 70px; } .wx-empty p { opacity: .9; } @container (max-width: 640px) { .wx-cols { grid-template-columns: 1fr; } } .nc-weather { cursor: pointer; color: #fff; background: linear-gradient(160deg, #3b8de0, #78b5ef) !important; display: flex; flex-direction: column; text-shadow: 0 1px 2px rgba(0,0,0,.25); } .nc-weather[data-wx-bg^="cloud"], .nc-weather[data-wx-bg^="fog"] { background: linear-gradient(160deg, #6f87a3, #a7b7c9) !important; } .nc-weather[data-wx-bg^="rain"], .nc-weather[data-wx-bg^="storm"] { background: linear-gradient(160deg, #4b5d73, #7b8b9e) !important; } .nc-weather[data-wx-bg$="night"] { background: linear-gradient(160deg, #0b1630, #2b3d66) !important; } .nc-weather small { font-size: 11px; opacity: .9; } .ncw-t { font-size: 34px; font-weight: 300; display: flex; justify-content: space-between; align-items: center; } .ncw-t span { font-size: 22px; } /* ---------- Mappe ---------- */ .mp { display: grid; grid-template-columns: 270px 1fr; height: 100%; } .mp-side { display: flex; flex-direction: column; min-height: 0; background: var(--win-sidebar); border-right: 1px solid var(--line); padding-top: 4px; } .mp-panel { flex: 1; overflow: auto; padding: 0 10px 12px; } .mp-panel h4 { margin: 12px 4px 6px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .mp-item { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 7px 8px; border-radius: 9px; cursor: pointer; } .mp-item:hover { background: var(--hover); } .mp-item div { display: flex; flex-direction: column; min-width: 0; } .mp-item small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-ico { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--hover); display: flex; align-items: center; justify-content: center; font-size: 13px; } .mp-ico.fav { color: #ff9500; } .mp-favs { display: flex; gap: 14px; padding: 2px 4px; } .mp-favs button { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-size: 11px; color: var(--muted); } .mp-favs span { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; } .mp-pin-home { background: #0a84ff; } .mp-pin-work { background: #8e5b3a; } .mp-pin-fav { background: #ff9500; } .mp-pin-red { background: #ff3b30; } .mp-hint { color: var(--muted); font-size: 11px; padding: 12px 4px; } .mp-map { position: relative; min-width: 0; overflow: hidden; border-radius: 0 0 var(--r-window) 0; } .mp-canvas { position: absolute; inset: 0; background: #e8e4da; } :root[data-theme="dark"] .mp-canvas { background: #2b2b2e; } :root[data-theme="dark"] .mp-canvas .leaflet-tile-pane { filter: brightness(.82) contrast(1.08) saturate(.85); } .mp-tools { position: absolute; top: 10px; right: 10px; z-index: 500; display: flex; gap: 8px; } .mp-tools .seg, .mp-btn, .mp-zoom { background: var(--lg-tint-strong); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 2px 10px rgba(0,0,0,.18), inset 0 0 0 .5px var(--lg-edge-soft); color: var(--text); } .mp-btn { padding: 5px 12px; border-radius: var(--r-control); cursor: pointer; font-weight: 500; } .mp-zoom { position: absolute; right: 10px; bottom: 30px; z-index: 500; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; } .mp-zoom button { width: 34px; height: 32px; font-size: 16px; cursor: pointer; } .mp-zoom button:hover, .mp-btn:hover { background: var(--hover); } .mp-zoom button + button { border-top: 1px solid var(--line); } .mp-zoom [data-mact="locate"] { color: var(--accent); font-size: 13px; } .mp-pin { background: none; border: 0; } .mp-pin span { display: flex; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 2px #fff; color: #fff; font-size: 13px; } .mp-pin b { transform: rotate(45deg); font-weight: 600; } .mp-pop { display: flex; flex-direction: column; gap: 4px; font: 13px/1.35 var(--font, -apple-system, system-ui, sans-serif); } .mp-pop small { color: #666; } .mp-pop div { display: flex; gap: 6px; margin-top: 6px; } .mp-pop .btn { padding: 4px 10px; font-size: 12px; } .mp .leaflet-popup-content-wrapper { border-radius: 14px; } .mp .leaflet-container { font: inherit; } .mp .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.7); border-radius: 6px 0 0 0; } .mp-dir-pts { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; margin: 6px 0 10px; } .mp-dir-pts label { grid-column: 1; display: flex; align-items: center; gap: 8px; } .mp-dir-pts label i { width: 10px; height: 10px; border-radius: 50%; flex: none; } .mp-dir-pts i.a { background: #34c759; } .mp-dir-pts i.b { background: #ff3b30; } .mp-dir-pts input { flex: 1; min-width: 0; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); } .mp-dir-pts button { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; cursor: pointer; padding: 4px 6px; border-radius: 8px; } .mp-dir-pts button:hover { background: var(--hover); } .mp-modes { display: flex; width: 100%; } .mp-modes button { flex: 1; padding: 4px 4px; font-size: 12px; } .mp-dir-sugg:not(:empty) { margin-top: 6px; border-radius: 10px; background: var(--win-bg); box-shadow: inset 0 0 0 1px var(--line); } .mp-sum { margin: 12px 4px 6px; display: flex; flex-direction: column; } .mp-sum b { font-size: 24px; } .mp-sum small { color: var(--muted); } .mp-steps { list-style: none; margin: 0; padding: 0; } .mp-steps li { display: flex; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--line); cursor: pointer; font-size: 13px; border-radius: 6px; } .mp-steps li:hover { background: var(--hover); } .mp-steps li > span { width: 22px; flex: none; text-align: center; font-size: 17px; color: var(--accent); } .mp-steps li small { display: block; color: var(--muted); font-size: 11px; } html.cur-mac .mp-canvas.leaflet-grab, html.cur-mac .mp-canvas .leaflet-interactive { cursor: var(--cur-pointer) !important; } /* ---------- Orologio ---------- */ .clk { display: flex; flex-direction: column; height: 100%; } .clk-tabs { align-self: center; margin: 4px 0 10px; } .clk-body { flex: 1; min-height: 0; overflow: auto; } .clk-world { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; padding: 10px 24px 24px; } .clk-city { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; border-radius: 16px; } .clk-city:hover { background: var(--hover); } .clk-city b { font-size: 15px; margin-top: 6px; } .clk-city small { color: var(--muted); font-size: 12px; } .clk-dig { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); } .clk-x { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--hover); opacity: 0; cursor: pointer; } .clk-city:hover .clk-x { opacity: 1; } .clk-add { justify-content: flex-start; align-items: stretch; } .clk-add:hover { background: none; } .clk-res { display: flex; flex-direction: column; max-height: 170px; overflow: auto; } .clk-res button { display: flex; flex-direction: column; text-align: left; padding: 5px 8px; border-radius: 8px; cursor: pointer; } .clk-res button:hover { background: var(--hover); } .clk-res small { font-size: 11px; } .clk-face circle:first-child { fill: #fff; stroke: rgba(0,0,0,.12); stroke-width: 1; } .clk-face .clk-ticks line { stroke: #1c1c1e; stroke-width: 1.4; stroke-linecap: round; } .clk-face .clk-nums text { font-size: 10px; text-anchor: middle; fill: #1c1c1e; font-weight: 500; } .clk-face .h, .clk-face .m { stroke: #1c1c1e; stroke-linecap: round; } .clk-face .h { stroke-width: 3.6; } .clk-face .m { stroke-width: 2.4; } .clk-face .s { stroke: #ff9500; stroke-width: 1.2; } .clk-face .c { fill: #ff9500; } .clk-face.night circle:first-child { fill: #1c1c1e; stroke: rgba(255,255,255,.15); } .clk-face.night .clk-ticks line, .clk-face.night .h, .clk-face.night .m { stroke: #fff; } .clk-face.night .clk-nums text { fill: #fff; } .clk-alarms { max-width: 560px; margin: 0 auto; padding: 4px 20px 20px; } .clk-al-head { display: flex; align-items: center; justify-content: space-between; } .clk-al-head h2 { margin: 6px 0; } .clk-al { display: flex; align-items: center; justify-content: space-between; padding: 10px 6px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 8px; } .clk-al:hover { background: var(--hover); } .clk-al div { display: flex; flex-direction: column; } .clk-al b { font-size: 42px; font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1.05; } .clk-al small { color: var(--muted); } .clk-al.off b, .clk-al.off small { opacity: .45; } .clk-sw { display: flex; flex-direction: column; align-items: center; padding: 20px; } .clk-sw-dig { font-size: 76px; font-weight: 200; font-variant-numeric: tabular-nums; letter-spacing: -1px; margin: 20px 0; } .clk-sw-btns { display: flex; gap: 120px; margin-bottom: 18px; } .clk-round { width: 74px; height: 74px; border-radius: 50%; background: var(--hover); cursor: pointer; font-size: 15px; box-shadow: 0 0 0 3px var(--win-bg), 0 0 0 4.5px var(--hover); color: var(--text); } .clk-round:disabled { opacity: .45; cursor: default; } .clk-round.go { background: rgba(52,199,89,.22); color: #2fb350; box-shadow: 0 0 0 3px var(--win-bg), 0 0 0 4.5px rgba(52,199,89,.22); } .clk-round.stop { background: rgba(255,59,48,.2); color: #ff3b30; box-shadow: 0 0 0 3px var(--win-bg), 0 0 0 4.5px rgba(255,59,48,.2); } .clk-round.pause { background: rgba(255,149,0,.2); color: #ff9500; } .clk-round.sm { width: 38px; height: 38px; font-size: 13px; box-shadow: none; } .clk-laps { list-style: none; padding: 0; margin: 0; width: min(420px, 100%); } .clk-laps li { display: flex; justify-content: space-between; padding: 9px 4px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; } .clk-laps li.best { color: #2fb350; } .clk-laps li.worst { color: #ff3b30; } .clk-timer { padding: 6px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .clk-tm-new { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; } .clk-tm-in { display: flex; gap: 6px; } .clk-tm-in label { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--muted); } .clk-tm-in input { width: 64px; font-size: 26px; text-align: center; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); font-variant-numeric: tabular-nums; } .clk-tm-label { padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); width: 190px; } .clk-presets { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .clk-presets button { padding: 5px 12px; border-radius: 999px; background: var(--hover); cursor: pointer; font-size: 12px; } .clk-presets button:hover { background: var(--accent); color: #fff; } .clk-tms { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; width: 100%; } .clk-tm { position: relative; display: flex; flex-direction: column; align-items: center; padding: 12px; border-radius: 18px; background: var(--hover); } .clk-tm svg { width: 150px; height: 150px; } .clk-tm .bg { fill: none; stroke: rgba(127,127,127,.2); stroke-width: 5; } .clk-tm .fg { fill: none; stroke: #ff9500; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .25s linear; } .clk-tm-txt { position: absolute; top: 12px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .clk-tm-txt b { font-size: 30px; font-weight: 300; font-variant-numeric: tabular-nums; } .clk-tm-txt small { color: var(--muted); font-size: 11px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clk-tm-btns { display: flex; gap: 60px; margin-top: 8px; } .clk-tm.done .fg { stroke: #ff3b30; } .clk-tm.done b { color: #ff3b30; animation: clkBlink 1s steps(2) infinite; } @keyframes clkBlink { 50% { opacity: .3; } } .timer-mini { font-variant-numeric: tabular-nums; font-size: 12px; color: #ff9500; } html.cur-mac .clk-al, html.cur-mac .clk-round, html.cur-mac .clk-presets button, html.cur-mac .wx-card, html.cur-mac .mp-item, html.cur-mac .mp-btn, html.cur-mac .mp-zoom button { cursor: var(--cur-pointer) !important; } /* ---------- Terminale ---------- */ .ico-terminal { background: linear-gradient(180deg, #4a4a4f, #1c1c1e); } .ico-terminal::before { content: ""; position: absolute; inset: 14% 12% 18%; border-radius: 8%; background: #0d0d0f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .ico-terminal::after { content: ">_"; position: absolute; left: 22%; top: 24%; color: #f2f2f2; font: 600 1.4em/1 Menlo, Monaco, monospace; } .dock-item .ico-terminal::after, .lp-grid .ico-terminal::after, .app-switcher .ico-terminal::after { font-size: 17px; } .tm { position: relative; height: 100%; padding: 6px 4px 4px 10px; border-radius: 0 0 var(--r-window) var(--r-window); overflow: hidden; } .tm-screen { height: 100%; } .tm .xterm-viewport { background: transparent !important; } .tm-ended { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; border-radius: 14px; background: var(--lg-tint-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--lg-shadow); color: var(--text); } .tm-auth { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; } .tm-lock { font-size: 46px; } .tm-auth h3 { margin: 0; } .tm-auth p { margin: 0; color: var(--muted); font-size: 13px; } .tm-auth input { width: 240px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); margin-top: 6px; } .tm-auth .tm-err { color: #ff3b30; min-height: 18px; } .tm-auth .acts { display: flex; gap: 8px; } .tm-auth.shake { animation: tmShake .4s; } @keyframes tmShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } html.cur-mac .tm .xterm, html.cur-mac .tm .xterm-screen { cursor: var(--cur-text) !important; } /* ---------- Messaggi ---------- */ .ico-messages { background: linear-gradient(180deg, #6cf27a, #12c33a); } .ico-messages::before { content: ""; position: absolute; left: 17%; right: 17%; top: 20%; bottom: 28%; border-radius: 50%; background: #fff; } .ico-messages::after { content: ""; position: absolute; left: 24%; bottom: 22%; width: 18%; height: 18%; background: #fff; clip-path: polygon(0 100%, 30% 0, 100% 30%); } .dock-item.badge[data-badge]::after, .dock-item.badge[data-badge]:hover::after { content: attr(data-badge); width: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; box-sizing: border-box; } /* Messaggi in stile Teams: barra delle sezioni, elenco chat, conversazione a schede */ .ms { --tm: #5b5fc7; display: grid; grid-template-columns: 64px 290px 1fr; height: 100%; min-height: 0; } .ms.ms-drop, .ms-drop .ms-main { outline: 2px dashed var(--tm); outline-offset: -6px; } .ms-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; background: rgba(127,127,127,.1); border-right: 1px solid var(--line); } .ms-rail button { position: relative; width: 54px; padding: 7px 0 5px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); } .ms-rail button span { font-size: 19px; filter: grayscale(1); opacity: .8; } .ms-rail button small { font-size: 10px; } .ms-rail button:hover { background: var(--hover); color: var(--text); } .ms-rail button.on { color: var(--tm); } .ms-rail button.on span { filter: none; opacity: 1; } .ms-rail button.on::before { content: ""; position: absolute; left: -5px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--tm); } .ms-rail em { position: absolute; top: 2px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #c4314b; color: #fff; font: 600 10px/16px inherit; font-style: normal; } .ms-side { display: flex; flex-direction: column; min-height: 0; background: var(--win-sidebar); border-right: 1px solid var(--line); } .ms-side-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 4px 16px; } .ms-side-title { font-size: 18px; font-weight: 700; } .ms-side-bar { padding: 6px 12px 8px; } .ms-search { width: 100%; padding: 6px 10px; border-radius: 6px; border: 1px solid transparent; background: rgba(127,127,127,.14); color: var(--text); font: inherit; outline: none; } .ms-search:focus { border-bottom: 2px solid var(--tm); } .ms-new { width: 32px; height: 32px; border-radius: 6px; font-size: 16px; color: var(--muted); } .ms-new:hover { background: var(--hover); color: var(--tm); } .ms-list { flex: 1; overflow: auto; padding: 0 6px 8px; } .ms-item { width: 100%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; text-align: left; color: var(--text); } .ms-item:hover { background: var(--hover); } .ms-item.active { background: color-mix(in srgb, var(--tm) 18%, transparent); } .ms-item-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ms-item-top { display: flex; align-items: center; gap: 6px; min-width: 0; } .ms-item-top > b, .ms-item-top > small:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-item-top > b { font-weight: 500; } .ms-item-top > small:first-child { color: var(--muted); font-size: 12px; } .ms-item.unread .ms-item-top > b, .ms-item.unread .ms-item-top > small:first-child { font-weight: 700; color: var(--text); } .ms-time { color: var(--muted); font-size: 11px; flex: none; } .ms-count { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tm); color: #fff; font: 600 11px/18px inherit; font-style: normal; text-align: center; } .ms-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tm); } .ms-pins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .ms-pin { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 8px; color: var(--text); } .ms-pin:hover { background: var(--hover); } .ms-pin.active { background: color-mix(in srgb, var(--tm) 18%, transparent); } .ms-pin small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .ms-pin .ms-dot { position: absolute; top: 6px; left: 14px; } .ms-avw { position: relative; display: inline-flex; flex: none; } .ms-pres { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--win-sidebar, var(--win-bg)); background: #8a8886; } .ms-av.sm + .ms-pres { width: 10px; height: 10px; } .ms-pres.on { background: #6bb700; } .ms-pres.away { background: #ffaa44; } .ms-pres.off { background: var(--win-bg); box-shadow: inset 0 0 0 1.5px #8a8886; } .ms-av { --h: 210; width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: #fff; background: hsl(var(--h) 45% 52%); } .ms-av.sm { width: 32px; height: 32px; font-size: 12px; } .ms-av.big { width: 54px; height: 54px; font-size: 19px; } .ms-av.group { position: relative; background: none; } .ms-av.group i { --h: 210; position: absolute; width: 64%; height: 64%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .62em; font-style: normal; background: hsl(var(--h) 45% 52%); box-shadow: 0 0 0 1.5px var(--win-sidebar, var(--win-bg)); } .ms-av.group i:first-child { left: 0; top: 0; } .ms-av.group i:last-child { right: 0; bottom: 0; } .ms-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; background: color-mix(in srgb, var(--win-bg) 94%, #808080); } .ms-head { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 16px; border-bottom: 1px solid var(--line); background: var(--win-bg); } .ms-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .ms-who > span:last-child { display: flex; flex-direction: column; min-width: 0; } .ms-who b { font-size: 15px; } .ms-who small { color: var(--muted); font-size: 11px; } .ms-head-acts { display: flex; gap: 4px; } .ms-head-acts button { height: 32px; min-width: 32px; padding: 0 8px; border-radius: 6px; font-size: 16px; color: var(--muted); } .ms-head-acts button:hover { background: var(--hover); color: var(--tm); } .ms-to { position: relative; flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .ms-to > span { color: var(--muted); } .ms-to-input { flex: 1; min-width: 120px; border: 0; background: none; color: var(--text); font: inherit; outline: none; padding: 4px 0; } .ms-chip { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--tm) 20%, transparent); color: var(--tm); font-size: 13px; } .ms-sugg { position: absolute; z-index: 5; left: 20px; top: calc(100% + 6px); width: min(340px, 90%); max-height: 300px; overflow: auto; padding: 5px; border-radius: 8px; background: var(--lg-tint-strong, var(--win-bg)); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: var(--lg-shadow, var(--shadow)); } .ms-sugg button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; text-align: left; color: var(--text); } .ms-sugg button:hover, .ms-sugg button:first-child { background: var(--tm); color: #fff; } .ms-sugg button span { display: flex; flex-direction: column; } .ms-sugg small { opacity: .75; font-size: 11px; } .ms-sugg p { margin: 8px; color: var(--muted); } .ms-thread { flex: 1; overflow: auto; padding: 12px 20px 6px; display: flex; flex-direction: column; gap: 2px; } .ms-empty { margin: auto; color: var(--muted); text-align: center; line-height: 1.5; padding: 20px; } .ms-empty.big { font-size: 15px; } .ms-more { align-self: center; margin: 4px 0 10px; padding: 4px 12px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: 12px; } .ms-stamp { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; color: var(--muted); font-size: 12px; } .ms-stamp::before, .ms-stamp::after { content: ""; flex: 1; height: 1px; background: var(--line); } .ms-msg { position: relative; display: flex; gap: 10px; max-width: min(78%, 620px); } .ms-msg.first { margin-top: 10px; } .ms-msg.mine { align-self: flex-end; } .ms-msg.theirs { align-self: flex-start; } .ms-gut { width: 32px; flex: none; } .ms-col { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .ms-msg.mine .ms-col { align-items: flex-end; } .ms-meta { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--muted); padding: 0 2px; } .ms-meta b { color: var(--text); font-weight: 600; } .ms-card { padding: 8px 12px; border-radius: 6px; background: var(--win-bg); box-shadow: 0 1px 2px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; } .ms-msg.mine .ms-card { background: color-mix(in srgb, var(--tm) 22%, var(--win-bg)); box-shadow: none; } .ms-card.unsent { background: none !important; box-shadow: none; padding: 2px 4px; } .ms-b { line-height: 1.45; overflow-wrap: anywhere; user-select: text; color: var(--text); } .ms-b a { color: var(--tm); text-decoration: underline; } .ms-b.unsent { color: var(--muted); font-size: 12px; font-style: italic; } .ms-typing { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px 42px; color: var(--muted); font-size: 12px; } .ms-dots { display: inline-flex; gap: 3px; } .ms-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--tm); animation: ms-dots 1.2s infinite ease-in-out; } .ms-dots i:nth-child(2) { animation-delay: .15s; } .ms-dots i:nth-child(3) { animation-delay: .3s; } .ms-quote { max-width: 100%; padding: 4px 10px; border-left: 3px solid var(--tm); border-radius: 3px; background: rgba(127,127,127,.12); color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-quote b { color: var(--text); margin-right: 6px; } .ms-img { padding: 0; border-radius: 4px; overflow: hidden; line-height: 0; } .ms-img img { max-width: 300px; max-height: 280px; display: block; object-fit: cover; } .ms-video { max-width: 320px; max-height: 240px; border-radius: 4px; } .ms-audio { width: 260px; } .ms-file { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); text-align: left; } .ms-file:hover { border-color: var(--tm); } .ms-file .ico { width: 34px; height: 34px; } .ms-file span { display: flex; flex-direction: column; min-width: 0; } .ms-file b { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-file small { color: var(--muted); font-size: 11px; } .ms-tap { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .ms-tap button { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--win-bg); font-size: 13px; } .ms-tap button small { font-size: 11px; color: var(--muted); } .ms-tap button.me { border-color: var(--tm); background: color-mix(in srgb, var(--tm) 14%, var(--win-bg)); } .ms-hov { position: absolute; top: -16px; right: 8px; z-index: 2; display: none; gap: 1px; padding: 2px; border-radius: 6px; background: var(--win-bg); box-shadow: 0 2px 8px rgba(0,0,0,.22); } .ms-msg.mine .ms-hov { right: auto; left: 8px; } .ms-msg:hover .ms-hov { display: flex; } .ms-hov button { width: 28px; height: 28px; border-radius: 4px; font-size: 15px; color: var(--muted); transition: transform .1s; } .ms-hov button:hover { background: var(--hover); transform: scale(1.15); color: var(--tm); } .ms-receipt { align-self: flex-end; margin: 2px 4px 6px; color: var(--muted); font-size: 11px; } .ms-tapbar { position: absolute; z-index: 6; display: flex; gap: 2px; padding: 4px; border-radius: 8px; background: var(--lg-tint-strong); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: var(--lg-shadow, var(--shadow)); } .ms-tapbar button { width: 32px; height: 32px; border-radius: 6px; font-size: 17px; transition: transform .12s; } .ms-tapbar button:hover { transform: scale(1.2); } .ms-tapbar button.on { background: color-mix(in srgb, var(--tm) 35%, transparent); } .ms-compose { padding: 6px 20px 14px; } .ms-reply { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding: 5px 10px; border-left: 3px solid var(--tm); border-radius: 4px; background: var(--win-bg); color: var(--muted); font-size: 12px; } .ms-reply span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-reply button { font-size: 15px; color: var(--muted); } .ms-box { border-radius: 6px; background: var(--win-bg); border: 1px solid var(--line); border-bottom: 2px solid var(--line); transition: border-color .15s; } .ms-box:focus-within { border-bottom-color: var(--tm); } .ms-box textarea { display: block; width: 100%; resize: none; min-height: 38px; max-height: 180px; padding: 10px 14px 4px; border: 0; background: none; color: var(--text); font: inherit; line-height: 1.4; outline: none; } .ms-tools { display: flex; align-items: center; gap: 2px; padding: 2px 6px 6px; } .ms-tools > button { width: 32px; height: 30px; border-radius: 4px; font-size: 16px; color: var(--muted); } .ms-tools > button:hover { background: var(--hover); } .ms-hint { flex: 1; text-align: right; padding-right: 8px; color: var(--muted); font-size: 11px; opacity: 0; transition: opacity .2s; } .ms-box:focus-within .ms-hint { opacity: .8; } .ms-tools .ms-send { color: var(--tm); font-size: 17px; } .ms-tools .ms-send:disabled { opacity: .35; } .ms-emo { position: absolute; z-index: 7; max-height: 230px; overflow: auto; display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 8px; border-radius: 8px; background: var(--lg-tint-strong, var(--win-bg)); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: var(--lg-shadow, var(--shadow)); } .ms-emo button { height: 32px; border-radius: 4px; font-size: 19px; } .ms-emo button:hover { background: var(--hover); } @keyframes ms-dots { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } } html.phone .ms { grid-template-columns: 1fr; } html.phone .ms-rail { display: none; } html.phone .ms-hint { display: none; } /* ---------- Istantanea ---------- */ .ico-screenshot { background: linear-gradient(180deg, #8e8e93, #48484a); } .ico-screenshot::before { content: ""; position: absolute; inset: 22% 16% 26%; border: 2px dashed rgba(255,255,255,.9); border-radius: 8%; } .ico-screenshot::after { content: ""; position: absolute; left: 39%; top: 37%; width: 22%; height: 22%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #48484a, 0 0 0 3.5px #fff; } .shot-bar { position: fixed; z-index: 99990; left: 50%; bottom: calc(var(--dock-size, 54px) * 1.8 + 40px); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 16px; background: var(--lg-tint-strong); backdrop-filter: blur(28px) saturate(1.7); -webkit-backdrop-filter: blur(28px) saturate(1.7); box-shadow: var(--lg-shadow, var(--shadow)); color: var(--text); } .shot-bar button { height: 34px; border-radius: 9px; color: var(--text); } .shot-x { width: 26px; height: 26px !important; border-radius: 50% !important; background: rgba(127,127,127,.25); font-size: 15px; margin-right: 4px; } .shot-mode { width: 40px; display: flex; align-items: center; justify-content: center; } .shot-mode:hover { background: var(--hover); } .shot-mode.on { background: rgba(127,127,127,.3); } .shot-sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; } .shot-opt { padding: 0 10px; font-size: 13px; } .shot-opt:hover { background: var(--hover); } .shot-go { padding: 0 16px; margin-left: 4px; background: rgba(127,127,127,.25); font-weight: 600; font-size: 13px; } .shot-go:hover { background: var(--accent); color: #fff !important; } .shot-pick { position: fixed; inset: 0; z-index: 99995; cursor: crosshair; background: rgba(0,0,0,.18); } .shot-pick.window { cursor: default; background: transparent; } .shot-rect { position: fixed; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.08); box-shadow: 0 0 0 9999px rgba(0,0,0,.28); pointer-events: none; } .shot-pick.window .shot-rect { border: 0; background: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: none; border-radius: var(--r-window); } .shot-rect::after { content: attr(data-size); position: absolute; right: -4px; bottom: -22px; color: #fff; font-size: 11px; text-shadow: 0 1px 2px #000; white-space: nowrap; } .shot-pick.window .shot-rect::after { content: none; } .shot-hint { position: fixed; left: 50%; top: 46px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; pointer-events: none; } .shot-count { position: fixed; z-index: 99995; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 28px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; font-size: 64px; font-weight: 300; pointer-events: none; } .shot-flash { position: fixed; z-index: 99996; inset: 0; background: #fff; pointer-events: none; animation: shot-flash .35s ease-out forwards; } @keyframes shot-flash { from { opacity: .85; } to { opacity: 0; } } .shot-thumb { position: fixed; z-index: 99990; right: 20px; bottom: calc(var(--dock-size, 54px) + 30px); width: 200px; padding: 0; border-radius: 10px; overflow: hidden; line-height: 0; box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 .5px rgba(255,255,255,.4); animation: shot-in .35s cubic-bezier(.2,.9,.3,1.2); background: #000; } .shot-thumb img, .shot-thumb video { width: 100%; max-height: 160px; object-fit: cover; } .shot-thumb span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; text-shadow: 0 1px 6px #000; } .shot-thumb.out { transition: transform .35s ease-in, opacity .35s; transform: translateX(240px); opacity: 0; } @keyframes shot-in { from { transform: translateX(240px); } } .shot-rec { display: flex; align-items: center; gap: 6px; padding: 0 8px; height: 20px; border-radius: 6px; color: inherit; font-variant-numeric: tabular-nums; font-size: 12px; } .shot-rec:hover { background: rgba(127,127,127,.25); } .shot-rec i { width: 10px; height: 10px; border-radius: 2px; background: #ff3b30; animation: shot-blink 1.4s infinite; } @keyframes shot-blink { 50% { opacity: .35; } } .shot-frame { position: fixed; z-index: 99980; border: 2px dashed rgba(255,59,48,.85); border-radius: 4px; pointer-events: none; } /* ---------- Widget sulla scrivania ---------- */ .desk-widgets { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .wg { position: absolute; pointer-events: auto; border-radius: 22px; overflow: hidden; touch-action: none; user-select: none; color: var(--text); background: var(--lg-tint-strong); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); box-shadow: 0 8px 26px rgba(0,0,0,.22), inset 0 0 0 .5px rgba(255,255,255,.45); transition: left .18s ease, top .18s ease, transform .15s; } .wg.dragging { transition: none; transform: scale(1.03); z-index: 2; box-shadow: 0 16px 40px rgba(0,0,0,.35); } .wg-in { height: 100%; padding: 14px 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; font-size: 13px; overflow: hidden; } .wg-muted { color: var(--muted); } .wg-del { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(60,60,67,.85); color: #fff; font-size: 16px; font-weight: 700; line-height: 1; display: none; } .desk-widgets.editing .wg-del { display: block; } .desk-widgets.editing .wg { animation: wg-wiggle .3s ease-in-out infinite alternate; } @keyframes wg-wiggle { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } } .wg-row { display: flex; gap: 14px; min-height: 0; } .wg-row.sp { justify-content: space-between; } /* Orologio */ .wg-clock .wg-in { align-items: center; justify-content: center; padding: 10px; } .wg-clocks { display: flex; gap: 14px; justify-content: center; } .wg-clocks > div { display: flex; flex-direction: column; align-items: center; gap: 2px; } .wg-clocks small { font-size: 11px; color: var(--muted); } .wg-clock.wg-s small { display: none; } /* Calendario */ .wg-cal-head small { color: #ff3b30; font-weight: 600; text-transform: uppercase; font-size: 11px; display: block; } .wg-cal-head b { font-size: 40px; font-weight: 300; line-height: 1.05; } .wg-cal-head.col { flex: none; width: 74px; } .wg-evs { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; } .wg-ev { display: flex; gap: 6px; min-width: 0; } .wg-ev i { flex: none; width: 3px; border-radius: 2px; background: var(--accent); } .wg-ev span { display: flex; flex-direction: column; min-width: 0; } .wg-ev b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wg-ev small { font-size: 11px; color: var(--muted); } .wg-month { flex: none; width: 150px; } .wg-month strong { color: #ff3b30; font-size: 11px; text-transform: uppercase; } .wg-month > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; font-size: 10px; margin-top: 3px; } .wg-month b { color: var(--muted); font-weight: 600; } .wg-month i { font-style: normal; padding: 1.5px 0; border-radius: 50%; } .wg-month i.today { background: #ff3b30; color: #fff; font-weight: 700; } .wg-calendar.wg-l .wg-month { width: auto; flex: 1; } .wg-calendar.wg-l .wg-month > div { font-size: 12px; gap: 3px; } /* Meteo */ .wg-weather { color: #fff; background: linear-gradient(160deg, #3b8de0, #78b5ef); text-shadow: 0 1px 2px rgba(0,0,0,.25); } .wg-weather[data-wx-bg^="cloud"], .wg-weather[data-wx-bg^="fog"] { background: linear-gradient(160deg, #6f87a3, #a7b7c9); } .wg-weather[data-wx-bg^="rain"], .wg-weather[data-wx-bg^="storm"] { background: linear-gradient(160deg, #4b5d73, #7b8b9e); } .wg-weather[data-wx-bg^="snow"] { background: linear-gradient(160deg, #8ea6c0, #b9c6d4); } .wg-weather[data-wx-bg$="night"] { background: linear-gradient(160deg, #0b1630, #2b3d66); } .wg-weather .wg-muted { color: rgba(255,255,255,.85); } .wg-wx-t { font-size: 42px; font-weight: 300; line-height: 1.1; } .wg-wx-info { display: flex; flex-direction: column; margin-top: auto; } .wg-wx-info span { font-size: 22px; } .wg-wx-info small { font-size: 11px; } .wg-weather.wg-m .wg-wx-info { margin-top: 0; align-items: flex-end; text-align: right; } .wg-hours { display: flex; justify-content: space-between; margin-top: auto; text-align: center; } .wg-hours div { display: flex; flex-direction: column; gap: 2px; } .wg-hours small { font-size: 11px; opacity: .85; } .wg-hours span { font-size: 18px; } /* Promemoria */ .wg-rm-head { display: flex; justify-content: space-between; align-items: baseline; } .wg-rm-head b { color: var(--accent); } .wg-rm-head span { font-size: 26px; font-weight: 600; } .wg-rm { display: flex; flex-direction: column; gap: 6px; min-height: 0; } .wg-rm.two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; } .wg-rm label { display: flex; align-items: flex-start; gap: 7px; min-width: 0; cursor: pointer; transition: opacity .4s; } .wg-rm label.done { opacity: .35; text-decoration: line-through; } .wg-rm input { flex: none; appearance: none; width: 15px; height: 15px; margin: 1px 0 0; border-radius: 50%; border: 1.5px solid var(--c, var(--accent)); cursor: pointer; } .wg-rm input:checked { background: var(--c, var(--accent)); box-shadow: inset 0 0 0 2.5px var(--win-bg); } .wg-rm span { display: flex; flex-direction: column; min-width: 0; font-size: 12px; } .wg-rm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wg-rm small { font-size: 10.5px; color: var(--muted); } .wg-rm small.late { color: #ff3b30; } /* Note */ .wg-note-head b { color: #e5a800; } .wg-note { padding: 6px 8px; border-radius: 10px; background: rgba(255,214,10,.14); cursor: pointer; min-height: 0; overflow: hidden; } .wg-note b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .wg-note small { font-size: 10.5px; color: var(--muted); } .wg-note p { margin: 2px 0 0; color: var(--muted); font-size: 12px; white-space: pre-line; overflow: hidden; } .wg-notelist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; min-height: 0; } /* Foto */ .wg-photos .wg-in { padding: 0; position: relative; } .wg-photos img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; } .wg-photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 14px 10px; color: #fff; font-size: 12px; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.5)); } .wg-photos .wg-in > b, .wg-photos .wg-in > small { margin: 14px 16px 0; } /* Monitoraggio */ .wg-rings { display: flex; justify-content: space-around; align-items: center; height: 100%; } .wg-ring { display: flex; flex-direction: column; align-items: center; gap: 6px; } .wg-ring > div { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--c) calc(var(--v) * 1%), rgba(127,127,127,.22) 0); } .wg-ring > div b { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--win-bg); font-size: 13px; } .wg-ring small { font-size: 11px; color: var(--muted); } .wg-activity.wg-s .wg-ring > div { width: 54px; height: 54px; } .wg-activity.wg-s .wg-ring > div b { width: 44px; height: 44px; font-size: 12px; } /* Galleria */ .wg-gallery { position: fixed; z-index: 99950; left: 50%; bottom: calc(var(--dock-size, 54px) * 1.8 + 40px); transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); height: 330px; display: grid; grid-template-columns: 210px 1fr; border-radius: 22px; overflow: hidden; background: var(--lg-tint-strong); backdrop-filter: blur(34px) saturate(1.8); -webkit-backdrop-filter: blur(34px) saturate(1.8); box-shadow: var(--lg-shadow, var(--shadow)); color: var(--text); animation: shot-in-up .25s ease-out; } @keyframes shot-in-up { from { transform: translate(-50%, 30px); opacity: 0; } } .wg-g-side { padding: 12px 8px; border-right: 1px solid var(--line); overflow: auto; display: flex; flex-direction: column; gap: 2px; } .wg-g-side input { margin: 0 4px 8px; padding: 5px 10px; border-radius: 8px; border: 0; background: rgba(127,127,127,.18); color: var(--text); font: inherit; } .wg-g-side button { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; text-align: left; color: var(--text); } .wg-g-side button .ico { width: 26px; height: 26px; flex: none; } .wg-g-side button:hover { background: var(--hover); } .wg-g-side button.on { background: var(--accent); color: #fff; } .wg-g-main { padding: 20px 24px; display: flex; flex-direction: column; } .wg-g-main h3 { margin: 0; font-size: 20px; } .wg-g-main p { margin: 4px 0 18px; color: var(--muted); } .wg-g-sizes { display: flex; gap: 14px; align-items: flex-end; } .wg-g-sizes button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; color: var(--muted); font-size: 12px; } .wg-g-sizes button.on { background: rgba(127,127,127,.18); color: var(--text); font-weight: 600; } .wg-g-shape { display: block; border-radius: 12px; background: rgba(127,127,127,.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); } .wg-g-shape.s { width: 56px; height: 56px; } .wg-g-shape.m { width: 118px; height: 56px; } .wg-g-shape.l { width: 118px; height: 120px; } .wg-g-sizes button.on .wg-g-shape { background: color-mix(in srgb, var(--accent) 55%, transparent); } .wg-g-acts { margin-top: auto; display: flex; justify-content: flex-end; gap: 8px; } .wg-g-acts button { padding: 6px 16px; border-radius: 999px; background: rgba(127,127,127,.2); color: var(--text); font-weight: 600; } .wg-g-acts button.primary { background: var(--accent); color: #fff; } .nc-edit { align-self: center; margin: 2px auto 6px; display: block; padding: 4px 14px; border-radius: 999px; background: rgba(127,127,127,.2); color: var(--text); font-size: 12px; font-weight: 600; } @media (max-width: 600px) { .wg-gallery { grid-template-columns: 1fr; height: auto; max-height: 70vh; } .wg-g-side { flex-direction: row; overflow-x: auto; border-right: 0; } .wg-g-side input { display: none; } } .wg-digital { display: flex; flex-direction: column; justify-content: center; } .wg-digital b { font-size: 44px; font-weight: 300; font-variant-numeric: tabular-nums; } .wg-digital small { color: var(--muted); font-size: 13px !important; display: block !important; } .wg-clock.wg-m .wg-clocks { align-items: center; gap: 22px; } /* ---------- Registrazione e password ---------- */ .authscreen { justify-content: center; gap: 18px; min-height: 100vh; box-sizing: border-box; user-select: auto; } .auth-card { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 28px 24px; border-radius: 26px; background: rgba(255,255,255,.14); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); box-shadow: 0 20px 60px rgba(0,0,0,.25), inset 0 0 0 .5px rgba(255,255,255,.35); } .auth-card h1 { margin: 0; font-size: 22px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.2); } .auth-sub { margin: 0; font-size: 14px; line-height: 1.5; opacity: .92; } .auth-small { margin: 0; font-size: 12px; line-height: 1.45; opacity: .75; } .auth-form { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .auth-form .lock-input { padding: 9px 14px; font-size: 14px; } .auth-btn { width: 100%; padding: 10px; border-radius: 999px; background: #fff; color: #0a64d6; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.18); } .auth-btn:hover { background: #f2f6ff; } .auth-btn.secondary { background: rgba(255,255,255,.22); color: #fff; box-shadow: none; } .auth-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .auth-ok { margin: 0; font-size: 13px; background: rgba(52,199,89,.35); padding: 6px 12px; border-radius: 10px; } .auth-mail { font-size: 52px; line-height: 1; } .auth-back, .lock-links a { color: #fff; opacity: .85; font-size: 13px; text-decoration: none; text-shadow: 0 1px 4px rgba(0,0,0,.3); } .auth-back:hover, .lock-links a:hover { opacity: 1; text-decoration: underline; } .lock-links { display: flex; gap: 16px; justify-content: center; margin-top: 4px; } .authscreen .lock-error { width: 100%; box-sizing: border-box; } .st-quota { width: 180px; height: 8px; border-radius: 4px; background: rgba(127,127,127,.25); overflow: hidden; } .st-quota i { display: block; height: 100%; border-radius: 4px; background: var(--accent); } .st-quota.full i { background: #ff3b30; } .st-warn { color: #ff9500; font-weight: 600; } /* ---------- Mail ---------- */ .ico-mail { background: linear-gradient(180deg, #5ac8fa, #0a7cff); } .ico-mail::before { content: ""; position: absolute; inset: 27% 16% 27%; border-radius: 9%; background: #fff; } .ico-mail::after { content: ""; position: absolute; left: 16%; right: 16%; top: 27%; height: 30%; background: linear-gradient(to bottom right, transparent 48%, #b9d7f5 49% 54%, transparent 55%) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent 48%, #b9d7f5 49% 54%, transparent 55%) right / 50% 100% no-repeat; } .ml { display: grid; grid-template-columns: 220px 330px 1fr; height: 100%; min-height: 0; position: relative; } .ml-side { display: flex; flex-direction: column; min-height: 0; background: var(--win-sidebar); border-right: 1px solid var(--line); } .ml-boxes { flex: 1; overflow: auto; padding: 8px 6px; } .ml-acc + .ml-acc { margin-top: 12px; } .ml-acc-head { padding: 4px 8px 6px; display: flex; flex-direction: column; cursor: default; } .ml-acc-head b { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .ml-acc-head small { font-size: 11px; color: var(--muted); opacity: .8; overflow: hidden; text-overflow: ellipsis; } .ml-folder { width: 100%; display: flex; align-items: center; gap: 7px; padding: 5px 8px 5px calc(8px + var(--d, 0) * 14px); border-radius: 7px; color: var(--text); text-align: left; font-size: 13px; } .ml-folder:hover { background: var(--hover); } .ml-folder.active { background: rgba(127,127,127,.24); font-weight: 600; } .ml-folder.drop { background: color-mix(in srgb, var(--accent) 35%, transparent); } .ml-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ml-folder i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; } .ml-side-foot { padding: 8px; border-top: 1px solid var(--line); } .ml-side-foot button { width: 100%; padding: 6px; border-radius: 8px; color: var(--muted); font-size: 12px; } .ml-side-foot button:hover { background: var(--hover); color: var(--text); } .ml-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); } .ml-list-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 6px; } .ml-list-head div { display: flex; flex-direction: column; } .ml-title { font-size: 15px; } .ml-count { color: var(--muted); font-size: 11px; } .ml-compose { width: 30px; height: 28px; border-radius: 7px; font-size: 16px; color: var(--muted); } .ml-compose:hover { background: var(--hover); color: var(--text); } .ml-search { margin: 0 10px 8px; padding: 5px 10px; border-radius: 8px; border: 0; background: rgba(127,127,127,.16); color: var(--text); font: inherit; } .ml-rows { flex: 1; overflow: auto; } .ml-row { position: relative; width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 9px 22px; border-bottom: 1px solid var(--line); text-align: left; color: var(--text); } .ml-row:hover { background: var(--hover); } .ml-row.active, .ml-row.sel { background: var(--accent); color: #fff; } .ml-row.active small, .ml-row.sel small { color: rgba(255,255,255,.85); } .ml-dot { position: absolute; left: 8px; top: 14px; width: 8px; height: 8px; border-radius: 50%; } .ml-row.unread .ml-dot { background: var(--accent); } .ml-row.unread.active .ml-dot { background: #fff; } .ml-r1 { display: flex; justify-content: space-between; gap: 8px; } .ml-r1 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .ml-row:not(.unread) .ml-r1 b { font-weight: 500; } .ml-r1 small { flex: none; color: var(--muted); font-size: 11px; } .ml-r2 { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; opacity: .9; } .ml-r2 i { font-style: normal; margin-right: 4px; } .ml-flag { color: #ff9500; } .ml-row.active .ml-flag { color: #fff; } .ml-more { width: 100%; padding: 10px; color: var(--accent); font-size: 12px; } .ml-read { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .ml-tools { display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--line); } .ml-tools span { flex: 1; } .ml-tools button { padding: 4px 9px; border-radius: 7px; color: var(--text); font-size: 12.5px; } .ml-tools button:hover { background: var(--hover); } .ml-tools button.on { color: #ff9500; } .ml-head { padding: 14px 20px 10px; border-bottom: 1px solid var(--line); } .ml-head h2 { margin: 0 0 10px; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; } .ml-from { display: flex; align-items: flex-start; gap: 10px; } .ml-from > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ml-from small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; } .ml-date { flex: none; color: var(--muted); font-size: 12px; } .ml-remote { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 20px; background: rgba(255,204,0,.14); font-size: 12px; color: var(--text); } .ml-remote button { padding: 3px 10px; border-radius: 999px; background: rgba(127,127,127,.2); color: var(--text); font-size: 12px; flex: none; } .ml-frame { flex: 1; width: 100%; min-height: 120px; border: 0; background: #fff; } .ml-atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--line); max-height: 30%; overflow: auto; } .ml-att { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(127,127,127,.14); color: var(--text); text-align: left; } .ml-att .ico { width: 28px; height: 28px; } .ml-att span { display: flex; flex-direction: column; } .ml-att b { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .ml-att small { color: var(--muted); font-size: 11px; } .ml-empty { margin: auto; padding: 30px 16px; color: var(--muted); text-align: center; } .ml-empty.sm { padding: 4px 8px; text-align: left; font-size: 12px; } .ml-empty.big { font-size: 15px; } .ml-err { margin: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255,59,48,.12); color: #ff3b30; font-size: 12px; } .ml-welcome { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 30px; } .ml-welcome .ico { width: 84px; height: 84px; } .ml-welcome h2 { margin: 6px 0 0; } .ml-welcome p { max-width: 440px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; } .ml-providers { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; width: min(460px, 100%); } .ml-providers button { padding: 12px; border-radius: 12px; background: rgba(127,127,127,.14); color: var(--text); font-size: 15px; font-weight: 600; } .ml-providers button:hover { background: var(--accent); color: #fff; } .ml-wait { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 10px; background: color-mix(in srgb, var(--win-bg) 70%, transparent); font-weight: 600; color: var(--text); border-radius: 0 0 var(--r-window) var(--r-window); } .ml-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(127,127,127,.3); border-top-color: var(--accent); animation: ml-spin .8s linear infinite; } @keyframes ml-spin { to { transform: rotate(360deg); } } @container (max-width: 820px) { .ml { grid-template-columns: 170px 1fr; } .ml-read { display: none; } } /* Composizione */ .mc { height: 100%; display: flex; flex-direction: column; min-height: 0; position: relative; } .mc.drop { outline: 2px dashed var(--accent); outline-offset: -6px; } .mc-bar { display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--line); } .mc-bar span { flex: 1; } .mc-bar button { min-width: 28px; padding: 4px 8px; border-radius: 7px; color: var(--text); font-size: 13px; } .mc-bar button:hover { background: var(--hover); } .mc-send { background: var(--accent) !important; color: #fff !important; font-weight: 600; padding: 4px 14px !important; } .mc-send:disabled { opacity: .5; } .mc-f { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--line); min-height: 34px; } .mc-f span { color: var(--muted); font-size: 13px; flex: none; min-width: 58px; } .mc-f input, .mc-f select { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; outline: none; padding: 7px 0; } .mc-cctoggle { color: var(--muted); font-size: 12px; } .mc-atts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; } .mc-atts:not(:empty) { padding: 8px 14px; border-bottom: 1px solid var(--line); } .mc-att { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 6px; border-radius: 8px; background: rgba(127,127,127,.14); font-size: 12px; } .mc-att .ico { width: 20px; height: 20px; } .mc-att small { color: var(--muted); } .mc-att button { color: var(--muted); font-size: 14px; padding: 0 4px; } .mc-body { flex: 1; overflow: auto; padding: 14px 18px; outline: none; line-height: 1.5; font-size: 14px; background: var(--win-bg); color: var(--text); user-select: text; } .mc-body blockquote { margin: 0 0 0 4px; padding-left: 12px; border-left: 3px solid rgba(127,127,127,.5); color: var(--muted); } .mc-body a { color: var(--accent); } .mc-sig { color: var(--muted); } .window .body:has(> .ml) { container-type: inline-size; } .am-tabs { display: flex; gap: 4px; justify-content: center; padding: 10px 0 0; } .am-tabs button { padding: 4px 14px; border-radius: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; } .am-tabs button.on { background: rgba(127,127,127,.22); color: var(--text); } .am-route { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; } .am-warn { color: #ff9500; font-weight: 600; } .am-h { margin: 14px 0 6px; font-size: 13px; } .am-link { color: var(--accent); font-size: inherit; } .st-bk-ico { width: 46px; height: 46px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #4cd964, #28a745); color: #fff; font-size: 24px; } .st-err { margin: 10px 0; padding: 8px 12px; border-radius: 10px; background: rgba(255,59,48,.12); color: #ff3b30; font-size: 12.5px; } .st-note code { font-size: 11.5px; padding: 1px 5px; border-radius: 5px; background: rgba(127,127,127,.16); user-select: all; } a.btn { text-decoration: none; display: inline-block; } /* ---------- Office (OnlyOffice) ---------- */ .of { position: relative; height: 100%; background: #fff; border-radius: 0 0 var(--r-window) var(--r-window); overflow: hidden; } .of > div[id], .of iframe { width: 100%; height: 100%; border: 0; display: block; } .of-wait { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #6e6e73; font-weight: 600; background: #fff; } /* ---------- App installata (PWA) ---------- */ /* Con i controlli della finestra sovrapposti (Chrome, Edge), la barra dei menu fa da barra del titolo */ @media (display-mode: window-controls-overlay) { .menubar { left: env(titlebar-area-x, 0); width: env(titlebar-area-width, 100%); right: auto; height: env(titlebar-area-height, var(--menubar-h)); -webkit-app-region: drag; app-region: drag; } .menubar button, .menubar a, .menubar input, .menubar [data-menu] { -webkit-app-region: no-drag; app-region: no-drag; } } /* Iscrizione: accettazione di Termini e Privacy; collegamenti legali sotto le schermate di accesso */ .auth-check { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 13px; line-height: 1.4; } .auth-check input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--accent); } .auth-check a { color: inherit; text-decoration: underline; } .auth-legal { margin: 6px 0 0; text-align: center; font-size: 12px; } .auth-legal a, .lock-legal a { color: #fff; opacity: .7; text-decoration: none; text-shadow: 0 1px 4px rgba(0,0,0,.3); font-size: 12px; } .auth-legal a:hover, .lock-legal a:hover { opacity: 1; text-decoration: underline; } .lock-legal { margin-top: -4px; } /* ---------- CheColore ---------- */ .cc { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100%; } .cc-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; overflow: auto; border-right: 1px solid var(--line); background: var(--win-sidebar, transparent); } .cc-side h4 { margin: 14px 8px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .cc-nav { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; text-align: left; cursor: default; } .cc-nav:hover { background: var(--hover); } .cc-nav.on { background: color-mix(in srgb, var(--accent) 22%, transparent); font-weight: 600; } .cc-nav span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-ico { width: 20px; text-align: center; font-style: normal; } .cc-add { color: var(--accent); } .cc-dot { width: 12px; height: 12px; margin: 0 4px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); display: inline-block; } .cc-main { overflow: auto; padding: 18px 22px 28px; } .cc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; } .cc-head h2 { margin: 0; font-size: 22px; flex: 1 1 auto; } .cc-head h2.cc-date::first-letter { text-transform: uppercase; } .cc-head > small { flex-basis: 100%; } .cc-muted { color: var(--muted); } .cc-empty { padding: 30px; color: var(--muted); text-align: center; } .cc-seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--hover); } .cc-seg button { border: 0; padding: 6px 16px; border-radius: 8px; background: none; color: var(--text); font: inherit; } .cc-seg button.on { background: var(--win-bg); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); font-weight: 600; } .cc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .cc-card { padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; } .cc-card.ready { box-shadow: inset 0 0 0 2px #22c55e; } .cc-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; } .cc-card header b { font-size: 17px; } .cc-card.ready header small { color: #16a34a; font-weight: 600; } .cc-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; } .cc-chip { position: relative; min-height: 64px; padding: 8px; border: 0; border-radius: 12px; background: var(--c); color: var(--ink); font: 600 14px/1.2 inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .12); transition: transform .12s, opacity .2s, filter .2s; } .cc-chip:active { transform: scale(.96); } .cc-chip.in { opacity: .45; filter: saturate(.6); } .cc-chip.in::after { content: "✓"; position: absolute; top: 4px; right: 8px; font-size: 18px; } .cc-grid { display: grid; grid-template-columns: 34px repeat(var(--days), minmax(0, 1fr)); gap: 4px; margin-bottom: 22px; } .cc-grid > b { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; align-self: end; padding-bottom: 2px; } .cc-gname { margin: 6px 0 8px; font-size: 15px; } .cc-grid > .cc-p { align-self: center; } .cc-cell { min-height: 38px; padding: 4px; border: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-align: center; font: 600 12px/1.15 inherit; color: var(--muted); background: color-mix(in srgb, var(--text) 5%, transparent); overflow: hidden; } .cc-cell.full { background: var(--c); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); } .cc-grid.edit .cc-cell:hover { outline: 2px solid var(--accent); outline-offset: 1px; } .cc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; } .cc-tools label { display: inline-flex; align-items: center; gap: 6px; } .cc-h { margin: 18px 0 10px; font-size: 14px; } .cc-h small { font-weight: 400; margin-left: 6px; } .cc-subjects { display: flex; flex-wrap: wrap; gap: 8px; } .cc-subject { padding: 9px 14px; border: 0; border-radius: 10px; background: var(--c); color: var(--ink); font: 600 13px inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } .cc-subject.cc-new { background: none; color: var(--accent); box-shadow: inset 0 0 0 1.5px currentColor; } .cc-palette { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; margin: 4px 0; } .cc-palette button, .cc-custom { aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); cursor: default; padding: 0; } .cc-palette button.on { outline: 3px solid var(--accent); outline-offset: 2px; } .cc-custom { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); } .cc-custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; } .cc-welcome { max-width: 460px; margin: 40px auto; text-align: center; } .cc-welcome .ico { width: 72px; height: 72px; display: inline-block; } .cc-welcome p { color: var(--muted); line-height: 1.5; } /* Widget */ .wg-cc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .wg-cc-head b { color: var(--accent); } .wg-cc-head small { color: var(--muted); text-transform: capitalize; } .wg-cc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; } .wg-cc-row b { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wg-cc-row span { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .wg-cc-row i { width: 16px; height: 16px; border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); } .wg-cc-row i.in { opacity: .3; } /* ---------- Tempesto ---------- */ .tp { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100%; } .tp-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; overflow: auto; border-right: 1px solid var(--line); background: var(--win-sidebar, transparent); } .tp-side h4 { margin: 14px 8px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .tp-addbtn { margin-bottom: 10px; } .tp-nav { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; text-align: left; cursor: default; } .tp-nav:hover { background: var(--hover); } .tp-nav.on { background: color-mix(in srgb, var(--accent) 22%, transparent); font-weight: 600; } .tp-nav i { width: 20px; text-align: center; font-style: normal; } .tp-nav span { flex: 1; } .tp-nav small { color: var(--muted); font-variant-numeric: tabular-nums; } .tp-main { overflow: auto; padding: 18px 22px 28px; } .tp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; } .tp-head h2 { margin: 0; font-size: 22px; flex: 1 1 auto; } .tp-muted { color: var(--muted); } .tp-empty { padding: 30px; color: var(--muted); text-align: center; } .tp-badges { display: flex; gap: 6px; } .tp-b { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .tp-b.scaduto { background: #fee2e2; color: #b91c1c; } .tp-b.oggi { background: #ffedd5; color: #c2410c; } .tp-b.presto { background: #fef3c7; color: #b45309; } .tp-b.ok { background: #dcfce7; color: #15803d; } .tp-list { display: flex; flex-direction: column; gap: 6px; } .tp-row { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); cursor: default; } .tp-row::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: #84cc16; } .tp-row.s-scaduto::before { background: #ef4444; } .tp-row.s-oggi::before { background: #f97316; } .tp-row.s-presto::before { background: #f59e0b; } .tp-row:hover { background: var(--hover); } .tp-thumb { width: 46px; height: 46px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden; } .tp-thumb img { width: 100%; height: 100%; object-fit: contain; } .tp-info { min-width: 0; display: flex; flex-direction: column; } .tp-info b, .tp-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tp-info em { font-style: normal; color: var(--muted); font-weight: 500; } .tp-info small, .tp-exp small { color: var(--muted); font-size: 12px; } .tp-exp { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .tp-acts { display: flex; gap: 4px; } .tp-acts button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--hover); color: var(--text); font-size: 15px; } .tp-acts button:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); } .tp-acts [data-close="consumato"] { color: #16a34a; font-weight: 700; } .tp-welcome { max-width: 460px; margin: 40px auto; text-align: center; } .tp-welcome .ico { width: 72px; height: 72px; display: inline-block; } .tp-welcome p { color: var(--muted); line-height: 1.5; } .tp-add { max-width: 480px; display: flex; flex-direction: column; gap: 12px; } .tp-add input:not([type=radio]) { width: 100%; box-sizing: border-box; } .tp-add label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); } .tp-code { display: flex; gap: 8px; } .tp-code input { flex: 1; font-size: 16px; letter-spacing: .06em; } .tp-link { align-self: flex-start; background: none !important; color: var(--accent) !important; box-shadow: none !important; padding-left: 0 !important; } .tp-msg { min-height: 1em; margin: 0; color: #dc2626; font-size: 13px; } .tp-cam { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; } .tp-cam video { width: 100%; height: 100%; object-fit: cover; } .tp-cam i { position: absolute; left: 12%; right: 12%; top: 45%; height: 2px; background: #ef4444; box-shadow: 0 0 12px #ef4444; } .tp-found { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); } .tp-found img, .tp-found > span { width: 64px; height: 64px; border-radius: 10px; object-fit: contain; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; flex: none; } .tp-found div { display: flex; flex-direction: column; } .tp-found small { color: var(--muted); } .tp-seg { display: flex; gap: 6px; } .tp-seg label { flex: 1; flex-direction: row !important; } .tp-seg input { position: absolute; opacity: 0; pointer-events: none; } .tp-seg span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 9px 6px; border-radius: 10px; background: var(--hover); color: var(--text); font-size: 13px; text-align: center; } .tp-seg span small { color: var(--muted); font-size: 11px; } .tp-seg input:checked + span { background: color-mix(in srgb, var(--accent) 28%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); font-weight: 600; } .tp-seg input:focus-visible + span { outline: 2px solid var(--accent); } .tp-qty { display: inline-flex; align-items: center; gap: 6px; } .tp-qty input { width: 64px !important; text-align: center; } .tp-qty button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--hover); color: var(--text); font-size: 18px; } .tp-form-acts { display: flex; justify-content: space-between; gap: 8px; } .tp-ings { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; } .tp-ing { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--hover); cursor: default; box-shadow: inset 0 0 0 1px var(--line); } .tp-ing.on { background: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); font-weight: 600; } .tp-ing.s-presto, .tp-ing.s-oggi { box-shadow: inset 0 0 0 1.5px #f59e0b; } .tp-ing.on.s-presto, .tp-ing.on.s-oggi { box-shadow: inset 0 0 0 2px var(--accent); } .tp-ing.hard { text-decoration: line-through; opacity: .6; } .tp-ing button { border: 0; background: none; color: var(--muted); font-size: 12px; padding: 2px 4px; } .tp-sites { display: flex; flex-wrap: wrap; gap: 8px; } .tp-veg { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; font-size: 13px; } .tp-h { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; } .tp-recipes { display: flex; flex-direction: column; gap: 4px; } .tp-recipe { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--text) 5%, transparent); } .tp-recipe a { color: var(--accent); text-decoration: none; } .tp-recipe button { border: 0; background: none; color: var(--muted); } .tp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; } .tp-tiles div { padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 5%, transparent); display: flex; flex-direction: column; } .tp-tiles span { color: var(--muted); font-size: 12px; } .tp-tiles b { font-size: 28px; } .tp-tiles small { color: var(--muted); } .tp-chart { display: flex; align-items: flex-end; gap: 14px; height: 200px; padding: 0 6px; border-bottom: 1px solid var(--line); } .tp-bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; } .tp-stack { flex: 1; width: 100%; max-width: 48px; display: flex; flex-direction: column; justify-content: flex-end; } .tp-stack i { display: block; width: 100%; } .tp-stack i.c { background: #84cc16; border-radius: 0 0 4px 4px; } .tp-stack i.d { background: #ef4444; border-radius: 6px 6px 0 0; } .tp-stack i.c:first-child, .tp-stack i.d:only-child { border-radius: 6px 6px 0 0; } .tp-bar small { color: var(--muted); font-size: 12px; margin-bottom: -22px; } .tp-legend { margin-top: 30px; display: flex; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--muted); } .tp-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .tp-legend i.c { background: #84cc16; } .tp-legend i.d { background: #ef4444; } /* Widget */ .wg-tp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .wg-tp-head b { color: var(--accent); } .wg-tp-head span { font-size: 22px; font-weight: 700; } .wg-tp-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; } .wg-tp-row i { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; } .wg-tp-row.s-scaduto i { background: #ef4444; } .wg-tp-row.s-oggi i { background: #f97316; } .wg-tp-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wg-tp-row small { color: var(--muted); } html.phone .tp-row { grid-template-columns: 40px minmax(0, 1fr) auto; } html.phone .tp-exp { grid-column: 2; align-items: flex-start; flex-direction: row; } html.phone .tp-acts { grid-row: 1 / span 2; grid-column: 3; flex-direction: column; } html.phone .tp-thumb { width: 40px; height: 40px; } html.phone .tp-main { padding: 14px; } .tp-add input:not([type=radio]):not([type=checkbox]) { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); font: inherit; color-scheme: light dark; } .tp-add input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } .window.stage-thumb.stage-drop { outline: 3px solid var(--accent); outline-offset: 4px; } /* Assistenza remota */ .rm-panel { position: fixed; z-index: 99995; left: 50%; bottom: calc(var(--dock-size, 54px) + 34px); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 16px; background: var(--glass); color: var(--text); border: .5px solid var(--glass-border); box-shadow: 0 12px 40px rgba(0,0,0,.35); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); font-size: 13px; } .rm-panel > b { width: 100%; } .rm-panel > span { flex: 1; min-width: 200px; } .rm-panel > div { display: flex; gap: 8px; margin-left: auto; } .rm-panel.live { top: calc(var(--menubar-h, 26px) + 6px); bottom: auto; padding: 6px 8px 6px 14px; background: rgba(255, 59, 48, .95); color: #fff; border: 0; } .rm-panel.live .btn.danger { background: #fff; color: #d70015; } .rm-rec { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: rmRec 1.2s ease-in-out infinite; } @keyframes rmRec { 50% { opacity: .3; } } .rmw { position: relative; height: 100%; background: #000; display: flex; align-items: center; justify-content: center; } .rmw video, .rmw img { width: 100%; height: 100%; object-fit: contain; } .rmw-wait { color: #fff; opacity: .8; } .rm-panel.live.ctl { background: rgba(255, 149, 0, .96); } .rm-cursor { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; display: flex; align-items: flex-start; gap: 2px; transition: transform .06s linear; } .rm-cursor span { margin-top: 18px; padding: 2px 7px; border-radius: 8px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.3); } .rmw-wrap { display: flex; flex-direction: column; height: 100%; } .rmw-wrap .rmw { flex: 1; min-height: 0; outline: none; } .rmw.ctl { cursor: default; box-shadow: inset 0 0 0 3px #ff9500; } .rmw-bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-size: 12px; border-bottom: 1px solid var(--line); } .rmw-bar span { flex: 1; } .rmw-on { width: 9px; height: 9px; border-radius: 50%; background: #ff9500; } /* ---------- MarX Social: bacheca di sughero con foglietti ---------- */ .so { --tm: #5b5fc7; position: relative; height: 100%; display: grid; grid-template-columns: 230px 1fr; min-height: 0; } .so-drop .so-board { outline: 3px dashed #fff; outline-offset: -10px; } .so-side { overflow: auto; padding: 12px 10px; background: var(--win-sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; } .so-side h5 { display: flex; justify-content: space-between; align-items: center; margin: 14px 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .so-side h5 button { width: 22px; height: 22px; border-radius: 6px; color: var(--muted); font-size: 15px; } .so-side h5 button:hover { background: var(--hover); color: var(--text); } .so-me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; text-align: left; color: var(--text); } .so-me:hover, .so-nav:hover, .so-mini:hover { background: var(--hover); } .so-me span, .so-mini span { display: flex; flex-direction: column; min-width: 0; } .so-me small, .so-mini small { color: var(--muted); font-size: 11px; } .so-me b, .so-mini b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .so-nav { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; text-align: left; color: var(--text); } .so-nav > span { width: 22px; text-align: center; font-size: 15px; } .so-nav b { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .so-nav small { color: var(--muted); font-size: 11px; } .so-nav em { font-style: normal; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #c4314b; color: #fff; font-size: 11px; text-align: center; } .so-nav.on { background: color-mix(in srgb, #c98a4b 30%, transparent); } .so-nav.on b { font-weight: 700; } .so-mini { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; text-align: left; color: var(--text); font-size: 13px; } .so-hint { margin: 4px 10px; color: var(--muted); font-size: 12px; } /* sughero: due sfumature e una grana fatta di puntini */ .so-board { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background-color: #b98552; background-image: radial-gradient(rgba(70,40,15,.35) 1px, transparent 1.4px), radial-gradient(rgba(255,230,190,.25) 1px, transparent 1.4px), radial-gradient(ellipse at 30% 20%, rgba(255,220,170,.35), transparent 60%), linear-gradient(160deg, #c99560, #a8723f); background-size: 7px 7px, 11px 11px, 100% 100%, 100% 100%; background-position: 0 0, 3px 5px, 0 0, 0 0; box-shadow: inset 0 0 0 10px #7a5230, inset 0 0 0 12px #5e3d20, inset 0 0 40px rgba(0,0,0,.35); } .so-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 18px 24px 8px; } .so-title { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 6px 14px 6px 10px; border-radius: 4px; background: #fffdf6; color: #2b2b2b; box-shadow: 0 3px 8px rgba(0,0,0,.3); transform: rotate(-.6deg); max-width: max-content; } .so-title > span { font-size: 26px; } .so-title h2 { margin: 0; font-size: 18px; } .so-title small { color: #6b6b6b; font-size: 12px; } .so-chip { padding: 4px 10px; border-radius: 999px; background: #fffdf6; color: var(--tm); font-weight: 600; box-shadow: 0 2px 5px rgba(0,0,0,.25); } .so-tools { display: flex; gap: 6px; align-items: center; } .so-btn { padding: 7px 14px; border-radius: 8px; background: #fffdf6; color: #2b2b2b; font-weight: 600; box-shadow: 0 2px 5px rgba(0,0,0,.25); } .so-btn:hover { filter: brightness(.96); } .so-btn.main { background: var(--tm); color: #fff; } .so-btn:disabled { opacity: .5; } .so-ic { width: 34px; height: 34px; border-radius: 8px; background: #fffdf6; color: #2b2b2b; font-size: 16px; box-shadow: 0 2px 5px rgba(0,0,0,.25); flex: none; } .so-ic:hover { filter: brightness(.95); } .so-scroll { flex: 1; overflow: auto; padding: 8px 24px 30px; } .so-pins { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; } .so-pins:empty { display: none; } .so-sheet { position: relative; padding: 18px 20px 14px; background: #fffef9; color: #222; border-radius: 2px; cursor: pointer; background-image: repeating-linear-gradient(transparent 0 23px, rgba(80,120,200,.18) 23px 24px); box-shadow: 0 6px 14px rgba(0,0,0,.35); } .so-sheet > small { display: block; color: #b42318; font-weight: 700; margin-bottom: 6px; } .so-wall { column-width: 210px; column-gap: 18px; padding-top: 2px; } .so-blank { column-span: all; margin: 50px auto; max-width: 360px; padding: 24px; background: #fff9c4; color: #333; text-align: center; transform: rotate(-1.5deg); box-shadow: 0 6px 14px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 6px; } /* il foglietto */ .so-note { --paper: #fff59d; position: relative; break-inside: avoid; display: inline-flex; width: 100%; vertical-align: top; flex-direction: column; gap: 8px; margin: 12px 0 16px; padding: 20px 14px 10px; background: var(--paper); color: #262626; transform: rotate(var(--rot)); box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 8px 14px -6px rgba(0,0,0,.55); cursor: pointer; transition: transform .15s, box-shadow .15s; background-image: linear-gradient(180deg, rgba(255,255,255,.25), transparent 40%); border-bottom-right-radius: 18px 4px; } .so-note:hover, .so-note:focus-visible { transform: rotate(0) scale(1.03); z-index: 2; box-shadow: 0 14px 24px -8px rgba(0,0,0,.6); outline: none; } .c-yellow { --paper: #fff59d; } .c-pink { --paper: #f8bbd0; } .c-green { --paper: #c5e1a5; } .c-blue { --paper: #b3e5fc; } .c-purple { --paper: #d1c4e9; } .c-orange { --paper: #ffcc80; } .c-gold { --paper: #fff3c4; } .so-note.k-kudos { background-image: linear-gradient(135deg, #fff8dc, #ffe08a); border: 2px solid #d4a017; } .so-note.hid { opacity: .55; } .so-tack { position: absolute; top: -7px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9fb8ff, #3557c8 60%, #1d327a); box-shadow: 2px 3px 3px rgba(0,0,0,.45); } .so-tack.red { background: radial-gradient(circle at 35% 30%, #ff9a9a, #d42a2a 60%, #7a1010); } .so-note:nth-child(3n) .so-tack { background: radial-gradient(circle at 35% 30%, #ffb3b3, #d33 60%, #811); } .so-note:nth-child(3n+1) .so-tack { background: radial-gradient(circle at 35% 30%, #b8f5b0, #2f9e3a 60%, #145a1c); } .so-text { font-family: "Comic Neue", "Segoe Print", "Bradley Hand", var(--font); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; user-select: text; } .so-note .so-text { display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; } .so-text a { color: #1d4ed8; } .so-tag, .so-at { padding: 0; color: #1d4ed8; font: inherit; font-weight: 700; } .so-tag:hover, .so-at:hover { text-decoration: underline; } .so-at.plain { color: inherit; font-weight: 700; font-size: 12.5px; } .so-photo { padding: 7px 7px 20px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3); line-height: 0; transform: rotate(1.2deg); } .so-photo img { width: 100%; max-height: 420px; object-fit: cover; display: block; } .so-card .so-photo { transform: none; align-self: center; } .so-card .so-photo img { max-height: 460px; object-fit: contain; width: auto; max-width: 100%; } .so-file { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; background: rgba(255,255,255,.6); color: #222; text-align: left; } .so-file .ico { width: 30px; height: 30px; flex: none; } .so-file span { display: flex; flex-direction: column; min-width: 0; } .so-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .so-file small { color: #555; font-size: 11px; } .so-video { width: 100%; max-height: 380px; background: #000; } .so-link { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: 6px; background: rgba(255,255,255,.55); color: #222; text-decoration: none; border-left: 3px solid #1d4ed8; } .so-link small { color: #555; font-size: 10px; text-transform: uppercase; } .so-link b { font-size: 13px; } .so-link span { font-size: 12px; color: #444; } .so-note footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 6px; border-top: 1px dashed rgba(0,0,0,.18); } .so-by { display: flex; align-items: center; gap: 7px; text-align: left; color: inherit; min-width: 0; } .so-by span { display: flex; flex-direction: column; min-width: 0; } .so-by small { color: rgba(0,0,0,.55); font-size: 11px; } .so-card .so-by small { color: var(--muted); } .so-note .ms-av.sm { width: 24px; height: 24px; font-size: 10px; } .so-counts { display: flex; gap: 8px; font-size: 12px; color: rgba(0,0,0,.65); } .so-where { align-self: flex-start; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.08); font-size: 11px; color: rgba(0,0,0,.65); } .so-flag { padding: 4px 8px; border-radius: 4px; background: #fee2e2; color: #991b1b; font-size: 12px; font-weight: 600; } /* sondaggi, eventi, elogi */ .so-poll { display: flex; flex-direction: column; gap: 5px; } .so-poll button { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; border-radius: 6px; background: rgba(255,255,255,.55); color: #222; text-align: left; overflow: hidden; border: 1.5px solid transparent; } .so-poll button i { position: absolute; inset: 0 auto 0 0; background: rgba(91,95,199,.22); transition: width .4s; } .so-poll button span, .so-poll button b { position: relative; } .so-poll button.on { border-color: var(--tm); } .so-poll button:hover { background: rgba(255,255,255,.8); } .so-poll small { color: rgba(0,0,0,.55); font-size: 11px; } .so-card .so-poll button { background: rgba(127,127,127,.12); color: var(--text); } .so-card .so-poll small { color: var(--muted); } .so-event { display: flex; gap: 10px; align-items: center; } .so-cal { flex: none; width: 50px; border-radius: 6px; overflow: hidden; background: #fff; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); color: #222; } .so-cal small { display: block; background: #d42a2a; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 1px 0; } .so-cal b { display: block; font-size: 22px; line-height: 30px; } .so-event > div:last-child { display: flex; flex-direction: column; } .so-event small { font-size: 12px; opacity: .75; } .so-rsvp { display: flex; gap: 6px; } .so-rsvp button { flex: 1; padding: 5px; border-radius: 6px; background: rgba(255,255,255,.6); color: #222; font-weight: 600; font-size: 12px; border: 1.5px solid transparent; } .so-rsvp button.on { background: #2f9e3a; color: #fff; } .so-rsvp button.on.no { background: #8a8886; } .so-evx { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .so-evx small { color: var(--muted); } .so-kudos { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 4px 0; } .so-kudos b { font-size: 17px; } .so-kudos span { font-size: 13px; } /* finestre sopra la bacheca */ .so-over { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding: 30px 16px; overflow: auto; background: rgba(20,12,4,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .so-card { --paper: var(--win-bg); width: min(600px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 6px; background: var(--win-bg); color: var(--text); box-shadow: 0 20px 50px rgba(0,0,0,.5); border-top: 8px solid var(--paper); } .so-card > header { display: flex; align-items: center; gap: 8px; } .so-card > header > :first-child { flex: 1; } .so-card .so-ic { background: var(--hover); color: var(--text); box-shadow: none; } .so-card .so-text { font-size: 16px; } .so-card .so-file, .so-card .so-link { background: rgba(127,127,127,.12); color: var(--text); } .so-card .so-link span, .so-card .so-link small { color: var(--muted); } .so-card-body { display: flex; flex-direction: column; gap: 10px; } .so-reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .so-reacts button { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 16px; transition: transform .1s; } .so-reacts button:hover { transform: scale(1.12); } .so-reacts button.on { border-color: var(--tm); background: color-mix(in srgb, var(--tm) 18%, transparent); } .so-reacts small { font-size: 11px; color: var(--muted); } .so-reacts > span { margin-left: auto; color: var(--muted); font-size: 12px; } .so-cmts { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow: auto; } .so-cmt { display: flex; gap: 8px; } .so-cmt.reply { margin-left: 40px; } .so-cmt > div { min-width: 0; } .so-cb { padding: 6px 11px; border-radius: 12px; background: rgba(127,127,127,.13); display: flex; flex-direction: column; align-items: flex-start; overflow-wrap: anywhere; user-select: text; } .so-cm { display: flex; gap: 10px; padding: 2px 10px 0; font-size: 11px; color: var(--muted); } .so-cm button { font-size: 11px; font-weight: 600; color: var(--muted); } .so-cm button:hover { color: var(--tm); text-decoration: underline; } .so-cform { display: flex; gap: 8px; align-items: center; } .so-cform input, .so-f input, .so-f select, .so-opts input, .so-compose textarea, .so-compose footer select { min-width: 0; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(127,127,127,.08); color: var(--text); font: inherit; outline: none; } .so-cform input { flex: 1; border-radius: 999px; } .so-cform input:focus, .so-f input:focus, .so-opts input:focus, .so-compose textarea:focus { border-color: var(--tm); } .so-compose textarea { width: 100%; resize: vertical; line-height: 1.45; font-size: 15px; } .so-kinds { display: flex; gap: 2px; } .so-kinds button { width: 32px; height: 30px; border-radius: 6px; font-size: 16px; opacity: .55; } .so-kinds button.on { opacity: 1; background: var(--hover); } .so-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); flex: 1; } .so-f input, .so-f select { color: var(--text); font-size: 14px; } .so-row2 { display: flex; gap: 10px; flex-wrap: wrap; } .so-opts { display: flex; flex-direction: column; gap: 6px; } .so-opts button { align-self: flex-start; color: var(--tm); font-weight: 600; font-size: 13px; } .so-badges { display: flex; flex-wrap: wrap; gap: 6px; } .so-badges input { display: none; } .so-badges span { display: inline-block; padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--line); cursor: pointer; font-size: 13px; } .so-badges input:checked + span { border-color: #d4a017; background: #fff3c4; color: #222; font-weight: 600; } .so-attach { align-self: flex-start; display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tm) 15%, transparent); font-size: 12px; } .so-attach button { width: 20px; height: 20px; border-radius: 50%; color: var(--muted); } .so-compose footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .so-compose footer select { margin-left: auto; max-width: 220px; } .so-swatches { display: flex; gap: 4px; margin-right: 6px; } .so-swatches button { width: 22px; height: 22px; border-radius: 4px; background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.3); } .so-swatches button.on { outline: 2px solid var(--tm); outline-offset: 2px; } .so-sugg { position: absolute; z-index: 40; min-width: 220px; padding: 4px; border-radius: 8px; background: var(--lg-tint-strong, var(--win-bg)); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: var(--lg-shadow, var(--shadow)); display: flex; flex-direction: column; } .so-sugg button { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; text-align: left; color: var(--text); } .so-sugg button.on, .so-sugg button:hover { background: var(--tm); color: #fff; } .so-profile { align-items: stretch; } .so-pf-top { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; margin-top: -10px; } .so-pf-top .ms-av.big { width: 84px; height: 84px; font-size: 30px; } .so-pf-top .ms-pres { width: 18px; height: 18px; right: 2px; bottom: 2px; border-color: var(--win-bg); } .so-pf-top h3 { margin: 6px 0 0; font-size: 20px; } .so-pf-top small { color: var(--muted); } .so-pf-groups, .so-pf-kudos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; } .so-pf-groups span { padding: 2px 9px; border-radius: 999px; background: var(--hover); font-size: 12px; } .so-pf-kudos span { padding: 4px 10px; border-radius: 999px; background: #fff3c4; color: #222; border: 1px solid #d4a017; font-size: 12px; font-weight: 600; } .so-pf-bio { margin: 0; text-align: center; font-style: italic; color: var(--muted); } .so-profile dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; } .so-profile dt { color: var(--muted); } .so-profile dd { margin: 0; } .so-pf-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .so-card .so-btn:not(.main) { background: var(--hover); color: var(--text); box-shadow: none; } .so-more { display: block; margin: 10px auto; padding: 7px 16px; border-radius: 999px; background: #fffdf6; color: #333; box-shadow: 0 2px 5px rgba(0,0,0,.3); } .so-news { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 7px 16px; border-radius: 999px; background: var(--tm); color: #fff; font-weight: 600; box-shadow: 0 3px 10px rgba(0,0,0,.35); } .so-emo { bottom: auto; } html.phone .so { grid-template-columns: 1fr; } html.phone .so-side { display: none; } html.phone .so-head { padding: 14px 14px 6px; } html.phone .so-scroll { padding: 6px 14px 24px; } html.phone .so-wall { column-width: 150px; column-gap: 12px; } /* ---------- Messaggi: gruppi, chat di reparto, @menzioni ---------- */ .ms-rep { padding: 0 5px; border-radius: 4px; background: color-mix(in srgb, var(--tm, #5b5fc7) 20%, transparent); color: var(--tm, #5b5fc7); font-size: 10px; font-weight: 600; } .ms-at { color: var(--tm, #5b5fc7); font-weight: 600; } .ms-at.me { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, #f59e0b 30%, transparent); color: inherit; } .ms-compose { position: relative; } .ms-msug { position: absolute; z-index: 8; left: 20px; bottom: calc(100% - 4px); min-width: 240px; padding: 4px; border-radius: 8px; display: flex; flex-direction: column; background: var(--lg-tint-strong, var(--win-bg)); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: var(--lg-shadow, var(--shadow)); } .ms-msug button { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; text-align: left; color: var(--text); } .ms-msug button.on, .ms-msug button:hover { background: var(--tm, #5b5fc7); color: #fff; } .ms-msug small { opacity: .75; font-size: 11px; } .ms-panel-bg { position: absolute; inset: 0; z-index: 30; display: flex; justify-content: flex-end; background: rgba(0,0,0,.25); } .ms-panel { --tm: #5b5fc7; width: min(380px, 100%); height: 100%; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--win-bg); box-shadow: -10px 0 30px rgba(0,0,0,.3); } .ms-panel header { display: flex; align-items: center; gap: 12px; } .ms-panel header > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ms-panel h3 { margin: 0; font-size: 17px; } .ms-panel header small { color: var(--muted); font-size: 12px; } .ms-gname { width: 100%; padding: 5px 8px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--text); font: 700 17px var(--font); outline: none; } .ms-gname:hover { border-color: var(--line); } .ms-gname:focus { border-color: var(--tm); background: rgba(127,127,127,.08); } .ms-px { width: 30px; height: 30px; flex: none; border-radius: 6px; color: var(--muted); font-size: 16px; } .ms-px:hover { background: var(--hover); color: var(--text); } .ms-pchecks { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 8px; background: rgba(127,127,127,.08); font-size: 13px; } .ms-pchecks small { color: var(--muted); } .ms-panel h4 { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .ms-panel h4 button { text-transform: none; letter-spacing: 0; color: var(--tm); font-weight: 600; font-size: 13px; } .ms-plist { display: flex; flex-direction: column; gap: 2px; } .ms-prow { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; } .ms-prow:hover { background: var(--hover); } .ms-prow > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ms-prow small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; } .ms-prow em { font-style: normal; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--tm) 18%, transparent); color: var(--tm); } .ms-pleave { align-self: flex-start; margin-top: auto; padding: 7px 12px; border-radius: 6px; color: #c4314b; font-weight: 600; } .ms-pleave:hover { background: color-mix(in srgb, #c4314b 12%, transparent); } /* ---------- Impostazioni: pannello a riquadri ---------- */ .stx { height: 100%; display: flex; flex-direction: column; min-height: 0; } .stx-top { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line); } .stx-top input { margin-left: auto; width: min(300px, 45%); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(127,127,127,.1); color: var(--text); font: inherit; outline: none; } .stx-top input:focus { border-color: var(--accent); } .stx-back { width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--text); background: rgba(127,127,127,.14); } .stx-back:hover { background: var(--hover); } .stx-crumb { display: flex; align-items: center; gap: 8px; font-size: 15px; min-width: 0; } .stx-crumb button { color: var(--muted); } .stx-crumb button:hover { color: var(--accent); text-decoration: underline; } .stx-crumb > span { color: var(--muted); } .stx-crumb b { display: flex; align-items: center; gap: 8px; } .stx-body { flex: 1; overflow: auto; } .stx-wrap { max-width: 860px; margin: 0 auto; padding: 18px 22px 30px; } .stx .st-main { overflow: visible; padding: 0; } .stx-hello { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; margin-bottom: 8px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); } .stx-hello h2 { margin: 0; font-size: 22px; } .stx-hello small { color: var(--muted); } .stx-cat { margin: 22px 4px 10px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); } .stx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .stx-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 14px; text-align: left; color: var(--text); background: rgba(127,127,127,.09); border: 1px solid var(--line); transition: transform .12s, box-shadow .12s, border-color .12s; } .stx-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 8px 20px rgba(0,0,0,.18); } .stx-tile .st-ico, .stx-tile .st-avatar { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 4px; font-size: 16px; } .stx-tile .st-avatar { border-radius: 50%; } .stx-tile .st-ico svg { width: 26px; height: 26px; } .stx-tile b { font-size: 14px; } .stx-tile small { color: var(--muted); font-size: 12px; line-height: 1.3; } .stx-hello .st-avatar { width: 52px; height: 52px; font-size: 19px; } .stx-crumb .st-ico { width: 22px; height: 22px; } .stx-crumb .st-ico svg { width: 14px; height: 14px; } html.phone .stx-top { flex-wrap: wrap; } html.phone .stx-top input { width: 100%; margin: 0; } html.phone .stx-grid { grid-template-columns: repeat(2, 1fr); } /* ---------- Finestre in stile MarX: titolo a sinistra con l'icona, pulsanti a destra, striscia d'accento sulla finestra attiva ---------- */ html[data-skin][data-skin] { --r-window: 10px; } html[data-skin][data-skin] .window { border-radius: var(--r-window); } html[data-skin][data-skin] .window::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--r-window) var(--r-window) 0 0; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #fff)); opacity: 1; transition: opacity .2s; pointer-events: none; } html[data-skin][data-skin] .window.inactive::before { opacity: 0; } html[data-skin][data-skin] .window > .titlebar { height: 40px; padding: 0 8px 0 12px; gap: 8px; background: color-mix(in srgb, var(--win-bg) 88%, var(--accent)); border-bottom: 1px solid var(--line); } html[data-skin][data-skin] .window.inactive > .titlebar { background: var(--win-bg); } html[data-skin][data-skin] .titlebar .title { order: 1; flex: 1; text-align: left; margin: 0; font-size: 13px; letter-spacing: .01em; } html[data-skin][data-skin] .titlebar .t-ico { order: 0; display: flex; } html[data-skin][data-skin] .t-ico .ico { width: 20px; height: 20px; border-radius: 6px; } html[data-skin][data-skin] .t-ico .ico::before { transform: scale(.42); } html[data-skin][data-skin] .t-ico .ico::after { transform: scale(.42); } html[data-skin][data-skin] .titlebar .t-more { order: 2; } html[data-skin][data-skin] .window > .titlebar .lights { order: 3; margin-left: auto; gap: 2px; } html[data-skin][data-skin] .lights .l-min { order: 1; } html[data-skin][data-skin] .lights .l-max { order: 2; } html[data-skin][data-skin] .lights .l-close { order: 3; } html[data-skin][data-skin] .lights button { width: 36px; height: 28px; border-radius: 6px; border: 0 !important; background: transparent !important; color: var(--text); opacity: .75; } html[data-skin][data-skin] .lights button:hover { background: var(--hover) !important; opacity: 1; } html[data-skin][data-skin] .lights .l-close:hover { background: #d13438 !important; color: #fff; } html[data-skin][data-skin] .window.inactive .lights button { opacity: .4; } html[data-skin][data-skin] .window > .win-body { border-radius: 0 0 var(--r-window) var(--r-window); } html.phone[data-skin][data-skin] .t-ico { display: none; } /* pulsanti finestra: al passaggio si accendono col colore principale (prima diventavano grigi e si vedevano poco) */ html[data-skin][data-skin] .lights button { opacity: .9; } html[data-skin][data-skin] .lights button::after { width: 12px; height: 12px; } html[data-skin][data-skin] .lights button:hover { background: color-mix(in srgb, var(--accent) 32%, transparent) !important; color: var(--text); opacity: 1; } html[data-skin][data-skin] .lights .l-close:hover { background: #d13438 !important; color: #fff; } html[data-skin][data-skin] .lights button:active { transform: scale(.94); } /* ---------- Avvisi a schermo più grandi e leggibili ---------- */ .toast { min-width: 340px; max-width: 440px; padding: 16px 20px 16px 18px; border-radius: 14px; font-size: 15px; line-height: 1.4; gap: 4px; border-left: 4px solid var(--accent); box-shadow: 0 18px 50px rgba(0,0,0,.35), 0 0 0 .5px rgba(127,127,127,.3); } .dropdown, .ctx { } .toast { background: rgba(250, 250, 253, .92); } :root[data-theme="dark"] .toast { background: rgba(32, 32, 40, .92); } .toast small { font-size: 12px; color: var(--accent); } .toast.has-actions { min-width: 360px; } .toast-acts { margin-top: 10px; gap: 8px; } .toast-acts button { padding: 7px 16px; font-size: 13.5px; } .toast-acts button:hover { filter: brightness(1.1); background: color-mix(in srgb, var(--accent) 30%, transparent); } .toast-acts button.primary:hover { background: var(--accent); } html.phone .toast { min-width: 0; max-width: calc(100vw - 24px); } .st-role { font-weight: 600; color: var(--accent); } .st-role.sys { color: #d97706; } /* Accesso alle aziende */ .lock-logo { overflow: hidden; background: #fff !important; } .lock-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; } .lock-company { margin: 6px 0 2px; font-size: 22px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35); text-align: center; } .auth-slug { display: flex; align-items: center; gap: 6px; } .auth-slug input { flex: 1; min-width: 0; text-align: right; } .auth-slug span { color: var(--muted); font-size: 13px; white-space: nowrap; } .st-tlogo { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: #fff; } .st-bar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: rgba(127,127,127,.25); vertical-align: middle; overflow: hidden; } .st-bar i { display: block; height: 100%; background: var(--accent); } /* ---------- Chiamate e videochiamate ---------- */ .cl { height: 100%; display: flex; flex-direction: column; background: #111318; color: #fff; } .cl-status { padding: 10px 16px; font-size: 13px; color: rgba(255,255,255,.75); text-align: center; } .cl-grid { flex: 1; min-height: 0; display: grid; gap: 8px; padding: 0 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows: 1fr; } .cl-grid[data-n="1"] { grid-template-columns: 1fr; } .cl-grid[data-n="2"] { grid-template-columns: 1fr 1fr; } .cl-tile { position: relative; min-height: 0; border-radius: 12px; overflow: hidden; background: #1d2027; display: flex; align-items: center; justify-content: center; } .cl-tile video { width: 100%; height: 100%; object-fit: cover; background: #000; } .cl-tile.screen video { object-fit: contain; } .cl-tile.mirror video { transform: scaleX(-1); } .cl-av { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; } .cl-tile.novideo video { visibility: hidden; } .cl-tile.novideo .cl-av { display: flex; } .cl-av .ms-av.big { width: 96px; height: 96px; font-size: 34px; } .cl-name { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 6px; background: rgba(0,0,0,.55); font-size: 13px; } .cl-name small { opacity: .7; } .cl-tile.me { outline: 2px solid rgba(255,255,255,.12); } .cl-grid[data-n="2"] .cl-tile.me { position: absolute; right: 22px; bottom: 86px; width: 200px; height: 130px; z-index: 2; box-shadow: 0 6px 20px rgba(0,0,0,.5); } .cl-grid[data-n="2"] { grid-template-columns: 1fr; } .cl-bar { display: flex; justify-content: center; gap: 12px; padding: 14px; } .cl-bar button { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.14); font-size: 22px; transition: background .15s, transform .1s; } .cl-bar button:hover { background: rgba(255,255,255,.24); } .cl-bar button:active { transform: scale(.94); } .cl-bar button.off { background: #fff; filter: grayscale(1); } .cl-bar button.on { background: var(--accent); } .cl-bar .hang { background: #d13438; transform: rotate(135deg); } .cl-bar .hang:hover { background: #e5484d; } .ms-call { cursor: default; } .ms-call.missed .ms-item-top > small:first-child { color: #d13438; } .ms-call-acts { display: flex; gap: 2px; } .ms-call-acts button { width: 30px; height: 30px; border-radius: 6px; font-size: 15px; } .ms-call-acts button:hover { background: var(--hover); } .ms-item.ms-call { grid-template-columns: auto 1fr auto; } .cl-tile.me { order: 99; } .login-home { position: fixed; top: 18px; left: 20px; z-index: 5; padding: 7px 14px; border-radius: 999px; color: #fff; font-weight: 700; text-decoration: none; background: rgba(0,0,0,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-shadow: 0 1px 3px rgba(0,0,0,.3); } .login-home:hover { background: rgba(0,0,0,.35); } /* Esplora 1.0.3: identità MarX (barra degli indirizzi unica, schede, laterale piatta) */ html[data-skin] .window .finder.fx { grid-template-columns: 210px 1fr; } html[data-skin] .window .finder.fx .fx-side { margin: 0; border-radius: 0 0 0 var(--r-window); padding: 10px 8px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--win-sidebar) 70%, transparent); border-right: 1px solid var(--line); } .fx .fx-side h4 { margin: 14px 10px 6px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--muted); } .fx .fx-side h4:first-child { margin-top: 4px; } .fx .fx-side button { position: relative; border-radius: 6px; padding: 6px 10px 6px 12px; font-size: 13px; } .fx .fx-side button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .fx .fx-side button.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 600; } .fx .fx-side button.active::before { content: ""; position: absolute; left: 2px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--accent); } .fx .fx-tag { width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); } .fx .toolbar { padding: 10px 14px; gap: 10px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; } .fx .toolbar button { background: none; box-shadow: none; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; } .fx .fx-nav { display: flex; gap: 2px; flex: none; } .fx .fx-nav button { width: 32px; height: 32px; padding: 0; justify-content: center; } .fx .fx-addr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 6px; background: rgba(127,127,127,.10); border: 1px solid var(--line); color: var(--muted); } .fx .fx-addr:focus-within, .fx .fx-addr:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); } .fx .fx-addr > svg { flex: none; color: var(--accent); } .fx .crumbs { gap: 0; color: var(--fg, inherit); font-weight: 500; } .fx .crumbs button { padding: 3px 6px !important; border-radius: 4px !important; background: none !important; box-shadow: none !important; font-weight: 500; } .fx .crumbs button:last-child { font-weight: 700; } .fx .crumbs button:hover { background: rgba(127,127,127,.18) !important; } .fx .crumbs span { padding: 0 1px; opacity: .55; } .fx .fx-views { display: flex; gap: 0; background: none; padding: 0; border-radius: 0; box-shadow: none; } .fx .fx-views button { width: 34px; height: 34px; padding: 0 !important; justify-content: center; border-radius: 0 !important; border-bottom: 2px solid transparent !important; color: var(--muted); } .fx .fx-views button.on { background: none !important; box-shadow: none !important; color: var(--accent); border-bottom-color: var(--accent) !important; } .fx .fx-act { height: 34px; padding: 0 12px !important; font-weight: 600; font-size: 13px; border: 1px solid var(--line) !important; } .fx .fx-act:hover:not(:disabled) { background: rgba(127,127,127,.14) !important; } .fx .fx-primary { background: var(--accent) !important; color: #fff; border-color: transparent !important; } .fx .fx-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, #000) !important; } .fx .fx-danger { color: #e5484d; } .fx .statusbar { border-top: 1px solid var(--line); padding: 7px 16px; font-size: 11.5px; } .fx .toolbar [hidden] { display: none !important; } .fx .finder-main { container-type: inline-size; } @container (max-width: 720px) { .fx .fx-act span { display: none; } .fx .fx-act { width: 34px; padding: 0 !important; justify-content: center; } } /* Esplora: laterale a icone lineari e tag a gettoni */ .fx .fx-si { width: 18px; height: 18px; color: var(--muted); } .fx .fx-side button:hover .fx-si, .fx .fx-side button.active .fx-si { color: var(--accent); } .fx .fx-side .fx-groups h4:first-child { margin-top: 14px; } .fx .fx-side h4 { display: flex; align-items: center; gap: 8px; } .fx .fx-side h4::after { content: ""; flex: 1; height: 1px; background: var(--line); } .fx .fx-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 6px 8px; } .fx .fx-side .fx-tags button { width: auto; padding: 3px 9px 3px 7px; gap: 6px; font-size: 12px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); background: color-mix(in srgb, var(--tc) 10%, transparent); } .fx .fx-side .fx-tags button:hover { background: color-mix(in srgb, var(--tc) 22%, transparent); } .fx .fx-side .fx-tags button.active { background: color-mix(in srgb, var(--tc) 30%, transparent); color: inherit; } .fx .fx-side .fx-tags button.active::before { display: none; } .fx .fx-tags .fx-tag { width: 8px; height: 8px; border-radius: 2px; transform: none; background: var(--tc); } /* Etichette della scrivania leggibili anche su sfondi chiari: gettone scuro traslucido */ html[data-skin] .desk-icon > span:nth-child(2) { padding: 1px 7px 2px; border-radius: 6px; background: rgba(12, 16, 32, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: 0 1px 2px rgba(0,0,0,.5); } html[data-skin] .menubar { text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 8px rgba(0,0,0,.25); } html[data-skin] .menubar { background: linear-gradient(rgba(10,14,30,.55), rgba(10,14,30,.28)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; } html[data-skin] .menubar :is(button, span, .menu-clock) { color: #fff; } /* Messaggi: icone lineari */ .ms .msi, .ms-rail .msi { display: block; } .ms button:has(> .msi) { display: inline-flex; align-items: center; justify-content: center; } .ms-search { padding-left: 32px !important; background: rgba(127,127,127,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px 50% / 15px !important; } /* ---------- Barra dei menu verticale a sinistra (predefinita) ---------- */ html.bar-left:not(.phone) { --bar-w: 76px; } html.bar-left:not(.phone) .menubar { inset: 0 auto 0 0; width: var(--bar-w); height: auto; --menubar-h: 0px; flex-direction: column; justify-content: space-between; padding: 10px 6px; background: linear-gradient(90deg, rgba(10,14,30,.62), rgba(10,14,30,.42)); border-right: 1px solid rgba(255,255,255,.08); } html.bar-left:not(.phone) .menubar-left, html.bar-left:not(.phone) .menubar-right { flex-direction: column; height: auto; width: 100%; gap: 3px; } html.bar-left:not(.phone) #appMenus { display: flex; flex-direction: column; width: 100%; gap: 2px; } html.bar-left:not(.phone) .menubar button, html.bar-left:not(.phone) .menu-clock { width: 100%; height: auto; min-height: 28px; padding: 5px 4px; justify-content: center; text-align: center; font-size: 11.5px; border-radius: 8px; } html.bar-left:not(.phone) .menu-logo { min-height: 44px !important; margin-bottom: 6px; } html.bar-left:not(.phone) .menu-logo svg { width: 24px; height: 24px; } html.bar-left:not(.phone) .menu-app { font-size: 11px !important; font-weight: 700; display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.15); border-radius: 8px 8px 0 0 !important; margin-bottom: 4px; } html.bar-left:not(.phone) .menu-icon svg { width: 18px; height: 18px; } html.bar-left:not(.phone) .menu-item-user { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.bar-left:not(.phone) .menu-clock { white-space: normal; line-height: 1.25; font-size: 11px; opacity: .9; } html.bar-left:not(.phone) .desktop { inset: 0 0 0 var(--bar-w); } html.bar-left:not(.phone) .control { top: auto; bottom: 12px; right: auto; left: calc(var(--bar-w) + 8px); } html.bar-left:not(.phone) .mnt-banner, html.bar-left:not(.phone) .rm-panel.live { top: 8px; } html.bar-left:not(.phone) .dock-wrap { left: var(--bar-w); } html[data-skin] .menubar .menu-logo { color: #fff !important; } .menubar .mb-i { display: none; } html.bar-left:not(.phone) #appMenus .menu-item { flex-direction: column; gap: 3px; padding: 7px 2px; min-height: 48px; } html.bar-left:not(.phone) #appMenus .mb-i { display: block; flex: none; } html.bar-left:not(.phone) #appMenus .mb-l { font-size: 9.5px; line-height: 1; opacity: .8; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Accesso leggibile su qualsiasi sfondo: pannello scuro traslucido dietro il modulo */ .loginscreen:not(.authscreen) .lock-form { width: min(340px, calc(100vw - 32px)); box-sizing: border-box; } .loginscreen:not(.authscreen) .lock-form, .authscreen .auth-card { background: rgba(10, 14, 30, .48); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 26px 26px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25); color: #fff; } .loginscreen .lock-input, .authscreen .lock-input { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); color: #fff; } .loginscreen .lock-input:focus, .authscreen .lock-input:focus { background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); } .loginscreen .lock-input::placeholder, .authscreen .lock-input::placeholder { color: rgba(255,255,255,.75); } .loginscreen .lock-remember { opacity: 1; } .loginscreen .lock-links a, .loginscreen .lock-legal a { opacity: .92; } .loginscreen .lock-error { background: rgba(255, 69, 58, .28); border: 1px solid rgba(255, 105, 97, .45); padding: 7px 12px; text-align: center; line-height: 1.4; } .loginscreen .lock-error small { font-size: 12px; opacity: .9; } .loginscreen .lock-error a { color: #fff; font-weight: 600; } .loginscreen .lock-clock { text-shadow: 0 2px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); } .login-home { background: rgba(10,14,30,.45) !important; } .fx .fx-tagcrumb { display: inline-flex; align-items: center; gap: 7px; padding: 2px 4px 2px 9px; border-radius: 5px; background: color-mix(in srgb, var(--tc) 18%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); } .fx .fx-tagcrumb .fx-tag { width: 8px; height: 8px; border-radius: 2px; transform: none; background: var(--tc); } .fx .fx-tagcrumb button { width: 20px; height: 20px; padding: 0 !important; border-radius: 4px !important; font-size: 11px; background: none !important; box-shadow: none !important; } .fx .fx-tagcrumb button:hover { background: rgba(127,127,127,.25) !important; } /* Esplora: messaggio della cartella vuota su tutta la larghezza; testi lunghi (link) che vanno a capo */ .fx .fview .empty { grid-column: 1 / -1; width: 100%; text-align: center; padding: 48px 16px; color: var(--muted); line-height: 1.6; } .sheet p, .sheet .sheet-text { overflow-wrap: anywhere; word-break: break-word; } /* Campanella delle notifiche con il numero delle non lette */ .nc-bell { position: relative; } .nc-bell em { position: absolute; top: 0; right: 2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: #ff3b30; color: #fff; font: 700 9.5px/15px system-ui, sans-serif; font-style: normal; text-align: center; text-shadow: none; box-shadow: 0 0 0 1.5px rgba(10,14,30,.6); } html.bar-left:not(.phone) .nc-bell em { top: 2px; right: calc(50% - 16px); } .nc-item.unread { box-shadow: inset 3px 0 0 var(--accent); } /* Selettore persone con ricerca (gruppi, membri, community) */ .sheet-people { display: flex; flex-direction: column; gap: 8px; } .sp-top { display: flex; align-items: center; gap: 8px; } .sp-top .sp-q { flex: 1; min-width: 0; } .sp-n { color: var(--muted); white-space: nowrap; font-size: 12px; } .sp-all { flex: none; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .sp-chips { display: flex; flex-wrap: wrap; gap: 5px; max-height: 76px; overflow: auto; } .sp-chips:empty { display: none; } .sp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 999px; font-size: 12px; background: color-mix(in srgb, var(--accent) 16%, transparent); } .sp-chip button { width: 18px; height: 18px; border-radius: 50%; font-size: 10px; line-height: 1; } .sp-chip button:hover { background: rgba(127,127,127,.25); } .sp-list { max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; } .sp-list .sheet-check { padding: 5px 8px; border-radius: 6px; } .sp-list .sheet-check:hover { background: rgba(127,127,127,.12); } .sp-list .sheet-check[hidden] { display: none; } .sp-none { margin: 0; color: var(--muted); font-size: 12px; text-align: center; } /* Logo dell'azienda: se è orizzontale diventa una targhetta, così non si rimpicciolisce */ .lock-logo.wide { width: 250px !important; height: 92px !important; border-radius: 18px !important; } .lock-logo.wide img { padding: 12px 18px; } .st-tlogo.wide { width: 120px; height: 46px; padding: 4px 8px; } .sheet-code { display: block; padding: 12px 14px; border-radius: 10px; background: rgba(127,127,127,.14); border: 1px solid var(--line); font: 600 20px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; text-align: center; user-select: all; } .desktop-icons .desk-icon.dragging { opacity: 0; } /* durante il trascinamento si vede la copia, sopra le finestre */ .desk-ghost { position: fixed; inset: 0; z-index: 100000; pointer-events: none; } .desk-ghost .desk-icon { position: fixed; margin: 0; opacity: .9; filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)); color: #fff; } .toast.clickable { cursor: pointer; } .toast.clickable:hover { filter: brightness(1.04); } .nc-item.clickable { cursor: pointer; } /* Barra delle reazioni: cresce verso l'interno della chat, così non esce dal bordo con i messaggi corti */ .ms-msg .ms-hov { left: 44px; right: auto; } .ms-msg.mine .ms-hov { left: auto; right: 8px; } /* Chiamata: icone lineari; spento = pulsante chiaro con l'icona barrata */ .cl-bar button { display: inline-flex; align-items: center; justify-content: center; color: #fff; } .cl-bar button .i-off { display: none; } .cl-bar button.off .i-on { display: none; } .cl-bar button.off .i-off { display: inline-flex; } .cl-bar button.off { background: #fff; color: #1b1f2a; filter: none; } .cl-bar .hang { transform: none; } .cl-name .msi { display: inline-block; vertical-align: -2px; } /* Chiamata in arrivo: grande, in alto al centro, resta finché non si risponde */ .cl-incoming { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200000; display: flex; align-items: center; gap: 16px; padding: 16px 18px 16px 16px; min-width: min(460px, calc(100vw - 32px)); border-radius: 22px; color: #fff; background: linear-gradient(135deg, rgba(30,36,72,.96), rgba(20,24,48,.96)); box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.1); animation: ciIn .3s cubic-bezier(.2,.9,.3,1.2); transition: opacity .25s, transform .25s; } .cl-incoming.gone { opacity: 0; transform: translateX(-50%) translateY(-20px); } @keyframes ciIn { from { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(.96); } } .ci-av { width: 56px; height: 56px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; background: linear-gradient(145deg, #6366f1, #0ea5a4); animation: ciPulse 1.6s ease-out infinite; } @keyframes ciPulse { 0% { box-shadow: 0 0 0 0 rgba(99,102,241,.6); } 100% { box-shadow: 0 0 0 16px rgba(99,102,241,0); } } .ci-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ci-txt small { font-size: 12px; opacity: .75; } .ci-txt b { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ci-acts { display: flex; gap: 10px; } .ci-acts button { width: 50px; height: 50px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: transform .1s, filter .15s; } .ci-acts button:hover { filter: brightness(1.1); transform: scale(1.06); } .ci-yes { background: #22c55e; } .ci-no { background: #e5484d; } /* Notifiche a schermo più grandi e leggibili */ html[data-skin] .toast { width: min(480px, calc(100vw - 32px)); max-width: none; padding: 18px 22px 18px 22px; font-size: 16.5px; line-height: 1.45; border-radius: 18px; } html[data-skin] .toast small { display: block; font-size: 12.5px; margin-bottom: 4px; } html[data-skin] .toast > span { display: block; } html[data-skin] .toast-acts button { padding: 8px 18px; font-size: 14px; } /* Suggerimenti @menzione leggibili ovunque (Social compreso): evidenziazione con il colore principale */ .so-sugg button.on, .so-sugg button:hover, .ms-msug button.on, .ms-msug button:hover, .ms-sugg button:hover, .ms-sugg button:first-child { background: var(--tm, var(--accent)); color: #fff; } .so-sugg button, .ms-msug button { color: var(--text); } .so-sugg, .ms-msug { background: var(--win-bg, #fff); } /* Social: icone lineari */ .so .msi { display: block; flex: none; } .so-ic, .so-kinds button { display: inline-flex; align-items: center; justify-content: center; } .so-btn.main { display: inline-flex; align-items: center; gap: 6px; } .so-nav > span { display: inline-flex; align-items: center; justify-content: center; } .so-title > span { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); } .so-compose header b { display: inline-flex; align-items: center; gap: 7px; } .so-pf-groups span { display: inline-flex; align-items: center; gap: 4px; } .window > .sheet-bg { z-index: 1000; } /* le richieste stanno sopra ogni livello dell app (schede del Social, pannelli) */ /* Calendario: eventi a cui si è invitati (bordo tratteggiato); testi lunghi nelle richieste */ .cm-ev.inv, .ct-ev.inv { outline: 1.5px dashed var(--c); outline-offset: -1.5px; background: color-mix(in srgb, var(--c) 12%, transparent) !important; } .sheet > p { white-space: pre-line; } .sheet-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 4px; } .sheet:has(.sheet-people) { max-height: calc(100% - 20px); overflow: auto; } /* Calendario: trascinamento degli eventi */ .cal2 [data-ev]:not(.inv) { cursor: grab; touch-action: none; } .cal-dragging { opacity: .35; } .cal-ghost { position: fixed !important; z-index: 100000; pointer-events: none; margin: 0 !important; box-shadow: 0 12px 30px rgba(0,0,0,.35); opacity: .95; cursor: grabbing; } .cal-ghost[data-when]::after { content: attr(data-when); position: absolute; right: 4px; top: -20px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; background: #111827; color: #fff; } .cal-drop { background: color-mix(in srgb, var(--accent) 12%, transparent) !important; } .so-inv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.5); font-size: 13px; } .so-inv span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .so-inv em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .so-priv { display: inline-flex !important; align-items: center; gap: 4px; margin-top: 3px; font-weight: 600; color: #6d28d9; } .sheet > * { flex-shrink: 0; } .sheet textarea { min-height: 64px; } .fview [data-i].cut { opacity: .45; } /* elementi tagliati, in attesa di Incolla */ /* Icone lineari al posto delle emoji: allineate al testo */ .wxi { display: inline-flex; font-style: normal; } .wxi .msi { width: 1em; height: 1em; } .td-ic, .td-head h2, .mp-ico, .mu-nocover, .fx-si, .ml-fname, .wx-box h5, .so-where, .so-counts span, .td-card, .so-btn, .ms-call, .so-pf-acts button, .mp-modes button, .ml-r2 i, .stx-crumb { display: inline-flex; align-items: center; gap: 6px; } .td-head h2 .msi { color: var(--accent); } .ms-call { font-weight: 600; } .ms-call.missed { color: #e5484d; } .ms-hov button, .ms-react-bar button, .so-reacts button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; } .so-reacts button.on, .ms-react-bar button.on { color: var(--accent); } .mu-nocover { justify-content: center; color: var(--muted); } .wx-big-ico { color: var(--accent); } .ms-tap button { display: inline-flex; align-items: center; gap: 3px; } .ms-tap button.me { color: var(--tm, var(--accent)); } /* Icone di app che usavano un'emoji: disegno lineare bianco */ .ico.ico-social::before, .ico.ico-link::before { content: "" !important; background: center / 56% no-repeat; } .ico.ico-social::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0M16 4.5a3.2 3.2 0 0 1 0 6.2M21 20a6 6 0 0 0-3.5-5.5'/%3E%3C/svg%3E"); } .ico.ico-link::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); } .wx-empty .wx-big-ico { color: #fff; opacity: .95; } /* ---------- Date e ore in italiano: campo e calendario a comparsa di MarX ---------- */ input.mdp-in { color: transparent !important; caret-color: transparent; cursor: pointer; } input.mdp-in::-webkit-calendar-picker-indicator { opacity: 0; pointer-events: none; } input.mdp-in::-webkit-datetime-edit { opacity: 0; } .mdp-show { position: absolute; pointer-events: none; } :where(*):has(> input.mdp-in) { position: relative; } input.mdp-in + .mdp-show { box-sizing: border-box; display: flex; align-items: center; padding: 0 12px; font: inherit; font-size: 13.5px; color: var(--text); white-space: pre; font-variant-numeric: tabular-nums; } input.mdp-in + .mdp-show.empty { color: var(--muted); } input.mdp-in + .mdp-show.off { opacity: .45; } .mdp { position: fixed; z-index: 300000; width: 264px; padding: 10px; border-radius: 14px; background: var(--win-bg, #fff); color: var(--text); box-shadow: 0 18px 50px rgba(0,0,0,.3), 0 0 0 1px var(--line); font-size: 13px; user-select: none; } .mdp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .mdp-head b { text-transform: capitalize; font-size: 14px; } .mdp-head button { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } .mdp-head button:hover { background: var(--hover); } .mdp-dow, .mdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .mdp-dow span { font-size: 11px; font-weight: 700; color: var(--muted); padding: 2px 0; } .mdp-grid button { height: 32px; border-radius: 8px; font-variant-numeric: tabular-nums; } .mdp-grid button:hover:not(:disabled) { background: var(--hover); } .mdp-grid button.today { color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); } .mdp-grid button.on { background: var(--accent) !important; color: #fff; font-weight: 700; } .mdp-grid button:disabled { opacity: .3; } .mdp-time { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); } .mdp-time select { flex: 1; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; } .mdp-foot { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; } .mdp-foot button { padding: 5px 10px; border-radius: 8px; font-weight: 600; color: var(--accent); } .mdp-foot button:hover { background: var(--hover); } .mdp-foot .ok { background: var(--accent); color: #fff; margin-left: auto; } #authDone:not([hidden]) { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; } #authDone .auth-btn { text-decoration: none; text-align: center; display: block; } /* MarX Consegna */ .dv-st { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; padding: 2px 8px; border-radius: 999px; } .dv-st.ok { color: #047857; background: rgba(16,185,129,.14); } .dv-st.wait { color: #92400e; background: rgba(245,158,11,.16); } .dv-st.off { color: var(--muted); background: rgba(127,127,127,.14); } .dv-st.warn { color: #b91c1c; background: rgba(239,68,68,.12); } .frow .dv-st + small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; } .dv-qr { display: flex; justify-content: center; padding: 10px; border-radius: 12px; background: #fff; } .dv-qr svg { width: 220px; height: 220px; }