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