User:JPxG/JWB-dark.css

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/** 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 */
}