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