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