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