/** JWB STYLESHEET: SELENIZED BLACK
*
* Selenized Black, 2021 Jan Warchoł
* https://github.com/jan-warchol/selenized/tree/master
* MIT License
*
* JWB stylesheeting, 2023 JPxG
* WTFPL IDGAF
*/
/** Stylesheet for the JWB script.
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License along
* with this program; if not, write to the Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, aBoston, MA 02110-1301, USA.
* http://www.gnu.org/copyleft/gpl.html
*
* See [[User:Joeytje50/JWB.js]] for more information.
*/
/* Apparently this is needed for the HTML5 tags in older browsers */
section, footer, aside, nav, main, article {display: block;}
/* Normalise body */
html, body {
height: 100%;
padding: 0;
margin: 0;
background: #181818;
color: #DEDEDE;
}
body:before, body:after {
content: normal !important;
}
/* Styling for the panels */
body {
background: none !important;
font: 16px "Times New Roman";
line-height: 20px;
margin: 0 4px;
}
a:link { color: #368AEB;}
a:hover { color: #4F9CFE;}
a:visited {color: #36619D; /* LCh 66% #368AEB (sel_b_blue) over #181818 */}
hr {
margin: 0.15em 0;
}
#resultWindow {
resize: vertical;
height: 300px;
min-height: 300px !important; /*important to prevent inline styles from resizing to smaller sizes*/
border: 1px solid #777777;
padding: 3px;
overflow: auto;
}
#resultWindow * {resize: none;}
#inputsWindow {
height: 360px;
padding-bottom: 30px;
border-bottom: 1px solid #777777;
}
#inputsBox {
height: 100%;
}
#tabs {
width: 300px;
height: 100%;
float: left;
padding-top: 5px;
position: relative;
}
#editBox {
height: 100%;
position: relative;
margin-left: 510px;
padding-top: 1px;
}
#articleBox {
width: 200px;
height: 100%;
float: left;
margin-right: 5px;
position: relative;
z-index: 25;
}
#editBoxArea {
position: absolute;
z-index: 30;
top: 20px;
right: 0;
color: #DEDEDE;
background-color: #252525;
}
textarea {
width: 100%;
min-width: 100% !important; /*important to prevent inline styles from resizing to smaller sizes*/
height: 100%;
min-height: 100% !important;
padding: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body.AutoWikiBrowser fieldset {
padding: 0 5px 5px;
line-height: inherit;
border: 1px solid #777777;
margin: 2px 0;
}
legend {
padding: 0 5px;
font-size: 100%;
}
button, .button {
background: #3B3B3B; /* Old browsers */
background: -moz-linear-gradient(#181818, #252525, #3B3B3B); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #181818), color-stop(50%, #252525), color-stop(100%, #3B3B3B)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#181818, #252525, #3B3B3B); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#181818, #252525, #3B3B3B); /* Opera 11.10+ */
background: -ms-linear-gradient(#181818, #252525, #3B3B3B); /* IE10+ */
background: linear-gradient(#181818, #252525, #3B3B3B); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#181818', endColorstr='#3B3B3B',GradientType=0 ); /* IE6-9 */
border: 1px solid #777777;
border-radius: 3px;
padding: 0 6px;
margin: 2px;
cursor: default;
color: #B9B9B9;
font: 13px/20px arial;
display: inline-block;
}
button:hover, .button:hover {
background: #DBB32D; /* Old browsers */
background: -moz-linear-gradient(#DBB32D, #EFC541, #DBB32D); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #DBB32D), color-stop(50%, #EFC541), color-stop(100%, #DBB32D)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#DBB32D, #EFC541, #DBB32D); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#DBB32D, #EFC541, #DBB32D); /* Opera 11.10+ */
background: -ms-linear-gradient(#DBB32D, #EFC541, #DBB32D); /* IE10+ */
background: linear-gradient(#DBB32D, #EFC541, #DBB32D); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EFC541', endColorstr='#DBB32D',GradientType=0 ); /* IE6-9 */
color: #181818;
}
button:active, .button:active {
background: #EFC541; /* Old browsers */
background: -moz-linear-gradient(#EFC541, #DBB32D, #EFC541); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EFC541), color-stop(50%, #DBB32D), color-stop(100%, #EFC541)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#EFC541, #DBB32D, #EFC541); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#EFC541, #DBB32D, #EFC541); /* Opera 11.10+ */
background: -ms-linear-gradient(#EFC541, #DBB32D, #EFC541); /* IE10+ */
background: linear-gradient(#EFC541, #DBB32D, #EFC541); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DBB32D', endColorstr='#EFC541',GradientType=0 ); /* IE6-9 */
color: #181818;
}
button[disabled], button[disabled]:hover, button[disabled]:active,
.button.disabled, .button.disabled:hover, .button.disabled:active {
background: #777777;
color: #181818;
border: 1px solid #B9B9B9;
opacity: 0.6;
}
.button input[type="file"] {
position: fixed;
top: -1000px;
}
#save:after {
content: " '" attr(value) "'";
font-style: italic;
}
#status {
border: 1px solid #777777;
background: white;
padding: 0 3px;
position: relative;
z-index: 20;
}
/* Interface */
#tabs .JWBtabc {
display: none;
height: 100%;
border: 1px solid #252525;
padding: 3px;
margin-top: -1px;
margin-bottom: -22px;
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
color: #B9B9B9;
}
#tabs .JWBtabc.active {
display: block;
}
.fullwidth {
width: 95%;
display: block;
}
.JWBtabc input[type="text"],
.JWBtabc input[type="number"],
.JWBpopup input[type="text"] {
border: 1px solid #252525;
border-radius: 5px;
box-shadow: 1px 1px 3px;
padding: 2px;
margin-bottom: 4px;
background: #3B3B3B;
color: #DEDEDE;
}
#replacesButton {
float: right;
margin-top: -25px;
}
#refreshRETF {
cursor: pointer;
}
#skipRETF {
margin-left: 2em;
margin-top: 0;
visibility: hidden; /* JS overrides this when RETF is enabled */
}
.tabholder {
position: relative;
}
.JWBtab.log {
position: absolute;
right: 0;
font-weight: bold;
}
[dir="rtl"] .JWBtab.log {
right:auto;
left:0;
}
.JWBtabc.log {
padding-bottom: 1.5em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.JWBtab {
padding: 0 3px;
border: 1px solid #252525;
border-radius: 3px 3px 0 0;
background: #181818;
cursor: pointer;
line-height: 20px;
display: inline-block;
}
.JWBtab:hover {background: #EFC541;}
.JWBtab:active {background: #252525;}
.JWBtab.active {
background: #3B3B3B;
border-bottom: 1px solid #3B3B3B;
}
.minorEdit {
position: absolute;
right: 8px;
z-index: 5;
}
.editSummary {
position: relative;
display: inline-block;
width: 266px; /* 260px of #summary, plus 1px border each side, plus 2px padding each side */
}
#summary {
display: inline-block;
width: 260px;
}
.viaJWB #summary {
width: 170px;
padding-right: 92px;
}
.viaJWB:after {
content: " (via JWB)";
font-size: 12px;
position: absolute;
right: 0;
bottom: 5px;
background: #B9B9B9;
color: #3B3B3B;
border-radius: 0 5px 5px 0;
padding-left: 3px;
width: 85px;
}
.editbutton {
padding: 10px;
margin: 2px;
font-size: 115%;
height: auto;
}
.divisor {
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid #B9B9B9;
}
#limits label {
display: block;
position: relative;
clear: right;
}
.timelimit-label::after {
content: "ms";
position: absolute;
bottom: 0;
right: 10px;
font-style: italic;
}
#limits input {
width: 100px;
margin-right: 5px;
float: right;
text-align: right;
box-sizing: border-box;
}
#timelimit {
padding-right: 25px;
}
#actionlog {
border-collapse: collapse;
margin-bottom: 25px;
}
#actionlog tr {
border: 1px #3B3B3B solid;
}
#actionlog td:last-child {
width: 85%;
}
/* Layout */
#stats {
padding-top: 3px;
}
.regexFlags,
#containFlags {
width: 30px;
}
.replaceText, .replaceWith {
width: 200px;
margin-right: 5px;
float: right;
}
#replacesPopup .replaceText, #replacesPopup .replaceWith {
width: 80%;
width: calc(100% - 100px);
}
#replacesPopup .replaces {
border-bottom: 2px dashed #252525;
margin-bottom: 5px;
}
.replaces > label, .replaces > .regexswitch {
clear: both;
}
#pagelistPopup fieldset > label {
display:block;
}
.listSMW {
display: none;
}
.hasSMW .listSMW {
display: block;
}
#smwquery {
height: 3em;
padding: 2px;
resize: vertical;
}
#watchPage {
width:150px;
}
b {
font-size: 85%;
font-weight: bold;
}
.regexswitch {
font-style:italic;
}
.re101 {
font-size: 70%;
vertical-align: super;
text-decoration: none;
border-bottom: 1px dotted #DEDEDE;
cursor: help;
}
#startstop {
float: right;
}
#startstop button {
margin: 2px;
}
#submitButton {font-weight:bold;color:#70B433;}
#skipButton, #skipPage {color: #ED4A46;}
#previewButton {color:#3FC5B7;}
#diffButton {color:#E67F43;}
#stopbutton {
color: #FF5E56;
border: 1px #FF5E56;
}
#stopbutton[disabled] { /* Perversely, this is the state it's in when it HAS been stopped, i.e. the script is stopped. */
color: #181818;
background-color: #ED4A46;
opacity: 100%;
}
#startbutton {
color: #83C746;
border: 1px #83C746;
}
#startbutton[disabled] { /* Perversely, this is the state it's in when it HAS been started, i.e. the script is active. */
color: #181818;
background-color: #83C746;
opacity: 100%;
border: 1px #70B433;
}
#deletePage {color: #FF5E56;}
#movePage {color: #70B433;}
#protectPage {color: #3FC5B7;}
#articleList {
white-space: pre;
background-color: #252525;
color: #DEDEDE;
}
#articleList[disabled]:first-line {
background-color: #777777;
color: #181818;
}
tr[data-line]:not(.lineheader) {cursor: pointer;}
#pagelistButton {font-weight: bold;}
#downloads {display: none;}
#settings [id]:after {
margin-left: 3px;
}
#saveAs:after {
content: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAMElEQVQY02NgQAX/GYgE5ClkRBNgxKWQkPH/WQgoZmRgYGBgIsaBLDjcw4DP4VgBAMy1CQeFLw4MAAAAAElFTkSuQmCC");
}
#saveToWiki:after {
content: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAIAQMAAAARA0f2AAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAB9JREFUeF4FwLERADAEAMAfXTKDRmFQFUcYPknRPNYBP0QFRpaso0EAAAAASUVORK5CYII=");
}
#download:after {
content: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKAQMAAABcy+b9AAAABlBMVEVwAAAAAACuRbQOAAAAAXRSTlMAQObYZgAAAB1JREFUeF5j4GCAotcNDB0NDPsaGOaAGQ0NDP8bAFrICG2BvdHlAAAAAElFTkSuQmCC");
}
#deleteSetup:after {
content: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABVJREFUeF5jOMbwjqGGwQKI3zEcAwAgNgSZRG9YDAAAAABJRU5ErkJggg==");
}
#importLabel:after {
content: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKAQMAAABcy+b9AAAABlBMVEVwAAAAAACuRbQOAAAAAXRSTlMAQObYZgAAAB1JREFUeF5j4GBgkGFgsGMAMV43MHTAUEMDw/8GAEkxB20iTmm8AAAAAElFTkSuQmCC");
}
#updateSetups:after {
content: url("data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJAQMAAAA1nf9tAAAABlBMVEVwAAAAAACuRbQOAAAAAXRSTlMAQObYZgAAABpJREFUeF5jkGFYxHCQ4SEDA0M7QzODK4MFACYrA+hkjEi+AAAAAElFTkSuQmCC");
}
/* Popup window */
#overlay {
z-index: 40;
cursor: pointer;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.3;
}
.JWBpopup {
position: fixed;
z-index: 50;
top: 15%;
left: 25%;
width: 50%;
height: 70%;
border: 2px solid black;
padding: 5px;
overflow: auto;
background: #252525;
}
#pagelistPopup form {
position: relative;
padding-right: 175px; /*same as #ns-filter width*/
}
fieldset[disabled] > :not(legend) {
opacity: 0.7;
}
select option[value=""] {
font-style: italic;
}
#ns-filter {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 175px;
text-align: center;
background: #252525;
color: #DEDEDE;
}
#ns-filter select {
height: 100%;
background: #252525;
color: #DEDEDE;
}
/* Added by JPxG, 2023-11-15 */
#namespacelist {
}
select#editProt, select#moveProt, select#uploadProt, select#loadSettings, select#watchPage, footer#status {
background-color: #252525;
color: #B9B9B9;
border: 1px #3B3B3B;
}
select#editProt {
background-color: #252525;
}
input[type=radio], input[type=checkbox] {
filter: invert(1); /* Stupid hack. */
}
input[type=radio]:checked, input[type=checkbox]:checked {
background-color: #70B433;
accent-color: #5A7F1D; /* This... INVERTS to #A580E2, which is Selenized Black b_violet. */
}
/* Format diffs -- this might be different for different skins, or naur... */
.diff-context {
border-color: #3B3B3B;
background-color: #252525;
color: #B9B9B9;
}
.diff-addedline {
border-color: #368AEB;
background-color: #3B3B3B;
color: #DEDEDE;
}
.diff-addedline .diffchange {
background-color: #324D79; /* 50% LCh blend of #368AEB (Selenized Black b_blue) with #181818 */
/* 50% LAB blend is #324D79, RGB is #275181 */
}
.diff-deletedline {
border-color: #DBB32D;
background-color: #3B3B3B;
color: #DEDEDE;
}
.diff-deletedline .diffchange {
background-color: #736028; /* 50% Lch blend of #DBB32D (Selenized Black b_yellow) with #181818 */
/* 50% LAB blend is #736028, RGB is #796522 */
}