/* Ubuntu Web — Yaru design tokens + shared widgets. * Theme switching: ; accent vars set by OS.theme (--accent, --accent-rgb, …). */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --accent: #E95420; --accent-rgb: 233, 84, 32; --accent-hover: #ec6a3d; --accent-active: #cd4a1c; --aubergine: #772953; --aubergine-dark: #2c001e; --font-ui: 'Ubuntu', 'Ubuntu Sans', -apple-system, 'Segoe UI', system-ui, sans-serif; --font-mono: 'Ubuntu Mono', 'SF Mono', Menlo, Consolas, monospace; /* light scheme (default) */ --win-bg: #fafafa; --win-bg2: #f0f0f0; /* sidebars, alt surfaces */ --headerbar-bg: #ebebeb; --headerbar-backdrop: #f4f4f4; --view-bg: #ffffff; /* lists, text views */ --card-bg: #ffffff; --fg: rgba(0, 0, 0, 0.85); --fg-dim: rgba(0, 0, 0, 0.55); --fg-faint: rgba(0, 0, 0, 0.34); --border: rgba(0, 0, 0, 0.12); --border-strong: rgba(0, 0, 0, 0.2); --hover: rgba(0, 0, 0, 0.06); --active: rgba(0, 0, 0, 0.1); --btn-bg: rgba(0, 0, 0, 0.075); --btn-hover: rgba(0, 0, 0, 0.12); --btn-active: rgba(0, 0, 0, 0.17); --entry-bg: rgba(0, 0, 0, 0.055); --scrollbar: rgba(0, 0, 0, 0.3); --shadow-win: 0 3px 9px rgba(0,0,0,0.24), 0 12px 40px rgba(0,0,0,0.24); --shadow-win-focus: 0 4px 14px rgba(0,0,0,0.3), 0 22px 64px rgba(0,0,0,0.42); --shadow-pop: 0 2px 8px rgba(0,0,0,0.18), 0 8px 28px rgba(0,0,0,0.22); } :root[data-scheme="dark"] { --win-bg: #242424; --win-bg2: #2b2b2b; --headerbar-bg: #303030; --headerbar-backdrop: #2a2a2a; --view-bg: #1e1e1e; --card-bg: #303030; --fg: rgba(255, 255, 255, 0.92); --fg-dim: rgba(255, 255, 255, 0.6); --fg-faint: rgba(255, 255, 255, 0.38); --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.18); --hover: rgba(255, 255, 255, 0.07); --active: rgba(255, 255, 255, 0.12); --btn-bg: rgba(255, 255, 255, 0.1); --btn-hover: rgba(255, 255, 255, 0.15); --btn-active: rgba(255, 255, 255, 0.22); --entry-bg: rgba(255, 255, 255, 0.08); --scrollbar: rgba(255, 255, 255, 0.3); --shadow-win: 0 3px 9px rgba(0,0,0,0.4), 0 12px 40px rgba(0,0,0,0.45); --shadow-win-focus: 0 4px 14px rgba(0,0,0,0.5), 0 22px 64px rgba(0,0,0,0.65); --shadow-pop: 0 2px 8px rgba(0,0,0,0.4), 0 8px 28px rgba(0,0,0,0.5); } html, body { width: 100%; height: 100%; overflow: hidden; font-family: var(--font-ui); font-size: 14px; color: var(--fg); background: #000; -webkit-font-smoothing: antialiased; user-select: none; } button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font-family: inherit; font-size: inherit; color: var(--fg); } ::selection { background: rgba(var(--accent-rgb), 0.35); } /* ---------- scrollbars (overlay style) ---------- */ .scroll, .window-content, .yaru-scroll { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px; border-radius: 6px; background: var(--btn-bg); color: var(--fg); font-weight: 500; line-height: 1.3; transition: background 0.12s ease; white-space: nowrap; } .btn:hover { background: var(--btn-hover); } .btn:active { background: var(--btn-active); } .btn.flat { background: transparent; } .btn.flat:hover { background: var(--hover); } .btn.flat:active { background: var(--active); } .btn.suggested { background: var(--accent); color: #fff; } .btn.suggested:hover { background: var(--accent-hover); } .btn.suggested:active { background: var(--accent-active); } .btn.destructive { background: #c01c28; color: #fff; } .btn.destructive:hover { background: #d3222f; } .btn.icon-btn { padding: 6px; border-radius: 6px; } .btn.icon-btn svg { display: block; } .btn:disabled, .btn.disabled { opacity: 0.45; pointer-events: none; } .btn.pill { border-radius: 99px; } .btn.active-toggle { background: var(--accent); color: #fff; } /* ---------- entries ---------- */ .entry { background: var(--entry-bg); border: none; border-radius: 6px; padding: 7px 10px; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color 0.12s ease; color: var(--fg); } .entry:focus { outline-color: rgba(var(--accent-rgb), 0.8); } .entry::placeholder { color: var(--fg-faint); } /* ---------- switch (GNOME style) ---------- */ .switch { position: relative; width: 46px; height: 26px; border-radius: 99px; background: var(--btn-bg); border: none; transition: background 0.18s ease; flex: none; cursor: pointer; } .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.18s ease; } :root[data-scheme="dark"] .switch::after { background: #d0d0d0; } .switch.on { background: var(--accent); } .switch.on::after { transform: translateX(20px); background: #fff; } /* ---------- checkbox ---------- */ .checkbox { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s ease, border-color 0.12s ease; flex: none; } .checkbox.on { background: var(--accent); border-color: var(--accent); color: #fff; } /* ---------- slider ---------- */ input[type="range"].slider { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 50%), var(--btn-hover) var(--fill, 50%)); outline: none; cursor: pointer; } input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,0.14); box-shadow: 0 1px 3px rgba(0,0,0,0.3); } input[type="range"].slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,0.14); box-shadow: 0 1px 3px rgba(0,0,0,0.3); } /* ---------- lists & rows (libadwaita boxed lists) ---------- */ .boxed-list { background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; } .boxed-list .row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); min-height: 48px; } .boxed-list .row:last-child { border-bottom: none; } .boxed-list .row.activatable { cursor: pointer; } .boxed-list .row.activatable:hover { background: var(--hover); } .row .row-text { flex: 1; min-width: 0; } .row .row-title { font-weight: 400; } .row .row-subtitle { font-size: 12.5px; color: var(--fg-dim); margin-top: 1px; } /* ---------- menus / popovers ---------- */ .yaru-menu { position: fixed; z-index: 9000; min-width: 200px; background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-pop); padding: 6px; opacity: 0; transform: scale(0.96); transform-origin: top left; transition: opacity 0.12s ease, transform 0.12s ease; } .yaru-menu.open { opacity: 1; transform: scale(1); } .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 6px; text-align: left; color: var(--fg); } .menu-item:hover { background: var(--hover); } .menu-item.danger { color: #c01c28; } :root[data-scheme="dark"] .menu-item.danger { color: #ff7b63; } .menu-item.disabled { opacity: 0.4; pointer-events: none; } .menu-item .menu-label { flex: 1; } .menu-item .menu-accel { color: var(--fg-faint); font-size: 12px; } .menu-item .icon svg { display: block; width: 16px; height: 16px; } .menu-item .menu-check { width: 16px; display: inline-flex; } .menu-sep { height: 1px; background: var(--border); margin: 5px 8px; } .menu-header { padding: 6px 10px 4px; font-size: 11.5px; font-weight: 500; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.04em; } /* ---------- tooltips ---------- */ .yaru-tooltip { position: fixed; z-index: 9500; background: rgba(0, 0, 0, 0.85); color: #fff; font-size: 12.5px; padding: 5px 10px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; white-space: nowrap; } :root[data-scheme="dark"] .yaru-tooltip { background: rgba(48,48,48,0.96); border: 1px solid var(--border); } .yaru-tooltip.show { opacity: 1; } /* ---------- dialogs ---------- */ .dialog-scrim { position: fixed; inset: 0; z-index: 8000; background: rgba(0, 0, 0, 0.32); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.16s ease; } .dialog-scrim.show { opacity: 1; } .yaru-dialog { width: 400px; max-width: calc(100vw - 48px); background: var(--win-bg); border-radius: 14px; box-shadow: var(--shadow-win-focus); overflow: hidden; transform: scale(0.92); transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.1); border: 1px solid var(--border); } .dialog-scrim.show .yaru-dialog { transform: scale(1); } .yaru-dialog.shake { animation: dialog-shake 0.3s ease; } @keyframes dialog-shake { 0%, 100% { transform: scale(1) translateX(0); } 25% { transform: scale(1) translateX(-7px); } 75% { transform: scale(1) translateX(7px); } } .dialog-title { font-weight: 700; font-size: 15.5px; text-align: center; padding: 22px 24px 4px; } .dialog-body { text-align: center; color: var(--fg-dim); padding: 6px 24px 20px; font-size: 13.5px; line-height: 1.45; user-select: text; } .dialog-buttons { display: flex; border-top: 1px solid var(--border); } .dialog-btn { flex: 1; padding: 13px 8px; font-weight: 600; color: var(--fg); border-right: 1px solid var(--border); transition: background 0.1s ease; } .dialog-btn:last-child { border-right: none; } .dialog-btn:hover { background: var(--hover); } .dialog-btn.suggested { color: var(--accent); } .dialog-btn.destructive { color: #c01c28; } :root[data-scheme="dark"] .dialog-btn.destructive { color: #ff7b63; } /* ---------- notification banners ---------- */ .banner-host { position: fixed; top: 38px; left: 50%; transform: translateX(-50%); z-index: 8500; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .banner { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; width: 380px; max-width: calc(100vw - 32px); background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 12px 14px; opacity: 0; transform: translateY(-14px); transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.05); cursor: default; } .banner.show { opacity: 1; transform: translateY(0); } .banner-icon { flex: none; width: 32px; height: 32px; color: var(--fg-dim); } .banner-icon svg { width: 32px; height: 32px; } .banner-text { flex: 1; min-width: 0; } .banner-title { font-weight: 600; font-size: 13.5px; } .banner-body { font-size: 12.8px; color: var(--fg-dim); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .banner-actions { display: flex; gap: 8px; margin-top: 8px; } .banner-action { font-size: 12.5px; padding: 4px 12px; } .banner-close { flex: none; padding: 4px; border-radius: 50%; color: var(--fg-faint); } .banner-close:hover { background: var(--hover); color: var(--fg); } /* ---------- generic helpers ---------- */ .icon svg { display: block; } .spacer { flex: 1; } .dim { color: var(--fg-dim); } .faint { color: var(--fg-faint); } .selectable { user-select: text; }