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