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