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