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 }