https://9on0wiki.gunmu.dns.navy/index.php?action=history&feed=atom&title=Template%3A%E9%A6%96%E9%A1%B5%2F%E6%AF%8F%E5%91%A8%E7%9B%B4%E6%92%AD%E9%A2%84%E5%91%8A%2Fstyles.css 2026-08-30T01:32:20Z 本wiki上该页面的版本历史 MediaWiki 1.46.0 https://9on0wiki.gunmu.dns.navy/index.php?title=Template:%E9%A6%96%E9%A1%B5/%E6%AF%8F%E5%91%A8%E7%9B%B4%E6%92%AD%E9%A2%84%E5%91%8A/styles.css&diff=838&oldid=prev 2026-08-29T15:17:44Z

<p>&quot;直播预告子卡片设计&quot;</p> <p><b>新页面</b></p><div>/* ==========================================================================<br /> 首页/每周直播预告（Template:首页/每周直播预告/styles.css）<br /> 数据源：久远澪:直播周表/Data<br /> 设计：<br /> - 每个日期一个独立卡片块（非表格行）<br /> - date 为标题栏，content 为内容<br /> - time 为左下角角标<br /> - note 为悬停悬浮展示<br /> - 周一到周四用主题色（绿），周五到周日用强调色（橙）<br /> 颜色全部引用 common.css 变量，自动适配深浅色模式。<br /> ========================================================================== */<br /> <br /> /* 块容器：flex 换行，窄列下每行 3 块 */<br /> .ws-wrap {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 6px;<br /> margin-top: 4px;<br /> }<br /> <br /> /* 空数据提示 */<br /> .ws-empty {<br /> margin: 2px 0 6px;<br /> color: var(--color-text-sub);<br /> font-size: 0.92em;<br /> line-height: 1.7;<br /> }<br /> <br /> /* 单日卡片块 */<br /> .ws-day {<br /> position: relative;<br /> flex: 1 1 30%;<br /> min-width: 80px;<br /> max-width: calc(33.333% - 4px);<br /> box-sizing: border-box;<br /> border: 1px solid var(--color-primary-light);<br /> border-radius: 8px;<br /> background: linear-gradient(168deg,<br /> var(--color-theme-soft) 0%,<br /> var(--color-theme) 100%);<br /> box-shadow: 0 1px 3px rgb(var(--color-primary-r-light, 143) var(--color-primary-g-light, 188) var(--color-primary-b-light, 143) / 0.25);<br /> transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);<br /> padding-bottom: 18px;<br /> }<br /> <br /> .ws-day:hover {<br /> transform: translateY(-3px);<br /> border: 1px solid var(--color-primary);<br /> box-shadow: 0 4px 14px rgb(var(--color-primary-r-light, 143) var(--color-primary-g-light, 188) var(--color-primary-b-light, 143) / 0.4);<br /> z-index: 4;<br /> }<br /> <br /> /* 标题栏：date */<br /> .ws-head {<br /> display: flex;<br /> align-items: center;<br /> justify-content: space-between;<br /> gap: 4px;<br /> padding: 4px 7px;<br /> border-radius: 7px 7px 0 0;<br /> border-bottom: 1px solid var(--color-primary-light);<br /> background: linear-gradient(90deg,<br /> var(--color-theme-deep) 0%,<br /> var(--color-theme) 100%);<br /> color: var(--color-primary-deep);<br /> font-size: 0.82em;<br /> font-weight: 700;<br /> letter-spacing: 0.02em;<br /> }<br /> <br /> .ws-date {<br /> flex-shrink: 0;<br /> }<br /> <br /> /* 星期徽标：贴右上角，悬停/常规均有色块区分 */<br /> .ws-weekday {<br /> position: absolute;<br /> top: -7px;<br /> right: 4px;<br /> z-index: 3;<br /> padding: 1px 6px;<br /> border-radius: 999px;<br /> border: 1px solid var(--color-primary-light);<br /> font-size: 0.64em;<br /> font-weight: 700;<br /> box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);<br /> }<br /> <br /> /* 周一到周四：主题色（绿） */<br /> .ws-d1 .ws-weekday,<br /> .ws-d2 .ws-weekday,<br /> .ws-d3 .ws-weekday,<br /> .ws-d4 .ws-weekday {<br /> background: var(--color-theme-deep);<br /> color: var(--color-primary-deep);<br /> }<br /> <br /> /* 周五到周日：强调色（橙） */<br /> .ws-d5 .ws-weekday,<br /> .ws-d6 .ws-weekday,<br /> .ws-d7 .ws-weekday {<br /> background: var(--color-accent-bg);<br /> color: var(--color-accent-deep);<br /> border: 1px solid var(--color-accent-border);<br /> }<br /> <br /> /* 内容区 */<br /> .ws-body {<br /> position: relative;<br /> z-index: 1;<br /> padding: 7px 6px 2px;<br /> text-align: center;<br /> font-size: 0.85em;<br /> font-weight: 600;<br /> color: var(--color-text);<br /> line-height: 1.5;<br /> }<br /> <br /> /* 时间角标：左下角 */<br /> .ws-time {<br /> position: absolute;<br /> left: 6px;<br /> bottom: 4px;<br /> z-index: 2;<br /> padding: 1px 5px;<br /> border-radius: 999px;<br /> border: 1px solid var(--color-primary-light);<br /> background: var(--color-bg-subtle);<br /> color: var(--color-primary-deep);<br /> font-size: 0.66em;<br /> font-weight: 700;<br /> }<br /> <br /> /* 备注：悬停悬浮展示（浮于块上方） */<br /> .ws-note {<br /> position: absolute;<br /> bottom: calc(100% + 6px);<br /> left: 50%;<br /> transform: translateX(-50%);<br /> z-index: 5;<br /> max-width: 180px;<br /> padding: 4px 9px;<br /> border-radius: 8px;<br /> border: 1px solid var(--color-primary-light);<br /> background: var(--color-theme-deep);<br /> color: var(--color-text);<br /> font-size: 0.76em;<br /> font-weight: 500;<br /> line-height: 1.4;<br /> text-align: center;<br /> white-space: nowrap;<br /> box-shadow: 0 4px 14px rgb(var(--color-primary-r-light, 143) var(--color-primary-g-light, 188) var(--color-primary-b-light, 143) / 0.35);<br /> opacity: 0;<br /> visibility: hidden;<br /> transition: opacity 0.25s ease, visibility 0.25s ease;<br /> }<br /> <br /> .ws-note::after {<br /> content: &quot;&quot;;<br /> position: absolute;<br /> top: 100%;<br /> left: 50%;<br /> transform: translateX(-50%);<br /> border: 5px solid transparent;<br /> border-top-color: var(--color-theme-deep);<br /> }<br /> <br /> .ws-day:hover .ws-note {<br /> opacity: 1;<br /> visibility: visible;<br /> }<br /> <br /> /* 底部关注链接 */<br /> .ws-footer {<br /> margin-top: 10px;<br /> text-align: right;<br /> font-size: 0.85em;<br /> color: var(--color-primary-deep);<br /> opacity: 0.75;<br /> transition: opacity 0.3s ease;<br /> }<br /> <br /> .ws-wrap:hover ~ .ws-footer,<br /> .ws-footer:hover {<br /> opacity: 1;<br /> }</div>

DoubleCircle