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 /**
  21  *
  22  * Material icons
  23  *
  24  */
  25
  26 @font-face {
  27   font-family: 'Material Icons';
  28   font-style: normal;
  29   font-weight: 400;
  30   src: url(../fonts/MaterialIcons-Regular.eot);
  31
  32   /* For IE6-8 */
  33   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");
  34 }
  35
  36 .material-icons {
  37   font-family: 'Material Icons';
  38   font-weight: normal;
  39   font-style: normal;
  40   font-size: 24px;  /* Preferred icon size */
  41   width: 1em;
  42   height: 1em;
  43   display: inline-block;
  44   line-height: 1;
  45   text-transform: none;
  46   letter-spacing: normal;
  47   word-wrap: normal;
  48   white-space: nowrap;
  49   direction: ltr;
  50
  51   /* Support for all WebKit browsers. */
  52   -webkit-font-smoothing: antialiased;
  53
  54   /* Support for Safari and Chrome. */
  55   text-rendering: optimizeLegibility;
  56
  57   /* Support for Firefox. */
  58   -moz-osx-font-smoothing: grayscale;
  59
  60   /* Support for IE. */
  61   font-feature-settings: 'liga';
  62 }
  63
  64 /* Rules for sizing the icon. */
  65 .material-icons.md-18 { font-size: 18px; }
  66 .material-icons.md-24 { font-size: 24px; }
  67 .material-icons.md-36 { font-size: 36px; }
  68 .material-icons.md-48 { font-size: 48px; }
  69
  70 /* Rules for using icons as black on a light background. */
  71 .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
  72 .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
  73
  74 /* Rules for using icons as white on a dark background. */
  75 .material-icons.md-light { color: rgba(255, 255, 255, 1); }
  76 .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
  77
  78 /**
  79  *
  80  * Icomoon icons
  81  *
  82  */
  83
  84 @font-face {
  85   font-family: icomoon;
  86   src: url("../fonts/IcoMoon-Free.ttf");
  87   font-weight: normal;
  88   font-style: normal;
  89 }
  90
  91 [class^="icon-"]::before,
  92 [class*=" icon-"]::before {
  93   font-family: icomoon;
  94   speak: none;
  95   font-style: normal;
  96   font-weight: normal;
  97   font-variant: normal;
  98   text-transform: none;
  99   line-height: 1;
 100   background-size: 24px;
 101
 102   /* Enable Ligatures ================ */
 103   letter-spacing: 0;
 104   -webkit-font-feature-settings: "liga";
 105   -moz-font-feature-settings: "liga=1";
 106   -moz-font-feature-settings: "liga";
 107   -ms-font-feature-settings: "liga" 1;
 108   -o-font-feature-settings: "liga";
 109   font-feature-settings: "liga";
 110
 111   /* Better Font Rendering =========== */
 112   -webkit-font-smoothing: antialiased;
 113   -moz-osx-font-smoothing: grayscale;
 114 }
 115
 116 .icon-image {
 117   background-size: 16px;
 118   background-repeat: no-repeat;
 119   padding-right: 1em !important;
 120   padding-left: 1em !important;
 121 }
 122
 123 .icon-eye::before {
 124   content: "\e9ce";
 125 }
 126
 127 .icon-no-eye::before {
 128   content: "\e9d1";
 129 }
 130
 131 .icon-calendar::before {
 132   content: "\e953";
 133 }
 134
 135 .icon-mail::before {
 136   content: "\ea86";
 137 }
 138
 139 .icon-time::before {
 140   content: "\e952";
 141 }
 142
 143 /* Carrot (http://carrot.org) */
 144 .icon-image--carrot {
 145   background-image: url("../../_global/img/icons/carrot-icon--black.png");
 146 }
 147
 148 /* Diaspora */
 149 .icon-image--diaspora {
 150   background-image: url("../../_global/img/icons/diaspora-icon--black.png");
 151 }
 152
 153 /* Unmark.it */
 154 .icon-image--unmark {
 155   background-image: url("../../_global/img/icons/unmark-icon--black.png");
 156 }
 157
 158 /* Shaarli */
 159 .icon-image--shaarli {
 160   background-image: url("../../_global/img/icons/shaarli.png");
 161 }
 162
 163 body {
 164   display: flex;
 165   min-height: 100vh;
 166   flex-direction: column;
 167   background: #fafafa;
 168 }
 169
 170 body.login main {
 171   padding: 0;
 172   min-height: 100vh;
 173 }
 174
 175 .border-bottom {
 176   border-bottom: 1px solid #ddd;
 177 }
 178
 179 nav,
 180 main,
 181 footer {
 182   padding-left: 240px;
 183 }
 184
 185 main,
 186 #content,
 187 .valign-wrapper {
 188   height: 100%;
 189 }
 190
 191 #main {
 192   flex: 1 0 auto;
 193 }
 194
 195 .results {
 196   height: 1em;
 197   line-height: 30px;
 198 }
 199
 200 .results .nb-results,
 201 .results .pagination {
 202   margin: 15px;
 203   margin-bottom: 0;
 204 }
 205
 206 .pagination {
 207   float: right;
 208 }
 209
 210 .pagination ul {
 211   margin: 0 !important;
 212 }
 213
 214 .pagination li {
 215   padding: 0;
 216 }
 217
 218 .pagination a {
 219   padding: 0 10px;
 220   height: 30px;
 221   display: block;
 222 }
 223
 224 .pagination .disabled {
 225   margin-right: 10px;
 226   margin-left: 10px;
 227 }
 228
 229 div.pagination ul .prev.disabled,
 230 div.pagination ul .next.disabled {
 231   display: none;
 232 }
 233
 234 .pagination li.active span {
 235   padding: 0 10px;
 236   height: 30px;
 237   display: block;
 238   color: #fff;
 239 }
 240
 241 .page-footer .footer-copyright {
 242   min-width: 50px;
 243   height: auto !important;
 244   line-height: 1em !important;
 245 }
 246
 247 .page-footer .footer-copyright p {
 248   text-overflow: ellipsis;
 249   white-space: nowrap;
 250   overflow: hidden;
 251   display: block;
 252 }
 253
 254 .hidden {
 255   display: none;
 256 }
 257
 258 .picker__date-display {
 259   display: none;
 260 }
 261
 262 footer.page-footer {
 263   margin-top: 10px;
 264   padding-top: 0;
 265 }
 266
 267 footer .row {
 268   margin-bottom: 10px;
 269 }
 270
 271 /* ==========================================================================
 272    1 = Nav
 273    ========================================================================== */
 274
 275 nav input {
 276   color: #aaa;
 277 }
 278
 279 .nav-wrapper .button-collapse {
 280   padding: 0 15px;
 281 }
 282
 283 .nav-input {
 284   display: none;
 285 }
 286
 287 .nav-panels {
 288   overflow: hidden;
 289 }
 290
 291 .nav-panel-buttom li {
 292   max-height: 64px;
 293 }
 294
 295 .nav-panels {
 296   transition: background 0.2s ease;
 297 }
 298
 299 .nav-panel-add .add,
 300 .nav-panel-search .search,
 301 .nav-panels .close {
 302   color: #444 !important;
 303 }
 304
 305 .nav-panels .action {
 306   padding-left: 0.75rem;
 307   font-size: 2.1rem;
 308   white-space: nowrap;
 309 }
 310
 311 .nav-panels .input-field input {
 312   display: block;
 313   line-height: inherit;
 314   padding-left: 4rem !important;
 315   width: calc(100% - 8rem);
 316 }
 317
 318 .nav-panels .input-field input:focus {
 319   background-color: #fff;
 320   border: 0;
 321   box-shadow: none;
 322   color: #444;
 323 }
 324
 325 .input-field.nav-panel-add label,
 326 .input-field.nav-panel-search label {
 327   left: 1rem;
 328 }
 329
 330 .input-field.nav-panel-add .close,
 331 .input-field.nav-panel-search .close {
 332   position: absolute;
 333   top: 0;
 334   right: 1rem;
 335   color: transparent;
 336   cursor: pointer;
 337   font-size: 2rem;
 338   transition: 0.3s color;
 339 }
 340
 341 #button_filters {
 342   display: none;
 343 }
 344
 345 #button_export {
 346   display: none;
 347 }
 348
 349 .input-field.nav-panel-add,
 350 .input-field.nav-panel-add form,
 351 .input-field.nav-panel-search,
 352 .input-field.nav-panel-search form {
 353   height: 100%;
 354 }
 355
 356 /* ==========================================================================
 357    2 = Side-nav
 358    ========================================================================== */
 359
 360 .side-nav.fixed a {
 361   font-size: 13px;
 362   line-height: 44px;
 363   height: 44px;
 364 }
 365
 366 .side-nav .collapsible-header,
 367 .side-nav.fixed .collapsible-header {
 368   height: 45px;
 369   line-height: 44px;
 370   padding: 0 20px;
 371 }
 372
 373 .bold > a {
 374   font-weight: bold;
 375 }
 376
 377 .side-nav > li.logo {
 378   line-height: 0;
 379   text-align: center;
 380 }
 381
 382 #main .logo a {
 383   height: 100pt;
 384 }
 385
 386 #main .logo img {
 387   height: 100pt;
 388   width: 100pt;
 389 }
 390
 391 #main .logo:hover {
 392   background: transparent;
 393 }
 394
 395 .side-nav li {
 396   padding: 0;
 397 }
 398
 399 .side-nav a {
 400   margin: 0 1rem;
 401 }
 402
 403 span.numberItems {
 404   float: right;
 405 }
 406
 407 nav ul a:hover {
 408   background-color: initial;
 409 }
 410
 411 /* ==========================================================================
 412  * 3 = Filters slider
 413  * ========================================================================== */
 414
 415 #filters button {
 416   padding: 0;
 417   width: 100%;
 418 }
 419
 420 .side-nav.fixed.right-aligned {
 421   right: -250px;
 422   left: auto !important;
 423   overflow-y: visible;
 424 }
 425
 426 #filters div.with-checkbox {
 427   height: 3rem;
 428   margin-top: 0;
 429 }
 430
 431 /* ==========================================================================
 432    4 = Cards
 433    ========================================================================== */
 434
 435 main #content {
 436   padding: 0 0.5rem;
 437 }
 438
 439 main ul.row {
 440   padding: 0 0.75rem;
 441 }
 442
 443 .data .card .card-body {
 444   height: 19em;
 445   overflow: hidden;
 446 }
 447
 448 .card .card-content .card-title,
 449 .card .card-reveal .card-title {
 450   line-height: 22.8px;
 451   max-height: 80px;
 452   font-size: 19px;
 453   font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
 454   color: #313131;
 455 }
 456
 457 .card .card-content .activator,
 458 .card .card-reveal .activator {
 459   cursor: pointer;
 460   font-family: "Material Icons";
 461 }
 462
 463 .card .card-content i.right,
 464 .card .card-reveal i.right {
 465   margin-left: 0;
 466 }
 467
 468 .card .card-content .original {
 469   line-height: 24px;
 470   font-size: 15px;
 471 }
 472
 473 a.original {
 474   text-overflow: ellipsis;
 475   white-space: nowrap;
 476   overflow: hidden;
 477   display: block;
 478 }
 479
 480 .card .card-entry-labels {
 481   position: absolute;
 482   top: 10px;
 483   z-index: 90;
 484   max-width: 50%;
 485 }
 486
 487 .card .card-entry-labels li,
 488 .card-tag-labels li {
 489   margin: 10px 10px 10px auto;
 490   padding: 5px 12px 5px 16px !important;
 491   background-color: rgba(0, 151, 167, 0.85);
 492   border-radius: 0 3px 3px 0;
 493   color: #fff;
 494   cursor: default;
 495   max-height: 2em;
 496   overflow: hidden;
 497   text-overflow: ellipsis;
 498   white-space: nowrap;
 499 }
 500
 501 .card .card-entry-labels-hidden {
 502   margin: 2.5px auto;
 503 }
 504
 505 .card .card-entry-labels-hidden li {
 506   display: inline-block;
 507   background-color: rgba(0, 151, 167, 0.85);
 508   margin: 0 5px;
 509   padding: 5px 12px;
 510   border-radius: 3px;
 511   color: #fff;
 512   max-height: 2em;
 513   max-width: calc(100% - 15px);
 514   overflow: hidden;
 515   text-overflow: ellipsis;
 516   white-space: nowrap;
 517 }
 518
 519 .card .card-entry-labels-hidden li:first-child {
 520   margin-left: 0;
 521 }
 522
 523 .card-entry-tags a,
 524 .card-entry-labels a,
 525 .card-tag-labels a,
 526 .card-entry-labels-hidden a,
 527 #list .chip a {
 528   text-decoration: none;
 529   font-weight: normal;
 530   color: #fff;
 531 }
 532
 533 .card .card-content .estimatedTime {
 534   margin-bottom: 10px;
 535 }
 536
 537 .card .card-action {
 538   padding: 10px 5px 10px 15px;
 539 }
 540
 541 .card .card-action ul.links {
 542   margin: 0;
 543   font-size: 24px;
 544   line-height: 24px;
 545 }
 546
 547 .card .card-action ul.tools li a.tool {
 548   margin-right: 5px !important;
 549 }
 550
 551 .card .card-action a {
 552   color: #fff;
 553   margin: 0;
 554 }
 555
 556 .card .card-action a:hover {
 557   color: #fff;
 558 }
 559
 560 .card .card-action .reading-time {
 561   display: inline-flex;
 562   vertical-align: middle;
 563 }
 564
 565 .quickstart .card .card-action a,
 566 .quickstart .card .card-action a:hover {
 567   color: #fff !important;
 568 }
 569
 570 .settings .div_tabs {
 571   padding-bottom: 15px;
 572 }
 573
 574 .card.sw {
 575   max-width: 370px;
 576   margin-left: auto;
 577   margin-right: auto;
 578 }
 579
 580 .card .card-image {
 581   height: 10em;
 582 }
 583
 584 .card .card-fullimage {
 585   height: 13.5em;
 586 }
 587
 588 .card .card-image .preview,
 589 .card .card-fullimage .preview {
 590   height: 14em;
 591   background-size: cover;
 592   background-repeat: no-repeat;
 593   background-position: 50%;
 594 }
 595
 596 /* ==========================================================================
 597    5 = Article
 598    ========================================================================== */
 599
 600 #article {
 601   font-size: 20px;
 602   margin: 0 auto;
 603   max-width: 45em;
 604 }
 605
 606 #article article {
 607   color: #424242;
 608 }
 609
 610 #article article h1,
 611 #article article h2,
 612 #article article h3,
 613 #article article h4,
 614 #article article h5,
 615 #article article h6 {
 616   color: #212121;
 617 }
 618
 619 #article article h1 strong,
 620 #article article h2 strong,
 621 #article article h3 strong,
 622 #article article h4 strong,
 623 #article article h5 strong,
 624 #article article h6 strong {
 625   font-weight: 500;
 626 }
 627
 628 #article article h6 {
 629   font-size: 1.2rem;
 630 }
 631
 632 #article article h5 {
 633   font-size: 1.6rem;
 634 }
 635
 636 #article article h4 {
 637   font-size: 1.9rem;
 638 }
 639
 640 #article article h3 {
 641   font-size: 2.2rem;
 642 }
 643
 644 #article article h2 {
 645   font-size: 2.5rem;
 646 }
 647
 648 #article article h1 {
 649   font-size: 2.7rem;
 650 }
 651
 652 #article img,
 653 #article figure {
 654   max-width: 100%;
 655   height: auto;
 656 }
 657
 658 #article > header > h1 {
 659   font-size: 2em;
 660   margin: 2.1rem 0 0.68rem;
 661 }
 662
 663 .reader-mode {
 664   width: 95px !important;
 665   transition: width 0.2s ease;
 666 }
 667
 668 .reader-mode:hover {
 669   width: 240px !important;
 670 }
 671
 672 .reader-mode .collapsible-body {
 673   height: 0;
 674   overflow: hidden;
 675 }
 676
 677 .reader-mode:hover .collapsible-body {
 678   height: auto;
 679 }
 680
 681 .reader-mode span {
 682   opacity: 0;
 683   transition: opacity 0.2s ease;
 684 }
 685
 686 .reader-mode:hover span {
 687   opacity: 1;
 688 }
 689
 690 .progress {
 691   position: fixed;
 692   top: 0;
 693   width: 100%;
 694   height: 3px;
 695   margin: 0;
 696   z-index: 9999;
 697 }
 698
 699 #article aside .tools {
 700   font-size: 0.8em;
 701   display: flex;
 702   flex-flow: row wrap;
 703   margin: 0 auto;
 704 }
 705
 706 article aside .tools li {
 707   display: inline-flex;
 708   vertical-align: middle;
 709 }
 710
 711 #article aside .tools a {
 712   color: #000;
 713   text-decoration: none;
 714 }
 715
 716 #article aside #list {
 717   float: right;
 718   margin: 0 15px 10px;
 719 }
 720
 721 #article aside .chip {
 722   background-color: rgba(0, 151, 167, 0.85);
 723   padding: 0 15px 0 10px;
 724   margin: auto 2px;
 725 }
 726
 727 #article aside .chip a,
 728 #article aside .chip i {
 729   color: #fff;
 730 }
 731
 732 /* ==========================================================================
 733    6 = Media queries
 734    ========================================================================== */
 735
 736 @media only screen and (max-width: 992px) {
 737   header,
 738   main,
 739   footer {
 740     padding-left: 0;
 741   }
 742
 743   nav,
 744   main,
 745   footer {
 746     padding-left: 0;
 747   }
 748
 749   .pagination {
 750     width: auto;
 751   }
 752
 753   #article {
 754     max-width: 35em;
 755     margin-left: auto;
 756     margin-right: auto;
 757     font-size: 18px;
 758   }
 759
 760   #article > header > h1 {
 761     font-size: 1.33em;
 762   }
 763
 764   .reader-mode {
 765     width: 240px !important;
 766   }
 767
 768   .reader-mode span {
 769     opacity: 1;
 770   }
 771
 772   .tabs {
 773     display: inline-block;
 774     height: auto;
 775   }
 776
 777   .tab {
 778     min-width: 100%;
 779   }
 780
 781   .indicator {
 782     display: none;
 783   }
 784
 785   .pagination li.prev,
 786   .pagination li.next {
 787     width: auto;
 788   }
 789 }
 790
 791 @media only screen and (min-width: 400px) {
 792   .nav-panel-buttom {
 793     float: right;
 794   }
 795 }
 796
 797 @media only screen and (min-width: 1200px) and (max-width: 1650px) {
 798   .row .col.l3 {
 799     width: 33.33333%;
 800     margin-left: 0;
 801   }
 802 }
 803
 804 @media only screen and (min-width: 993px) and (max-width: 1200px) {
 805   .row .col.l1 {
 806     width: 25%;
 807     margin-left: 0;
 808   }
 809
 810   .row .col.l2 {
 811     width: 33.33333%;
 812     margin-left: 0;
 813   }
 814
 815   .row .col.l3 {
 816     width: 41.66667%;
 817     margin-left: 0;
 818   }
 819
 820   .row .col.l4 {
 821     width: 50%;
 822     margin-left: 0;
 823   }
 824
 825   .row .col.l5 {
 826     width: 58.33333%;
 827     margin-left: 0;
 828   }
 829
 830   .row .col.l6 {
 831     width: 66.66667%;
 832     margin-left: 0;
 833   }
 834
 835   .row .col.l7 {
 836     width: 75%;
 837     margin-left: 0;
 838   }
 839
 840   .row .col.l8 {
 841     width: 83.33333%;
 842     margin-left: 0;
 843   }
 844
 845   .row .col.l9 {
 846     width: 91.66667%;
 847     margin-left: 0;
 848   }
 849
 850   .row .col.l10 {
 851     width: 100%;
 852     margin-left: 0;
 853   }
 854 }
 855
 856 @media only screen and (max-width: 350px) {
 857   .nb-results {
 858     display: none;
 859   }
 860
 861   main ul.row {
 862     padding: 0;
 863   }
 864
 865   .row .col {
 866     padding: 0;
 867   }
 868 }
 869
 870 /* ==========================================================================
 871    7 = Font
 872    ========================================================================== */
 873
 874 .icon-google-plus2::before {
 875   content: "\ea89";
 876 }
 877
 878 .icon-facebook2::before {
 879   content: "\ea8d";
 880 }
 881
 882 .icon-twitter::before {
 883   content: "\ea96";
 884 }
 885
 886 .icon-apple::before {
 887   content: "\eabf";
 888 }
 889
 890 .icon-android::before {
 891   content: "\eac1";
 892 }
 893
 894 .icon-chrome::before {
 895   content: "\eae5";
 896 }
 897
 898 .icon-firefox::before {
 899   content: "\eae6";
 900 }
 901
 902 .icon-link::before {
 903   content: "\e9cb";
 904 }
 905
 906 footer [class^="icon-"],
 907 footer [class*=" icon-"] {
 908   font-size: 2em;
 909   transition: text-shadow 0.2s ease;
 910   padding-right: 10px;
 911 }
 912
 913 footer [class^="icon-"]:hover,
 914 footer [class*=" icon-"]:hover {
 915   text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 916 }
 917
 918 /* ==========================================================================
 919    8 = Others
 920    ========================================================================== */
 921
 922 /* force height on non-input field in the settings page */
 923 div.settings div.input-field div,
 924 div.settings div.input-field ul {
 925   margin-top: 40px;
 926 }
 927
 928 /* but avoid to kill all file input */
 929 div.settings div.file-field div {
 930   margin-top: inherit;
 931 }
 932
 933 .input-field label.active {
 934   font-size: 1rem;
 935 }
 936
 937 nav .input-field input {
 938   margin: 0;
 939 }