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