src/annoy/static/annoy/banner.scss

   1 .annoy-banner {
   2     background: orange;
   3
   4     p {
   5         text-align: center;
   6     }
   7
   8     a {
   9         color: black;
  10         display: block;
  11         padding: 1em 2em;
  12     }
  13 }
  14
  15
  16 .annoy-banner-off {
  17     cursor: pointer;
  18 }
  19
  20 .annoy-banner_top {
  21     display: none;
  22
  23     .annoy-banner-inner {
  24         @media screen and (min-width: 960px) {
  25             width: 960px;
  26             margin: auto;
  27         }
  28         display: flex;
  29         flex-direction: column;
  30
  31         @media screen and (min-width: 400px) {
  32             flex-direction: row;
  33         }
  34     }
  35
  36     img {
  37         margin: 0;
  38         align-self: center;
  39         width: auto;
  40         max-height: 40px;
  41         @media screen and (min-width: 400px) {
  42             max-height: 60px;
  43         }
  44     }
  45     .text {
  46         flex: 1;
  47         align-self: center;
  48         padding: .5em 1em;
  49     }
  50
  51     p {
  52         margin: 0;
  53         font-size: 1.5em;
  54         line-height: 1.1em;
  55
  56         @media screen and (min-width: 400px) {
  57             font-size: 2em;
  58         }
  59     }
  60
  61     .annoy-banner-off {
  62         padding: .5em 1em .5em;
  63         width: 1em;
  64         text-align:center;
  65         font-family: Arial, sans-serif;
  66         display: block;
  67
  68         border-radius: 0 0 0 1em;
  69         position: absolute;
  70         top: 0;
  71         right: 0;
  72         color: black;
  73         font-size: 13px;
  74     }
  75 }
  76
  77 .annoy-banner-on_top {
  78     font-size: 13px;
  79     line-height: 1.15em;
  80
  81     background: orange;
  82     z-index: 99;
  83     font-family: Arial, sans-serif;
  84     display: block;
  85     padding: .1em 1em;
  86     text-align:center;
  87     border-radius: 0 0 0 1em;
  88     position: absolute;
  89     top: 0;
  90     right: 0;
  91     color: black;
  92     max-width: 80%;
  93     white-space: nowrap;
  94     overflow: hidden;
  95     text-overflow: ellipsis;
  96 }
  97
  98
  99 .annoy-banner_book-page {
 100     margin-top: 30px;
 101     font-size: 2em;
 102
 103     p {
 104         margin: 0;
 105     }
 106 }
 107
 108
 109 .annoy-banner_book-fragment-list {
 110     margin-right: 2em;
 111 }
 112
 113
 114
 115 .annoy-banner_blackout {
 116     display: none;
 117
 118     position: fixed;
 119     z-index: 100000;
 120     left: 0;
 121     right: 0;
 122     top: 0;
 123     bottom: 0;
 124     background: black;
 125     color: white;
 126     font-size: 16pt;
 127     line-height: 26pt;
 128     padding: 0;
 129     overflow: hidden;
 130
 131     &.banner-smallfont {
 132         font-size: 13pt;
 133         line-height: 22pt;
 134     }
 135
 136     .annoy-banner-inner {
 137         padding: 0 40% 0 15%;
 138         height: 100%;
 139         overflow-y: scroll;
 140         padding-top: 20vh;
 141         padding-bottom: 2em;
 142         width: 101%;
 143         box-sizing: border-box;
 144     }
 145
 146     p {
 147         text-align: left;
 148     }
 149
 150     a {
 151         color: white;
 152         position: absolute;
 153         right: 10%;
 154         width: 25%;
 155         border-radius: 24px;
 156         text-align: center;
 157         box-sizing: border-box;
 158         padding: 1em;
 159
 160         &.annoy-banner-off {
 161             bottom: 20vh;
 162             background: #666;
 163             border-radius: auto 100%;
 164             font-size: .75em;
 165             padding: .5em;
 166             width: 20%;
 167             margin-right: 2.5%;
 168         }
 169
 170         &.action {
 171             bottom: 40vh;
 172             background: #018189;
 173             color: white;
 174             border-radius: auto 100%;
 175             padding: 1.5em 1em;
 176         }
 177     }
 178
 179     @media screen and (max-height: 1000px) {
 180         .annoy-banner-inner {
 181             padding-top: 5vh;
 182         }
 183     }
 184
 185     @media screen and (max-width: 1280px) {
 186         .annoy-banner-inner {
 187             padding-left: 5%;
 188             padding-right: 50%;
 189             padding-left: 5%;
 190             padding-right: 50%;
 191         }
 192
 193         a {
 194             right: 5%;
 195             width: 40%;
 196
 197             &.annoy-banner-off {
 198                 width: 40%;
 199                 margin-right: 0%;
 200             }
 201         }
 202
 203     }
 204     @media screen and (max-width: 1024px) {
 205         font-size: 14pt;
 206         line-height: 21pt;
 207     }
 208     @media screen and (max-height: 820px) {
 209         .annoy-banner-inner {
 210             padding-top: 5vh;
 211         }
 212     }
 213     @media screen and (max-width: 820px) and (max-height: 820px) {
 214         a.action {
 215             bottom: 20vh;
 216         }
 217         a.annoy-banner-off {
 218             bottom: 5vh;
 219         }
 220     }
 221     @media screen and (max-height: 400px) {
 222         a.action {
 223             bottom: 40vh;
 224         }
 225     }
 226
 227     &.annoy-banner-style_blackout_centre {
 228         background: rgba(0,0,0,.5);
 229
 230         .annoy-banner-inner {
 231             background: black;
 232             position: absolute;
 233             top: 14%;
 234             left: 14%;
 235             right: 14%;
 236             bottom: 14%;
 237             width: auto;
 238             height: auto;
 239             border: 2px solid white;
 240             overflow-y: auto;
 241         }
 242
 243     }
 244     @media screen and (min-height: 500px) {
 245         &.annoy-banner-style_blackout_upper {
 246             background: rgba(0,0,0,.5);
 247
 248             .annoy-banner-inner {
 249                 background: black;
 250                 position: absolute;
 251                 top: 0;
 252                 left: 0;
 253                 right: 0;
 254                 bottom: 50%;
 255                 width: auto;
 256                 height: auto;
 257                 border-bottom: 2px solid white;
 258                 overflow-y: auto;
 259
 260                 .action {
 261                     bottom: 20vh;
 262                 }
 263             }
 264
 265             .annoy-banner-off {
 266                 bottom: 60vh;
 267             }
 268         }
 269     }
 270
 271 }
 272
 273
 274 .annoy-banner-on_blackout {
 275     position: fixed;
 276     z-index: 9999;
 277     bottom: 0;
 278     right: 0;
 279     background: black;
 280     color: white;
 281     border-radius: 1em 0 0 0;
 282     padding: .1em 1em;
 283     max-width: 80%;
 284     white-space: nowrap;
 285     overflow: hidden;
 286     text-overflow: ellipsis;
 287 }
 288
 289
 290
 291 .dynamic-insert {
 292     background: orange;
 293     margin: 1em 0;
 294     user-select: none;
 295     -webkit-user-select: none;
 296     -moz-user-select: none;
 297     -ms-user-select: none;
 298
 299     &.with-image {
 300         min-height: 120px;
 301     }
 302
 303     padding: 0;
 304
 305     a {
 306         color: black;
 307         display: flex;
 308         flex-direction: row;
 309
 310         .text {
 311             padding: 2em;
 312             flex: 1;
 313             align-self: center;
 314         }
 315         img {
 316             border-radius: 100%;
 317             margin: 1em;
 318             align-self: center;
 319             width: 120px;
 320             height: 120px;
 321         }
 322     }
 323 }
 324
 325
 326
 327 .annoy-banner_book-text-intermission {
 328     display: none;
 329
 330     .annoy-banner-inner {
 331         display: flex;
 332         flex-direction: column;
 333
 334         @media screen and (min-width: 400px) {
 335             flex-direction: row;
 336         }
 337     }
 338
 339     img {
 340         margin: 0;
 341         align-self: center;
 342         max-height: 60px;
 343         @media screen and (min-width: 400px) {
 344             max-height: 100px;
 345         }
 346     }
 347     .text {
 348         flex: 1;
 349         align-self: center;
 350         padding: .5em 1em;
 351     }
 352
 353     p {
 354         margin: 0;
 355         font-size: 1.5em;
 356         line-height: 1.15em;
 357
 358         @media screen and (min-width: 400px) {
 359             font-size: 2em;
 360         }
 361     }
 362 }