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 }
 198
 199 .results .nb-results,
 200 .results .pagination {
 201   margin: 15px;
 202   margin-bottom: 0;
 203 }
 204
 205 .results .nb-results {
 206   display: inline-flex;
 207 }
 208
 209 .results a {
 210   color: #444;
 211 }
 212
 213 .pagination {
 214   float: right;
 215 }
 216
 217 .pagination ul {
 218   margin: 0 !important;
 219 }
 220
 221 .pagination li {
 222   padding: 0;
 223 }
 224
 225 .pagination a {
 226   padding: 0 10px;
 227   height: 30px;
 228   display: block;
 229 }
 230
 231 .pagination .disabled {
 232   margin-right: 10px;
 233   margin-left: 10px;
 234 }
 235
 236 div.pagination ul .prev.disabled,
 237 div.pagination ul .next.disabled {
 238   display: none;
 239 }
 240
 241 .pagination li.active span {
 242   padding: 0 10px;
 243   height: 30px;
 244   display: block;
 245   color: #fff;
 246 }
 247
 248 .page-footer .footer-copyright {
 249   min-width: 50px;
 250   height: auto !important;
 251   line-height: 1em !important;
 252 }
 253
 254 .page-footer .footer-copyright p {
 255   text-overflow: ellipsis;
 256   white-space: nowrap;
 257   overflow: hidden;
 258   display: block;
 259 }
 260
 261 .hidden {
 262   display: none;
 263 }
 264
 265 .picker__date-display {
 266   display: none;
 267 }
 268
 269 footer.page-footer {
 270   margin-top: 10px;
 271   padding-top: 0;
 272 }
 273
 274 footer .row {
 275   margin-bottom: 10px;
 276 }
 277
 278 /* ==========================================================================
 279    1 = Nav
 280    ========================================================================== */
 281
 282 nav input {
 283   color: #aaa;
 284 }
 285
 286 .nav-wrapper .button-collapse {
 287   padding: 0 15px;
 288 }
 289
 290 .nav-input {
 291   display: none;
 292 }
 293
 294 .nav-panels {
 295   overflow: hidden;
 296 }
 297
 298 .nav-panel-buttom li {
 299   max-height: 64px;
 300 }
 301
 302 .nav-panels {
 303   transition: background 0.2s ease;
 304 }
 305
 306 .nav-panel-add .add,
 307 .nav-panel-search .search,
 308 .nav-panels .close {
 309   color: #444 !important;
 310 }
 311
 312 .nav-panels .action {
 313   padding-left: 0.75rem;
 314   font-size: 2.1rem;
 315   white-space: nowrap;
 316 }
 317
 318 .nav-panels .input-field input {
 319   display: block;
 320   line-height: inherit;
 321   padding-left: 4rem !important;
 322   width: calc(100% - 8rem);
 323 }
 324
 325 .nav-panels .input-field input:focus {
 326   background-color: #fff;
 327   border: 0;
 328   box-shadow: none;
 329   color: #444;
 330 }
 331
 332 .input-field.nav-panel-add label,
 333 .input-field.nav-panel-search label {
 334   left: 1rem;
 335 }
 336
 337 .input-field.nav-panel-add .close,
 338 .input-field.nav-panel-search .close {
 339   position: absolute;
 340   top: 0;
 341   right: 1rem;
 342   color: transparent;
 343   cursor: pointer;
 344   font-size: 2rem;
 345   transition: 0.3s color;
 346 }
 347
 348 #button_filters {
 349   display: none;
 350 }
 351
 352 #button_export {
 353   display: none;
 354 }
 355
 356 .input-field.nav-panel-add,
 357 .input-field.nav-panel-add form,
 358 .input-field.nav-panel-search,
 359 .input-field.nav-panel-search form {
 360   height: 100%;
 361 }
 362
 363 /* ==========================================================================
 364    2 = Side-nav
 365    ========================================================================== */
 366
 367 .side-nav.fixed a {
 368   font-size: 13px;
 369   line-height: 44px;
 370   height: 44px;
 371 }
 372
 373 .side-nav .collapsible-header,
 374 .side-nav.fixed .collapsible-header {
 375   height: 45px;
 376   line-height: 44px;
 377   padding: 0 20px;
 378 }
 379
 380 .bold > a {
 381   font-weight: bold;
 382 }
 383
 384 .side-nav > li.logo {
 385   line-height: 0;
 386   text-align: center;
 387 }
 388
 389 #main .logo a {
 390   height: 100pt;
 391 }
 392
 393 #main .logo img {
 394   height: 100pt;
 395   width: 100pt;
 396 }
 397
 398 #main .logo:hover {
 399   background: transparent;
 400 }
 401
 402 .side-nav li {
 403   padding: 0;
 404 }
 405
 406 .side-nav a {
 407   margin: 0 1rem;
 408 }
 409
 410 span.numberItems {
 411   float: right;
 412 }
 413
 414 nav ul a:hover {
 415   background-color: initial;
 416 }
 417
 418 /* ==========================================================================
 419  * 3 = Filters slider
 420  * ========================================================================== */
 421
 422 #filters button {
 423   padding: 0;
 424   width: 100%;
 425 }
 426
 427 .side-nav.fixed.right-aligned {
 428   right: -250px;
 429   left: auto !important;
 430   overflow-y: visible;
 431 }
 432
 433 #filters div.with-checkbox {
 434   height: 3rem;
 435   margin-top: 0;
 436 }
 437
 438 /* ==========================================================================
 439    4 = Cards
 440    ========================================================================== */
 441
 442 main #content {
 443   padding: 0 0.5rem;
 444 }
 445
 446 main ul.row {
 447   padding: 0 0.75rem;
 448 }
 449
 450 .data .card .card-body {
 451   height: 19em;
 452   overflow: hidden;
 453 }
 454
 455 .card .card-content .card-title,
 456 .card .card-reveal .card-title {
 457   line-height: 22.8px;
 458   max-height: 80px;
 459   font-size: 19px;
 460   font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
 461   color: #313131;
 462 }
 463
 464 .card .card-content .activator,
 465 .card .card-reveal .activator {
 466   cursor: pointer;
 467   font-family: "Material Icons";
 468 }
 469
 470 .card .card-content i.right,
 471 .card .card-reveal i.right {
 472   margin-left: 0;
 473 }
 474
 475 .card .card-content .original {
 476   line-height: 24px;
 477   font-size: 15px;
 478 }
 479
 480 a.original {
 481   text-overflow: ellipsis;
 482   white-space: nowrap;
 483   overflow: hidden;
 484   display: block;
 485 }
 486
 487 .card .card-entry-labels {
 488   position: absolute;
 489   top: 10px;
 490   z-index: 90;
 491   max-width: 50%;
 492 }
 493
 494 .card .card-entry-labels li,
 495 .card-tag-labels li {
 496   margin: 10px 10px 10px auto;
 497   padding: 5px 12px 5px 16px !important;
 498   background-color: rgba(0, 151, 167, 0.85);
 499   border-radius: 0 3px 3px 0;
 500   color: #fff;
 501   cursor: default;
 502   max-height: 2em;
 503   overflow: hidden;
 504   text-overflow: ellipsis;
 505   white-space: nowrap;
 506 }
 507
 508 .card .card-entry-labels-hidden {
 509   margin: 2.5px auto;
 510 }
 511
 512 .card .card-entry-labels-hidden li {
 513   display: inline-block;
 514   background-color: rgba(0, 151, 167, 0.85);
 515   margin: 0 5px;
 516   padding: 5px 12px;
 517   border-radius: 3px;
 518   color: #fff;
 519   max-height: 2em;
 520   max-width: calc(100% - 15px);
 521   overflow: hidden;
 522   text-overflow: ellipsis;
 523   white-space: nowrap;
 524 }
 525
 526 .card .card-entry-labels-hidden li:first-child {
 527   margin-left: 0;
 528 }
 529
 530 .card-entry-tags a,
 531 .card-entry-labels a,
 532 .card-tag-labels a,
 533 .card-entry-labels-hidden a,
 534 #list .chip a {
 535   text-decoration: none;
 536   font-weight: normal;
 537   color: #fff;
 538 }
 539
 540 .card .card-content .estimatedTime {
 541   margin-bottom: 10px;
 542 }
 543
 544 .card .card-action {
 545   padding: 10px 5px 10px 15px;
 546 }
 547
 548 .card .card-action ul.links {
 549   margin: 0;
 550   font-size: 24px;
 551   line-height: 24px;
 552 }
 553
 554 .card .card-action ul.tools li a.tool {
 555   margin-right: 5px !important;
 556 }
 557
 558 .card-stacked:hover ul.tools-list {
 559   display: block;
 560 }
 561
 562 .card-stacked ul.tools-list {
 563   display: none;
 564 }
 565
 566 .card .card-action a {
 567   color: #fff;
 568   margin: 0;
 569 }
 570
 571 .card .card-action a:hover {
 572   color: #fff;
 573 }
 574
 575 .card .card-action .reading-time {
 576   display: inline-flex;
 577   vertical-align: middle;
 578 }
 579
 580 .quickstart .card .card-action a,
 581 .quickstart .card .card-action a:hover {
 582   color: #fff !important;
 583 }
 584
 585 .settings .div_tabs {
 586   padding-bottom: 15px;
 587 }
 588
 589 .card.sw {
 590   max-width: 370px;
 591   margin-left: auto;
 592   margin-right: auto;
 593 }
 594
 595 .card .card-image {
 596   height: 10em;
 597 }
 598
 599 .card .card-fullimage {
 600   height: 13.5em;
 601 }
 602
 603 .card .card-image .preview,
 604 .card .card-fullimage .preview {
 605   height: 14em;
 606   background-size: cover;
 607   background-repeat: no-repeat;
 608   background-position: 50%;
 609 }
 610
 611 /* ==========================================================================
 612    5 = Article
 613    ========================================================================== */
 614
 615 #article {
 616   font-size: 20px;
 617   margin: 0 auto;
 618   max-width: 45em;
 619 }
 620
 621 #article article {
 622   color: #424242;
 623   font-size: 18px;
 624   line-height: 1.7em;
 625 }
 626
 627 #article article h1,
 628 #article article h2,
 629 #article article h3,
 630 #article article h4,
 631 #article article h5,
 632 #article article h6 {
 633   color: #212121;
 634 }
 635
 636 #article article h1 strong,
 637 #article article h2 strong,
 638 #article article h3 strong,
 639 #article article h4 strong,
 640 #article article h5 strong,
 641 #article article h6 strong {
 642   font-weight: 500;
 643 }
 644
 645 #article article h6 {
 646   font-size: 1.2rem;
 647 }
 648
 649 #article article h5 {
 650   font-size: 1.6rem;
 651 }
 652
 653 #article article h4 {
 654   font-size: 1.9rem;
 655 }
 656
 657 #article article h3 {
 658   font-size: 2.2rem;
 659 }
 660
 661 #article article h2 {
 662   font-size: 2.5rem;
 663 }
 664
 665 #article article h1 {
 666   font-size: 2.7rem;
 667 }
 668
 669 #article img,
 670 #article figure {
 671   max-width: 100%;
 672   height: auto;
 673 }
 674
 675 #article article a {
 676   border-bottom: 1px dotted #03a9f4;
 677   text-decoration: none;
 678 }
 679
 680 #article article a:hover {
 681   border-bottom-style: solid;
 682 }
 683
 684 #article article ul {
 685   padding-left: 30px;
 686 }
 687
 688 #article article ul,
 689 #article article ul li {
 690   list-style-type: disc;
 691 }
 692
 693 #article article blockquote {
 694   font-style: italic;
 695 }
 696
 697 #article article strong {
 698   font-weight: bold;
 699 }
 700
 701 #article article pre {
 702   box-sizing: border-box;
 703   margin: 0 0 1.75em;
 704   border: #e3f2fd 1px solid;
 705   width: 100%;
 706   padding: 10px;
 707   font-family: monospace;
 708   font-size: 0.8em;
 709   white-space: pre;
 710   overflow: auto;
 711   background: #f5f5f5;
 712   border-radius: 3px;
 713 }
 714
 715 #article > header > h1 {
 716   font-size: 2em;
 717   margin: 2.1rem 0 0.68rem;
 718 }
 719
 720 .reader-mode {
 721   width: 95px !important;
 722   transition: width 0.2s ease;
 723 }
 724
 725 .reader-mode:hover {
 726   width: 240px !important;
 727 }
 728
 729 .reader-mode .collapsible-body {
 730   height: 0;
 731   overflow: hidden;
 732 }
 733
 734 .reader-mode:hover .collapsible-body {
 735   height: auto;
 736 }
 737
 738 .reader-mode span {
 739   opacity: 0;
 740   transition: opacity 0.2s ease;
 741 }
 742
 743 .reader-mode:hover span {
 744   opacity: 1;
 745 }
 746
 747 .progress {
 748   position: fixed;
 749   top: 0;
 750   width: 100%;
 751   height: 3px;
 752   margin: 0;
 753   z-index: 9999;
 754 }
 755
 756 #article aside .tools {
 757   font-size: 0.8em;
 758   display: flex;
 759   flex-flow: row wrap;
 760   margin: 0 auto;
 761 }
 762
 763 article aside .tools li {
 764   display: inline-flex;
 765   vertical-align: middle;
 766 }
 767
 768 #article aside .tools a {
 769   color: #000;
 770   text-decoration: none;
 771 }
 772
 773 #article aside #list {
 774   float: right;
 775   margin: 0 15px 10px;
 776 }
 777
 778 #article aside .chip {
 779   background-color: rgba(0, 151, 167, 0.85);
 780   padding: 0 15px 0 10px;
 781   margin: auto 2px;
 782 }
 783
 784 #article aside .chip a,
 785 #article aside .chip i {
 786   color: #fff;
 787 }
 788
 789 /* ==========================================================================
 790    6 = Media queries
 791    ========================================================================== */
 792
 793 @media only screen and (max-width: 992px) {
 794   header,
 795   main,
 796   footer {
 797     padding-left: 0;
 798   }
 799
 800   nav,
 801   main,
 802   footer {
 803     padding-left: 0;
 804   }
 805
 806   .pagination {
 807     width: auto;
 808   }
 809
 810   #article {
 811     max-width: 35em;
 812     margin-left: auto;
 813     margin-right: auto;
 814     font-size: 18px;
 815   }
 816
 817   #article > header > h1 {
 818     font-size: 1.33em;
 819   }
 820
 821   .reader-mode {
 822     width: 240px !important;
 823   }
 824
 825   .reader-mode span {
 826     opacity: 1;
 827   }
 828
 829   .tabs {
 830     display: inline-block;
 831     height: auto;
 832   }
 833
 834   .tab {
 835     min-width: 100%;
 836   }
 837
 838   .indicator {
 839     display: none;
 840   }
 841
 842   .pagination li.prev,
 843   .pagination li.next {
 844     width: auto;
 845   }
 846 }
 847
 848 @media only screen and (min-width: 400px) {
 849   .nav-panel-buttom {
 850     float: right;
 851   }
 852 }
 853
 854 @media only screen and (min-width: 1200px) and (max-width: 1650px) {
 855   .row .col.l3 {
 856     width: 33.33333%;
 857     margin-left: 0;
 858   }
 859 }
 860
 861 @media only screen and (min-width: 993px) and (max-width: 1200px) {
 862   .row .col.l1 {
 863     width: 25%;
 864     margin-left: 0;
 865   }
 866
 867   .row .col.l2 {
 868     width: 33.33333%;
 869     margin-left: 0;
 870   }
 871
 872   .row .col.l3 {
 873     width: 41.66667%;
 874     margin-left: 0;
 875   }
 876
 877   .row .col.l4 {
 878     width: 50%;
 879     margin-left: 0;
 880   }
 881
 882   .row .col.l5 {
 883     width: 58.33333%;
 884     margin-left: 0;
 885   }
 886
 887   .row .col.l6 {
 888     width: 66.66667%;
 889     margin-left: 0;
 890   }
 891
 892   .row .col.l7 {
 893     width: 75%;
 894     margin-left: 0;
 895   }
 896
 897   .row .col.l8 {
 898     width: 83.33333%;
 899     margin-left: 0;
 900   }
 901
 902   .row .col.l9 {
 903     width: 91.66667%;
 904     margin-left: 0;
 905   }
 906
 907   .row .col.l10 {
 908     width: 100%;
 909     margin-left: 0;
 910   }
 911 }
 912
 913 @media only screen and (max-width: 350px) {
 914   .nb-results {
 915     display: none;
 916   }
 917
 918   main ul.row {
 919     padding: 0;
 920   }
 921
 922   .row .col {
 923     padding: 0;
 924   }
 925 }
 926
 927 /* ==========================================================================
 928    7 = Font
 929    ========================================================================== */
 930
 931 .icon-google-plus2::before {
 932   content: "\ea89";
 933 }
 934
 935 .icon-facebook2::before {
 936   content: "\ea8d";
 937 }
 938
 939 .icon-twitter::before {
 940   content: "\ea96";
 941 }
 942
 943 .icon-apple::before {
 944   content: "\eabf";
 945 }
 946
 947 .icon-android::before {
 948   content: "\eac1";
 949 }
 950
 951 .icon-chrome::before {
 952   content: "\eae5";
 953 }
 954
 955 .icon-firefox::before {
 956   content: "\eae6";
 957 }
 958
 959 .icon-link::before {
 960   content: "\e9cb";
 961 }
 962
 963 footer [class^="icon-"],
 964 footer [class*=" icon-"] {
 965   font-size: 2em;
 966   transition: text-shadow 0.2s ease;
 967   padding-right: 10px;
 968 }
 969
 970 footer [class^="icon-"]:hover,
 971 footer [class*=" icon-"]:hover {
 972   text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 973 }
 974
 975 /* ==========================================================================
 976    8 = Others
 977    ========================================================================== */
 978
 979 /* force height on non-input field in the settings page */
 980 div.settings div.input-field div,
 981 div.settings div.input-field ul {
 982   margin-top: 40px;
 983 }
 984
 985 /* but avoid to kill all file input */
 986 div.settings div.file-field div {
 987   margin-top: inherit;
 988 }
 989
 990 .input-field label.active {
 991   font-size: 1rem;
 992 }
 993
 994 nav .input-field input {
 995   margin: 0;
 996 }