update from master
[fanfix.git] / 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 }