Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CSS updates

Browse Source
This commit is contained in:
Zixaphir 2014-06-22 07:44:27 -07:00
parent 64c9c139c1
commit ee841e6f44
4 changed files with 50 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Gruntfile.coffee
View File

@ -143,7 +143,6 @@ module.exports = (grunt) ->
grunt.config 'pkg', pkg grunt.config 'pkg', pkg
[ [
pkg.sizing
pkg.filter pkg.filter
pkg.flex pkg.flex
pkg.order pkg.order
@ -151,17 +150,13 @@ module.exports = (grunt) ->
pkg.justify pkg.justify
pkg.transform pkg.transform
] = if type is 'crx' then [ ] = if type is 'crx' then [
'box-sizing'
'-webkit-filter' '-webkit-filter'
'-webkit-flex'
'-webkit-order' '-webkit-order'
'-webkit-align' '-webkit-align'
'-webkit-justify-content' '-webkit-justify-content'
'-webkit-transform' '-webkit-transform'
] else [ ] else [
'-moz-box-sizing'
'filter' 'filter'
'flex'
'order' 'order'
'align' 'align'
'justify-content' 'justify-content'

4
builds/appchan-x.user.js
View File

File diff suppressed because one or more lines are too long

4
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

92
src/General/css/layout.css
View File

@ -193,7 +193,7 @@ body > hr {
} }
.thread-stats { .thread-stats {
flex-shrink: 0; flex-shrink: 0;
cursor: help; cursor: help !important;
font-size: 10px; font-size: 10px;
font-weight: 700; font-weight: 700;
margin-top: 2px; margin-top: 2px;
@ -230,7 +230,7 @@ a {
body, body,
html { html {
min-height: 100%; min-height: 100%;
<%= sizing %>: border-box; box-sizing: border-box;
} }
body { body {
outline: none; outline: none;
@ -262,7 +262,7 @@ body.unscroll {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
<%= sizing %>: border-box; box-sizing: border-box;
display: block; display: block;
z-index: 0; z-index: 0;
} }
@ -502,7 +502,7 @@ nav a,
color: #fff; color: #fff;
} }
.message { .message {
<%= sizing %>: border-box; box-sizing: border-box;
padding: 6px 20px; padding: 6px 20px;
max-height: 200px; max-height: 200px;
width: 100%; width: 100%;
@ -511,11 +511,11 @@ nav a,
/* Shortcuts */ /* Shortcuts */
#shortcuts { #shortcuts {
position: fixed; position: fixed;
display: <%= flex %>; display: flex:;
top: 0; top: 0;
padding: 1px; padding: 1px;
z-index: 16; z-index: 16;
<%= flex %>-direction: row; flex:-direction: row;
max-height: 1.1em; max-height: 1.1em;
overflow: visible; overflow: visible;
} }
@ -528,7 +528,7 @@ nav a,
#a-icons, #a-icons,
#a-stats { #a-stats {
<%= order %>: 0; <%= order %>: 0;
display: <%= flex %>; display: flex:;
} }
#a-icons { #a-icons {
<%= order %>: 10; <%= order %>: 10;
@ -546,7 +546,7 @@ nav a,
<%= align %>-self: flex-end; <%= align %>-self: flex-end;
} }
.icon-orientation-vertical #a-icons { .icon-orientation-vertical #a-icons {
<%= flex %>-direction: column; flex:-direction: column;
height: 200px; height: 200px;
} }
.icon-orientation-horizontal #a-stats { .icon-orientation-horizontal #a-stats {
@ -555,11 +555,11 @@ nav a,
.icon-orientation-horizontal #a-stats, .icon-orientation-horizontal #a-stats,
.icon-orientation-horizontal #a-icons, .icon-orientation-horizontal #a-icons,
.sidebar-location-left #shortcuts { .sidebar-location-left #shortcuts {
<%= flex %>-direction: row-reverse; flex:-direction: row-reverse;
} }
.icon-orientation-horizontal.sidebar-location-left #a-stats, .icon-orientation-horizontal.sidebar-location-left #a-stats,
.icon-orientation-horizontal.sidebar-location-left #a-icons { .icon-orientation-horizontal.sidebar-location-left #a-icons {
<%= flex %>-direction: row; flex:-direction: row;
} }
#thread-stats { #thread-stats {
<%= order %>: 0; <%= order %>: 0;
@ -1013,7 +1013,7 @@ nav a,
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 0; right: 0;
<%= sizing %>: border-box; box-sizing: border-box;
height: 1.6em; height: 1.6em;
width: 1.4em; width: 1.4em;
text-align: center; text-align: center;
@ -1032,7 +1032,7 @@ nav a,
color: transparent; color: transparent;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
<%= sizing %>: border-box; box-sizing: border-box;
width: 248px; width: 248px;
} }
.sidebar-large #boardNavDesktopFoot { .sidebar-large #boardNavDesktopFoot {
@ -1098,7 +1098,7 @@ nav a,
overflow: hidden; overflow: hidden;
} }
.slideout-watcher #thread-watcher { .slideout-watcher #thread-watcher {
<%= sizing %>: border-box; box-sizing: border-box;
width: 248px; width: 248px;
} }
.slideout-watcher.sidebar-large #boardNavDesktopFoot { .slideout-watcher.sidebar-large #boardNavDesktopFoot {
@ -1168,7 +1168,7 @@ nav a,
margin: 0; margin: 0;
} }
.announcements-slideout #globalMessage { .announcements-slideout #globalMessage {
<%= sizing %>: border-box; box-sizing: border-box;
display: none; display: none;
} }
.announcements-slideout #so-psa:hover #globalMessage { .announcements-slideout #so-psa:hover #globalMessage {
@ -1258,14 +1258,14 @@ div.post div.postInfo {
outline: none; outline: none;
} }
.reply.post { .reply.post {
<%= sizing %>: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
} }
.replyContainer { .replyContainer {
display: <%= flex %>; display: flex:;
} }
.fit-width-replies .reply.post { .fit-width-replies .reply.post {
<%= flex %>: 1 0; flex:: 1 0;
} }
.fit-width-replies .expanded-image .reply.post, .fit-width-replies .expanded-image .reply.post,
.fit-width-replies .hasInline .reply.post { .fit-width-replies .hasInline .reply.post {
@ -1292,7 +1292,7 @@ a.useremail:last-of-type {
vertical-align: bottom; vertical-align: bottom;
} }
.op-background .op.post { .op-background .op.post {
<%= sizing %>: border-box; box-sizing: border-box;
} }
<% if (type === 'userscript') { %> <% if (type === 'userscript') { %>
/* Force Reply Break */ /* Force Reply Break */
@ -1434,7 +1434,7 @@ a.useremail:last-of-type {
} }
/* Code */ /* Code */
.prettyprint { .prettyprint {
<%= sizing %>: border-box; box-sizing: border-box;
font-family: monospace; font-family: monospace;
display: inline-block; display: inline-block;
margin: 0 auto .1em 0; margin: 0 auto .1em 0;
@ -1756,12 +1756,12 @@ input:checked + .rice {
border-style: solid; border-style: solid;
} }
.persona { .persona {
display: <%= flex %>; display: flex:;
<%= flex %>-direction: column; flex:-direction: column;
<%= align %>-items: stretch; <%= align %>-items: stretch;
} }
.compact-post-form-inputs .persona { .compact-post-form-inputs .persona {
<%= flex %>-direction: row; flex:-direction: row;
} }
#qr textarea.field { #qr textarea.field {
height: 11.6em; height: 11.6em;
@ -1771,11 +1771,11 @@ input:checked + .rice {
height: 6em; height: 6em;
} }
.compact-post-form-inputs .persona input.field { .compact-post-form-inputs .persona input.field {
<%= flex %>: 1 1; flex:: 1 1;
margin: 0 0 0 1px; margin: 0 0 0 1px;
} }
.compact-post-form-inputs .persona input:focus { .compact-post-form-inputs .persona input:focus {
<%= flex %>: 3 1; flex:: 3 1;
} }
.compact-post-form-inputs .persona input.field:first-child { .compact-post-form-inputs .persona input.field:first-child {
margin: 0; margin: 0;
@ -1823,13 +1823,13 @@ input:checked + .rice {
.selectrice, .selectrice,
button, button,
input:not([type=radio]) { input:not([type=radio]) {
<%= sizing %>: border-box; box-sizing: border-box;
height: 1.6em; height: 1.6em;
margin: 1px 0 0; margin: 1px 0 0;
vertical-align: bottom; vertical-align: bottom;
padding: 0 1px; padding: 0 1px;
outline: none; outline: none;
transition: color .25s, border-color .25s, <%= flex %> .25s; transition: color .25s, border-color .25s, flex: .25s;
} }
.selectrice { .selectrice {
padding-right: 1.6em; padding-right: 1.6em;
@ -1838,7 +1838,7 @@ input:not([type=radio]) {
min-width: 100%; min-width: 100%;
} }
#file-n-submit { #file-n-submit {
display: <%= flex %> display: flex:
} }
#qr [type='submit'] { #qr [type='submit'] {
width: 60px; width: 60px;
@ -1887,11 +1887,11 @@ input:not([type=radio]) {
margin-right: 3px; margin-right: 3px;
} }
#qr-filename-container { #qr-filename-container {
<%= sizing %>: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
position: relative; position: relative;
margin-right: 1px; margin-right: 1px;
<%= flex %>: 1 1; flex:: 1 1;
overflow: hidden; overflow: hidden;
padding: 2px 1px 0; padding: 2px 1px 0;
} }
@ -1936,7 +1936,7 @@ input:not([type=radio]) {
overflow-x: auto; overflow-x: auto;
} }
.qr-preview { .qr-preview {
<%= sizing %>: border-box; box-sizing: border-box;
counter-increment: thumbnails; counter-increment: thumbnails;
cursor: move; cursor: move;
display: inline-block; display: inline-block;
@ -2322,7 +2322,7 @@ article li {
.export-button, .export-button,
.mascotname, .mascotname,
#mascot-options { #mascot-options {
<%= sizing %>: border-box; box-sizing: border-box;
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
@ -2430,7 +2430,7 @@ article li {
} }
#mascotConf .option, #mascotConf .option,
#mascotConf .optionlabel { #mascotConf .optionlabel {
<%= sizing %>: border-box; box-sizing: border-box;
width: 50%; width: 50%;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -2451,21 +2451,21 @@ article li {
left: 0; left: 0;
right: 0; right: 0;
z-index: 26; z-index: 26;
display: <%= flex %>; display: flex:;
<%= flex %>-direction: row; flex:-direction: row;
background: rgba(0,0,0,0.7); background: rgba(0,0,0,0.7);
} }
.gal-viewport { .gal-viewport {
display: <%= flex %>; display: flex:;
<%= align %>-items: stretch; <%= align %>-items: stretch;
<%= flex %>-direction: row; flex:-direction: row;
<%= flex %>: 1 1 auto; flex:: 1 1 auto;
} }
.gal-thumbnails { .gal-thumbnails {
<%= flex %>: 0 0 150px; flex:: 0 0 150px;
overflow-y: auto; overflow-y: auto;
display: <%= flex %>; display: flex:;
<%= flex %>-direction: column; flex:-direction: column;
<%= align %>-items: stretch; <%= align %>-items: stretch;
text-align: center; text-align: center;
background: rgba(0,0,0,.5); background: rgba(0,0,0,.5);
@ -2481,7 +2481,7 @@ article li {
width: auto; width: auto;
} }
.gal-thumb { .gal-thumb {
<%= flex %>: 0 0 auto; flex:: 0 0 auto;
padding: 3px; padding: 3px;
line-height: 0; line-height: 0;
transition: background .2s linear; transition: background .2s linear;
@ -2499,7 +2499,7 @@ article li {
} }
.gal-prev, .gal-prev,
.gal-next { .gal-next {
<%= flex %>: 0 0 20px; flex:: 0 0 20px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
opacity: 0.7; opacity: 0.7;
@ -2529,8 +2529,8 @@ article li {
} }
.gal-image { .gal-image {
order: 1; order: 1;
<%= flex %>: 1 0 auto; flex:: 1 0 auto;
display: <%= flex %>; display: flex:;
<%= align %>-items: flex-start; <%= align %>-items: flex-start;
<%= justify %>: space-around; <%= justify %>: space-around;
overflow: auto; overflow: auto;
@ -2676,7 +2676,7 @@ article li {
text-align: center; text-align: center;
} }
#doc { #doc {
<%= sizing %>: border-box; box-sizing: border-box;
margin: 10px auto; margin: 10px auto;
width: 1006px; width: 1006px;
padding: 2px; padding: 2px;
@ -2703,7 +2703,7 @@ article li {
right: 0 !important; right: 0 !important;
} }
#boards .column { #boards .column {
<%= sizing %>: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
width: 180px; width: 180px;
text-align: left; text-align: left;