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