196 lines
3.9 KiB
SCSS
196 lines
3.9 KiB
SCSS
// Author: Sivan [sun.sivan@gmail.com]
|
|
// Description: inline element styles.
|
|
@import "variables";
|
|
|
|
@mixin hetiInline {
|
|
a {
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
padding-block-end: 1px;
|
|
border-block-end: 1px solid currentColor;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
abbr[title] {
|
|
padding-block-end: 1px;
|
|
border-block-end: 1px dotted;
|
|
text-decoration: none;
|
|
cursor: help;
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
code {
|
|
margin-inline-start: 0.25em;
|
|
margin-inline-end: 0.25em;
|
|
font-family: $font-family-mono;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
dfn {
|
|
font-weight: $font-weight-bold;
|
|
|
|
// 非中文时不加粗
|
|
@include non-cjk-block {
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
}
|
|
|
|
em {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
// 标题单行时居中，多行时居左
|
|
figcaption {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
font-size: $font-size-small;
|
|
text-align: start;
|
|
}
|
|
|
|
// 显式斜体标签予以保留
|
|
i {
|
|
font-style: italic;
|
|
}
|
|
|
|
ins,
|
|
u {
|
|
padding-block-end: 1px;
|
|
border-block-end: 1px solid;
|
|
text-decoration: none;
|
|
}
|
|
|
|
mark {
|
|
padding-block-start: 2px;
|
|
padding-block-end: 2px;
|
|
padding-inline-start: 1px;
|
|
padding-inline-end: 1px;
|
|
margin-inline-start: 1px;
|
|
margin-inline-end: 1px;
|
|
background-color: hsla(58, 100%, 50%, 0.88);
|
|
color: inherit;
|
|
|
|
@include darkmode-style {
|
|
background-color: hsla(58, 100%, 15%, 0.88);
|
|
}
|
|
}
|
|
|
|
// 设置引用文本为中文引号
|
|
// 默认无论简繁都采用台湾规范，修改只需重新定义变量 `$chinese-quote-set` 即可。
|
|
q {
|
|
quotes: map-get(map-get($chinese-quote-presets, $chinese-quote-set), "horizontal");
|
|
|
|
@include non-cjk-block {
|
|
quotes: initial;
|
|
quotes: auto;
|
|
}
|
|
}
|
|
|
|
rt {
|
|
font-size: 0.875em;
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
|
|
// 完美 <small> 字号 by Sivan
|
|
/// 12px * 0.875 => 11px
|
|
/// 14px * 0.875 => 12px
|
|
/// 16px * 0.875 => 14px
|
|
/// 18px * 0.875 => 16px
|
|
/// 20px * 0.875 => 18px
|
|
small {
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
strong {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
position: relative;
|
|
margin-inline-start: 0.25em;
|
|
margin-inline-end: 0.25em;
|
|
font-size: 0.75em;
|
|
font-family: $font-family-hei;
|
|
font-style: normal;
|
|
line-height: 1;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
|
|
&:target,
|
|
a:target {
|
|
background-color: hsl(210, 100%, 93%);
|
|
|
|
@include darkmode-style {
|
|
background-color: hsl(210, 40%, 38%);
|
|
}
|
|
}
|
|
}
|
|
|
|
summary {
|
|
padding-inline-start: 1em;
|
|
outline: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
summary::-webkit-details-marker {
|
|
width: 0.6em;
|
|
margin-inline-end: 0.4em;
|
|
}
|
|
|
|
u[title] {
|
|
cursor: help;
|
|
border-block-end-width: 3px;
|
|
border-block-end-style: double;
|
|
border-block-end-color: hsla(0, 0%, 0%, 0.54);
|
|
|
|
@include darkmode-style {
|
|
border-block-end-color: hsla(0, 0%, 100%, 0.54);
|
|
}
|
|
}
|
|
|
|
// 默认禁用中文斜体 https://www.zhihu.com/question/20120243
|
|
address,
|
|
cite,
|
|
dfn,
|
|
dt,
|
|
em {
|
|
font-style: normal;
|
|
|
|
// 非中文时显示斜体
|
|
@include non-cjk-block {
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
// 为带划线的元素添加间距，以防止视觉上混为一个元素
|
|
// 注: 如果设成为两个相连元素添加间距，会有一个问题：
|
|
// 如果结构是 `<u>倚天</u>和<u>屠龙</u>`，「屠龙」前面仍然会有边距。
|
|
// 此处跟预期不一致，应该只在两个同名元素紧邻时增加边距，即：`<u>倚天剑</u><u>屠龙刀</u>`
|
|
//@each $tag in (abbr[title], del, ins, s, u) {
|
|
// #{$tag} + #{$tag} {
|
|
// margin-inline-start: 0.125em;
|
|
// }
|
|
//}
|
|
// 因此采用下面的形式，为所有加划线的元素增加缝隙
|
|
abbr[title],
|
|
del,
|
|
ins,
|
|
s,
|
|
u {
|
|
margin-inline-start: 1px;
|
|
margin-inline-end: 1px;
|
|
}
|
|
}
|