library/web/style.css

   1 /*
   2  * #AAA391: main gray
   3  * #555C7E: reverse main
   4  *
   5  * #bac2e1: button border
   6  * #DCE4F3: button hover
   7  *
   8  * #ddffdd: background pastel green
   9  * #88dd88: for border
  10  *
  11  * #ffdddd: pastel red
  12  * #dd8888: for border
  13  *
  14  */
  15
  16 html, body, .main {
  17         margin: 0;
  18         padding: 0;
  19         font-family: Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif;
  20         font-size: 12px;
  21         height: 100%;
  22 }
  23
  24 .banner {
  25 }
  26
  27 .banner .ico {
  28         display: block;
  29         height: 50px;
  30         float: left;
  31         padding: 10px;
  32 }
  33
  34 .banner h1, .banner h2 {
  35 }
  36
  37 .main {
  38         margin: auto;
  39 }
  40
  41 .message {
  42         background-color: #ddffdd;
  43         border: 1px solid #88dd88;
  44         clear: left;
  45         border-radius: 5px;
  46         padding: 5px;
  47         margin: 10px;
  48 }
  49
  50 .message.error {
  51         background-color: #ffdddd;
  52         border: 1px solid #dd8888;
  53 }
  54
  55 /* all links and clickable should show a pointer cursor */
  56 [onclick], h2[onclick]:before, h3[onclick]:before {
  57         cursor: pointer;
  58 }
  59
  60 a:not(.selected):hover {
  61         background-color: rgb(225, 225, 225);
  62 }
  63
  64 h2 {
  65         border-bottom: 1px solid #AAA391;
  66 }
  67
  68 h3 {
  69         border-bottom: 1px solid #AAA391;
  70         margin-left: 20px;
  71 }
  72
  73 .itemsbox .items {
  74         display: block;
  75         position: absolute;
  76         overflow-y: auto;
  77
  78         transition: all 0.5s ease;
  79         visibility: hidden;
  80         opacity: 0;
  81 }
  82
  83 .itemsbox:hover .items, .itemsbox .items:hover {
  84         visibility: visible;
  85         opacity: 1;
  86 }
  87
  88 .itemsbox .items .item {
  89         display: block;
  90         padding: 5px;
  91         color: black;
  92         cursor: pointer;
  93         text-decoration: none;
  94 }
  95
  96 .itemsbox .items .item.selected {
  97         font-weight: bold;
  98         cursor: default;
  99 }
 100
 101 .itemsbox .items .item:not(.selected):hover, .button:hover {
 102         background-color: #DCE4F3;
 103 }
 104
 105 .itemsbox .items .item[disabled], .button[disabled] {
 106         pointer-events: none;
 107         background-color: #aaa;
 108         filter: grayscale(100%);
 109         border-color: #AAA391;
 110 }
 111
 112 .button {
 113         display: inline-block;
 114         text-align: center;
 115         text-decoration: none;
 116         background-position: center;
 117         background-repeat: no-repeat;
 118         border: 1px solid #bac2e1;
 119         border-radius: 5px;
 120 }
 121
 122 .login {
 123         width: 250px;
 124         display: flex;
 125         margin: auto;
 126         margin-top: 100px;
 127         flex-direction: column;
 128         border: 1px solid #AAA391;
 129         padding: 20px;
 130         border-radius: 10px;
 131 }
 132
 133 .login input {
 134         margin: 5px;
 135         min-height: 22px;
 136 }
 137
 138 .login input[type='submit'] {
 139         margin-top: 15px;
 140 }
 141
 142 .breadcrumbs {
 143 }
 144
 145 .filter {
 146         padding: 5px;
 147         height: 36px;
 148         border: 1px solid #AAA391;
 149         border-radius: 5px;
 150         margin-top: 5px;
 151         margin-bottom: 5px;
 152         display: flex;
 153 }
 154
 155 .filter > * {
 156         height: 36px;
 157         display: inline-block;
 158 }
 159
 160 .filter .label {
 161         line-height: 36px;
 162         padding-right: 5px;
 163 }
 164
 165 .filter input[type='text'] {
 166         height: 32px;
 167         padding: 0;
 168         margin: 0;
 169         border-width: 2px;
 170         min-width: 50px;
 171         flex-grow: 100;
 172         flex-shrink: 100;
 173 }
 174
 175 .filter input[name='optionNo'] {
 176         background-image: url('/clear-32x32.png');
 177         color: transparent;
 178         width: 36px;
 179 }
 180
 181 .books {
 182 }
 183
 184 .book_line {
 185         width: 100%;
 186         display: flex;
 187 }
 188
 189 .book_line .link, .book_line .title {
 190         flex-grow: 100;
 191         padding: 5px;
 192 }
 193
 194 .book_line .link {
 195         text-decoration: none;
 196 }
 197
 198 .book_line .cache_icon {
 199         color: green;
 200 }
 201
 202 .book_line .luid {
 203         color: #AAA391;
 204         padding-right: 10px;
 205         padding-left: 10px;
 206 }
 207
 208 .book_line .title {
 209         color: initial;
 210 }
 211
 212 .book_line .author {
 213         float: right;
 214         color: blue;
 215 }
 216
 217 .bar {
 218         height: 64px;
 219         width: 100%;
 220         display: block;
 221         background: white;
 222         position: fixed;
 223         margin: auto;
 224 }
 225
 226 .bar.navbar       { padding-left: calc(50% - (5 * (64px + 5px) / 2)); }
 227
 228 .bar.optionbar.s1 { padding-left: calc(50% - (1 * (64px + 5px) / 2)); }
 229 .bar.optionbar.s4 { padding-left: calc(50% - (4 * (64px + 5px) / 2)); }
 230
 231 .bar.optionbar {
 232         bottom: 0;
 233 }
 234
 235 .bar .button {
 236         height: 54px;
 237         width: 54px;
 238         line-height: 54px;
 239         margin: 5px;
 240 }
 241
 242 .bar .gotobox {
 243         display: inline-block;
 244 }
 245
 246 .bar .gotobox .items {
 247         background-color: white;
 248         border: 1px solid gray;
 249         border-radius: 5px;
 250         width: 196px;
 251         margin: -5px;
 252         margin-left: -66px;
 253         max-height: 400px;
 254 }
 255
 256 .bar .button.first    { color: transparent; background-image: url('/arrow_double_left-32x32.png');  }
 257 .bar .button.previous { color: transparent; background-image: url('/arrow_left-32x32.png');         }
 258 .bar .button.next     { color: transparent; background-image: url('/arrow_right-32x32.png');        }
 259 .bar .button.last     { color: transparent; background-image: url('/arrow_double_right-32x32.png'); }
 260
 261 .bar .button.back       { color: transparent; background-image: url('/back-32x32.png');          }
 262 .bar .button.zoomreal   { color: transparent; background-image: url('/actual_size-32x32.png');   }
 263 .bar .button.zoomwidth  { color: transparent; background-image: url('/fit_to_width-32x32.png');  }
 264 .bar .button.zoomheight { color: transparent; background-image: url('/fit_to_height-32x32.png'); }
 265
 266 .viewer {
 267         padding-top: 64px;
 268         padding-bottom: 64px;
 269 }
 270
 271 .viewer .title {
 272         background-color: #AAA391;
 273         text-align: center;
 274         font-variant: small-caps;
 275         color: white;
 276 }
 277
 278 .viewer.img {
 279         margin: auto;
 280         display: block;
 281 }
 282
 283 a.viewer.link:hover {
 284         background-color: transparent;
 285 }
 286
 287 .viewer.text {
 288         padding-left: 10px;
 289         padding-right: 10px;
 290 }
 291
 292 .desc {
 293         display: flex;
 294         flex-direction: column;
 295         padding-top: 10px;
 296 }
 297
 298 .desc .cover {
 299         max-height: 280px;
 300         overflow: hidden;
 301 }
 302
 303 .desc .cover img {
 304         max-width: 80%;
 305         margin: auto;
 306         display: block;
 307 }
 308
 309 .desc .details .col.key {
 310         font-weight: bold;
 311         padding-left: 5px;
 312         padding-right: 5px;
 313 }
 314
 315 .desc .details .col.value {
 316         color: #AAA391;
 317 }
 318
 319 @media(min-width: 800px) {
 320          .main {
 321                 max-width: 800px;
 322          }
 323
 324         .bar.navbar       { padding-left: calc(400px - (5 * (64px + 5px) / 2)); }
 325
 326         .bar.optionbar.s1 { padding-left: calc(400px - (1 * (64px + 5px) / 2)); }
 327         .bar.optionbar.s4 { padding-left: calc(400px - (4 * (64px + 5px) / 2)); }
 328
 329         .desc { flex-direction: row; }
 330         .desc .cover img {
 331                 width: 200px;
 332                 padding-right: 10px;
 333         }
 334 }