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         margin: auto;
  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         margin: auto;
 137 }
 138
 139 .viewer {
 140         padding-top: 64px;
 141         padding-bottom: 64px;
 142 }
 143
 144 .viewer.img {
 145         margin: auto;
 146         display: block;
 147 }
 148
 149 a.viewer.link:hover {
 150         background-color: transparent;
 151 }
 152
 153 .viewer.text {
 154         padding-left: 10px;
 155         padding-right: 10px;
 156 }
 157
 158 .bar.navbar       { padding-left: calc(50% - (4 * 64px / 2)); }
 159
 160 .bar.optionbar.s1 { padding-left: calc(50% - (1 * 64px / 2)); }
 161 .bar.optionbar.s4 { padding-left: calc(50% - (4 * 64px / 2)); }
 162
 163 .bar.optionbar {
 164         bottom: 0;
 165 }
 166
 167 .bar .button {
 168         height: 54px;
 169         width: 54px;
 170         line-height: 64px;
 171         display: inline-block;
 172         text-align: center;
 173         color: transparent;
 174         text-decoration: none;
 175         background-position: center;
 176         background-repeat: no-repeat;
 177         border-radius: 5px;
 178         border: 1px solid #bac2e1;
 179         margin: 5px;
 180 }
 181
 182 .bar .button[disabled] {
 183         pointer-events: none;
 184         background-color: #aaa;
 185         filter: grayscale(100%);
 186         border-color: gray;
 187 }
 188
 189 .bar .button:hover {
 190         background-color: bac2e1;
 191 }
 192
 193 .bar .button.first    { background-image: url('/arrow_double_left-32x32.png');  }
 194 .bar .button.previous { background-image: url('/arrow_left-32x32.png');         }
 195 .bar .button.next     { background-image: url('/arrow_right-32x32.png');        }
 196 .bar .button.last     { background-image: url('/arrow_double_right-32x32.png'); }
 197
 198 .bar .button.back       { background-image: url('/back-32x32.png');          }
 199 .bar .button.zoomreal   { background-image: url('/actual_size-32x32.png');   }
 200 .bar .button.zoomwidth  { background-image: url('/fit_to_width-32x32.png');  }
 201 .bar .button.zoomheight { background-image: url('/fit_to_height-32x32.png'); }
 202
 203 @media(min-width: 800px) {
 204          .main {
 205                 max-width: 800px;
 206          }
 207
 208         .bar.navbar       { padding-left: calc(400px - (4 * 64px / 2)); }
 209
 210         .bar.optionbar.s1 { padding-left: calc(400px - (1 * 64px / 2)); }
 211         .bar.optionbar.s4 { padding-left: calc(400px - (4 * 64px / 2)); }
 212 }