492 lines
8.9 KiB
CSS
492 lines
8.9 KiB
CSS
|
|
|
|
.quarto-title-author-name {
|
|
font-size: var(--r-heading3-size);
|
|
/* color: var(--r-heading-color); */
|
|
}
|
|
|
|
.quarto-title-affiliation {
|
|
font-size: 1.2em;
|
|
/* color: var(--r-heading-color); */
|
|
}
|
|
|
|
.reveal .quarto-title-block .quarto-title-authors .quarto-title-author .quarto-title-affiliation {
|
|
font-size: 1.2em;
|
|
/* color: var(--r-heading-color); */
|
|
margin-top: 0px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
|
|
section#title-slide p.date {
|
|
font-size: 1.2em;
|
|
/* font-size: var(--r-heading3-size); */
|
|
}
|
|
|
|
section#title-slide h1.title {
|
|
position: relative;
|
|
padding-bottom: 30px; /* 留空间（可调整） */
|
|
}
|
|
|
|
/* 长细线 —— 在上 */
|
|
section#title-slide h1.title::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0px; /* 粗线的高度，让两条底对齐 */
|
|
width: 360px;
|
|
height: 1px;
|
|
background-color: var(--r-heading-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 短粗线 —— 在下 */
|
|
section#title-slide h1.title::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0; /* 底边紧贴标题的“底部参考线” */
|
|
width: 60px;
|
|
height: 3px;
|
|
background-color: var(--r-heading-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
|
|
section#title-slide p.subtitle {
|
|
font-size: var(--r-heading2-size);
|
|
/* text-decoration: underline; */
|
|
color: var(--r-heading-color);
|
|
}
|
|
|
|
section#title-slide a {
|
|
color: var(--r-link-color);
|
|
}
|
|
|
|
.reveal .slide-number a {
|
|
color: #bbbbbb;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
section#title-slide a:hover {
|
|
color: var(--r-link-color-hover);
|
|
}
|
|
|
|
.reveal[data-navigation-mode="linear"] .title-slide h1 {
|
|
font-size: var(--r-heading2-size);
|
|
}
|
|
|
|
/* 最后的TOC不显示 */
|
|
#TOC ul li:last-child {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
/* 1) 让 TOC section 成为一个居中列容器（垂直方向可调） */
|
|
section#TOC {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* 水平居中子内容（h2 与 ul 的容器） */
|
|
justify-content: flex-start;/* 若想垂直居中用 'center' */
|
|
padding-top: 6vh; /* 页面顶部留白，可按需调整 */
|
|
box-sizing: border-box;
|
|
height: 100%; /* 保证填满 slide 区域，方便垂直定位 */
|
|
text-align: center; /* 默认居中（标题） */
|
|
}
|
|
|
|
/* 2) 标题样式 - 宽度随内容自适应并居中 */
|
|
section#TOC h2 {
|
|
display: inline-block; /* 宽度随文本 */
|
|
margin: 0 0 18px 0; /* 标题与下面线/正文的距离（可调） */
|
|
position: relative;
|
|
padding-bottom: 0; /* 不要多余的内边距 */
|
|
line-height: 1.1;
|
|
}
|
|
|
|
section#TOC h2:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
margin-top: 8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 360px;
|
|
height: 1px;
|
|
background-color: var(--r-heading-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 粗短线 */
|
|
section#TOC h2:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
margin-top: 5px; /* 调整这两个 margin 差值可控制细/粗线相对位置 */
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60px;
|
|
height: 3px;
|
|
background-color: var(--r-heading-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
|
|
|
|
/* 3) 将 nav 内部内容限制到中间 60% 宽度区域并水平居中 */
|
|
section#TOC nav {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* 把 ul 的容器居中 */
|
|
}
|
|
|
|
/* 4) 列表限制为中间 60% 区域，内容左对齐 */
|
|
|
|
/* 默认/英文样式 */
|
|
section#TOC ul,
|
|
section#TOC ol {
|
|
width: 50%;
|
|
max-width: 760px;
|
|
min-width: 280px;
|
|
margin: 0;
|
|
padding-left: 1.0em;
|
|
text-align: left;
|
|
list-style-position: inside;
|
|
list-style-type: decimal; /* 英文默认使用数字 */
|
|
box-sizing: border-box;
|
|
line-height: 2.6em;
|
|
}
|
|
|
|
/* 中文样式 */
|
|
section#TOC[lang|="zh"] ul,
|
|
section#TOC[lang|="zh"] ol,
|
|
html[lang|="zh"] section#TOC ul,
|
|
html[lang|="zh"] section#TOC ol {
|
|
list-style-type: cjk-ideographic;
|
|
padding-left: 1.2em; /* 中文可能需要稍大缩进 */
|
|
}
|
|
|
|
|
|
/* 5) 单项样式（覆盖你之前重复的规则，确保优先级） */
|
|
section#TOC ul li,
|
|
section#TOC ol li {
|
|
font-size: var(--r-heading3-size);
|
|
color: var(--r-heading-color);
|
|
font-weight: bold;
|
|
margin: .35em 0;
|
|
word-break: break-word;
|
|
}
|
|
|
|
|
|
/* 链接配色 */
|
|
section#TOC a {
|
|
color: var(--r-heading-color);
|
|
text-decoration: none;
|
|
}
|
|
section#TOC a:hover {
|
|
color: var(--r-link-color-hover);
|
|
text-decoration: underline;
|
|
/* font-size: var(--r-heading3-size); */
|
|
}
|
|
|
|
/* 6) 响应式微调（小屏幕时让列表宽度更宽占比） */
|
|
@media (max-width: 900px) {
|
|
section#TOC ul,
|
|
section#TOC ol {
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
|
|
.reveal .title-slide h1 {
|
|
text-align: center;
|
|
line-height: var(--r-heading-line-height);
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* 细长线 */
|
|
.reveal .title-slide h1:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
margin-top: 8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 360px;
|
|
height: 1px;
|
|
background-color: var(--r-heading-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 粗短线 */
|
|
.reveal .title-slide h1:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
margin-top: 5px; /* 调整这两个 margin 差值可控制细/粗线相对位置 */
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60px;
|
|
height: 3px;
|
|
background-color: var(--r-heading-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
|
|
|
|
.reveal h2 {
|
|
text-align: left;
|
|
margin-top: 0px;
|
|
line-height: var(--r-heading-line-height);
|
|
width: auto;
|
|
position: relative; /* 关键：建立相对定位容器 */
|
|
display: inline-block; /* 让h2宽度自适应内容 */
|
|
}
|
|
|
|
.reveal h2:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; /* 跟随h2的左对齐 */
|
|
top: 100%;
|
|
margin-top: 8px;
|
|
width: 360px;
|
|
height: 1px;
|
|
background-color: var(--r-heading-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.reveal h2:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; /* 跟随h2的左对齐 */
|
|
top: 100%;
|
|
margin-top: 5px;
|
|
width: 60px;
|
|
height: 3px;
|
|
background-color: var(--r-heading-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
|
|
.reveal ul {
|
|
list-style-type: circle;
|
|
}
|
|
|
|
li:hover {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.reveal p:hover {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.reveal ul li {
|
|
line-height: 1.2em;
|
|
}
|
|
|
|
.reveal .thank h2 {
|
|
font-size: var(--r-heading1-size);
|
|
line-height: var(--r-heading-line-height);
|
|
}
|
|
|
|
.reveal .thank {
|
|
text-align: center;
|
|
}
|
|
|
|
.reveal .thank h2:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0px; /* 粗线的高度，让两条底对齐 */
|
|
width: 360px;
|
|
height: 1px;
|
|
background-color: var(--r-heading-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 短粗线 —— 在下 */
|
|
.reveal .thank h2:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0; /* 底边紧贴标题的“底部参考线” */
|
|
width: 60px;
|
|
height: 3px;
|
|
background-color: var(--r-heading-color);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
|
|
|
|
.panel-tabset [role="tab"] {
|
|
border-bottom: 1px solid red;
|
|
}
|
|
|
|
.panel-tabset [role="tab"][aria-selected="true"] {
|
|
background-color: #ffdddd;
|
|
border-bottom: 1px solid red;
|
|
}
|
|
|
|
.white {
|
|
color: #ffffff;
|
|
}
|
|
.orange {
|
|
color: #e09a25;
|
|
}
|
|
.green {
|
|
color: #006e51;
|
|
}
|
|
.pink {
|
|
color: #d13076;
|
|
}
|
|
|
|
.dusty {
|
|
color: #ad5d5d;
|
|
}
|
|
|
|
.flame {
|
|
color: #ef562d;
|
|
}
|
|
.kale {
|
|
color: #5c7148;
|
|
}
|
|
.blue {
|
|
color: #0c4c8a;
|
|
}
|
|
.red {
|
|
color: #b93a32;
|
|
}
|
|
.clay {
|
|
color: #9e4624;
|
|
}
|
|
.bodacious {
|
|
color: #b76ba3;
|
|
}
|
|
.serenity {
|
|
color: #91a8d0;
|
|
}
|
|
|
|
.cognac {
|
|
color: #60413c;
|
|
}
|
|
.sangria {
|
|
color: #760030;
|
|
}
|
|
|
|
.alumium {
|
|
color: #75796a;
|
|
}
|
|
|
|
.marsala {
|
|
color: #964f4c;
|
|
}
|
|
.purple {
|
|
color: #702fa8;
|
|
}
|
|
|
|
.blank {
|
|
background-color: "Yellow";
|
|
width: 100%;
|
|
color: red;
|
|
}
|
|
|
|
.reveal .slide aside {
|
|
position: absolute;
|
|
margin: 0 auto;
|
|
left: 2%;
|
|
font-size: 0.7em;
|
|
text-align: end;
|
|
max-width: 90%;
|
|
width: fit-content;
|
|
color: gray;
|
|
bottom: -6%;
|
|
}
|
|
|
|
.ref {
|
|
position: absolute;
|
|
margin: 0 auto;
|
|
right: 2%;
|
|
font-size: 1em;
|
|
text-align: end;
|
|
max-width: 90%;
|
|
width: fit-content;
|
|
color: gray;
|
|
bottom: -6%;
|
|
}
|
|
|
|
.con {
|
|
position: absolute;
|
|
margin: 0 auto;
|
|
font-size: 1.4em;
|
|
text-align: center;
|
|
font-family: inherit;
|
|
max-width: 100%;
|
|
width: fit-content;
|
|
color: #023047;
|
|
bottom: -2%;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.tiny {
|
|
font-size: 60%;
|
|
}
|
|
|
|
figure > figcaption {
|
|
margin-top: -0.5em;
|
|
}
|
|
|
|
.reveal .slide figure > figcaption,
|
|
.reveal .slide img.stretch + p.caption,
|
|
.reveal .slide img.r-stretch + p.caption {
|
|
font-size: 0.9em;
|
|
text-align: center;
|
|
}
|
|
|
|
.reveal strong, .reveal b {
|
|
font-weight: bold;
|
|
color: crimson;
|
|
}
|
|
|
|
.reveal pre code {
|
|
background-color: #554433;
|
|
line-height: 1.2em;
|
|
color: #fff;
|
|
/* font-size: x-large; */
|
|
}
|
|
|
|
.reveal pre code:hover{
|
|
font-size: x-large;
|
|
line-height: 120%;
|
|
}
|
|
|
|
.reveal div.sourceCode pre code {
|
|
background-color: #eeeeff;
|
|
min-height: 100%;
|
|
/* font-size: x-large; */
|
|
}
|
|
|
|
.reveal div.sourceCode pre code:hover {
|
|
font-size: x-large;
|
|
}
|
|
|
|
.reveal ol, .reveal dl, .reveal ul {
|
|
display: block;
|
|
text-align: left;
|
|
margin: 0 0 0 1em;
|
|
}
|
|
|
|
div.column {
|
|
display: contents;
|
|
overflow-x: initial;
|
|
vertical-align: top;
|
|
width: 50%;
|
|
}
|