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