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