diff --git a/builds/appchan-x.user.js b/builds/appchan-x.user.js
index 6e45e46e3..34012d4c7 100644
--- a/builds/appchan-x.user.js
+++ b/builds/appchan-x.user.js
@@ -12689,7 +12689,7 @@
});
ctx = el.getContext('2d');
ctx.font = "50px " + Conf['Font'];
- ctx.fillStyle = "#" + Style.colorToHex((Themes[Conf['theme']] || Themes['Yotsuba B'])['Text']);
+ ctx.fillStyle = (new Style.color((Themes[Conf['theme']] || Themes['Yotsuba B'])['Text'])).hex;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText("Mascot 404", 124, 50);
@@ -13227,7 +13227,7 @@
rgb = ['r', 'g', 'b'];
for (_i = 0, _len = arguments.length; _i < _len; _i++) {
arg = arguments[_i];
- hex = Style.colorToHex(arg) || "ffffff";
+ hex = (new Style.color(arg)).raw;
color = {};
i = 0;
while (val = rgb[i]) {
@@ -13265,16 +13265,16 @@
},
theme: function(theme) {
var background, backgroundC, bgColor, i, replyRGB, replybg, svg, svgs, _i, _len;
- bgColor = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"]) || 'aaaaaa');
- replybg = new Style.color(Style.colorToHex(theme["Reply Background"]));
+ bgColor = new Style.color(backgroundC = theme["Background Color"]);
+ replybg = new Style.color(theme["Reply Background"]);
replyRGB = "rgb(" + (replybg.shiftRGB(parseInt(Conf['Silhouette Contrast'], 10), true)) + ")";
- Style.lightTheme = bgColor.isLight();
+ Style.lightTheme = bgColor.isLight;
svgs = [['captcha-filter', "values='" + (Style.filter(Style.matrix(theme["Text"], theme["Input Background"]))) + " 0 0 0 1 0'"], ['mascot-filter', "values='" + (Style.silhouette(Style.matrix(replyRGB))) + " 0 0 0 1 0'"], ['grayscale', 'id="color" type="saturate" values="0"'], ['icons-filter', "values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'"]];
for (i = _i = 0, _len = svgs.length; _i < _len; i = ++_i) {
svg = svgs[i];
Style.svgs[svg[0].replace(/\-/, "")] = Style.generateFilter(svg[0], svg[1]);
}
- return (".hide_thread_button span > span, .hide_reply_button span > span { background-color: " + theme["Links"] + "; } #mascot_hide label { border-bottom: 1px solid " + theme["Reply Border"] + "; } #content .thumb { box-shadow: 0 0 5px " + theme["Reply Border"] + "; } .export-button, .mascotname, #mascot-options { background: " + theme["Dialog Background"] + "; border: 1px solid " + theme["Buttons Border"] + "; } .highlight-you .opContainer.quotesYou, .highlight-own .opContainer.yourPost, .opContainer.filter-highlight { box-shadow: inset 5px 0 " + theme["Backlinked Reply Outline"] + "; } .highlight-you .quotesYou > .reply, .highlight-own .yourPost > .reply, .filter-highlight > .reply { box-shadow: -5px 0 " + theme["Backlinked Reply Outline"] + "; } hr { border-bottom: 1px solid " + theme["Reply Border"] + "; } hr#unread-line { border-bottom: 1px solid " + theme["Reply Background"] + "; visibility: visible; } .threadContainer { border-color: " + theme["Reply Border"] + " !important; } html { background: " + (backgroundC || '') + "; background-image: " + (theme["Background Image"] || '') + "; background-repeat: " + (theme["Background Repeat"] || '') + "; background-attachment: " + (theme["Background Attachment"] || '') + "; background-position: " + (theme["Background Position"] || '') + "; } .panel, .section-container, #exlinks-options-content, #themecontent { background: " + backgroundC + "; border: 1px solid " + theme["Reply Border"] + "; } .sections-list > a.tab-selected { background: " + backgroundC + "; border-color: " + theme["Reply Border"] + "; } .captcha-img img { filter: url('data:image/svg+xml," + (Style.svgs.captchafilter.replace(/(\'|\")/g, '%22')) + "#captcha-filter'); } .silhouettize-mascots #mascot img, .silhouette img { filter: url('data:image/svg+xml," + (Style.svgs.mascotfilter.replace(/(\'|\")/g, '%22')) + "#mascot-filter'); } .grayscale-mascots #mascot { filter: url('data:image/svg+xml," + (Style.svgs.grayscale.replace(/(\'|\")/g, '%22')) + "#grayscale'); } #boardTitle { text-shadow: 1px 1px " + backgroundC + ", -1px -1px " + backgroundC + ", 1px -1px " + backgroundC + ", -1px 1px " + backgroundC + "; } .sidebar-glow #boardTitle { text-shadow: 1px 1px 1px " + backgroundC + ", -1px -1px 1px " + backgroundC + ", 1px -1px 1px " + backgroundC + ", -1px 1px 1px " + backgroundC + ", 0 2px 4px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.6); } #exlinks-options, #appchanx-settings, #qrtab, input[type=\"submit\"], input[value=\"Report\"], span[style=\"left: 5px; position: absolute;\"] a { background: " + theme["Buttons Background"] + "; border: 1px solid " + theme["Buttons Border"] + "; } .enabled .mascotcontainer { background: " + theme["Buttons Background"] + "; border-color: " + theme["Buttons Border"] + "; } #dump, #qr-filename-container, #appchanx-settings input, .captcha-img, .dump #dump, .qr-preview, .selectrice, button, input, textarea { background: " + theme["Input Background"] + "; border: 1px solid " + theme["Input Border"] + "; } .has-file #qr-extras-container { background: " + theme["Input Background"] + "; } #dump:hover, #qr-filename-container:hover, .selectrice:hover, #selectrice li:hover, #selectrice li:nth-of-type(2n+1):hover, input:hover, textarea:hover { background: " + theme["Hovered Input Background"] + "; border-color: " + theme["Hovered Input Border"] + "; } .has-file #qr-filename-container:hover #qr-extras-container { background: " + theme["Hovered Input Background"] + "; } #dump:active, #dump:focus, #selectrice li:focus, .selectrice:focus, #qr-filename-container:active, #qr-filename-container:focus, input:focus, textarea:focus, textarea.field:focus { background: " + theme["Focused Input Background"] + "; border-color: " + theme["Focused Input Border"] + "; color: " + theme["Inputs"] + "; } .has-file #qr-filename-container:active #qr-extras-container, .has-file #qr-filename-container:focus #qr-extras-container { background: " + theme["Focused Input Background"] + "; } #ft, #mouseover, #post-preview, #qp .post, #threads > .thread, #xupdater, .box-outer, .reply.post { border-width: 1px; border-style: solid; border-color: " + theme["Reply Border"] + "; background: " + theme["Reply Background"] + "; } .exblock.reply, .reply.post.highlight, .reply.post:target { background: " + theme["Highlighted Reply Background"] + "; border: 1px solid " + theme["Highlighted Reply Border"] + "; } #header-bar, .pagelist { background: " + theme["Navigation Background"] + "; border-color: " + theme["Navigation Border"] + "; } #doc, #threads, .board > .thread { background: " + theme["Thread Wrapper Background"] + "; border: 1px solid " + theme["Thread Wrapper Border"] + "; } #boardNavDesktopFoot, #mascot_hide, #menu, #selectrice, #themeConf, #thread-watcher, #thread-watcher:hover, .announcements-slideout #globalMessage, .dialog, .post-form-style-float #qr, .post-form-decorations #qr, .submenu { background: " + theme["Dialog Background"] + "; border: 1px solid " + theme["Dialog Border"] + "; } #qp.dialog { border: none; } .watch-thread-link { background-image: url(\"data:image/svg+xml,\"); } .deleteform::before, .deleteform, #qr .warning { background: " + theme["Input Background"] + "; border-color: " + theme["Input Border"] + "; } .disabledwarning, .warning { color: " + theme["Warnings"] + "; } #charCount { color: " + (Style.lightTheme ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.7)") + "; } .postNum a { color: " + theme["Post Numbers"] + "; } .subject { color: " + theme["Subjects"] + " !important; } .dateTime, .post-ago { color: " + theme["Timestamps"] + " !important; } #fs_status a, #header-bar .shortcut > span, #updater #update-status:not(.new)::after, #showQR, .abbr, .boxbar, .boxcontent, .deleteform::before, .pages strong, .pln, .reply, .reply.highlight, .summary, body, button, span[style=\"left: 5px; position: absolute;\"] a, input, textarea { color: " + theme["Text"] + "; } #exlinks-options-content > table, #appchanx-settings fieldset, #selectrice { border-bottom: 1px solid " + theme["Reply Border"] + "; box-shadow: inset " + theme["Shadow Color"] + " 0 0 5px; } .quote + .spoiler:hover, .quote { color: " + theme["Greentext"] + "; } .forwardlink { border-bottom: 1px dashed " + theme["Backlinks"] + "; } .container::before { color: " + theme["Timestamps"] + "; } .quote-shadows #menu, .quote-shadows #post-preview, .quote-shadows #qp .opContainer, .quote-shadows #qp .replyContainer, .quote-shadows .submenu { box-shadow: 5px 5px 5px " + theme['Shadow Color'] + "; } .rice { background: " + theme["Checkbox Background"] + "; border: 1px solid " + theme["Checkbox Border"] + "; } .selectrice::before { border-left: 1px solid " + theme["Input Border"] + "; } .selectrice::after { border-top: .45em solid " + theme["Inputs"] + "; } .bd { background: " + theme["Buttons Background"] + "; border: 1px solid " + theme["Buttons Border"] + "; } .pages a, #header-bar a { color: " + theme["Navigation Links"] + "; } input[type=checkbox]:checked + .rice::after { border-color: " + theme["Inputs"] + "; } #addReply, #dump, .button, .entry, .replylink, a { color: " + theme["Links"] + "; } .backlink { color: " + theme["Backlinks"] + "; } .qiQuote, .quotelink { color: " + theme["Quotelinks"] + "; } #addReply:hover, #dump:hover, .entry:hover, .replylink:hover, .qiQuote:hover, .quotelink:hover, a .name:hover, a .postertrip:hover, a:hover { color: " + theme["Hovered Links"] + "; } #header-bar a:hover, #boardTitle a:hover { color: " + theme["Hovered Navigation Links"] + "; } #boardTitle { color: " + theme["Board Title"] + "; } .name, .post-author { color: " + theme["Names"] + " !important; } .post-tripcode, .postertrip, .trip { color: " + theme["Tripcodes"] + " !important; } a .postertrip, a .name { color: " + theme["Emails"] + "; } .post.reply.qphl, .post.op.qphl { border-color: " + theme["Backlinked Reply Outline"] + "; background: " + theme["Highlighted Reply Background"] + "; } .quote-shadows .inline .post { box-shadow: 5px 5px 5px " + theme['Shadow Color'] + "; } .placeholder, #qr input::placeholder, #qr textarea::placeholder { color: " + (Style.lightTheme ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.2)") + " !important; } #qr input:placeholder, #qr textarea:placeholder, .placeholder { color: " + (Style.lightTheme ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.2)") + " !important; } #appchanx-settings fieldset, .boxcontent dd, .selectrice ul { border-color: " + (Style.lightTheme ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)") + "; } #appchanx-settings li, #selectrice li:not(:first-of-type) { border-top: 1px solid " + (Style.lightTheme ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.025)") + "; } .a-icon, #shortcuts .fa { " + (!Style.lightTheme ? "filter: url('data:image/svg+xml," + (Style.svgs.iconsfilter.replace(/(\'|\")/g, '%22')) + "#icons-filter');" : "") + " } .alternate-post-colors #threads > .thread:nth-of-type(2n+1), .alternate-post-colors .replyContainer:nth-of-type(2n+1) .post { background-image: linear-gradient(" + (replybg ? "rgba(" + (replybg.shiftRGB(-4, false)) + ",0.8), rgba(" + (replybg.shiftRGB(-4, false)) + ",0.8)" : Style.lightTheme ? "rgba(0,0,0,0.05), rgba(0,0,0,0.05)" : "rgba(255,255,255,0.02), rgba(255,255,255,0.02)") + "); } .color-reply-headings .boxbar, .color-reply-headings .postInfo { background: " + (replybg ? "rgba(" + (replybg.shiftRGB(-12, false)) + ",0.8)" : "rgba(0,0,0,0.1)") + "; border-bottom: 1px solid " + theme["Reply Border"] + " } .color-file-info .file { background: " + (replybg ? "rgba(" + (replybg.shiftRGB(-8, false)) + ",0.8)" : "rgba(0,0,0,0.1)") + "; border-bottom: 1px solid " + theme["Reply Border"] + " border-top: 1px solid " + theme["Reply Border"] + " } .color-reply.headings.color-file-info { border-top: none; } .op-background .op.post { background: " + theme["Reply Background"] + "; border: 1px solid " + theme["Reply Border"] + "; } .op-background .op.post:target .op-background .op.post.highlight { background: " + theme["Highlighted Reply Background"] + "; border: 1px solid " + theme["Highlighted Reply Border"] + "; } .fourchan-banner-at-sidebar-top.icon-orientation-vertical body::after { background: " + backgroundC + "; } .fourchan-banner-at-sidebar-top.icon-orientation-vertical.fourchan-ss-sidebar body::after, .fourchan-banner-at-sidebar-top.fourchan-ss-sidebar body::before { background: rgba(" + ((background = new Style.color(Style.colorToHex(theme["Reply Background"]))) ? background.shiftRGB(-18) : void 0) + ", 0.8); } .fourchan-ss-sidebar.sidebar-location-right body::before { border-left: 2px solid " + backgroundC + "; box-shadow: inset 1px 0 0 " + theme["Reply Border"] + ", -1px 0 0 " + theme["Reply Border"] + "; } .fourchan-ss-sidebar.sidebar-location-left body::before { border-right: 2px solid " + backgroundC + "; box-shadow: 1px 0 0 " + theme["Reply Border"] + ", inset -1px 0 0 " + theme["Reply Border"] + "; } .sage-highlighting-text.sage-highlight-position-before a.useremail[href*=\"sage\"]:last-of-type::before, .sage-highlighting-text.sage-highlight-position-before a.useremail[href*=\"Sage\"]:last-of-type::before, .sage-highlighting-text.sage-highlight-position-before a.useremail[href*=\"SAGE\"]:last-of-type::before, .sage-highlighting-text.sage-highlight-position-after a.useremail[href*=\"sage\"]:last-of-type::after, .sage-highlighting-text.sage-highlight-position-after a.useremail[href*=\"Sage\"]:last-of-type::after, .sage-highlighting-text.sage-highlight-position-after a.useremail[href*=\"SAGE\"]:last-of-type::after { content: \" (sage) \"; color: " + theme["Sage"] + "; } .quote-shadows #qr { box-shadow: 5px 5px 5px " + theme['Shadow Color'] + "; } " + (theme["Custom CSS"].replace(/\s+/g, ' ').trim())) + ("" + (Style.lightTheme ? " .prettyprint { background-color: #e7e7e7; border: 1px solid #dcdcdc; } .com { color: #dd0000; } .str, .atv { color: #7fa61b; } .pun { color: #61663a; } .tag { color: #117743; } .kwd { color: #5a6F9e; } .typ, .atn { color: #9474bd; } .lit { color: #368c72; } " : " .prettyprint { background-color: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,0.5); } .tag { color: #96562c; } .pun { color: #5b6f2a; } .com { color: #a34443; } .str, .atv { color: #8ba446; } .kwd { color: #987d3e; } .typ, .atn { color: #897399; } .lit { color: #558773; } "));
+ return (".hide_thread_button span > span, .hide_reply_button span > span { background-color: " + theme["Links"] + "; } #mascot_hide label { border-bottom: 1px solid " + theme["Reply Border"] + "; } #content .thumb { box-shadow: 0 0 5px " + theme["Reply Border"] + "; } .export-button, .mascotname, #mascot-options { background: " + theme["Dialog Background"] + "; border: 1px solid " + theme["Buttons Border"] + "; } .highlight-you .opContainer.quotesYou, .highlight-own .opContainer.yourPost, .opContainer.filter-highlight { box-shadow: inset 5px 0 " + theme["Backlinked Reply Outline"] + "; } .highlight-you .quotesYou > .reply, .highlight-own .yourPost > .reply, .filter-highlight > .reply { box-shadow: -5px 0 " + theme["Backlinked Reply Outline"] + "; } hr { border-bottom: 1px solid " + theme["Reply Border"] + "; } hr#unread-line { border-bottom: 1px solid " + theme["Reply Background"] + "; visibility: visible; } .threadContainer { border-color: " + theme["Reply Border"] + " !important; } html { background: " + (backgroundC || '') + "; background-image: " + (theme["Background Image"] || '') + "; background-repeat: " + (theme["Background Repeat"] || '') + "; background-attachment: " + (theme["Background Attachment"] || '') + "; background-position: " + (theme["Background Position"] || '') + "; } .panel, .section-container, #exlinks-options-content, #themecontent { background: " + backgroundC + "; border: 1px solid " + theme["Reply Border"] + "; } .sections-list > a.tab-selected { background: " + backgroundC + "; border-color: " + theme["Reply Border"] + "; } .captcha-img img { filter: url('data:image/svg+xml," + (Style.svgs.captchafilter.replace(/(\'|\")/g, '%22')) + "#captcha-filter'); } .silhouettize-mascots #mascot img, .silhouette img { filter: url('data:image/svg+xml," + (Style.svgs.mascotfilter.replace(/(\'|\")/g, '%22')) + "#mascot-filter'); } .grayscale-mascots #mascot { filter: url('data:image/svg+xml," + (Style.svgs.grayscale.replace(/(\'|\")/g, '%22')) + "#grayscale'); } #boardTitle { text-shadow: 1px 1px " + backgroundC + ", -1px -1px " + backgroundC + ", 1px -1px " + backgroundC + ", -1px 1px " + backgroundC + "; } .sidebar-glow #boardTitle { text-shadow: 1px 1px 1px " + backgroundC + ", -1px -1px 1px " + backgroundC + ", 1px -1px 1px " + backgroundC + ", -1px 1px 1px " + backgroundC + ", 0 2px 4px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.6); } #exlinks-options, #appchanx-settings, #qrtab, input[type=\"submit\"], input[value=\"Report\"], span[style=\"left: 5px; position: absolute;\"] a { background: " + theme["Buttons Background"] + "; border: 1px solid " + theme["Buttons Border"] + "; } .enabled .mascotcontainer { background: " + theme["Buttons Background"] + "; border-color: " + theme["Buttons Border"] + "; } #dump, #qr-filename-container, #appchanx-settings input, .captcha-img, .dump #dump, .qr-preview, .selectrice, button, input, textarea { background: " + theme["Input Background"] + "; border: 1px solid " + theme["Input Border"] + "; } .has-file #qr-extras-container { background: " + theme["Input Background"] + "; } #dump:hover, #qr-filename-container:hover, .selectrice:hover, #selectrice li:hover, #selectrice li:nth-of-type(2n+1):hover, input:hover, textarea:hover { background: " + theme["Hovered Input Background"] + "; border-color: " + theme["Hovered Input Border"] + "; } .has-file #qr-filename-container:hover #qr-extras-container { background: " + theme["Hovered Input Background"] + "; } #dump:active, #dump:focus, #selectrice li:focus, .selectrice:focus, #qr-filename-container:active, #qr-filename-container:focus, input:focus, textarea:focus, textarea.field:focus { background: " + theme["Focused Input Background"] + "; border-color: " + theme["Focused Input Border"] + "; color: " + theme["Inputs"] + "; } .has-file #qr-filename-container:active #qr-extras-container, .has-file #qr-filename-container:focus #qr-extras-container { background: " + theme["Focused Input Background"] + "; } #ft, #mouseover, #post-preview, #qp .post, #threads > .thread, #xupdater, .box-outer, .reply.post { border-width: 1px; border-style: solid; border-color: " + theme["Reply Border"] + "; background: " + theme["Reply Background"] + "; } .exblock.reply, .reply.post.highlight, .reply.post:target { background: " + theme["Highlighted Reply Background"] + "; border: 1px solid " + theme["Highlighted Reply Border"] + "; } #header-bar, .pagelist { background: " + theme["Navigation Background"] + "; border-color: " + theme["Navigation Border"] + "; } #doc, #threads, .board > .thread { background: " + theme["Thread Wrapper Background"] + "; border: 1px solid " + theme["Thread Wrapper Border"] + "; } #boardNavDesktopFoot, #mascot_hide, #menu, #selectrice, #themeConf, #thread-watcher, #thread-watcher:hover, .announcements-slideout #globalMessage, .dialog, .post-form-style-float #qr, .post-form-decorations #qr, .submenu { background: " + theme["Dialog Background"] + "; border: 1px solid " + theme["Dialog Border"] + "; } #qp.dialog { border: none; } .watch-thread-link { background-image: url(\"data:image/svg+xml,\"); } .deleteform::before, .deleteform, #qr .warning { background: " + theme["Input Background"] + "; border-color: " + theme["Input Border"] + "; } .disabledwarning, .warning { color: " + theme["Warnings"] + "; } #charCount { color: " + (Style.lightTheme ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.7)") + "; } .postNum a { color: " + theme["Post Numbers"] + "; } .subject { color: " + theme["Subjects"] + " !important; } .dateTime, .post-ago { color: " + theme["Timestamps"] + " !important; } #fs_status a, #header-bar .shortcut > span, #updater #update-status:not(.new)::after, #showQR, .abbr, .boxbar, .boxcontent, .deleteform::before, .pages strong, .pln, .reply, .reply.highlight, .summary, body, button, span[style=\"left: 5px; position: absolute;\"] a, input, textarea { color: " + theme["Text"] + "; } #exlinks-options-content > table, #appchanx-settings fieldset, #selectrice { border-bottom: 1px solid " + theme["Reply Border"] + "; box-shadow: inset " + theme["Shadow Color"] + " 0 0 5px; } .quote + .spoiler:hover, .quote { color: " + theme["Greentext"] + "; } .forwardlink { border-bottom: 1px dashed " + theme["Backlinks"] + "; } .container::before { color: " + theme["Timestamps"] + "; } .quote-shadows #menu, .quote-shadows #post-preview, .quote-shadows #qp .opContainer, .quote-shadows #qp .replyContainer, .quote-shadows .submenu { box-shadow: 5px 5px 5px " + theme['Shadow Color'] + "; } .rice { background: " + theme["Checkbox Background"] + "; border: 1px solid " + theme["Checkbox Border"] + "; } .selectrice::before { border-left: 1px solid " + theme["Input Border"] + "; } .selectrice::after { border-top: .45em solid " + theme["Inputs"] + "; } .bd { background: " + theme["Buttons Background"] + "; border: 1px solid " + theme["Buttons Border"] + "; } .pages a, #header-bar a { color: " + theme["Navigation Links"] + "; } input[type=checkbox]:checked + .rice::after { border-color: " + theme["Inputs"] + "; } #addReply, #dump, .button, .entry, .replylink, a { color: " + theme["Links"] + "; } .backlink { color: " + theme["Backlinks"] + "; } .qiQuote, .quotelink { color: " + theme["Quotelinks"] + "; } #addReply:hover, #dump:hover, .entry:hover, .replylink:hover, .qiQuote:hover, .quotelink:hover, a .name:hover, a .postertrip:hover, a:hover { color: " + theme["Hovered Links"] + "; } #header-bar a:hover, #boardTitle a:hover { color: " + theme["Hovered Navigation Links"] + "; } #boardTitle { color: " + theme["Board Title"] + "; } .name, .post-author { color: " + theme["Names"] + " !important; } .post-tripcode, .postertrip, .trip { color: " + theme["Tripcodes"] + " !important; } a .postertrip, a .name { color: " + theme["Emails"] + "; } .post.reply.qphl, .post.op.qphl { border-color: " + theme["Backlinked Reply Outline"] + "; background: " + theme["Highlighted Reply Background"] + "; } .quote-shadows .inline .post { box-shadow: 5px 5px 5px " + theme['Shadow Color'] + "; } .placeholder, #qr input::placeholder, #qr textarea::placeholder { color: " + (Style.lightTheme ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.2)") + " !important; } #qr input:placeholder, #qr textarea:placeholder, .placeholder { color: " + (Style.lightTheme ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.2)") + " !important; } #appchanx-settings fieldset, .boxcontent dd, .selectrice ul { border-color: " + (Style.lightTheme ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)") + "; } #appchanx-settings li, #selectrice li:not(:first-of-type) { border-top: 1px solid " + (Style.lightTheme ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.025)") + "; } .a-icon, #shortcuts .fa { " + (!Style.lightTheme ? "filter: url('data:image/svg+xml," + (Style.svgs.iconsfilter.replace(/(\'|\")/g, '%22')) + "#icons-filter');" : "") + " } .alternate-post-colors #threads > .thread:nth-of-type(2n+1), .alternate-post-colors .replyContainer:nth-of-type(2n+1) .post { background-image: linear-gradient(" + (replybg ? "rgba(" + (replybg.shiftRGB(-4, false)) + ",0.8), rgba(" + (replybg.shiftRGB(-4, false)) + ",0.8)" : Style.lightTheme ? "rgba(0,0,0,0.05), rgba(0,0,0,0.05)" : "rgba(255,255,255,0.02), rgba(255,255,255,0.02)") + "); } .color-reply-headings .boxbar, .color-reply-headings .postInfo { background: " + (replybg ? "rgba(" + (replybg.shiftRGB(-12, false)) + ",0.8)" : "rgba(0,0,0,0.1)") + "; border-bottom: 1px solid " + theme["Reply Border"] + " } .color-file-info .file { background: " + (replybg ? "rgba(" + (replybg.shiftRGB(-8, false)) + ",0.8)" : "rgba(0,0,0,0.1)") + "; border-bottom: 1px solid " + theme["Reply Border"] + " border-top: 1px solid " + theme["Reply Border"] + " } .color-reply.headings.color-file-info { border-top: none; } .op-background .op.post { background: " + theme["Reply Background"] + "; border: 1px solid " + theme["Reply Border"] + "; } .op-background .op.post:target .op-background .op.post.highlight { background: " + theme["Highlighted Reply Background"] + "; border: 1px solid " + theme["Highlighted Reply Border"] + "; } .fourchan-banner-at-sidebar-top.icon-orientation-vertical body::after { background: " + backgroundC + "; } .fourchan-banner-at-sidebar-top.icon-orientation-vertical.fourchan-ss-sidebar body::after, .fourchan-banner-at-sidebar-top.fourchan-ss-sidebar body::before { background: rgba(" + ((background = new Style.color(theme["Reply Background"])) ? background.shiftRGB(-18) : void 0) + ", 0.8); } .fourchan-ss-sidebar.sidebar-location-right body::before { border-left: 2px solid " + backgroundC + "; box-shadow: inset 1px 0 0 " + theme["Reply Border"] + ", -1px 0 0 " + theme["Reply Border"] + "; } .fourchan-ss-sidebar.sidebar-location-left body::before { border-right: 2px solid " + backgroundC + "; box-shadow: 1px 0 0 " + theme["Reply Border"] + ", inset -1px 0 0 " + theme["Reply Border"] + "; } .sage-highlighting-text.sage-highlight-position-before a.useremail[href*=\"sage\"]:last-of-type::before, .sage-highlighting-text.sage-highlight-position-before a.useremail[href*=\"Sage\"]:last-of-type::before, .sage-highlighting-text.sage-highlight-position-before a.useremail[href*=\"SAGE\"]:last-of-type::before, .sage-highlighting-text.sage-highlight-position-after a.useremail[href*=\"sage\"]:last-of-type::after, .sage-highlighting-text.sage-highlight-position-after a.useremail[href*=\"Sage\"]:last-of-type::after, .sage-highlighting-text.sage-highlight-position-after a.useremail[href*=\"SAGE\"]:last-of-type::after { content: \" (sage) \"; color: " + theme["Sage"] + "; } .quote-shadows #qr { box-shadow: 5px 5px 5px " + theme['Shadow Color'] + "; } " + (theme["Custom CSS"].replace(/\s+/g, ' ').trim())) + ("" + (Style.lightTheme ? " .prettyprint { background-color: #e7e7e7; border: 1px solid #dcdcdc; } .com { color: #dd0000; } .str, .atv { color: #7fa61b; } .pun { color: #61663a; } .tag { color: #117743; } .kwd { color: #5a6F9e; } .typ, .atn { color: #9474bd; } .lit { color: #368c72; } " : " .prettyprint { background-color: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,0.5); } .tag { color: #96562c; } .pun { color: #5b6f2a; } .com { color: #a34443; } .str, .atv { color: #8ba446; } .kwd { color: #987d3e; } .typ, .atn { color: #897399; } .lit { color: #558773; } "));
},
iconPositions: function() {
var el, exec, slideNav;
@@ -13318,45 +13318,89 @@
pageHeight = (_ref = $('.pagelist', d.body)) != null ? _ref.offsetHeight : void 0;
return Style.sheets.padding.textContent = ("body { padding-bottom: 15px; padding-top: 15px; } .fourchan-ss-navigation.fixed.top-header:not(.autohide) body::before { top: " + navHeight + "px; } .fourchan-ss-navigation.fixed.bottom-header:not(.autohide) body::before { bottom: " + navHeight + "px; } .top-header:not(.autohide) body { padding-top: " + (navHeight + 1) + "px; } .bottom-header:not(.autohide) body { padding-bottom: " + (navHeight + 1) + "px; } ") + (pageHeight ? ".fourchan-ss-navigation.index.pagination-sticky-top body::before, .fourchan-ss-navigation.index.pagination-top body::before { top: " + pageHeight + "px; } .fourchan-ss-navigation.index.pagination-sticky-bottom body::before, .fourchan-ss-navigation.index.pagination-bottom body::before { bottom: " + pageHeight + "px; } .index.pagination-sticky-top body, .index.pagination-top body { padding-top: " + (pageHeight + 1) + "px; } .index.pagination-sticky-bottom body, .index.pagination-bottom body { padding-bottom: " + (pageHeight + 1) + "px; }" : '');
},
- color: function(hex) {
- this.hex = "#" + hex;
- this.calc_rgb = function(hex) {
- hex = parseInt(hex, 16);
+ color: (function() {
+ var calc_rgb, colorToHex, isLight, minmax;
+
+ minmax = function(base) {
+ if (base < 0) {
+ return 0;
+ } else if (base > 255) {
+ return 255;
+ } else {
+ return base;
+ }
+ };
+
+ calc_rgb = function(value) {
+ var hex;
+ hex = parseInt(value, 16);
return [(hex >> 16) & 0xFF, (hex >> 8) & 0xFF, hex & 0xFF];
};
- this.private_rgb = this.calc_rgb(hex);
- this.rgb = this.private_rgb.join(",");
- this.isLight = function() {
- var rgb;
- rgb = this.private_rgb;
- return (rgb[0] + rgb[1] + rgb[2]) >= 400;
- };
- this.shiftRGB = function(shift, smart) {
- var minmax, rgb;
- minmax = function(base) {
- return Math.min(Math.max(base, 0), 255);
- };
- rgb = this.private_rgb.slice(0);
- shift = smart ? (this.isLight(rgb) ? -1 : 1) * Math.abs(shift) : shift;
- return [minmax(rgb[0] + shift), minmax(rgb[1] + shift), minmax(rgb[2] + shift)].join(",");
- };
- return this.hover = this.shiftRGB(16, true);
- },
- colorToHex: function(color) {
- var digits, hex;
- if (color.substr(0, 1) === '#') {
- return color.slice(1, color.length);
- }
- if (digits = color.match(/(.*?)rgba?\((\d+), ?(\d+), ?(\d+)(.*?)\)/)) {
- hex = ((parseInt(digits[2], 10) << 16) | (parseInt(digits[3], 10) << 8) | (parseInt(digits[4], 10))).toString(16);
- while (hex.length < 6) {
- hex = "0" + hex;
+
+ colorToHex = function(color) {
+ var b, digits, hex, r;
+ if (color.substr(0, 1) === '#') {
+ if (color.length !== 4) {
+ return color.slice(1);
+ } else {
+ r = color.substr(1, 1);
+ g = color.substr(2, 1);
+ b = color.substr(3, 1);
+ return [r, r, g, g, b, b].join("");
+ }
}
- return hex;
- } else {
- return false;
+ if (/[0-9a-f]{3}/i.test(color)) {
+ if (/[0-9a-f]{6}/i.test(color)) {
+ return color;
+ }
+ r = color.substr(0, 1);
+ g = color.substr(1, 1);
+ b = color.substr(2, 1);
+ return [r, r, g, g, b, b].join("");
+ }
+ if (digits = color.match(/(.*?)rgba?\((\d+), ?(\d+), ?(\d+)(.*?)\)/)) {
+ hex = ((parseInt(digits[2], 10) << 16) | (parseInt(digits[3], 10) << 8) | (parseInt(digits[4], 10))).toString(16);
+ while (hex.length < 6) {
+ hex = "0" + hex;
+ }
+ return hex;
+ } else {
+ return "000000";
+ }
+ };
+
+ isLight = function(rgb) {
+ return (rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114) > 125;
+ };
+
+ function _Class(value) {
+ this.value = value;
+ this.raw = colorToHex(value);
+ this.hex = "#" + this.raw;
+ this.private_rgb = calc_rgb(value);
+ this.isLight = isLight(this.private_rgb);
+ this.rgb = this.private_rgb.join(",");
+ this.hover = this.shiftRGB(16, true);
}
- }
+
+ _Class.prototype.shiftRGB = function(shift, smart) {
+ var color, rgb;
+ rgb = __slice.call(this.private_rgb);
+ shift = smart ? (this.isLight ? -1 : 1) * Math.abs(shift) : shift;
+ return ((function() {
+ var _i, _len, _results;
+ _results = [];
+ for (_i = 0, _len = rgb.length; _i < _len; _i++) {
+ color = rgb[_i];
+ _results.push(minmax(color + shift));
+ }
+ return _results;
+ })()).join(",");
+ };
+
+ return _Class;
+
+ })()
};
/*
@@ -13435,7 +13479,7 @@
input.className = "colorfield";
colorInput = $.el('input', {
className: 'color',
- value: "#" + (Style.colorToHex(input.value) || 'aaaaaa')
+ value: "#" + (new Style.color(input.value)).hex
});
JSColor.bind(colorInput);
$.after(input, colorInput);
@@ -13490,7 +13534,7 @@
return alert("Syntax error on " + this.name + ".");
}
if (this.className === "colorfield") {
- this.nextSibling.value = '#' + (Style.colorToHex(this.value) || 'aaaaaa');
+ this.nextSibling.value = (new Style.color(this.value)).hex;
this.nextSibling.color.importColor();
}
editTheme[this.name] = this.value;
diff --git a/builds/crx/script.js b/builds/crx/script.js
index 1bc179ba7..975cc4bf6 100644
--- a/builds/crx/script.js
+++ b/builds/crx/script.js
@@ -12694,7 +12694,7 @@
});
ctx = el.getContext('2d');
ctx.font = "50px " + Conf['Font'];
- ctx.fillStyle = "#" + Style.colorToHex((Themes[Conf['theme']] || Themes['Yotsuba B'])['Text']);
+ ctx.fillStyle = (new Style.color((Themes[Conf['theme']] || Themes['Yotsuba B'])['Text'])).hex;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText("Mascot 404", 124, 50);
@@ -13237,7 +13237,7 @@
rgb = ['r', 'g', 'b'];
for (_i = 0, _len = arguments.length; _i < _len; _i++) {
arg = arguments[_i];
- hex = Style.colorToHex(arg) || "ffffff";
+ hex = (new Style.color(arg)).raw;
color = {};
i = 0;
while (val = rgb[i]) {
@@ -13275,17 +13275,17 @@
},
theme: function(theme) {
var background, backgroundC, bgColor, i, replyRGB, replybg, svg, svgs, _i, _len;
- bgColor = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"]) || 'aaaaaa');
- replybg = new Style.color(Style.colorToHex(theme["Reply Background"]));
+ bgColor = new Style.color(backgroundC = theme["Background Color"]);
+ replybg = new Style.color(theme["Reply Background"]);
replyRGB = "rgb(" + (replybg.shiftRGB(parseInt(Conf['Silhouette Contrast'], 10), true)) + ")";
- Style.lightTheme = bgColor.isLight();
+ Style.lightTheme = bgColor.isLight;
svgs = [['captcha-filter', "values='" + (Style.filter(Style.matrix(theme["Text"], theme["Input Background"]))) + " 0 0 0 1 0'"], ['mascot-filter', "values='" + (Style.silhouette(Style.matrix(replyRGB))) + " 0 0 0 1 0'"], ['grayscale', 'id="color" type="saturate" values="0"'], ['icons-filter', "values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'"]];
for (i = _i = 0, _len = svgs.length; _i < _len; i = ++_i) {
svg = svgs[i];
svgs[i] = Style.generateFilter(svg[0], svg[1]);
}
Style.svgs.el.innerHTML = svgs.join('');
- return (".hide_thread_button span > span, .hide_reply_button span > span { background-color: " + theme["Links"] + "; } #mascot_hide label { border-bottom: 1px solid " + theme["Reply Border"] + "; } #content .thumb { box-shadow: 0 0 5px " + theme["Reply Border"] + "; } .export-button, .mascotname, #mascot-options { background: " + theme["Dialog Background"] + "; border: 1px solid " + theme["Buttons Border"] + "; } .highlight-you .opContainer.quotesYou, .highlight-own .opContainer.yourPost, .opContainer.filter-highlight { box-shadow: inset 5px 0 " + theme["Backlinked Reply Outline"] + "; } .highlight-you .quotesYou > .reply, .highlight-own .yourPost > .reply, .filter-highlight > .reply { box-shadow: -5px 0 " + theme["Backlinked Reply Outline"] + "; } hr { border-bottom: 1px solid " + theme["Reply Border"] + "; } hr#unread-line { border-bottom: 1px solid " + theme["Reply Background"] + "; visibility: visible; } .threadContainer { border-color: " + theme["Reply Border"] + " !important; } html { background: " + (backgroundC || '') + "; background-image: " + (theme["Background Image"] || '') + "; background-repeat: " + (theme["Background Repeat"] || '') + "; background-attachment: " + (theme["Background Attachment"] || '') + "; background-position: " + (theme["Background Position"] || '') + "; } .panel, .section-container, #exlinks-options-content, #themecontent { background: " + backgroundC + "; border: 1px solid " + theme["Reply Border"] + "; } .sections-list > a.tab-selected { background: " + backgroundC + "; border-color: " + theme["Reply Border"] + "; } .captcha-img img { -webkit-filter: url('#captcha-filter'); } .silhouettize-mascots #mascot img, .silhouette img { -webkit-filter: url('#mascot-filter'); } .grayscale-mascots #mascot { -webkit-filter: url('#grayscale'); } #boardTitle { text-shadow: 1px 1px " + backgroundC + ", -1px -1px " + backgroundC + ", 1px -1px " + backgroundC + ", -1px 1px " + backgroundC + "; } .sidebar-glow #boardTitle { text-shadow: 1px 1px 1px " + backgroundC + ", -1px -1px 1px " + backgroundC + ", 1px -1px 1px " + backgroundC + ", -1px 1px 1px " + backgroundC + ", 0 2px 4px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.6); } #exlinks-options, #appchanx-settings, #qrtab, input[type=\"submit\"], input[value=\"Report\"], span[style=\"left: 5px; position: absolute;\"] a { background: " + theme["Buttons Background"] + "; border: 1px solid " + theme["Buttons Border"] + "; } .enabled .mascotcontainer { background: " + theme["Buttons Background"] + "; border-color: " + theme["Buttons Border"] + "; } #dump, #qr-filename-container, #appchanx-settings input, .captcha-img, .dump #dump, .qr-preview, .selectrice, button, input, textarea { background: " + theme["Input Background"] + "; border: 1px solid " + theme["Input Border"] + "; } .has-file #qr-extras-container { background: " + theme["Input Background"] + "; } #dump:hover, #qr-filename-container:hover, .selectrice:hover, #selectrice li:hover, #selectrice li:nth-of-type(2n+1):hover, input:hover, textarea:hover { background: " + theme["Hovered Input Background"] + "; border-color: " + theme["Hovered Input Border"] + "; } .has-file #qr-filename-container:hover #qr-extras-container { background: " + theme["Hovered Input Background"] + "; } #dump:active, #dump:focus, #selectrice li:focus, .selectrice:focus, #qr-filename-container:active, #qr-filename-container:focus, input:focus, textarea:focus, textarea.field:focus { background: " + theme["Focused Input Background"] + "; border-color: " + theme["Focused Input Border"] + "; color: " + theme["Inputs"] + "; } .has-file #qr-filename-container:active #qr-extras-container, .has-file #qr-filename-container:focus #qr-extras-container { background: " + theme["Focused Input Background"] + "; } #ft, #mouseover, #post-preview, #qp .post, #threads > .thread, #xupdater, .box-outer, .reply.post { border-width: 1px; border-style: solid; border-color: " + theme["Reply Border"] + "; background: " + theme["Reply Background"] + "; } .exblock.reply, .reply.post.highlight, .reply.post:target { background: " + theme["Highlighted Reply Background"] + "; border: 1px solid " + theme["Highlighted Reply Border"] + "; } #header-bar, .pagelist { background: " + theme["Navigation Background"] + "; border-color: " + theme["Navigation Border"] + "; } #doc, #threads, .board > .thread { background: " + theme["Thread Wrapper Background"] + "; border: 1px solid " + theme["Thread Wrapper Border"] + "; } #boardNavDesktopFoot, #mascot_hide, #menu, #selectrice, #themeConf, #thread-watcher, #thread-watcher:hover, .announcements-slideout #globalMessage, .dialog, .post-form-style-float #qr, .post-form-decorations #qr, .submenu { background: " + theme["Dialog Background"] + "; border: 1px solid " + theme["Dialog Border"] + "; } #qp.dialog { border: none; } .watch-thread-link { background-image: url(\"data:image/svg+xml,\"); } .deleteform::before, .deleteform, #qr .warning { background: " + theme["Input Background"] + "; border-color: " + theme["Input Border"] + "; } .disabledwarning, .warning { color: " + theme["Warnings"] + "; } #charCount { color: " + (Style.lightTheme ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.7)") + "; } .postNum a { color: " + theme["Post Numbers"] + "; } .subject { color: " + theme["Subjects"] + " !important; } .dateTime, .post-ago { color: " + theme["Timestamps"] + " !important; } #fs_status a, #header-bar .shortcut > span, #updater #update-status:not(.new)::after, #showQR, .abbr, .boxbar, .boxcontent, .deleteform::before, .pages strong, .pln, .reply, .reply.highlight, .summary, body, button, span[style=\"left: 5px; position: absolute;\"] a, input, textarea { color: " + theme["Text"] + "; } #exlinks-options-content > table, #appchanx-settings fieldset, #selectrice { border-bottom: 1px solid " + theme["Reply Border"] + "; box-shadow: inset " + theme["Shadow Color"] + " 0 0 5px; } .quote + .spoiler:hover, .quote { color: " + theme["Greentext"] + "; } .forwardlink { border-bottom: 1px dashed " + theme["Backlinks"] + "; } .container::before { color: " + theme["Timestamps"] + "; } .quote-shadows #menu, .quote-shadows #post-preview, .quote-shadows #qp .opContainer, .quote-shadows #qp .replyContainer, .quote-shadows .submenu { box-shadow: 5px 5px 5px " + theme['Shadow Color'] + "; } .rice { background: " + theme["Checkbox Background"] + "; border: 1px solid " + theme["Checkbox Border"] + "; } .selectrice::before { border-left: 1px solid " + theme["Input Border"] + "; } .selectrice::after { border-top: .45em solid " + theme["Inputs"] + "; } .bd { background: " + theme["Buttons Background"] + "; border: 1px solid " + theme["Buttons Border"] + "; } .pages a, #header-bar a { color: " + theme["Navigation Links"] + "; } input[type=checkbox]:checked + .rice::after { border-color: " + theme["Inputs"] + "; } #addReply, #dump, .button, .entry, .replylink, a { color: " + theme["Links"] + "; } .backlink { color: " + theme["Backlinks"] + "; } .qiQuote, .quotelink { color: " + theme["Quotelinks"] + "; } #addReply:hover, #dump:hover, .entry:hover, .replylink:hover, .qiQuote:hover, .quotelink:hover, a .name:hover, a .postertrip:hover, a:hover { color: " + theme["Hovered Links"] + "; } #header-bar a:hover, #boardTitle a:hover { color: " + theme["Hovered Navigation Links"] + "; } #boardTitle { color: " + theme["Board Title"] + "; } .name, .post-author { color: " + theme["Names"] + " !important; } .post-tripcode, .postertrip, .trip { color: " + theme["Tripcodes"] + " !important; } a .postertrip, a .name { color: " + theme["Emails"] + "; } .post.reply.qphl, .post.op.qphl { border-color: " + theme["Backlinked Reply Outline"] + "; background: " + theme["Highlighted Reply Background"] + "; } .quote-shadows .inline .post { box-shadow: 5px 5px 5px " + theme['Shadow Color'] + "; } .placeholder, #qr input::placeholder, #qr textarea::placeholder { color: " + (Style.lightTheme ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.2)") + " !important; } #qr input:placeholder, #qr textarea:placeholder, .placeholder { color: " + (Style.lightTheme ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.2)") + " !important; } #appchanx-settings fieldset, .boxcontent dd, .selectrice ul { border-color: " + (Style.lightTheme ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)") + "; } #appchanx-settings li, #selectrice li:not(:first-of-type) { border-top: 1px solid " + (Style.lightTheme ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.025)") + "; } .a-icon, #shortcuts .fa { " + (!Style.lightTheme ? "-webkit-filter: url('#icons-filter');" : "") + " } .alternate-post-colors #threads > .thread:nth-of-type(2n+1), .alternate-post-colors .replyContainer:nth-of-type(2n+1) .post { background-image: linear-gradient(" + (replybg ? "rgba(" + (replybg.shiftRGB(-4, false)) + ",0.8), rgba(" + (replybg.shiftRGB(-4, false)) + ",0.8)" : Style.lightTheme ? "rgba(0,0,0,0.05), rgba(0,0,0,0.05)" : "rgba(255,255,255,0.02), rgba(255,255,255,0.02)") + "); } .color-reply-headings .boxbar, .color-reply-headings .postInfo { background: " + (replybg ? "rgba(" + (replybg.shiftRGB(-12, false)) + ",0.8)" : "rgba(0,0,0,0.1)") + "; border-bottom: 1px solid " + theme["Reply Border"] + " } .color-file-info .file { background: " + (replybg ? "rgba(" + (replybg.shiftRGB(-8, false)) + ",0.8)" : "rgba(0,0,0,0.1)") + "; border-bottom: 1px solid " + theme["Reply Border"] + " border-top: 1px solid " + theme["Reply Border"] + " } .color-reply.headings.color-file-info { border-top: none; } .op-background .op.post { background: " + theme["Reply Background"] + "; border: 1px solid " + theme["Reply Border"] + "; } .op-background .op.post:target .op-background .op.post.highlight { background: " + theme["Highlighted Reply Background"] + "; border: 1px solid " + theme["Highlighted Reply Border"] + "; } .fourchan-banner-at-sidebar-top.icon-orientation-vertical body::after { background: " + backgroundC + "; } .fourchan-banner-at-sidebar-top.icon-orientation-vertical.fourchan-ss-sidebar body::after, .fourchan-banner-at-sidebar-top.fourchan-ss-sidebar body::before { background: rgba(" + ((background = new Style.color(Style.colorToHex(theme["Reply Background"]))) ? background.shiftRGB(-18) : void 0) + ", 0.8); } .fourchan-ss-sidebar.sidebar-location-right body::before { border-left: 2px solid " + backgroundC + "; box-shadow: inset 1px 0 0 " + theme["Reply Border"] + ", -1px 0 0 " + theme["Reply Border"] + "; } .fourchan-ss-sidebar.sidebar-location-left body::before { border-right: 2px solid " + backgroundC + "; box-shadow: 1px 0 0 " + theme["Reply Border"] + ", inset -1px 0 0 " + theme["Reply Border"] + "; } .sage-highlighting-text.sage-highlight-position-before a.useremail[href*=\"sage\"]:last-of-type::before, .sage-highlighting-text.sage-highlight-position-before a.useremail[href*=\"Sage\"]:last-of-type::before, .sage-highlighting-text.sage-highlight-position-before a.useremail[href*=\"SAGE\"]:last-of-type::before, .sage-highlighting-text.sage-highlight-position-after a.useremail[href*=\"sage\"]:last-of-type::after, .sage-highlighting-text.sage-highlight-position-after a.useremail[href*=\"Sage\"]:last-of-type::after, .sage-highlighting-text.sage-highlight-position-after a.useremail[href*=\"SAGE\"]:last-of-type::after { content: \" (sage) \"; color: " + theme["Sage"] + "; } .quote-shadows #qr { box-shadow: 5px 5px 5px " + theme['Shadow Color'] + "; } " + (theme["Custom CSS"].replace(/\s+/g, ' ').trim())) + ("" + (Style.lightTheme ? " .prettyprint { background-color: #e7e7e7; border: 1px solid #dcdcdc; } .com { color: #dd0000; } .str, .atv { color: #7fa61b; } .pun { color: #61663a; } .tag { color: #117743; } .kwd { color: #5a6F9e; } .typ, .atn { color: #9474bd; } .lit { color: #368c72; } " : " .prettyprint { background-color: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,0.5); } .tag { color: #96562c; } .pun { color: #5b6f2a; } .com { color: #a34443; } .str, .atv { color: #8ba446; } .kwd { color: #987d3e; } .typ, .atn { color: #897399; } .lit { color: #558773; } "));
+ return (".hide_thread_button span > span, .hide_reply_button span > span { background-color: " + theme["Links"] + "; } #mascot_hide label { border-bottom: 1px solid " + theme["Reply Border"] + "; } #content .thumb { box-shadow: 0 0 5px " + theme["Reply Border"] + "; } .export-button, .mascotname, #mascot-options { background: " + theme["Dialog Background"] + "; border: 1px solid " + theme["Buttons Border"] + "; } .highlight-you .opContainer.quotesYou, .highlight-own .opContainer.yourPost, .opContainer.filter-highlight { box-shadow: inset 5px 0 " + theme["Backlinked Reply Outline"] + "; } .highlight-you .quotesYou > .reply, .highlight-own .yourPost > .reply, .filter-highlight > .reply { box-shadow: -5px 0 " + theme["Backlinked Reply Outline"] + "; } hr { border-bottom: 1px solid " + theme["Reply Border"] + "; } hr#unread-line { border-bottom: 1px solid " + theme["Reply Background"] + "; visibility: visible; } .threadContainer { border-color: " + theme["Reply Border"] + " !important; } html { background: " + (backgroundC || '') + "; background-image: " + (theme["Background Image"] || '') + "; background-repeat: " + (theme["Background Repeat"] || '') + "; background-attachment: " + (theme["Background Attachment"] || '') + "; background-position: " + (theme["Background Position"] || '') + "; } .panel, .section-container, #exlinks-options-content, #themecontent { background: " + backgroundC + "; border: 1px solid " + theme["Reply Border"] + "; } .sections-list > a.tab-selected { background: " + backgroundC + "; border-color: " + theme["Reply Border"] + "; } .captcha-img img { -webkit-filter: url('#captcha-filter'); } .silhouettize-mascots #mascot img, .silhouette img { -webkit-filter: url('#mascot-filter'); } .grayscale-mascots #mascot { -webkit-filter: url('#grayscale'); } #boardTitle { text-shadow: 1px 1px " + backgroundC + ", -1px -1px " + backgroundC + ", 1px -1px " + backgroundC + ", -1px 1px " + backgroundC + "; } .sidebar-glow #boardTitle { text-shadow: 1px 1px 1px " + backgroundC + ", -1px -1px 1px " + backgroundC + ", 1px -1px 1px " + backgroundC + ", -1px 1px 1px " + backgroundC + ", 0 2px 4px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.6); } #exlinks-options, #appchanx-settings, #qrtab, input[type=\"submit\"], input[value=\"Report\"], span[style=\"left: 5px; position: absolute;\"] a { background: " + theme["Buttons Background"] + "; border: 1px solid " + theme["Buttons Border"] + "; } .enabled .mascotcontainer { background: " + theme["Buttons Background"] + "; border-color: " + theme["Buttons Border"] + "; } #dump, #qr-filename-container, #appchanx-settings input, .captcha-img, .dump #dump, .qr-preview, .selectrice, button, input, textarea { background: " + theme["Input Background"] + "; border: 1px solid " + theme["Input Border"] + "; } .has-file #qr-extras-container { background: " + theme["Input Background"] + "; } #dump:hover, #qr-filename-container:hover, .selectrice:hover, #selectrice li:hover, #selectrice li:nth-of-type(2n+1):hover, input:hover, textarea:hover { background: " + theme["Hovered Input Background"] + "; border-color: " + theme["Hovered Input Border"] + "; } .has-file #qr-filename-container:hover #qr-extras-container { background: " + theme["Hovered Input Background"] + "; } #dump:active, #dump:focus, #selectrice li:focus, .selectrice:focus, #qr-filename-container:active, #qr-filename-container:focus, input:focus, textarea:focus, textarea.field:focus { background: " + theme["Focused Input Background"] + "; border-color: " + theme["Focused Input Border"] + "; color: " + theme["Inputs"] + "; } .has-file #qr-filename-container:active #qr-extras-container, .has-file #qr-filename-container:focus #qr-extras-container { background: " + theme["Focused Input Background"] + "; } #ft, #mouseover, #post-preview, #qp .post, #threads > .thread, #xupdater, .box-outer, .reply.post { border-width: 1px; border-style: solid; border-color: " + theme["Reply Border"] + "; background: " + theme["Reply Background"] + "; } .exblock.reply, .reply.post.highlight, .reply.post:target { background: " + theme["Highlighted Reply Background"] + "; border: 1px solid " + theme["Highlighted Reply Border"] + "; } #header-bar, .pagelist { background: " + theme["Navigation Background"] + "; border-color: " + theme["Navigation Border"] + "; } #doc, #threads, .board > .thread { background: " + theme["Thread Wrapper Background"] + "; border: 1px solid " + theme["Thread Wrapper Border"] + "; } #boardNavDesktopFoot, #mascot_hide, #menu, #selectrice, #themeConf, #thread-watcher, #thread-watcher:hover, .announcements-slideout #globalMessage, .dialog, .post-form-style-float #qr, .post-form-decorations #qr, .submenu { background: " + theme["Dialog Background"] + "; border: 1px solid " + theme["Dialog Border"] + "; } #qp.dialog { border: none; } .watch-thread-link { background-image: url(\"data:image/svg+xml,\"); } .deleteform::before, .deleteform, #qr .warning { background: " + theme["Input Background"] + "; border-color: " + theme["Input Border"] + "; } .disabledwarning, .warning { color: " + theme["Warnings"] + "; } #charCount { color: " + (Style.lightTheme ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.7)") + "; } .postNum a { color: " + theme["Post Numbers"] + "; } .subject { color: " + theme["Subjects"] + " !important; } .dateTime, .post-ago { color: " + theme["Timestamps"] + " !important; } #fs_status a, #header-bar .shortcut > span, #updater #update-status:not(.new)::after, #showQR, .abbr, .boxbar, .boxcontent, .deleteform::before, .pages strong, .pln, .reply, .reply.highlight, .summary, body, button, span[style=\"left: 5px; position: absolute;\"] a, input, textarea { color: " + theme["Text"] + "; } #exlinks-options-content > table, #appchanx-settings fieldset, #selectrice { border-bottom: 1px solid " + theme["Reply Border"] + "; box-shadow: inset " + theme["Shadow Color"] + " 0 0 5px; } .quote + .spoiler:hover, .quote { color: " + theme["Greentext"] + "; } .forwardlink { border-bottom: 1px dashed " + theme["Backlinks"] + "; } .container::before { color: " + theme["Timestamps"] + "; } .quote-shadows #menu, .quote-shadows #post-preview, .quote-shadows #qp .opContainer, .quote-shadows #qp .replyContainer, .quote-shadows .submenu { box-shadow: 5px 5px 5px " + theme['Shadow Color'] + "; } .rice { background: " + theme["Checkbox Background"] + "; border: 1px solid " + theme["Checkbox Border"] + "; } .selectrice::before { border-left: 1px solid " + theme["Input Border"] + "; } .selectrice::after { border-top: .45em solid " + theme["Inputs"] + "; } .bd { background: " + theme["Buttons Background"] + "; border: 1px solid " + theme["Buttons Border"] + "; } .pages a, #header-bar a { color: " + theme["Navigation Links"] + "; } input[type=checkbox]:checked + .rice::after { border-color: " + theme["Inputs"] + "; } #addReply, #dump, .button, .entry, .replylink, a { color: " + theme["Links"] + "; } .backlink { color: " + theme["Backlinks"] + "; } .qiQuote, .quotelink { color: " + theme["Quotelinks"] + "; } #addReply:hover, #dump:hover, .entry:hover, .replylink:hover, .qiQuote:hover, .quotelink:hover, a .name:hover, a .postertrip:hover, a:hover { color: " + theme["Hovered Links"] + "; } #header-bar a:hover, #boardTitle a:hover { color: " + theme["Hovered Navigation Links"] + "; } #boardTitle { color: " + theme["Board Title"] + "; } .name, .post-author { color: " + theme["Names"] + " !important; } .post-tripcode, .postertrip, .trip { color: " + theme["Tripcodes"] + " !important; } a .postertrip, a .name { color: " + theme["Emails"] + "; } .post.reply.qphl, .post.op.qphl { border-color: " + theme["Backlinked Reply Outline"] + "; background: " + theme["Highlighted Reply Background"] + "; } .quote-shadows .inline .post { box-shadow: 5px 5px 5px " + theme['Shadow Color'] + "; } .placeholder, #qr input::placeholder, #qr textarea::placeholder { color: " + (Style.lightTheme ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.2)") + " !important; } #qr input:placeholder, #qr textarea:placeholder, .placeholder { color: " + (Style.lightTheme ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.2)") + " !important; } #appchanx-settings fieldset, .boxcontent dd, .selectrice ul { border-color: " + (Style.lightTheme ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)") + "; } #appchanx-settings li, #selectrice li:not(:first-of-type) { border-top: 1px solid " + (Style.lightTheme ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.025)") + "; } .a-icon, #shortcuts .fa { " + (!Style.lightTheme ? "-webkit-filter: url('#icons-filter');" : "") + " } .alternate-post-colors #threads > .thread:nth-of-type(2n+1), .alternate-post-colors .replyContainer:nth-of-type(2n+1) .post { background-image: linear-gradient(" + (replybg ? "rgba(" + (replybg.shiftRGB(-4, false)) + ",0.8), rgba(" + (replybg.shiftRGB(-4, false)) + ",0.8)" : Style.lightTheme ? "rgba(0,0,0,0.05), rgba(0,0,0,0.05)" : "rgba(255,255,255,0.02), rgba(255,255,255,0.02)") + "); } .color-reply-headings .boxbar, .color-reply-headings .postInfo { background: " + (replybg ? "rgba(" + (replybg.shiftRGB(-12, false)) + ",0.8)" : "rgba(0,0,0,0.1)") + "; border-bottom: 1px solid " + theme["Reply Border"] + " } .color-file-info .file { background: " + (replybg ? "rgba(" + (replybg.shiftRGB(-8, false)) + ",0.8)" : "rgba(0,0,0,0.1)") + "; border-bottom: 1px solid " + theme["Reply Border"] + " border-top: 1px solid " + theme["Reply Border"] + " } .color-reply.headings.color-file-info { border-top: none; } .op-background .op.post { background: " + theme["Reply Background"] + "; border: 1px solid " + theme["Reply Border"] + "; } .op-background .op.post:target .op-background .op.post.highlight { background: " + theme["Highlighted Reply Background"] + "; border: 1px solid " + theme["Highlighted Reply Border"] + "; } .fourchan-banner-at-sidebar-top.icon-orientation-vertical body::after { background: " + backgroundC + "; } .fourchan-banner-at-sidebar-top.icon-orientation-vertical.fourchan-ss-sidebar body::after, .fourchan-banner-at-sidebar-top.fourchan-ss-sidebar body::before { background: rgba(" + ((background = new Style.color(theme["Reply Background"])) ? background.shiftRGB(-18) : void 0) + ", 0.8); } .fourchan-ss-sidebar.sidebar-location-right body::before { border-left: 2px solid " + backgroundC + "; box-shadow: inset 1px 0 0 " + theme["Reply Border"] + ", -1px 0 0 " + theme["Reply Border"] + "; } .fourchan-ss-sidebar.sidebar-location-left body::before { border-right: 2px solid " + backgroundC + "; box-shadow: 1px 0 0 " + theme["Reply Border"] + ", inset -1px 0 0 " + theme["Reply Border"] + "; } .sage-highlighting-text.sage-highlight-position-before a.useremail[href*=\"sage\"]:last-of-type::before, .sage-highlighting-text.sage-highlight-position-before a.useremail[href*=\"Sage\"]:last-of-type::before, .sage-highlighting-text.sage-highlight-position-before a.useremail[href*=\"SAGE\"]:last-of-type::before, .sage-highlighting-text.sage-highlight-position-after a.useremail[href*=\"sage\"]:last-of-type::after, .sage-highlighting-text.sage-highlight-position-after a.useremail[href*=\"Sage\"]:last-of-type::after, .sage-highlighting-text.sage-highlight-position-after a.useremail[href*=\"SAGE\"]:last-of-type::after { content: \" (sage) \"; color: " + theme["Sage"] + "; } .quote-shadows #qr { box-shadow: 5px 5px 5px " + theme['Shadow Color'] + "; } " + (theme["Custom CSS"].replace(/\s+/g, ' ').trim())) + ("" + (Style.lightTheme ? " .prettyprint { background-color: #e7e7e7; border: 1px solid #dcdcdc; } .com { color: #dd0000; } .str, .atv { color: #7fa61b; } .pun { color: #61663a; } .tag { color: #117743; } .kwd { color: #5a6F9e; } .typ, .atn { color: #9474bd; } .lit { color: #368c72; } " : " .prettyprint { background-color: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,0.5); } .tag { color: #96562c; } .pun { color: #5b6f2a; } .com { color: #a34443; } .str, .atv { color: #8ba446; } .kwd { color: #987d3e; } .typ, .atn { color: #897399; } .lit { color: #558773; } "));
},
iconPositions: function() {
var el, exec, slideNav;
@@ -13329,45 +13329,89 @@
pageHeight = (_ref = $('.pagelist', d.body)) != null ? _ref.offsetHeight : void 0;
return Style.sheets.padding.textContent = ("body { padding-bottom: 15px; padding-top: 15px; } .fourchan-ss-navigation.fixed.top-header:not(.autohide) body::before { top: " + navHeight + "px; } .fourchan-ss-navigation.fixed.bottom-header:not(.autohide) body::before { bottom: " + navHeight + "px; } .top-header:not(.autohide) body { padding-top: " + (navHeight + 1) + "px; } .bottom-header:not(.autohide) body { padding-bottom: " + (navHeight + 1) + "px; } ") + (pageHeight ? ".fourchan-ss-navigation.index.pagination-sticky-top body::before, .fourchan-ss-navigation.index.pagination-top body::before { top: " + pageHeight + "px; } .fourchan-ss-navigation.index.pagination-sticky-bottom body::before, .fourchan-ss-navigation.index.pagination-bottom body::before { bottom: " + pageHeight + "px; } .index.pagination-sticky-top body, .index.pagination-top body { padding-top: " + (pageHeight + 1) + "px; } .index.pagination-sticky-bottom body, .index.pagination-bottom body { padding-bottom: " + (pageHeight + 1) + "px; }" : '');
},
- color: function(hex) {
- this.hex = "#" + hex;
- this.calc_rgb = function(hex) {
- hex = parseInt(hex, 16);
+ color: (function() {
+ var calc_rgb, colorToHex, isLight, minmax;
+
+ minmax = function(base) {
+ if (base < 0) {
+ return 0;
+ } else if (base > 255) {
+ return 255;
+ } else {
+ return base;
+ }
+ };
+
+ calc_rgb = function(value) {
+ var hex;
+ hex = parseInt(value, 16);
return [(hex >> 16) & 0xFF, (hex >> 8) & 0xFF, hex & 0xFF];
};
- this.private_rgb = this.calc_rgb(hex);
- this.rgb = this.private_rgb.join(",");
- this.isLight = function() {
- var rgb;
- rgb = this.private_rgb;
- return (rgb[0] + rgb[1] + rgb[2]) >= 400;
- };
- this.shiftRGB = function(shift, smart) {
- var minmax, rgb;
- minmax = function(base) {
- return Math.min(Math.max(base, 0), 255);
- };
- rgb = this.private_rgb.slice(0);
- shift = smart ? (this.isLight(rgb) ? -1 : 1) * Math.abs(shift) : shift;
- return [minmax(rgb[0] + shift), minmax(rgb[1] + shift), minmax(rgb[2] + shift)].join(",");
- };
- return this.hover = this.shiftRGB(16, true);
- },
- colorToHex: function(color) {
- var digits, hex;
- if (color.substr(0, 1) === '#') {
- return color.slice(1, color.length);
- }
- if (digits = color.match(/(.*?)rgba?\((\d+), ?(\d+), ?(\d+)(.*?)\)/)) {
- hex = ((parseInt(digits[2], 10) << 16) | (parseInt(digits[3], 10) << 8) | (parseInt(digits[4], 10))).toString(16);
- while (hex.length < 6) {
- hex = "0" + hex;
+
+ colorToHex = function(color) {
+ var b, digits, hex, r;
+ if (color.substr(0, 1) === '#') {
+ if (color.length !== 4) {
+ return color.slice(1);
+ } else {
+ r = color.substr(1, 1);
+ g = color.substr(2, 1);
+ b = color.substr(3, 1);
+ return [r, r, g, g, b, b].join("");
+ }
}
- return hex;
- } else {
- return false;
+ if (/[0-9a-f]{3}/i.test(color)) {
+ if (/[0-9a-f]{6}/i.test(color)) {
+ return color;
+ }
+ r = color.substr(0, 1);
+ g = color.substr(1, 1);
+ b = color.substr(2, 1);
+ return [r, r, g, g, b, b].join("");
+ }
+ if (digits = color.match(/(.*?)rgba?\((\d+), ?(\d+), ?(\d+)(.*?)\)/)) {
+ hex = ((parseInt(digits[2], 10) << 16) | (parseInt(digits[3], 10) << 8) | (parseInt(digits[4], 10))).toString(16);
+ while (hex.length < 6) {
+ hex = "0" + hex;
+ }
+ return hex;
+ } else {
+ return "000000";
+ }
+ };
+
+ isLight = function(rgb) {
+ return (rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114) > 125;
+ };
+
+ function _Class(value) {
+ this.value = value;
+ this.raw = colorToHex(value);
+ this.hex = "#" + this.raw;
+ this.private_rgb = calc_rgb(value);
+ this.isLight = isLight(this.private_rgb);
+ this.rgb = this.private_rgb.join(",");
+ this.hover = this.shiftRGB(16, true);
}
- }
+
+ _Class.prototype.shiftRGB = function(shift, smart) {
+ var color, rgb;
+ rgb = __slice.call(this.private_rgb);
+ shift = smart ? (this.isLight ? -1 : 1) * Math.abs(shift) : shift;
+ return ((function() {
+ var _i, _len, _results;
+ _results = [];
+ for (_i = 0, _len = rgb.length; _i < _len; _i++) {
+ color = rgb[_i];
+ _results.push(minmax(color + shift));
+ }
+ return _results;
+ })()).join(",");
+ };
+
+ return _Class;
+
+ })()
};
/*
@@ -13446,7 +13490,7 @@
input.className = "colorfield";
colorInput = $.el('input', {
className: 'color',
- value: "#" + (Style.colorToHex(input.value) || 'aaaaaa')
+ value: "#" + (new Style.color(input.value)).hex
});
JSColor.bind(colorInput);
$.after(input, colorInput);
@@ -13501,7 +13545,7 @@
return alert("Syntax error on " + this.name + ".");
}
if (this.className === "colorfield") {
- this.nextSibling.value = '#' + (Style.colorToHex(this.value) || 'aaaaaa');
+ this.nextSibling.value = (new Style.color(this.value)).hex;
this.nextSibling.color.importColor();
}
editTheme[this.name] = this.value;
diff --git a/src/General/css/theme.css b/src/General/css/theme.css
index b479c45cc..526854c73 100644
--- a/src/General/css/theme.css
+++ b/src/General/css/theme.css
@@ -383,7 +383,7 @@ a .name {
}
.fourchan-banner-at-sidebar-top.icon-orientation-vertical.fourchan-ss-sidebar body::after,
.fourchan-banner-at-sidebar-top.fourchan-ss-sidebar body::before {
- background: rgba(#{if background = new Style.color Style.colorToHex theme["Reply Background"] then background.shiftRGB -18}, 0.8);
+ background: rgba(#{if background = new Style.color theme["Reply Background"] then background.shiftRGB -18}, 0.8);
}
.fourchan-ss-sidebar.sidebar-location-right body::before {
border-left: 2px solid #{backgroundC};
diff --git a/src/Theming/Mascots.coffee b/src/Theming/Mascots.coffee
index caedc98de..5234fb6a0 100644
--- a/src/Theming/Mascots.coffee
+++ b/src/Theming/Mascots.coffee
@@ -50,7 +50,7 @@ MascotTools =
height: 100
ctx = el.getContext('2d')
ctx.font = "50px #{Conf['Font']}"
- ctx.fillStyle = "#" + Style.colorToHex (Themes[Conf['theme']] or Themes['Yotsuba B'])['Text']
+ ctx.fillStyle = (new Style.color (Themes[Conf['theme']] or Themes['Yotsuba B'])['Text']).hex
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText "Mascot 404", 124, 50
diff --git a/src/Theming/Style.coffee b/src/Theming/Style.coffee
index 8db201791..4473e9a19 100644
--- a/src/Theming/Style.coffee
+++ b/src/Theming/Style.coffee
@@ -110,7 +110,7 @@ Style =
colors = []
rgb = ['r', 'g', 'b']
for arg in arguments
- hex = Style.colorToHex(arg) or "ffffff"
+ hex = (new Style.color arg).raw
color = {}
i = 0
while val = rgb[i]
@@ -149,11 +149,11 @@ Style =
"""<%= grunt.file.read('src/General/css/dynamic.css').replace(/\s+/g, ' ').trim() %>"""
theme: (theme) ->
- bgColor = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"]) or 'aaaaaa')
- replybg = new Style.color Style.colorToHex theme["Reply Background"]
+ bgColor = new Style.color(backgroundC = theme["Background Color"])
+ replybg = new Style.color theme["Reply Background"]
replyRGB = "rgb(#{replybg.shiftRGB parseInt(Conf['Silhouette Contrast'], 10), true})"
- Style.lightTheme = bgColor.isLight()
+ Style.lightTheme = bgColor.isLight
svgs = [
['captcha-filter', "values='#{Style.filter Style.matrix theme["Text"], theme["Input Background"]} 0 0 0 1 0'"]
@@ -207,63 +207,66 @@ Style =
"""<%= grunt.file.read('src/General/css/padding.pages.css').replace(/\s+/g, ' ').trim() %>"""
else ''
- color: (hex) ->
- @hex = "#" + hex
+ color: class
+ minmax = (base) -> if base < 0 then 0 else if base > 255 then 255 else base
- @calc_rgb = (hex) ->
- hex = parseInt hex, 16
- [ # 0xRRGGBB to [R, G, B]
+ calc_rgb = (value) ->
+ hex = parseInt value, 16
+ return [ # 0xRRGGBB to [R, G, B]
(hex >> 16) & 0xFF
(hex >> 8) & 0xFF
hex & 0xFF
]
- @private_rgb = @calc_rgb(hex)
+ colorToHex = (color) ->
+ if color.substr(0, 1) is '#'
+ if color.length isnt 4
+ return color[1..]
+ else
+ r = color.substr(1, 1)
+ g = color.substr(2, 1)
+ b = color.substr(3, 1)
+ return [r,r,g,g,b,b].join ""
- @rgb = @private_rgb.join ","
+ if /[0-9a-f]{3}/i.test color
+ return color if /[0-9a-f]{6}/i.test color
- @isLight = ->
- rgb = @private_rgb
- return (rgb[0] + rgb[1] + rgb[2]) >= 400
+ r = color.substr(0, 1)
+ g = color.substr(1, 1)
+ b = color.substr(2, 1)
+ return [r,r,g,g,b,b].join ""
- @shiftRGB = (shift, smart) ->
- minmax = (base) ->
- Math.min Math.max(base, 0), 255
- rgb = @private_rgb.slice 0
+ if digits = color.match /(.*?)rgba?\((\d+), ?(\d+), ?(\d+)(.*?)\)/
+ # [R, G, B] to 0xRRGGBB
+ hex = (
+ (parseInt(digits[2], 10) << 16) |
+ (parseInt(digits[3], 10) << 8) |
+ (parseInt(digits[4], 10))
+ ).toString 16
+
+ while hex.length < 6
+ hex = "0#{hex}"
+ return hex
+
+ else
+ "000000"
+
+ isLight = (rgb) ->
+ (rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114) > 125
+
+ constructor: (@value) ->
+ @raw = colorToHex value
+ @hex = "#" + @raw
+ @private_rgb = calc_rgb value
+ @isLight = isLight @private_rgb
+ @rgb = @private_rgb.join ","
+ @hover = @shiftRGB 16, true
+
+ shiftRGB: (shift, smart) ->
+ rgb = [@private_rgb...]
shift = if smart
- (
- if @isLight rgb
- -1
- else
- 1
- ) * Math.abs shift
+ (if @isLight then -1 else 1) * Math.abs shift
else
shift
- return [
- minmax rgb[0] + shift
- minmax rgb[1] + shift
- minmax rgb[2] + shift
- ].join ","
-
- @hover = @shiftRGB 16, true
-
- colorToHex: (color) ->
- if color.substr(0, 1) is '#'
- return color.slice 1, color.length
-
- if digits = color.match /(.*?)rgba?\((\d+), ?(\d+), ?(\d+)(.*?)\)/
- # [R, G, B] to 0xRRGGBB
- hex = (
- (parseInt(digits[2], 10) << 16) |
- (parseInt(digits[3], 10) << 8) |
- (parseInt(digits[4], 10))
- ).toString 16
-
- while hex.length < 6
- hex = "0#{hex}"
-
- hex
-
- else
- false
\ No newline at end of file
+ return (minmax color + shift for color in rgb).join ","
\ No newline at end of file
diff --git a/src/Theming/Themes.coffee b/src/Theming/Themes.coffee
index 224a3a8ab..8f98f4203 100644
--- a/src/Theming/Themes.coffee
+++ b/src/Theming/Themes.coffee
@@ -140,7 +140,7 @@ ThemeTools =
colorInput = $.el 'input',
className: 'color'
- value: "##{Style.colorToHex(input.value) or 'aaaaaa'}"
+ value: "##{(new Style.color input.value).hex}"
JSColor.bind colorInput
@@ -190,7 +190,7 @@ ThemeTools =
return alert "Syntax error on #{@name}."
if @className is "colorfield"
- @nextSibling.value = '#' + (Style.colorToHex(@value) or 'aaaaaa')
+ @nextSibling.value = (new Style.color @value).hex
@nextSibling.color.importColor()
editTheme[@name] = @value