koha-dev.rot13.org Git - srvgit/blob - 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 }
 302
 303 @media only screen and (max-width: 767px) {
 304     /* Screens below 767 pixels wide */
 305     a {
 306         &.title {
 307             font-size: 120%;
 308         }
 309     }
 310     #userresults {
 311         margin : 0 -20px;
 312     }
 313     .breadcrumb,
 314     #top-pages,
 315     .menu-collapse {
 316         display: none;
 317     }
 318     #search-facets,
 319     #menu {
 320         margin-bottom: .5em;
 321         h4 {
 322             display: block;
 323             margin : 0;
 324             padding : 0;
 325             a {
 326                 .border-radius-all(7px);
 327                 border-bottom: 0;
 328                 font-weight: normal;
 329                 padding: .7em .2em;
 330             }
 331         }
 332         ul {
 333             padding: 0;
 334         }
 335     }
 336     #menu {
 337         li {
 338             a {
 339                 .border-radius-all(0px);
 340                 border : 0;
 341                 display: block;
 342                 font-size: 120%;
 343                 text-decoration: none;
 344                 border-bottom: 1px solid #D8D8D8;
 345                 margin: 0;
 346             }
 347             &.active {
 348                 a {
 349                     border-top: 1px solid #D8D8D8;
 350                     border-right-width: 1px;
 351                 }
 352             }
 353             &:last-child {
 354                 a {
 355                     -webkit-border-radius: 0 0 7px 7px;
 356                        -moz-border-radius: 0 0 7px 7px;
 357                             border-radius: 0 0 7px 7px;
 358                 }
 359             }
 360         }
 361     }
 362     #search-facets {
 363         li {
 364             padding : .4em;
 365         }
 366         h5 {
 367             margin: .2em;
 368         }
 369     }
 370     #menu h4 a.menu-open,
 371     #search-facets h4 a.menu-open {
 372         -webkit-border-radius: 7px 7px 0 0;
 373            -moz-border-radius: 7px 7px 0 0;
 374                 border-radius: 7px 7px 0 0;
 375         border-bottom: 1px solid #D8D8D8;
 376     }
 377 }
 378
 379 @media only screen and (max-width: 800px) {
 380     /* Screens below 800 pixels wide */
 381     .cartlabel,
 382     .listslabel {
 383         display: none;
 384     }
 385     .navbar {
 386         .divider-vertical {
 387             margin : 0 2px;
 388         }
 389         #members {
 390             .divider-vertical {
 391                 margin : 0 9px;
 392             }
 393         }
 394     }
 395 }
 396
 397 @media only screen and (min-width: 768px) {
 398     /* Screens above 768 pixels wide */
 399     .main {
 400         margin-left: 20px;
 401         margin-right: 20px;
 402     }
 403     #menu {
 404         border : 0;
 405         .border-radius-all(0px);
 406         border-right : 1px solid #D8D8D8;
 407         h4 {
 408             display: none;
 409         }
 410         ul {
 411             padding: 1em 0 1em 0;
 412         }
 413     }
 414 }
 415
 416 @media only screen and (min-width: 768px) and (max-width: 984px) {
 417     /* Screens between 768 and 984 pixels wide */
 418     #oh:after {
 419             content: " Between 768 and 984 pixels. ";
 420     }
 421     .librarypulldown .transl1 {
 422         width : 38%;
 423     }
 424 }
 425
 426 @media only screen and (max-width: 984px) {
 427     /* Screens up to 984 pixels wide */
 428     // #oh:after {
 429     //         content: " Below 984 pixels. ";
 430     // }
 431 }
 432
 433 @media only screen and (min-width: 984px) {
 434     /* Screens above 969 pixels wide */
 435     #oh:after {
 436             content: " Above 984 pixels. ";
 437     }
 438     .librarypulldown .transl1 {
 439         width : 53%;
 440     }
 441
 442 }
 443
 444 @media only screen and (max-width: 1040px) {
 445     .pg_menu {
 446         li {
 447             a {
 448                 float: none;
 449                 text-align : left;
 450             }
 451             &.back_results {
 452                 a {
 453                     border : 1px solid #D0D0D0;
 454                     border-width : 1px 0 1px 0;
 455                 }
 456             }
 457         }
 458     }
 459     #ulactioncontainer {
 460         min-width : 0;
 461     }
 462 }