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