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

This is going to take awhile.

Browse Source
This commit is contained in:
Zixaphir 2013-05-30 14:42:21 -07:00
parent f2766c55a4
commit ab630bd21d
14 changed files with 384 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Gruntfile.coffee
View File

@ -154,6 +154,14 @@ module.exports = (grunt) ->
grunt.registerTask 'set-build', 'Set the build type variable', (type) -> grunt.registerTask 'set-build', 'Set the build type variable', (type) ->
pkg.type = type; pkg.type = type;
pkg.agent = if type is 'crx'
'-webkit-'
else
'-moz-'
pkg.sizing = if type is 'crx'
'box-sizing'
else
'-moz-box-sizing'
grunt.log.ok 'pkg.type = %s', type grunt.log.ok 'pkg.type = %s', type
grunt.registerTask 'build', [ grunt.registerTask 'build', [

86
builds/appchan-x.js
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

86
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

4
src/General/Settings.coffee
View File

@ -800,7 +800,7 @@ Settings =
style: style:
checked: -> checked: ->
$.cb.checked.call @ $.cb.checked.call @
hyphenated = @name.toLowerCase().replace /\s+/g, '-' hyphenated = @name.toLowerCase().replace(/^4/, 'four').replace /\s+/g, '-'
(if @checked then $.addClass else $.rmClass) doc, hyphenated (if @checked then $.addClass else $.rmClass) doc, hyphenated
value: -> value: ->
$.cb.value.call @ $.cb.value.call @
@ -808,7 +808,7 @@ Settings =
select: -> select: ->
$.cb.value.call @ $.cb.value.call @
for option in @options for option in @options
hyphenated = "#{@name} {option.value}".toLowerCase().replace /\s+/g, '-' hyphenated = "#{@name} #{option.value}".toLowerCase().replace(/^4/, 'four').replace /\s+/g, '-'
(if option.value is @value then $.addClass else $.rmClass) doc, hyphenated (if option.value is @value then $.addClass else $.rmClass) doc, hyphenated
mascot: mascot:

43
src/General/css/dynamic.css Normal file
View File

@ -0,0 +1,43 @@
body {
font-size: #{parseInt _conf["Font Size"], 10}px;
font-family: #{_conf["Font"]};
padding: 0 #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px 0 #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"]}px;
}
button,
input,
textarea {
font-size: #{parseInt _conf["Font Size"], 10}px;
font-family: #{_conf["Font"]};
}
.sidebar-location-left.sidebar-large #header-bar {
left: #{303 + parseInt(_conf["Left Thread Padding"], 10) + editSpace["right"]}px;
right: #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["left"] + 2}px;"
}
.sidebar-location-left.sidebar-normal #header-bar {
left: #{248 + parseInt(_conf["Left Thread Padding"], 10) + editSpace["right"]}px;
right: #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["left"] + 2}px;"
}
.sidebar-location-left.sidebar-minimal #header-bar {
left: #{20 + parseInt(_conf["Left Thread Padding"], 10) + editSpace["right"]}px;
right: #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["left"] + 2}px;"
}
.sidebar-location-left.sidebar-hide #header-bar {
left: #{2 + parseInt(_conf["Left Thread Padding"], 10) + editSpace["right"]}px;
right: #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["left"] + 2}px;"
}
.sidebar-location-right.sidebar-large #header-bar {
right: #{303 + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px;
left: #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2}px;"
}
.sidebar-location-right.sidebar-normal #header-bar {
right: #{248 + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px;
left: #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2}px;"
}
.sidebar-location-right.sidebar-minimal #header-bar {
right: #{20 + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px;
left: #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2}px;"
}
.sidebar-location-right.sidebar-hide #header-bar {
right: #{2 + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px;
left: #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2}px;"
}

2
src/General/css/icons.vert.css
View File

