img {
margin: 0;
align-self: center;
+ width: auto;
max-height: 40px;
@media screen and (min-width: 400px) {
max-height: 60px;
p {
margin: 0;
font-size: 1.5em;
+ line-height: 1.1em;
@media screen and (min-width: 400px) {
font-size: 2em;
top: 0;
right: 0;
color: black;
+ max-width: 80%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
font-size: 16pt;
line-height: 26pt;
padding: 0;
+ overflow: hidden;
+ &.banner-smallfont {
+ font-size: 13pt;
+ line-height: 22pt;
+ }
+
.annoy-banner-inner {
padding: 0 40% 0 15%;
height: 100%;
overflow-y: scroll;
padding-top: 20vh;
padding-bottom: 2em;
- width: 101vw;
+ width: 101%;
box-sizing: border-box;
}
}
}
+ &.annoy-banner-style_blackout_centre {
+ background: rgba(0,0,0,.5);
+
+ .annoy-banner-inner {
+ background: black;
+ position: absolute;
+ top: 14%;
+ left: 14%;
+ right: 14%;
+ bottom: 14%;
+ width: auto;
+ height: auto;
+ border: 2px solid white;
+ overflow-y: auto;
+ }
+
+ }
+ @media screen and (min-height: 500px) {
+ &.annoy-banner-style_blackout_upper {
+ background: rgba(0,0,0,.5);
+
+ .annoy-banner-inner {
+ background: black;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 50%;
+ width: auto;
+ height: auto;
+ border-bottom: 2px solid white;
+ overflow-y: auto;
+
+ .action {
+ bottom: 20vh;
+ }
+ }
+
+ .annoy-banner-off {
+ bottom: 60vh;
+ }
+ }
+ }
}
+
+
.annoy-banner-on_blackout {
position: fixed;
z-index: 9999;
color: white;
border-radius: 1em 0 0 0;
padding: .1em 1em;
+ max-width: 80%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.dynamic-insert {
background: orange;
margin: 1em 0;
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
&.with-image {
min-height: 120px;
border-radius: 100%;
margin: 1em;
align-self: center;
+ width: 120px;
+ height: 120px;
}
}
}
p {
margin: 0;
font-size: 1.5em;
+ line-height: 1.15em;
@media screen and (min-width: 400px) {
font-size: 2em;