90c131a6aa
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
90 lines
2.2 KiB
SCSS
90 lines
2.2 KiB
SCSS
// 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 {
|
|
background-color: lightgoldenrodyellow;
|
|
position: relative;
|
|
|
|
#projector {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform-origin: left top;
|
|
overflow: hidden;
|
|
font-size: 22px !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 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 70px;
|
|
box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-bottom: 20px;
|
|
z-index: 9;
|
|
|
|
.projector-logo-main {
|
|
height: 50px;
|
|
padding-left: 50px;
|
|
padding-top: 10px;
|
|
float: left;
|
|
display: flex;
|
|
}
|
|
|
|
#eventdata {
|
|
padding-left: 50px;
|
|
padding-top: 12px;
|
|
height: 50px;
|
|
overflow: hidden;
|
|
line-height: 1.1;
|
|
|
|
.event-name {
|
|
font-size: 26px;
|
|
font-weight: 400;
|
|
|
|
&.titleonly {
|
|
padding-top: 12px;
|
|
}
|
|
}
|
|
|
|
.event-description {
|
|
font-size: 18px;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
#footer {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 35px;
|
|
bottom: 0;
|
|
z-index: 9;
|
|
|
|
.footertext {
|
|
font-size: 16px;
|
|
padding-left: 50px;
|
|
padding-right: 50px;
|
|
padding-top: 5px;
|
|
overflow: hidden;
|
|
text-align: right;
|
|
}
|
|
|
|
span {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
}
|