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)); } | |
f433d153 NR |
230 | |
231 | .bar.optionbar { | |
3fbc084c | 232 | bottom: 0; |
f433d153 NR |
233 | } |
234 | ||
f433d153 NR |
235 | .bar .button { |
236 | height: 54px; | |
237 | width: 54px; | |
6b89e45c | 238 | line-height: 54px; |
f433d153 NR |
239 | margin: 5px; |
240 | } | |
241 | ||
6b89e45c NR |
242 | .bar .gotobox { |
243 | display: inline-block; | |
3fbc084c NR |
244 | } |
245 | ||
6b89e45c NR |
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; | |
f433d153 NR |
254 | } |
255 | ||
6b89e45c NR |
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'); } | |
f433d153 | 260 | |
6b89e45c NR |
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'); } | |
198c7d1e | 265 | |
db9146bc NR |
266 | .viewer { |
267 | padding-top: 64px; | |
268 | padding-bottom: 64px; | |
269 | } | |
270 | ||
599b05c7 NR |
271 | .viewer .title { |
272 | background-color: #AAA391; | |
273 | text-align: center; | |
274 | font-variant: small-caps; | |
275 | color: white; | |
276 | } | |
277 | ||
db9146bc NR |
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; | |
6b675cd4 | 294 | flex-direction: column; |
599b05c7 | 295 | padding-top: 10px; |
db9146bc NR |
296 | } |
297 | ||
6b675cd4 | 298 | .desc .cover { |
599b05c7 | 299 | max-height: 280px; |
6b675cd4 NR |
300 | overflow: hidden; |
301 | } | |
302 | ||
303 | .desc .cover img { | |
304 | max-width: 80%; | |
305 | margin: auto; | |
306 | display: block; | |
599b05c7 NR |
307 | } |
308 | ||
83001824 | 309 | .desc .details .col.key { |
599b05c7 NR |
310 | font-weight: bold; |
311 | padding-left: 5px; | |
312 | padding-right: 5px; | |
313 | } | |
314 | ||
83001824 | 315 | .desc .details .col.value { |
599b05c7 | 316 | color: #AAA391; |
4bd7d202 NR |
317 | } |
318 | ||
198c7d1e NR |
319 | @media(min-width: 800px) { |
320 | .main { | |
321 | max-width: 800px; | |
322 | } | |
323 | ||
6b89e45c | 324 | .bar.navbar { padding-left: calc(400px - (5 * (64px + 5px) / 2)); } |
198c7d1e | 325 | |
6b89e45c NR |
326 | .bar.optionbar.s1 { padding-left: calc(400px - (1 * (64px + 5px) / 2)); } |
327 | .bar.optionbar.s4 { padding-left: calc(400px - (4 * (64px + 5px) / 2)); } | |
6b675cd4 NR |
328 | |
329 | .desc { flex-direction: row; } | |
330 | .desc .cover img { | |
331 | width: 200px; | |
332 | padding-right: 10px; | |
333 | } | |
198c7d1e | 334 | } |