/* AucTrace News — темы оформления. Тёмная — по умолчанию (в духе терминала), светлая — через атрибут data-theme="light" на (выбор в браузере). */ :root { --bg: #0a0e14; --panel: #10151f; --panel2: #131a26; --border: #1f2733; --text: #d7dee8; --text2: #c2cad6; --muted: #7d8797; --accent: #4ade80; --brand-blue: #4881c4; /* синий основного логотипа AT (правка Вадима 21.08) */ --flash: #ef4444; --cat-oil: #f59e0b; --cat-macro: #38bdf8; --cat-geopolitics: #c084fc; --cat-moex: #4ade80; --cat-market: #f472b6; --on-accent: #06240f; --on-badge: #0a0e14; --badge-fon-bg: #374151; --badge-fon-text: #cbd5e1; --fresh: #16202e; --shadow: rgba(0, 0, 0, .5); } [data-theme="light"] { --bg: #eef1f5; --panel: #ffffff; --panel2: #f6f8fb; --border: #d8dfe8; --text: #1c2430; --text2: #37424f; --muted: #66727f; --accent: #16a34a; --brand-blue: #3a6fae; /* тот же синий AT, чуть глубже для светлого фона */ --flash: #dc2626; --cat-oil: #fbbf24; --cat-macro: #7dd3fc; --cat-geopolitics: #d8b4fe; --cat-moex: #86efac; --cat-market: #f9a8d4; --on-accent: #ffffff; --on-badge: #1c2430; --badge-fon-bg: #e2e8f0; --badge-fon-text: #475569; --fresh: #dbeafe; --shadow: rgba(30, 41, 59, .25); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font: 14px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .hidden { display: none !important; } b { font-weight: 600; } /* ---- вход ---- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-box { width: 320px; padding: 28px 26px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; text-align: center; } .login-logo { font-size: 24px; font-weight: 700; letter-spacing: .5px; } .login-logo span, .brand span { color: var(--brand-blue); } .login-logo-img { width: 56px; height: 56px; border-radius: 12px; margin-bottom: 12px; } .login-sub { color: var(--muted); font-size: 12px; margin: 6px 0 18px; } .login-box input { width: 100%; padding: 10px 12px; margin-bottom: 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; outline: none; } .login-box input:focus { border-color: var(--accent); } .login-box button { width: 100%; padding: 10px; border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 700; cursor: pointer; } .login-error { color: var(--flash); font-size: 12px; min-height: 16px; margin-top: 10px; } /* ---- шапка ---- */ .topbar { display: flex; align-items: center; gap: 18px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; } .brand { font-size: 17px; font-weight: 700; letter-spacing: .4px; display: flex; align-items: center; } .brand-logo { width: 26px; height: 26px; border-radius: 6px; margin-right: 9px; display: block; } .status { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12px; } .stats-group { display: contents; } .status b { color: var(--text); } .stat.flash b { color: var(--flash); } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .dot-on { background: var(--accent); box-shadow: 0 0 6px var(--accent); } .dot-off { background: var(--flash); } .top-actions { margin-left: auto; display: flex; gap: 8px; } .btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; } .btn-ghost:hover { color: var(--text); border-color: var(--accent); } /* ---- фильтры ---- */ .toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel2); } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { background: var(--panel); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; } .chip.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 700; } .chip.prio-flash.active { background: var(--flash); color: #fff; border-color: var(--flash); } .search { flex: 1; min-width: 180px; padding: 7px 12px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; outline: none; } .search:focus { border-color: var(--accent); } /* ---- лента ---- */ .feed { max-width: 980px; margin: 0 auto; padding: 14px 16px 40px; } .card { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .card.flash { border-left-color: var(--flash); box-shadow: 0 0 0 1px rgba(239,68,68,.25); } .card.background { opacity: .78; } .card .head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .card .time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .badge { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; padding: 2px 8px; border-radius: 999px; color: var(--on-badge); } .badge.oil { background: var(--cat-oil); } .badge.macro { background: var(--cat-macro); } .badge.geopolitics { background: var(--cat-geopolitics); } .badge.moex { background: var(--cat-moex); } .badge.market { background: var(--cat-market); } .badge.flash-b { background: var(--flash); color: #fff; } .badge.bg-b { background: var(--badge-fon-bg); color: var(--badge-fon-text); } .card .title { font-size: 15px; font-weight: 650; } .card .title a { color: var(--text); text-decoration: none; } .card .title a:hover { color: var(--accent); } .card .orig { color: var(--muted); font-size: 12px; margin-top: 3px; } .card .summary { margin-top: 8px; color: var(--text2); } .card .meta { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 11.5px; } .card .meta .src { color: var(--text); } .card .meta .instruments { color: var(--accent); } .card .fresh { animation: fresh 1.6s ease-out; } @keyframes fresh { from { background: var(--fresh); } to { background: var(--panel); } } .sentinel { height: 1px; } .empty { text-align: center; color: var(--muted); padding: 40px 16px; } /* ---- панель источников ---- */ .panel { position: fixed; right: 14px; top: 60px; width: 380px; max-width: calc(100vw - 28px); max-height: calc(100vh - 80px); overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; z-index: 30; box-shadow: 0 14px 40px var(--shadow); } .panel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 700; } .panel-body { padding: 10px 14px; } .src-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 12px; } .src-row:last-child { border-bottom: 0; } .src-name { font-weight: 600; } .src-state { text-align: right; color: var(--muted); } .src-state .ok { color: var(--accent); } .src-state .bad { color: var(--flash); } @media (max-width: 720px) { .topbar { gap: 10px; } .feed { padding: 10px 10px 40px; } } /* ---- вкладки (лента / утренние обзоры, N1p4) ---- */ .tabs { display: flex; gap: 4px; padding: 0 16px; background: var(--panel2); border-bottom: 1px solid var(--border); } .tab { background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; } .tab:hover { color: var(--text); } .tab.active { color: var(--text); border-bottom-color: var(--accent); } .tab-badge { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: 2px; box-shadow: 0 0 6px var(--accent); } /* ---- плашки последних обзоров над лентой: нефть слева, золото справа ---- */ .digest-pins { max-width: 980px; margin: 12px auto 0; padding: 0 16px; display: flex; gap: 10px; flex-wrap: wrap; } .digest-pin { flex: 1 1 320px; min-width: 0; padding: 10px 14px; display: flex; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; font-size: 12.5px; } .digest-pin .pin-label { color: var(--text); letter-spacing: .4px; font-size: 13px; font-weight: 600; white-space: nowrap; } .digest-pin .pin-title { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } /* ---- экран обзоров: список слева, текст справа ---- */ .digests { max-width: 1180px; margin: 0 auto; padding: 14px 16px 40px; display: flex; gap: 14px; align-items: flex-start; } .digest-list { width: 280px; flex: 0 0 280px; } .digest-item { display: block; width: 100%; text-align: left; cursor: pointer; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; color: var(--text); font: inherit; } .digest-item:hover { border-color: var(--accent); } .digest-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .digest-item .d-date { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .digest-item .d-today { color: var(--accent); font-weight: 700; font-size: 10.5px; letter-spacing: .6px; } .digest-item .d-title { font-size: 13px; font-weight: 600; margin-top: 3px; } .digest-view { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px; } .digest-empty { color: var(--muted); text-align: center; padding: 40px 10px; } .digest-meta { color: var(--muted); font-size: 11.5px; margin-bottom: 12px; } /* типографика текста обзора */ .digest-view h2 { margin: 18px 0 8px; font-size: 18px; } .digest-view h2:first-child { margin-top: 0; } .digest-view h3 { margin: 16px 0 6px; font-size: 15.5px; } .digest-view h4, .digest-view h5 { margin: 14px 0 6px; font-size: 13.5px; } .digest-view p { margin: 8px 0; color: var(--text2); } .digest-view ul, .digest-view ol { margin: 8px 0; padding-left: 22px; color: var(--text2); } .digest-view li { margin: 3px 0; } .digest-view table { border-collapse: collapse; margin: 10px 0; font-size: 12.5px; width: 100%; } .digest-view th, .digest-view td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; } .digest-view th { background: var(--panel2); } .digest-view code { background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 12px; } .digest-view blockquote { border-left: 3px solid var(--border); margin: 10px 0; padding: 2px 12px; color: var(--muted); } .digest-view hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; } .digest-view a { color: var(--accent); } @media (max-width: 860px) { .digests { flex-direction: column; } .digest-list { width: 100%; flex: none; } } /* ---------- читалка полного текста (N2) ---------- */ body.no-scroll { overflow: hidden; } .art-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; } .art-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 14, 0.62); backdrop-filter: blur(2px); } [data-theme="light"] .art-backdrop { background: rgba(60, 72, 88, 0.35); } .art-window { position: relative; z-index: 1; width: min(880px, 94vw); max-height: 90vh; margin: 4vh 0; padding: 0 0 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45); overflow-y: auto; } .art-head { position: sticky; top: 0; z-index: 2; display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 16px 20px 12px; background: var(--panel); border-bottom: 1px solid var(--border); } .art-title { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--text); } .art-meta { margin-top: 6px; font-size: 12px; color: var(--muted); } .art-actions { display: flex; gap: 8px; flex: none; } .art-actions .btn-ghost { text-decoration: none; white-space: nowrap; } .art-excerpt { margin: 14px 20px 0; padding: 10px 14px; background: var(--panel2); border-left: 3px solid var(--brand-blue); border-radius: 8px; font-size: 13.5px; color: var(--text2); } .art-body { padding: 12px 20px 4px; } .art-body p { margin: 10px 0; color: var(--text2); font-size: 14.5px; line-height: 1.55; } .art-loading, .art-error { padding: 26px 6px; color: var(--muted); font-size: 14px; } .art-error { color: var(--flash, #f87171); } .art-note { margin: 14px 20px 6px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--muted); } /* кнопка «Читать полностью» в мете карточки */ .read-full { background: transparent; border: 1px solid var(--brand-blue); color: var(--brand-blue); border-radius: 7px; padding: 2px 9px; font-size: 12px; cursor: pointer; } .read-full:hover { background: var(--brand-blue); color: #fff; } /* выжимка полного текста вместо резюме RSS */ .summary.excerpt { border-left: 3px solid var(--brand-blue); padding-left: 10px; }