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 @font-face {
  21   font-family: icomoon;
  22   src: url("../fonts/IcoMoon-Free.ttf");
  23   font-weight: normal;
  24   font-style: normal;
  25 }
  26
  27 @font-face {
  28   font-family: 'Material Icons';
  29   font-style: normal;
  30   font-weight: 400;
  31   src: url(../fonts/MaterialIcons-Regular.eot);
  32
  33   /* For IE6-8 */
  34   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");
  35 }
  36
  37 .material-icons {
  38   font-family: 'Material Icons';
  39   font-weight: normal;
  40   font-style: normal;
  41   font-size: 24px;  /* Preferred icon size */
  42   width: 1em;
  43   height: 1em;
  44   display: inline-block;
  45   line-height: 1;
  46   text-transform: none;
  47   letter-spacing: normal;
  48   word-wrap: normal;
  49   white-space: nowrap;
  50   direction: ltr;
  51
  52   /* Support for all WebKit browsers. */
  53   -webkit-font-smoothing: antialiased;
  54
  55   /* Support for Safari and Chrome. */
  56   text-rendering: optimizeLegibility;
  57
  58   /* Support for Firefox. */
  59   -moz-osx-font-smoothing: grayscale;
  60
  61   /* Support for IE. */
  62   font-feature-settings: 'liga';
  63 }
  64
  65 [class^="icon-"]::before,
  66 [class*=" icon-"]::before {
  67   font-family: icomoon;
  68   speak: none;
  69   font-style: normal;
  70   font-weight: normal;
  71   font-variant: normal;
  72   text-transform: none;
  73   line-height: 1;
  74   background-size: 24px;
  75
  76   /* Enable Ligatures ================ */
  77   letter-spacing: 0;
  78   -webkit-font-feature-settings: "liga";
  79   -moz-font-feature-settings: "liga=1";
  80   -moz-font-feature-settings: "liga";
  81   -ms-font-feature-settings: "liga" 1;
  82   -o-font-feature-settings: "liga";
  83   font-feature-settings: "liga";
  84
  85   /* Better Font Rendering =========== */
  86   -webkit-font-smoothing: antialiased;
  87   -moz-osx-font-smoothing: grayscale;
  88 }
  89
  90 .icon-image {
  91   background-size: 16px;
  92   background-repeat: no-repeat;
  93   padding-right: 1em !important;
  94   padding-left: 1em !important;
  95 }
  96
  97 .icon-eye::before {
  98   content: "\e9ce";
  99 }
 100
 101 .icon-no-eye::before {
 102   content: "\e9d1";
 103 }
 104
 105 .icon-calendar::before {
 106   content: "\e953";
 107 }
 108
 109 .icon-mail::before {
 110   content: "\ea86";
 111 }
 112
 113 .icon-time::before {
 114   content: "\e952";
 115 }
 116
 117 /* Carrot (http://carrot.org) */
 118 .icon-image--carrot {
 119   background-image: url("../../_global/img/icons/carrot-icon--black.png");
 120 }
 121
 122 /* Diaspora */
 123 .icon-image--diaspora {
 124   background-image: url("../../_global/img/icons/diaspora-icon--black.png");
 125 }
 126
 127 /* Unmark.it */
 128 .icon-image--unmark {
 129   background-image: url("../../_global/img/icons/unmark-icon--black.png");
 130 }
 131
 132 /* Shaarli */
 133 .icon-image--shaarli {
 134   background-image: url("../../_global/img/icons/shaarli.png");
 135 }
 136
 137 body {
 138   display: flex;
 139   min-height: 100vh;
 140   flex-direction: column;
 141   background: #f0f0f0;
 142 }
 143
 144 body.login main {
 145   padding: 0;
 146   min-height: 100vh;
 147 }
 148
 149 .border-bottom {
 150   border-bottom: 1px solid #ddd;
 151 }
 152
 153 nav,
 154 main,
 155 footer {
 156   padding-left: 240px;
 157 }
 158
 159 main,
 160 #content,
 161 .valign-wrapper {
 162   height: 100%;
 163 }
 164
 165 #main {
 166   flex: 1 0 auto;
 167 }
 168
 169 .results {
 170   height: 1em;
 171   line-height: 30px;
 172 }
 173
 174 .results .nb-results,
 175 .results .pagination {
 176   margin: 15px;
 177   margin-bottom: 0;
 178 }
 179
 180 .pagination {
 181   float: right;
 182 }
 183
 184 .pagination ul {
 185   margin: 0 !important;
 186 }
 187
 188 .pagination li {
 189   padding: 0;
 190 }
 191
 192 .pagination a {
 193   padding: 0 10px;
 194   height: 30px;
 195   display: block;
 196 }
 197
 198 .pagination .disabled {
 199   margin-right: 10px;
 200   margin-left: 10px;
 201 }
 202
 203 div.pagination ul .prev.disabled,
 204 div.pagination ul .next.disabled {
 205   display: none;
 206 }
 207
 208 .pagination li.active span {
 209   padding: 0 10px;
 210   height: 30px;
 211   display: block;
 212   color: #fff;
 213 }
 214
 215 .page-footer .footer-copyright p {
 216   display: inline;
 217 }
 218
 219 .hidden {
 220   display: none;
 221 }
 222
 223 .picker__date-display {
 224   display: none;
 225 }
 226
 227 footer.page-footer {
 228   margin-top: 10px;
 229   padding-top: 0;
 230 }
 231
 232 footer .row {
 233   margin-bottom: 10px;
 234 }
 235
 236 /* ==========================================================================
 237    1 = Nav
 238    ========================================================================== */
 239
 240 nav input {
 241   color: #aaa;
 242 }
 243
 244 .nav-wrapper .button-collapse {
 245   padding: 0 15px;
 246 }
 247
 248 .nav-input {
 249   display: none;
 250 }
 251
 252 .nav-panels {
 253   overflow: hidden;
 254 }
 255
 256 .nav-panel-buttom li {
 257   max-height: 64px;
 258 }
 259
 260 .nav-panels {
 261   transition: background 0.2s ease;
 262 }
 263
 264 .nav-panel-add .add,
 265 .nav-panel-search .search,
 266 .nav-panels .close {
 267   color: #444 !important;
 268 }
 269
 270 .nav-panels .action {
 271   padding-left: 0.75rem;
 272   font-size: 2.1rem;
 273   white-space: nowrap;
 274 }
 275
 276 .nav-panels .input-field input {
 277   display: block;
 278   line-height: inherit;
 279   padding-left: 4rem !important;
 280   width: calc(100% - 8rem);
 281 }
 282
 283 .nav-panels .input-field input:focus {
 284   background-color: #fff;
 285   border: 0;
 286   box-shadow: none;
 287   color: #444;
 288 }
 289
 290 .input-field.nav-panel-add label {
 291   left: 1rem;
 292 }
 293
 294 .input-field.nav-panel-add .close {
 295   position: absolute;
 296   top: 0;
 297   right: 1rem;
 298   color: transparent;
 299   cursor: pointer;
 300   font-size: 2rem;
 301   transition: 0.3s color;
 302 }
 303
 304 #button_filters {
 305   display: none;
 306 }
 307
 308 #button_export {
 309   display: none;
 310 }
 311
 312 .input-field.nav-panel-add,
 313 .input-field.nav-panel-add form {
 314   height: 100%;
 315 }
 316
 317 /* ==========================================================================
 318    2 = Side-nav
 319    ========================================================================== */
 320
 321 .side-nav.fixed a {
 322   font-size: 13px;
 323   line-height: 44px;
 324   height: 44px;
 325 }
 326
 327 .side-nav .collapsible-header,
 328 .side-nav.fixed .collapsible-header {
 329   height: 45px;
 330   line-height: 44px;
 331   padding: 0 20px;
 332 }
 333
 334 .bold > a {
 335   font-weight: bold;
 336 }
 337
 338 .side-nav > li.logo {
 339   line-height: 0;
 340   text-align: center;
 341 }
 342
 343 #main .logo a {
 344   height: 100pt;
 345 }
 346
 347 #main .logo img {
 348   height: 100pt;
 349   width: 100pt;
 350 }
 351
 352 #main .logo:hover {
 353   background: transparent;
 354 }
 355
 356 .side-nav li {
 357   padding: 0;
 358 }
 359
 360 .side-nav a {
 361   margin: 0 1rem;
 362 }
 363
 364 span.numberItems {
 365   float: right;
 366 }
 367
 368 nav ul a:hover {
 369   background-color: initial;
 370 }
 371
 372 /* ==========================================================================
 373  * 3 = Filters slider
 374  * ========================================================================== */
 375
 376 #filters button {
 377   padding: 0;
 378   width: 100%;
 379 }
 380
 381 .side-nav.fixed.right-aligned {
 382   right: -250px;
 383   left: auto !important;
 384   overflow-y: visible;
 385 }
 386
 387 #filters div.with-checkbox {
 388   height: 3rem;
 389   margin-top: 0;
 390 }
 391
 392 /* ==========================================================================
 393    4 = Cards
 394    ========================================================================== */
 395
 396 main #content {
 397   padding: 0 0.5rem;
 398 }
 399
 400 main ul.row {
 401   padding: 0 0.75rem;
 402 }
 403
 404 .data .card .card-body {
 405   height: 22em;
 406   overflow: hidden;
 407 }
 408
 409 .card .card-content .card-title {
 410   line-height: 32px;
 411   max-height: 64px;
 412 }
 413
 414 .card .card-content i.right,
 415 .card .card-reveal i.right {
 416   margin-left: 0;
 417 }
 418
 419 .card .card-entry-labels {
 420   position: absolute;
 421   top: 10px;
 422   z-index: 90;
 423   max-width: 50%;
 424 }
 425
 426 .card .card-entry-labels li,
 427 .card-tag-labels li {
 428   margin: 10px 10px 10px auto;
 429   padding: 5px 12px 5px 16px !important;
 430   background-color: rgba(0, 151, 167, 0.85);
 431   border-radius: 0 3px 3px 0;
 432   color: #fff;
 433   cursor: default;
 434   max-height: 2em;
 435   overflow: hidden;
 436   text-overflow: ellipsis;
 437   white-space: nowrap;
 438 }
 439
 440 .card .card-entry-labels-hidden {
 441   margin-top: 5px;
 442 }
 443
 444 .card .card-entry-labels-hidden li {
 445   display: inline-block;
 446   background-color: rgba(0, 151, 167, 0.85);
 447   margin: 0 5px;
 448   padding: 5px 12px;
 449   border-radius: 3px;
 450   color: #fff;
 451   max-height: 2em;
 452   max-width: calc(100% - 15px);
 453   overflow: hidden;
 454   text-overflow: ellipsis;
 455   white-space: nowrap;
 456 }
 457
 458 .card-entry-tags a,
 459 .card-entry-labels a,
 460 .card-tag-labels a,
 461 .card-entry-labels-hidden a,
 462 #list .chip a {
 463   text-decoration: none;
 464   font-weight: normal;
 465   color: #fff;
 466 }
 467
 468 .card .card-content .estimatedTime {
 469   margin-bottom: 10px;
 470 }
 471
 472 .card .card-action .original {
 473   line-height: 24px;
 474 }
 475
 476 .card .card-action ul.links {
 477   margin: 0;
 478   font-size: 24px;
 479   line-height: 24px;
 480 }
 481
 482 .card .card-action a {
 483   color: #fff;
 484   margin: 0;
 485 }
 486
 487 .card .card-action a:hover {
 488   color: #fff;
 489 }
 490
 491 .quickstart .card .card-action a,
 492 .quickstart .card .card-action a:hover {
 493   color: #fff !important;
 494 }
 495
 496 .settings .div_tabs {
 497   padding-bottom: 15px;
 498 }
 499
 500 .card.sw {
 501   max-width: 370px;
 502   margin-left: auto;
 503   margin-right: auto;
 504 }
 505
 506 .card .card-image {
 507   height: 14em;
 508 }
 509
 510 .card .card-image .preview {
 511   height: 14em;
 512   background-size: cover;
 513   background-repeat: no-repeat;
 514   background-position: 50%;
 515 }
 516
 517 /* ==========================================================================
 518    5 = Article
 519    ========================================================================== */
 520
 521 #article {
 522   font-size: 20px;
 523   margin: 0 auto;
 524   max-width: 40em;
 525 }
 526
 527 #article img,
 528 #article figure {
 529   max-width: 100%;
 530   height: auto;
 531 }
 532
 533 #article > header > h1 {
 534   font-size: 1.6em;
 535 }
 536
 537 .reader-mode {
 538   width: 95px !important;
 539   transition: width 0.2s ease;
 540 }
 541
 542 .reader-mode:hover {
 543   width: 240px !important;
 544 }
 545
 546 .reader-mode .collapsible-body {
 547   height: 0;
 548   overflow: hidden;
 549 }
 550
 551 .reader-mode:hover .collapsible-body {
 552   height: auto;
 553 }
 554
 555 .reader-mode span {
 556   opacity: 0;
 557   transition: opacity 0.2s ease;
 558 }
 559
 560 .reader-mode:hover span {
 561   opacity: 1;
 562 }
 563
 564 .progress {
 565   position: fixed;
 566   top: 0;
 567   width: 100%;
 568   height: 3px;
 569   margin: 0;
 570   z-index: 9999;
 571 }
 572
 573 #article aside .link {
 574   color: #000;
 575   font-size: 0.8em;
 576   text-decoration: none;
 577 }
 578
 579 #article aside #list {
 580   float: right;
 581   margin: 0 15px 10px;
 582 }
 583
 584 #article aside .chip {
 585   background-color: rgba(0, 151, 167, 0.85);
 586   color: #fff;
 587   padding: 0 15px 0 10px;
 588 }
 589
 590 #article aside .chip i {
 591   color: #fff;
 592 }
 593
 594 /* ==========================================================================
 595    6 = Media queries
 596    ========================================================================== */
 597
 598 @media only screen and (max-width: 992px) {
 599   header,
 600   main,
 601   footer {
 602     padding-left: 0;
 603   }
 604
 605   nav,
 606   main,
 607   footer {
 608     padding-left: 0;
 609   }
 610
 611   .pagination {
 612     width: auto;
 613   }
 614
 615   #article {
 616     padding: 15px;
 617     max-width: 35em;
 618     margin-left: auto;
 619     margin-right: auto;
 620     font-size: 18px;
 621   }
 622
 623   #article > header > h1 {
 624     font-size: 1.33em;
 625   }
 626
 627   .reader-mode {
 628     width: 240px !important;
 629   }
 630
 631   .reader-mode span {
 632     opacity: 1;
 633   }
 634
 635   .tabs {
 636     display: inline-block;
 637     height: auto;
 638   }
 639
 640   .tab {
 641     min-width: 100%;
 642   }
 643
 644   .indicator {
 645     display: none;
 646   }
 647
 648   .pagination li.prev,
 649   .pagination li.next {
 650     width: auto;
 651   }
 652 }
 653
 654 @media only screen and (min-width: 400px) {
 655   .nav-panel-buttom {
 656     float: right;
 657   }
 658 }
 659
 660 @media only screen and (min-width: 993px) and (max-width: 1180px) {
 661   .row .col.l1 {
 662     width: 25%;
 663     margin-left: 0;
 664   }
 665
 666   .row .col.l2 {
 667     width: 33.33333%;
 668     margin-left: 0;
 669   }
 670
 671   .row .col.l3 {
 672     width: 41.66667%;
 673     margin-left: 0;
 674   }
 675
 676   .row .col.l4 {
 677     width: 50%;
 678     margin-left: 0;
 679   }
 680
 681   .row .col.l5 {
 682     width: 58.33333%;
 683     margin-left: 0;
 684   }
 685
 686   .row .col.l6 {
 687     width: 66.66667%;
 688     margin-left: 0;
 689   }
 690
 691   .row .col.l7 {
 692     width: 75%;
 693     margin-left: 0;
 694   }
 695
 696   .row .col.l8 {
 697     width: 83.33333%;
 698     margin-left: 0;
 699   }
 700
 701   .row .col.l9 {
 702     width: 91.66667%;
 703     margin-left: 0;
 704   }
 705
 706   .row .col.l10 {
 707     width: 100%;
 708     margin-left: 0;
 709   }
 710 }
 711
 712 @media only screen and (max-width: 350px) {
 713   .nb-results {
 714     display: none;
 715   }
 716 }
 717
 718 /* ==========================================================================
 719    7 = Font
 720    ========================================================================== */
 721
 722 .icon-google-plus2::before {
 723   content: "\ea89";
 724 }
 725
 726 .icon-facebook2::before {
 727   content: "\ea8d";
 728 }
 729
 730 .icon-twitter::before {
 731   content: "\ea96";
 732 }
 733
 734 .icon-apple::before {
 735   content: "\eabf";
 736 }
 737
 738 .icon-android::before {
 739   content: "\eac1";
 740 }
 741
 742 .icon-chrome::before {
 743   content: "\eae5";
 744 }
 745
 746 .icon-firefox::before {
 747   content: "\eae6";
 748 }
 749
 750 .icon-link::before {
 751   content: "\e9cb";
 752 }
 753
 754 footer [class^="icon-"],
 755 footer [class*=" icon-"] {
 756   font-size: 2em;
 757   transition: text-shadow 0.2s ease;
 758   padding-right: 10px;
 759 }
 760
 761 footer [class^="icon-"]:hover,
 762 footer [class*=" icon-"]:hover {
 763   text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 764 }
 765
 766 /* ==========================================================================
 767    8 = Others
 768    ========================================================================== */
 769
 770 /* force height on non-input field in the settings page */
 771 div.settings div.input-field div,
 772 div.settings div.input-field ul {
 773   margin-top: 40px;
 774 }
 775
 776 /* but avoid to kill all file input */
 777 div.settings div.file-field div {
 778   margin-top: inherit;
 779 }
 780
 781 .input-field label.active {
 782   font-size: 1rem;
 783 }
 784
 785 nav .input-field input {
 786   margin: 0;
 787 }