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

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