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