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