/*
* === Obsidian Slides Vertical Screen FIX v5.0 (Definitive) ===
* 1. [已修复] 修复竖屏下幻灯片强制居中问题。
* 2. [已修复] 修复内容从中间开始,顶部不可见的问题。
* 3. [新] 强制清除JS施加的 transform 偏移,确保内容从顶部开始。
*/
/* ================================================================== */
/* SECTION 1: 核心修复 - 只在竖屏模式下生效 */
/* ================================================================== */
@media (orientation: portrait) {
/* 目标:被JS脚本动态居中的 .slides “舞台”容器 */
body:has(.reveal) .reveal .slides {
/* [关键修复] 强制清除 JS 添加的 transform 偏移!*/
transform: none !important;
/* 用 top 定位,取代 transform 来进行垂直定位 */
top: 2vh !important; /* 距离屏幕顶部留出一点(2%)空隙 */
/* 重置其他可能影响定位的属性 */
margin: 0 auto !important; /* 垂直margin清零,水平居中 */
left: 0 !important;
right: 0 !important;
}
}
/* ================================================================== */
/* SECTION 2: 滚动区布局 (使用最稳妥的设定) */
/* ================================================================== */
body:has(.reveal) .reveal .slides section {
/* 使用绝对值高度,确保布局稳定 */
height: 95vh !important; /* 你可以微调,比如 94vh, 96vh */
/* 允许垂直滚动 */
overflow-y: auto !important;
overflow-x: hidden !important;
/* 内边距 */
padding: 30px 50px !important;
box-sizing: border-box !important; /* 确保内边距不会撑大容器 */
}
/* ================================================================== */
/* SECTION 3: 样式和美化 (保持不变) */
/* ================================================================== */
/* 字体大小 */
body:has(.reveal) .reveal .slides section {
font-size: 0.8em;
}
body:has(.reveal) .reveal .slides section h1 {
font-size: 1.8em;
margin-bottom: 0.5em;
}
body:has(.reveal) .reveal .slides section h2 {
font-size: 1.4em;
margin-bottom: 0.4em;
}
/* 美化滚动条 */
body:has(.reveal) .reveal .slides section::-webkit-scrollbar {
width: 8px;
}
body:has(.reveal) .reveal .slides section::-webkit-scrollbar-track {
background: transparent;
}
body:has(.reveal) .reveal .slides section::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 4px;
}
body:has(.reveal) .reveal .slides section::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
点设置-外观-自定义css-文件夹图标 然后把这个css放进去开启即可
