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