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