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     p {
  24         margin: 0;
  25         font-size: 2em;
  26     }
  27
  28     .annoy-banner-off {
  29         padding: .5em 1em .5em;
  30         width: 1em;
  31         text-align:center;
  32         font-family: Arial, sans-serif;
  33         display: block;
  34
  35         border-radius: 0 0 0 1em;
  36         position: absolute;
  37         top: 0;
  38         right: 0;
  39         color: black;
  40         font-size: 13px;
  41     }
  42 }
  43
  44 .annoy-banner-on_top {
  45     font-size: 13px;
  46     line-height: 1.15em;
  47
  48     background: orange;
  49     z-index: 99;
  50     font-family: Arial, sans-serif;
  51     display: block;
  52     padding: .1em 1em;
  53     text-align:center;
  54     border-radius: 0 0 0 1em;
  55     position: absolute;
  56     top: 0;
  57     right: 0;
  58     color: black;
  59 }
  60
  61
  62 .annoy-banner_book-page {
  63     margin-top: 30px;
  64     font-size: 2em;
  65
  66     p {
  67         margin: 0;
  68     }
  69 }
  70
  71
  72 .annoy-banner_book-fragment-list {
  73     margin-right: 2em;
  74 }
  75
  76
  77
  78 .annoy-banner_blackout {
  79     display: none;
  80
  81     position: fixed;
  82     z-index: 100000;
  83     left: 0;
  84     right: 0;
  85     top: 0;
  86     bottom: 0;
  87     background: black;
  88     color: white;
  89     font-size: 16pt;
  90     line-height: 26pt;
  91     padding: 0;
  92
  93     .annoy-banner-inner {
  94         padding: 0 40% 0 15%;
  95         height: 100%;
  96         overflow-y: scroll;
  97         padding-top: 20vh;
  98         padding-bottom: 2em;
  99         width: 101vw;
 100         box-sizing: border-box;
 101     }
 102
 103     p {
 104         text-align: left;
 105     }
 106
 107     a {
 108         color: white;
 109         position: absolute;
 110         right: 10%;
 111         width: 25%;
 112         border-radius: 24px;
 113         text-align: center;
 114         box-sizing: border-box;
 115         padding: 1em;
 116
 117         &.annoy-banner-off {
 118             bottom: 20vh;
 119             background: #666;
 120             border-radius: auto 100%;
 121             font-size: .75em;
 122             padding: .5em;
 123             width: 20%;
 124             margin-right: 2.5%;
 125         }
 126
 127         &.action {
 128             bottom: 33vh;
 129             background: #018189;
 130             color: white;
 131             border-radius: auto 100%;
 132             padding: 1.5em 1em;
 133         }
 134     }
 135
 136     @media screen and (max-height: 1000px) {
 137         .annoy-banner-inner {
 138             padding-top: 5vh;
 139         }
 140     }
 141
 142     @media screen and (max-width: 1280px) {
 143         .annoy-banner-inner {
 144             padding-left: 5%;
 145             padding-right: 50%;
 146             padding-left: 5%;
 147             padding-right: 50%;
 148         }
 149
 150         a {
 151             right: 5%;
 152             width: 40%;
 153
 154             &.annoy-banner-off {
 155                 width: 40%;
 156                 margin-right: 0%;
 157             }
 158         }
 159
 160     }
 161     @media screen and (max-width: 1024px) {
 162         font-size: 14pt;
 163         line-height: 21pt;
 164     }
 165     @media screen and (max-height: 820px) {
 166         .annoy-banner-inner {
 167             padding-top: 5vh;
 168         }
 169     }
 170     @media screen and (max-width: 820px) and (max-height: 820px) {
 171         a.action {
 172             bottom: 20vh;
 173         }
 174         a.annoy-banner-off {
 175             bottom: 5vh;
 176         }
 177     }
 178     @media screen and (max-height: 400px) {
 179         a.action {
 180             bottom: 30vh;
 181         }
 182     }
 183
 184
 185 }
 186 .annoy-banner-on_blackout {
 187     position: fixed;
 188     z-index: 9999;
 189     bottom: 0;
 190     right: 0;
 191     background: black;
 192     color: white;
 193     border-radius: 1em 0 0 0;
 194     padding: .1em 1em;
 195 }
 196
 197
 198
 199 .dynamic-insert.with-image {
 200     min-height: 120px;
 201     padding: 0;
 202
 203     a {
 204         position: relative;
 205         .text {
 206         }
 207         img {
 208             position: absolute;
 209             top: 10px;
 210             right: 10px;
 211         }
 212     }
 213 }