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