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