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