wallabag/assets/material/css/media_queries.scss
2024-02-24 23:54:36 +01:00

194 lines
2.6 KiB
SCSS

/* ==========================================================================
Media queries
========================================================================== */
@media only screen and (min-width: 450px) {
.entries-row {
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
}
@media only screen and (min-width: 992px) {
nav,
.index main,
footer {
padding-left: 240px;
}
.pagination {
margin-left: auto;
}
}
@media screen and (min-width: 993px) {
.entry main div#content {
padding-left: 70px;
}
}
@media only screen and (max-width: 992px) {
header,
main,
footer,
nav {
padding-left: 0;
}
table {
display: block;
overflow: auto;
}
iframe {
max-width: 100%;
height: auto;
}
.nav-panels .action {
padding-right: 0.75rem;
}
.nav-panel-top {
padding: 6px 0;
}
.nav-panel-buttom {
justify-content: space-between;
}
#article {
max-width: 35em;
margin-left: auto;
margin-right: auto;
padding-bottom: 100px;
font-size: 18px;
> header > h1 {
font-size: 1.33em;
}
}
.reader-mode {
width: 240px !important;
span {
opacity: 1;
}
}
.tabs {
display: inline-block;
height: auto;
}
.tab {
min-width: 100%;
}
.indicator {
display: none;
}
.pagination li {
margin-bottom: 0.5rem;
&.prev,
&.next {
width: auto;
}
}
.drag-target + .drag-target {
height: 50%;
}
.drag-target + .drag-target + .drag-target {
top: 50%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1650px) {
.row .col.l3 {
width: 33.3333%;
margin-left: 0;
}
}
@media only screen and (min-width: 993px) and (max-width: 1200px) {
.row {
.col.l1 {
width: 25%;
margin-left: 0;
}
.col.l2 {
width: 33.3333%;
margin-left: 0;
}
.col.l3 {
width: 41.6667%;
margin-left: 0;
}
.col.l4 {
width: 50%;
margin-left: 0;
}
.col.l5 {
width: 58.333%;
margin-left: 0;
}
.col.l6 {
width: 66.6667%;
margin-left: 0;
}
.col.l7 {
width: 75%;
margin-left: 0;
}
.col.l8 {
width: 83.3333%;
margin-left: 0;
}
.col.l9 {
width: 91.6667%;
margin-left: 0;
}
.col.l10 {
width: 100%;
margin-left: 0;
}
}
}
@media only screen and (max-width: 350px) {
.nb-results {
display: none;
}
main ul.row {
padding: 0;
}
.row .col {
padding: 0;
}
.card-stacked div.metadata .reading-time {
display: none;
}
}
@media only print {
body {
display: block;
}
}