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
 130     .annoy-banner-inner {
 131         padding: 0 40% 0 15%;
 132         height: 100%;
 133         overflow-y: scroll;
 134         padding-top: 20vh;
 135         padding-bottom: 2em;
 136         width: 101vw;
 137         box-sizing: border-box;
 138     }
 139
 140     p {
 141         text-align: left;
 142     }
 143
 144     a {
 145         color: white;
 146         position: absolute;
 147         right: 10%;
 148         width: 25%;
 149         border-radius: 24px;
 150         text-align: center;
 151         box-sizing: border-box;
 152         padding: 1em;
 153
 154         &.annoy-banner-off {
 155             bottom: 20vh;
 156             background: #666;
 157             border-radius: auto 100%;
 158             font-size: .75em;
 159             padding: .5em;
 160             width: 20%;
 161             margin-right: 2.5%;
 162         }
 163
 164         &.action {
 165             bottom: 40vh;
 166             background: #018189;
 167             color: white;
 168             border-radius: auto 100%;
 169             padding: 1.5em 1em;
 170         }
 171     }
 172
 173     @media screen and (max-height: 1000px) {
 174         .annoy-banner-inner {
 175             padding-top: 5vh;
 176         }
 177     }
 178
 179     @media screen and (max-width: 1280px) {
 180         .annoy-banner-inner {
 181             padding-left: 5%;
 182             padding-right: 50%;
 183             padding-left: 5%;
 184             padding-right: 50%;
 185         }
 186
 187         a {
 188             right: 5%;
 189             width: 40%;
 190
 191             &.annoy-banner-off {
 192                 width: 40%;
 193                 margin-right: 0%;
 194             }
 195         }
 196
 197     }
 198     @media screen and (max-width: 1024px) {
 199         font-size: 14pt;
 200         line-height: 21pt;
 201     }
 202     @media screen and (max-height: 820px) {
 203         .annoy-banner-inner {
 204             padding-top: 5vh;
 205         }
 206     }
 207     @media screen and (max-width: 820px) and (max-height: 820px) {
 208         a.action {
 209             bottom: 20vh;
 210         }
 211         a.annoy-banner-off {
 212             bottom: 5vh;
 213         }
 214     }
 215     @media screen and (max-height: 400px) {
 216         a.action {
 217             bottom: 40vh;
 218         }
 219     }
 220
 221
 222 }
 223 .annoy-banner-on_blackout {
 224     position: fixed;
 225     z-index: 9999;
 226     bottom: 0;
 227     right: 0;
 228     background: black;
 229     color: white;
 230     border-radius: 1em 0 0 0;
 231     padding: .1em 1em;
 232     max-width: 80%;
 233     white-space: nowrap;
 234     overflow: hidden;
 235     text-overflow: ellipsis;
 236 }
 237
 238
 239
 240 .dynamic-insert {
 241     background: orange;
 242     margin: 1em 0;
 243     user-select: none;
 244     -webkit-user-select: none;
 245     -moz-user-select: none;
 246     -ms-user-select: none;
 247
 248     &.with-image {
 249         min-height: 120px;
 250     }
 251
 252     padding: 0;
 253
 254     a {
 255         color: black;
 256         display: flex;
 257         flex-direction: row;
 258
 259         .text {
 260             padding: 2em;
 261             flex: 1;
 262             align-self: center;
 263         }
 264         img {
 265             border-radius: 100%;
 266             margin: 1em;
 267             align-self: center;
 268             width: 120px;
 269             height: 120px;
 270         }
 271     }
 272 }
 273
 274
 275
 276 .annoy-banner_book-text-intermission {
 277     display: none;
 278
 279     .annoy-banner-inner {
 280         display: flex;
 281         flex-direction: column;
 282
 283         @media screen and (min-width: 400px) {
 284             flex-direction: row;
 285         }
 286     }
 287
 288     img {
 289         margin: 0;
 290         align-self: center;
 291         max-height: 60px;
 292         @media screen and (min-width: 400px) {
 293             max-height: 100px;
 294         }
 295     }
 296     .text {
 297         flex: 1;
 298         align-self: center;
 299         padding: .5em 1em;
 300     }
 301
 302     p {
 303         margin: 0;
 304         font-size: 1.5em;
 305         line-height: 1.15em;
 306
 307         @media screen and (min-width: 400px) {
 308             font-size: 2em;
 309         }
 310     }
 311 }