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