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 /* ==========================================================================
 213    4 = Cards
 214    ========================================================================== */
 215
 216 main #content {
 217     padding: 0px 0.5rem;
 218 }
 219
 220 main ul.row {
 221     padding: 0px 0.75rem;
 222 }
 223
 224 .data .card .card-content {
 225     height: 22em;
 226     overflow: hidden;
 227 }
 228
 229 img.preview {
 230     max-width: 100%;
 231 }
 232
 233 .card .card-content .card-title {
 234     line-height: 32px;
 235 }
 236
 237 .card .card-content .estimatedTime {
 238     margin-bottom: 10px;
 239 }
 240
 241 .card .card-action .original {
 242     line-height: 24px;
 243 }
 244
 245 .card .card-action ul.links {
 246     margin: 0;
 247     font-size: 24px;
 248     line-height: 24px;
 249 }
 250
 251 .card .card-action a {
 252     margin: 0;
 253 }
 254
 255 .settings .div_tabs {
 256     padding-bottom: 15px;
 257 }
 258
 259 .card.sw {
 260     max-width: 370px;
 261     margin-left: auto;
 262     margin-right: auto;
 263 }
 264
 265 /* ==========================================================================
 266    5 = Article
 267    ========================================================================== */
 268
 269 #article {
 270     font-size: 20px;
 271     margin: 0px auto;
 272     max-width: 40em;
 273 }
 274
 275 .reader-mode {
 276     width: 95px !important;
 277     transition: width 0.2s ease;
 278 }
 279
 280 .reader-mode:hover {
 281     width: 240px !important;
 282 }
 283
 284 .reader-mode .collapsible-body {
 285     height: 0;
 286     overflow: hidden;
 287 }
 288
 289 .reader-mode:hover .collapsible-body {
 290     height: auto;
 291 }
 292
 293 .reader-mode span {
 294     opacity: 0;
 295     transition: opacity 0.2s ease;
 296 }
 297
 298 .reader-mode:hover span {
 299     opacity: 1;
 300 }
 301
 302 .progress {
 303     position:fixed;
 304     top:0px;
 305     width: 100%;
 306     height: 3px;
 307     margin: 0;
 308     z-index: 9999;
 309 }
 310
 311 #article aside .link {
 312     color: #000;
 313     font-size: 0.6em;
 314     text-decoration: none;
 315 }
 316
 317 #article aside #list {
 318     float: right;
 319     margin-right: 15px;
 320 }
 321
 322 #article aside span a {
 323     background-color: #039be5;
 324     color: #fff;
 325     border-radius: 3px;
 326     float: left;
 327     font-size: 0.6em;
 328     margin-left: 0.5em;
 329     margin-bottom: 0.5em;
 330     padding: 4px;
 331     text-decoration: none;
 332 }
 333
 334 /* ==========================================================================
 335    6 = Media queries
 336    ========================================================================== */
 337
 338   @media only screen and (max-width : 992px) {
 339     header, main, footer {
 340       padding-left: 0;
 341     }
 342     nav, main, footer {
 343         padding-left: 0;
 344     }
 345     .pagination {
 346         width: auto;
 347     }
 348     .reader-mode {
 349         width: 240px !important;
 350     }
 351     .reader-mode span {
 352         opacity: 1;
 353     }
 354   }
 355
 356 @media only screen and (min-width : 993px) and (max-width : 1180px) {
 357     .row .col.l1 {
 358     width: 25%;
 359     margin-left: 0; }
 360     .row .col.l2 {
 361     width: 33.33333%;
 362     margin-left: 0; }
 363     .row .col.l3 {
 364     width: 41.66667%;
 365     margin-left: 0; }
 366     .row .col.l4 {
 367     width: 50%;
 368     margin-left: 0; }
 369     .row .col.l5 {
 370     width: 58.33333%;
 371     margin-left: 0; }
 372     .row .col.l6 {
 373     width: 66.66667%;
 374     margin-left: 0; }
 375     .row .col.l7 {
 376     width: 75%;
 377     margin-left: 0; }
 378     .row .col.l8 {
 379     width: 83.33333%;
 380     margin-left: 0; }
 381     .row .col.l9 {
 382     width: 91.66667%;
 383     margin-left: 0; }
 384     .row .col.l10 {
 385     width: 100%;
 386     margin-left: 0; }
 387 }
 388
 389 @media only screen and (max-width : 350px) {
 390     .nb-results {
 391         display: none;
 392     }
 393 }
 394 /* ==========================================================================
 395    7 = Others
 396    ========================================================================== */
 397
 398 /* force height on non-input field in the settings page */
 399 div.settings div.input-field div, div.settings div.input-field ul {
 400     margin-top: 40px;
 401 }