User:98DOUBLE7/common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
// ==UserScript==
// @name Baka-Tsuki Enhancements
// @namespace https://greasyfork.org/users/7517
// @description Formats pages for comfort reading.
// @version 1.1.2
// @author akarin
// @include /https?:\/\/(www\.)?baka-tsuki\.org\/project\/index.php\?/
// @require http://code.jquery.com/jquery-latest.min.js
// @grant none
// ==/UserScript==
(function($) {
var bte = {
transition: 200,
replaceThumbs: true,
replaceLinks: true,
content: {
style: null,
settings: null
},
styles: {
customCSS: '',
width: '',
backgroundColor: '',
contentColor: '',
textColor: '',
fontFamily: '',
fontSize: '',
linkColor: '',
linkHoverColor: ''
}
};
bte.load = function() {
bte.replaceThumbs = loadValue('replaceThumbs', true);
bte.replaceLinks = loadValue('replaceLinks', true);
bte.styles.customCSS = loadValue('styles.customCSS', '');
bte.styles.width = loadValue('styles.width', '720px');
bte.styles.backgroundColor = loadValue('styles.backgroundColor', '#fffaea');
bte.styles.contentColor = loadValue('styles.contentColor', '#eae5d5');
bte.styles.textColor = loadValue('styles.textColor', '#333020');
bte.styles.fontFamily = loadValue('styles.fontFamily', '"Gentium Plus", serif');
bte.styles.fontSize = loadValue('styles.fontSize', '13pt');
bte.styles.linkColor = loadValue('styles.linkColor', '#1969cb');
bte.styles.linkHoverColor = loadValue('styles.linkHoverColor', '#2d7de0');
};
bte.save = function() {
saveValue('replaceThumbs', bte.replaceThumbs);
saveValue('replaceLinks', bte.replaceLinks);
saveValue('styles.customCSS', bte.styles.customCSS);
saveValue('styles.width', bte.styles.width);
saveValue('styles.backgroundColor', bte.styles.backgroundColor);
saveValue('styles.contentColor', bte.styles.contentColor);
saveValue('styles.textColor', bte.styles.textColor);
saveValue('styles.fontFamily', bte.styles.fontFamily);
saveValue('styles.fontSize', bte.styles.fontSize);
saveValue('styles.linkColor', bte.styles.linkColor);
saveValue('styles.linkHoverColor', bte.styles.linkHoverColor);
};
bte.clear = function() {
localStorage.clear();
};
bte.main = function() {
if (document.URL.match(/\/index\.php\?(.*)action=render/)) {
bte.render();
}
else {
bte.prepare();
}
};
bte.prepare = function() {
var ul = $('#right-navigation div.vectorTabs ul');
if (ul.length > 0) {
var url = document.URL.replace('title=', 'action=render&title=');
$('<li id="bte-plus"><span><a href="' + url + '">Render</a></span></li>').prependTo(ul);
}
};
bte.render = function() {
$('*').removeAttr('style');
bte.load();
bte.restyle();
$('body').html('<div id="bte-content">' + $('body').html() + '</div>');
if (bte.replaceThumbs) {
$('img[src*="/thumb/"]').each(function() {
var src = $(this).prop('src').replace(/\/thumb\//, '/').replace(/\/(?!.*\/).*$/, '');
$(this).prop('src', src);
});
}
if (bte.replaceLinks) {
$('a[href*="title="]:not([href*="title=File:"])').each(function() {
var href = $(this).prop('href');
if (href.match(/https?:\/\/(www\.)?baka-tsuki\.org\/project\/index.php\?(.*)title=/)) {
$(this).prop('href', href.replace('title=', 'action=render&title='));
}
});
}
var returnUrl = document.URL.replace('action=render&', '').replace(/[&\?]?action=render$/, '');
var toolbar = $([
'<div id="bte-toolbar">',
'<div id="bte-left-navigation"><ul>',
'<li id="bte-btn-return">',
'<a href="' + returnUrl + '">Return</a>',
'</li>',
'</ul></div>',
'<div id="bte-right-navigation"><ul>',
'<li id="bte-btn-settings">',
'<a href="javascript:void(0);">Settings</a>',
'</li>',
'</ul></div>',
'</div>'].join('')).prependTo('body');
$('#bte-btn-settings a', toolbar).click(function() {
if (bte.content.settings.css('display') !== 'none') {
return;
}
bte.settings.load();
dimmer.show();
bte.content.settings.show(bte.transition);
});
var dimmer = $('<div id="bte-dimmer"></div>').hide().prependTo('body').click(function() {
$('.bte-hide').hide(bte.transition);
$(this).hide();
});
bte.content.settings = $([
'<div id="bte-settings" class="bte-hide">',
'<h2>Settings</h2>',
'<div id="bte-settings-options"><table width="100%" cellspacing="0" cellpadding="0" border="0">',
'<tr>',
'<td>Content width: </td>',
'<td><input id="bte-option-width" type="text" value=""></td>',
'</tr>',
'<tr>',
'<td>Background color: </td>',
'<td><input id="bte-option-bgcolor" type="text" value=""></td>',
'</tr>',
'<tr>',
'<td>Content background color: </td>',
'<td><input id="bte-option-contentcolor" type="text" value=""></td>',
'</tr>',
'<tr>',
'<td>Text color: </td>',
'<td><input id="bte-option-textcolor" type="text" value=""></td>',
'</tr>',
'<tr>',
'<td>Text font: </td>',
'<td><input id="bte-option-fontfamily" type="text" value=""></td>',
'</tr>',
'<tr>',
'<td>Text size: </td>',
'<td><input id="bte-option-fontsize" type="text" value=""></td>',
'</tr>',
'<tr>',
'<td>Link color: </td>',
'<td><input id="bte-option-linkcolor" type="text" value=""></td>',
'</tr>',
'<tr>',
'<td>Hover link color: </td>',
'<td><input id="bte-option-hoverlinkcolor" type="text" value=""></td>',
'</tr>',
'<tr>',
'<td>Custom CSS: </td>',
'<td><textarea id="bte-option-customcss" /></td>',
'</tr>',
'</table></div>',
'<div id="bte-settings-buttons">',
'<a id="bte-btn-settings-reset" class="bte-link-button" href="javascript:void(0);">Reset</a>',
'<a id="bte-btn-settings-cancel" class="bte-link-button" href="javascript:void(0);">Cancel</a>',
'<a id="bte-btn-settings-apply" class="bte-link-button" href="javascript:void(0);">Apply</a>',
'<a id="bte-btn-settings-save" class="bte-link-button" href="javascript:void(0);">Save</a>',
'</div>',
'</div>'].join('')).hide().insertBefore(toolbar);
$('a#bte-btn-settings-reset', bte.content.settings).click(function() {
if (true === confirm('Reset settings?')) {
bte.settings.reset();
dimmer.trigger('click');
}
});
$('a#bte-btn-settings-cancel', bte.content.settings).click(function() {
dimmer.trigger('click');
});
$('a#bte-btn-settings-apply', bte.content.settings).click(function() {
bte.settings.save();
});
$('a#bte-btn-settings-save', bte.content.settings).click(function() {
bte.settings.save();
dimmer.trigger('click');
});
};
bte.settings = {
load: function() {
$('#bte-option-customcss', bte.content.settings).val(bte.styles.customCSS);
$('#bte-option-width', bte.content.settings).val(bte.styles.width);
$('#bte-option-bgcolor', bte.content.settings).val(bte.styles.backgroundColor);
$('#bte-option-contentcolor', bte.content.settings).val(bte.styles.contentColor);
$('#bte-option-textcolor', bte.content.settings).val(bte.styles.textColor);
$('#bte-option-fontfamily', bte.content.settings).val(bte.styles.fontFamily);
$('#bte-option-fontsize', bte.content.settings).val(bte.styles.fontSize);
$('#bte-option-linkcolor', bte.content.settings).val(bte.styles.linkColor);
$('#bte-option-hoverlinkcolor', bte.content.settings).val(bte.styles.linkHoverColor);
},
save: function() {
bte.styles.customCSS = $('#bte-option-customcss', bte.content.settings).val();
bte.styles.width = $('#bte-option-width', bte.content.settings).val().checkInput();
bte.styles.backgroundColor = $('#bte-option-bgcolor', bte.content.settings).val().checkInput();
bte.styles.contentColor = $('#bte-option-contentcolor', bte.content.settings).val().checkInput();
bte.styles.textColor = $('#bte-option-textcolor', bte.content.settings).val().checkInput();
bte.styles.fontFamily = $('#bte-option-fontfamily', bte.content.settings).val().checkInput();
bte.styles.fontSize = $('#bte-option-fontsize', bte.content.settings).val().checkInput();
bte.styles.linkColor = $('#bte-option-linkcolor', bte.content.settings).val().checkInput();
bte.styles.linkHoverColor = $('#bte-option-hoverlinkcolor', bte.content.settings).val().checkInput();
bte.save();
bte.restyle();
},
reset: function() {
bte.clear();
bte.load();
bte.restyle();
}
};
bte.restyle = function() {
if (bte.content.style !== null) {
bte.content.style.remove();
}
bte.content.style = $('<style type="text/css" />').html([
// Main
'body { ',
'background: ' + bte.styles.contentColor + '; ',
'color: ' + bte.styles.textColor + '; ',
'font-family: ' + bte.styles.fontFamily + '; ',
'font-size: ' + bte.styles.fontSize + '; ',
'margin: 0; padding: 0; font-weight: normal; line-height: 1.5em; }',
'#bte-content { ',
'width: ' + bte.styles.width + '; ',
'background: ' + bte.styles.backgroundColor + '; ',
'max-width: 95%; margin: 0 auto; padding: 2em; overflow-x: hidden; box-shadow: 0 0 30px rgba(65,65,65,0.2); }',
'a, a:visited { ',
'color: ' + bte.styles.linkColor + '; ',
'text-decoration: none; }',
'a:hover { ',
'color: ' + bte.styles.linkHoverColor + '; ',
'text-decoration: underline; }',
'img { display: block; width: auto; height: auto; max-width: 100%; background: white; padding: 3px; border: 1px solid #e0dee0; border-radius: 3px; box-sizing: border-box; box-shadow: 0 0 1px rgba(65,65,65,0.5); }',
'h1, h2, h3, h4 { text-align: center; font-family: "PT Sans", sans-serif; margin: 0.6em 0 1em; }',
'.thumbcaption { text-align: center; font-style: italic; font-size: 0.9em; }',
// BTE
'a.bte-link-button { display: inline-block; margin: 2px 5px; padding: 2px 8px 5px; background: #364657; color: #f8f8f8; text-decoration: none; font-weight: bold; font-size: 1em; line-height: 1.3em; border: none; border-radius: 3px; transition: 0.2s; }',
'a.bte-link-button:hover { background: #556f89; text-decoration: none; }',
// Toolbar
'#bte-toolbar { position: fixed; width: 100%; height: 40px; left: 0; top: -32px; background: #2a3744; color: white; border: none; box-shadow: 0 1px 1px rgba(65,65,65,0.2); opacity: 0.3; transition: 0.4s; }',
'#bte-toolbar > * { opacity: 0; transition: 0.2s; }',
'#bte-toolbar:hover, #bte-dimmer:not([style*="display: none;"]) ~ #bte-toolbar { top: 0; opacity: 1; transition: 0.1s; }',
'#bte-toolbar:hover > *, #bte-dimmer:not([style*="display: none;"]) ~ #bte-toolbar > * { opacity: 1; }',
'#bte-toolbar > [id$="-navigation"] { display: inline; margin: 0 10px; padding: 5px; font-size: 13pt; }',
'#bte-toolbar > [id$="-navigation"] ul { float: left; height: 100%; list-style-type: none; list-style-image: none; margin: 0; padding: 0; }',
'#bte-toolbar > [id$="-navigation"] ul > li { display: block; float: left; height: 100%; margin: 0; padding: 0; white-space: nowrap; }',
'#bte-toolbar > [id$="-navigation"] ul > li a, #bte-toolbar > [id$="-navigation"] ul > li a:visited { color: white; font-size: 13pt; }',
'#bte-toolbar #bte-left-navigation { float: left; }',
'#bte-toolbar #bte-right-navigation { float: right; }',
// Dimmer
'#bte-dimmer { display: block; position: fixed; width: 100%; height: 100%; left: 0; top: 0; margin: 0; padding: 0; background: rgba(42,55,68,0.6); overflow: hidden; }',
// Settings
'#bte-settings { position: fixed; width: 600px; height: auto; max-height: 80%; left: 50%; top: 10%; margin-left: -300px; padding: 3px; background: white; text-align: center; border: 8px solid #2a3744; border-radius: 3px; box-shadow: 0 0 1px rgba(65,65,65,0.2); }',
'#bte-settings h2 { color: #2a3744; margin: 0.6em 0 0.2em; cursor: default; }',
'#bte-settings h2:after { content: ""; display: block; relative: absolute; width: 98%; height: 8px; margin: 0.6em auto 0; border-top: 1px solid #eee; background: center bottom no-repeat radial-gradient(#f6f6f6, #fff 70%); background-size: 100% 16px; }',
'#bte-settings #bte-settings-options { width: 100%; margin: 0; padding: 10px; color: #2a3744; box-sizing: padding-box; overflow: auto; }',
'#bte-settings #bte-settings-options td { padding: 5px 8px; cursor: default; vertical-align: top; }',
'#bte-settings #bte-settings-options td:first-of-type { width: 250px; }',
'#bte-settings #bte-settings-options input, #bte-settings #bte-settings-options textarea { width: 300px; max-width: 300px; padding: 5px; outlint: none; border: 1px solid rgba(45,52,57,0.3); border-radius: 2px; box-shadow: 0 0 1px rgba(65,65,65,0.2); }',
'#bte-settings #bte-settings-options input:focus { outline: 0; border-color: rgba(45,52,57,0.6); }',
'#bte-settings #bte-settings-buttons { width: 100%; height: 40px; margin: 5px 5px 0; padding: 0; box-sizing: padding-box; text-align: center; }',
// Hidden
'div.magnify, span.mw-editsection { display: none; }',
bte.styles.customCSS
].join('')).appendTo('head');
};
String.prototype.checkInput = function() {
return this.replace(/;[\s\S]*$/, '').trim();
};
function loadValue(key, value) {
try {
value = JSON.parse(localStorage.getItem(key)) || value;
} catch (e) {}
return value;
}
function saveValue(key, value) {
localStorage.setItem(key, JSON.stringify(value));
}
bte.main();
})(jQuery);