src/be/nikiroo/fanfix/library/web/style.css

   1 /*
   2  * #AAA391: main gray
   3  * #555C7E: reverse main
   4  *
   5  * #bac2e1: button border
   6  * #DCE4F3: button hover
   7  *
   8  * #ddffdd: background pastel green
   9  * #88dd88: for border
  10  *
  11  * #ffdddd: pastel red
  12  * #dd8888: for border
  13  *
  14  */
  15
  16 html, body, .main {
  17         margin: 0;
  18         padding: 0;
  19         font-family: Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif;
  20         font-size: 12px;
  21         height: 100%;
  22 }
  23
  24 .banner {
  25 }
  26
  27 .banner .ico {
  28         display: block;
  29         height: 50px;
  30         float: left;
  31         padding: 10px;
  32 }
  33
  34 .banner h1, .banner h2 {
  35 }
  36
  37 .main {
  38         margin: auto;
  39 }
  40
  41 .message {
  42         background-color: #ddffdd;
  43         border: 1px solid #88dd88;
  44         clear: left;
  45         border-radius: 5px;
  46         padding: 5px;
  47         margin: 10px;
  48 }
  49
  50 .error {
  51         background-color: #ffdddd;
  52         border: 1px solid #dd8888;
  53         clear: left;
  54         border-radius: 5px;
  55         padding: 5px;
  56         margin: 10px;
  57 }
  58
  59 /* all links and clickable should show a pointer cursor */
  60 [onclick], h2[onclick]:before, h3[onclick]:before {
  61         cursor: pointer;
  62 }
  63
  64 a:not(.selected):hover {
  65         background-color: rgb(225, 225, 225);
  66 }
  67
  68 h2 {
  69         border-bottom: 1px solid #AAA391;
  70 }
  71
  72 h3 {
  73         border-bottom: 1px solid #AAA391;
  74         margin-left: 20px;
  75 }
  76
  77 .itemsbox .items {
  78         display: block;
  79         position: absolute;
  80         overflow-y: auto;
  81
  82         transition: all 0.5s ease;
  83         visibility: hidden;
  84         opacity: 0;
  85 }
  86
  87 .itemsbox:hover .items, .itemsbox .items:hover {
  88         visibility: visible;
  89         opacity: 1;
  90 }
  91
  92 .itemsbox .items .item {
  93         display: block;
  94         padding: 5px;
  95         color: black;
  96         cursor: pointer;
  97         text-decoration: none;
  98 }
  99
 100 .itemsbox .items .item.selected {
 101         font-weight: bold;
 102         cursor: default;
 103 }
 104
 105 .itemsbox .items .item:not(.selected):hover, .button:hover {
 106         background-color: #DCE4F3;
 107 }
 108
 109 .itemsbox .items .item[disabled], .button[disabled] {
 110         pointer-events: none;
 111         background-color: #aaa;
 112         filter: grayscale(100%);
 113         border-color: #AAA391;
 114 }
 115
 116 .button {
 117         display: inline-block;
 118         text-align: center;
 119         text-decoration: none;
 120         background-position: center;
 121         background-repeat: no-repeat;
 122         border: 1px solid #bac2e1;
 123         border-radius: 5px;
 124 }
 125
 126 .login {
 127         width: 250px;
 128         display: flex;
 129         margin: auto;
 130         margin-top: 100px;
 131         flex-direction: column;
 132         border: 1px solid #AAA391;
 133         padding: 20px;
 134         border-radius: 10px;
 135 }
 136
 137 .login input {
 138         margin: 5px;
 139         min-height: 22px;
 140 }
 141
 142 .login input[type='submit'] {
 143         margin-top: 15px;
 144 }
 145
 146 .breadcrumbs {
 147 }
 148
 149 .filter {
 150         padding: 5px;
 151         height: 36px;
 152         border: 1px solid #AAA391;
 153         border-radius: 5px;
 154         margin-top: 5px;
 155         margin-bottom: 5px;
 156         display: flex;
 157 }
 158
 159 .filter > * {
 160         height: 36px;
 161         display: inline-block;
 162 }
 163
 164 .filter .label {
 165         line-height: 36px;
 166         padding-right: 5px;
 167 }
 168
 169 .filter input[type='text'] {
 170         height: 32px;
 171         padding: 0;
 172         margin: 0;
 173         border-width: 2px;
 174         min-width: 50px;
 175         flex-grow: 100;
 176         flex-shrink: 100;
 177 }
 178
 179 .filter input[name='optionNo'] {
 180         background-image: url('/clear-32x32.png');
 181         color: transparent;
 182         width: 36px;
 183 }
 184
 185 .books {
 186 }
 187
 188 .book_line {
 189         width: 100%;
 190         display: flex;
 191 }
 192
 193 .book_line .link, .book_line .title {
 194         flex-grow: 100;
 195         padding: 5px;
 196 }
 197
 198 .book_line .link {
 199         text-decoration: none;
 200 }
 201
 202 .book_line .cache_icon {
 203         color: green;
 204 }
 205
 206 .book_line .luid {
 207         color: #AAA391;
 208         padding-right: 10px;
 209         padding-left: 10px;
 210 }
 211
 212 .book_line .title {
 213         color: initial;
 214 }
 215
 216 .book_line .author {
 217         float: right;
 218         color: blue;
 219 }
 220
 221 .bar {
 222         height: 64px;
 223         width: 100%;
 224         display: block;
 225         background: white;
 226         position: fixed;
 227         margin: auto;
 228 }
 229
 230 .bar.navbar       { padding-left: calc(50% - (5 * (64px + 5px) / 2)); }
 231
 232 .bar.optionbar.s1 { padding-left: calc(50% - (1 * (64px + 5px) / 2)); }
 233 .bar.optionbar.s4 { padding-left: calc(50% - (4 * (64px + 5px) / 2)); }
 234
 235 .bar.optionbar {
 236         bottom: 0;
 237 }
 238
 239 .bar .button {
 240         height: 54px;
 241         width: 54px;
 242         line-height: 54px;
 243         margin: 5px;
 244 }
 245
 246 .bar .gotobox {
 247         display: inline-block;
 248 }
 249
 250 .bar .gotobox .items {
 251         background-color: white;
 252         border: 1px solid gray;
 253         border-radius: 5px;
 254         width: 196px;
 255         margin: -5px;
 256         margin-left: -66px;
 257         max-height: 400px;
 258 }
 259
 260 .bar .button.first    { color: transparent; background-image: url('/arrow_double_left-32x32.png');  }
 261 .bar .button.previous { color: transparent; background-image: url('/arrow_left-32x32.png');         }
 262 .bar .button.next     { color: transparent; background-image: url('/arrow_right-32x32.png');        }
 263 .bar .button.last     { color: transparent; background-image: url('/arrow_double_right-32x32.png'); }
 264
 265 .bar .button.back       { color: transparent; background-image: url('/back-32x32.png');          }
 266 .bar .button.zoomreal   { color: transparent; background-image: url('/actual_size-32x32.png');   }
 267 .bar .button.zoomwidth  { color: transparent; background-image: url('/fit_to_width-32x32.png');  }
 268 .bar .button.zoomheight { color: transparent; background-image: url('/fit_to_height-32x32.png'); }
 269
 270 .viewer {
 271         padding-top: 64px;
 272         padding-bottom: 64px;
 273 }
 274
 275 .viewer .title {
 276         background-color: #AAA391;
 277         text-align: center;
 278         font-variant: small-caps;
 279         color: white;
 280 }
 281
 282 .viewer.img {
 283         margin: auto;
 284         display: block;
 285 }
 286
 287 a.viewer.link:hover {
 288         background-color: transparent;
 289 }
 290
 291 .viewer.text {
 292         padding-left: 10px;
 293         padding-right: 10px;
 294 }
 295
 296 .desc {
 297         display: flex;
 298         flex-direction: column;
 299         padding-top: 10px;
 300 }
 301
 302 .desc .cover {
 303         max-height: 280px;
 304         overflow: hidden;
 305 }
 306
 307 .desc .cover img {
 308         max-width: 80%;
 309         margin: auto;
 310         display: block;
 311 }
 312
 313 .desc .details .col1 {
 314         font-weight: bold;
 315         padding-left: 5px;
 316         padding-right: 5px;
 317 }
 318
 319 .desc .details .col2 {
 320         color: #AAA391;
 321 }
 322
 323 @media(min-width: 800px) {
 324          .main {
 325                 max-width: 800px;
 326          }
 327
 328         .bar.navbar       { padding-left: calc(400px - (5 * (64px + 5px) / 2)); }
 329
 330         .bar.optionbar.s1 { padding-left: calc(400px - (1 * (64px + 5px) / 2)); }
 331         .bar.optionbar.s4 { padding-left: calc(400px - (4 * (64px + 5px) / 2)); }
 332
 333         .desc { flex-direction: row; }
 334         .desc .cover img {
 335                 width: 200px;
 336                 padding-right: 10px;
 337         }
 338 }