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