Skip to content
Snippets Groups Projects
Verified Commit 58407000 authored by Frank Mably's avatar Frank Mably
Browse files

Issue #3490336 by mably: CSS handling improvements

parent 99cb21b8
No related branches found
No related tags found
1 merge request!2Issue #3490336 by mably: CSS handling improvements
Pipeline #352598 passed
progress.reading-progress-bar {
position: fixed;
z-index: 99;
top: 0;
left: 0;
display: block;
width: 100%;
height: var(--reading-progress-bar--height, 5px);
color: var(--reading-progress-bar--color, #0060df);
border: var(--reading-progress-bar--border, 0);
background-color: var(--reading-progress-bar--background-color, #e9e9ed);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
progress.reading-progress-bar::-webkit-progress-value {
background-color: var(--reading-progress-bar--color, #0060df);
}
progress.reading-progress-bar::-moz-progress-bar {
background-color: var(--reading-progress-bar--color, #0060df);
}
progress.reading-progress-bar::-webkit-progress-bar {
background-color: var(--reading-progress-bar--background-color, #e9e9ed);
}
.toolbar-vertical progress.reading-progress-bar,
.toolbar-horizontal progress.reading-progress-bar {
top: 40px;
}
.toolbar-horizontal.toolbar-tray-open progress.reading-progress-bar {
top: 79px;
}
progress.reading-progress-bar {
transition-duration: 0s, 1s;
transition-property: visibility, opacity;
......
......@@ -140,7 +140,7 @@ class ReadingProgressBarBlock extends BlockBase implements ContainerFactoryPlugi
$hide_delay = $this->configuration['hide_delay'];
$attributes['data-hide-delay'] = $hide_delay;
$inline_style = "progress.$class{color: $color; height: $height; background-color: $background_color; border: $border;} progress.$class::-webkit-progress-value {background-color: $color;} progress.$class::-moz-progress-bar {background-color: $color;} progress.$class::-webkit-progress-bar {background-color: $background_color;}";
$inline_style = ":root{--reading-progress-bar--color: $color; --reading-progress-bar--height: $height; --reading-progress-bar--background-color: $background_color; --reading-progress-bar--border: $border;}";
$build['reading_progress_bar'] = [
'#theme' => 'reading_progress_bar',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment