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