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