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