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