mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 23:38:56 +00:00
⚡ Perf: optimize reading progress bar (#191)
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
.reading-progress-bar {
|
||||
--progress: 0;
|
||||
height: var(--progress-h, 2px);
|
||||
width: var(--progress);
|
||||
background-color: var(--bg-progress, $info);
|
||||
background-color: var(--bg-progress, var(--fi-info));
|
||||
z-index: 150;
|
||||
position: fixed;
|
||||
|
||||
[data-theme="dark"] & {
|
||||
background-color: var(--bg-progress-dark, darken($info, 5%));
|
||||
background-color: var(--bg-progress-dark, var(--fi-info-dark));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,12 +36,20 @@
|
||||
{{- $readingProgress := .Site.Params.readingProgress -}}
|
||||
{{- if $readingProgress.enable -}}
|
||||
{{- with $readingProgress -}}
|
||||
<div class="reading-progress-bar" style="
|
||||
{{- if .Reversed -}}width: calc(100% - var(--progress));{{- end -}}
|
||||
{{- if .Light -}}--bg-progress: {{ .Light }};{{- end -}}
|
||||
{{- if .Dark -}}--bg-progress-dark: {{ .Dark }};{{- end -}}
|
||||
{{- .Start | default "left" -}}: 0;
|
||||
{{- .Position | default "top" -}}: 0;height: {{ .Height | default "2px" }};"></div>
|
||||
{{- $style := printf "%v: 0;%v: 0;" (.Start | default "left") (.Position | default "top") -}}
|
||||
{{- if .Height | and (ne .Height "2px") -}}
|
||||
{{- $style = printf "%v--progress-h: %v;" $style .Height -}}
|
||||
{{- end -}}
|
||||
{{- if .Reversed -}}
|
||||
{{- $style = printf "%v%v" $style "width: calc(100% - var(--progress));" -}}
|
||||
{{- end -}}
|
||||
{{- if .Light -}}
|
||||
{{- $style = printf "%v--bg-progress: %v;" $style .Light -}}
|
||||
{{- end -}}
|
||||
{{- if .Dark -}}
|
||||
{{- $style = printf "%v--bg-progress-dark: %v;" $style .Dark -}}
|
||||
{{- end -}}
|
||||
<div class="reading-progress-bar" {{ printf "style=\"%v\"" $style | safeHTMLAttr }}></div>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user