mirror of
https://github.com/dillonzq/LoveIt.git
synced 2024-11-14 02:46:16 +01:00
fix(typeit): typeit code highlight (#284)
This commit is contained in:
parent
f6f7d91127
commit
56026f934d
5 changed files with 118 additions and 115 deletions
|
@ -54,135 +54,138 @@ code, pre, .highlight table, .highlight tr, .highlight td {
|
|||
}
|
||||
}
|
||||
|
||||
.highlight > .chroma {
|
||||
position: relative;
|
||||
.highlight {
|
||||
line-height: 1.4em;
|
||||
margin: .5rem 0;
|
||||
|
||||
.code-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-family: $global-font-family;
|
||||
font-weight: bold;
|
||||
color: $code-info-color;
|
||||
background: darken($code-background-color, 8%);
|
||||
> .chroma {
|
||||
position: relative;
|
||||
|
||||
[theme=dark] & {
|
||||
color: $code-info-color-dark;
|
||||
background: darken($code-background-color-dark, 6%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-title {
|
||||
.code-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-family: $global-font-family;
|
||||
font-weight: bold;
|
||||
color: $code-info-color;
|
||||
background: darken($code-background-color, 8%);
|
||||
|
||||
[theme=dark] & {
|
||||
color: $code-info-color-dark;
|
||||
background: darken($code-background-color-dark, 6%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-title {
|
||||
width: 100%;
|
||||
padding: .4rem;
|
||||
}
|
||||
|
||||
.code-title::after {
|
||||
padding-left: .2rem;
|
||||
content: 'Code';
|
||||
}
|
||||
|
||||
@each $type, $text in $code-type-map {
|
||||
&.#{$type} .code-title::after {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lntd:first-child {
|
||||
min-width: 1.6rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.lntd:last-child {
|
||||
width: 100%;
|
||||
|
||||
pre {
|
||||
@include max-content(min-width);
|
||||
}
|
||||
}
|
||||
|
||||
.ln {
|
||||
padding-right: .75rem;
|
||||
}
|
||||
|
||||
.hl {
|
||||
display: block;
|
||||
background-color: darken($code-background-color, 10%);
|
||||
|
||||
[theme=dark] & {
|
||||
background-color: darken($code-background-color-dark, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.ln, .lnt {
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
[theme=dark] & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
padding: 0 .2rem;
|
||||
@include transition(transform 0.2s ease);
|
||||
}
|
||||
|
||||
.ellipses {
|
||||
padding: .4rem;
|
||||
}
|
||||
|
||||
.code-title::after {
|
||||
padding-left: .2rem;
|
||||
content: 'Code';
|
||||
}
|
||||
.copy {
|
||||
display: none;
|
||||
padding: .4rem;
|
||||
|
||||
@each $type, $text in $code-type-map {
|
||||
&.#{$type} .code-title::after {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $global-link-hover-color;
|
||||
|
||||
.lntd:first-child {
|
||||
min-width: 1.6rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.lntd:last-child {
|
||||
width: 100%;
|
||||
|
||||
pre {
|
||||
@include max-content(min-width);
|
||||
}
|
||||
}
|
||||
|
||||
.ln {
|
||||
padding-right: .75rem;
|
||||
}
|
||||
|
||||
.hl {
|
||||
display: block;
|
||||
background-color: darken($code-background-color, 10%);
|
||||
|
||||
[theme=dark] & {
|
||||
background-color: darken($code-background-color-dark, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.ln, .lnt {
|
||||
color: $global-font-secondary-color;
|
||||
|
||||
[theme=dark] & {
|
||||
color: $global-font-secondary-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
padding: 0 .2rem;
|
||||
@include transition(transform 0.2s ease);
|
||||
}
|
||||
|
||||
.ellipses {
|
||||
padding: .4rem;
|
||||
}
|
||||
|
||||
.copy {
|
||||
display: none;
|
||||
padding: .4rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $global-link-hover-color;
|
||||
|
||||
[theme=dark] & {
|
||||
color: $global-link-hover-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
max-height: 0;
|
||||
overflow-y: hidden;
|
||||
@include details-transition-open;
|
||||
}
|
||||
|
||||
&.open {
|
||||
.code-header {
|
||||
background: darken($code-background-color, 3%);
|
||||
|
||||
[theme=dark] & {
|
||||
background: darken($code-background-color-dark, 3%);
|
||||
[theme=dark] & {
|
||||
color: $global-link-hover-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
max-height: $MAX_LENGTH;
|
||||
@include details-transition-close;
|
||||
max-height: 0;
|
||||
overflow-y: hidden;
|
||||
@include details-transition-open;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
&.open {
|
||||
.code-header {
|
||||
background: darken($code-background-color, 3%);
|
||||
|
||||
.ellipses {
|
||||
display: none;
|
||||
}
|
||||
[theme=dark] & {
|
||||
background: darken($code-background-color-dark, 3%);
|
||||
}
|
||||
}
|
||||
|
||||
.copy {
|
||||
display: inline;
|
||||
.table-wrapper {
|
||||
max-height: $MAX_LENGTH;
|
||||
@include details-transition-close;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
|
||||
.ellipses {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.copy {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
{{- end -}}
|
||||
|
||||
{{- $params := .Params | merge .Site.Params.page -}}
|
||||
{{- .Scratch.Set "version" "0.2.0" -}}
|
||||
{{- .Scratch.Set "version" "0.2.2" -}}
|
||||
|
||||
{{- if eq hugo.Environment "production" -}}
|
||||
{{- .Scratch.Set "cdn" .Site.Params.cdn -}}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue