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