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 .input-field.nav-panel-add, .input-field.nav-panel-add form {
 211     height: 100%;
 212 }
 213
 214 /* ==========================================================================
 215    2 = Side-nav
 216    ========================================================================== */
 217
 218 .side-nav.fixed a {
 219     font-size: 13px;
 220     line-height: 44px;
 221     height: 44px;
 222 }
 223
 224 .bold > a {
 225     font-weight: bold;
 226 }
 227
 228 .side-nav > li.logo {
 229     line-height: 0;
 230     text-align: center;
 231 }
 232
 233 #main .logo a {
 234     height: 100pt;
 235 }
 236
 237 #main .logo img {
 238     height: 100pt;
 239     width: 100pt;
 240 }
 241
 242 #main .logo:hover {
 243     background: transparent;
 244 }
 245
 246 .side-nav li {
 247     padding: 0px;
 248 }
 249
 250 .side-nav a {
 251     margin: 0px 1rem;
 252 }
 253
 254 /* ==========================================================================
 255  * 3 = Filters slider
 256  * ========================================================================== */
 257
 258 #filters button {
 259     padding: 0px;
 260     width: 100%;
 261 }
 262
 263 .side-nav.fixed.right-aligned {
 264     right: -250px;
 265     left: auto !important;
 266     overflow-y: visible;
 267 }
 268
 269 #filters div.with-checkbox {
 270     height: 3rem;
 271     margin-top: 0px;
 272 }
 273
 274 /* ==========================================================================
 275    4 = Cards
 276    ========================================================================== */
 277
 278 main #content {
 279     padding: 0px 0.5rem;
 280 }
 281
 282 main ul.row {
 283     padding: 0px 0.75rem;
 284 }
 285
 286 .data .card .card-body {
 287     height: 22em;
 288     overflow: hidden;
 289 }
 290
 291 .card .card-content .card-title {
 292     line-height: 32px;
 293     max-height: 64px;
 294     display: block;
 295 }
 296
 297 .card .card-content i.right, .card .card-reveal i.right {
 298     margin-left: 0;
 299 }
 300
 301 .card .card-content .estimatedTime {
 302     margin-bottom: 10px;
 303 }
 304
 305 .card .card-action .original {
 306     line-height: 24px;
 307 }
 308
 309 .card .card-action ul.links {
 310     margin: 0;
 311     font-size: 24px;
 312     line-height: 24px;
 313 }
 314
 315 .card .card-action a {
 316     color: #ffffff;
 317     margin: 0;
 318 }
 319
 320 .card .card-action a:hover {
 321     color: #ffffff;
 322 }
 323
 324 .settings .div_tabs {
 325     padding-bottom: 15px;
 326 }
 327
 328 .card.sw {
 329     max-width: 370px;
 330     margin-left: auto;
 331     margin-right: auto;
 332 }
 333
 334 .mdi-card-close:before {
 335     content: "\e8aa";
 336 }
 337
 338 .card .card-image {
 339     height: 14em;
 340 }
 341
 342 .card .card-image .preview {
 343     height: 14em;
 344     background-size: cover;
 345     background-repeat: no-repeat;
 346     background-position: 50%;
 347 }
 348
 349 /* ==========================================================================
 350    5 = Article
 351    ========================================================================== */
 352
 353 #article {
 354     font-size: 20px;
 355     margin: 0px auto;
 356     max-width: 40em;
 357 }
 358
 359 #article img,
 360 #article figure {
 361     max-width: 100%;
 362     height: auto;
 363 }
 364
 365 .reader-mode {
 366     width: 95px !important;
 367     transition: width 0.2s ease;
 368 }
 369
 370 .reader-mode:hover {
 371     width: 240px !important;
 372 }
 373
 374 .reader-mode .collapsible-body {
 375     height: 0;
 376     overflow: hidden;
 377 }
 378
 379 .reader-mode:hover .collapsible-body {
 380     height: auto;
 381 }
 382
 383 .reader-mode span {
 384     opacity: 0;
 385     transition: opacity 0.2s ease;
 386 }
 387
 388 .reader-mode:hover span {
 389     opacity: 1;
 390 }
 391
 392 .progress {
 393     position:fixed;
 394     top:0px;
 395     width: 100%;
 396     height: 3px;
 397     margin: 0;
 398     z-index: 9999;
 399 }
 400
 401 #article aside .link {
 402     color: #000;
 403     font-size: 0.6em;
 404     text-decoration: none;
 405 }
 406
 407 #article aside #list {
 408     float: right;
 409     margin-right: 15px;
 410 }
 411
 412 #article aside .chip {
 413     background-color: #039be5;
 414     color: #ffffff;
 415 }
 416
 417 #article aside .chip i {
 418     color: #ffffff;
 419 }
 420
 421 /* ==========================================================================
 422    6 = Media queries
 423    ========================================================================== */
 424
 425   @media only screen and (max-width : 992px) {
 426     header, main, footer {
 427       padding-left: 0;
 428     }
 429     nav, main, footer {
 430         padding-left: 0;
 431     }
 432     .pagination {
 433         width: auto;
 434     }
 435     .reader-mode {
 436         width: 240px !important;
 437     }
 438     .reader-mode span {
 439         opacity: 1;
 440     }
 441
 442     .tabs {
 443         display: inline-block;
 444         height: auto;
 445     }
 446     .tab {
 447         min-width: 100%;
 448     }
 449     .indicator {
 450         display: none;
 451     }
 452     .pagination li.prev, .pagination li.next {
 453         width: auto;
 454     }
 455   }
 456
 457 @media only screen and (min-width : 400px) {
 458     .nav-panel-buttom {
 459         float: right;
 460     }
 461 }
 462
 463 @media only screen and (min-width : 993px) and (max-width : 1180px) {
 464     .row .col.l1 {
 465     width: 25%;
 466     margin-left: 0; }
 467     .row .col.l2 {
 468     width: 33.33333%;
 469     margin-left: 0; }
 470     .row .col.l3 {
 471     width: 41.66667%;
 472     margin-left: 0; }
 473     .row .col.l4 {
 474     width: 50%;
 475     margin-left: 0; }
 476     .row .col.l5 {
 477     width: 58.33333%;
 478     margin-left: 0; }
 479     .row .col.l6 {
 480     width: 66.66667%;
 481     margin-left: 0; }
 482     .row .col.l7 {
 483     width: 75%;
 484     margin-left: 0; }
 485     .row .col.l8 {
 486     width: 83.33333%;
 487     margin-left: 0; }
 488     .row .col.l9 {
 489     width: 91.66667%;
 490     margin-left: 0; }
 491     .row .col.l10 {
 492     width: 100%;
 493     margin-left: 0; }
 494 }
 495
 496 @media only screen and (max-width : 350px) {
 497     .nb-results {
 498         display: none;
 499     }
 500 }
 501
 502 /* ==========================================================================
 503    7 = Font
 504    ========================================================================== */
 505
 506 .icon-google-plus2:before {
 507     content: "\e800";
 508 }
 509 .icon-facebook2:before {
 510     content: "\e801";
 511 }
 512 .icon-twitter:before {
 513     content: "\e802";
 514 }
 515 .icon-apple:before {
 516     content: "\e803";
 517 }
 518 .icon-android:before {
 519     content: "\e804";
 520 }
 521 .icon-chrome:before {
 522     content: "\e805";
 523 }
 524 .icon-firefox:before {
 525     content: "\e806";
 526 }
 527
 528 footer [class^="icon-"], footer [class*=" icon-"] {
 529     font-size: 2em;
 530     transition: text-shadow 0.2s ease;
 531     padding-right: 10px;
 532 }
 533
 534 footer [class^="icon-"]:hover, footer [class*=" icon-"]:hover {
 535     text-shadow: 0 0 10px rgba(0,0,0,0.3);
 536 }
 537
 538
 539 /* ==========================================================================
 540    8 = Others
 541    ========================================================================== */
 542
 543 /* force height on non-input field in the settings page */
 544 div.settings div.input-field div, div.settings div.input-field ul {
 545     margin-top: 40px;
 546 }
 547 /* but avoid to kill all file input */
 548 div.settings div.file-field div {
 549     margin-top: inherit;
 550 }