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