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