/* iNews: generated from design/preview/template.html (approved design), then extended below. */ /* Layout: NetNewsWire 7 three-pane reader — inset sidebar card | article timeline | reading pane. Tokens come from design/netnewswire-design-dna.json (measured from the NNW 7 screenshots). */ :root { --content: #ffffff; --sidebar: #f8f8f8; --sidebar-sel: #ebedf2; --sidebar-text: #4a4b4b; --sidebar-label: #77797b; --sidebar-count: #7f8080; --chevron: #797979; --folder: #2d68e6; --sel: #2154c9; --sel-text: #ffffff; --dot: #2e6ae5; --title: #272727; --secondary: #808080; --head: #4b4b4b; --head-sub: #5e5f60; --divider: #e6e6e6; --rule: rgba(0, 0, 0, 0.1); --art-header: rgba(0, 0, 0, 0.66); --art-title: #333333; --art-date: rgba(0, 0, 0, 0.5); --art-body: #000000; --link: #086aee; --link-hover-a: #3c92fb; --link-hover-b: #4395fb; --quote: rgba(0, 0, 0, 0.25); --glass: rgba(249, 249, 249, 0.78); --glass-edge: rgba(255, 255, 255, 0.7); --icon: #4b4b4b; --placeholder: #7d7d7d; --system-msg: #cbcbcb; --press: rgba(0, 0, 0, 0.06); --tile: #e9e9ec; --plate: transparent; --menu-bg: #ffffff; --input-bg: #f9f9f9; --input-border: rgba(0, 0, 0, 0.12); --scrim: rgba(0, 0, 0, 0.25); --error: #d70015; --g-fill: #ffffff; /* Google sign-in button, light theme */ --g-stroke: #747775; --g-text: #1f1f1f; --g-state: #303030; --em: #8e8e93; /* macOS system grey: e-mail share */ --wa: #25d366; --tg: #26a5e4; --fb: #0866ff; --xbg: #000000; --xfg: #ffffff; --tile-text: #6b6b70; --sun: #ef8632; --unread: #ff0036; /* iNews logo red: unread articles */ --unread-icon: #ff0036; --star: #f1c853; --toast-bg: rgba(40, 40, 40, 0.92); --toast-text: #ffffff; --shadow-low: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-med: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-high: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08); --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, "Courier New", monospace; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --r-sm: 4px; --r-md: 8px; --r-lg: 16px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --content: #1e1e1e; --sidebar: #161616; --sidebar-sel: #242528; --sidebar-text: #e7e7e7; --sidebar-label: #919293; --sidebar-count: #7c7c7c; --chevron: #919191; --folder: #6d9ded; --sel: #4e78c1; --sel-text: #ffffff; --dot: #6b9ae9; --title: #dddddd; --secondary: #9a9a9a; --head: #e8e8e8; --head-sub: #959698; --divider: #000000; --rule: rgba(255, 255, 255, 0.1); --art-header: #5e9ef4; --art-title: #e0e0e0; --art-date: rgba(255, 255, 255, 0.5); --art-body: #ffffff; --link: #5e9ef4; --link-hover-a: #2979d5; --link-hover-b: #2a78d4; --quote: rgba(94, 158, 244, 0.5); --glass: rgba(26, 26, 26, 0.74); --glass-edge: rgba(255, 255, 255, 0.08); --icon: #e8e8e8; --placeholder: #8c8c8c; --system-msg: #5f5f5f; --press: rgba(255, 255, 255, 0.08); --tile: #2c2c2e; --tile-text: #a1a1a6; --plate: rgba(255, 255, 255, 0.9); --menu-bg: #2a2a2c; --input-bg: #1a1a1a; --input-border: rgba(255, 255, 255, 0.14); --scrim: rgba(0, 0, 0, 0.55); --error: #ff6961; --g-fill: #131314; --g-stroke: #8e918f; --g-text: #e3e3e3; --g-state: #ffffff; --xbg: #ffffff; --xfg: #000000; --sun: #ef8632; --unread-icon: #ff0036; --star: #f1c853; --toast-bg: rgba(235, 235, 235, 0.94); --toast-text: #1e1e1e; --shadow-low: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-med: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-high: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); color-scheme: dark; } } :root[data-theme="dark"] { --content: #1e1e1e; --sidebar: #161616; --sidebar-sel: #242528; --sidebar-text: #e7e7e7; --sidebar-label: #919293; --sidebar-count: #7c7c7c; --chevron: #919191; --folder: #6d9ded; --sel: #4e78c1; --sel-text: #ffffff; --dot: #6b9ae9; --title: #dddddd; --secondary: #9a9a9a; --head: #e8e8e8; --head-sub: #959698; --divider: #000000; --rule: rgba(255, 255, 255, 0.1); --art-header: #5e9ef4; --art-title: #e0e0e0; --art-date: rgba(255, 255, 255, 0.5); --art-body: #ffffff; --link: #5e9ef4; --link-hover-a: #2979d5; --link-hover-b: #2a78d4; --quote: rgba(94, 158, 244, 0.5); --glass: rgba(26, 26, 26, 0.74); --glass-edge: rgba(255, 255, 255, 0.08); --icon: #e8e8e8; --placeholder: #8c8c8c; --system-msg: #5f5f5f; --press: rgba(255, 255, 255, 0.08); --tile: #2c2c2e; --tile-text: #a1a1a6; --plate: rgba(255, 255, 255, 0.9); --menu-bg: #2a2a2c; --input-bg: #1a1a1a; --input-border: rgba(255, 255, 255, 0.14); --scrim: rgba(0, 0, 0, 0.55); --error: #ff6961; --g-fill: #131314; --g-stroke: #8e918f; --g-text: #e3e3e3; --g-state: #ffffff; --xbg: #ffffff; --xfg: #000000; --sun: #ef8632; --unread-icon: #ff0036; --star: #f1c853; --toast-bg: rgba(235, 235, 235, 0.94); --toast-text: #1e1e1e; --shadow-low: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-med: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-high: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); color-scheme: dark; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; overflow: hidden; background: var(--content); color: var(--title); font: 13px/1.3 var(--font-ui); -webkit-font-smoothing: antialiased; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--dot); outline-offset: 2px; } svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* ---------- shell ---------- */ .app { display: grid; grid-template-columns: 275px 392px minmax(0, 1fr); height: 100%; } .pane { position: relative; min-width: 0; min-height: 0; } /* ---------- sidebar (inset card) ---------- */ .sidebar-wrap { padding: 8px 8px 8px 8px; min-height: 0; display: flex; } .sidebar { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--sidebar); border-radius: var(--r-lg); box-shadow: var(--shadow-low); } .sb-top { display: flex; align-items: center; gap: 4px; height: 44px; padding: 4px 10px 0 16px; flex: none; } .brand { display: flex; align-items: center; color: var(--head); margin-right: auto; } .brand svg { height: 20px; width: auto; display: block; } .tb-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; color: var(--icon); transition: background-color 100ms var(--ease); } .tb-btn:hover { background: var(--press); } .tb-btn[aria-pressed="true"] { color: var(--dot); } .spin svg { animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .sb-scroll { overflow: auto; padding: 6px 10px 12px; flex: 1; min-height: 0; } .sb-label { font-size: 11px; font-weight: 600; color: var(--sidebar-label); padding: 16px 8px 6px; } .sb-label:first-child { padding-top: 4px; } .sb-row { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 13px 0 8px; border-radius: var(--r-md); color: var(--sidebar-text); font-size: 13px; text-align: left; } .sb-row:hover { background: var(--press); } .sb-row[aria-current="page"] { background: var(--sidebar-sel); } .sb-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-row .count { color: var(--sidebar-count); font-variant-numeric: tabular-nums; } .sb-row .ico { width: 18px; height: 18px; display: grid; place-items: center; flex: none; } .sb-row .ico svg { width: 17px; height: 17px; } .sb-row .chev { width: 12px; display: grid; place-items: center; color: var(--chevron); flex: none; margin-left: -6px; } .sb-row .chev svg { width: 11px; height: 11px; stroke-width: 2.5; transition: transform 150ms var(--ease); } .sb-row.open .chev svg { transform: rotate(90deg); } .sb-row.feed { padding-left: 30px; } .sb-row .fav { width: 16px; height: 16px; border-radius: 3px; flex: none; object-fit: contain; } .sb-row .fav.tile { display: grid; place-items: center; background: var(--tile); color: var(--tile-text); font-size: 9px; font-weight: 700; } .ico-today { color: var(--sun); } .ico-unread { color: var(--unread-icon); } .ico-star { color: var(--star); } .ico-folder { color: var(--folder); } /* ---------- timeline ---------- */ .timeline { background: var(--content); display: flex; flex-direction: column; } .tl-head { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; gap: 8px; padding: 8px 10px 0 20px; pointer-events: none; } .tl-head > * { pointer-events: auto; } .tl-title { min-width: 0; margin-right: auto; } .tl-title h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-title p { margin: 1px 0 0; font-size: 11px; color: var(--head-sub); font-variant-numeric: tabular-nums; } .glass { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--glass); box-shadow: var(--shadow-med), inset 0 1px 0 var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } .glass .tb-btn { width: 34px; height: 32px; } .tl-list { flex: 1; min-height: 0; overflow: auto; padding: 60px 10px 16px; outline: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px); mask-image: linear-gradient(to bottom, transparent 0, #000 64px); } .tl-list .tl-search { display: none; width: auto; margin: 0 0 10px; } .row { display: grid; grid-template-columns: 26px 48px minmax(0, 1fr); column-gap: 0; align-items: start; width: 100%; padding: 9px 12px 8px 0; margin-bottom: 2px; border-radius: var(--r-md); text-align: left; color: var(--title); } .row .dot { width: 7px; height: 7px; border-radius: 50%; margin: 5px 0 0 10px; } .row.unread .dot { background: var(--unread); } .row .avatar { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: contain; } .row .avatar.tile { background: var(--tile); } .row img.avatar.small { width: 32px; height: 32px; margin: 8px; } .plate { background: var(--plate); } .row .avatar.tile { display: grid; place-items: center; color: var(--tile-text); font-size: 18px; font-weight: 700; } .row .txt { min-width: 0; padding-left: 10px; } .row .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 13px; line-height: 17px; height: 51px; overflow-wrap: anywhere; } .row .t { font-weight: 600; } .row .t .star { color: var(--star); margin-right: 3px; } .row .s { color: var(--secondary); } .row .meta { display: flex; gap: 8px; margin-top: 2px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--secondary); } .row .meta .f { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row .meta time { font-variant-numeric: tabular-nums; } .row[aria-current="page"] { background: var(--sel); color: var(--sel-text); } .row[aria-current="page"] .s, .row[aria-current="page"] .meta, .row[aria-current="page"] .t .star { color: var(--sel-text); } .row[aria-current="page"].unread .dot { background: var(--sel-text); } .empty-list { color: var(--system-msg); text-align: center; padding: 48px 16px; font-size: 13px; } /* ---------- reader ---------- */ .reader { background: var(--content); border-left: 1px solid var(--divider); display: flex; flex-direction: column; } .rd-head { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; gap: 8px; padding: 8px 8px 0 12px; pointer-events: none; } .rd-head > * { pointer-events: auto; } .search { margin-left: auto; width: min(324px, 40%); height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 999px; background: var(--glass); box-shadow: var(--shadow-med), inset 0 1px 0 var(--glass-edge); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); color: var(--placeholder); } .search svg { width: 15px; height: 15px; } .search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 13px var(--font-ui); color: var(--title); } .search input::placeholder { color: var(--placeholder); } .search:focus-within { box-shadow: var(--shadow-med), 0 0 0 3px color-mix(in srgb, var(--dot) 45%, transparent); } .rd-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px); mask-image: linear-gradient(to bottom, transparent 0, #000 60px); } .system-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--system-msg); font-size: 22px; font-weight: 600; user-select: none; } /* Article: NetNewsWire template.html + stylesheet.css (macOS) */ .article { font-size: 16px; max-width: 44em; margin: 0 auto; padding: 82px 48px 64px; color: var(--art-body); word-wrap: break-word; } .headerTable { display: flex; align-items: center; height: 68px; border-bottom: 1px solid var(--rule); color: var(--art-header); line-height: 1.25; } .headerTable .who { flex: 1; min-width: 0; } .headerTable .feedlink { font-weight: 700; color: var(--art-header); text-decoration: none; } .headerTable .byline { display: block; } .headerTable img, .headerTable .tile { width: 48px; height: 48px; border-radius: var(--r-sm); flex: none; } .headerTable img { object-fit: contain; } .headerTable img.small { width: 32px; height: 32px; margin: 8px; } .headerTable .tile { display: grid; place-items: center; background: var(--tile); color: var(--tile-text); font-weight: 700; font-size: 20px; } .articleTitle h1 { font-size: 1.85rem; line-height: 1.15em; font-weight: 700; margin: 26px 0 5px; text-wrap: balance; } .articleTitle a { color: var(--art-title); text-decoration: none; } .articleTitle a:hover { text-decoration: underline; } .articleDateline { margin-bottom: 5px; font-weight: 700; font-variant-caps: all-small-caps; letter-spacing: 0.025em; color: var(--art-date); } .externalLink { margin: 15px 0; font-size: 0.875em; font-style: italic; color: var(--art-date); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .externalLink a { font-family: var(--font-mono); font-size: 0.85em; font-style: normal; color: var(--link); text-decoration: none; } .articleBody { margin-top: 20px; line-height: 1.6em; font-size: 18px; } .articleBody.size-0 { font-size: 16px; } .articleBody.size-2 { font-size: 20px; } .articleBody img { display: block; max-width: 100%; height: auto; margin: 0 auto; } .articleBody p { margin: 1em 0; } .articleBody a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--link); padding: 0 1px; } .articleBody a:hover { border-radius: 2px; background: linear-gradient(0deg, var(--link-hover-a) 0%, var(--link-hover-b) 100%); border-bottom-color: var(--link-hover-b); color: #ffffff; } .articleBody blockquote { margin-inline: 0; padding-inline-start: 15px; border-inline-start: 3px solid var(--quote); } .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8px); opacity: 0; background: var(--toast-bg); color: var(--toast-text); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; transition: opacity 150ms var(--ease), transform 150ms var(--ease); pointer-events: none; z-index: 20; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .only-narrow, .only-collapsed { display: none !important; } .scrim { display: none; } /* ---------- sidebar footer: account + copyright ---------- */ .sb-foot { flex: none; position: relative; padding: 6px 10px 10px; border-top: 1px solid var(--rule); } .acct { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: var(--r-md); text-align: left; color: var(--sidebar-text); } .acct:hover, .acct[aria-expanded="true"] { background: var(--press); } .acct .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--tile); color: var(--tile-text); font-size: 12px; font-weight: 700; } .acct .av svg { width: 17px; height: 17px; } .acct.in .av { background: var(--sel); color: var(--sel-text); } .acct .who { flex: 1; min-width: 0; } .acct .nm { display: block; font-size: 13px; font-weight: 600; color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acct .sub { display: block; font-size: 11px; color: var(--sidebar-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acct .end { color: var(--chevron); display: grid; } .acct .end svg { width: 15px; height: 15px; } .copy { margin: 8px 8px 0; font-size: 10.5px; line-height: 1.45; color: var(--sidebar-label); } .copy a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; } .copy a:hover { color: var(--link); } .menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% - 2px); z-index: 5; background: var(--menu-bg); border-radius: 12px; box-shadow: var(--shadow-high); padding: 5px; } .menu .mh { margin: -5px -5px 5px; padding: 10px 15px 9px; font-size: 12px; color: var(--sidebar-label); border-bottom: 1px solid var(--rule); } .menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 10px; border-radius: 7px; font-size: 13px; color: var(--title); text-align: left; } .menu button svg.i { width: 16px; height: 16px; color: var(--secondary); } .menu button .val { margin-left: auto; color: var(--secondary); font-size: 12px; } .menu button:hover, .menu button:focus-visible { background: var(--sel); color: var(--sel-text); outline: none; } .menu button:hover svg.i, .menu button:hover .val, .menu button:focus-visible svg.i, .menu button:focus-visible .val { color: var(--sel-text); } .menu hr { border: 0; border-top: 1px solid var(--rule); margin: 5px -5px; } .switch { margin-left: auto; width: 26px; height: 16px; border-radius: 999px; background: var(--tile); position: relative; flex: none; transition: background-color 150ms var(--ease); } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 150ms var(--ease); } .switch.on { background: var(--dot); } .switch.on::after { transform: translateX(10px); } .ico-mine { color: var(--folder); } /* ---------- sign-in sheet ---------- */ .sheet-scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); display: grid; place-items: center; padding: 16px; } .sheet { width: min(380px, 100%); box-sizing: border-box; background: var(--menu-bg); border-radius: 16px; box-shadow: var(--shadow-high); padding: 26px 24px 22px; position: relative; } .sheet h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--art-title); } .sheet p { margin: 0 0 18px; color: var(--secondary); font-size: 13px; line-height: 1.45; } .sheet p strong { color: var(--title); } .sheet .x { position: absolute; top: 10px; right: 10px; } .field { display: block; width: 100%; box-sizing: border-box; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--title); font: 14px var(--font-ui); } .field::placeholder { color: var(--placeholder); } .field:focus { outline: none; border-color: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 30%, transparent); } .sheet .err { margin: 6px 0 0; color: var(--error); font-size: 12px; } .btn-primary { width: 100%; height: 40px; margin-top: 10px; border-radius: 999px; background: var(--sel); color: var(--sel-text); font-weight: 600; font-size: 14px; } .btn-primary:hover { filter: brightness(1.06); } /* Google Identity "Sign in with Google" button: Google's generator CSS (pill), colours per theme from the branding guidelines. */ .gsi-material-button { -webkit-user-select: none; user-select: none; -webkit-appearance: none; appearance: none; background-color: var(--g-fill); background-image: none; border: 1px solid var(--g-stroke); border-radius: 20px; box-sizing: border-box; color: var(--g-text); cursor: pointer; font-family: "Google Sans", "Roboto", arial, sans-serif; font-size: 14px; height: 40px; letter-spacing: 0.25px; outline: none; overflow: hidden; padding: 0 12px; position: relative; text-align: center; transition: background-color .218s, border-color .218s, box-shadow .218s; vertical-align: middle; white-space: nowrap; width: 100%; min-width: min-content; } .gsi-material-button .gsi-material-button-icon { height: 20px; margin-right: 10px; min-width: 20px; width: 20px; } .gsi-material-button .gsi-material-button-content-wrapper { align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; height: 100%; justify-content: center; position: relative; width: 100%; } .gsi-material-button .gsi-material-button-contents { font-family: "Google Sans", "Roboto", arial, sans-serif; font-weight: 500; overflow: hidden; text-overflow: ellipsis; vertical-align: top; } .gsi-material-button .gsi-material-button-state { transition: opacity .218s; bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; } .gsi-material-button:not(:disabled):active .gsi-material-button-state, .gsi-material-button:not(:disabled):focus .gsi-material-button-state { background-color: var(--g-state); opacity: 12%; } .gsi-material-button:not(:disabled):hover { box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); } .gsi-material-button:not(:disabled):hover .gsi-material-button-state { background-color: var(--g-state); opacity: 8%; } .gsi-material-button:focus-visible { outline: 2px solid var(--dot); outline-offset: 2px; } .link-btn { display: block; margin: 12px auto 0; color: var(--link); font-size: 13px; } .or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--secondary); font-size: 12px; } .or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); } .sheet p.fine { margin: 14px 0 0; font-size: 11px; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- share sheet ---------- */ .share .card { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; background: var(--input-bg); margin-bottom: 14px; } .share .card img, .share .card .tile { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; flex: none; } .share .card .tile { display: grid; place-items: center; background: var(--tile); color: var(--tile-text); font-weight: 700; } .share .card .ct { min-width: 0; } .share .card .tt { font-size: 13px; font-weight: 600; color: var(--title); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .share .card .tm { font-size: 12px; color: var(--secondary); margin-top: 3px; } .share .linkrow { display: flex; gap: 8px; } .share .linkrow .field { flex: 1; min-width: 0; font: 12px var(--font-mono); } .share .copy-btn { flex: none; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--sel); color: var(--sel-text); font-weight: 600; font-size: 13px; } .share .apps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 18px; } .share .apps a { display: grid; justify-items: center; gap: 6px; padding: 6px 2px; border-radius: 10px; color: var(--title); font-size: 11px; text-decoration: none; } .share .apps a:hover { background: var(--press); } .share .apps .dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #ffffff; } .share .apps .dot svg { width: 22px; height: 22px; } .share .apps .wa { background: var(--wa); } .share .apps .tg { background: var(--tg); } .share .apps .fb { background: var(--fb); } .share .apps .xx { background: var(--xbg); color: var(--xfg); } .share .apps .em { background: var(--em); color: #ffffff; } .share .native { margin-top: 10px; width: 100%; height: 38px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--input-border); font-weight: 600; font-size: 13px; color: var(--title); } @media (max-width: 599px) { .sheet-scrim.share-scrim { place-items: end stretch; padding: 0; } .sheet-scrim.share-scrim .sheet { width: 100%; border-radius: 16px 16px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); } } /* ---------- medium: sidebar becomes an overlay ---------- */ @media (max-width: 1279px) { .app { grid-template-columns: 392px minmax(0, 1fr); } .sidebar-wrap { position: fixed; z-index: 10; top: 0; bottom: 0; left: 0; width: 275px; transform: translateX(-105%); transition: transform 300ms var(--ease); } .sidebar { box-shadow: var(--shadow-high); } .app.sb-open .sidebar-wrap { transform: none; } .app.sb-open .scrim { display: block; position: fixed; inset: 0; z-index: 9; background: transparent; } .only-collapsed { display: grid !important; } } /* ---------- narrow: one pane at a time ---------- */ @media (max-width: 899px) { .app { grid-template-columns: minmax(0, 1fr); } .sidebar-wrap { position: static; transform: none; width: auto; transition: none; } .sidebar { box-shadow: var(--shadow-low); } .app.sb-open .scrim { display: none; } .app > .panes > .pane, .app > .sidebar-wrap { display: none; } .app[data-view="sources"] > .sidebar-wrap, .app[data-view="list"] > .panes > .timeline, .app[data-view="article"] > .panes > .reader { display: flex; } .reader { border-left: 0; } .only-narrow { display: grid !important; } .only-collapsed { display: none !important; } .tl-head { padding-left: 12px; } .tl-list .tl-search { display: flex; } .rd-head .search { display: none; } .article { padding: 72px 20px 48px; } .articleTitle h1 { font-size: 1.6rem; } .row { padding-right: 8px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .search { background: var(--sidebar); } } /* ---------- server-rendered additions ---------- */ a.sb-row, a.row, a.story-row, .copy a { text-decoration: none; } /* Links do not size padding inside their width like the preview's