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