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