app/Resources/static/themes/material/css/main.css

   1 /* ==========================================================================
   2    Sommaire
   3
   4    0 = Common
   5    1 = Nav
   6    2 = Side-nav
   7    3 = Filters slider
   8    4 = Cards
   9    5 = Article
  10    6 = Media queries
  11    7 = Font
  12    8 = Others
  13
  14    ========================================================================== */
  15
  16 /* ==========================================================================
  17    0 = Common
  18    ========================================================================== */
  19
  20 @font-face {
  21   font-family: icomoon;
  22   src: url("../fonts/icomoon.eot");
  23   src:
  24     url("../fonts/icomoon.eot#iefix") format("embedded-opentype"),
  25     url("../fonts/icomoon.ttf") format("truetype"),
  26     url("../fonts/icomoon.woff") format("woff"),
  27     url("../fonts/icomoon.svg#icomoon") format("svg");
  28   font-weight: normal;
  29   font-style: normal;
  30 }
  31
  32 @font-face {
  33   font-family: 'Material Icons';
  34   font-style: normal;
  35   font-weight: 400;
  36   src: url(../fonts/MaterialIcons-Regular.eot);
  37
  38   /* For IE6-8 */
  39   src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype");
  40 }
  41
  42 .material-icons {
  43   font-family: 'Material Icons';
  44   font-weight: normal;
  45   font-style: normal;
  46   font-size: 24px;  /* Preferred icon size */
  47   width: 1em;
  48   height: 1em;
  49   display: inline-block;
  50   line-height: 1;
  51   text-transform: none;
  52   letter-spacing: normal;
  53   word-wrap: normal;
  54   white-space: nowrap;
  55   direction: ltr;
  56
  57   /* Support for all WebKit browsers. */
  58   -webkit-font-smoothing: antialiased;
  59
  60   /* Support for Safari and Chrome. */
  61   text-rendering: optimizeLegibility;
  62
  63   /* Support for Firefox. */
  64   -moz-osx-font-smoothing: grayscale;
  65
  66   /* Support for IE. */
  67   font-feature-settings: 'liga';
  68 }
  69
  70 [class^="icon-"],
  71 [class*=" icon-"] {
  72   font-family: icomoon;
  73   speak: none;
  74   font-style: normal;
  75   font-weight: normal;
  76   font-variant: normal;
  77   text-transform: none;
  78   line-height: 1;
  79
  80   /* Better Font Rendering =========== */
  81   -webkit-font-smoothing: antialiased;
  82   -moz-osx-font-smoothing: grayscale;
  83 }
  84
  85 body {
  86   display: flex;
  87   min-height: 100vh;
  88   flex-direction: column;
  89   background: #f0f0f0;
  90 }
  91
  92 body.login main {
  93   padding: 0;
  94 }
  95
  96 .border-bottom {
  97   border-bottom: 1px solid #ddd;
  98 }
  99
 100 nav,
 101 main,
 102 footer {
 103   padding-left: 240px;
 104 }
 105
 106 main,
 107 #content,
 108 .valign-wrapper {
 109   height: 100%;
 110 }
 111
 112 #main {
 113   flex: 1 0 auto;
 114 }
 115
 116 .results {
 117   height: 1em;
 118   line-height: 30px;
 119 }
 120
 121 .results .nb-results,
 122 .results .pagination {
 123   margin: 15px;
 124   margin-bottom: 0;
 125 }
 126
 127 .pagination {
 128   float: right;
 129 }
 130
 131 .pagination ul {
 132   margin: 0 !important;
 133 }
 134
 135 .pagination li {
 136   padding: 0;
 137 }
 138
 139 .pagination a {
 140   padding: 0 10px;
 141   height: 30px;
 142   display: block;
 143 }
 144
 145 .pagination .disabled {
 146   margin-right: 10px;
 147   margin-left: 10px;
 148 }
 149
 150 div.pagination ul .prev.disabled,
 151 div.pagination ul .next.disabled {
 152   display: none;
 153 }
 154
 155 .pagination li.active span {
 156   padding: 0 10px;
 157   height: 30px;
 158   display: block;
 159   color: #fff;
 160 }
 161
 162 .page-footer .footer-copyright p {
 163   display: inline;
 164 }
 165
 166 .hidden {
 167   display: none;
 168 }
 169
 170 .picker__date-display {
 171   display: none;
 172 }
 173
 174 footer.page-footer {
 175   margin-top: 10px;
 176   padding-top: 10px;
 177 }
 178
 179 footer .row {
 180   margin-bottom: 10px;
 181 }
 182
 183 /* ==========================================================================
 184    1 = Nav
 185    ========================================================================== */
 186
 187 nav input {
 188   color: #aaa;
 189 }
 190
 191 .nav-wrapper .button-collapse {
 192   padding: 0 15px;
 193 }
 194
 195 .nav-input {
 196   display: none;
 197 }
 198
 199 .nav-panels {
 200   overflow: hidden;
 201 }
 202
 203 .nav-panel-buttom li {
 204   max-height: 64px;
 205 }
 206
 207 .nav-panels {
 208   transition: background 0.2s ease;
 209 }
 210
 211 .nav-panel-add .add,
 212 .nav-panel-search .search,
 213 .nav-panels .close {
 214   color: #444 !important;
 215 }
 216
 217 .nav-panels .action {
 218   padding-left: 0.75rem;
 219   font-size: 2.1rem;
 220   white-space: nowrap;
 221 }
 222
 223 .nav-panels .input-field input {
 224   display: block;
 225   line-height: inherit;
 226   padding-left: 4rem !important;
 227   width: calc(100% - 8rem);
 228 }
 229
 230 .nav-panels .input-field input:focus {
 231   background-color: #fff;
 232   border: 0;
 233   box-shadow: none;
 234   color: #444;
 235 }
 236
 237 .input-field.nav-panel-add label {
 238   left: 1rem;
 239 }
 240
 241 .input-field.nav-panel-add .close {
 242   position: absolute;
 243   top: 0;
 244   right: 1rem;
 245   color: transparent;
 246   cursor: pointer;
 247   font-size: 2rem;
 248   transition: 0.3s color;
 249 }
 250
 251 #button_filters {
 252   display: none;
 253 }
 254
 255 #button_export {
 256   display: none;
 257 }
 258
 259 /* ==========================================================================
 260    2 = Side-nav
 261    ========================================================================== */
 262
 263 .side-nav.fixed a {
 264   font-size: 13px;
 265   line-height: 44px;
 266   height: 44px;
 267 }
 268
 269 .side-nav .collapsible-header,
 270 .side-nav.fixed .collapsible-header {
 271   height: 45px;
 272   line-height: 44px;
 273   padding: 0 20px;
 274 }
 275
 276 .bold > a {
 277   font-weight: bold;
 278 }
 279
 280 .side-nav > li.logo {
 281   line-height: 0;
 282   text-align: center;
 283 }
 284
 285 #main .logo a {
 286   height: 100pt;
 287 }
 288
 289 #main .logo img {
 290   height: 100pt;
 291   width: 100pt;
 292 }
 293
 294 #main .logo:hover {
 295   background: transparent;
 296 }
 297
 298 .side-nav li {
 299   padding: 0;
 300 }
 301
 302 .side-nav a {
 303   margin: 0 1rem;
 304 }
 305
 306 span.numberItems {
 307   float: right;
 308 }
 309
 310 /* ==========================================================================
 311  * 3 = Filters slider
 312  * ========================================================================== */
 313
 314 #filters button {
 315   padding: 0;
 316   width: 100%;
 317 }
 318
 319 .side-nav.fixed.right-aligned {
 320   right: -250px;
 321   left: auto !important;
 322   overflow-y: visible;
 323 }
 324
 325 #filters div.with-checkbox {
 326   height: 3rem;
 327   margin-top: 0;
 328 }
 329
 330 /* ==========================================================================
 331    4 = Cards
 332    ========================================================================== */
 333
 334 main #content {
 335   padding: 0 0.5rem;
 336 }
 337
 338 main ul.row {
 339   padding: 0 0.75rem;
 340 }
 341
 342 .data .card .card-body {
 343   height: 22em;
 344   overflow: hidden;
 345 }
 346
 347 .card .card-content .card-title {
 348   line-height: 32px;
 349 }
 350
 351 .card .card-entry-labels {
 352   position: absolute;
 353   top: 10px;
 354   z-index: 90;
 355   max-width: 50%;
 356 }
 357
 358 .card .card-entry-labels li {
 359   margin: 10px 10px 10px auto;
 360   padding: 5px 12px 5px 16px;
 361   background-color: rgba(0, 151, 167, 0.85);
 362   border-radius: 0 3px 3px 0;
 363   color: #fff;
 364   cursor: default;
 365   max-height: 2em;
 366   overflow: hidden;
 367   text-overflow: ellipsis;
 368   white-space: nowrap;
 369 }
 370
 371 .card .card-entry-labels-hidden {
 372   margin-top: 5px;
 373 }
 374
 375 .card .card-entry-labels-hidden li {
 376   display: inline-block;
 377   background-color: rgba(0, 151, 167, 0.85);
 378   margin: 0 5px;
 379   padding: 5px 12px;
 380   border-radius: 3px;
 381   color: #fff;
 382   max-height: 2em;
 383   max-width: calc(100% - 15px);
 384   overflow: hidden;
 385   text-overflow: ellipsis;
 386   white-space: nowrap;
 387 }
 388
 389 .card .card-content .estimatedTime {
 390   margin-bottom: 10px;
 391 }
 392
 393 .card .card-action .original {
 394   line-height: 24px;
 395 }
 396
 397 .card .card-action ul.links {
 398   margin: 0;
 399   font-size: 24px;
 400   line-height: 24px;
 401 }
 402
 403 .card .card-action a {
 404   color: #fff;
 405   margin: 0;
 406 }
 407
 408 .card .card-action a:hover {
 409   color: #fff;
 410 }
 411
 412 .settings .div_tabs {
 413   padding-bottom: 15px;
 414 }
 415
 416 .card.sw {
 417   max-width: 370px;
 418   margin-left: auto;
 419   margin-right: auto;
 420 }
 421
 422 .card .card-image {
 423   height: 14em;
 424 }
 425
 426 .card .card-image .preview {
 427   height: 14em;
 428   background-size: cover;
 429   background-repeat: no-repeat;
 430   background-position: 50%;
 431 }
 432
 433 /* ==========================================================================
 434    5 = Article
 435    ========================================================================== */
 436
 437 #article {
 438   font-size: 20px;
 439   margin: 0 auto;
 440   max-width: 40em;
 441 }
 442
 443 #article img,
 444 #article figure {
 445   max-width: 100%;
 446   height: auto;
 447 }
 448
 449 #article > header > h1 {
 450   font-size: 2em;
 451 }
 452
 453 .reader-mode {
 454   width: 95px !important;
 455   transition: width 0.2s ease;
 456 }
 457
 458 .reader-mode:hover {
 459   width: 240px !important;
 460 }
 461
 462 .reader-mode .collapsible-body {
 463   height: 0;
 464   overflow: hidden;
 465 }
 466
 467 .reader-mode:hover .collapsible-body {
 468   height: auto;
 469 }
 470
 471 .reader-mode span {
 472   opacity: 0;
 473   transition: opacity 0.2s ease;
 474 }
 475
 476 .reader-mode:hover span {
 477   opacity: 1;
 478 }
 479
 480 .progress {
 481   position: fixed;
 482   top: 0;
 483   width: 100%;
 484   height: 3px;
 485   margin: 0;
 486   z-index: 9999;
 487 }
 488
 489 #article aside .link {
 490   color: #000;
 491   font-size: 0.8em;
 492   text-decoration: none;
 493 }
 494
 495 #article aside #list {
 496   float: right;
 497   margin: 0 15px 10px;
 498 }
 499
 500 #article aside .chip {
 501   background-color: rgba(0, 151, 167, 0.85);
 502   color: #fff;
 503   padding: 0 15px 0 10px;
 504 }
 505
 506 #article aside .chip i {
 507   color: #fff;
 508 }
 509
 510 /* ==========================================================================
 511    6 = Media queries
 512    ========================================================================== */
 513
 514 @media only screen and (max-width: 992px) {
 515   header,
 516   main,
 517   footer {
 518     padding-left: 0;
 519   }
 520   nav,
 521   main,
 522   footer {
 523     padding-left: 0;
 524   }
 525   .pagination {
 526     width: auto;
 527   }
 528   .reader-mode {
 529     width: 240px !important;
 530   }
 531   .reader-mode span {
 532     opacity: 1;
 533   }
 534   .tabs {
 535     display: inline-block;
 536     height: auto;
 537   }
 538   .tab {
 539     min-width: 100%;
 540   }
 541   .indicator {
 542     display: none;
 543   }
 544   .pagination li.prev,
 545   .pagination li.next {
 546     width: auto;
 547   }
 548 }
 549
 550 @media only screen and (min-width: 400px) {
 551   .nav-panel-buttom {
 552     float: right;
 553   }
 554 }
 555
 556 @media only screen and (min-width: 993px) and (max-width: 1180px) {
 557   .row .col.l1 {
 558     width: 25%;
 559     margin-left: 0;
 560   }
 561   .row .col.l2 {
 562     width: 33.33333%;
 563     margin-left: 0;
 564   }
 565   .row .col.l3 {
 566     width: 41.66667%;
 567     margin-left: 0;
 568   }
 569   .row .col.l4 {
 570     width: 50%;
 571     margin-left: 0;
 572   }
 573   .row .col.l5 {
 574     width: 58.33333%;
 575     margin-left: 0;
 576   }
 577   .row .col.l6 {
 578     width: 66.66667%;
 579     margin-left: 0;
 580   }
 581   .row .col.l7 {
 582     width: 75%;
 583     margin-left: 0;
 584   }
 585   .row .col.l8 {
 586     width: 83.33333%;
 587     margin-left: 0;
 588   }
 589   .row .col.l9 {
 590     width: 91.66667%;
 591     margin-left: 0;
 592   }
 593   .row .col.l10 {
 594     width: 100%;
 595     margin-left: 0;
 596   }
 597 }
 598
 599 @media only screen and (max-width: 350px) {
 600   .nb-results {
 601     display: none;
 602   }
 603 }
 604
 605 /* ==========================================================================
 606    7 = Font
 607    ========================================================================== */
 608
 609 .icon-google-plus2::before {
 610   content: "\ea89";
 611 }
 612
 613 .icon-facebook2::before {
 614   content: "\ea8d";
 615 }
 616
 617 .icon-twitter::before {
 618   content: "\ea91";
 619 }
 620
 621 .icon-apple::before {
 622   content: "\eabf";
 623 }
 624
 625 .icon-android::before {
 626   content: "\eac1";
 627 }
 628
 629 .icon-chrome::before {
 630   content: "\eae5";
 631 }
 632
 633 .icon-firefox::before {
 634   content: "\eae6";
 635 }
 636
 637 footer [class^="icon-"],
 638 footer [class*=" icon-"] {
 639   font-size: 2em;
 640   transition: text-shadow 0.2s ease;
 641   padding-right: 10px;
 642 }
 643
 644 footer [class^="icon-"]:hover,
 645 footer [class*=" icon-"]:hover {
 646   text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 647 }
 648
 649 /* ==========================================================================
 650    8 = Others
 651    ========================================================================== */
 652
 653 /* force height on non-input field in the settings page */
 654 div.settings div.input-field div,
 655 div.settings div.input-field ul {
 656   margin-top: 40px;
 657 }
 658
 659 /* but avoid to kill all file input */
 660 div.settings div.file-field div {
 661   margin-top: inherit;
 662 }