/* MTGA base styles: tokens and shared components, measured from prd/*.jpg (1080px wide screenshots of a 393 CSS px phone, so design px / 2.75 = CSS px). Page-specific rules live in css/.css. */ :root { color-scheme: dark; --bg: #000000; --nav-bg: #111111; --tab-bg: #101010; --panel: #1c1c1e; /* list rows, news cards, input rows */ --panel-2: #2c2c2e; /* "我的" cards, segmented control off */ --panel-3: #3a3a3c; /* checkboxes, chips, capsule outline */ --capsule: #292929; /* search capsule in the nav bar */ --line: #38383a; --blue: #0a84ff; --blue-glow: #16a2fa; --text: #ffffff; --text-2: #8e8e93; /* English type line, codes */ --text-3: #5b5b5d; /* placeholders */ --green: #30d158; --gray-chip: #8e8e93; --orange: #ff9f0a; --red: #ff453a; --nav-h: 45.45px; --tab-h: 56.4px; --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); } body { font-family: var(--font); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } img { display: block; max-width: 100%; } input, textarea { font: inherit; color: var(--text); } .page { padding-top: calc(var(--safe-top)); } body.has-nav .page { padding-top: calc(var(--safe-top) + var(--nav-h)); } body.has-tabbar .page { padding-bottom: calc(var(--tab-h) + var(--safe-bottom)); } body.has-actionbar .page { padding-bottom: calc(64px + var(--safe-bottom)); } .hidden { display: none !important; } /* ---------------------------------------------------------------- top navigation (prd/2.jpg, 6.jpg, 10.jpg) */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 20; height: calc(var(--nav-h) + var(--safe-top)); padding-top: var(--safe-top); background: var(--nav-bg); display: flex; align-items: center; } .nav.transparent { background: transparent; } .nav .capsule { position: absolute; left: 8.7px; top: calc(var(--safe-top) + 5.45px); height: 30.2px; width: 91.3px; border-radius: 15.1px; border: 1px solid #262628; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; } .nav .capsule a { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; } .nav .capsule .sep { width: 1px; height: 18px; background: var(--panel-3); } .nav .capsule svg { width: 20px; height: 20px; stroke: #d3d3d3; fill: none; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; } /* prd/2.jpg: light gray hairline glyphs, ~1.1 CSS px */ .nav .capsule a:first-child svg { stroke-width: 2; } /* the back arrow is drawn heavier than the house */ .nav .title { margin: 0 auto; font-size: 14.4px; font-weight: 400; letter-spacing: 0.02em; max-width: calc(100% - 220px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* clear of the capsule */ .nav .nav-search { position: absolute; left: 109px; right: 109px; top: calc(var(--safe-top) + 6px); height: 32px; border-radius: 16px; background: var(--capsule); display: flex; align-items: center; padding: 0 10px; gap: 8px; font-size: 13px; } .nav .nav-search .scope { padding-right: 8px; border-right: 1px solid #4a4a4c; } .nav .nav-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 13px; } .nav .nav-search svg { width: 20px; height: 20px; stroke: var(--blue); fill: none; stroke-width: 2.2; } /* ---------------------------------------------------------------- bottom tab bar (prd/1.jpg, 5.jpg) */ .tabbar { position: fixed; inset: auto 0 0 0; z-index: 20; height: calc(var(--tab-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: var(--tab-bg); display: flex; } .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding-top: 6.6px; color: #757575; font-size: 9.2px; line-height: 1; } .tabbar a svg { width: 23.5px; height: 23.5px; margin-bottom: 4.5px; fill: currentColor; } .tabbar a.active { color: #0479fa; } /* ---------------------------------------------------------------- action bar (prd/2.jpg search, 10.jpg detail) */ .actionbar { position: fixed; inset: auto 0 0 0; z-index: 20; padding: 10px 16px calc(10px + var(--safe-bottom)); background: var(--nav-bg); display: flex; align-items: center; gap: 16px; } /* ---------------------------------------------------------------- headings and sections */ .big-title { margin: 0; padding: 40px 16px 0; font-size: 24px; font-weight: 700; } .big-sub { margin: 10px 16px 0; font-size: 14px; color: #e5e5ea; } .section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 19px; margin: 24px 0 12px; } .section-head h2 { margin: 0; font-size: 19px; font-weight: 700; } .section-head a { color: var(--blue); font-size: 13px; } .field-label { display: flex; justify-content: space-between; padding: 0 15px; margin: 26px 0 6px; font-size: 13px; color: #c7c7cc; } .field-label .link { color: #c7c7cc; text-decoration: underline; text-underline-offset: 3px; } .field { background: var(--panel); min-height: 42px; display: flex; align-items: center; padding: 0 15px; border-top: 1px solid #111; border-bottom: 1px solid #111; } .field input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; height: 42px; } .field input::placeholder { color: var(--text-3); } /* ---------------------------------------------------------------- controls */ .btn-primary { background: var(--blue); color: #fff; border-radius: 8px; height: 36px; flex: 1; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; } .btn-primary:disabled { opacity: 0.45; } .btn-text-red { color: var(--red); font-size: 15px; width: 72px; text-align: center; } .check { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; } .check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 5px; background: var(--panel-3); margin: 0; } /* UX6b: the tick on a ticked box (as 高级搜索's .chk), a round mark for a radio */ .check input:checked { background-color: var(--blue); background-repeat: no-repeat; background-position: center; background-size: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4.5 12.5 5 5 10-11' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .check input[type="radio"] { border-radius: 50%; } .switch { position: relative; width: 36px; height: 22px; display: inline-block; } .switch input { position: absolute; opacity: 0; inset: 0; margin: 0; } .switch span { position: absolute; inset: 0; border-radius: 11px; background: #39393d; transition: background 0.2s; } .switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; } .switch input:checked + span { background: var(--blue); } .switch input:checked + span::after { transform: translateX(14px); } .seg { display: inline-flex; gap: 8px; } .seg a, .seg button { height: 27px; padding: 0 14px; border-radius: 6px; background: var(--panel-2); color: #8e8e93; font-size: 14px; display: inline-flex; align-items: center; } .seg .on { background: var(--blue); color: #fff; } /* ---------------------------------------------------------------- mana symbols */ .sym { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; margin: 0 0.04em; } .sym-text { width: auto; font-size: 0.8em; color: var(--text-2); } .sym-sep { color: var(--text-2); margin: 0 0.25em; } /* ---------------------------------------------------------------- card list (prd/8.jpg) and grid (prd/7.jpg) */ .result-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 19px; height: 46px; margin-top: 6px; } .result-bar .count { font-size: 15px; } .result-bar .views { display: flex; align-items: center; gap: 14px; } .result-bar .views svg { width: 22px; height: 22px; } .result-bar .views .div { width: 1px; height: 20px; background: var(--panel-3); } .card-list { list-style: none; margin: 0; padding: 4px 0; } .card-row { display: flex; gap: 20px; padding: 6px 23px 6px 24px; align-items: flex-start; min-height: 116px; } .card-row .thumb { width: 64px; flex: 0 0 64px; aspect-ratio: 488 / 680; border-radius: 3px; background: var(--panel); overflow: hidden; } .card-row .thumb img { width: 100%; height: 100%; object-fit: cover; } .card-row .meta { flex: 1; min-width: 0; padding-top: 4px; } .card-row .zh { font-size: 15px; line-height: 1.35; } .card-row .en { font-size: 15px; line-height: 1.35; margin-top: 1px; } .card-row .cost { font-size: 13px; margin-top: 6px; min-height: 13px; } .card-row .type { font-size: 13px; color: var(--text-2); margin-top: 8px; } .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 12px 16px; } .card-grid a { display: block; border-radius: 4.5%/3.2%; overflow: hidden; background: var(--panel); aspect-ratio: 488 / 680; } .card-grid img { width: 100%; height: 100%; object-fit: cover; } /* ---------------------------------------------------------------- placeholders */ .placeholder { margin: 120px 32px; text-align: center; color: var(--text-2); font-size: 14px; } .placeholder svg { width: 48px; height: 48px; margin: 0 auto 12px; fill: #3a3a3c; } .toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-bottom)); transform: translateX(-50%); z-index: 50; background: rgba(60, 60, 64, 0.95); color: #fff; font-size: 14px; padding: 9px 16px; border-radius: 8px; max-width: 80vw; width: max-content; } /* centred with translateX: without this a long text folds into half the screen */ /* A long unbroken word typed by the owner (search words in an empty state) wraps instead of widening the page. */ .list-empty p { overflow-wrap: anywhere; } /* The hidden attribute wins over any display a class sets (sheets, bars and rows that scripts show and hide). */ [hidden] { display: none !important; } /* A toast that can undo the collection change it reports (app.js undoToast): 10 seconds, one at a time. */ .toast-undo { display: flex; align-items: center; gap: 16px; padding-right: 10px; } .toast-undo button { flex: 0 0 auto; white-space: nowrap; color: #64b5ff; font-size: 14px; font-weight: 600; padding: 2px 4px; } /* another toast while the undo one is up goes above it, so 撤销 stays in reach */ .toast-undo ~ .toast { bottom: calc(146px + var(--safe-bottom)); } /* ---------------------------------------------------------------- UX6 基础件 (UX6 design §二.3; pages adopt them in UX6f). Names no older class uses: .set-row, .tag and .sheet-head already mean other things (advanced.css, home.css). */ /* G1: a hit area 10px past the visual one on every side, for icon buttons, text links, checkboxes; the look stays. */ .hit { position: relative; } .hit::after { content: ""; position: absolute; inset: -10px; } /* G2: the one secondary button, grey ground and white text (.danger: red text); 44 high in panel and sheet footers. */ .btn-2 { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 8px; background: var(--panel-2); color: var(--text); font-size: 15px; text-align: center; } .btn-2.danger { color: var(--red); } .btn-2:disabled { opacity: 0.45; } /* G3: a setting row "label | value | ›" (a