mirror of https://github.com/IoTcat/kayo.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
2.8 KiB
166 lines
2.8 KiB
code, pre { |
|
padding: 7px; |
|
font-size: $code-font-size; |
|
font-family: $code-font-family; |
|
background: $code-background; |
|
} |
|
|
|
code { |
|
padding: 3px 5px; |
|
border-radius: 4px; |
|
color: $code-color; |
|
} |
|
|
|
.highlight { |
|
margin: 1em 0; |
|
border-radius: 5px; |
|
overflow-x: auto; |
|
box-shadow: 1px 1px 2px rgba(0,0,0,0.125); |
|
position: relative; |
|
|
|
table { |
|
position: relative; |
|
max-width: none; |
|
|
|
&::after { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
left: 0; |
|
padding: 2px 7px; |
|
font-size: $code-font-size; |
|
font-weight: bold; |
|
color: darken($gray, 10%); |
|
background: darken($code-background, 3%); |
|
content: 'Code'; |
|
} |
|
} |
|
|
|
@each $sign, $text in $code-type-list { |
|
&.#{$sign} > table::after { |
|
content: $text; |
|
} |
|
|
|
&.#{$sign} > figcaption > span::after { |
|
content: ' · ' + $text; |
|
} |
|
|
|
&.#{$sign} figcaption + table { |
|
&::after { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
figcaption { |
|
position: absolute; |
|
top: 0; |
|
width: 100%; |
|
padding: 2px 7px; |
|
font-size: $code-font-size; |
|
font-weight: bold; |
|
color: darken($gray, 10%); |
|
background: darken($code-background, 3%); |
|
z-index: 20; |
|
overflow-x: hidden; |
|
box-sizing: border-box; |
|
|
|
& > a { |
|
position: absolute; |
|
right: 0; |
|
display: inline-box; |
|
margin-right: 7px; |
|
font-weight: 400; |
|
|
|
&:hover { |
|
text-decoration: none; |
|
border: 0; |
|
} |
|
} |
|
} |
|
|
|
.code { |
|
pre { |
|
margin: 0; |
|
padding: 30px 10px 10px; |
|
} |
|
} |
|
|
|
.gutter { |
|
width: 10px; |
|
color: $gray; |
|
|
|
pre { |
|
margin: 0; |
|
padding: 30px 7px 10px; |
|
} |
|
} |
|
|
|
.line { |
|
// Fix code block null line height and |
|
// Synchronous gutter and code line highly. |
|
height: round($code-font-size * 1.5); |
|
} |
|
|
|
table, tr, td { |
|
margin: 0; |
|
padding: 0; |
|
width: 100%; |
|
border-collapse: collapse; |
|
} |
|
|
|
.code { |
|
.comment, |
|
.quote { |
|
color: map-get($code-highlight-color, comment); |
|
} |
|
|
|
.keyword, |
|
.selector-tag, |
|
.addition { |
|
color: map-get($code-highlight-color, keyword); |
|
} |
|
|
|
.number, |
|
.string, |
|
.meta .meta-string, |
|
.literal, |
|
.doctag, |
|
.regexp { |
|
color: map-get($code-highlight-color, number); |
|
} |
|
|
|
.title, |
|
.section, |
|
.name, |
|
.selector-id, |
|
.selector-class { |
|
color: map-get($code-highlight-color, title); |
|
} |
|
|
|
.attribute, |
|
.attr, |
|
.variable, |
|
.template-variable, |
|
.class .title, |
|
.type { |
|
color: map-get($code-highlight-color, attribute); |
|
} |
|
|
|
.symbol, |
|
.bullet, |
|
.subst, |
|
.meta, |
|
.meta .keyword, |
|
.selector-attr, |
|
.selector-pseudo, |
|
.link { |
|
color: map-get($code-highlight-color, symbol); |
|
} |
|
|
|
.built_in, |
|
.deletion { |
|
color: map-get($code-highlight-color, built_in); |
|
} |
|
} |
|
}
|
|
|