@ -69,7 +69,7 @@ div.navLinks > a:first-of-type::after {
#boardNavDesktopFoot, #boardNavDesktopFoot,
#globalMessage, #globalMessage,
#watcher { #watcher {
#{Style.sizing}: border-box; <%= sizing %>: border-box;
width: #{Style.sidebar - 18}px !important; width: #{Style.sidebar - 18}px !important;
min-width: 230px; min-width: 230px;
#{align}: 18px !important; #{align}: 18px !important;

4
src/General/css/jscolor.css
View File

@ -22,7 +22,7 @@
.jscPad { .jscPad {
width: 181px; width: 181px;
height: 101px; height: 101px;
background-image: #{agent}linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)), #{agent}linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); background-image: <%= agent %>linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)), <%= agent %>linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 0; background-position: 0 0;
} }
@ -44,7 +44,7 @@
.jscSld { .jscSld {
width: 16px; width: 16px;
height: 101px; height: 101px;
background-image: #{agent}linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)); background-image: <%= agent %>linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
} }
.jscSldB { .jscSldB {
right: 10px; right: 10px;

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

@ -76,56 +76,71 @@ a[style="cursor: pointer; float: right;"] {
} }
/* Defaults */ /* Defaults */
a { a {
text-decoration: #{if _conf["Underline Links"] then "underline" else "none"}; text-decoration: none;
outline: none; outline: none;
} }
.underline-links a {
text-decoration: underline;
}
body, body,
html { html {
min-height: 100%; min-height: 100%;
#{Style.sizing}: border-box; <%= sizing %>: border-box;
} }
body { body {
outline: none; outline: none;
font-size: #{parseInt _conf["Font Size"], 10}px;
font-family: #{_conf["Font"]};
min-height: 100%; min-height: 100%;
margin-top: 0; }
margin-bottom: 0; .sidebar-hide body {
margin-#{Style.sidebarLocation[0]}: #{if /^boards\.4chan\.org$/.test(location.hostname) then Style.sidebar else '2'}px; margin: 0 2px;
margin-#{Style.sidebarLocation[1]}: 2px; }
padding: 0 #{parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px 0 #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"]}px; .sidebar-minimal body {
margin: 0 20px;
}
.sidebar-normal body {
margin: 0 252px
}
.sidebar-large body {
margin: 0 303px;
}
.sidebar-location-right body {
margin-left: 2px;
}
.sidebar-location-left body {
margin-right: 2px;
} }
body.unscroll { body.unscroll {
overflow: hidden; overflow: hidden;
} }
#{if _conf["4chan SS Sidebar"] and /^boards\.4chan\.org$/.test location.hostname then " .fourchan-ss-sidebar body::before {
body::before {
content: ''; content: '';
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
#{Style.sidebarLocation[0]}: 0;
width: #{if _conf['Sidebar'] is 'large' then 305 else if _conf['Sidebar'] is 'normal' then 254 else if _conf['Sidebar'] is 'minimal' then 27 else 0}px;
z-index: 1; z-index: 1;
#{Style.sizing}: border-box; <%= sizing %>: border-box;
display: block; display: block;
} }
body { .sidebar-right body::before {
padding-#{Style.sidebarLocation[0]}: 2px; right: 0;
} }
" else ""} sidebar-left body::before {
button, left: 0;
input, }
textarea { .fourchan-ss-sidebar.sidebar-right body {
font-size: #{parseInt _conf["Font Size"], 10}px; padding-right: 2px;
font-family: #{_conf["Font"]}; }
.fourchan-ss-sidebar.sidebar-left body {
padding-left: 2px;
} }
hr { hr {
clear: both; clear: both;
border: 0; border: 0;
padding: 0; padding: 0;
margin: 0 0 1px; margin: 0 0 1px;
#{if _conf['Hide Horizontal Rules'] then 'visibility: hidden;' else ''} }
.hide-horizontal-rules hr {
visibility: hidden;
} }
th { th {
text-align: left; text-align: left;
@ -168,23 +183,24 @@ th {
#header-bar { #header-bar {
z-index: 6; z-index: 6;
border-width: 1px; border-width: 1px;
#{ }
if _conf['4chan SS Navigation'] then " .navigation-alignment-center #header-bar {
text-align: center;
}
.navigation-alignment-right #header-bar {
text-align: right;
}
.fourchan-ss-navigation #header-bar {
left: 0; left: 0;
right: 0; right: 0;
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-radius: 0 !important;" border-radius: 0 !important;
else "
#{Style.sidebarLocation[0]}: #{Style.sidebar + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]}px;
#{Style.sidebarLocation[1]}: #{parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2}px;"
} }
#{if _conf["Hide Navigation Decorations"] then " .hide-navigation-decorations #header-bar {
font-size: 0; font-size: 0;
color: transparent; color: transparent;
word-spacing: 2px; word-spacing: 2px;
" else ""}
text-align: #{_conf["Navigation Alignment"]};
} }
#shortcuts { #shortcuts {
float: right; float: right;
@ -198,12 +214,16 @@ else "
.top #header-bar { .top #header-bar {
top: 0; top: 0;
border-top-width: 0; border-top-width: 0;
#{if _conf["Rounded Edges"] then "border-radius: 0 0 3px 3px;" else ""}" }
.rounded-edges.top #header-bar {
border-radius: 0 0 3px 3px;
} }
.fixed.bottom #header-bar { .fixed.bottom #header-bar {
bottom: 0; bottom: 0;
border-bottom-width: 0; border-bottom-width: 0;
#{if _conf["Rounded Edges"] then "border-radius: 3px 3px 0 0;" else ""}" }
.rounded-edges.bottom #header-bar {
border-radius: 3px 3px 0 0;
} }
.hide #header-bar { .hide #header-bar {
position: fixed; position: fixed;
@ -217,10 +237,10 @@ else "
} }
.fixed.top #header-bar.autohide:not(:hover) { .fixed.top #header-bar.autohide:not(:hover) {
margin-bottom: -1em; margin-bottom: -1em;
#{agent}transform: translateY(-100%); <%= agent %>transform: translateY(-100%);
} }
.fixed.bottom #header-bar.autohide:not(:hover) { .fixed.bottom #header-bar.autohide:not(:hover) {
#{agent}transform: translateY(100%); <%= agent %>transform: translateY(100%);
} }
#scroll-marker { #scroll-marker {
left: 0; left: 0;
@ -290,7 +310,7 @@ else "
color: #fff; color: #fff;
} }
.message { .message {
#{Style.sizing}: border-box; <%= sizing %>: border-box;
padding: 6px 20px; padding: 6px 20px;
max-height: 200px; max-height: 200px;
width: 100%; width: 100%;
@ -303,7 +323,7 @@ else "
border-radius: 10px; border-radius: 10px;
height: 14px; height: 14px;
width: 14px; width: 14px;
#{Style.sizing}: border-box; <%= sizing %>: border-box;
border-color: rgb(130,130,130); border-color: rgb(130,130,130);
color: rgb(130,130,130); color: rgb(130,130,130);
} }
@ -313,13 +333,13 @@ else "
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
#{agent}transform: translate(-60%, -50%); <%= agent %>transform: translate(-60%, -50%);
display: block; display: block;
border-top: 5px solid rgb(130, 130, 130); border-top: 5px solid rgb(130, 130, 130);
border-left: 3px solid transparent; border-left: 3px solid transparent;
border-right: 3px solid transparent; border-right: 3px solid transparent;
width: 7px; width: 7px;
#{Style.sizing}: border-box; <%= sizing %>: border-box;
} }
/* Updater / Thread Stats */ /* Updater / Thread Stats */
.float #thread-stats, .float #thread-stats,
@ -378,11 +398,11 @@ else "
#{Style.sidebarLocation[0]}: #{Style.sidebar - 2}px; #{Style.sidebarLocation[0]}: #{Style.sidebar - 2}px;
position: fixed; position: fixed;
#{if Style.sidebarLocation[0] is 'right' then " #{if Style.sidebarLocation[0] is 'right' then "
#{agent}transform: rotate(90deg); <%= agent %>transform: rotate(90deg);
#{agent}transform-origin: bottom right;" <%= agent %>transform-origin: bottom right;"
else " else "
#{agent}transform: rotate(-90deg); <%= agent %>transform: rotate(-90deg);
#{agent}transform-origin: bottom left; <%= agent %>transform-origin: bottom left;
"} "}
z-index: 6; z-index: 6;
margin: 0; margin: 0;
@ -423,11 +443,11 @@ else "
#{if _conf["Faded 4chan Banner"] then " #{if _conf["Faded 4chan Banner"] then "
.boardBanner { .boardBanner {
opacity: 0.5; opacity: 0.5;
#{agent}transition: opacity 0.3s ease-in-out .5s; <%= agent %>transition: opacity 0.3s ease-in-out .5s;
} }
.boardBanner:hover { .boardBanner:hover {
opacity: 1; opacity: 1;
#{agent}transition: opacity 0.3s ease-in; <%= agent %>transition: opacity 0.3s ease-in;
} }
" else ""} " else ""}
#{if _conf["4chan Banner Reflection"] then " #{if _conf["4chan Banner Reflection"] then "
@ -609,7 +629,7 @@ else "
bottom: 0; bottom: 0;
right: 0; right: 0;
font-size: #{_conf['Font Size']}px; font-size: #{_conf['Font Size']}px;
#{Style.sizing}: border-box; <%= sizing %>: border-box;
height: 1.6em; height: 1.6em;
width: 1.4em; width: 1.4em;
text-align: center; text-align: center;
@ -629,7 +649,7 @@ else "
font-size: 0; font-size: 0;
color: transparent; color: transparent;
overflow: hidden; overflow: hidden;
#{Style.sizing}: border-box; <%= sizing %>: border-box;
} }
#boardNavDesktopFoot a, #boardNavDesktopFoot a,
#boardNavDesktopFoot a::after, #boardNavDesktopFoot a::after,
@ -693,7 +713,7 @@ hide: "
width: #{width}px; width: #{width}px;
#{Style.sidebarLocation[0]}: 2px !important; #{Style.sidebarLocation[0]}: 2px !important;
#{Style.sidebarLocation[1]}: auto !important; #{Style.sidebarLocation[1]}: auto !important;
#{Style.sizing}: border-box; <%= sizing %>: border-box;
} }
#watcher .move { #watcher .move {
cursor: default; cursor: default;
@ -750,7 +770,7 @@ hide: "
margin: 0; margin: 0;
} }
#globalMessage:hover { #globalMessage:hover {
#{Style.sizing}: border-box; <%= sizing %>: border-box;
overflow-y: auto; overflow-y: auto;
} }
#globalMessage:not(:hover) { #globalMessage:not(:hover) {
@ -812,7 +832,7 @@ hide: "
.hide-reply-button { .hide-reply-button {
margin: 0 3px; margin: 0 3px;
opacity: 0; opacity: 0;
#{agent}transition: opacity .3s ease-out 0s; <%= agent %>transition: opacity .3s ease-out 0s;
} }
.post:hover .hide-reply-button, .post:hover .hide-reply-button,
.post:hover .menu-button, .post:hover .menu-button,
@ -854,7 +874,7 @@ hide: "
outline: none; outline: none;
} }
.reply.post { .reply.post {
#{Style.sizing}: border-box; <%= sizing %>: border-box;
} }
#{if _conf["Fit Width Replies"] then " #{if _conf["Fit Width Replies"] then "
.reply.post { .reply.post {
@ -909,7 +929,7 @@ s {
} }
#{if _conf["OP Background"] then " #{if _conf["OP Background"] then "
.op.post { .op.post {
#{Style.sizing}: border-box; <%= sizing %>: border-box;
}" else ""} }" else ""}
/* Summary */ /* Summary */
#{ #{
@ -1038,7 +1058,7 @@ if _conf["Filtered Backlinks"] then "
'default': ""}[_conf["Backlinks Position"]]} 'default': ""}[_conf["Backlinks Position"]]}
/* Code */ /* Code */
.prettyprint { .prettyprint {
#{Style.sizing}: border-box; <%= sizing %>: border-box;
font-family: monospace; font-family: monospace;
display: inline-block; display: inline-block;
margin-right: auto; margin-right: auto;
@ -1179,12 +1199,12 @@ input:checked + .rice {
bottom: #{Style.pfOffset}em !important; bottom: #{Style.pfOffset}em !important;
#{Style.sidebarLocation[0]}: 0 !important; #{Style.sidebarLocation[0]}: 0 !important;
#{Style.sidebarLocation[1]}: auto !important; #{Style.sidebarLocation[1]}: auto !important;
#{agent}transform: translateX(#{xOffset}93%); <%= agent %>transform: translateX(#{xOffset}93%);
} }
#qr:hover, #qr:hover,
#qr.has-focus, #qr.has-focus,
#qr.dump { #qr.dump {
#{agent}transform: translate(0); <%= agent %>transform: translate(0);
}" }"
"tabbed slideout": " "tabbed slideout": "
@ -1193,16 +1213,16 @@ input:checked + .rice {
bottom: #{Style.pfOffset}em !important; bottom: #{Style.pfOffset}em !important;
#{Style.sidebarLocation[0]}: 0 !important; #{Style.sidebarLocation[0]}: 0 !important;
#{Style.sidebarLocation[1]}: auto !important; #{Style.sidebarLocation[1]}: auto !important;
#{agent}transform: translateX(#{xOffset}100%); <%= agent %>transform: translateX(#{xOffset}100%);
} }
#qr:hover, #qr:hover,
#qr.has-focus, #qr.has-focus,
#qr.dump { #qr.dump {
#{agent}transform: translateX(0); <%= agent %>transform: translateX(0);
} }
#qrtab { #qrtab {
#{agent}transform: rotate(#{(if Style.sidebarLocation[0] is "left" then "" else "-")}90deg); <%= agent %>transform: rotate(#{(if Style.sidebarLocation[0] is "left" then "" else "-")}90deg);
#{agent}transform-origin: bottom #{Style.sidebarLocation[0]}; <%= agent %>transform-origin: bottom #{Style.sidebarLocation[0]};
position: absolute; position: absolute;
top: 0; top: 0;
#{Style.sidebarLocation[0]}: 100%; #{Style.sidebarLocation[0]}: 100%;
@ -1232,13 +1252,13 @@ input:checked + .rice {
#{Style.sidebarLocation[0]}: 2px !important; #{Style.sidebarLocation[0]}: 2px !important;
#{Style.sidebarLocation[1]}: auto !important; #{Style.sidebarLocation[1]}: auto !important;
opacity: 0.2; opacity: 0.2;
#{agent}transition: opacity .3s ease-in-out 1s; <%= agent %>transition: opacity .3s ease-in-out 1s;
} }
#qr:hover, #qr:hover,
#qr.has-focus, #qr.has-focus,
#qr.dump { #qr.dump {
opacity: 1; opacity: 1;
#{agent}transition: opacity .3s linear; <%= agent %>transition: opacity .3s linear;
}" }"
}[_conf['Post Form Style']] or ""} }[_conf['Post Form Style']] or ""}
@ -1256,18 +1276,18 @@ else ""}
#{ #{
if _conf['Post Form Style'] isnt 'float' and _conf["Post Form Slideout Transitions"] then " if _conf['Post Form Style'] isnt 'float' and _conf["Post Form Slideout Transitions"] then "
#qr { #qr {
#{agent}transition: #{agent}transform .3s ease-in-out 1s; <%= agent %>transition: <%= agent %>transform .3s ease-in-out 1s;
} }
#qr:hover, #qr:hover,
#qr.has-focus, #qr.has-focus,
#qr.dump { #qr.dump {
#{agent}transition: #{agent}transform .3s linear; <%= agent %>transition: <%= agent %>transform .3s linear;
} }
#qrtab { #qrtab {
#{agent}transition: opacity .3s ease-in-out 1s; <%= agent %>transition: opacity .3s ease-in-out 1s;
} }
#qr:hover #qrtab { #qr:hover #qrtab {
#{agent}transition: opacity .3s linear; <%= agent %>transition: opacity .3s linear;
}" else "" }" else ""
} }
@ -1345,7 +1365,7 @@ if _conf["Tripcode Hider"] then "
.selectrice, .selectrice,
button, button,
input:not([type=radio]) { input:not([type=radio]) {
#{Style.sizing}: border-box; <%= sizing %>: border-box;
font-size: #{parseInt _conf['Font Size'], 10}px; font-size: #{parseInt _conf['Font Size'], 10}px;
height: 1.6em; height: 1.6em;
margin: 1px 0 0; margin: 1px 0 0;
@ -1391,7 +1411,7 @@ input:not([type=radio]) {
margin-right: 3px; margin-right: 3px;
} }
#qr-filename-container { #qr-filename-container {
#{Style.sizing}: border-box; <%= sizing %>: border-box;
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 100px; width: 100px;
@ -1442,7 +1462,7 @@ input:not([type=radio]) {
overflow-x: auto; overflow-x: auto;
} }
.qr-preview { .qr-preview {
#{Style.sizing}: border-box; <%= sizing %>: border-box;
counter-increment: thumbnails; counter-increment: thumbnails;
cursor: move; cursor: move;
display: inline-block; display: inline-block;
@ -1453,7 +1473,7 @@ input:not([type=radio]) {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
text-shadow: 0 1px 1px #000; text-shadow: 0 1px 1px #000;
#{agent}transition: opacity .25s ease-in-out; <%= agent %>transition: opacity .25s ease-in-out;
vertical-align: top; vertical-align: top;
} }
.qr-preview:hover, .qr-preview:hover,
@ -1508,14 +1528,14 @@ a:only-of-type > .remove {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 10px; right: 10px;
#{agent}transform: translateY(-50%); <%= agent %>transform: translateY(-50%);
} }
/* Ads */ /* Ads */
.topad img, .topad img,
.middlead img, .middlead img,
.bottomad img { .bottomad img {
opacity: 0.3; opacity: 0.3;
#{agent}transition: opacity .3s linear; <%= agent %>transition: opacity .3s linear;
} }
.topad img:hover, .topad img:hover,
.middlead img:hover, .middlead img:hover,
@ -1771,13 +1791,13 @@ article li {
.export-button, .export-button,
.mascotname, .mascotname,
#mascot-options { #mascot-options {
#{Style.sizing}: border-box; <%= sizing %>: border-box;
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
#mascot-options { #mascot-options {
opacity: 0; opacity: 0;
#{agent}transition: opacity .3s linear; <%= agent %>transition: opacity .3s linear;
} }
.mascot:hover #mascot-options { .mascot:hover #mascot-options {
opacity: 1; opacity: 1;
@ -1818,7 +1838,7 @@ article li {
right: 300px; right: 300px;
bottom: 10px; bottom: 10px;
margin: 0; margin: 0;
#{agent}transition: all .2s ease-in-out; <%= agent %>transition: all .2s ease-in-out;
opacity: 0; opacity: 0;
} }
#themes .selectedtheme h1 { #themes .selectedtheme h1 {
@ -1873,7 +1893,7 @@ article li {
} }
#mascotConf .option, #mascotConf .option,
#mascotConf .optionlabel { #mascotConf .optionlabel {
#{Style.sizing}: border-box; <%= sizing %>: border-box;
width: 50%; width: 50%;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -1945,7 +1965,7 @@ article li {
position: fixed; position: fixed;
top: 50% !important; top: 50% !important;
left: 50%; left: 50%;
#{agent}transform: translate(-50%, -50%); <%= agent %>transform: translate(-50%, -50%);
} }
.icon::after { .icon::after {
display: inline-block; display: inline-block;
@ -1982,7 +2002,7 @@ article li {
left: 0 !important; left: 0 !important;
} }
#boards .column { #boards .column {
#{Style.sizing}: border-box; <%= sizing %>: border-box;
display: inline-block; display: inline-block;
width: 16em; width: 16em;
text-align: left; text-align: left;

10
src/General/css/theme.css
View File

@ -297,7 +297,7 @@ input[type=checkbox]:checked + .rice::after {
height: 10px; height: 10px;
border: solid #{theme["Inputs"]}; border: solid #{theme["Inputs"]};
border-width: 0 3px 3px 0; border-width: 0 3px 3px 0;
#{agent}transform: rotate(45deg); <%= agent %>transform: rotate(45deg);
position: absolute; position: absolute;
left: 2px; left: 2px;
bottom: -1px; bottom: -1px;
@ -357,12 +357,12 @@ a .name {
box-shadow: #{if _conf['Quote Shadows'] then "5px 5px 5px #{theme['Shadow Color']}" else ""}; box-shadow: #{if _conf['Quote Shadows'] then "5px 5px 5px #{theme['Shadow Color']}" else ""};
} }
.placeholder, .placeholder,
#qr input::#{agent}placeholder, #qr input::<%= agent %>placeholder,
#qr textarea::#{agent}placeholder { #qr textarea::<%= agent %>placeholder {
color: #{if Style.lightTheme then "rgba(0,0,0,0.3)" else "rgba(255,255,255,0.2)"} !important; color: #{if Style.lightTheme then "rgba(0,0,0,0.3)" else "rgba(255,255,255,0.2)"} !important;
} }
#qr input:#{agent}placeholder, #qr input:<%= agent %>placeholder,
#qr textarea:#{agent}placeholder, #qr textarea:<%= agent %>placeholder,
.placeholder { .placeholder {
color: #{if Style.lightTheme then "rgba(0,0,0,0.3)" else "rgba(255,255,255,0.2)"} !important; color: #{if Style.lightTheme then "rgba(0,0,0,0.3)" else "rgba(255,255,255,0.2)"} !important;
} }

