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