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         max-height: 40px;
  40         @media screen and (min-width: 400px) {
  41             max-height: 60px;
  42         }
  43     }
  44     .text {
  45         flex: 1;
  46         align-self: center;
  47         padding: .5em 1em;
  48     }
  49
  50     p {
  51         margin: 0;
  52         font-size: 1.5em;
  53
  54         @media screen and (min-width: 400px) {
  55             font-size: 2em;
  56         }
  57     }
  58
  59     .annoy-banner-off {
  60         padding: .5em 1em .5em;
  61         width: 1em;
  62         text-align:center;
  63         font-family: Arial, sans-serif;
  64         display: block;
  65
  66         border-radius: 0 0 0 1em;
  67         position: absolute;
  68         top: 0;
  69         right: 0;
  70         color: black;
  71         font-size: 13px;
  72     }
  73 }
  74
  75 .annoy-banner-on_top {
  76     font-size: 13px;
  77     line-height: 1.15em;
  78
  79     background: orange;
  80     z-index: 99;
  81     font-family: Arial, sans-serif;
  82     display: block;
  83     padding: .1em 1em;
  84     text-align:center;
  85     border-radius: 0 0 0 1em;
  86     position: absolute;
  87     top: 0;
  88     right: 0;
  89     color: black;
  90     max-width: 80%;
  91     white-space: nowrap;
  92     overflow: hidden;
  93     text-overflow: ellipsis;
  94 }
  95
  96
  97 .annoy-banner_book-page {
  98     margin-top: 30px;
  99     font-size: 2em;
 100
 101     p {
 102         margin: 0;
 103     }
 104 }
 105
 106
 107 .annoy-banner_book-fragment-list {
 108     margin-right: 2em;
 109 }
 110
 111
 112
 113 .annoy-banner_blackout {
 114     display: none;
 115
 116     position: fixed;
 117     z-index: 100000;
 118     left: 0;
 119     right: 0;
 120     top: 0;
 121     bottom: 0;
 122     background: black;
 123     color: white;
 124     font-size: 16pt;
 125     line-height: 26pt;
 126     padding: 0;
 127
 128     .annoy-banner-inner {
 129         padding: 0 40% 0 15%;
 130         height: 100%;
 131         overflow-y: scroll;
 132         padding-top: 20vh;
 133         padding-bottom: 2em;
 134         width: 101vw;
 135         box-sizing: border-box;
 136     }
 137
 138     p {
 139         text-align: left;
 140     }
 141
 142     a {
 143         color: white;
 144         position: absolute;
 145         right: 10%;
 146         width: 25%;
 147         border-radius: 24px;
 148         text-align: center;
 149         box-sizing: border-box;
 150         padding: 1em;
 151
 152         &.annoy-banner-off {
 153             bottom: 20vh;
 154             background: #666;
 155             border-radius: auto 100%;
 156             font-size: .75em;
 157             padding: .5em;
 158             width: 20%;
 159             margin-right: 2.5%;
 160         }
 161
 162         &.action {
 163             bottom: 40vh;
 164             background: #018189;
 165             color: white;
 166             border-radius: auto 100%;
 167             padding: 1.5em 1em;
 168         }
 169     }
 170
 171     @media screen and (max-height: 1000px) {
 172         .annoy-banner-inner {
 173             padding-top: 5vh;
 174         }
 175     }
 176
 177     @media screen and (max-width: 1280px) {
 178         .annoy-banner-inner {
 179             padding-left: 5%;
 180             padding-right: 50%;
 181             padding-left: 5%;
 182             padding-right: 50%;
 183         }
 184
 185         a {
 186             right: 5%;
 187             width: 40%;
 188
 189             &.annoy-banner-off {
 190                 width: 40%;
 191                 margin-right: 0%;
 192             }
 193         }
 194
 195     }
 196     @media screen and (max-width: 1024px) {
 197         font-size: 14pt;
 198         line-height: 21pt;
 199     }
 200     @media screen and (max-height: 820px) {
 201         .annoy-banner-inner {
 202             padding-top: 5vh;
 203         }
 204     }
 205     @media screen and (max-width: 820px) and (max-height: 820px) {
 206         a.action {
 207             bottom: 20vh;
 208         }
 209         a.annoy-banner-off {
 210             bottom: 5vh;
 211         }
 212     }
 213     @media screen and (max-height: 400px) {
 214         a.action {
 215             bottom: 40vh;
 216         }
 217     }
 218
 219
 220 }
 221 .annoy-banner-on_blackout {
 222     position: fixed;
 223     z-index: 9999;
 224     bottom: 0;
 225     right: 0;
 226     background: black;
 227     color: white;
 228     border-radius: 1em 0 0 0;
 229     padding: .1em 1em;
 230     max-width: 80%;
 231     white-space: nowrap;
 232     overflow: hidden;
 233     text-overflow: ellipsis;
 234 }
 235
 236
 237
 238 .dynamic-insert {
 239     background: orange;
 240     margin: 1em 0;
 241     user-select: none;
 242     -webkit-user-select: none;
 243     -moz-user-select: none;
 244     -ms-user-select: none;
 245
 246     &.with-image {
 247         min-height: 120px;
 248     }
 249
 250     padding: 0;
 251
 252     a {
 253         color: black;
 254         display: flex;
 255         flex-direction: row;
 256
 257         .text {
 258             padding: 2em;
 259             flex: 1;
 260             align-self: center;
 261         }
 262         img {
 263             border-radius: 100%;
 264             margin: 1em;
 265             align-self: center;
 266         }
 267     }
 268 }
 269
 270
 271
 272 .annoy-banner_book-text-intermission {
 273     display: none;
 274
 275     .annoy-banner-inner {
 276         display: flex;
 277         flex-direction: column;
 278
 279         @media screen and (min-width: 400px) {
 280             flex-direction: row;
 281         }
 282     }
 283
 284     img {
 285         margin: 0;
 286         align-self: center;
 287         max-height: 60px;
 288         @media screen and (min-width: 400px) {
 289             max-height: 100px;
 290         }
 291     }
 292     .text {
 293         flex: 1;
 294         align-self: center;
 295         padding: .5em 1em;
 296     }
 297
 298     p {
 299         margin: 0;
 300         font-size: 1.5em;
 301
 302         @media screen and (min-width: 400px) {
 303             font-size: 2em;
 304         }
 305     }
 306 }