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