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 = Others
  12
  13    ========================================================================== */
  14
  15
  16 /* ==========================================================================
  17    0 = Common
  18    ========================================================================== */
  19
  20 body {
  21     display: flex;
  22     min-height: 100vh;
  23     flex-direction: column;
  24     background: #f0f0f0;
  25 }
  26
  27 body.login main {
  28     padding: 0;
  29 }
  30
  31 #warning_message {
  32     position: fixed;
  33     background-color: #ff6347;
  34     z-index: 1000;
  35     bottom: 0;
  36     left: 0;
  37     width: 100%;
  38     color: #000;
  39 }
  40
  41 #warning_message a {
  42     color: #555;
  43 }
  44
  45 .border-bottom {
  46     border-bottom: 1px solid #DDD;
  47 }
  48
  49 nav, main, footer {
  50     padding-left: 240px;
  51 }
  52
  53 #main {
  54     flex: 1 0 auto;
  55 }
  56
  57 .results {
  58     height: 1em;
  59     line-height: 30px;
  60 }
  61
  62 .results .nb-results, .results .pagination {
  63     margin: 15px;
  64     margin-bottom: 0;
  65 }
  66
  67 .pagination li {
  68     padding: 0;
  69 }
  70
  71 .pagination a {
  72     padding: 0px 10px;
  73     height: 30px;
  74     display: block;
  75 }
  76
  77 .page-footer .footer-copyright p {
  78     display: inline;
  79 }
  80
  81 .hidden {
  82     display: none;
  83 }
  84
  85 .picker__date-display {
  86     display: none;
  87 }
  88
  89 /* ==========================================================================
  90    1 = Nav
  91    ========================================================================== */
  92
  93 nav input {
  94     color: #aaa;
  95 }
  96
  97 .nav-wrapper .button-collapse {
  98     padding: 0px 15px;
  99 }
 100
 101 .nav-input {
 102     display: none;
 103 }
 104
 105 .nav-panels {
 106     overflow: hidden;
 107 }
 108
 109 .nav-panel-buttom li {
 110     max-height: 64px;
 111 }
 112
 113 .nav-panel-buttom {
 114     float: right;
 115 }
 116
 117 .nav-panels {
 118     transition: background 0.2s ease;
 119 }
 120
 121 .nav-panel-add .mdi-content-add,
 122 .nav-panel-search .mdi-action-search,
 123 .nav-panels .mdi-navigation-close {
 124     color: #444 !important;
 125 }
 126
 127 .nav-panels .action {
 128     padding-left: 0.75rem;
 129     font-size: 2.1rem;
 130     white-space: nowrap;
 131 }
 132
 133 .nav-panels .input-field input {
 134     display: block;
 135     line-height: inherit;
 136     padding-left: 4rem !important;
 137     width: calc(100% - 8rem);
 138 }
 139
 140 .nav-panels .input-field input:focus {
 141     background-color: #fff;
 142     border: 0;
 143     box-shadow: none;
 144     color: #444;
 145 }
 146
 147 .input-field.nav-panel-add label {
 148     left: 1rem;
 149 }
 150
 151 .input-field.nav-panel-add .mdi-navigation-close {
 152     position: absolute;
 153     top: 0;
 154     right: 1rem;
 155     color: transparent;
 156     cursor: pointer;
 157     font-size: 2rem;
 158     transition: .3s color;
 159 }
 160
 161 #button_filters {
 162     display: none;
 163 }
 164
 165 /* ==========================================================================
 166    2 = Side-nav
 167    ========================================================================== */
 168
 169 .side-nav.fixed a {
 170     font-size: 13px;
 171     line-height: 44px;
 172     height: 44px;
 173 }
 174
 175 .bold > a {
 176     font-weight: bold;
 177 }
 178
 179 .side-nav > li.logo {
 180     line-height: 0;
 181     text-align: center;
 182 }
 183
 184 #main .logo a {
 185     height: 100pt;
 186 }
 187
 188 #main .logo img {
 189     height: 100pt;
 190     width: 100pt;
 191 }
 192
 193 .side-nav li {
 194     padding: 0px;
 195 }
 196
 197 .side-nav a {
 198     margin: 0px 1rem;
 199 }
 200
 201 /* ==========================================================================
 202  * 3 = Filters slider
 203  * ========================================================================== */
 204
 205 #filters button {
 206     padding: 0px;
 207     width: 100%;
 208 }
 209
 210 .side-nav.fixed.right-aligned {
 211     right: -250px;
 212     left: auto !important;
 213     overflow-y: visible;
 214 }
 215
 216 #filters div.with-checkbox {
 217     height: 3rem;
 218     margin-top: 0px;
 219 }
 220
 221 /* ==========================================================================
 222    4 = Cards
 223    ========================================================================== */
 224
 225 main #content {
 226     padding: 0px 0.5rem;
 227 }
 228
 229 main ul.row {
 230     padding: 0px 0.75rem;
 231 }
 232
 233 .data .card .card-body {
 234     height: 22em;
 235     overflow: hidden;
 236 }
 237
 238 .card .card-content .card-title {
 239     line-height: 32px;
 240 }
 241
 242 .card .card-content .estimatedTime {
 243     margin-bottom: 10px;
 244 }
 245
 246 .card .card-action .original {
 247     line-height: 24px;
 248 }
 249
 250 .card .card-action ul.links {
 251     margin: 0;
 252     font-size: 24px;
 253     line-height: 24px;
 254 }
 255
 256 .card .card-action a {
 257     color: #ffffff;
 258     margin: 0;
 259 }
 260
 261 .card .card-action a:hover {
 262     color: #ffffff;
 263 }
 264
 265 .settings .div_tabs {
 266     padding-bottom: 15px;
 267 }
 268
 269 .card.sw {
 270     max-width: 370px;
 271     margin-left: auto;
 272     margin-right: auto;
 273 }
 274
 275 .mdi-card-close:before {
 276     content: "\e8aa";
 277 }
 278
 279 .card .card-image {
 280     height: 14em;
 281 }
 282
 283 .card .card-image .preview {
 284     height: 14em;
 285     background-size: cover;
 286     background-repeat: no-repeat;
 287     background-position: 50%;
 288 }
 289
 290 /* ==========================================================================
 291    5 = Article
 292    ========================================================================== */
 293
 294 #article {
 295     font-size: 20px;
 296     margin: 0px auto;
 297     max-width: 40em;
 298 }
 299
 300 .reader-mode {
 301     width: 95px !important;
 302     transition: width 0.2s ease;
 303 }
 304
 305 .reader-mode:hover {
 306     width: 240px !important;
 307 }
 308
 309 .reader-mode .collapsible-body {
 310     height: 0;
 311     overflow: hidden;
 312 }
 313
 314 .reader-mode:hover .collapsible-body {
 315     height: auto;
 316 }
 317
 318 .reader-mode span {
 319     opacity: 0;
 320     transition: opacity 0.2s ease;
 321 }
 322
 323 .reader-mode:hover span {
 324     opacity: 1;
 325 }
 326
 327 .progress {
 328     position:fixed;
 329     top:0px;
 330     width: 100%;
 331     height: 3px;
 332     margin: 0;
 333     z-index: 9999;
 334 }
 335
 336 #article aside .link {
 337     color: #000;
 338     font-size: 0.6em;
 339     text-decoration: none;
 340 }
 341
 342 #article aside #list {
 343     float: right;
 344     margin-right: 15px;
 345 }
 346
 347 #article aside span a {
 348     background-color: #039be5;
 349     color: #fff;
 350     border-radius: 3px;
 351     float: left;
 352     font-size: 0.6em;
 353     margin-left: 0.5em;
 354     margin-bottom: 0.5em;
 355     padding: 4px;
 356     text-decoration: none;
 357 }
 358
 359 /* ==========================================================================
 360    6 = Media queries
 361    ========================================================================== */
 362
 363   @media only screen and (max-width : 992px) {
 364     header, main, footer {
 365       padding-left: 0;
 366     }
 367     nav, main, footer {
 368         padding-left: 0;
 369     }
 370     .pagination {
 371         width: auto;
 372     }
 373     .reader-mode {
 374         width: 240px !important;
 375     }
 376     .reader-mode span {
 377         opacity: 1;
 378     }
 379   }
 380
 381 @media only screen and (min-width : 993px) and (max-width : 1180px) {
 382     .row .col.l1 {
 383     width: 25%;
 384     margin-left: 0; }
 385     .row .col.l2 {
 386     width: 33.33333%;
 387     margin-left: 0; }
 388     .row .col.l3 {
 389     width: 41.66667%;
 390     margin-left: 0; }
 391     .row .col.l4 {
 392     width: 50%;
 393     margin-left: 0; }
 394     .row .col.l5 {
 395     width: 58.33333%;
 396     margin-left: 0; }
 397     .row .col.l6 {
 398     width: 66.66667%;
 399     margin-left: 0; }
 400     .row .col.l7 {
 401     width: 75%;
 402     margin-left: 0; }
 403     .row .col.l8 {
 404     width: 83.33333%;
 405     margin-left: 0; }
 406     .row .col.l9 {
 407     width: 91.66667%;
 408     margin-left: 0; }
 409     .row .col.l10 {
 410     width: 100%;
 411     margin-left: 0; }
 412 }
 413
 414 @media only screen and (max-width : 350px) {
 415     .nb-results {
 416         display: none;
 417     }
 418 }
 419 /* ==========================================================================
 420    7 = Others
 421    ========================================================================== */
 422
 423 /* force height on non-input field in the settings page */
 424 div.settings div.input-field div, div.settings div.input-field ul {
 425     margin-top: 40px;
 426 }