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