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