@charset "UTF-8"; :root { --ink: #122033; --muted: #66758a; --line: #dfe7f1; --blue: #1565d8; --blue-dark: #0d3f87; --blue-soft: #edf5ff; --surface: #ffffff; --canvas: #f5f8fc; --radius: 16px; --shadow: 0 14px 40px rgba(27, 57, 94, .08); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--canvas); font-family: -apple-system, BlinkMacSystemFont, "Microsoft Yahei", MiSans, "HarmonyOS Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 14px; line-height: 21px; } a { color: inherit; text-decoration: none; } a:hover { color: var(--blue); } .shell { width: min(1200px, calc(100% - 40px)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #e8e8e8; background: white; } .header-main { min-height: 72px; display: flex; align-items: center; gap: 30px; position: relative; } .brand { display: inline-flex; align-items: center; gap: 12px; } .brand strong { color: var(--blue); font-size: 30px; letter-spacing: -.8px; } .brand span { border-left: 1px solid var(--line); padding-left: 12px; font-size: 15px; font-weight: 700; } .brand-logo { flex: 0 0 auto; } .site-logo { display: block; width: 170px; height: 60px; object-fit: contain; } .header-navigation { min-width: 0; display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 24px; } .main-nav { min-width: 0; } .nav-scroll { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; } .nav-scroll::-webkit-scrollbar { display: none; } .main-nav a { padding: 25px 0 24px; font-size: 14px; font-weight: 400; white-space: nowrap; } .main-nav a:first-child { color: var(--blue); } .header-search { flex: 0 0 auto; position: relative; } .search-toggle { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; color: #444; background: transparent; cursor: pointer; } .search-toggle:hover, .header-search.is-open .search-toggle { color: var(--blue); } .search-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; } .search { width: 330px; display: flex; position: absolute; top: calc(100% + 12px); right: 0; z-index: 30; padding: 4px; border: 1px solid #ddd; border-radius: 3px; background: white; box-shadow: 0 8px 24px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateY(-5px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; pointer-events: none; } .header-search.is-open .search { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 9px 16px; background: transparent; } .search button { border: 0; border-radius: 2px; background: var(--blue); color: white; padding: 8px 18px; font-weight: 700; cursor: pointer; } .ad-wrap { padding-block: 24px 0; } .ad-slot { min-height: 90px; display: grid; place-content: center; text-align: center; gap: 2px; border: 1px dashed #b9c8da; border-radius: 12px; background: repeating-linear-gradient(135deg, #f9fbfe, #f9fbfe 12px, #f1f5fa 12px, #f1f5fa 24px); color: #718197; } .ad-slot span { font-size: 10px; letter-spacing: 1.5px; } .ad-slot strong { color: #52657b; font-size: 13px; } .ad-slot small { font-size: 11px; } .ad-slot.is-filled { overflow: hidden; padding: 0; border: 0; background: transparent; } .ad-slot.is-filled:not(.is-text-ad) { border-radius: 0; } .ad-slot.is-filled > span { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); } .ad-slot.is-image-ad { position: relative; } .ad-slot.is-image-ad > a { position: absolute; inset: 0; display: block; } .ad-slot.is-image-ad img { width: 100%; height: 100%; display: block; object-fit: contain; } .ad-slot.is-filled .adsbygoogle { width: 100%; min-height: inherit; } .ad-slot.is-text-ad { border: 1px solid #d4e1ee; border-radius: 8px; background: linear-gradient(135deg, #f8fbff, #eef6ff); } .ad-slot.is-text-ad .ad-text-creative { min-height: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 14px 22px; color: #253b56; text-align: center; } .ad-slot.is-text-ad .ad-text-creative:hover { color: var(--blue); } .ad-text-creative strong { max-width: 100%; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; } .ad-text-creative small { max-width: 760px; color: #657991; font-size: 12px; line-height: 1.5; } .ad-text-creative b { margin-top: 2px; padding: 5px 12px; border-radius: 999px; color: white; background: var(--blue); font-size: 11px; } .media-home { padding: 24px 0 54px; color: #333; background: #f4f4f4; } .media-shell { width: min(1140px, calc(100% - 40px)); margin-inline: auto; } .media-lead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 20px; align-items: start; } .news-carousel { position: relative; min-width: 0; aspect-ratio: 720 / 371; overflow: hidden; border-radius: 8px; background: #173955; } .news-slides { position: relative; height: 100%; min-height: 0; } .news-slide { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .45s ease, visibility .45s ease; } .news-slide.is-active { visibility: visible; opacity: 1; z-index: 1; } .news-slide > img { width: 100%; height: 100%; display: block; object-fit: cover; } .news-slide-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: rgba(255,255,255,.9); background: radial-gradient(circle at 25% 25%, #2f91c7, transparent 38%), linear-gradient(140deg, #0d2f53, #176ca2); } .news-slide-placeholder span { font-size: 44px; font-weight: 800; letter-spacing: -2px; } .news-slide-placeholder strong { font-size: 12px; letter-spacing: 4px; opacity: .66; } .news-slide::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.84)); pointer-events: none; } .news-slide-overlay { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 70px 30px 28px; color: white; } .news-slide-meta { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.76); font-size: 12px; } .media-category { display: inline-flex; padding: 3px 8px; color: white; background: #168bd1; font-size: 12px; font-weight: 700; } .media-category:hover { color: white; background: #0e6fae; } .news-slide-overlay h1 { max-width: 92%; margin: 10px 0 8px; font-size: 28px; line-height: 1.35; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.28); } .news-slide-overlay h1 a:hover { color: #d9f1ff; } .news-carousel-arrow { position: absolute; z-index: 4; top: 50%; width: 34px; height: 48px; display: grid; place-items: center; margin-top: -24px; border: 0; color: white; background: rgba(0,0,0,.28); font-size: 30px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s ease, background .2s ease; } .news-carousel:hover .news-carousel-arrow, .news-carousel:focus-within .news-carousel-arrow { opacity: 1; } .news-carousel-arrow:hover { background: rgba(0,0,0,.55); } .news-carousel-prev { left: 0; } .news-carousel-next { right: 0; } .news-carousel-dots { position: absolute; z-index: 4; right: 20px; bottom: 18px; display: flex; gap: 7px; } .news-carousel-dots button { width: 19px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .2s ease, background .2s ease; } .news-carousel-dots button.is-active { width: 30px; background: white; } .media-hot, .media-widget, .media-feed { overflow: hidden; border-radius: 8px; background: white; } .media-hot { min-width: 0; padding: 18px 22px 10px; border-top: 3px solid #168bd1; } .media-block-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #e8e8e8; } .media-block-title h2 { margin: 0; color: #333; font-size: 15px; line-height: 22.5px; } .media-block-title > span { color: #aaa; font-size: 10px; letter-spacing: 1.2px; } .media-hot ol { margin: 0; padding: 4px 0 0; list-style: none; } .media-hot li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid #eee; line-height: 21px; } .media-hot li:last-child { border-bottom: 0; } .media-hot time { color: #999; font-size: 12px; } .media-hot a { display: block; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .media-main-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 20px; align-items: start; margin-top: 24px; } .media-feed { padding: 0 24px; } .media-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding: 17px 0 14px; border-bottom: 1px solid #e8e8e8; } .media-section-heading h1, .media-section-heading h2 { margin: 0; font-size: 17px; line-height: 25.5px; } .media-section-heading span { color: #999; font-size: 12px; } .media-excerpt { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid #eee; } .media-excerpt:last-child { border-bottom: 0; } .media-excerpt-image { width: 220px; height: 138px; display: block; overflow: hidden; position: relative; border-radius: 8px; background: #e8edf2; } .media-excerpt-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; } .media-excerpt:hover .media-excerpt-image img { transform: scale(1.025); } .media-excerpt-image.is-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; background: linear-gradient(145deg, #173c67, #2189c1); } .media-excerpt-image.is-placeholder::before { content: "@"; position: absolute; right: -8px; top: -38px; color: rgba(255,255,255,.11); font-size: 130px; font-weight: 800; } .media-excerpt-image.is-placeholder span, .media-excerpt-image.is-placeholder small { position: relative; z-index: 1; } .media-excerpt-image.is-placeholder span { font-size: 30px; font-weight: 800; } .media-excerpt-image.is-placeholder small { margin-top: 3px; font-size: 11px; } .media-excerpt-body { min-width: 0; display: flex; flex-direction: column; } .media-excerpt-body h2 { margin: -2px 0 8px; font-size: 18px; line-height: 27px; font-weight: 700; } .media-excerpt-body h2 a { overflow-wrap: anywhere; } .media-excerpt-body p { display: -webkit-box; overflow: hidden; margin: 0; color: #666; font-size: 14px; line-height: 21px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .media-excerpt:not(.is-textonly) .media-excerpt-body p { -webkit-line-clamp: 3; } .media-excerpt-meta { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-top: auto; padding-top: 10px; color: #999; font-size: 12px; } .media-excerpt-meta a { color: #168bd1; } .media-load-more-wrap { display: flex; justify-content: center; padding: 24px 0 28px; } .media-load-more { min-width: 170px; padding: 11px 24px; border: 1px solid #e2e2e2; border-radius: 8px; color: #666; background: #f5f5f5; font: inherit; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; } .media-load-more:hover { color: #168bd1; border-color: #b9d9eb; background: #f0f8fc; } .media-load-more:disabled { color: #aaa; cursor: wait; } .media-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; padding: 24px 0 28px; border-top: 1px solid #eee; } .media-pagination a, .media-pagination .is-current { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid #e1e1e1; border-radius: 6px; color: #666; background: white; font-size: 13px; } .media-pagination a:hover { color: white; border-color: #168bd1; background: #168bd1; } .media-pagination .is-current { color: white; border-color: #168bd1; background: #168bd1; } .media-pagination .media-page-direction { padding-inline: 14px; } .media-page-ellipsis { min-width: 18px; color: #aaa; text-align: center; } .media-sidebar { display: flex; flex-direction: column; gap: 20px; } .media-widget { padding: 18px 20px 20px; } .media-sidebar .ad-slot { min-height: 250px; border-radius: 8px; } .media-channel-list > div { padding: 14px 0; border-bottom: 1px solid #eee; } .media-channel-list > div:last-child { padding-bottom: 0; border-bottom: 0; } .media-channel-name { display: inline-block; margin-bottom: 7px; color: #333; font-size: 15px; font-weight: 700; } .media-channel-list > div > div { display: flex; flex-wrap: wrap; gap: 5px 12px; } .media-channel-list > div > div a { color: #777; font-size: 12px; } .media-channel-list a:hover { color: #168bd1; } .media-tag-list { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 15px; } .media-tag-list a { padding: 5px 9px; color: #666; background: #f1f1f1; font-size: 12px; } .media-tag-list a:hover { color: white; background: #168bd1; } .media-recommend-list { margin: 0; padding: 5px 0 0; list-style: none; } .media-recommend-list li { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid #eee; } .media-recommend-list li:last-child { padding-bottom: 0; border-bottom: 0; } .media-recommend-list span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: #777; background: #f0f0f0; font-size: 11px; } .media-recommend-list li:first-child span { color: white; background: #168bd1; } .media-recommend-list a { overflow: hidden; font-size: 14px; line-height: 21px; text-overflow: ellipsis; white-space: nowrap; } .channel-hero { margin-top: 14px; padding: 12px 18px; border-radius: 8px; background: white; } .channel-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #999; font-size: 12px; } .channel-breadcrumb a { color: #666; } .channel-breadcrumb a:hover { color: #168bd1; } .channel-breadcrumb span { color: #ccc; } .channel-breadcrumb strong { color: #333; font-weight: 700; } .channel-top-ad .ad-slot { min-height: 90px; border-radius: 8px; } .home-top-ad { margin-bottom: 20px; } .media-topic-ranking strong { min-width: 0; overflow: hidden; color: #444; font-size: 14px; line-height: 21px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; } .channel-empty { padding: 40px 0; color: #999; text-align: center; } .topic-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 4px 0 24px; } .topic-card { min-width: 0; overflow: hidden; border: 1px solid #e4e9ee; border-radius: 10px; background: white; box-shadow: 0 6px 18px rgba(24, 57, 87, .06); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .topic-card:hover { border-color: #c8dce9; box-shadow: 0 12px 28px rgba(24, 57, 87, .12); transform: translateY(-3px); } .topic-card-cover { position: relative; aspect-ratio: 8 / 5; display: block; overflow: hidden; background: #edf2f6; } .topic-card-cover img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; } .topic-card:hover .topic-card-cover img { transform: scale(1.035); } .topic-card-overlay { position: absolute; inset: 0; display: flex; align-items: end; padding: 42px 16px 14px; color: white; background: linear-gradient(180deg, transparent 28%, rgba(5, 24, 43, .86) 100%); } .topic-card-overlay strong { display: -webkit-box; overflow: hidden; font-size: 16px; line-height: 22px; text-shadow: 0 1px 3px rgba(0,0,0,.32); -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .topic-card-footer { min-height: 49px; display: flex; align-items: center; justify-content: flex-end; padding: 11px 14px; } .topic-card-more { color: #168bd1; font-size: 12px; font-weight: 700; white-space: nowrap; } .topic-card-more span { display: inline-block; transition: transform .2s ease; } .topic-card-more:hover span { transform: translateX(3px); } .topic-latest-list { margin: 15px 0 0; padding: 0; list-style: none; } .topic-latest-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee; } .topic-latest-list li:last-child { padding-bottom: 0; border-bottom: 0; } .topic-latest-list a { overflow: hidden; font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .topic-latest-list time { color: #aaa; font-size: 11px; } .home-page { --home-navy: #0c315d; --home-cyan: #1fa4dc; } .home-hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .8fr); gap: 22px; padding-block: 22px; } .home-feature, .home-briefing, .home-channel-card, .home-side-card, .home-article-list { border: 1px solid #e1e9f2; background: white; box-shadow: 0 8px 24px rgba(20, 49, 83, .045); } .home-feature { min-height: 390px; display: grid; grid-template-columns: minmax(245px, .85fr) minmax(0, 1.25fr); overflow: hidden; border-radius: 14px; } .home-feature-visual { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 30px; color: white; background: linear-gradient(145deg, #09284c 0%, #0e548e 58%, #25a3d7 100%); } .home-feature-visual::before { content: ""; position: absolute; width: 280px; height: 280px; right: -154px; top: -110px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.055), 0 0 0 84px rgba(255,255,255,.035); } .home-feature-visual::after { content: "@"; position: absolute; right: 18px; bottom: -55px; color: rgba(255,255,255,.09); font-size: 190px; font-weight: 900; line-height: 1; } .home-feature-mark { position: relative; z-index: 1; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.38); border-radius: 16px; background: rgba(255,255,255,.1); font-size: 21px; font-weight: 900; letter-spacing: -1px; backdrop-filter: blur(4px); } .home-feature-visual div { position: relative; z-index: 1; display: flex; flex-direction: column; } .home-feature-visual small { margin-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: 2.2px; opacity: .72; } .home-feature-visual strong { max-width: 180px; font-size: 21px; line-height: 1.35; } .home-feature-copy { display: flex; flex-direction: column; justify-content: center; align-items: start; padding: clamp(30px, 4vw, 52px); } .home-category { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .5px; } .home-feature h1 { margin: 11px 0 14px; font-size: clamp(28px, 3vw, 41px); line-height: 1.2; letter-spacing: -.8px; } .home-feature h1 a:hover { color: var(--blue); } .home-feature-copy > p { display: -webkit-box; overflow: hidden; margin: 0 0 20px; color: var(--muted); font-size: 15px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .home-read-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 9px 16px; border-radius: 8px; color: white; background: var(--home-navy); font-size: 12px; font-weight: 800; } .home-read-more:hover { color: white; background: var(--blue); } .home-read-more span { transition: transform .2s ease; } .home-read-more:hover span { transform: translateX(3px); } .home-briefing { display: flex; flex-direction: column; padding: 25px 26px 20px; border-radius: 14px; } .home-module-heading, .home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; } .home-module-heading { padding-bottom: 13px; border-bottom: 1px solid #e8e8e8; } .home-module-heading h2, .home-section-heading h2 { margin: 2px 0 0; line-height: 1.2; } .home-module-heading h2 { font-size: 20px; } .home-module-heading > a { color: var(--blue); font-size: 11px; font-weight: 750; } .home-briefing-list { display: flex; flex: 1; flex-direction: column; } .home-briefing-list article { flex: 1; padding: 14px 0 13px; border-bottom: 1px solid #e8eef5; } .home-briefing-list article:last-child { border-bottom: 0; } .home-briefing-list article > div { display: flex; justify-content: space-between; gap: 10px; color: var(--blue); font-size: 10px; font-weight: 800; } .home-briefing-list time { color: #8a99aa; font-weight: 500; } .home-briefing-list h3 { margin: 5px 0 0; font-size: 14px; line-height: 1.5; } .home-channels { margin: 20px auto 46px; } .home-section-heading { margin-bottom: 18px; } .home-section-heading h2 { font-size: 27px; } .home-section-heading > p, .home-latest-heading > span { margin: 0; color: var(--muted); font-size: 12px; } .home-channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .home-channel-card { min-height: 160px; padding: 22px; border-radius: 12px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .home-channel-card:hover { transform: translateY(-2px); border-color: #b8d2ef; box-shadow: 0 12px 28px rgba(20, 67, 112, .09); } .home-channel-card header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; } .home-channel-card h3 { margin: 0; font-size: 19px; } .home-channel-more { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: var(--blue-soft); font-weight: 800; } .home-channel-card > div { display: flex; flex-wrap: wrap; gap: 7px; } .home-channel-card > div a { padding: 5px 9px; border-radius: 6px; color: #53657a; background: #f3f6fa; font-size: 11px; } .home-channel-card > div a:hover { color: var(--blue-dark); background: #e6f1ff; } .home-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 28px; padding-bottom: 28px; } .home-latest-heading { align-items: end; } .home-article-list { overflow: hidden; border-radius: 12px; } .home-article-row { display: grid; grid-template-columns: 154px minmax(0, 1fr); gap: 22px; padding: 22px; border-bottom: 1px solid var(--line); } .home-article-row:last-child { border-bottom: 0; } .home-article-thumb { min-height: 112px; display: flex; align-items: end; overflow: hidden; position: relative; padding: 14px; border-radius: 9px; color: white; background: linear-gradient(145deg, #103b69, #1575bb 66%, #45afd4); } .home-article-thumb:hover { color: white; } .home-article-thumb::before { content: "@"; position: absolute; right: -5px; top: -32px; color: rgba(255,255,255,.13); font-size: 118px; font-weight: 900; } .home-article-thumb::after { content: ""; position: absolute; width: 54px; height: 54px; left: 14px; top: 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; } .home-article-thumb span { position: relative; z-index: 1; font-size: 11px; font-weight: 800; } .home-article-copy h3 { margin: 5px 0 7px; font-size: 19px; line-height: 1.4; } .home-article-copy p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .home-article-copy time { display: block; margin-top: 9px; color: #8a98a9; font-size: 11px; } .home-sidebar { display: flex; flex-direction: column; gap: 20px; } .home-side-card { padding: 25px; border-radius: 12px; } .home-side-card h2 { margin: 4px 0 14px; font-size: 20px; } .home-category-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #e8eef5; font-size: 13px; font-weight: 700; } .home-category-links b { color: #9ba9b8; font-size: 18px; } .home-sidebar .ad-slot { min-height: 250px; } .home-about-card { color: #d9e9f9; border-color: #173e66; background: #0c2e52; } .home-about-card .eyebrow { color: #69b8f5; } .home-about-card h2 { color: white; } .home-about-card p { margin: 0 0 17px; color: #b7cbe0; font-size: 13px; } .home-about-card > a { color: white; font-size: 12px; font-weight: 800; } .hero-grid { display: grid; grid-template-columns: 1.75fr 1fr; gap: 24px; padding-block: 24px 34px; } .feature-card, .briefing, .side-card, .article-page, .admin-page { background: var(--surface); border: 1px solid #e7edf4; border-radius: 10px; box-shadow: 0 6px 18px rgba(27, 57, 94, .045); } .feature-card { min-height: 330px; display: grid; grid-template-columns: minmax(260px, .95fr) 1.2fr; overflow: hidden; background: white; } .feature-visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: end; padding: 30px; color: white; background: linear-gradient(145deg, #0e3d80, #1683dc 62%, #65c7eb); } .feature-visual::before, .feature-visual::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; } .feature-visual::before { width: 260px; height: 260px; right: -100px; top: -70px; box-shadow: 0 0 0 34px rgba(255,255,255,.05), 0 0 0 68px rgba(255,255,255,.04); } .feature-visual::after { width: 76px; height: 76px; left: 32px; top: 34px; border-radius: 18px; transform: rotate(12deg); background: rgba(255,255,255,.08); } .feature-visual span { position: relative; z-index: 1; font-size: 13px; font-weight: 800; letter-spacing: 3px; opacity: .8; } .feature-visual b { position: relative; z-index: 1; font-size: 30px; letter-spacing: -1px; } .feature-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 48px); } .feature-card h1 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.18; letter-spacing: -1px; margin: 12px 0 14px; } .feature-card p { color: var(--muted); font-size: 15px; margin: 0 0 20px; } .feature-card a:hover { color: var(--blue); } .eyebrow { color: #2e7de6; font-weight: 800; font-size: 11px; letter-spacing: 1.7px; text-transform: uppercase; } .article-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); font-size: 13px; } .briefing { padding: 24px; } .compact-module h2 { margin: 0; font-size: 18px; } .module-heading { display: flex; align-items: center; gap: 9px; padding-bottom: 13px; border-bottom: 1px solid var(--line); } .module-heading > span { width: 3px; height: 17px; border-radius: 3px; background: #1499df; } .quick-list { display: flex; flex-direction: column; } .quick-list a { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf1f6; } .quick-list strong { font-size: 13px; line-height: 1.45; } .quick-list time, .recent-link time { color: #98a3b2; font-size: 10px; white-space: nowrap; } .module-more { display: block; width: fit-content; margin: 16px auto 0; padding: 7px 18px; border-radius: 999px; background: #f1f4f8; color: #657388; font-size: 11px; } .content-grid, .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 28px; padding-bottom: 60px; } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .section-heading h1, .section-heading h2 { margin: 2px 0 0; line-height: 1.2; } .section-heading a { color: var(--blue); font-size: 13px; font-weight: 700; } .article-list { background: white; border: 1px solid #e7edf4; border-radius: 10px; overflow: hidden; } .article-row { display: grid; grid-template-columns: 154px minmax(0, 1fr); gap: 22px; padding: 22px; border-bottom: 1px solid var(--line); } .article-row:last-child { border: 0; } .article-row h3 { margin: 6px 0; font-size: 20px; line-height: 1.35; } .article-row p { margin: 0; color: var(--muted); font-size: 14px; } .article-row time { display: block; margin-top: 10px; color: #8491a4; font-size: 12px; white-space: nowrap; } .article-thumb { min-height: 104px; display: flex; align-items: end; padding: 14px; overflow: hidden; position: relative; border-radius: 10px; color: white; background: linear-gradient(145deg, #173c70, #2287d8); } .article-thumb::before { content: "@"; position: absolute; right: -5px; top: -32px; font-size: 115px; font-weight: 800; opacity: .12; } .article-thumb span { position: relative; z-index: 1; font-size: 12px; font-weight: 800; } .category-label { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .6px; } .sidebar { display: flex; flex-direction: column; gap: 22px; } .side-card { padding: 26px; box-shadow: none; } .side-card h2 { margin: 5px 0 16px; } .side-card p { color: var(--muted); } .side-card a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; } .side-card .module-heading { margin-bottom: 0; } .side-card .recent-link { align-items: start; flex-direction: column; gap: 3px; border-top: 0; border-bottom: 1px solid #edf1f6; font-size: 12px; line-height: 1.45; } .side-card .recent-link:last-child { border-bottom: 0; } .sidebar .ad-slot { min-height: 250px; } .breadcrumb { padding-block: 24px 16px; display: flex; gap: 10px; color: var(--muted); font-size: 13px; } .article-page { padding: clamp(24px, 5vw, 58px); } .article-page > header { padding-bottom: 26px; border-bottom: 1px solid var(--line); } .article-page h1 { margin: 10px 0 14px; font-size: clamp(32px, 4vw, 48px); line-height: 1.18; letter-spacing: -1px; } .lead { color: var(--muted); font-size: 18px; } .article-page .ad-slot { margin-block: 28px; } .prose { font-size: 17px; line-height: 1.9; } .prose h2 { margin: 1.8em 0 .5em; font-size: 25px; } .prose p { margin: 1em 0; } .prose img { max-width: 100%; height: auto; } .prose table { display: block; max-width: 100%; overflow-x: auto; } .article-note { margin-top: 30px; padding: 18px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-dark); font-size: 13px; } .article-sidebar { padding-top: 0; } /* Article detail */ .article-detail-shell { padding-bottom: 72px; background: #f4f6f8; } .article-detail-breadcrumb { min-width: 0; display: flex; align-items: center; gap: 9px; padding-block: 20px 16px; color: #8a96a5; font-size: 12px; } .article-detail-breadcrumb a { color: #5e6b7b; } .article-detail-breadcrumb a:hover { color: #168bd1; } .article-detail-breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .article-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: start; gap: 24px; } .article-document { min-width: 0; overflow: hidden; border: 1px solid #e7eaee; border-radius: 12px; background: white; box-shadow: 0 8px 28px rgba(26, 48, 72, .055); } .article-document-header { padding: 32px clamp(30px, 5.2vw, 64px) 23px; border-top: 4px solid #168bd1; border-bottom: 1px solid #edf0f3; text-align: center; } .article-document-header h1 { max-width: 880px; margin: 0 auto 12px; color: #202c3b; font-size: 28px; line-height: 1.35; letter-spacing: 0; overflow-wrap: anywhere; } .article-byline { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 22px; color: #8c97a5; font-size: 12px; } .article-byline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .article-byline a:hover { color: var(--blue); } .article-byline > * { position: relative; } .article-byline > * + *::before { content: ""; width: 3px; height: 3px; position: absolute; left: -13px; top: 9px; border-radius: 50%; background: #c4ccd4; } .article-leader-ad { padding: 16px clamp(24px, 5.2vw, 64px) 0; } .article-leader-ad .ad-slot { min-height: 64px; border-radius: 6px; } .article-content { max-width: 900px; margin-inline: auto; padding: 25px clamp(30px, 5.2vw, 64px) 40px; color: #2f3945; font-size: 16px; line-height: 2; overflow-wrap: anywhere; } .article-content > :first-child { margin-top: 0; } .article-content > :last-child { margin-bottom: 0; } .article-content h2, .article-content h3, .article-content h4 { color: #1f2d3d; line-height: 1.45; } .article-content h2 { margin: 2em 0 .7em; padding-bottom: 10px; border-bottom: 1px solid #edf0f3; font-size: 25px; } .article-content h3 { margin: 1.8em 0 .65em; font-size: 20px; } .article-content p { margin: 1.15em 0; } .article-content a { color: #087fbd; text-decoration: underline; text-decoration-color: #b8d9e9; text-underline-offset: 3px; } .article-content a:hover { color: #075f91; text-decoration-color: currentColor; } .article-content img { max-width: 100%; height: auto; display: block; margin: 24px auto; border-radius: 6px; } .article-content blockquote { margin: 24px 0; padding: 16px 20px; border-left: 4px solid #4ba3cc; color: #566778; background: #f5f9fb; } .article-content pre { max-width: 100%; overflow-x: auto; padding: 18px 20px; border-radius: 7px; color: #dbe8f3; background: #172534; font: 13px/1.75 Consolas, "Cascadia Code", monospace; } .article-content code { padding: 2px 5px; border-radius: 4px; color: #b53939; background: #f7eeee; font-family: Consolas, "Cascadia Code", monospace; font-size: .88em; } .article-content pre code { padding: 0; color: inherit; background: transparent; } .article-content table { width: 100%; border-collapse: collapse; font-size: 14px; } .article-content th, .article-content td { padding: 10px 12px; border: 1px solid #dfe5ea; text-align: left; } .article-content th { background: #f3f6f8; } .article-adjacent-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 clamp(30px, 5.2vw, 64px) 34px; padding-top: 25px; border-top: 1px solid #edf0f3; } .article-adjacent-navigation a { min-width: 0; min-height: 82px; display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid #e3e8ec; border-radius: 8px; background: #fafbfc; transition: border-color .2s ease, background .2s ease, transform .2s ease; } .article-adjacent-navigation a:hover { border-color: #add3e5; background: #f4fafc; transform: translateY(-2px); } .article-adjacent-navigation a > span { flex: 0 0 auto; color: #a3adb7; font-size: 26px; line-height: 1; } .article-adjacent-navigation a > div { min-width: 0; display: flex; flex-direction: column; } .article-adjacent-navigation small { margin-bottom: 3px; color: #168bd1; font-size: 10px; font-weight: 700; } .article-adjacent-navigation strong { display: -webkit-box; overflow: hidden; color: #46515d; font-size: 12px; line-height: 1.55; font-weight: 600; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .article-adjacent-next { justify-content: flex-end; text-align: right; } .article-adjacent-empty { min-height: 1px; } .article-end-mark { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 clamp(30px, 5.2vw, 64px) 28px; color: #a6b0ba; font-size: 10px; letter-spacing: 2px; } .article-end-mark span { width: 42px; height: 1px; background: #dfe4e8; } .article-share { padding: 0 clamp(30px, 5.2vw, 64px) 34px; text-align: center; } .article-share > p { margin: 0 0 14px; color: #9ca6b1; font-size: 12px; } .article-share-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; } .article-share-actions a, .article-share-actions button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: white; background: #7f8c99; font: inherit; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 4px 10px rgba(30, 51, 70, .12); transition: transform .2s ease, filter .2s ease; } .article-share-actions a:hover, .article-share-actions button:hover { color: white; filter: brightness(.92); transform: translateY(-2px); } .article-share-actions span { font-size: 14px; } .article-share-actions a > svg, .article-share-actions button > svg { width: 20px; height: 20px; fill: currentColor; } .article-share-wechat { position: relative; } .article-wechat-qr { width: 166px; position: absolute; z-index: 8; left: 50%; bottom: calc(100% + 13px); padding: 12px 12px 9px; border: 1px solid #e2e6ea; border-radius: 9px; background: white; box-shadow: 0 8px 25px rgba(23, 42, 61, .18); opacity: 0; visibility: hidden; transform: translate(-50%, 7px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; pointer-events: none; } .article-wechat-qr::after { content: ""; width: 10px; height: 10px; position: absolute; left: 50%; bottom: -6px; border-right: 1px solid #e2e6ea; border-bottom: 1px solid #e2e6ea; background: white; transform: translateX(-50%) rotate(45deg); } .article-wechat-qr svg { width: 140px; height: 140px; display: block; } .article-wechat-qr small { display: block; margin-top: 6px; color: #677483; font-size: 10px; line-height: 1.4; } .article-share-wechat:hover .article-wechat-qr, .article-share-wechat:focus-within .article-wechat-qr, .article-share-wechat.is-open .article-wechat-qr { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .article-share-actions .share-weibo { background: #f0645f; } .article-share-actions .share-qq { background: #10a7e0; } .article-share-actions .share-qzone { background: #f3b936; } .article-share-actions .share-wechat { background: #16b85b; } .article-share-actions .share-line { background: #06c755; } .article-share-actions .share-line span { font-size: 7px; font-weight: 900; letter-spacing: -.2px; } .article-share-actions .share-x { background: #2d97d5; } .article-share-actions .share-facebook { background: #4267a9; } .article-share-actions .share-telegram { background: #229ed9; } .article-share-actions .share-copy { background: #697b8d; } .article-share-status { min-height: 18px; display: block; margin-top: 8px; color: #6c7b89; font-size: 11px; } .article-document > .ad-slot { min-height: 180px; margin: 0 clamp(30px, 5.2vw, 64px) 32px; border-radius: 7px; } .article-detail-sidebar { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; } .article-side-panel { padding: 20px; border: 1px solid #e5e9ed; border-radius: 9px; background: white; } .article-side-heading { padding-bottom: 12px; border-bottom: 1px solid #ebedef; } .article-side-heading h2 { margin: 0; color: #303b47; font-size: 16px; line-height: 24px; } .article-detail-sidebar > .ad-slot { min-height: 250px; border-radius: 9px; } .article-side-topics { display: flex; flex-direction: column; padding-top: 3px; } .article-side-topics a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf0f2; color: #4a5662; font-size: 12px; } .article-side-topics a:last-child { padding-bottom: 0; border-bottom: 0; } .article-side-topics a span { color: #a2acb5; font-size: 18px; } .article-back-to-top { width: 44px; height: 44px; display: grid; place-items: center; position: fixed; z-index: 15; right: max(18px, calc((100vw - 1320px) / 2)); bottom: 28px; padding: 0; border: 1px solid #d7e3ea; border-radius: 50%; color: white; background: rgba(22, 139, 209, .94); box-shadow: 0 7px 20px rgba(17, 74, 108, .22); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease, background .2s ease; cursor: pointer; pointer-events: none; } .article-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .article-back-to-top:hover { background: #0f78b7; } .article-back-to-top:focus-visible { outline: 3px solid rgba(22, 139, 209, .28); outline-offset: 3px; } .article-back-to-top svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .site-footer { margin-top: 0; padding: 30px 0; background: #0c2444; color: #b9c9dd; text-align: center; } .footer-legacy { display: flex; flex-direction: column; align-items: center; gap: 8px; } .footer-friend-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-bottom: 3px; font-size: 13px; } .footer-friend-links strong { color: #fff; } .footer-friend-links a { color: #cdddf0; } .footer-friend-links a:hover { color: #fff; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 13px; } .footer-links a { color: #cdddf0; } .footer-links a:hover { color: white; } .footer-links span { color: #3f5f86; } .footer-copy { margin: 0; font-size: 12px; line-height: 1.7; } .footer-copy a { color: inherit; } .footer-copy a:hover { color: white; } .admin-page { margin-block: 32px 60px; padding: clamp(24px, 5vw, 48px); } .prototype-badge { padding: 8px 12px; border-radius: 8px; background: #fff3d5; color: #865b00; font-size: 12px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 28px 0; } .stats div { padding: 20px; border-radius: 12px; background: var(--blue-soft); display: flex; flex-direction: column; } .stats strong { color: var(--blue-dark); font-size: 30px; } .stats span { color: var(--muted); font-size: 12px; } .admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .admin-grid article { padding: 24px; border: 1px solid var(--line); border-radius: 12px; } .wide-admin { width: min(1440px, calc(100% - 40px)); } .admin-toolbar, .toolbar-actions, .editor-actions, .filter-bar, .pager { display: flex; align-items: center; gap: 12px; } .toolbar-actions { flex: 0 0 auto; } .toolbar-actions .button-primary, .toolbar-actions .button-secondary { white-space: nowrap; } .admin-toolbar { justify-content: space-between; margin-bottom: 24px; } .admin-toolbar h1 { margin: 2px 0 0; } .admin-heading-help { max-width: 680px; margin: 6px 0 0; color: var(--muted); font-size: 13px; } .button-primary, .button-secondary, .button-danger { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; padding: 10px 16px; font: inherit; font-weight: 700; cursor: pointer; } .button-primary { color: white; background: var(--blue); } .button-secondary { color: var(--blue-dark); background: var(--blue-soft); } .button-danger { color: #9b1c1c; background: #feecec; } .button-primary:hover { color: white; background: #0f55bb; } .button-secondary:hover { color: #082f6d; background: #dcecff; } .button-danger:hover { color: #7f1717; background: #fbdada; } .button-primary:disabled, .button-secondary:disabled, .button-danger:disabled { opacity: .58; cursor: wait; } .button-primary:focus-visible, .button-secondary:focus-visible, .button-danger:focus-visible, .icon-button:focus-visible, .link-button:focus-visible { outline: 3px solid rgba(21, 101, 216, .28); outline-offset: 2px; } .filter-bar { margin-bottom: 18px; } .filter-bar input { flex: 1; } .admin-home-heading { align-items: center; margin-bottom: 18px; } .admin-session-actions { display: flex; align-items: center; gap: 10px; } .admin-home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .admin-home-grid article { min-height: 168px; display: flex; align-items: flex-start; flex-direction: column; padding: 19px 20px; background: white; } .admin-home-grid article { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .admin-home-grid article:hover { border-color: #bfd4e9; box-shadow: 0 10px 26px rgba(27, 57, 94, .08); transform: translateY(-2px); } .admin-home-grid article h2 { margin: 0 0 7px; font-size: 20px; } .admin-home-grid article p { flex: 1; margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.65; } .admin-home-grid .button-primary { min-width: 128px; padding: 8px 14px; } .health-toolbar { margin-bottom: 16px; } .health-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 12px; padding: 15px 18px; border: 1px solid #cfe2d8; border-radius: 12px; background: #f4fbf7; } .health-overview.has-warning { border-color: #f2d59c; background: #fff9ed; } .health-overview.has-error { border-color: #efb4b4; background: #fff4f4; } .health-overview-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #147447; background: #d9f2e4; font-size: 20px; font-weight: 900; } .health-overview.has-warning .health-overview-mark { color: #9a5b00; background: #fde7b9; } .health-overview.has-error .health-overview-mark { color: #a32626; background: #f8d1d1; } .health-overview strong { display: block; color: #17334e; font-size: 15px; } .health-overview p { margin: 3px 0 0; color: var(--muted); font-size: 12px; } .health-overview time { color: var(--muted); font-size: 11px; white-space: nowrap; } .health-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; } .health-kpis article { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: white; } .health-kpis span, .health-kpis small { display: block; color: var(--muted); font-size: 11px; } .health-kpis strong { display: block; margin: 2px 0; overflow: hidden; color: #17334e; font-size: 20px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .health-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .health-check { --health-color: #147447; --health-soft: #e6f5ed; min-width: 0; display: flex; flex-direction: column; padding: 16px 18px 14px; border: 1px solid var(--line); border-left: 4px solid var(--health-color); border-radius: 11px; background: white; } .health-check.is-info { --health-color: #266ca8; --health-soft: #e8f2fb; } .health-check.is-warning { --health-color: #b36a00; --health-soft: #fff1d6; } .health-check.is-error { --health-color: #b02c2c; --health-soft: #fde8e8; } .health-check header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .health-check h2 { margin: 0; color: #203b59; font-size: 14px; } .health-state { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; color: var(--health-color); background: var(--health-soft); font-size: 10px; font-weight: 800; white-space: nowrap; } .health-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .health-value { display: block; margin-top: 8px; color: #172f49; font-size: 21px; line-height: 1.25; } .health-check > p { flex: 1; margin: 6px 0 13px; color: var(--muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; } .health-check footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid #edf1f5; font-size: 11px; } .health-check footer time { color: #8290a1; } .health-check footer a { color: var(--health-color); font-weight: 800; white-space: nowrap; } .health-footnote { margin: 12px 2px 0; color: var(--muted); font-size: 11px; text-align: right; } .media-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .media-summary-grid > a { min-width: 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: white; transition: border-color .15s ease, box-shadow .15s ease; } .media-summary-grid > a:hover, .media-summary-grid > a.is-active { border-color: #86bce4; box-shadow: 0 5px 16px rgba(25, 91, 135, .08); } .media-summary-grid > a.is-active { background: #f5faff; } .media-summary-grid span, .media-summary-grid small { display: block; color: var(--muted); font-size: 11px; } .media-summary-grid strong { display: block; margin: 2px 0; color: #17334e; font-size: 22px; } .media-filter-bar { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(135px, .55fr)) auto; align-items: end; gap: 10px; margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; } .media-filter-bar label { margin: 0; color: #425466; font-size: 11px; font-weight: 800; } .media-filter-bar input, .media-filter-bar select { width: 100%; margin-top: 5px; padding: 8px 10px; border: 1px solid #cbd7e5; border-radius: 8px; color: var(--ink); background: white; font: inherit; } .media-filter-actions { display: flex; gap: 7px; } .media-filter-actions .button-primary, .media-filter-actions .button-secondary { padding: 8px 12px; white-space: nowrap; } .media-result-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 8px; color: var(--muted); font-size: 11px; } .media-result-meta strong { color: var(--ink); } .media-library-list { display: grid; gap: 8px; } .media-library-item { display: grid; grid-template-columns: 112px minmax(0, 1fr) 126px; align-items: start; gap: 14px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; } .media-library-item.is-missing { border-color: #edc2c2; background: #fffafa; } .media-thumbnail { width: 112px; height: 82px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; color: #9b3434; background: #edf2f7; font-size: 12px; font-weight: 800; } .media-thumbnail a, .media-thumbnail img { width: 100%; height: 100%; display: block; } .media-thumbnail img { object-fit: cover; } .media-item-main { min-width: 0; } .media-item-title { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; } .media-item-title > strong { min-width: 0; max-width: min(520px, 100%); overflow: hidden; color: #203b59; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .media-path { display: block; margin-top: 4px; overflow: hidden; color: #52677d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .media-item-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 6px; color: var(--muted); font-size: 10px; } .media-origin { max-width: 760px; margin-top: 5px; overflow: hidden; color: #758497; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .media-references { margin-top: 7px; font-size: 11px; } .media-references summary { width: fit-content; color: var(--blue-dark); font-weight: 800; cursor: pointer; } .media-references ul { display: grid; gap: 4px; margin: 7px 0 0; padding: 7px 10px; border-radius: 7px; background: #f5f8fc; list-style: none; } .media-references li { display: flex; gap: 8px; min-width: 0; } .media-references li span { flex: 0 0 auto; color: var(--muted); } .media-references li a { overflow: hidden; color: var(--blue-dark); text-overflow: ellipsis; white-space: nowrap; } .media-references small { display: block; margin-top: 5px; color: var(--muted); } .media-item-actions { display: grid; gap: 6px; } .media-item-actions > .button-secondary, .media-item-actions > button { width: 100%; padding: 7px 9px; font-size: 11px; } .media-delete-form { display: grid; gap: 5px; margin-top: 3px; padding-top: 7px; border-top: 1px solid var(--line); } .media-delete-form .check-row { justify-content: center; margin: 0; color: #805050; font-size: 10px; } .media-delete-form .button-danger { width: 100%; padding: 7px 9px; font-size: 11px; } .media-delete-locked { padding: 7px 4px; border-radius: 7px; color: #68788b; background: #f1f4f7; font-size: 10px; text-align: center; } .media-empty { padding: 34px; color: var(--muted); text-align: center; } .media-pager { justify-content: center; margin-top: 14px; } .media-pager a, .media-pager span { padding: 7px 11px; border-radius: 7px; color: var(--blue-dark); background: var(--blue-soft); font-size: 11px; } .media-library-note { margin: 12px 2px 0; color: var(--muted); font-size: 11px; text-align: right; } .logout-card { max-width: 620px; } .logout-card h2 { margin-top: 0; } .logout-card p { color: var(--muted); } .content-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .content-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: white; transition: border-color .15s ease, box-shadow .15s ease, color .15s ease; } .content-stat strong { color: var(--ink); font-size: 22px; } .content-stat:hover, .content-stat.is-active { border-color: #86bce4; color: var(--blue-dark); box-shadow: 0 5px 16px rgba(25, 91, 135, .08); } .content-stat.is-active { background: #f5faff; } /* 文章列表紧凑工具条:状态筛选与搜索合并为一行。 */ .article-toolbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; } .article-status-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .article-status-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; color: var(--blue-dark); background: var(--blue-soft); font-size: 12px; font-weight: 700; white-space: nowrap; } .article-status-tab b { font-weight: 800; opacity: .7; } .article-status-tab:hover, .article-status-tab.is-active { color: white; background: var(--blue); } .article-status-tab.is-active b { opacity: .85; } .article-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .article-filter-row input, .article-filter-row select { border: 1px solid #cbd7e5; border-radius: 8px; padding: 8px 10px; color: var(--ink); background: white; font: inherit; } .article-filter-row input[name="q"] { width: min(300px, 38vw); } .article-filter-row .button-primary, .article-filter-row .button-secondary { padding: 8px 14px; white-space: nowrap; } .article-filter-bar { display: grid; grid-template-columns: minmax(280px, 1fr) 150px 150px auto; align-items: end; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; } .filter-field label { display: block; margin-bottom: 5px; color: #425466; font-size: 12px; font-weight: 700; } .filter-actions { display: flex; gap: 8px; } .filter-actions a, .filter-actions button { white-space: nowrap; } .list-summary { display: flex; justify-content: space-between; gap: 14px; margin: 0 2px 10px; color: var(--muted); font-size: 12px; } .list-summary strong { color: var(--ink); } .admin-form input, .admin-form select, .admin-form textarea, .filter-bar input, .filter-bar select, .article-editor input, .article-editor select, .article-editor textarea { width: 100%; border: 1px solid #cbd7e5; border-radius: 8px; padding: 10px 12px; color: var(--ink); background: white; font: inherit; } .admin-form label { display: block; margin: 14px 0 5px; font-size: 13px; font-weight: 700; } .admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus, .filter-bar input:focus, .filter-bar select:focus, .article-editor input:focus, .article-editor select:focus, .article-editor textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21, 101, 216, .1); } .article-editor label { display: block; margin: 8px 0 4px; font-size: 13px; font-weight: 700; } .article-editor .editor-main > label:first-child { margin-top: 0; } .auth-page { min-height: 65vh; display: grid; place-items: center; padding-block: 40px; } .auth-card { width: min(480px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); } .auth-card h1 { margin: 6px 0; } .auth-card p { color: var(--muted); } .auth-card .button-primary { width: 100%; margin-top: 20px; } .check-row { display: flex !important; align-items: center; gap: 9px; line-height: 1.5; } .check-row input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--blue); cursor: pointer; } .validation { color: #b42318; font-size: 12px; } .alert { margin: 16px 0; padding: 12px 14px; border-left: 4px solid transparent; border-radius: 8px; font-size: 13px; } .alert-warning { color: #694200; border-color: #d39916; background: #fff1cc; } .alert-success { color: #135c2e; border-color: #3a9b59; background: #e5f7e9; } .alert-error { color: #8d2020; border-color: #d04444; background: #fde8e8; } .alert.validation-summary-valid { display: none; } .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; } .admin-table { width: 100%; border-collapse: collapse; background: white; } .admin-table th, .admin-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; } .admin-table th { color: #40536a; border-bottom-color: #ccd8e6; background: #edf3f9; font-size: 12px; font-weight: 800; white-space: nowrap; } .admin-table tbody tr:nth-child(even) { background: #fbfcfe; } .admin-table tbody tr:hover { background: #f3f8fd; } .admin-table td small { display: block; color: var(--muted); } .article-admin-table th:first-child { width: 38%; } .article-list-title > a { color: var(--ink); } .article-list-title > a:hover { color: var(--blue); } /* 文章行压缩为单行:标题超长省略,两个日期同行。 */ .article-admin-table th, .article-admin-table td { padding: 9px 14px; } .article-list-title { min-width: 0; } .article-list-title > a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } /* 日期列不能用 flex:给 设 display:flex 会使它脱离表格布局,导致行分隔线错位。 */ .article-list-dates { min-width: 176px; font-size: 12px; white-space: nowrap; } .article-list-dates span + span { margin-left: 12px; } .article-admin-table .row-actions { flex-wrap: nowrap; gap: 10px; } .row-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; min-width: 132px; } .row-actions a { color: var(--blue-dark); font-size: 12px; font-weight: 700; white-space: nowrap; } .table-empty { padding-block: 42px !important; color: var(--muted); text-align: center !important; } .table-empty strong, .table-empty span { display: block; } .table-empty strong { margin-bottom: 5px; color: var(--ink); } .status { display: inline-block; padding: 4px 9px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; } .status-published { color: #166534; border-color: #b9dfc4; background: #eaf8ee; }.status-draft { color: #7c5400; border-color: #ead28d; background: #fff3d5; }.status-archived { color: #52657b; border-color: #d2dbe5; background: #edf1f6; } .pager { justify-content: center; margin-top: 18px; }.pager a { color: var(--blue); font-weight: 700; } .editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; gap: 24px; } .editor-main, .field-card { padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: white; } .editor-main { min-height: 820px; display: flex; flex-direction: column; } .editor-side { display: flex; flex-direction: column; gap: 16px; }.field-card > strong { display: block; margin-bottom: 12px; } .article-editor .editor-side { padding: 0; border: 0; border-radius: 0; background: transparent; } .article-editor .editor-side > .field-card { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 4px 14px rgba(27, 57, 94, .04); } .article-editor .editor-side > .field-card:last-child { padding-bottom: 18px; border-bottom: 1px solid var(--line); } .field-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .editor-feature-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; } .article-editor .editor-feature-options label { margin: 0; padding: 10px; border-radius: 8px; background: var(--blue-soft); font-size: 12px; } .article-editor .editor-feature-options input { width: auto; } .editor-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .editor-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .editor-section-heading > div { display: flex; align-items: center; gap: 9px; } .editor-section-heading > div > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--blue-dark); background: var(--blue-soft); font-size: 11px; font-weight: 800; } .editor-section-heading small { color: var(--muted); text-align: right; } .editor-content-heading { margin-top: 26px; } .editor-integrity-note { margin: 12px 0 10px; padding: 9px 12px; border-left: 3px solid #78afd4; color: #486172; background: #f3f8fb; font-size: 12px; line-height: 1.55; } .editor-current-state p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; } .article-editor #Input_Summary { min-height: 68px; resize: vertical; } .editor-body-label { margin-top: 10px !important; } .code-editor { font-family: Consolas, "Cascadia Code", monospace !important; font-size: 13px !important; line-height: 1.55; } .topic-picker { max-height: 310px; overflow-y: auto; }.topic-picker label { display: flex; align-items: start; gap: 7px; font-weight: 400; }.topic-picker input { width: auto; margin-top: 4px; } .editor-actions { position: sticky; z-index: 5; bottom: 0; justify-content: space-between; margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.96); box-shadow: 0 -5px 18px rgba(28, 55, 74, .06); } .editor-action-buttons { display: flex; flex-wrap: wrap; gap: 10px; } .editor-submit-status { max-width: 430px; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: right; } .preview-banner { display: flex; justify-content: space-between; margin-top: 20px; padding: 10px 15px; border-radius: 8px; color: #7a4d00; background: #fff3d5; } .topic-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }.topic-tags span, .topic-tags a { padding: 4px 9px; border-radius: 999px; color: var(--blue-dark); background: var(--blue-soft); font-size: 12px; }.topic-tags a:hover { color: white; background: var(--blue); } .link-button { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; } .channel-page { padding-block: 34px 60px; } .category-cloud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .category-cloud a { display: flex; min-height: 82px; flex-direction: column; justify-content: center; padding: 15px 18px; border: 1px solid var(--line); border-radius: 10px; background: white; } .category-cloud strong { line-height: 1.35; } .category-cloud span { margin-top: 3px; color: var(--muted); font-size: 12px; } .channel-latest { margin-top: 36px; } .review-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; } .review-apply { align-self: start; position: sticky; top: 18px; } .review-apply p { color: var(--muted); font-size: 13px; } .review-apply .button-danger { width: 100%; margin-top: 18px; } .distribution-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 28px; } .distribution-list div { display: flex; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 8px; background: var(--blue-soft); } .empty-state { min-height: 55vh; display: grid; place-content: center; text-align: center; } .empty-state a { color: var(--blue); font-weight: 700; } .taxonomy-create-grid, .taxonomy-merge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; } .compact-form .button-primary, .compact-form .button-danger { margin-top: 16px; width: 100%; } .danger-card { border-color: #efc2c2; background: #fffafa; } .danger-card p, .taxonomy-orphans p { color: var(--muted); font-size: 13px; } .english-slug-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr); align-items: end; gap: 24px; margin-bottom: 22px; border-color: #b9d6f7; background: #f8fbff; } .english-slug-card p { margin-bottom: 0; color: var(--muted); font-size: 13px; } .english-slug-card code { color: var(--blue-dark); } .compact-action-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px; } .compact-alert { margin-block: 10px; } .field-help { display: block; margin-top: 7px; color: var(--muted); line-height: 1.45; } .admin-disclosure { margin: 14px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; } .admin-disclosure > summary { display: flex; align-items: center; gap: 12px; padding: 15px 18px; color: var(--ink); font-weight: 800; cursor: pointer; list-style: none; } .admin-disclosure > summary::-webkit-details-marker { display: none; } .admin-disclosure > summary small { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 400; } .admin-disclosure > summary::after { content: "展开"; color: var(--blue); font-size: 11px; } .admin-disclosure[open] > summary { border-bottom: 1px solid var(--line); background: #fbfdff; } .admin-disclosure[open] > summary::after { content: "收起"; } .admin-disclosure-body { padding: 18px; } .admin-disclosure-body > .field-card { margin: 0; } .danger-disclosure > summary { color: #8c2626; } .danger-disclosure[open] > summary { background: #fffafa; } .account-create-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.4fr) auto; align-items: end; gap: 12px; padding: 18px; } .account-create-form label { display: grid; grid-template-rows: auto 42px; gap: 5px; margin: 0; } .account-create-form input { margin: 0; } .account-create-form .button-primary { min-height: 42px; } .account-table { min-width: 940px; } .domain-settings-card { max-width: 820px; } .domain-settings-form textarea { resize: vertical; } .domain-settings-example { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 18px 0; padding: 14px; border: 1px solid #dbe7f3; border-radius: 8px; background: #f7fbff; } .domain-settings-example strong { grid-column: 1 / -1; color: var(--blue-dark); } .domain-settings-example code { min-width: 0; overflow-wrap: anywhere; color: #42566f; } .domain-settings-example span { display: none; } .certificate-management { max-width: 980px; } .tls-status-bar { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-bottom: 12px; padding: 12px 16px; border: 1px solid #cfe0ef; border-radius: 10px; background: #f7fbff; } .tls-status-bar span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; } .tls-status-bar > div > strong { display: inline-block; color: var(--blue-dark); font-size: 15px; } .tls-current-card, .tls-auto-card { margin-top: 0; } .tls-auto-card { border-color: #b9dfc4; background: #fbfffc; } .tls-auto-card p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; } .tls-days { padding: 4px 9px; border-radius: 999px; color: #166534; background: #eaf8ee; font-size: 12px; font-weight: 800; } .tls-days.is-urgent { color: #8d2020; background: #fde8e8; } .tls-certificate-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--line); } .tls-certificate-meta > div { min-width: 0; padding: 12px 14px; background: #fbfcfe; } .tls-certificate-meta dt { margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 700; } .tls-certificate-meta dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; } .tls-certificate-meta code { color: #42566f; font-size: 11px; word-break: break-all; } .tls-certificate-meta .tls-domain-row { grid-column: 1 / -1; } .tls-read-error { margin: 0; } .tls-read-error strong, .tls-read-error span { display: block; } .tls-read-error span { margin-top: 4px; font-size: 12px; line-height: 1.55; } .tls-auto-form { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 14px; border-radius: 9px; background: #f4f7fa; } .tls-auto-form strong, .tls-auto-form small { display: block; } .tls-auto-form small { margin-top: 3px; color: var(--muted); font-size: 11px; } .tls-file-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .tls-file-grid > label { margin-top: 0; } .tls-upload-form [data-tls-format-fields] { margin-top: 14px; } .tls-upload-form [data-tls-format-fields][hidden] { display: none; } .tls-upload-form input[type=file] { margin-top: 6px; padding: 8px; background: white; } .tls-upload-form input[type=file]::file-selector-button { margin-right: 10px; padding: 7px 10px; border: 0; border-radius: 6px; color: var(--blue-dark); background: var(--blue-soft); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .tls-risk-confirmation { align-items: start; margin-top: 18px !important; padding: 12px 14px; border: 1px solid #efd69c; border-radius: 8px; color: #694200; background: #fff9e9; font-size: 12px !important; font-weight: 600 !important; } .tls-risk-confirmation input { margin-top: 2px; } .tls-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .tls-submit-row strong, .tls-submit-row small { display: block; } .tls-submit-row small { max-width: 610px; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; } .tls-submit-row .button-primary { white-space: nowrap; } .taxonomy-tree { display: grid; gap: 18px; } .taxonomy-channel { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; } .taxonomy-channel-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 18px; background: var(--blue-soft); } .taxonomy-inline-form { flex: 1; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto; align-items: end; gap: 10px; } .taxonomy-inline-form label, .taxonomy-inline-form div > label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; } .taxonomy-inline-form input:not([type=checkbox]), .category-row-form input:not([type=checkbox]), .category-row-form select, .delete-inline input, .delete-channel-form input { width: 100%; border: 1px solid #cbd7e5; border-radius: 8px; padding: 8px 10px; color: var(--ink); background: white; font: inherit; } .taxonomy-actions, .sort-buttons, .reference-counts { display: flex; align-items: center; gap: 7px; } .taxonomy-actions form, .sort-buttons form { margin: 0; } .icon-button { width: 34px; height: 34px; border: 1px solid #b7cae0; border-radius: 8px; color: var(--blue-dark); background: white; font-weight: 800; cursor: pointer; } .taxonomy-count { margin-left: 5px; color: var(--muted); font-size: 12px; white-space: nowrap; } .taxonomy-table-wrap { border: 0; border-radius: 0; } .taxonomy-table th:first-child { width: 84px; } .taxonomy-table th:last-child { width: 210px; } .category-row-form { display: grid; grid-template-columns: minmax(240px, 1.5fr) minmax(150px, .8fr) auto auto auto; align-items: center; gap: 10px; } .category-row-form > div:first-of-type { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .category-row-form small { grid-column: 1 / -1; } .reference-counts { flex-wrap: wrap; } .reference-counts span { padding: 3px 7px; border-radius: 999px; color: var(--muted); background: #edf1f6; font-size: 11px; white-space: nowrap; } .delete-inline { display: grid; grid-template-columns: minmax(100px, 1fr) auto; gap: 7px; } .delete-inline .button-danger { padding-inline: 10px; } .delete-channel-form { display: flex; justify-content: end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); } .delete-channel-form input { max-width: 280px; } .taxonomy-empty { padding: 20px; color: var(--muted); text-align: center; } .taxonomy-orphans { margin-top: 22px; } .orphan-row { padding: 12px 0; border-top: 1px solid var(--line); } .merged-list { display: grid; gap: 8px; margin-top: 14px; } .merged-list > div { display: grid; grid-template-columns: 90px minmax(160px, 1fr) minmax(160px, 1fr) 80px; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #f7f9fc; } .merged-list small { color: var(--muted); } .topic-create-card { margin-bottom: 18px; } .topic-create-card > .topic-management-form { padding: 18px 18px 4px; } .topic-create-card > .field-help { padding: 0 18px 16px; } .topic-create-card h2 { margin-top: 0; } .topic-management-form { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 1fr) auto; align-items: end; gap: 12px; } .topic-management-form label { font-size: 12px; font-weight: 700; } .topic-management-form input, .ad-campaign-form input, .ad-campaign-form select { width: 100%; border: 1px solid #cbd7e5; border-radius: 8px; padding: 10px 12px; font: inherit; } .ad-campaign-form [hidden] { display: none; } .topic-management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .topic-management-card { min-width: 0; display: grid; grid-template-columns: 220px minmax(260px, 360px); align-items: center; justify-content: center; gap: 32px; overflow: hidden; padding: 24px; } .topic-management-card { scroll-margin-top: 18px; } .topic-management-card form { width: 100%; max-width: 360px; min-width: 0; padding: 0; } .topic-management-cover { width: 220px; height: 138px; display: grid; place-items: center; align-self: center; margin: 0; overflow: hidden; border-radius: 8px; color: var(--muted); background: #edf2f7; } .topic-management-cover img { width: 100%; height: 100%; object-fit: cover; } .topic-management-meta { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0; color: var(--muted); font-size: 11px; } .ad-campaign-form { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); align-items: end; gap: 10px 12px; } .ad-campaign-form > label { min-width: 0; display: grid; grid-template-rows: auto 42px; align-items: end; gap: 5px; margin: 0; white-space: nowrap; } .ad-campaign-form > label > input, .ad-campaign-form > label > select { min-width: 0; height: 42px; display: block; } .ad-campaign-form > label[hidden] { display: none; } .ad-placement-selector { grid-column: 1 / -1; margin: 0; } .ad-size-group { padding: 10px 12px; border: 1px solid #dce5ef; border-radius: 9px; background: #f8fafc; } .ad-size-group[hidden] { display: none; } .ad-size-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: 12px; } .ad-size-group-heading .link-button { color: var(--blue); font-size: 11px; font-weight: 700; } .ad-size-options { display: flex; flex-wrap: wrap; gap: 7px; } .ad-size-options .check-row { width: auto; min-height: 34px; flex: 0 0 auto; margin: 0; padding: 7px 12px; border: 1px solid #e2e8ef; border-radius: 7px; background: white; font-size: 12px; font-weight: 400; white-space: nowrap; } .ad-campaign-form .ad-size-options input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; } .ad-size-options .check-row span { flex: 0 0 auto; white-space: nowrap; } .ad-campaign-guidance { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; margin-top: 4px; padding: 13px 15px; border: 1px solid #dbe9f7; border-radius: 9px; color: #52657b; background: #f6faff; } .ad-campaign-guidance > strong { padding-top: 2px; color: var(--blue-dark); font-size: 12px; white-space: nowrap; } .ad-campaign-guidance > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; } .ad-campaign-guidance span { min-width: 0; font-size: 11px; line-height: 1.55; } .ad-campaign-guidance b { margin-right: 6px; color: #2f5f91; } .ad-create-action { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding-top: 4px; } .ad-create-action small { color: var(--muted); font-size: 11px; text-align: right; } .ad-create-action .button-primary { min-width: 118px; white-space: nowrap; } .ad-admin-section { margin-top: 0; } .ad-campaign-table th, .ad-campaign-table td { padding: 9px 14px; } .ad-campaign-table th:first-child { width: 22%; } .ad-campaign-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ad-campaign-table small { display: block; white-space: nowrap; } .ad-campaign-table .row-actions { flex-wrap: nowrap; gap: 10px; } .link-danger { color: #9b1c1c !important; } .adsense-settings-form { display: grid; grid-template-columns: minmax(280px, 1.4fr) minmax(180px, .7fr) minmax(220px, .8fr) auto; align-items: end; gap: 12px; } .adsense-settings-form > label { margin: 0; } .ad-placement-compact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); } .ad-placement-compact-row { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(210px, 1.3fr) auto; align-items: center; gap: 10px; padding: 10px 14px; background: white; } .ad-placement-compact-row span { color: var(--muted); font-size: 11px; } .ad-placement-compact-row button { padding: 7px 10px; font-size: 11px; } .navigation-management-list { display: grid; gap: 8px; } .navigation-management-head, .footer-link-management-head { display: grid; gap: 12px; padding: 0 15px; color: var(--muted); font-size: 11px; font-weight: 800; } .navigation-management-head { grid-template-columns: minmax(140px, 1fr) 100px minmax(230px, 1.6fr) minmax(130px, .7fr) 62px; } .navigation-management-row { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(140px, 1fr) 100px minmax(230px, 1.4fr) minmax(130px, .7fr) auto; align-items: end; gap: 12px; scroll-margin-top: 18px; } .navigation-management-row { transition: border-color .15s ease, box-shadow .15s ease; } .navigation-management-row:focus-within { border-color: #9fc4eb; box-shadow: 0 5px 18px rgba(21, 101, 216, .08); } .navigation-management-row label { margin: 0; font-size: 12px; font-weight: 700; } .navigation-management-row input { width: 100%; border: 1px solid #cbd7e5; border-radius: 8px; padding: 7px 9px; font: inherit; } .navigation-management-row input[readonly] { color: var(--muted); background: #f4f6f8; } .navigation-item-identity { align-self: center; display: flex; flex-direction: column; gap: 3px; } .navigation-item-identity code { color: var(--muted); font-size: 11px; } .navigation-item-options { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 7px; } .navigation-item-options label { margin: 0; font-weight: 400; } .navigation-item-options input { width: auto; } /* 网站设置内的导航行去掉重复的名称列,并压缩为表头式单行。 */ .site-settings-admin .navigation-management-row { grid-template-columns: minmax(140px, 1fr) 100px minmax(230px, 1.6fr) minmax(130px, .7fr) 62px; align-items: center; padding: 10px 14px; } .site-settings-admin .navigation-management-row button { width: 100%; } .site-settings-admin .navigation-item-options { padding-bottom: 0; } .navigation-management-row button, .footer-link-management-row button { padding: 7px 12px; font-size: 12px; } .site-settings-admin { --settings-accent: #175b9c; } .settings-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; } .settings-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; color: var(--blue-dark); font-size: 13px; font-weight: 700; } .settings-tab b { font-weight: 800; opacity: .7; } .settings-tab:hover { background: var(--blue-soft); } .settings-tab.is-active { color: white; background: var(--blue); } .settings-tab.is-active:hover { background: var(--blue-dark); } .settings-panel-help { margin: 0 2px 12px; color: var(--muted); font-size: 13px; } .site-settings-section { margin-top: 0; } .site-settings-general-form, .site-settings-footer-form { display: grid; gap: 17px; max-width: 920px; } .site-settings-general-form label, .site-settings-footer-form label, .footer-link-management-row > label, .footer-link-create-form > label { margin: 0; font-size: 12px; font-weight: 800; } .site-settings-general-form input, .site-settings-general-form textarea, .site-settings-footer-form input, .footer-link-management-row input, .footer-link-create-form input { width: 100%; margin-top: 6px; border: 1px solid #cbd7e5; border-radius: 8px; padding: 10px 11px; font: inherit; } .site-settings-general-form textarea { resize: vertical; } .site-settings-general-form small, .site-settings-footer-form small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 400; } .site-settings-general-form .form-actions, .site-settings-footer-form .form-actions { margin: 0; } .site-settings-footer-form { grid-template-columns: minmax(260px, 1.2fr) minmax(180px, .7fr) minmax(260px, 1fr); align-items: end; max-width: none; } .site-settings-footer-form > label:first-child { grid-column: 1 / -1; } .site-settings-footer-form .form-actions { align-self: end; } .footer-link-management-list { display: grid; gap: 8px; } .footer-link-management-head { grid-template-columns: minmax(130px, .6fr) minmax(260px, 1.6fr) 90px minmax(150px, .7fr) 125px; } .footer-link-management-row { display: grid; grid-template-columns: minmax(130px, .6fr) minmax(260px, 1.6fr) 90px minmax(150px, .7fr) 125px; align-items: center; gap: 12px; padding: 10px 14px; scroll-margin-top: 80px; transition: border-color .15s ease, box-shadow .15s ease; } .footer-link-management-row:focus-within { border-color: #9fc4eb; box-shadow: 0 5px 18px rgba(21, 101, 216, .08); } .footer-link-management-row input { margin-top: 0; padding: 7px 9px; } .footer-link-management-row .navigation-item-options, .footer-link-create-form .navigation-item-options { flex-wrap: nowrap; align-items: center; white-space: nowrap; } .footer-link-management-row .navigation-item-options .check-row, .footer-link-create-form .navigation-item-options .check-row { width: auto; flex: 0 0 auto; } .footer-link-management-row .navigation-item-options input, .footer-link-create-form .navigation-item-options input { width: 17px; height: 17px; margin: 0; padding: 0; } .footer-link-actions { display: flex; gap: 7px; } .footer-link-actions button { flex: 1 1 0; padding-inline: 12px; } .site-settings-add-link { margin-top: 14px; } .site-settings-add-link > summary { color: var(--settings-accent); font-weight: 800; cursor: pointer; } .site-settings-add-link[open] > summary { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .footer-link-create-form { display: grid; grid-template-columns: minmax(130px, .6fr) minmax(260px, 1.6fr) 90px minmax(150px, .7fr) auto; align-items: end; gap: 12px; } .backup-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .backup-summary-grid article { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 17px 18px; border: 1px solid #dce6f0; border-radius: 11px; background: #f8fbff; } .backup-summary-grid span { color: var(--muted); font-size: 11px; font-weight: 700; } .backup-summary-grid strong { overflow-wrap: anywhere; color: var(--blue-dark); font-size: 22px; } .backup-summary-grid small { color: #607085; font-size: 11px; line-height: 1.5; } .backup-create-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; } .backup-create-card h2 { margin: 0 0 7px; color: #203b59; font-size: 20px; } .backup-create-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; } .backup-create-card form { flex: 0 0 auto; } .backup-empty { margin: 0; padding: 26px; color: var(--muted); text-align: center; } .site-package-progress { display: grid; gap: 8px; margin-bottom: 12px; } .site-package-progress > div:first-child { display: flex; justify-content: space-between; gap: 12px; } .site-package-progress > div:first-child span, .site-package-progress small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; } .site-package-create-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(330px, .6fr); gap: 22px; margin-bottom: 12px; } .site-package-create-card h2 { margin: 0 0 7px; color: #203b59; font-size: 18px; } .site-package-create-card p { margin: 0 0 7px; color: var(--muted); font-size: 12px; line-height: 1.7; } .site-package-create-card small { color: var(--muted); font-size: 11px; } .site-package-create-form { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto; align-items: end; gap: 10px; } .site-package-create-form > label:not(.check-row) { margin: 0; color: #425466; font-size: 11px; font-weight: 800; } .site-package-create-form input[type=password] { width: 100%; margin-top: 5px; padding: 8px 10px; border: 1px solid #cbd7e5; border-radius: 8px; font: inherit; } .site-package-create-form input:disabled { color: var(--muted); background: #f1f4f7; } .backup-governance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } .backup-governance-grid article { padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbff; } .backup-governance-grid article.has-warning { border-color: #efd69c; background: #fff9e9; } .backup-governance-grid span, .backup-governance-grid small { display: block; color: var(--muted); font-size: 11px; } .backup-governance-grid strong { display: block; margin: 2px 0; color: #203b59; font-size: 21px; } .unmanaged-backups-note { margin-bottom: 12px; color: var(--muted); font-size: 12px; } .unmanaged-backups-note summary { color: #8b5a00; font-weight: 800; cursor: pointer; } .unmanaged-backups-note p { margin: 9px 0 5px; } .unmanaged-backups-note ul { max-height: 150px; overflow: auto; margin: 0; padding-left: 20px; } .site-package-table-wrap { margin-top: 4px; } .static-run-card { display: grid; gap: 16px; margin-bottom: 14px; } .static-run-card h2 { margin: 0 0 7px; color: #203b59; font-size: 20px; } .static-run-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; } .static-run-actions { display: flex; flex-wrap: wrap; gap: 10px; } .static-progress { display: grid; gap: 8px; } .static-progress-bar { overflow: hidden; height: 10px; border-radius: 999px; background: #e3eaf3; } .static-progress-bar span { display: block; height: 100%; border-radius: 999px; background: var(--blue-dark); transition: width .4s ease; } .static-progress-text { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; } .static-issue-list { margin: 12px 0 0; padding-left: 20px; color: #a1362f; font-size: 13px; line-height: 1.8; } .static-failed { margin-top: 12px; font-size: 12px; } .static-failed ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.8; } /* 访问统计:紧凑单屏布局,指标行 + 趋势图 + 分栏的分页表格。 */ .traffic-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; } .traffic-ranges { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: #eef2f7; border-radius: 10px; } .traffic-range { padding: 5px 12px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: none; white-space: nowrap; } .traffic-range:hover { color: #0f172a; } .traffic-range.is-active { background: #fff; color: #1d4ed8; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); } .traffic-bar-spacer { flex: 1 1 auto; } .traffic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--muted); } .traffic-meta b { font-weight: 700; color: #0f172a; } .traffic-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; } .traffic-dot.is-off { background: #cbd5e1; } .traffic-dot.is-warn { background: #d97706; } .traffic-refresh { padding: 6px 14px; font-size: 12px; } .traffic-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-bottom: 14px; } .traffic-kpi { padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; } .traffic-kpi span { display: block; font-size: 12px; color: var(--muted); } .traffic-kpi strong { display: block; margin-top: 2px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; } .traffic-kpi small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); } .traffic-card { padding: 14px 16px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; min-width: 0; } .traffic-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .traffic-card-head h2 { margin: 0; font-size: 14px; } .traffic-chart-card { margin-bottom: 14px; } .traffic-chart { width: 100%; height: auto; } .traffic-chart-grid { stroke: #e2e8f0; stroke-width: 1; } .traffic-chart-tick { fill: #64748b; font-size: 11px; } .traffic-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); } .traffic-legend-item { display: inline-flex; align-items: center; gap: 6px; } .traffic-legend-item i { width: 14px; height: 3px; border-radius: 2px; } .traffic-chart-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; } .traffic-bot-toggle label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; cursor: pointer; } .traffic-tabs { display: flex; flex-wrap: wrap; gap: 2px; } .traffic-tab { padding: 4px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .traffic-tab:hover { background: #f1f5f9; color: #0f172a; } .traffic-tab.is-active { background: #e8eefc; color: #1d4ed8; } .traffic-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; margin-bottom: 14px; } .traffic-scroll { max-height: 296px; overflow: auto; overscroll-behavior: contain; } .traffic-table { width: 100%; border-collapse: collapse; font-size: 13px; } .traffic-table th { position: sticky; top: 0; z-index: 2; padding: 0 8px 6px 0; background: #fff; color: var(--muted); font-size: 11px; font-weight: 700; text-align: left; } .traffic-table th:last-child, .traffic-table td:last-child { text-align: right; padding-right: 0; } .traffic-table td { padding: 5px 8px 5px 0; border-top: 1px solid #f1f5f9; vertical-align: middle; } .traffic-table tr:first-child td { border-top: 0; } /* 行内条形:占比直接画在单元格背景上,比独立的条形列表省一半纵向空间。 */ .traffic-label { position: relative; isolation: isolate; padding-left: 8px; min-width: 0; overflow-wrap: anywhere; } .traffic-label::before { content: ""; position: absolute; inset: 2px auto 2px 0; width: var(--share, 0%); background: #e8eefc; border-radius: 5px; z-index: -1; } .traffic-label > * { position: relative; z-index: 1; } .traffic-label a { text-decoration: none; } .traffic-label a:hover { text-decoration: underline; } .traffic-sub { display: block; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; } .traffic-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: #334155; } .traffic-empty { padding: 18px 0; color: var(--muted); font-size: 12px; text-align: center; } .traffic-note { margin: 10px 0 0; font-size: 11px; color: var(--muted); } .traffic-about { margin-top: 6px; font-size: 12px; color: var(--muted); } .traffic-about summary { cursor: pointer; font-weight: 700; } .traffic-about ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.9; } .backup-retention-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 22px; } .backup-retention-form { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); align-items: end; gap: 12px; } .backup-retention-form > label:not(.check-row) { margin: 0; font-size: 12px; font-weight: 800; } .backup-retention-form input[type="number"] { width: 100%; margin-top: 6px; border: 1px solid #cbd7e5; border-radius: 8px; padding: 10px 11px; font: inherit; } .backup-retention-form .backup-auto-cleanup { grid-column: 1 / -1; margin-top: 3px; } .backup-retention-form > button { justify-self: start; } .backup-policy-note { padding-left: 22px; border-left: 1px solid var(--line); } .backup-policy-note > strong { color: #203b59; } .backup-policy-note > p { margin: 7px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.7; } .backup-cleanup-form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; } .backup-cleanup-form label { margin: 0; color: #6f3030; font-size: 12px; } .backup-table-wrap { overflow-x: auto; } .backup-table code { display: inline-block; max-width: 440px; overflow-wrap: anywhere; color: #40566f; font-size: 11px; } .backup-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 340px; } .backup-row-actions form { margin: 0; } .backup-row-actions .button-secondary, .backup-row-actions .button-danger { padding: 7px 10px; font-size: 11px; white-space: nowrap; } .backup-delete-form { display: inline-flex; align-items: center; gap: 6px; } .backup-delete-form label { margin: 0; color: #795050; font-size: 11px; white-space: nowrap; } .backup-delete-form input { width: 15px; height: 15px; } .backup-restore-note { margin-top: 22px; } .backup-restore-guide ol { margin: 0 0 18px; padding-left: 22px; color: #42566f; font-size: 13px; line-height: 1.8; } .backup-restore-guide li + li { margin-top: 4px; } .backup-restore-command { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 11px 13px; border: 1px solid #dce6f0; background: #f8fbff; } .backup-restore-command + .backup-restore-command { border-top: 0; } .backup-restore-command span { color: var(--muted); font-size: 11px; font-weight: 700; } .backup-restore-command code { min-width: 0; overflow-wrap: anywhere; color: #294866; font-size: 12px; } .backup-restore-guide > .field-help { margin: 14px 0 0; } @media (prefers-reduced-motion: reduce) { .news-slide { transition: none; } } @media (min-width: 901px) { .news-carousel, .media-hot { height: 320px; } .news-carousel { aspect-ratio: auto; } .media-hot { display: flex; flex-direction: column; } .media-hot ol { min-height: 0; display: flex; flex: 1; flex-direction: column; } .media-hot li { min-height: 0; flex: 1; align-items: center; padding-block: 0; } } @media (max-width: 1200px) and (min-width: 901px) { .ad-campaign-form { grid-template-columns: repeat(3, minmax(150px, 1fr)); } .ad-campaign-guidance > div { grid-template-columns: 1fr; } .topic-management-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .media-lead, .media-main-grid { grid-template-columns: 1fr; } .topic-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topic-management-grid { grid-template-columns: 1fr; } .media-hot ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; } .media-sidebar { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } .media-sidebar .ad-slot { display: none; } .home-hero, .home-content-grid { grid-template-columns: 1fr; } .home-briefing-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; } .home-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-grid, .content-grid, .article-layout, .editor-grid, .review-grid { grid-template-columns: 1fr; } .review-apply { position: static; } .feature-card { min-height: 320px; } .article-sidebar { display: none; } .article-detail-layout { grid-template-columns: 1fr; } .article-detail-sidebar { display: grid; grid-template-columns: 1fr 1fr; position: static; } .article-detail-sidebar > .ad-slot { display: none; } .stats { grid-template-columns: repeat(2, 1fr); } .admin-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .health-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .media-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media-filter-search { grid-column: 1 / -1; } .media-filter-actions { align-self: end; } .media-library-item { grid-template-columns: 96px minmax(0, 1fr); } .media-thumbnail { width: 96px; height: 76px; } .media-item-actions { grid-column: 2; display: flex; flex-wrap: wrap; } .media-item-actions > .button-secondary, .media-item-actions > button, .media-delete-form { width: auto; } .media-delete-form { display: flex; align-items: center; margin: 0; padding: 0 0 0 7px; border-top: 0; border-left: 1px solid var(--line); } .media-delete-form .button-danger { width: auto; } .content-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .article-filter-bar { grid-template-columns: minmax(220px, 1fr) minmax(130px, .5fr); } .article-toolbar { align-items: stretch; flex-direction: column; } .article-filter-row input[name="q"] { width: auto; flex: 1 1 180px; } .filter-actions { align-self: end; } .editor-actions { align-items: flex-start; flex-direction: column; } .editor-submit-status { max-width: none; text-align: left; } .editor-main { min-height: auto; } .ad-campaign-form, .topic-management-form, .adsense-settings-form { grid-template-columns: 1fr 1fr; } .account-create-form { grid-template-columns: 1fr 1fr; } .account-create-form .button-primary { grid-column: 1 / -1; justify-self: end; } .ad-campaign-form > label, .ad-create-action small { white-space: normal; } .ad-campaign-guidance { grid-template-columns: 1fr; } .ad-campaign-guidance > div { grid-template-columns: 1fr; } .ad-placement-compact-list { grid-template-columns: 1fr; } .navigation-management-row { grid-template-columns: 1fr 1fr; } .site-settings-footer-form { grid-template-columns: 1fr 1fr; } .site-settings-footer-form > label:first-child { grid-column: 1 / -1; } .footer-link-management-row, .footer-link-create-form { grid-template-columns: 1fr 1fr; } .backup-summary-grid { grid-template-columns: 1fr 1fr; } .site-package-create-card { grid-template-columns: 1fr; } .backup-retention-card { grid-template-columns: 1fr; } .backup-policy-note { padding: 18px 0 0; border-top: 1px solid var(--line); border-left: 0; } .category-cloud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .taxonomy-create-grid, .taxonomy-merge-grid { grid-template-columns: 1fr; } .english-slug-card { grid-template-columns: 1fr; } .taxonomy-channel-head { align-items: stretch; flex-direction: column; } .taxonomy-inline-form { grid-template-columns: 1fr 1fr; } .category-row-form { grid-template-columns: 1fr; } } @media (max-width: 640px) { .shell { width: min(100% - 28px, 1200px); } .health-overview { grid-template-columns: auto minmax(0, 1fr); } .site-package-create-form { grid-template-columns: 1fr; } .site-package-create-form .check-row { justify-content: flex-start; } .backup-governance-grid { grid-template-columns: 1fr; } .health-overview time { grid-column: 2; } .health-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .health-check-grid { grid-template-columns: minmax(0, 1fr); } .health-footnote { text-align: left; } .media-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media-filter-bar { grid-template-columns: minmax(0, 1fr); } .media-filter-search { grid-column: auto; } .media-result-meta { align-items: flex-start; flex-direction: column; gap: 2px; } .media-library-item { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; } .media-thumbnail { width: 76px; height: 66px; } .media-item-title > strong { flex-basis: 100%; } .media-item-actions { grid-column: 1 / -1; } .media-library-note { text-align: left; } .traffic-columns { grid-template-columns: minmax(0, 1fr); } .traffic-card { padding-inline: 12px; } .traffic-bar-spacer { display: none; } .traffic-meta { flex: 1 1 100%; order: 3; } .traffic-refresh { margin-left: auto; } .traffic-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .traffic-kpi strong { font-size: 19px; } .traffic-card-head { align-items: flex-start; flex-direction: column; } .traffic-chart-card .traffic-card-head { flex-direction: row; } .media-home { padding-top: 14px; } .media-shell { width: min(100% - 24px, 1140px); } .news-slide-overlay { padding: 42px 14px 15px; } .news-slide-meta { display: none; } .news-slide-overlay h1 { max-width: calc(100% - 74px); display: -webkit-box; overflow: hidden; margin: 0; font-size: 17px; line-height: 23px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .news-carousel-arrow { display: none; } .news-carousel-dots { right: 14px; bottom: 12px; } .news-carousel-dots button { width: 12px; } .news-carousel-dots button.is-active { width: 22px; } .media-hot { padding: 17px 18px 10px; } .media-hot ol { display: block; } .media-main-grid { margin-top: 14px; } .media-feed { padding: 0 16px; } .media-excerpt { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 16px 0; } .media-excerpt-image { width: 116px; height: 80px; } .media-excerpt-body h2 { margin: -3px 0 5px; font-size: 15px; line-height: 21px; } .media-excerpt-body p { display: none; } .media-excerpt-meta { gap: 8px; padding-top: 3px; font-size: 11px; } .media-pagination { gap: 5px; padding: 18px 0 22px; } .media-pagination a, .media-pagination .is-current { min-width: 31px; height: 31px; padding-inline: 8px; } .media-pagination .media-page-direction { padding-inline: 10px; } .media-sidebar { display: flex; } .topic-card-grid { grid-template-columns: 1fr; gap: 14px; } .topic-management-card { grid-template-columns: 1fr; } .topic-management-card { grid-template-columns: minmax(0, 360px); gap: 18px; padding: 20px; } .topic-management-cover { margin: 0 auto; } .topic-management-card form { margin-inline: auto; } .header-main { min-height: 0; align-items: center; flex-wrap: wrap; gap: 0; padding-top: 4px; } .brand-logo { align-self: start; } .site-logo { width: 154px; height: 54px; } .header-navigation { width: 100%; flex: 0 0 100%; } .main-nav { width: 100%; border-top: 1px solid #eee; } .nav-scroll { gap: 24px; } .main-nav a { padding: 8px 0 9px; } .header-search { position: absolute; top: 13px; right: 0; } .search { width: min(330px, calc(100vw - 28px)); top: calc(100% + 9px); } .ad-slot { min-height: 100px; } .home-hero { padding-top: 16px; } .home-feature { min-height: 0; grid-template-columns: 1fr; } .home-feature-visual { min-height: 185px; padding: 24px; } .home-feature-copy { padding: 27px 24px 30px; } .home-feature h1 { font-size: 29px; } .home-briefing { padding: 22px; } .home-briefing-list { display: flex; } .home-channel-grid { grid-template-columns: 1fr; } .home-channel-card { min-height: 0; } .home-section-heading { align-items: start; flex-direction: column; gap: 6px; } .home-latest-heading > span { display: none; } .home-article-row { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 15px; } .home-article-thumb { min-height: 96px; padding: 10px; } .home-article-copy h3 { font-size: 16px; line-height: 1.45; } .home-article-copy p { display: none; } .home-about-card { display: none; } .hero-grid { padding-top: 16px; } .feature-card { min-height: 0; grid-template-columns: 1fr; } .feature-visual { min-height: 190px; } .feature-copy { padding: 26px; } .feature-card h1 { font-size: 30px; } .briefing { padding: 28px; } .article-row { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 16px; } .article-thumb { min-height: 92px; padding: 10px; } .article-row h3 { margin-top: 4px; font-size: 17px; } .article-row p { display: none; } .article-page { border-inline: 0; border-radius: 0; padding-inline: 20px; } .article-page h1 { font-size: 34px; } .article-detail-shell { padding-bottom: 38px; } .article-detail-breadcrumb { padding-block: 14px 11px; } .article-detail-layout { width: 100%; } .article-document { border-inline: 0; border-radius: 0; } .article-document-header { padding: 24px 20px 19px; } .article-document-header h1 { font-size: 17px; line-height: 23px; } .article-byline { gap: 5px 15px; } .article-byline > * + *::before { left: -9px; } .article-leader-ad { padding: 12px 16px 0; } .article-leader-ad .ad-slot { min-height: 58px; } .article-content { padding: 21px 20px 32px; font-size: 16px; line-height: 1.9; } .article-content h2 { font-size: 21px; } .article-content h3 { font-size: 18px; } .article-content img { margin-block: 18px; border-radius: 3px; } .article-adjacent-navigation { grid-template-columns: 1fr; gap: 9px; margin: 0 16px 26px; padding-top: 20px; } .article-adjacent-navigation a { min-height: 70px; } .article-adjacent-empty { display: none; } .article-adjacent-next { grid-row: auto; } .article-end-mark { padding-bottom: 22px; } .article-share { padding: 0 18px 27px; } .article-share-actions { gap: 10px; } .article-share-actions a, .article-share-actions button { width: 35px; height: 35px; } .article-document > .ad-slot { min-height: 150px; margin: 0 16px 24px; } .article-detail-sidebar { display: flex; padding-inline: 14px; } .article-back-to-top { width: 40px; height: 40px; right: 14px; bottom: 16px; } .admin-grid { grid-template-columns: 1fr; } .admin-home-grid { grid-template-columns: 1fr; } .admin-page { padding: 20px 16px; } .admin-toolbar { align-items: flex-start; flex-direction: column; } .toolbar-actions { width: 100%; flex-wrap: wrap; } .admin-home-heading { align-items: flex-start; flex-direction: column; } .admin-session-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; } .content-stats { grid-template-columns: 1fr 1fr; gap: 8px; } .content-stat { padding: 12px; } .content-stat strong { font-size: 18px; } .article-filter-bar { grid-template-columns: 1fr; } .article-filter-row { align-items: stretch; flex-direction: column; } .article-filter-row input[name="q"], .article-filter-row select, .article-filter-row .button-primary, .article-filter-row .button-secondary { width: 100%; } .article-list-dates { min-width: 0; flex-direction: column; gap: 2px; } .filter-actions, .filter-actions a, .filter-actions button { width: 100%; } .list-summary { align-items: flex-start; flex-direction: column; gap: 3px; } .pager { flex-wrap: wrap; } .editor-section-heading { align-items: flex-start; flex-direction: column; } .editor-section-heading small { text-align: left; } .editor-action-buttons { width: 100%; } .editor-action-buttons button { flex: 1 1 140px; } .ad-campaign-form, .topic-management-form, .adsense-settings-form { grid-template-columns: 1fr; } .account-create-form { grid-template-columns: 1fr; } .account-create-form .button-primary { width: 100%; grid-column: auto; } .ad-create-action { align-items: stretch; flex-direction: column; } .ad-create-action small { text-align: left; } .ad-create-action .button-primary { width: 100%; } .ad-placement-compact-row { grid-template-columns: 1fr auto; } .ad-placement-compact-row span { grid-column: 1 / -1; } .navigation-management-row { grid-template-columns: 1fr; } .site-settings-footer-form, .footer-link-management-row, .footer-link-create-form { grid-template-columns: 1fr; } .site-settings-footer-form > label:first-child { grid-column: auto; } .backup-summary-grid, .backup-retention-form { grid-template-columns: 1fr; } .backup-create-card { align-items: stretch; flex-direction: column; } .backup-create-card button { width: 100%; } .backup-restore-command { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .category-cloud { grid-template-columns: 1fr; } .certificate-domain-context { grid-template-columns: 1fr; gap: 8px; } .domain-tls-heading, .tls-auto-form, .tls-submit-row { align-items: stretch; flex-direction: column; } .domain-tls-heading > .status { align-self: flex-start; } .tls-certificate-meta, .tls-file-grid { grid-template-columns: 1fr; } .tls-certificate-meta .tls-domain-row { grid-column: auto; } .tls-auto-form .button-secondary, .tls-submit-row .button-primary { width: 100%; } .taxonomy-inline-form { grid-template-columns: 1fr; } .merged-list > div { grid-template-columns: 1fr; } .compact-action-form { grid-template-columns: 1fr; } } .search-page-form { margin: 18px 0 4px; } .search-page-row { display: flex; flex-wrap: wrap; gap: 10px; } .search-page-row input, .search-page-row select { height: 42px; padding: 0 12px; border: 1px solid #d5dee8; border-radius: 8px; background: white; font-size: 14px; color: var(--ink, #1a2733); } .search-page-row input { flex: 1 1 260px; min-width: 200px; } .search-page-row select { flex: 0 0 auto; } .search-page-row button { height: 42px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--blue); color: white; font-size: 14px; font-weight: 700; cursor: pointer; } .search-page-row button:hover { filter: brightness(1.05); } .search-result-count { color: var(--muted); font-size: 13px; } /* 搜索结果为纯文本卡片:无图,正文占满整行 */ .media-excerpt.is-textonly { display: block; padding: 22px 0; } .media-excerpt.is-textonly .media-excerpt-body p { display: -webkit-box; } @media (max-width: 720px) { .search-page-row input { flex-basis: 100%; } .search-page-row select { flex: 1 1 46%; } } /* 富文本编辑器(后台)填满左栏剩余高度,与右侧设置面板底部对齐。 */ .rich-editor { min-height: 520px; display: flex; flex: 1 1 auto; flex-direction: column; } .rich-editor .ql-editor { min-height: 520px; flex: 1 1 auto; font-size: 16px; } .rich-editor .ql-editor { line-height: 2; } .rich-editor .ql-editor p { margin: 1.15em 0; } .rich-editor .ql-editor > p:first-child { margin-top: 0; } .rich-editor .ql-editor > p:last-child { margin-bottom: 0; } .rich-editor .ql-container { min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } /* 文章编辑器整屏工作区:页面本身不滚动,正文与侧栏各自内部滚动。 */ .editor-body { overflow: hidden; } .editor-shell { box-sizing: border-box; width: min(1720px, 100%); height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 10px; margin: 0 auto; padding: 12px clamp(12px, 1.6vw, 24px); } .editor-topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .editor-topbar h1 { margin: 0; font-size: 19px; } .editor-shell > .alert { flex: 0 0 auto; margin: 0; } .editor-shell .article-editor { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; } .editor-shell .editor-grid { min-height: 0; flex: 1 1 auto; gap: 16px; } .editor-shell .editor-main { min-height: 0; padding: 14px 16px; } .editor-shell .editor-side { min-height: 0; gap: 12px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } .editor-shell .rich-editor, .editor-shell .rich-editor .ql-editor { min-height: 0; } .editor-shell .editor-actions { position: static; flex: 0 0 auto; margin: 0; box-shadow: none; } .editor-title-input { font-size: 18px; font-weight: 700; } .article-editor .editor-main > .editor-title-input { margin-bottom: 10px; } @media (max-width: 900px), (max-height: 620px) { /* 窗口过小时回退为普通滚动页面。此处必须用 visible:body 上的 auto/hidden 会让底部操作条的 sticky 失效。 */ .editor-body { overflow: visible; } .editor-shell { height: auto; min-height: 100vh; } .editor-shell .editor-side { overflow: visible; } .editor-shell .rich-editor, .editor-shell .rich-editor .ql-editor { min-height: 340px; } .editor-shell .editor-actions { position: sticky; bottom: 0; box-shadow: 0 -5px 18px rgba(28, 55, 74, .06); } } .rich-editor .ql-toolbar { border-top-left-radius: 8px; border-top-right-radius: 8px; } /* 登录图形验证码 */ .captcha-row { display: flex; align-items: center; gap: 10px; } .captcha-row input { flex: 1 1 auto; } .captcha-row img { flex: 0 0 auto; height: 42px; border: 1px solid #d5dee8; border-radius: 6px; cursor: pointer; background: #eef2f7; } /* 管理员账号操作列 */ .admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; } .inline-form input { width: 150px; border: 1px solid #cbd7e5; border-radius: 8px; padding: 7px 9px; font: inherit; } .admin-form .hint { margin: 6px 0 0; color: var(--muted); font-size: 13px; } /* 内容异常复核 */ .review-filter-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #dbe4ee; border-radius: 8px; color: #425466; background: white; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; } .review-filter-toggle:hover { border-color: #9dbbd3; background: #fafdff; } .review-filter-toggle input { width: 15px; height: 15px; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--blue); } .flag-tag { display: inline-block; margin: 0 4px 0 0; padding: 2px 8px; border-radius: 999px; background: #feecec; color: #9b1c1c; font-size: 11px; font-weight: 700; white-space: nowrap; } /* 复核行压缩为单行,与文章列表保持一致。 */ .review-admin-table th, .review-admin-table td { padding: 9px 14px; } .review-admin-table th:nth-child(2) { width: 40%; } .review-id { color: var(--muted); font-size: 12px; } .review-flags { white-space: nowrap; } .review-admin-table .row-actions { flex-wrap: nowrap; gap: 10px; } .row-actions form { display: inline-flex; margin: 0; } .row-actions .link-button { color: var(--blue-dark); font-size: 12px; font-weight: 700; white-space: nowrap; } .row-actions .link-button:hover { text-decoration: underline; } /* Quill 语义化 class 在前台正文与后台编辑器中的一致渲染 */ .article-content .ql-align-center, .ql-editor .ql-align-center { text-align: center; } .article-content .ql-align-right, .ql-editor .ql-align-right { text-align: right; } .article-content .ql-align-justify, .ql-editor .ql-align-justify { text-align: justify; } .article-content .ql-size-small, .ql-editor .ql-size-small { font-size: 0.75em; } .article-content .ql-size-large, .ql-editor .ql-size-large { font-size: 1.5em; } .article-content .ql-size-huge, .ql-editor .ql-size-huge { font-size: 2.5em; } .article-content .ql-indent-1 { padding-left: 3em; } .article-content .ql-indent-2 { padding-left: 6em; } .article-content .ql-indent-3 { padding-left: 9em; } .article-content .ql-indent-4 { padding-left: 12em; } .article-content .ql-indent-5 { padding-left: 15em; } .article-content .ql-indent-6 { padding-left: 18em; } .article-content .ql-indent-7 { padding-left: 21em; } .article-content .ql-indent-8 { padding-left: 24em; }