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: 200px;
  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 }
  88
  89 .books {
  90 }
  91
  92 .book_line {
  93         width: 100%;
  94         display: flex;
  95 }
  96
  97 .book_line .link, .book_line .title {
  98         flex-grow: 100;
  99         padding-right: 5px;
 100         padding-left: 5px;
 101 }
 102
 103 .book_line .link {
 104         text-decoration: none;
 105 }
 106
 107 .book_line .cache_icon {
 108         color: green;
 109 }
 110
 111 .book_line .luid {
 112         color: gray;
 113         padding-right: 10px;
 114         padding-left: 10px;
 115 }
 116
 117 .book_line .title {
 118         color: initial;
 119 }
 120
 121 .book_line .author {
 122         float: right;
 123         color: blue;
 124 }
 125
 126 .bar {
 127         height: 64px;
 128         width: 100%;
 129         display: block;
 130         background: white;
 131         position: fixed;
 132         margin: auto;
 133 }
 134
 135 .bar.navbar       { padding-left: calc(50% - (4 * 64px / 2)); }
 136
 137 .bar.optionbar.s1 { padding-left: calc(50% - (1 * 64px / 2)); }
 138 .bar.optionbar.s4 { padding-left: calc(50% - (4 * 64px / 2)); }
 139
 140 .bar.optionbar {
 141         bottom: 0;
 142 }
 143
 144 .bar .button {
 145         height: 54px;
 146         width: 54px;
 147         line-height: 64px;
 148         display: inline-block;
 149         text-align: center;
 150         color: transparent;
 151         text-decoration: none;
 152         background-position: center;
 153         background-repeat: no-repeat;
 154         border-radius: 5px;
 155         border: 1px solid #bac2e1;
 156         margin: 5px;
 157 }
 158
 159 .bar .button[disabled] {
 160         pointer-events: none;
 161         background-color: #aaa;
 162         filter: grayscale(100%);
 163         border-color: gray;
 164 }
 165
 166 .bar .button:hover {
 167         background-color: bac2e1;
 168 }
 169
 170 .bar .button.first    { background-image: url('/arrow_double_left-32x32.png');  }
 171 .bar .button.previous { background-image: url('/arrow_left-32x32.png');         }
 172 .bar .button.next     { background-image: url('/arrow_right-32x32.png');        }
 173 .bar .button.last     { background-image: url('/arrow_double_right-32x32.png'); }
 174
 175 .bar .button.back       { background-image: url('/back-32x32.png');          }
 176 .bar .button.zoomreal   { background-image: url('/actual_size-32x32.png');   }
 177 .bar .button.zoomwidth  { background-image: url('/fit_to_width-32x32.png');  }
 178 .bar .button.zoomheight { background-image: url('/fit_to_height-32x32.png'); }
 179
 180 .viewer {
 181         padding-top: 64px;
 182         padding-bottom: 64px;
 183 }
 184
 185 .viewer.img {
 186         margin: auto;
 187         display: block;
 188 }
 189
 190 a.viewer.link:hover {
 191         background-color: transparent;
 192 }
 193
 194 .viewer.text {
 195         padding-left: 10px;
 196         padding-right: 10px;
 197 }
 198
 199 .desc {
 200         display: flex;
 201 }
 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 }