jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css: clean up responsive css.

Browse Source 
* Reduce size of buttons, form inputs, site menu items, paginator, and
  sidebar text.
* Remove various dead rules (nonexistent selectors, rules overriden by
  other rules, rules that were otherwise redundant or did nothing).
* Increase page margin size.
* Fix notes being mispositioned (caused by `#image { margin-top: 5px }` rule).
This commit is contained in:
evazion
2019-09-30 00:58:34 -05:00
parent 5818c367fd
commit 5b2675b831
5 changed files with 45 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/src/styles/base/040_colors.css
View File

@@ -17,7 +17,6 @@
--responsive-menu-background-color: var(--link-hover-color);
--responsive-sidebar-submit-button-background-color: #EEE;
--responsive-sidebar-submit-button-border: 1px solid rgb(197, 197, 197);
--responsive-form-input-border: 1px solid #c5c5c5;
--form-input-text-color: var(--text-color);
--form-input-background: var(--body-background-color);

2
app/javascript/src/styles/common/main_layout.scss
View File

@@ -52,7 +52,7 @@ div.clearfix {
@media (max-width: 660px) {
flex-direction: column;
#content { order: 1; }
#content { order: 1; padding: 0; }
#sidebar { order: 2; }
}
}

2
app/javascript/src/styles/specific/comments.scss
View File

@@ -100,8 +100,6 @@ form.edit_comment div.input.boolean {
@media screen and (max-width: 660px) {
div#c-comments div#a-index, div#c-comments div#a-show {
margin: 0 0.5em;
div.post {
display: block;
margin: 2em 0;

6
app/javascript/src/styles/specific/forum.scss
View File

@@ -58,9 +58,3 @@ div#c-forum-topics {
color: var(--muted-text-color);
}
}
@media screen and (max-width: 660px) {
#c-forum-topics #a-show {
padding: 0 0.5em;
}
}

233
app/javascript/src/styles/specific/z_responsive.scss
View File

@@ -1,117 +1,65 @@
@import "../base/000_vars.scss";
@media screen and (max-width: 660px) {
#saved-searches-nav {
display: none;
}
div#page {
margin: 0 0.5rem;
padding: 0;
.fav-buttons button {
font-size: 1.5em;
}
div#page aside#sidebar {
padding: 5px;
button[type=submit] {
font-size: 1.2em;
background-color: var(--responsive-sidebar-submit-button-background-color);
height: 42px;
padding: 2px 10px;
border: var(--responsive-sidebar-submit-button-border);
aside#sidebar {
font-size: $h3_size;
}
}
div#page {
padding: 0 0.25vw;
> div /* div#c-$controller */ {
> div /* div#a-$action */ {
header#top {
position: relative;
text-align: center;
/* Move #sidebar below #content. */
> aside#sidebar {
font-size: 1.5em;
h1#app-name-header {
display: inline;
}
#maintoggle {
display: block;
font-weight: bold;
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 2em;
}
nav#nav {
font-size: $h3_size;
line-height: 2em;
display: none;
menu#main-menu, menu#subnav-menu {
padding: 0.5rem;
}
menu#main-menu {
background-color: var(--responsive-menu-background-color);
}
form.quick-search-form {
display: block;
padding: 0.5em 0;
input {
width: 100%;
padding: 0;
}
}
}
}
header {
position: relative;
}
#maintoggle {
display: block;
font-weight: bold;
position: absolute;
top: 2vw;
right: 3vw;
font-size: 2em;
}
/* 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: var(--responsive-form-input-border);
}
textarea {
vertical-align: top;
border: var(--responsive-form-input-border);
}
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;
font-size: $h2_size;
padding: 1em 0 0;
li {
display: inline-block;
margin: 0 0.25em;
a, span {
margin: 0;
margin: 0 0.25rem;
padding: 0;
border: none;
}
&.current-page {
text-align: center;
}
&.arrow:last-child {
text-align: right;
}
&.numbered-page, &.more {
@@ -143,14 +91,6 @@
width: 33.3vw;
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;
}
}
.user-disable-cropped-false {
@@ -169,89 +109,4 @@
}
}
}
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 {
margin: 0;
}
}
#nav {
font-size: 2em;
line-height: 2em;
display: none;
}
header#top menu.main {
background-color: var(--responsive-menu-background-color);
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 {
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;
}
}