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