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