2
src/General/css/themeoptions.css
View File

@ -60,7 +60,7 @@
if _conf["Alternate Post Colors"] if _conf["Alternate Post Colors"]
css += """ css += """
.replyContainer:not(.hidden):nth-of-type(2n+1) .post { .replyContainer:not(.hidden):nth-of-type(2n+1) .post {
background-image: #{agent}linear-gradient(#{if Style.lightTheme then "rgba(0,0,0,0.05), rgba(0,0,0,0.05)" else "rgba(255,255,255,0.02), rgba(255,255,255,0.02)"}); background-image: <%= agent %>linear-gradient(#{if Style.lightTheme then "rgba(0,0,0,0.05), rgba(0,0,0,0.05)" else "rgba(255,255,255,0.02), rgba(255,255,255,0.02)"});
}\n }\n
""" """

1
src/Theming/JSColor.coffee
View File

@ -1,6 +1,5 @@
JSColor = JSColor =
css: -> css: ->
agent = Style.agent
"""<%= grunt.file.read('src/General/css/jscolor.css') %>""" """<%= grunt.file.read('src/General/css/jscolor.css') %>"""
bind: (el) -> bind: (el) ->

4
src/Theming/Mascots.coffee
View File

@ -62,7 +62,7 @@ MascotTools =
else else
'-1' '-1'
}; };
#{if Style.sidebarLocation[0] is "left" then "#{Style.agent}transform: scaleX(-1);" else ""} #{if Style.sidebarLocation[0] is "left" then "<%= sizing %>transform: scaleX(-1);" else ""}
bottom: #{ bottom: #{
if mascot.position is 'top' if mascot.position is 'top'
'auto' 'auto'
@ -108,7 +108,7 @@ MascotTools =
opacity: #{Conf['Mascot Opacity']}; opacity: #{Conf['Mascot Opacity']};
pointer-events: none; pointer-events: none;
#{if filters.length > 0 then "filter: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"filters\">" + filters.join("") + "</filter></svg>#filters');" else ""} #{if filters.length > 0 then "filter: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"filters\">" + filters.join("") + "</filter></svg>#filters');" else ""}
#{if Conf['Mascot Position'] is 'middle' then "#{Style.agent}transform: translateY(50%);" else ''} #{if Conf['Mascot Position'] is 'middle' then "<%= sizing %>transform: translateY(50%);" else ''}
} }
""" """

