/* LinuxNews — shared styles Theme: dark by default (terminal aesthetic). Light theme via the toggle button (sets data-theme="light" on ). All colors use CSS variables. */ :root { /* Dark theme (default) — green/cyan terminal palette */ --green: #00e676; --green-d: #69f0ae; --cyan: #00bcd4; --cyan-d: #4dd0e1; --dark: #e8f0fe; --bg: #0a0e13; --card: #111820; --border: #1e2a36; --soft: #0e141b; --text: #cdd6e0; --muted: #7a8b99; --red: #ff5252; --amber: #ffca28; --tag-bg: #1e2a36; --tag-topic-bg: #0d2b1a; --tag-topic-fg: #69f0ae; --tag-vuln-bg: #2b0d0d; --tag-vuln-fg: #ff8a80; --shadow: rgba(0,0,0,0.5); } :root[data-theme="light"] { --green: #1b6b3a; --green-d: #145228; --cyan: #00838f; --cyan-d: #006064; --dark: #0d1b2a; --bg: #f3f6fa; --card: #ffffff; --border: #d4dde8; --soft: #f8fafc; --text: #1c2b38; --muted: #607080; --red: #c62828; --amber: #e65100; --tag-bg: #e8eff7; --tag-topic-bg: #d4edd9; --tag-topic-fg: #145228; --tag-vuln-bg: #fde8e8; --tag-vuln-fg: #c62828; --shadow: rgba(0,0,0,0.08); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; margin: 0 auto; padding: 16px; background: var(--bg); color: var(--text); max-width: 1100px; line-height: 1.5; } h1, h2, h3, h4 { color: var(--dark); margin: 0.4em 0; } h1 { font-size: 1.6em; font-family: "SF Mono", "Fira Mono", "Cascadia Code", Consolas, monospace; } h2 { font-size: 1.15em; margin-top: 24px; } a { color: var(--cyan); text-decoration: none; } a:hover { text-decoration: underline; color: var(--cyan-d); } p { margin: 8px 0; } .muted { color: var(--muted); font-size: 0.9em; } /* ── Header ──────────────────────────────────────────────────────────────── */ .site-header { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 6px; } .site-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .site-header h1 a { color: var(--green); text-decoration: none; } .site-header h1 a:hover { color: var(--green-d); } .tagline { color: var(--muted); margin: 2px 0 0; font-size: 0.85em; } .theme-toggle { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 1.1em; flex-shrink: 0; margin-top: 4px; } .theme-toggle:hover { border-color: var(--cyan); } /* ── Nav ─────────────────────────────────────────────────────────────────── */ .nav { border-bottom: 1px solid var(--border); margin-bottom: 18px; padding: 6px 0 10px; } .nav-links { display: flex; flex-wrap: wrap; gap: 4px 2px; } .nav-links a { color: var(--muted); font-size: 0.82em; padding: 4px 9px; border-radius: 4px; border: 1px solid transparent; } .nav-links a:hover { color: var(--green); border-color: var(--border); text-decoration: none; } /* ── Trending ────────────────────────────────────────────────────────────── */ .trending { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; } .trending h2 { margin: 0 0 10px; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .toggle { display: flex; flex-wrap: wrap; gap: 8px; } .toggle a { background: var(--tag-topic-bg); color: var(--tag-topic-fg); border: 1px solid transparent; border-radius: 5px; padding: 4px 10px; font-size: 0.82em; font-weight: 500; } .toggle a:hover { border-color: var(--green); text-decoration: none; } .toggle .count { background: var(--border); color: var(--muted); border-radius: 3px; padding: 0 4px; font-size: 0.85em; margin-left: 3px; } /* ── Article list ────────────────────────────────────────────────────────── */ .articles { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; } .article { background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 12px 14px; } .article:hover { border-color: var(--cyan); } .article-title { display: block; color: var(--dark); font-size: 0.97em; font-weight: 600; line-height: 1.35; margin-bottom: 5px; } .article-title:hover { color: var(--green); text-decoration: none; } .article-meta { font-size: 0.78em; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 4px; } .article-meta .source { color: var(--cyan); font-weight: 500; } .article-meta .dot { color: var(--border); } .article-summary { font-size: 0.82em; color: var(--muted); margin: 4px 0 0; line-height: 1.45; } .empty { color: var(--muted); font-style: italic; margin-top: 24px; } /* ── Tags ────────────────────────────────────────────────────────────────── */ .tags { display: inline-flex; flex-wrap: wrap; gap: 4px; } .tag { display: inline-block; font-size: 0.75em; padding: 1px 6px; border-radius: 3px; background: var(--tag-bg); color: var(--muted); font-weight: 500; } .tag-topic { background: var(--tag-topic-bg); color: var(--tag-topic-fg); } /* Highlight high-severity topics */ .tag[href*="vulnerability"], .tag[href*="exploit"], .tag[href*="malware"] { background: var(--tag-vuln-bg); color: var(--tag-vuln-fg); } .tag:hover { text-decoration: none; opacity: 0.85; } /* ── Health table ────────────────────────────────────────────────────────── */ .health-table { width: 100%; border-collapse: collapse; font-size: 0.83em; margin-top: 12px; } .health-table th, .health-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); } .health-table th { background: var(--soft); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78em; } .health-table tr.row-ok td:nth-child(3) { color: var(--green); } .health-table tr.row-err td:nth-child(3) { color: var(--red); } .health-table tr.row-disabled { opacity: 0.5; } .health-table .err-msg { color: var(--muted); font-size: 0.85em; word-break: break-all; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 14px; font-size: 0.8em; color: var(--muted); text-align: center; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { body { padding: 10px; } h1 { font-size: 1.3em; } .health-table th:nth-child(5), .health-table td:nth-child(5) { display: none; } }