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