73
src/Theming/Style.coffee
View File

@ -19,11 +19,11 @@ Style =
for name, setting of cat for name, setting of cat
if setting[2] if setting[2]
continue if setting[2] is 'text' continue if setting[2] is 'text'
hyphenated = "#{name} #{Conf[name]}".toLowerCase().replace /\s+/g, '-' hyphenated = "#{name} #{Conf[name]}".toLowerCase().replace(/^4/, 'four').replace /\s+/g, '-'
$.addClass doc, hyphenated $.addClass doc, hyphenated
else else
continue unless Conf[name] continue unless Conf[name]
hyphenated = "#{name}".toLowerCase().replace /\s+/g, '-' hyphenated = "#{name}".toLowerCase().replace(/^4/, 'four').replace /\s+/g, '-'
$.addClass doc, hyphenated $.addClass doc, hyphenated
MascotTools.init() MascotTools.init()
@ -67,18 +67,15 @@ Style =
setTimeout Rice.nodes, 100 setTimeout Rice.nodes, 100
, 500 , 500
agent: "<% if (type === 'crx') { %>-webkit-<% } else if (type === 'userscript') { %>-moz-<% } else { %>-o-<% } %>"
sizing: "<% if (type === 'userscript') { %>-moz-<% } else { %><% } %>box-sizing"
setup: -> setup: ->
theme = Themes[Conf['theme']] theme = Themes[Conf['theme']]
$.extend Style, $.extend Style,
layoutCSS: $.addStyle Style.layout(), 'layout' layoutCSS: $.addStyle Style.layout(), 'layout'
themeCSS: $.addStyle Style.theme(theme), 'theme' themeCSS: $.addStyle Style.theme(theme), 'theme'
icons: $.addStyle "", 'icons' icons: $.addStyle "", 'icons'
paddingSheet: $.addStyle "", 'padding' paddingSheet: $.addStyle "", 'padding'
mascot: $.addStyle "", 'mascotSheet' mascot: $.addStyle "", 'mascotSheet'
dynamic: $.addStyle Style.dynamic(), 'dynamic'
# Non-customizable # Non-customizable
$.addStyle JSColor.css(), 'jsColor' $.addStyle JSColor.css(), 'jsColor'
@ -163,8 +160,8 @@ Style =
return """filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='filters' color-interpolation-filters='sRGB'><feColorMatrix values='#{string} 0 0 0 1 0' /></filter></svg>#filters");""" return """filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='filters' color-interpolation-filters='sRGB'><feColorMatrix values='#{string} 0 0 0 1 0' /></filter></svg>#filters");"""
layout: -> layout: ->
# Remove after classes rewrite
_conf = Conf _conf = Conf
agent = Style.agent
xOffset = if _conf["Sidebar Location"] is "left" then '-' else '' xOffset = if _conf["Sidebar Location"] is "left" then '-' else ''
Style.pfOffset = if _conf['4chan SS Navigation'] and Style.pfOffset = if _conf['4chan SS Navigation'] and
@ -213,10 +210,60 @@ Style =
Style.replyMargin = _conf["Post Spacing"] Style.replyMargin = _conf["Post Spacing"]
css = """<%= grunt.file.read('src/General/css/layout.css') %>""" css = """<%= grunt.file.read('src/General/css/layout.css') %>"""
dynamic: ->
_conf = Conf
xOffset = if _conf["Sidebar Location"] is "left" then '-' else ''
Style.pfOffset = if _conf['4chan SS Navigation'] and
((_conf['Bottom Header'] and _conf['Fixed Header']) or
(g.VIEW is 'index' and _conf['Pagination'] is 'sticky bottom'))
1.5
else
0
Style.sidebar = {
minimal: 20
hide: 2
normal: 252
large: 303
}[_conf['Sidebar']]
Style.logoOffset =
if _conf["4chan Banner"] is "at sidebar top"
if _conf["Sidebar"] is "large"
100
else
83
else
0
width =
if _conf["Sidebar"] is "large"
299
else
248
Style.sidebarLocation = if _conf["Sidebar Location"] is "left"
["left", "right"]
else
["right", "left" ]
if _conf['editMode'] is "theme"
editSpace = {}
editSpace[Style.sidebarLocation[1]] = 300
editSpace[Style.sidebarLocation[0]] = 0
else
editSpace =
left: 0
right: 0
Style.replyMargin = _conf["Post Spacing"]
css = """<%= grunt.file.read('src/General/css/dynamic.css') %>"""
theme: (theme) -> theme: (theme) ->
_conf = Conf _conf = Conf
agent = Style.agent
bgColor = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"]) or 'aaaaaa') bgColor = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"]) or 'aaaaaa')