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