Commit | Line | Data |
---|---|---|
599b05c7 NR |
1 | /* |
2 | * #AAA391: main gray | |
3 | * #555C7E: reverse main | |
4 | * | |
6b89e45c NR |
5 | * #bac2e1: button border |
6 | * #DCE4F3: button hover | |
7 | * | |
599b05c7 NR |
8 | * #ddffdd: background pastel green |
9 | * #88dd88: for border | |
10 | * | |
11 | * #ffdddd: pastel red | |
12 | * #dd8888: for border | |
13 | * | |
14 | */ | |
15 | ||
f433d153 NR |
16 | html, body, .main { |
17 | margin: 0; | |
18 | padding: 0; | |
3fbc084c | 19 | font-family: Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif; |
f433d153 | 20 | font-size: 12px; |
f433d153 NR |
21 | height: 100%; |
22 | } | |
23 | ||
f433d153 NR |
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 { | |
8032f93f | 38 | margin: auto; |
f433d153 NR |
39 | } |
40 | ||
41 | .message { | |
3fbc084c NR |
42 | background-color: #ddffdd; |
43 | border: 1px solid #88dd88; | |
44 | clear: left; | |
45 | border-radius: 5px; | |
46 | padding: 5px; | |
47 | margin: 10px; | |
f433d153 NR |
48 | } |
49 | ||
074a8325 | 50 | .message.error { |
3fbc084c NR |
51 | background-color: #ffdddd; |
52 | border: 1px solid #dd8888; | |
f433d153 NR |
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 | ||
6b89e45c | 60 | a:not(.selected):hover { |
f433d153 NR |
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 | ||
6b89e45c NR |
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 | ||
f433d153 NR |
122 | .login { |
123 | width: 250px; | |
124 | display: flex; | |
125 | margin: auto; | |
e1ef24e0 | 126 | margin-top: 100px; |
f433d153 | 127 | flex-direction: column; |
599b05c7 | 128 | border: 1px solid #AAA391; |
f433d153 NR |
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 { | |
599b05c7 | 146 | padding: 5px; |
4bd7d202 | 147 | height: 36px; |
599b05c7 NR |
148 | border: 1px solid #AAA391; |
149 | border-radius: 5px; | |
150 | margin-top: 5px; | |
151 | margin-bottom: 5px; | |
152 | display: flex; | |
4bd7d202 NR |
153 | } |
154 | ||
155 | .filter > * { | |
156 | height: 36px; | |
599b05c7 NR |
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; | |
4bd7d202 NR |
173 | } |
174 | ||
599b05c7 | 175 | .filter input[name='optionNo'] { |
4bd7d202 NR |
176 | background-image: url('/clear-32x32.png'); |
177 | color: transparent; | |
178 | width: 36px; | |
f433d153 NR |
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; | |
4bd7d202 | 191 | padding: 5px; |
f433d153 NR |
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 { | |
599b05c7 | 203 | color: #AAA391; |
f433d153 NR |
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; | |
8032f93f | 223 | margin: auto; |
f433d153 NR |
224 | } |
225 | ||
6b89e45c | 226 | .bar.navbar { padding-left: calc(50% - (5 * (64px + 5px) / 2)); } |
198c7d1e | 227 | |
6b89e45c NR |
228 | .bar.optionbar.s1 { padding-left: calc(50% - (1 * (64px + 5px) / 2)); } |
229 | .bar.optionbar.s4 { padding-left: calc(50% - (4 * (64px + 5px) / 2)); } | |
a1ddc982 | 230 | .bar.optionbar.s5 { padding-left: calc(50% - (5 * (64px + 5px) / 2)); } |
f433d153 NR |
231 | |
232 | .bar.optionbar { | |
3fbc084c | 233 | bottom: 0; |
f433d153 NR |
234 | } |
235 | ||
f433d153 NR |
236 | .bar .button { |
237 | height: 54px; | |
238 | width: 54px; | |
6b89e45c | 239 | line-height: 54px; |
f433d153 NR |
240 | margin: 5px; |
241 | } | |
242 | ||
6b89e45c NR |
243 | .bar .gotobox { |
244 | display: inline-block; | |
3fbc084c NR |
245 | } |
246 | ||
6b89e45c NR |
247 | .bar .gotobox .items { |
248 | background-color: white; | |
249 | border: 1px solid gray; | |
250 | border-radius: 5px; | |
251 | width: 196px; | |
252 | margin: -5px; | |
253 | margin-left: -66px; | |
254 | max-height: 400px; | |
f433d153 NR |
255 | } |
256 | ||
6b89e45c NR |
257 | .bar .button.first { color: transparent; background-image: url('/arrow_double_left-32x32.png'); } |
258 | .bar .button.previous { color: transparent; background-image: url('/arrow_left-32x32.png'); } | |
259 | .bar .button.next { color: transparent; background-image: url('/arrow_right-32x32.png'); } | |
260 | .bar .button.last { color: transparent; background-image: url('/arrow_double_right-32x32.png'); } | |
f433d153 | 261 | |
a1ddc982 NR |
262 | .bar .button.back { color: transparent; background-image: url('/back-32x32.png'); } |
263 | .bar .button.zoomreal { color: transparent; background-image: url('/actual_size-32x32.png'); } | |
264 | .bar .button.zoomwidth { color: transparent; background-image: url('/fit_to_width-32x32.png'); } | |
265 | .bar .button.zoomwidthlimited { color: transparent; background-image: url('/fit_to_width_limited-32x32.png'); } | |
266 | .bar .button.zoomheight { color: transparent; background-image: url('/fit_to_height-32x32.png'); } | |
198c7d1e | 267 | |
db9146bc NR |
268 | .viewer { |
269 | padding-top: 64px; | |
270 | padding-bottom: 64px; | |
271 | } | |
272 | ||
599b05c7 NR |
273 | .viewer .title { |
274 | background-color: #AAA391; | |
275 | text-align: center; | |
276 | font-variant: small-caps; | |
277 | color: white; | |
278 | } | |
279 | ||
db9146bc NR |
280 | .viewer.img { |
281 | margin: auto; | |
282 | display: block; | |
283 | } | |
284 | ||
285 | a.viewer.link:hover { | |
286 | background-color: transparent; | |
287 | } | |
288 | ||
289 | .viewer.text { | |
290 | padding-left: 10px; | |
291 | padding-right: 10px; | |
292 | } | |
293 | ||
294 | .desc { | |
295 | display: flex; | |
6b675cd4 | 296 | flex-direction: column; |
599b05c7 | 297 | padding-top: 10px; |
db9146bc NR |
298 | } |
299 | ||
6b675cd4 | 300 | .desc .cover { |
599b05c7 | 301 | max-height: 280px; |
6b675cd4 NR |
302 | overflow: hidden; |
303 | } | |
304 | ||
305 | .desc .cover img { | |
306 | max-width: 80%; | |
307 | margin: auto; | |
308 | display: block; | |
599b05c7 NR |
309 | } |
310 | ||
83001824 | 311 | .desc .details .col.key { |
599b05c7 NR |
312 | font-weight: bold; |
313 | padding-left: 5px; | |
314 | padding-right: 5px; | |
315 | } | |
316 | ||
83001824 | 317 | .desc .details .col.value { |
599b05c7 | 318 | color: #AAA391; |
4bd7d202 NR |
319 | } |
320 | ||
a1ddc982 NR |
321 | @media(min-width: 800px) { |
322 | .main:not(.fullscreen) { | |
198c7d1e NR |
323 | max-width: 800px; |
324 | } | |
325 | ||
a1ddc982 | 326 | .main:not(.fullscreen) .bar.navbar { padding-left: calc(400px - (5 * (64px + 5px) / 2)); } |
198c7d1e | 327 | |
a1ddc982 NR |
328 | .main:not(.fullscreen) .bar.optionbar.s1 { padding-left: calc(400px - (1 * (64px + 5px) / 2)); } |
329 | .main:not(.fullscreen) .bar.optionbar.s4 { padding-left: calc(400px - (4 * (64px + 5px) / 2)); } | |
330 | .main:not(.fullscreen) .bar.optionbar.s5 { padding-left: calc(400px - (5 * (64px + 5px) / 2)); } | |
6b675cd4 | 331 | |
a1ddc982 NR |
332 | .main:not(.fullscreen) .desc { flex-direction: row; } |
333 | .main:not(.fullscreen) .desc .cover img { | |
6b675cd4 NR |
334 | width: 200px; |
335 | padding-right: 10px; | |
336 | } | |
198c7d1e | 337 | } |