Files
danbooru/app/assets/stylesheets/specific/z_responsive.scss
2017-09-29 18:41:05 -07:00

239 lines
3.8 KiB
SCSS

@import "../common/000_vars.scss";
#desktop-version-link {
display: none;
}
@media screen and (max-width: 660px) {
#desktop-version-link {
display: inline;
}
#saved-searches-nav {
display: none;
}
div#page {
padding: 0 0.25vw;
> div /* div#c-$controller */ {
> div /* div#a-$action */ {
display: flex;
flex-direction: column;
/* Move #sidebar below #content. */
> aside#sidebar {
font-size: 1.5em;
float: none;
width: auto;
order: 2;
}
}
}
}
#maintoggle {
display: inline;
background-color: lighten($link_color, 13%);
padding: 0.8em 1.2em 0.8em 1.2em;
border-radius: 20% 20% 0 0;
font-weight: bold;
color: #fff;
&.toggler-active {
background-color: lighten($link_color, 25%);
color: #000;
}
}
/* Make the quick search box in the navbar full width. */
header#top menu form input {
width: auto;
}
h1 {
display: none;
}
form {
input[type=text] {
vertical-align: top;
font-size: 24pt;
border: 1px solid #c5c5c5;
}
textarea {
vertical-align: top;
border: 1px solid #c5c5c5;
}
input[type=submit] {
font-size: 160%;
}
input[type=submit].tiny {
font-size: 120%;
vertical-align: top;
}
}
div#page section#content {
margin: 0;
padding: 0;
}
#comments h2 {
display: none;
}
div.paginator {
font-size: 24pt;
font-weight: bold;
text-align: center;
width: 100%;
padding: 0;
margin: 0;
margin-top: 1em;
li {
display: inline-block;
margin: 0 0.25em;
a, span {
margin: 0;
padding: 0;
border: none;
}
&.current-page {
text-align: center;
}
&.arrow:last-child {
text-align: right;
}
&.numbered-page, &.more {
display: none;
}
}
}
article.post-preview {
margin: 0.5vw;
width: 48.5vw;
height: 48.5vw;
text-align: center;
vertical-align: middle;
display: inline-block;
a {
//width: 48.5vw;
//display: block;
margin: 0 auto;
}
img {
//object-fit: contain;
//width: 48.5vw;
//height: 48.5vw;
margin: 0 auto;
border: none !important;
}
&[data-tags~=animated]:before, &[data-file-ext=swf]:before, &[data-file-ext=webm]:before, &[data-file-ext=mp4]:before, &[data-file-ext=zip]:before {
@include animated-icon;
}
&[data-has-sound=true]:before {
@include sound-icon;
}
}
img#image {
margin-top: 5px;
}
#image-container {
overflow: scroll;
}
div#options {
margin-top: 10px;
font-size: 24pt;
font-weight: bold;
}
div#tags {
margin-top: 30px;
li {
margin: 10px 0;
}
a.search-tag {
font-size: 24pt;
font-weight: bold;
}
}
div#page {
div.comments-for-post div.list-of-comments article.comment div.content {
clear: both;
margin: 0;
}
}
#nav {
display: none;
}
header#top menu.main {
background-color: lighten($link_color, 25%);
padding: 5px 10px;
}
h1 {
display: block;
font-size: 2em;
margin: 1em 0 0 0;
}
h2 {
font-size: 0.825em;
margin: 1em 0 0 0;
}
header {
border-bottom: 2px solid lighten($link_color, 13%);
text-align: center;
line-height: 2em;
h1 {
display: inline; //Needed for menu button
}
}
div#page {
margin: 0;
}
}
@media screen and (max-width: 440px) {
input#expand-search {
display: none;
}
body {
width: 100%;
}
#post-sections {
font-size: 1em;
}
div article.post-preview {
overflow: visible;
}
}
#tos-notice {
display: none;
}