feat: add ads/sponsor/captcha modules and polish home & chat UI
This commit is contained in:
@@ -89,6 +89,12 @@
|
||||
--r: 12px;
|
||||
--r-sm: 12px;
|
||||
|
||||
/* 文本控件：柔和默认边 + 贴边细聚焦（见下方 .j13-control-* / 各输入选择器） */
|
||||
--control-border: var(--line);
|
||||
--control-border-hover: color-mix(in srgb, var(--line-2) 40%, var(--line));
|
||||
--focus-glow: color-mix(in srgb, var(--accent) 22%, transparent);
|
||||
--focus-glow-danger: color-mix(in srgb, var(--danger) 18%, transparent);
|
||||
|
||||
/* 顶栏 68px 条 + 1px 底边；main 桌面 py-9。侧栏 sticky 必须等于
|
||||
栏在 scrollY=0 时的视口 top，否则第一下滚动会先空走一截再吸住 */
|
||||
--header-bar: 68px;
|
||||
@@ -167,6 +173,12 @@
|
||||
--bg-grid-line: rgba(238, 241, 246, 0.045);
|
||||
--bg-grid-size: 28px;
|
||||
|
||||
/* 暗色沿用浅色同款 color-mix 公式（依赖上方已覆写的 --line / --accent 等） */
|
||||
--control-border: var(--line);
|
||||
--control-border-hover: color-mix(in srgb, var(--line-2) 40%, var(--line));
|
||||
--focus-glow: color-mix(in srgb, var(--accent) 22%, transparent);
|
||||
--focus-glow-danger: color-mix(in srgb, var(--danger) 18%, transparent);
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@@ -1341,18 +1353,13 @@ html.j13-has-admin-bg[data-j13-chrome="admin"] body::after {
|
||||
min-width: 0;
|
||||
padding: 8px 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid var(--control-border);
|
||||
background: var(--panel);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.12s ease, box-shadow 0.12s ease;
|
||||
}
|
||||
.j13-deadline-field:last-child {
|
||||
width: 8.75rem;
|
||||
}
|
||||
.j13-deadline-field:focus-within {
|
||||
border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.j13-deadline-field-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1639,26 +1646,20 @@ html.j13-has-admin-bg[data-j13-chrome="admin"] body::after {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid var(--control-border);
|
||||
border-radius: 12px;
|
||||
color: var(--ink);
|
||||
font-size: 15px;
|
||||
font-family: var(--font-sans);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.j13-compose-field::placeholder { color: var(--ink-3); }
|
||||
.j13-compose-field:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.j13-compose-field:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.j13-compose-field-invalid {
|
||||
border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
|
||||
box-shadow: 0 0 0 2px var(--focus-glow-danger);
|
||||
}
|
||||
|
||||
.j13-compose-title {
|
||||
@@ -1697,13 +1698,8 @@ html.j13-has-admin-bg[data-j13-chrome="admin"] body::after {
|
||||
padding: 4px 12px;
|
||||
cursor: text;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid var(--control-border);
|
||||
border-radius: 12px;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.j13-tag-field:focus-within {
|
||||
border-color: var(--accent) !important;
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.j13-tag-field-input,
|
||||
.j13-tag-field-input:focus,
|
||||
@@ -1723,23 +1719,13 @@ html.j13-has-admin-bg[data-j13-chrome="admin"] body::after {
|
||||
min-height: 3.25rem;
|
||||
padding: 8px 10px 8px 8px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid var(--control-border);
|
||||
border-radius: 12px;
|
||||
color: var(--ink);
|
||||
text-align: left;
|
||||
transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.j13-board-trigger:hover:not(:disabled) {
|
||||
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
||||
}
|
||||
.j13-board-trigger:focus { outline: none; }
|
||||
.j13-board-trigger:focus-visible,
|
||||
.j13-board-trigger[aria-expanded="true"] {
|
||||
outline: none !important;
|
||||
border-color: var(--accent) !important;
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.j13-board-trigger:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
@@ -2000,15 +1986,11 @@ html.dark .j13-board-trigger.is-invalid .j13-board-trigger-hint {
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid var(--control-border);
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
}
|
||||
.j13-md-popover-input:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 0;
|
||||
}
|
||||
.j13-md-popover-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
@@ -2327,19 +2309,14 @@ html.dark .j13-board-trigger.is-invalid .j13-board-trigger-hint {
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--line-2);
|
||||
border: 1px solid var(--control-border);
|
||||
background: var(--panel);
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
}
|
||||
.j13-hide-pwd-input:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 0;
|
||||
}
|
||||
.j13-hide-pwd-input.is-invalid {
|
||||
border-color: var(--danger);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 22%, transparent);
|
||||
box-shadow: 0 0 0 2px var(--focus-glow-danger);
|
||||
}
|
||||
.j13-hide-pwd-error {
|
||||
margin: 0;
|
||||
@@ -3361,11 +3338,91 @@ h1, h2, h3, h4 {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 消息侧栏搜索：单层描边，避免外框 + focus-visible 双线 */
|
||||
.j13-chat-search:focus-within {
|
||||
border-color: var(--accent) !important;
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
/* ---------- 文本控件：统一柔边 + 贴边 2px 聚焦（消双层嵌套） ----------
|
||||
未分层，才能压过上方全局 :focus-visible 的 outline-offset。 */
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):focus,
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):focus-visible,
|
||||
textarea:focus,
|
||||
textarea:focus-visible,
|
||||
select:focus,
|
||||
select:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field,
|
||||
.j13-compose-field,
|
||||
.j13-search-field,
|
||||
.j13-md-popover-input,
|
||||
.j13-hide-pwd-input,
|
||||
.j13-tl-field,
|
||||
.j13-tl-urls,
|
||||
.j13-tl-select,
|
||||
.admin-doc-number {
|
||||
border-color: var(--control-border);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
.field:hover:not(:focus):not(:disabled),
|
||||
.j13-compose-field:hover:not(:focus):not(:disabled),
|
||||
.j13-search-field:hover:not(:focus):not(:disabled),
|
||||
.j13-md-popover-input:hover:not(:focus):not(:disabled),
|
||||
.j13-hide-pwd-input:hover:not(:focus):not(:disabled),
|
||||
.j13-tl-field:hover:not(:focus):not(:disabled),
|
||||
.j13-tl-urls:hover:not(:focus):not(:disabled),
|
||||
.j13-tl-select:hover:not(:focus):not(:disabled),
|
||||
.admin-doc-number:hover:not(:focus):not(:disabled) {
|
||||
border-color: var(--control-border-hover);
|
||||
}
|
||||
.field:focus,
|
||||
.j13-compose-field:focus,
|
||||
.j13-search-field:focus,
|
||||
.j13-search-field:focus-visible,
|
||||
.j13-md-popover-input:focus,
|
||||
.j13-hide-pwd-input:focus,
|
||||
.j13-tl-field:focus,
|
||||
.j13-tl-urls:focus,
|
||||
.j13-tl-select:focus,
|
||||
.admin-doc-number:focus {
|
||||
outline: none !important;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px var(--focus-glow);
|
||||
}
|
||||
|
||||
/* 壳层：边框画在父级，内层输入取消描边 */
|
||||
.admin-field-shell,
|
||||
.admin-stepper,
|
||||
.j13-tag-field,
|
||||
.j13-board-trigger,
|
||||
.j13-deadline-field,
|
||||
.j13-chat-search,
|
||||
.j13-chat-composer,
|
||||
.admin-doc-slug {
|
||||
border-color: var(--control-border);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
.admin-field-shell:hover:not(:focus-within),
|
||||
.admin-stepper:hover:not(:focus-within),
|
||||
.j13-tag-field:hover:not(:focus-within),
|
||||
.j13-board-trigger:hover:not(:disabled):not(:focus-visible):not([aria-expanded="true"]),
|
||||
.j13-deadline-field:hover:not(:focus-within),
|
||||
.j13-chat-search:hover:not(:focus-within),
|
||||
.j13-chat-composer:hover:not(:focus-within),
|
||||
.admin-doc-slug:hover:not(:focus-within) {
|
||||
border-color: var(--control-border-hover);
|
||||
}
|
||||
.admin-field-shell:focus-within,
|
||||
.admin-stepper:focus-within,
|
||||
.j13-tag-field:focus-within,
|
||||
.j13-deadline-field:focus-within,
|
||||
.j13-chat-search:focus-within,
|
||||
.j13-chat-composer:focus-within,
|
||||
.admin-doc-slug:focus-within,
|
||||
.j13-board-trigger:focus-visible,
|
||||
.j13-board-trigger[aria-expanded="true"] {
|
||||
outline: none !important;
|
||||
border-color: var(--accent) !important;
|
||||
box-shadow: 0 0 0 2px var(--focus-glow);
|
||||
}
|
||||
|
||||
.j13-chat-search-input,
|
||||
.j13-chat-search-input:focus,
|
||||
.j13-chat-search-input:focus-visible {
|
||||
@@ -3373,11 +3430,6 @@ h1, h2, h3, h4 {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* 聊天输入区：与搜索框同款聚焦态 */
|
||||
.j13-chat-composer:focus-within {
|
||||
border-color: var(--accent) !important;
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.j13-chat-composer-input,
|
||||
.j13-chat-composer-input:focus,
|
||||
.j13-chat-composer-input:focus-visible {
|
||||
@@ -3393,22 +3445,14 @@ h1, h2, h3, h4 {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* 后台输入：与聊天搜索同一套壳层聚焦（未分层，才能压过全局 :focus-visible 双线） */
|
||||
.admin-field-shell,
|
||||
.admin-stepper {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid var(--control-border);
|
||||
border-radius: 12px;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
.admin-field-shell:hover:not(:focus-within),
|
||||
.admin-stepper:hover:not(:focus-within) {
|
||||
border-color: color-mix(in srgb, var(--line-2) 40%, var(--line));
|
||||
}
|
||||
.admin-field-shell:focus-within,
|
||||
.admin-stepper:focus-within {
|
||||
border-color: var(--accent) !important;
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
background: var(--panel);
|
||||
}
|
||||
.admin-field-input,
|
||||
@@ -3431,7 +3475,19 @@ h1, h2, h3, h4 {
|
||||
border-color: var(--danger) !important;
|
||||
}
|
||||
.admin-field-shell.is-invalid:focus-within {
|
||||
box-shadow: 0 0 0 3px var(--danger-soft);
|
||||
box-shadow: 0 0 0 2px var(--focus-glow-danger);
|
||||
}
|
||||
|
||||
/* 顶栏搜索：pill 圆角，聚焦同款贴边细环 */
|
||||
.j13-search-field {
|
||||
width: 100%;
|
||||
border: 1px solid var(--control-border);
|
||||
background: var(--panel);
|
||||
color: var(--ink);
|
||||
}
|
||||
.j13-search-field:focus,
|
||||
.j13-search-field:focus-visible {
|
||||
background: var(--panel);
|
||||
}
|
||||
.j13-chat-composer-mirror {
|
||||
position: absolute;
|
||||
@@ -4847,15 +4903,11 @@ a.j13-mention-token:hover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 2.5rem;
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid var(--control-border);
|
||||
border-radius: 0.7rem;
|
||||
background: var(--panel);
|
||||
overflow: hidden;
|
||||
}
|
||||
.admin-doc-slug:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.admin-doc-slug.is-invalid {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
@@ -4905,17 +4957,12 @@ a.j13-mention-token:hover {
|
||||
width: 7.5rem;
|
||||
height: 2.5rem;
|
||||
padding: 0 0.75rem;
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid var(--control-border);
|
||||
border-radius: 0.7rem;
|
||||
background: var(--panel);
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
}
|
||||
.admin-doc-number:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
.admin-doc-actions {
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -5767,21 +5814,14 @@ a.j13-mention-token:hover {
|
||||
width: 100%;
|
||||
padding: 12px 15px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line-2);
|
||||
border: 1px solid var(--control-border);
|
||||
border-radius: var(--r-sm);
|
||||
color: var(--ink);
|
||||
font-size: 15px;
|
||||
font-family: var(--font-sans);
|
||||
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
|
||||
}
|
||||
/* 占位符不使用 opacity：透明度与底色合成后浅色仅 3.7:1，实色 ink-3 达 5.72:1 */
|
||||
.field::placeholder { color: var(--ink-3); }
|
||||
.field:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3.5px var(--accent-soft);
|
||||
background: var(--panel);
|
||||
}
|
||||
textarea.field {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 15px;
|
||||
@@ -6291,7 +6331,7 @@ a.j13-mention-token:hover {
|
||||
.j13-tl-field,
|
||||
.j13-tl-select {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line-2);
|
||||
border: 1px solid var(--control-border);
|
||||
border-radius: 8px;
|
||||
background: var(--panel);
|
||||
color: var(--ink);
|
||||
@@ -6568,6 +6608,429 @@ a.j13-mention-token:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* 赞助商 logo 网格：悬停 / 聚焦显示赞助说明 */
|
||||
.j13-sponsors-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.j13-sponsor {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
}
|
||||
.j13-sponsor-hit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 76px;
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel-2);
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
.j13-sponsor-hit:hover,
|
||||
.j13-sponsor-hit:focus-visible {
|
||||
border-color: var(--accent);
|
||||
background: var(--panel);
|
||||
}
|
||||
.j13-sponsor-logo {
|
||||
max-width: 100%;
|
||||
max-height: 52px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 自助购买广告位：紧凑单栏卡片，色跟随主题 accent */
|
||||
.j13-ads-card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.j13-ads-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 18px;
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
}
|
||||
.j13-ads-card-head p {
|
||||
opacity: 0.88;
|
||||
}
|
||||
.j13-ads-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
min-height: 40px;
|
||||
padding: 0 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
color: var(--ink);
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
|
||||
}
|
||||
.j13-ads-chip:hover:not(.is-on) {
|
||||
border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
.j13-ads-chip.is-compact {
|
||||
min-height: 36px;
|
||||
padding: 0 4px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.j13-ads-chip.is-on {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 28%, transparent);
|
||||
}
|
||||
.j13-ads-chip:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.j13-ads-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 42px;
|
||||
padding: 0 12px 0 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
}
|
||||
.j13-ads-field:hover {
|
||||
border-color: color-mix(in srgb, var(--line-2) 35%, var(--line));
|
||||
}
|
||||
.j13-ads-field:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--focus-glow);
|
||||
}
|
||||
.j13-ads-field-ico {
|
||||
display: inline-flex;
|
||||
color: var(--ink-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.j13-ads-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.j13-ads-input::placeholder {
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.j13-ads-submit {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1),
|
||||
0 2px 8px color-mix(in srgb, var(--accent) 26%, transparent);
|
||||
transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
|
||||
}
|
||||
.j13-ads-submit:hover:not(:disabled) {
|
||||
background: var(--accent-hi);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(16, 24, 40, 0.1),
|
||||
0 8px 18px color-mix(in srgb, var(--accent) 32%, transparent);
|
||||
}
|
||||
.j13-ads-submit:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.j13-ads-submit:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* 自助推广侧栏占位：空槽可点去购买 */
|
||||
.j13-ad-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
|
||||
background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel));
|
||||
color: var(--ink-3);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.18s ease;
|
||||
}
|
||||
.j13-ad-slot:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
/* 自助推广：图片宽 = 两列文字总宽（248 = 121+6+121） */
|
||||
.j13-ad-promo {
|
||||
width: 248px;
|
||||
max-width: 100%;
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.j13-ad-slot-image {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
max-width: none;
|
||||
margin-inline: 0;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.j13-ad-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
max-width: none;
|
||||
margin-inline: 0;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.j13-ad-image-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin-inline: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
transition: opacity 0.15s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.j13-ad-image-link:hover {
|
||||
opacity: 1;
|
||||
border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
|
||||
box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--accent) 32%, transparent);
|
||||
}
|
||||
.j13-ad-text-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.j13-ad-text-grid > li {
|
||||
min-width: 0;
|
||||
}
|
||||
.j13-ad-slot-text {
|
||||
min-height: 34px;
|
||||
padding: 0 6px;
|
||||
font-size: 11.5px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.j13-ad-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
padding: 8px 0;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
transition: opacity 0.15s ease, transform 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
.j13-ad-text.is-overflow {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.j13-ad-text:hover,
|
||||
.j13-ad-text:focus-visible {
|
||||
opacity: 1;
|
||||
box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--accent) 30%, transparent);
|
||||
}
|
||||
.j13-ad-text:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.j13-ad-text-track {
|
||||
display: inline-flex;
|
||||
}
|
||||
.j13-ad-text-track.is-overflow {
|
||||
width: max-content;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
.j13-ad-text:hover .j13-ad-text-track.is-overflow,
|
||||
.j13-ad-text:focus-visible .j13-ad-text-track.is-overflow {
|
||||
animation: j13-ad-marquee 10s linear infinite;
|
||||
}
|
||||
.j13-ad-text-run {
|
||||
display: inline-block;
|
||||
padding: 0 12px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@keyframes j13-ad-marquee {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.j13-ad-text-track {
|
||||
animation: none;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.j13-ad-text-run[aria-hidden] {
|
||||
display: none;
|
||||
}
|
||||
.j13-ad-text-run {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.j13-ad-image-link:hover,
|
||||
.j13-ad-text:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.j13-ad-slot:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 后台「推广与赞助」工作台 ── */
|
||||
/* 复用站点设置骨架（.admin-settings-*）：左粘性菜单 + 右内容，此处仅补充区块样式 */
|
||||
/* 锚点跳转时为粘性导航留出避让空间，避免遮挡标题 */
|
||||
[data-section] {
|
||||
scroll-margin-top: 64px;
|
||||
}
|
||||
|
||||
/* 申购行：缩略 + 信息 + 操作同一行，操作始终紧邻数据 */
|
||||
.j13-ads-adrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.j13-ads-adrow:hover {
|
||||
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
||||
box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--ink) 18%, transparent);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.j13-ads-adrow {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.j13-ads-adrow > div:last-child {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
.j13-ads-thumb {
|
||||
width: 88px;
|
||||
height: 44px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.j13-ads-thumb img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
/* 编辑器行（时长档位） */
|
||||
.j13-ads-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* 收款码 / 赞助商编辑器：左侧预览 + 右侧字段 */
|
||||
.j13-ads-editor {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: flex-start;
|
||||
padding: 14px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
transition: opacity 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.j13-ads-editor.is-off {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.j13-ads-qrbox {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 10px;
|
||||
transition: border-color 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
.j13-ads-qrbox:hover {
|
||||
border-color: var(--accent);
|
||||
border-style: solid;
|
||||
}
|
||||
.j13-ads-logo {
|
||||
width: 120px;
|
||||
height: 56px;
|
||||
max-width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.j13-ads-editor {
|
||||
flex-direction: column;
|
||||
}
|
||||
.j13-ads-qrbox,
|
||||
.j13-ads-logo {
|
||||
width: 100%;
|
||||
max-width: 140px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 关于本站：右栏底部署录式目录，与内容模块区分开 */
|
||||
.j13-about-lead {
|
||||
margin-top: 8px;
|
||||
@@ -8158,7 +8621,7 @@ html.j13-reduce-chrome .j13-att-card.is-fresh {
|
||||
.ops-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
box-shadow: 0 0 0 2px var(--focus-glow);
|
||||
}
|
||||
.ops-datetime { display: flex; flex-direction: column; gap: 0.35rem; max-width: min(22rem, 100%); }
|
||||
.ops-datetime-input { width: 100%; max-width: 16rem; }
|
||||
|
||||
Reference in New Issue
Block a user