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 .input-field input {
 104     display: block;
 105     line-height: inherit;
 106     padding-left: 4rem !important;
 107     width: calc(100% - 8rem);
 108 }
 109
 110 .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 /* ==========================================================================
 132    2 = Side-nav
 133    ========================================================================== */
 134
 135 .side-nav.fixed a {
 136     font-size: 13px;
 137     line-height: 44px;
 138     height: 44px;
 139 }
 140
 141 .bold > a {
 142     font-weight: bold;
 143 }
 144
 145 .side-nav > li.logo {
 146     line-height: 0;
 147     text-align: center;
 148 }
 149
 150 #main .logo a {
 151     height: 100pt;
 152 }
 153
 154 #main .logo img {
 155     height: 100pt;
 156     width: 100pt;
 157 }
 158
 159 .side-nav li {
 160     padding: 0px;
 161 }
 162
 163 .side-nav a {
 164     margin: 0px 1rem;
 165 }
 166
 167 /* ==========================================================================
 168    3 = Cards
 169    ========================================================================== */
 170
 171 main #content {
 172     padding: 0px 0.5rem;
 173 }
 174
 175 main ul.row {
 176     padding: 0px 0.75rem;
 177 }
 178
 179 .data .card .card-content {
 180     height: 22em;
 181     overflow: hidden;
 182 }
 183
 184 .card .card-content .card-title {
 185     line-height: 32px;
 186 }
 187
 188 .card .card-content .estimatedTime {
 189     margin-bottom: 10px;
 190 }
 191
 192 .card .card-action .original {
 193     line-height: 24px;
 194 }
 195
 196 .card .card-action ul.links {
 197     margin: 0;
 198     font-size: 24px;
 199     line-height: 24px;
 200 }
 201
 202 .card .card-action a {
 203     margin: 0;
 204 }
 205
 206 .settings .div_tabs {
 207     padding-bottom: 15px;
 208 }
 209
 210 .card.sw {
 211     max-width: 370px;
 212     margin-left: auto;
 213     margin-right: auto;
 214 }
 215
 216 /* ==========================================================================
 217    4 = Article
 218    ========================================================================== */
 219
 220 #article {
 221     font-size: 20px;
 222     margin: 0px auto;
 223     max-width: 40em;
 224 }
 225
 226 .reader-mode {
 227     width: 95px !important;
 228     transition: width 0.2s ease;
 229 }
 230
 231 .reader-mode:hover {
 232     width: 240px !important;
 233 }
 234
 235 .reader-mode span {
 236     opacity: 0;
 237     transition: opacity 0.2s ease;
 238 }
 239
 240 .reader-mode:hover span {
 241     opacity: 1;
 242 }
 243
 244 /* ==========================================================================
 245    6 = Media queries
 246    ========================================================================== */
 247
 248   @media only screen and (max-width : 992px) {
 249     header, main, footer {
 250       padding-left: 0;
 251     }
 252     nav, main, footer {
 253         padding-left: 0;
 254     }
 255     .pagination {
 256         width: auto;
 257     }
 258     .reader-mode {
 259         width: 240px !important;
 260     }
 261     .reader-mode span {
 262         opacity: 1;
 263     }
 264   }
 265
 266 @media only screen and (min-width : 993px) and (max-width : 1180px) {
 267     .row .col.l1 {
 268     width: 25%;
 269     margin-left: 0; }
 270     .row .col.l2 {
 271     width: 33.33333%;
 272     margin-left: 0; }
 273     .row .col.l3 {
 274     width: 41.66667%;
 275     margin-left: 0; }
 276     .row .col.l4 {
 277     width: 50%;
 278     margin-left: 0; }
 279     .row .col.l5 {
 280     width: 58.33333%;
 281     margin-left: 0; }
 282     .row .col.l6 {
 283     width: 66.66667%;
 284     margin-left: 0; }
 285     .row .col.l7 {
 286     width: 75%;
 287     margin-left: 0; }
 288     .row .col.l8 {
 289     width: 83.33333%;
 290     margin-left: 0; }
 291     .row .col.l9 {
 292     width: 91.66667%;
 293     margin-left: 0; }
 294     .row .col.l10 {
 295     width: 100%;
 296     margin-left: 0; }
 297 }
 298
 299 @media only screen and (max-width : 350px) {
 300     .nb-results {
 301         display: none;
 302     }
 303 }