.annoy-banner_top {
display: none;
+ .annoy-banner-inner {
+ @media screen and (min-width: 960px) {
+ width: 960px;
+ margin: auto;
+ }
+ display: flex;
+ flex-direction: column;
+
+ @media screen and (min-width: 400px) {
+ flex-direction: row;
+ }
+ }
+
+ img {
+ margin: 0;
+ align-self: center;
+ width: auto;
+ max-height: 40px;
+ @media screen and (min-width: 400px) {
+ max-height: 60px;
+ }
+ }
+ .text {
+ flex: 1;
+ align-self: center;
+ padding: .5em 1em;
+ }
+
p {
margin: 0;
- font-size: 2em;
+ font-size: 1.5em;
+ line-height: 1.1em;
+
+ @media screen and (min-width: 400px) {
+ font-size: 2em;
+ }
}
.annoy-banner-off {
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;
.annoy-banner-inner {
padding: 0 40% 0 15%;
overflow-y: scroll;
padding-top: 20vh;
padding-bottom: 2em;
- width: 101vw;
+ width: 101%;
box-sizing: border-box;
}
}
&.action {
- bottom: 33vh;
+ bottom: 40vh;
background: #018189;
color: white;
border-radius: auto 100%;
}
@media screen and (max-height: 400px) {
a.action {
- bottom: 30vh;
+ bottom: 40vh;
+ }
+ }
+
+ &.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.with-image {
- min-height: 120px;
- padding: 0;
+.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;
+ }
+ padding: 0;
+
a {
- position: relative;
+ color: black;
+ display: flex;
+ flex-direction: row;
+
.text {
+ padding: 2em;
+ flex: 1;
+ align-self: center;
}
img {
- position: absolute;
- top: 10px;
- right: 10px;
+ border-radius: 100%;
+ margin: 1em;
+ align-self: center;
+ width: 120px;
+ height: 120px;
+ }
+ }
+}
+
+
+
+.annoy-banner_book-text-intermission {
+ display: none;
+
+ .annoy-banner-inner {
+ display: flex;
+ flex-direction: column;
+
+ @media screen and (min-width: 400px) {
+ flex-direction: row;
+ }
+ }
+
+ img {
+ margin: 0;
+ align-self: center;
+ max-height: 60px;
+ @media screen and (min-width: 400px) {
+ max-height: 100px;
+ }
+ }
+ .text {
+ flex: 1;
+ align-self: center;
+ padding: .5em 1em;
+ }
+
+ p {
+ margin: 0;
+ font-size: 1.5em;
+ line-height: 1.15em;
+
+ @media screen and (min-width: 400px) {
+ font-size: 2em;
}
}
}