Add custom h1 color to slides

Uses css-variabled and dom manipulation to change
the projectors h1 color on the fly.
Will have issues with multiple projectors nested in the same view
This commit is contained in:
Sean Engelhardt 2019-02-27 15:57:18 +01:00
parent 422789e2b8
commit 90c131a6aa
3 changed files with 16 additions and 1 deletions

View File

@ -1,3 +1,9 @@
// should be better using @host binding, but does not work
// https://github.com/angular/angular/issues/9343
:host-context(.os-slide-container) {
--header-h1-color: #000;
}
#container { #container {
background-color: lightgoldenrodyellow; background-color: lightgoldenrodyellow;
position: relative; position: relative;
@ -11,6 +17,11 @@
font-size: 22px !important; font-size: 22px !important;
line-height: 24px !important; line-height: 24px !important;
// shadow pierce all children of projector to overwrite the h1 color
::ng-deep h1 {
color: var(--header-h1-color);
}
#header { #header {
position: absolute; position: absolute;
top: 0; top: 0;

View File

@ -55,6 +55,9 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
this.projectorStyle['background-color'] = projector.background_color; this.projectorStyle['background-color'] = projector.background_color;
this.headerFooterStyle.color = projector.header_font_color; this.headerFooterStyle.color = projector.header_font_color;
this.headerFooterStyle['background-color'] = projector.header_background_color; this.headerFooterStyle['background-color'] = projector.header_background_color;
// alter the local scope css variable with the header_h1_color
document.documentElement.style.setProperty('--header-h1-color', this.projector.header_h1_color);
} }
} }

View File

@ -6,10 +6,10 @@
font-family: 'Material Icons'; font-family: 'Material Icons';
} }
h2 { h2 {
line-height: 40px; line-height: 40px;
} }
h3 { h3 {
color: #222; color: #222;
margin-bottom: 10px; margin-bottom: 10px;
@ -25,6 +25,7 @@
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
} }
h2 { h2 {
color: #9a9898; color: #9a9898;
margin-top: 10px; margin-top: 10px;