Bug 11381: improve styling of IDreamBooks content in bootstrap theme
[koha.git] / koha-tmpl / opac-tmpl / bootstrap / less / responsive.less
1 @import "mixins.less";
2 @media only screen and (min-width: 0px) and (max-width: 304px) {
3     /* Screens bewteen 0 and 304 pixels wide */
4     #oh:after {
5             content: "(min-width: 0px) and (max-width: 304px)";
6     }
7     input,
8     select,
9     textarea {
10         width : auto;
11         max-width : 11em;
12     }
13 }
14
15 @media only screen and (min-width: 0px) and (max-width: 390px){
16     /* Screens bewteen 0 and 390 pixels wide */
17     #oh:after {
18             content: "(min-width: 0px) and (max-width: 390px)";
19     }
20     .ui-tabs .ui-tabs-nav li a,
21     .statictabs li a {
22         padding: .1em .5em;
23     }
24     #views {
25         border : 0;
26         padding : 0;
27         margin : 0;
28     }
29     .view {
30         padding : 0;
31         a,
32         span {
33             border : 1px solid #C9C9C9;
34             .border-radius-all(4px);
35             font-size : 80%;
36             padding : 0.3em 0.4em 4px 26px
37         }
38     }
39     .input-fluid {
40         width : 90%;
41     }
42 }
43
44 @media only screen and (min-width: 305px) and (max-width: 341px) {
45     /* Screens bewteen 305 and 341 pixels wide */
46     #oh:after {
47             content: "(min-width: 305px) and (max-width: 341px)";
48     }
49 }
50
51 @media only screen and (min-width: 342px) and (max-width: 479px) {
52     /* Screens bewteen 342 and 479 pixels wide */
53     #oh:after {
54             content: "(min-width: 342px) and (max-width: 479px)";
55     }
56     .input-fluid {
57         width : 75%;
58     }
59 }
60 /* Override Bootstrap Responsive CSS fixed navbar */
61 @media (max-width: 979px) {
62   .navbar-fixed-top,
63   .navbar-fixed-bottom {
64       position: fixed;
65       margin-left: 0px;
66       margin-right: 0px;
67   }
68 }
69 @media only screen and (max-width: 608px) {
70     /* Screens below 608 pixels wide */
71     fieldset {
72         &.rows {
73             label {
74                 display: block;
75                 float: none;
76                 text-align: left;
77             }
78             li {
79                 padding-bottom : .5em;
80             }
81             ol {
82                 margin-left : 0;
83             }
84         }
85     }
86     body {
87         padding: 0;
88     }
89     .tdlabel {
90         display: inline;
91     }
92     .navbar-fixed-top,
93     .navbar-static-top {
94         margin : 0;
95     }
96     .navbar-inner {
97         padding : 0;
98     }
99     .checkall,
100     .clearall,
101     .highlight_controls,
102     #selections-toolbar,
103     .selectcol,
104     .list-actions,
105     #remove-selected {
106         display: none;
107     }
108     .table td.bibliocol {
109         padding-left: 1.3em;
110     }
111     .actions {
112         display: block;
113         a, #login4tags {
114             background-color: #F2F2EF;
115             border : 1px solid #DDD;
116             .border-radius-all(4px);
117             font-weight: bold;
118             display: block;
119             font-size: 120%;
120             margin: 2px 0;
121         }
122         .label {
123             display: block;
124             font-weight: bold;
125         }
126         #login4tags {
127             margin-right: 1em;
128         }
129     }
130     #opac-main-search {
131         button,
132         input,
133         select,
134         .librarypulldown .transl1,
135         .input-append {
136             display: block;
137             width : 97%;
138             max-width: 100%;
139             margin : .5em 0;
140             .border-radius-all(5px);
141         }
142         .input-append {
143             margin : 0;
144             width: 100%;
145         }
146         .librarypulldown .transl1 {
147             width : 94.5%;
148         }
149     }
150     #toolbar .resort {
151         font-size : 14px;
152         max-width: 100%;
153         margin : .5em 0;
154         padding : 4px 6px;
155         .border-radius-all(5px);
156     }
157     .mastheadsearch {
158         margin : 0;
159         .border-radius-all(0px);
160
161     }
162     .main {
163         margin : .5em 0;
164         padding : 15px;
165         .border-radius-all(0px);
166     }
167     .breadcrumb {
168         margin : 10px 0;
169     }
170     #moresearches {
171         text-align: center;
172     }
173     #searchsubmit {
174         font-weight: bold;
175     }
176     .ui-tabs-panel,
177     .tabs-container,
178     #topissues,
179     #usertags,
180     #usersuggestions {
181         .item-thumbnail {
182             margin : .5em 0 0 .5em;
183         }
184         .table-bordered {
185             border : none;
186         }
187         .table {
188             th,
189             thead {
190                 display: none;
191             }
192             td {
193                 border-right : 1px solid #dddddd;
194                 border-left : 1px solid #dddddd;
195                 border-top : 0;
196                 display : block;
197                 padding : .2em;
198             }
199             p {
200                 margin-bottom : 2px;
201             }
202         }
203         tr {
204             display: block;
205             margin-bottom : .6em;
206             td:first-child {
207                 border-top : 1px solid #dddddd;
208                 border-radius: 5px 5px 0 0;
209             }
210             td:last-child {
211                 border-radius: 0 0 5px 5px;
212                 border-bottom : 2px solid #CACACA;
213             }
214         }
215     }
216     .no-image {
217         display : none;
218     }
219 }
220
221 @media only screen and (max-width: 700px) {
222     /* Screens below 700 pixels wide */
223     #opac-main-search {
224         label {
225             display: none;
226         }
227     }
228     #logo {
229         background: transparent url("../lib/bootstrap/img/glyphicons-halflings-white.png") no-repeat;
230         background-position: 0 -24px;
231         margin: 14px 14px 0 14px;
232         width: 14px;
233         a {
234             padding:14px 0 0;
235             width:14px;
236         }
237     }
238     #user-menu-trigger {
239         display: inline;
240         margin-right : 12px;
241     }
242     #members {
243         display: none;
244         clear : both;
245         li {
246             padding-right: 20px;
247             text-align: right;
248             border-bottom : 1px solid #555;
249             &:first-child {
250                 border-top : 1px solid #555;
251             }
252             &:last-child {
253                 border-bottom : none;
254             }
255         }
256         .nav {
257             float: none;
258             &.pull-right {
259                 float: none;
260             }
261         }
262         .nav>li {
263             float: none;
264         }
265         .divider-vertical {
266             border : 0;
267             height : 0;
268             margin : 0;
269         }
270     }
271 }
272
273 @media only screen and (min-width: 480px) and (max-width: 608px) {
274     /* Screens between 480 and 608 pixels wide */
275     #oh:after {
276             content: " Between 480 pixels and 608 pixels. ";
277     }
278     .input-fluid {
279         width : 75%;
280     }
281 }
282
283 @media only screen and (min-width: 608px) and (max-width: 767px) {
284     /* Screens between 608 and 767 pixels wide */
285     #oh:after {
286             content: " Between 608 pixels and 767 pixels. ";
287     }
288     .main {
289         padding: 0.8em 20px;
290     }
291     .breadcrumb {
292         margin : 10px 0;
293     }
294     .navbar-static-bottom {
295         margin-left : -20px;
296         margin-right : -20px;
297     }
298 }
299
300 @media only screen and (max-width: 767px) {
301     /* Screens below 767 pixels wide */
302     a {
303         &.title {
304             font-size: 120%;
305         }
306     }
307     #userresults {
308         margin : 0 -20px;
309     }
310     .breadcrumb,
311     #top-pages,
312     .menu-collapse {
313         display: none;
314     }
315     #search-facets,
316     #menu {
317         margin-bottom: .5em;
318         h4 {
319             display: block;
320             margin : 0;
321             padding : 0;
322             a {
323                 .border-radius-all(7px);
324                 border-bottom: 0;
325                 font-weight: normal;
326                 padding: .7em .2em;
327             }
328         }
329         ul {
330             padding: 0;
331         }
332     }
333     #menu {
334         li {
335             a {
336                 .border-radius-all(0px);
337                 border : 0;
338                 display: block;
339                 font-size: 120%;
340                 text-decoration: none;
341                 border-bottom: 1px solid #D8D8D8;
342                 margin: 0;
343             }
344             &.active {
345                 a {
346                     border-top: 1px solid #D8D8D8;
347                     border-right-width: 1px;
348                 }
349             }
350             &:last-child {
351                 a {
352                     -webkit-border-radius: 0 0 7px 7px;
353                        -moz-border-radius: 0 0 7px 7px;
354                             border-radius: 0 0 7px 7px;
355                 }
356             }
357         }
358     }
359     #search-facets {
360         li {
361             padding : .4em;
362         }
363         h5 {
364             margin: .2em;
365         }
366     }
367     #menu h4 a.menu-open,
368     #search-facets h4 a.menu-open {
369         -webkit-border-radius: 7px 7px 0 0;
370            -moz-border-radius: 7px 7px 0 0;
371                 border-radius: 7px 7px 0 0;
372         border-bottom: 1px solid #D8D8D8;
373     }
374 }
375
376 @media only screen and (max-width: 800px) {
377     /* Screens below 800 pixels wide */
378     .cartlabel,
379     .listslabel {
380         display: none;
381     }
382     .navbar {
383         .divider-vertical {
384             margin : 0 2px;
385         }
386         #members {
387             .divider-vertical {
388                 margin : 0 9px;
389             }
390         }
391     }
392 }
393
394 @media only screen and (min-width: 768px) {
395     /* Screens above 768 pixels wide */
396     .main {
397         margin-left: 20px;
398         margin-right: 20px;
399     }
400     #menu {
401         border : 0;
402         .border-radius-all(0px);
403         border-right : 1px solid #D8D8D8;
404         h4 {
405             display: none;
406         }
407         ul {
408             padding: 1em 0 1em 0;
409         }
410     }
411 }
412
413 @media only screen and (min-width: 768px) and (max-width: 984px) {
414     /* Screens between 768 and 984 pixels wide */
415     #oh:after {
416             content: " Between 768 and 984 pixels. ";
417     }
418     .librarypulldown .transl1 {
419         width : 38%;
420     }
421 }
422
423 @media only screen and (max-width: 984px) {
424     /* Screens up to 984 pixels wide */
425     // #oh:after {
426     //         content: " Below 984 pixels. ";
427     // }
428 }
429
430 @media only screen and (min-width: 984px) {
431     /* Screens above 969 pixels wide */
432     #oh:after {
433             content: " Above 984 pixels. ";
434     }
435     .librarypulldown .transl1 {
436         width : 53%;
437     }
438
439 }
440
441 @media only screen and (max-width: 1040px) {
442     .pg_menu {
443         li {
444             a {
445                 float: none;
446                 text-align : left;
447             }
448             &.back_results {
449                 a {
450                     border : 1px solid #D0D0D0;
451                     border-width : 1px 0 1px 0;
452                 }
453             }
454         }
455     }
456     #ulactioncontainer {
457         min-width : 0;
458     }
459 }