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