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
 204 /* ==========================================================================
 205    2 = Side-nav
 206    ========================================================================== */
 207
 208 .side-nav.fixed a {
 209     font-size: 13px;
 210     line-height: 44px;
 211     height: 44px;
 212 }
 213
 214 .bold > a {
 215     font-weight: bold;
 216 }
 217
 218 .side-nav > li.logo {
 219     line-height: 0;
 220     text-align: center;
 221 }
 222
 223 #main .logo a {
 224     height: 100pt;
 225 }
 226
 227 #main .logo img {
 228     height: 100pt;
 229     width: 100pt;
 230 }
 231
 232 #main .logo:hover {
 233     background: transparent;
 234 }
 235
 236 .side-nav li {
 237     padding: 0px;
 238 }
 239
 240 .side-nav a {
 241     margin: 0px 1rem;
 242 }
 243
 244 /* ==========================================================================
 245  * 3 = Filters slider
 246  * ========================================================================== */
 247
 248 #filters button {
 249     padding: 0px;
 250     width: 100%;
 251 }
 252
 253 .side-nav.fixed.right-aligned {
 254     right: -250px;
 255     left: auto !important;
 256     overflow-y: visible;
 257 }
 258
 259 #filters div.with-checkbox {
 260     height: 3rem;
 261     margin-top: 0px;
 262 }
 263
 264 /* ==========================================================================
 265    4 = Cards
 266    ========================================================================== */
 267
 268 main #content {
 269     padding: 0px 0.5rem;
 270 }
 271
 272 main ul.row {
 273     padding: 0px 0.75rem;
 274 }
 275
 276 .data .card .card-body {
 277     height: 22em;
 278     overflow: hidden;
 279 }
 280
 281 .card .card-content .card-title {
 282     line-height: 32px;
 283 }
 284
 285 .card .card-content .estimatedTime {
 286     margin-bottom: 10px;
 287 }
 288
 289 .card .card-action .original {
 290     line-height: 24px;
 291 }
 292
 293 .card .card-action ul.links {
 294     margin: 0;
 295     font-size: 24px;
 296     line-height: 24px;
 297 }
 298
 299 .card .card-action a {
 300     color: #ffffff;
 301     margin: 0;
 302 }
 303
 304 .card .card-action a:hover {
 305     color: #ffffff;
 306 }
 307
 308 .settings .div_tabs {
 309     padding-bottom: 15px;
 310 }
 311
 312 .card.sw {
 313     max-width: 370px;
 314     margin-left: auto;
 315     margin-right: auto;
 316 }
 317
 318 .mdi-card-close:before {
 319     content: "\e8aa";
 320 }
 321
 322 .card .card-image {
 323     height: 14em;
 324 }
 325
 326 .card .card-image .preview {
 327     height: 14em;
 328     background-size: cover;
 329     background-repeat: no-repeat;
 330     background-position: 50%;
 331 }
 332
 333 /* ==========================================================================
 334    5 = Article
 335    ========================================================================== */
 336
 337 #article {
 338     font-size: 20px;
 339     margin: 0px auto;
 340     max-width: 40em;
 341 }
 342
 343 .reader-mode {
 344     width: 95px !important;
 345     transition: width 0.2s ease;
 346 }
 347
 348 .reader-mode:hover {
 349     width: 240px !important;
 350 }
 351
 352 .reader-mode .collapsible-body {
 353     height: 0;
 354     overflow: hidden;
 355 }
 356
 357 .reader-mode:hover .collapsible-body {
 358     height: auto;
 359 }
 360
 361 .reader-mode span {
 362     opacity: 0;
 363     transition: opacity 0.2s ease;
 364 }
 365
 366 .reader-mode:hover span {
 367     opacity: 1;
 368 }
 369
 370 .progress {
 371     position:fixed;
 372     top:0px;
 373     width: 100%;
 374     height: 3px;
 375     margin: 0;
 376     z-index: 9999;
 377 }
 378
 379 #article aside .link {
 380     color: #000;
 381     font-size: 0.6em;
 382     text-decoration: none;
 383 }
 384
 385 #article aside #list {
 386     float: right;
 387     margin-right: 15px;
 388 }
 389
 390 #article aside .chip {
 391     background-color: #039be5;
 392     color: #ffffff;
 393 }
 394
 395 /* ==========================================================================
 396    6 = Media queries
 397    ========================================================================== */
 398
 399   @media only screen and (max-width : 992px) {
 400     header, main, footer {
 401       padding-left: 0;
 402     }
 403     nav, main, footer {
 404         padding-left: 0;
 405     }
 406     .pagination {
 407         width: auto;
 408     }
 409     .reader-mode {
 410         width: 240px !important;
 411     }
 412     .reader-mode span {
 413         opacity: 1;
 414     }
 415   }
 416
 417 @media only screen and (min-width : 993px) and (max-width : 1180px) {
 418     .row .col.l1 {
 419     width: 25%;
 420     margin-left: 0; }
 421     .row .col.l2 {
 422     width: 33.33333%;
 423     margin-left: 0; }
 424     .row .col.l3 {
 425     width: 41.66667%;
 426     margin-left: 0; }
 427     .row .col.l4 {
 428     width: 50%;
 429     margin-left: 0; }
 430     .row .col.l5 {
 431     width: 58.33333%;
 432     margin-left: 0; }
 433     .row .col.l6 {
 434     width: 66.66667%;
 435     margin-left: 0; }
 436     .row .col.l7 {
 437     width: 75%;
 438     margin-left: 0; }
 439     .row .col.l8 {
 440     width: 83.33333%;
 441     margin-left: 0; }
 442     .row .col.l9 {
 443     width: 91.66667%;
 444     margin-left: 0; }
 445     .row .col.l10 {
 446     width: 100%;
 447     margin-left: 0; }
 448 }
 449
 450 @media only screen and (max-width : 350px) {
 451     .nb-results {
 452         display: none;
 453     }
 454 }
 455
 456 /* ==========================================================================
 457    7 = Font
 458    ========================================================================== */
 459
 460 .icon-google-plus2:before {
 461     content: "\e800";
 462 }
 463 .icon-facebook2:before {
 464     content: "\e801";
 465 }
 466 .icon-twitter:before {
 467     content: "\e802";
 468 }
 469 .icon-apple:before {
 470     content: "\e803";
 471 }
 472 .icon-android:before {
 473     content: "\e804";
 474 }
 475 .icon-chrome:before {
 476     content: "\e805";
 477 }
 478 .icon-firefox:before {
 479     content: "\e806";
 480 }
 481
 482 footer [class^="icon-"], footer [class*=" icon-"] {
 483     font-size: 2em;
 484     transition: text-shadow 0.2s ease;
 485     padding-right: 10px;
 486 }
 487
 488 footer [class^="icon-"]:hover, footer [class*=" icon-"]:hover {
 489     text-shadow: 0 0 10px rgba(0,0,0,0.3);
 490 }
 491
 492
 493 /* ==========================================================================
 494    8 = Others
 495    ========================================================================== */
 496
 497 /* force height on non-input field in the settings page */
 498 div.settings div.input-field div, div.settings div.input-field ul {
 499     margin-top: 40px;
 500 }
 501 /* but avoid to kill all file input */
 502 div.settings div.file-field div {
 503     margin-top: inherit;
 504 }