查看“︁Template:首页/每周直播预告/styles.css”︁的源代码

/* ==========================================================================
   首页/每周直播预告（Template:首页/每周直播预告/styles.css）
   数据源：久远澪:直播周表/Data
   设计：
   - 每个日期一个独立卡片块（非表格行）
   - date 为标题栏，content 为内容
   - time 为左下角角标
   - note 为悬停悬浮展示
   - 周一到周四用主题色（绿），周五到周日用强调色（橙）
   颜色全部引用 common.css 变量，自动适配深浅色模式。
   ========================================================================== */

/* 块容器：flex 换行，窄列下每行 3 块 */
.ws-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

/* 空数据提示 */
.ws-empty {
	margin: 2px 0 6px;
	color: var(--color-text-sub);
	font-size: 0.92em;
	line-height: 1.7;
}

/* 单日卡片块 */
.ws-day {
	position: relative;
	flex: 1 1 30%;
	min-width: 80px;
	max-width: calc(33.333% - 4px);
	box-sizing: border-box;
	border: 1px solid var(--color-primary-light);
	border-radius: 8px;
	background: linear-gradient(168deg,
		var(--color-theme-soft) 0%,
		var(--color-theme) 100%);
	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);
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	padding-bottom: 18px;
}

.ws-day:hover {
	transform: translateY(-3px);
	border: 1px solid var(--color-primary);
	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);
	z-index: 4;
}

/* 标题栏：date */
.ws-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	padding: 4px 7px;
	border-radius: 7px 7px 0 0;
	border-bottom: 1px solid var(--color-primary-light);
	background: linear-gradient(90deg,
		var(--color-theme-deep) 0%,
		var(--color-theme) 100%);
	color: var(--color-primary-deep);
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ws-date {
	flex-shrink: 0;
}

/* 星期徽标：贴右上角，悬停/常规均有色块区分 */
.ws-weekday {
	position: absolute;
	top: -7px;
	right: 4px;
	z-index: 3;
	padding: 1px 6px;
	border-radius: 999px;
	border: 1px solid var(--color-primary-light);
	font-size: 0.64em;
	font-weight: 700;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
}

/* 周一到周四：主题色（绿） */
.ws-d1 .ws-weekday,
.ws-d2 .ws-weekday,
.ws-d3 .ws-weekday,
.ws-d4 .ws-weekday {
	background: var(--color-theme-deep);
	color: var(--color-primary-deep);
}

/* 周五到周日：强调色（橙） */
.ws-d5 .ws-weekday,
.ws-d6 .ws-weekday,
.ws-d7 .ws-weekday {
	background: var(--color-accent-bg);
	color: var(--color-accent-deep);
	border: 1px solid var(--color-accent-border);
}

/* 内容区 */
.ws-body {
	position: relative;
	z-index: 1;
	padding: 7px 6px 2px;
	text-align: center;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.5;
}

/* 时间角标：左下角 */
.ws-time {
	position: absolute;
	left: 6px;
	bottom: 4px;
	z-index: 2;
	padding: 1px 5px;
	border-radius: 999px;
	border: 1px solid var(--color-primary-light);
	background: var(--color-bg-subtle);
	color: var(--color-primary-deep);
	font-size: 0.66em;
	font-weight: 700;
}

/* 备注：悬停悬浮展示（浮于块上方） */
.ws-note {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	max-width: 180px;
	padding: 4px 9px;
	border-radius: 8px;
	border: 1px solid var(--color-primary-light);
	background: var(--color-theme-deep);
	color: var(--color-text);
	font-size: 0.76em;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	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);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ws-note::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--color-theme-deep);
}

.ws-day:hover .ws-note {
	opacity: 1;
	visibility: visible;
}

/* 底部关注链接 */
.ws-footer {
	margin-top: 10px;
	text-align: right;
	font-size: 0.85em;
	color: var(--color-primary-deep);
	opacity: 0.75;
	transition: opacity 0.3s ease;
}

.ws-wrap:hover ~ .ws-footer,
.ws-footer:hover {
	opacity: 1;
}