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

   1 html, body, .main {
   2         margin: 0;
   3         padding: 0;
   4         font-family: Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif;
   5         font-size: 12px;
   6         height: 100%;
   7 }
   8
   9 table {
  10         width: 100%;
  11 }
  12
  13 .banner {
  14 }
  15
  16 .banner .ico {
  17         display: block;
  18         height: 50px;
  19         float: left;
  20         padding: 10px;
  21 }
  22
  23 .banner h1, .banner h2 {
  24 }
  25
  26 .main {
  27         max-width: 800px;
  28         margin: auto;
  29 }
  30
  31 .message {
  32         background-color: #ddffdd;
  33         border: 1px solid #88dd88;
  34         clear: left;
  35         border-radius: 5px;
  36         padding: 5px;
  37         margin: 10px;
  38 }
  39
  40 .error {
  41         background-color: #ffdddd;
  42         border: 1px solid #dd8888;
  43         clear: left;
  44         border-radius: 5px;
  45         padding: 5px;
  46         margin: 10px;
  47 }
  48
  49 /* all links and clickable should show a pointer cursor */
  50 [onclick], h2[onclick]:before, h3[onclick]:before {
  51         cursor: pointer;
  52 }
  53
  54 a:hover {
  55         background-color: rgb(225, 225, 225);
  56 }
  57
  58 h2 {
  59         border-bottom: 1px solid #AAA391;
  60 }
  61
  62 h3 {
  63         border-bottom: 1px solid #AAA391;
  64         margin-left: 20px;
  65 }
  66
  67 .login {
  68         width: 250px;
  69         display: flex;
  70         margin: auto;
  71         margin-top: 200px;
  72         flex-direction: column;
  73         border: 1px solid gray;
  74         padding: 20px;
  75         border-radius: 10px;
  76 }
  77
  78 .login input {
  79         margin: 5px;
  80         min-height: 22px;
  81 }
  82
  83 .login input[type='submit'] {
  84         margin-top: 15px;
  85 }
  86
  87 .breadcrumbs {
  88 }
  89
  90 .filter {
  91         padding: 10px;
  92 }
  93
  94 .books {
  95 }
  96
  97 .book_line {
  98         width: 100%;
  99         display: flex;
 100 }
 101
 102 .book_line .link, .book_line .title {
 103         flex-grow: 100;
 104         padding-right: 5px;
 105         padding-left: 5px;
 106 }
 107
 108 .book_line .link {
 109         text-decoration: none;
 110 }
 111
 112 .book_line .cache_icon {
 113         color: green;
 114 }
 115
 116 .book_line .luid {
 117         color: gray;
 118         padding-right: 10px;
 119         padding-left: 10px;
 120 }
 121
 122 .book_line .title {
 123         color: initial;
 124 }
 125
 126 .book_line .author {
 127         float: right;
 128         color: blue;
 129 }
 130
 131 .bar {
 132         height: 64px;
 133         width: 100%;
 134         display: block;
 135         background: white;
 136         position: fixed;
 137         margin: auto;
 138 }
 139
 140 .viewer {
 141         padding-top: 64px;
 142         padding-bottom: 64px;
 143 }
 144
 145 .viewer.img {
 146         margin: auto;
 147         display: block;
 148 }
 149
 150 a.viewer.link:hover {
 151         background-color: transparent;
 152 }
 153
 154 .viewer.text {
 155         padding-left: 10px;
 156         padding-right: 10px;
 157 }
 158
 159 .bar.navbar {
 160         padding-left: calc(min(50%, 800px / 2) - (4 * 64px / 2));
 161 }
 162
 163 .bar.optionbar {
 164         bottom: 0;
 165 }
 166
 167 .bar.optionbar.s1 {
 168         padding-left: calc(min(50%, 800px / 2) - (1 * 64px / 2));
 169 }
 170
 171 .bar.optionbar.s4 {
 172         padding-left: calc(min(50%, 800px / 2) - (4 * 64px / 2));
 173 }
 174
 175 .bar .button {
 176         height: 54px;
 177         width: 54px;
 178         line-height: 64px;
 179         display: inline-block;
 180         text-align: center;
 181         color: transparent;
 182         text-decoration: none;
 183         background-position: center;
 184         background-repeat: no-repeat;
 185         border-radius: 5px;
 186         border: 1px solid #bac2e1;
 187         margin: 5px;
 188 }
 189
 190 .bar .button[disabled] {
 191         pointer-events: none;
 192         background-color: #aaa;
 193         filter: grayscale(100%);
 194         border-color: gray;
 195 }
 196
 197 .bar .button:hover {
 198         background-color: bac2e1;
 199 }
 200
 201 .bar .button.first    { background-image: url('/arrow_double_left-32x32.png');  }
 202 .bar .button.previous { background-image: url('/arrow_left-32x32.png');         }
 203 .bar .button.next     { background-image: url('/arrow_right-32x32.png');        }
 204 .bar .button.last     { background-image: url('/arrow_double_right-32x32.png'); }
 205
 206 .bar .button.back       { background-image: url('/back-32x32.png');          }
 207 .bar .button.zoomreal   { background-image: url('/actual_size-32x32.png');   }
 208 .bar .button.zoomwidth  { background-image: url('/fit_to_width-32x32.png');  }
 209 .bar .button.zoomheight { background-image: url('/fit_to_height-32x32.png'); }