#wpadminbar { display: none !important; } html { margin-top: 0 !important; } *, *::before, *::after { box-sizing: border-box; } /* ---- 全屏接管（沿用 V9 逻辑） ---- */ body.saas-takeover-active { overflow: hidden !important; background: #E9E9EB !important; margin: 0 !important; padding: 0 !important; min-height: 100vh !important; -webkit-font-smoothing: antialiased; } body.saas-takeover-active > *:not(#saas-fullscreen-app-wrapper):not(#saas-global-login-mask):not(#saas-global-login-modal):not(#storyos-sidebar-login-test-mask):not(#storyos-sidebar-login-test-modal):not(script):not(style):not(link):not([id^="saas-toast-"]) { display: none !important; opacity: 0 !important; visibility: hidden !important; height: 0 !important; width: 0 !important; position: absolute !important; z-index: -9999 !important; } #saas-fullscreen-app-wrapper { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; display: flex !important; flex-direction: row !important; z-index: 2147483645 !important; background: #E9E9EB; overflow: hidden !important; } /* 首页不显示左侧菜单：#210 仍然加载（登录弹窗、主题切换等全站脚本在里面），只把菜单本身藏起来 */ #saas-fullscreen-app-wrapper > #saas-global-sidebar, #saas-fullscreen-app-wrapper > .saas-sidebar-overlay, #saas-fullscreen-app-wrapper .saas-sidebar-container { display: none !important; } #saas-fullscreen-app-wrapper .main-area { flex: 1; min-width: 0; height: 100vh; margin: 0 !important; padding: 0 !important; background: #E9E9EB; overflow: hidden; position: relative; } #saas-fullscreen-app-wrapper .content { height: 100vh; overflow-y: auto; padding: 0 16px 48px; display: flex; flex-direction: column; align-items: center; } html.dark-mode body.saas-takeover-active, html.dark-mode #saas-fullscreen-app-wrapper, html.dark-mode #saas-fullscreen-app-wrapper .main-area { background: #09090B !important; } /* ---- 首页 V10：法则 V1.0 冷灰 token ---- */ #storyos-home-v10 { --h-t1: #18181B; --h-t2: #3F3F46; --h-t3: #71717A; --h-t4: #A1A1AA; --h-t5: #52525B; --h-line: #E4E4E7; --h-field: #D4D4D8; --h-well: #F4F4F5; --h-soft: #FAFAFA; --h-ink: #27272A; --h-ink-edge: #18181B; --h-on-ink: #FAFAFA; --h-paper: #FFFFFF; --h-heading: #27272A; --h-brand: #4A55C7; --h-brand-hover: #3A44A8; --h-warn-bg: #FFEDD5; --h-warn-t: #9A3412; --h-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; --h-serif: "Songti SC", "STSong", "SimSun", serif; width: 100%; max-width: 1024px; font-family: var(--h-sans); color: var(--h-t1); font-variant-numeric: tabular-nums; } html.dark-mode #storyos-home-v10 { --h-t1: #FAFAFA; --h-t2: #D4D4D8; --h-t3: #A1A1AA; --h-t4: #71717A; --h-t5: #A1A1AA; --h-line: #3F3F46; --h-field: #52525B; --h-well: #27272A; --h-soft: #27272A; --h-ink: #F4F4F5; --h-ink-edge: #FAFAFA; --h-on-ink: #18181B; --h-paper: #18181B; --h-heading: #E4E4E7; --h-brand: #8E96F0; --h-brand-hover: #A9AFF5; --h-warn-bg: #431407; --h-warn-t: #FED7AA; } #storyos-home-v10 a { color: inherit; text-decoration: none; } #storyos-home-v10 button, #storyos-home-v10 input { font-family: inherit; margin: 0; } #storyos-home-v10 svg { flex-shrink: 0; } #storyos-home-v10 .sh10-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #storyos-home-v10 .sh10-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #storyos-home-v10 a:focus-visible, #storyos-home-v10 button:focus-visible, #storyos-home-v10 input:focus-visible { outline: 2px solid var(--h-brand); outline-offset: 2px; } #storyos-home-v10 .sh10-link { color: var(--h-brand); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; } #storyos-home-v10 .sh10-link:hover { color: var(--h-brand-hover); } /* 顶部内测条 */ #storyos-home-v10 .sh10-banner { all: unset; box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 14px; display: flex; align-items: center; justify-content: center; gap: 6px; background: #18181B; color: #FFFFFF; font-family: var(--h-sans); font-size: 14px; line-height: 24px; text-align: center; cursor: pointer; } #storyos-home-v10 .sh10-banner:hover span { text-decoration: underline; } #storyos-home-v10 .sh10-banner b { font-weight: 700; } html.dark-mode #storyos-home-v10 .sh10-banner { background: #27272A; } /* 纸面 */ #storyos-home-v10 .sh10-paper { padding: 20px 48px 48px; background: var(--h-paper); border-radius: 0 0 8px 8px; box-shadow: 0 0 0 1px #F4F4F5, 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 48px; } html.dark-mode #storyos-home-v10 .sh10-paper { box-shadow: 0 0 0 1px rgba(212,212,216,.12); } #storyos-home-v10 .sh10-paper > .sos-top { margin-bottom: -16px; } /* V10.7：顶栏和下面内容的间距 48 → 32 */ /* 顶栏 */ #storyos-home-v10 .sh10-top { height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } #storyos-home-v10 .sh10-top-left { display: flex; align-items: center; gap: 40px; min-width: 0; } #storyos-home-v10 .sh10-logo { display: inline-flex; align-items: center; height: 28px; flex-shrink: 0; } #storyos-home-v10 .sh10-logo img { height: 28px; width: auto; display: block; } html.dark-mode #storyos-home-v10 .sh10-logo img { filter: invert(1) hue-rotate(180deg); } #storyos-home-v10 .sh10-nav { display: flex; align-items: center; gap: 8px; } #storyos-home-v10 .sh10-pill { height: 34px; padding: 8px 16px; display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px; border: 1px solid transparent; color: var(--h-t5); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; transition: background .1s, color .1s; } #storyos-home-v10 .sh10-pill:hover { background: rgba(161,161,170,.2); color: var(--h-t1); } #storyos-home-v10 .sh10-pill.is-active { background: var(--h-ink); border-color: var(--h-ink-edge); color: var(--h-on-ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); } #storyos-home-v10 .sh10-top-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } #storyos-home-v10 .sh10-help { height: 34px; padding: 6px 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.35px; color: var(--h-t5); } #storyos-home-v10 .sh10-help:hover { background: rgba(161,161,170,.2); color: var(--h-t1); } /* 头像菜单 */ #storyos-home-v10 .sh10-acct { position: relative; } #storyos-home-v10 .sh10-avatar-btn { width: 42px; height: 42px; padding: 4px; border: 0; border-radius: 9999px; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } #storyos-home-v10 .sh10-avatar { width: 32px; height: 32px; border-radius: 9999px; background: var(--h-well); color: var(--h-t2); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: 14px; line-height: 20px; font-weight: 600; transition: box-shadow .1s; } #storyos-home-v10 .sh10-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } #storyos-home-v10 .sh10-avatar-btn[aria-expanded="true"] .sh10-avatar { box-shadow: 0 0 0 1px var(--h-paper), 0 0 0 3px var(--h-t3); } #storyos-home-v10 .sh10-menu { position: absolute; top: calc(100% + 5px); right: 50%; transform: translateX(50%); z-index: 20; width: 234px; max-width: calc(100vw - 24px); padding: 4px; background: var(--h-paper); border-radius: 8px; box-shadow: 0 0 0 1px var(--h-line), 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); display: flex; flex-direction: column; } #storyos-home-v10 .sh10-menu[hidden] { display: none; } #storyos-home-v10 .sh10-menu-status { display: block; padding: 6px 12px; border-radius: 6px; background: var(--h-well); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--h-t2); text-align: center; } #storyos-home-v10 .sh10-menu-status.is-warn { background: var(--h-warn-bg); color: var(--h-warn-t); } #storyos-home-v10 a.sh10-menu-status:hover { text-decoration: underline; } #storyos-home-v10 .sh10-menu-user { padding: 10px 8px 8px; display: flex; flex-direction: column; min-width: 0; } #storyos-home-v10 .sh10-menu-user strong { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--h-heading); } #storyos-home-v10 .sh10-menu-user span { font-size: 14px; line-height: 20px; color: var(--h-t5); } #storyos-home-v10 .sh10-menu-sep { height: 1px; margin: 4px -4px; background: var(--h-line); } #storyos-home-v10 .sh10-menu-theme { height: 38px; padding-left: 8px; display: flex; align-items: center; justify-content: space-between; } #storyos-home-v10 .sh10-menu-theme > span { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--h-heading); } #storyos-home-v10 .sh10-menu-theme > div { display: flex; gap: 2px; } #storyos-home-v10 .sh10-item { all: unset; box-sizing: border-box; width: 100%; height: 32px; padding: 6px 12px; display: flex; align-items: center; gap: 12px; border-radius: 6px; font-family: var(--h-sans); font-size: 14px; line-height: 20px; font-weight: 400; color: var(--h-t2); cursor: pointer; } #storyos-home-v10 .sh10-item svg { color: var(--h-t3); } #storyos-home-v10 .sh10-item:hover, #storyos-home-v10 .sh10-item:focus-visible { background: var(--h-well); color: var(--h-t1); outline: none; } /* 小按钮（法则：高 30、圆角 4、12px / 600） */ #storyos-home-v10 .sh10-btn { height: 30px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 4px; border: 1px solid var(--h-field); background: var(--h-paper); color: var(--h-t5); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background .1s, border-color .1s; } #storyos-home-v10 .sh10-btn:hover { background: var(--h-soft); border-color: var(--h-t4); } #storyos-home-v10 .sh10-btn--primary { background: var(--h-ink); border-color: var(--h-ink-edge); color: var(--h-on-ink); } #storyos-home-v10 .sh10-btn--primary:hover { background: #18181B; border-color: #18181B; } html.dark-mode #storyos-home-v10 .sh10-btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; } #storyos-home-v10 .sh10-btn--quiet { background: transparent; border-color: transparent; box-shadow: none; } #storyos-home-v10 .sh10-btn--quiet:hover { background: rgba(161,161,170,.2); border-color: transparent; } #storyos-home-v10 .sh10-btn[aria-pressed="true"] { background: var(--h-paper); border-color: var(--h-field); color: var(--h-t1); box-shadow: 0 1px 2px rgba(0,0,0,.05); } #storyos-home-v10 .sh10-btn[disabled] { opacity: .6; cursor: default; } /* 页头 */ #storyos-home-v10 .sh10-hero { display: flex; flex-direction: column; align-items: center; text-align: center; } #storyos-home-v10 .sh10-title { margin: 0; font-family: var(--h-serif); font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: -0.02em; color: #000000; } #storyos-home-v10 .sh10-lead { margin: 8px 0 0; font-family: var(--h-serif); font-size: 18px; line-height: 28px; font-weight: 400; color: var(--h-t2); text-wrap: balance; } html.dark-mode #storyos-home-v10 .sh10-title { color: #FAFAFA; } #storyos-home-v10 .sh10-eyebrow { margin-top: 24px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--h-t2); } /* V10.32 · 创作台 M1（规则书 V2.88）：点阵底 + 一句话「为［题材］写一部」+ 无边框参数条 + 方形生成按钮 */ #storyos-home-v10 .sh10-desk { margin-top: 28px; width: 100%; box-sizing: border-box; padding: 40px 24px 30px; border-radius: 16px; background: radial-gradient(var(--h-line) 1px, transparent 1px) 0 0 / 16px 16px, var(--h-soft); display: flex; flex-direction: column; align-items: center; } #storyos-home-v10 .sh10-desk-h { margin: 0; font-family: var(--h-serif); font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--h-t1); } #storyos-home-v10 .sh10-desk-card { margin-top: 20px; width: 820px; max-width: 100%; box-sizing: border-box; padding: 16px 14px 12px 20px; border: 1px solid var(--h-line); border-radius: 16px; background: var(--h-paper); box-shadow: 0 8px 24px -12px rgba(0,0,0,.18); text-align: left; transition: border-color .15s; } #storyos-home-v10 .sh10-desk-card:focus-within { border-color: var(--h-field); } #storyos-home-v10 .sh10-desk-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 16px; line-height: 26px; color: var(--h-t2); } #storyos-home-v10 .sh10-desk-genre select { height: 30px; padding: 0 26px 0 10px; border: 0; border-radius: 6px; background: var(--h-well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center / 11px no-repeat; appearance: none; -webkit-appearance: none; font-family: var(--h-sans); font-size: 15px; font-weight: 600; color: var(--h-t1); cursor: pointer; } #storyos-home-v10 .sh10-desk textarea { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 0; padding: 4px 0; border: 0; outline: none; resize: none; background: transparent; font-family: var(--h-serif); font-size: 17px; line-height: 28px; color: var(--h-t1); min-height: 64px; max-height: 168px; } #storyos-home-v10 .sh10-desk textarea::placeholder { color: var(--h-t4); } #storyos-home-v10 .sh10-desk-bar { margin-top: 10px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } #storyos-home-v10 .sh10-desk-bar select { height: 30px; padding: 0 24px 0 8px; border: 0; border-radius: 6px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 7px center / 10px no-repeat; appearance: none; -webkit-appearance: none; font-family: var(--h-sans); font-size: 13px; color: var(--h-t2); cursor: pointer; } #storyos-home-v10 .sh10-desk-bar select:hover, #storyos-home-v10 .sh10-desk-bar select:focus-visible { background-color: var(--h-well); outline: none; } #storyos-home-v10 .sh10-desk-sp { flex: 1; } #storyos-home-v10 .sh10-desk-cost { margin-right: 8px; font-size: 12px; color: var(--h-t4); } #storyos-home-v10 .sh10-desk-go { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 10px; background: var(--h-ink); color: var(--h-on-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } #storyos-home-v10 .sh10-desk-go svg { width: 16px; height: 16px; } #storyos-home-v10 .sh10-desk-go:hover { background: var(--h-ink-edge); } #storyos-home-v10 .sh10-desk-go[disabled] { opacity: .5; cursor: default; } #storyos-home-v10 .sh10-desk-go:focus-visible { outline: 2px solid var(--h-ink-edge); outline-offset: 2px; } #storyos-home-v10 .sh10-desk-cont { margin: 14px 0 0; font-size: 13px; line-height: 20px; color: var(--h-t3); } #storyos-home-v10 .sh10-desk-cont a { color: var(--h-t1); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--h-field); } #storyos-home-v10 .sh10-desk-cont a:hover { text-decoration-color: var(--h-t1); } #storyos-home-v10 .sh10-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html.dark-mode #storyos-home-v10 .sh10-desk-h { color: #FAFAFA; } #storyos-home-v10 .sh10-resume { margin-top: 8px; width: 100%; display: flex; justify-content: center; gap: 8px; } #storyos-home-v10 .sh10-rcard { width: 384px; max-width: 100%; height: 76px; padding: 2px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(161,161,170,.2), 0 1px 2px rgba(0,0,0,.05); display: flex; text-align: left; } #storyos-home-v10 .sh10-rcard > span { flex: 1; min-width: 0; border-radius: 6px; padding: 0 10px; display: flex; flex-direction: column; justify-content: center; transition: background .1s; } #storyos-home-v10 .sh10-rcard:hover > span { background: var(--h-well); } #storyos-home-v10 .sh10-rcard-title { font-family: var(--h-serif); font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--h-t1); } #storyos-home-v10 .sh10-rcard-sub { font-size: 14px; line-height: 20px; color: var(--h-t2); } #storyos-home-v10 .sh10-rcard-time { font-size: 12px; line-height: 16px; color: var(--h-t5); } #storyos-home-v10 .sh10-guest { margin-top: 24px; display: flex; align-items: center; gap: 8px; } /* 工具条 */ #storyos-home-v10 .sh10-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } #storyos-home-v10 .sh10-tools-left, #storyos-home-v10 .sh10-tools-right { display: flex; align-items: flex-end; gap: 8px; } #storyos-home-v10 .sh10-field { display: flex; flex-direction: column; gap: 4px; position: relative; } #storyos-home-v10 .sh10-field-label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--h-t2); white-space: nowrap; } #storyos-home-v10 .sh10-search { position: relative; display: flex; } #storyos-home-v10 .sh10-search svg { position: absolute; left: 9px; top: 8px; color: var(--h-t4); pointer-events: none; } #storyos-home-v10 .sh10-search input { width: 176px; height: 30px; padding: 4px 10px 4px 30px; border: 1px solid var(--h-field); border-radius: 4px; background: var(--h-paper); font-size: 14px; line-height: 20px; color: var(--h-t1); outline: 0; box-shadow: 0 1px 2px rgba(0,0,0,.05); -webkit-appearance: none; appearance: none; } #storyos-home-v10 .sh10-search input::placeholder { color: var(--h-t4); } #storyos-home-v10 .sh10-search input:focus { border-color: var(--h-t3); } #storyos-home-v10 .sh10-sort-btn { width: 108px; justify-content: space-between; } #storyos-home-v10 .sh10-sort-btn[aria-expanded="true"] { background: var(--h-soft); border-color: var(--h-t4); } #storyos-home-v10 .sh10-sort-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 15; width: 160px; padding: 4px; background: var(--h-paper); border-radius: 8px; box-shadow: 0 0 0 1px var(--h-line), 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); display: flex; flex-direction: column; } #storyos-home-v10 .sh10-sort-menu[hidden] { display: none; } #storyos-home-v10 .sh10-sort-menu .sh10-item { justify-content: space-between; } #storyos-home-v10 .sh10-sort-menu .sh10-item svg { color: var(--h-t1); visibility: hidden; } #storyos-home-v10 .sh10-sort-menu .sh10-item[aria-checked="true"] { color: var(--h-t1); font-weight: 600; } #storyos-home-v10 .sh10-sort-menu .sh10-item[aria-checked="true"] svg { visibility: visible; } #storyos-home-v10 .sh10-seg { display: flex; } #storyos-home-v10 .sh10-seg .sh10-btn { gap: 6px; } #storyos-home-v10 .sh10-seg .sh10-btn:first-child { border-radius: 4px 0 0 4px; } #storyos-home-v10 .sh10-seg .sh10-btn:last-child { border-radius: 0 4px 4px 0; border-left: 0; } #storyos-home-v10 .sh10-seg .sh10-btn.is-on { background: var(--h-ink); border-color: var(--h-ink-edge); color: var(--h-on-ink); } /* 书架 */ #storyos-home-v10 .sh10-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } #storyos-home-v10 .sh10-sec-head > div { display: flex; align-items: baseline; gap: 16px; min-width: 0; } #storyos-home-v10 .sh10-h2 { margin: 0; font-family: var(--h-serif); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--h-heading); white-space: nowrap; } #storyos-home-v10 .sh10-count { font-size: 14px; line-height: 20px; color: var(--h-t3); white-space: nowrap; } #storyos-home-v10 .sh10-grid { margin: 16px -16px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } #storyos-home-v10 .sh10-book { padding: 16px; border-radius: 8px; display: flex; flex-direction: column; min-width: 0; transition: background .1s; } #storyos-home-v10 .sh10-book[hidden] { display: none; } #storyos-home-v10 a.sh10-book:hover { background: var(--h-well); } #storyos-home-v10 .sh10-cover { position: relative; width: 100%; aspect-ratio: 202 / 323; border-radius: 4px; overflow: hidden; padding: 20px 18px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); transition: transform .1s ease-out; transform-origin: 50% 75%; } #storyos-home-v10 a.sh10-book:hover .sh10-cover { transform: scale(1.035); } #storyos-home-v10 .sh10-cover::before { content: ""; position: absolute; inset: 0; opacity: .22; pointer-events: none; } #storyos-home-v10 .sh10-cover > * { position: relative; } #storyos-home-v10 .sh10-cover.has-img { background-size: cover; background-position: center; background-repeat: no-repeat; } #storyos-home-v10 .sh10-cover.has-img::before { display: none; } #storyos-home-v10 .sh10-cover.has-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 42%, rgba(0,0,0,.7) 100%); } #storyos-home-v10 .sh10-cover.has-img > * { z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,.35); } #storyos-home-v10 .sh10-grid.is-list .sh10-cover.has-img::after { display: none; } #storyos-home-v10 .sh10-cover-top { font-size: 12px; line-height: 16px; font-weight: 600; color: rgba(255,255,255,.72); } #storyos-home-v10 .sh10-cover-title { font-family: var(--h-serif); font-size: 20px; line-height: 28px; font-weight: 600; color: #FFFFFF; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; } #storyos-home-v10 .sh10-tone-slate { background: #34405E; } #storyos-home-v10 .sh10-tone-slate::before { background: repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 9px); } #storyos-home-v10 .sh10-tone-wine { background: #5E3440; } #storyos-home-v10 .sh10-tone-wine::before { background: repeating-radial-gradient(circle at 100% 0, #fff 0 1px, transparent 1px 10px); } #storyos-home-v10 .sh10-tone-moss { background: #2E4A45; } #storyos-home-v10 .sh10-tone-moss::before { background: repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 11px); } #storyos-home-v10 .sh10-tone-sand { background: #6B5B40; } #storyos-home-v10 .sh10-tone-sand::before { background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 7px); } #storyos-home-v10 .sh10-tone-ink { background: #2B2B33; } #storyos-home-v10 .sh10-tone-ink::before { background: repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 12px); } #storyos-home-v10 .sh10-tone-plum { background: #4B3A5C; } #storyos-home-v10 .sh10-tone-plum::before { background: repeating-radial-gradient(circle at 0 100%, #fff 0 1px, transparent 1px 9px); } #storyos-home-v10 .sh10-book-info { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } #storyos-home-v10 .sh10-book-title { font-family: var(--h-serif); font-size: 20px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--h-heading); } #storyos-home-v10 .sh10-book-meta { font-size: 14px; line-height: 14px; color: var(--h-t3); } #storyos-home-v10 .sh10-book-time { display: none; } #storyos-home-v10 .sh10-new { all: unset; box-sizing: border-box; padding: 16px; border-radius: 8px; display: flex; flex-direction: column; cursor: pointer; } #storyos-home-v10 .sh10-new .sh10-cover { background: var(--h-soft); box-shadow: inset 0 0 0 1px var(--h-line); align-items: center; justify-content: center; gap: 8px; color: var(--h-t3); font-family: var(--h-sans); font-size: 14px; line-height: 20px; font-weight: 600; } #storyos-home-v10 .sh10-new .sh10-cover::before { display: none; } #storyos-home-v10 .sh10-new:hover .sh10-cover { color: var(--h-t1); background: var(--h-well); } #storyos-home-v10 .sh10-new:focus-visible { outline: 2px solid var(--h-brand); outline-offset: 2px; } #storyos-home-v10 .sh10-new[hidden] { display: none; } /* 列表视图 */ #storyos-home-v10 .sh10-grid.is-list { margin: 16px 0 0; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--h-line); } #storyos-home-v10 .sh10-grid.is-list .sh10-book { flex-direction: row; align-items: center; gap: 16px; padding: 12px 8px; border-radius: 0; border-bottom: 1px solid var(--h-line); } #storyos-home-v10 .sh10-grid.is-list .sh10-cover { width: 40px; flex-shrink: 0; padding: 0; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.08); } #storyos-home-v10 .sh10-grid.is-list .sh10-cover > * { display: none; } #storyos-home-v10 .sh10-grid.is-list a.sh10-book:hover .sh10-cover { transform: none; } #storyos-home-v10 .sh10-grid.is-list .sh10-book-info { margin: 0; flex: 1; gap: 6px; } #storyos-home-v10 .sh10-grid.is-list .sh10-book-title { font-size: 16px; line-height: 20px; } #storyos-home-v10 .sh10-grid.is-list .sh10-book-meta { font-size: 13px; line-height: 18px; } #storyos-home-v10 .sh10-grid.is-list .sh10-book-meta .sh10-when { display: none; } #storyos-home-v10 .sh10-grid.is-list .sh10-book-time { display: block; flex-shrink: 0; font-size: 13px; line-height: 18px; color: var(--h-t3); } #storyos-home-v10 .sh10-grid.is-list .sh10-new { flex-direction: row; align-items: center; gap: 16px; padding: 12px 8px; border-radius: 0; } #storyos-home-v10 .sh10-grid.is-list .sh10-new .sh10-cover { width: 40px; padding: 0; } #storyos-home-v10 .sh10-grid.is-list .sh10-new .sh10-cover span { display: none; } #storyos-home-v10 .sh10-grid.is-list .sh10-new .sh10-new-text { display: block; } #storyos-home-v10 .sh10-new-text { display: none; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--h-t3); } #storyos-home-v10 .sh10-noresult { margin: 16px 0 0; font-size: 14px; line-height: 20px; color: var(--h-t3); } #storyos-home-v10 .sh10-book[data-over] { display: none; } #storyos-home-v10 .sh10-more { margin-top: 24px; display: flex; justify-content: center; } #storyos-home-v10 .sh10-more .sh10-btn svg { transform: rotate(-90deg); } #storyos-home-v10 .sh10-more[hidden] { display: none; } #storyos-home-v10 .sh10-empty { margin-top: 16px; display: flex; align-items: center; gap: 24px; } #storyos-home-v10 .sh10-empty .sh10-new { width: 234px; margin-left: -16px; } #storyos-home-v10 .sh10-empty p { margin: 0; max-width: 420px; font-family: var(--h-serif); font-size: 16px; line-height: 26px; color: var(--h-t3); } /* 本周风向 */ #storyos-home-v10 .sh10-wv { display: flex; flex-direction: column; gap: 16px; } #storyos-home-v10 .sh10-wv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #storyos-home-v10 .sh10-wv-col { border-radius: 8px; box-shadow: 0 0 0 1px rgba(161,161,170,.2), 0 1px 2px rgba(0,0,0,.05); padding: 16px; display: flex; flex-direction: column; min-width: 0; } #storyos-home-v10 .sh10-wv-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--h-t3); } #storyos-home-v10 .sh10-wv-lead { margin-top: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } #storyos-home-v10 .sh10-wv-lead a { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--h-t1); } #storyos-home-v10 .sh10-wv-lead a:hover { color: var(--h-brand); } #storyos-home-v10 .sh10-wv-chg { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--h-t1); white-space: nowrap; } #storyos-home-v10 .sh10-wv-meta { font-size: 12px; line-height: 16px; color: var(--h-t3); } #storyos-home-v10 .sh10-wv-rows { margin-top: 12px; display: flex; flex-direction: column; } #storyos-home-v10 .sh10-wv-row { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--h-well); font-size: 14px; line-height: 20px; color: var(--h-t2); } #storyos-home-v10 .sh10-wv-row:last-child { padding-bottom: 0; } #storyos-home-v10 a.sh10-wv-row:hover span:first-child { color: var(--h-brand); } #storyos-home-v10 .sh10-wv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #storyos-home-v10 .sh10-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 20px; color: var(--h-t2); } #storyos-home-v10 .sh10-chip { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--h-field); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--h-t5); white-space: nowrap; } #storyos-home-v10 .sh10-foot { display: flex; justify-content: center; gap: 16px; font-size: 12px; line-height: 16px; color: var(--h-t4); } /* 内测反馈弹窗（V8.8 原样式，本版未改） */ .storyos-feedback-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: .3s ease; } .storyos-feedback-modal.is-active { opacity: 1; pointer-events: auto; } .storyos-feedback-overlay { position: absolute; inset: 0; background: rgba(5,0,56,0.45); backdrop-filter: blur(3px); } .storyos-feedback-content { position: relative; width: 100%; max-width: 480px; background: #fff; border-radius: 24px; padding: 36px 32px; box-shadow: 0 24px 64px rgba(5,0,56,.18); transform: translateY(20px); transition: .3s cubic-bezier(0.16, 1, 0.3, 1); } .storyos-feedback-modal.is-active .storyos-feedback-content { transform: translateY(0); } .storyos-feedback-close { position: absolute; top: 24px; right: 24px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #e1e4ed; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6b6b9a; transition: .2s; } .storyos-feedback-close:hover { background: #f4f5fb; color: #1a1a2e; border-color: #d1dcff; } .storyos-feedback-close svg { width: 16px; height: 16px; stroke-width: 1.5; } .storyos-feedback-header { margin-bottom: 28px; } .storyos-feedback-header h2 { font-size: 24px; font-weight: 700; color: #1a1a2e; margin: 0 0 8px; letter-spacing: normal; } .storyos-feedback-header p { font-size: 14px; font-weight: 400; color: #6b6b9a; margin: 0; line-height: 1.65; } .storyos-feedback-form { display: flex; flex-direction: column; gap: 24px; } .storyos-form-group { display: flex; flex-direction: column; gap: 8px; } .storyos-form-group label { font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500; color: #6B6B9A; text-transform: uppercase; letter-spacing: 0.04em; } .storyos-feedback-form select, .storyos-feedback-form input, .storyos-feedback-form textarea { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid #edf0f5; background: #fafbfc; font-family: 'DM Sans', sans-serif; font-size: 14px; color: #1a1a2e; outline: none; transition: .2s; box-sizing: border-box; resize: none; } .storyos-feedback-form select:focus, .storyos-feedback-form input:focus, .storyos-feedback-form textarea:focus { border-color: #7083df; background: #fff; box-shadow: 0 0 0 4px rgba(66, 98, 255, 0.08); } .storyos-upload-container { display: flex; gap: 12px; flex-wrap: wrap; } .storyos-upload-previews { display: flex; gap: 12px; } .storyos-preview-item { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; border: 1px solid #edf0f5; box-shadow: 0 1px 3px rgba(5,0,56,.08); } .storyos-preview-item img { width: 100%; height: 100%; object-fit: cover; } .storyos-preview-remove { position: absolute; top: -4px; right: -4px; background: #ff4d4f; color: #fff; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(.8); transition: .2s; } .storyos-preview-item:hover .storyos-preview-remove { opacity: 1; transform: scale(1); top: 4px; right: 4px; } .storyos-upload-box { width: 72px; height: 72px; border-radius: 12px; border: 1px dashed #c2c2d9; display: flex; align-items: center; justify-content: center; color: #6b6b9a; cursor: pointer; transition: .2s; background: #fafbfc; } .storyos-upload-box:hover { border-color: #7083df; color: #7083df; background: #f4f5fb; } .storyos-upload-box svg { width: 24px; height: 24px; } .storyos-upload-box.is-hidden { display: none; } .storyos-submit-btn { margin-top: 8px; padding: 14px; border-radius: 12px; border: none; background: #1a1a40; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: .2s; box-shadow: 0 4px 16px rgba(5,0,56,.10); } .storyos-submit-btn:hover { background: #050038; transform: translateY(-2px); box-shadow: 0 12px 40px rgba(5,0,56,.14); } ::-webkit-scrollbar { width: 6px !important; } ::-webkit-scrollbar-thumb { background-color: #D4D4D8 !important; border-radius: 3px !important; } @media (max-width: 1024px) { #storyos-home-v10 .sh10-grid:not(.is-list) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { #storyos-home-v10 .sh10-paper { padding: 20px 32px 32px; } #storyos-home-v10 .sh10-wv-grid { grid-template-columns: minmax(0, 1fr); } #storyos-home-v10 .sh10-top-left { gap: 20px; } } @media (max-width: 720px) { #saas-fullscreen-app-wrapper .content { padding: 0 0 32px; } #storyos-home-v10 .sh10-banner { flex-wrap: wrap; column-gap: 4px; font-size: 13px; line-height: 20px; } #storyos-home-v10 .sh10-paper { padding: 20px 16px 32px; border-radius: 0; gap: 32px; box-shadow: none; } #storyos-home-v10 .sh10-top { flex-wrap: wrap; height: auto; row-gap: 16px; } #storyos-home-v10 .sh10-top-left { display: contents; } #storyos-home-v10 .sh10-logo { order: 1; } #storyos-home-v10 .sh10-top-right { order: 2; } #storyos-home-v10 .sh10-nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; } #storyos-home-v10 .sh10-nav::-webkit-scrollbar { display: none; } #storyos-home-v10 .sh10-help-text { display: none; } #storyos-home-v10 .sh10-lead { font-size: 16px; line-height: 26px; } #storyos-home-v10 .sh10-resume { flex-direction: column; align-items: stretch; } #storyos-home-v10 .sh10-desk { padding: 28px 14px 22px; } #storyos-home-v10 .sh10-desk-h { font-size: 22px; line-height: 30px; } #storyos-home-v10 .sh10-desk-cost { display: none; } #storyos-home-v10 .sh10-rcard { width: 100%; } #storyos-home-v10 .sh10-tools { flex-direction: column; align-items: stretch; } #storyos-home-v10 .sh10-tools-left .sh10-btn { flex: 1; } #storyos-home-v10 .sh10-tools-right { flex-wrap: wrap; } #storyos-home-v10 .sh10-field--search { flex: 1 1 100%; } #storyos-home-v10 .sh10-search input { width: 100%; } #storyos-home-v10 .sh10-grid { margin: 16px -8px 0; } #storyos-home-v10 .sh10-grid:not(.is-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } #storyos-home-v10 .sh10-book, #storyos-home-v10 .sh10-new { padding: 8px; } #storyos-home-v10 .sh10-cover { padding: 14px 12px; } #storyos-home-v10 .sh10-cover-title { font-size: 16px; line-height: 22px; } #storyos-home-v10 .sh10-book-info { margin-top: 12px; gap: 6px; } #storyos-home-v10 .sh10-book-title { font-size: 16px; line-height: 20px; } #storyos-home-v10 .sh10-book-meta { font-size: 12px; line-height: 16px; } #storyos-home-v10 .sh10-grid.is-list { margin: 16px 0 0; } #storyos-home-v10 .sh10-h2 { font-size: 20px; line-height: 28px; } #storyos-home-v10 .sh10-empty { flex-direction: column; align-items: flex-start; } #storyos-home-v10 .sh10-wv-foot .sh10-btn { width: 100%; } #storyos-home-v10 .sh10-menu { right: 0; transform: none; } } @media (prefers-reduced-motion: reduce) { #storyos-home-v10 * { transition: none !important; } }