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