User:NguoiDungKhongDinhDanh/JWB.css

/***************************************************************************
 * Stylesheet for the JWB script.
 *
 * @licence
 * 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, Boston, MA 02110-1301, USA.
 * http://www.gnu.org/copyleft/gpl.html
 * 
 * Original author: [[:wikipedia:User:Joeytje50]]
 *
 * For attribution: //en.wikipedia.org/wiki/User:Joeytje50/JWB.css
***************************************************************************/

/* 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: #FFFFFF;
}
body {
	overflow: auto;
}
body:before, body:after {
	content: normal !important;
}

::-webkit-scrollbar { /* Minimize scrollbar (but not removing it). */
	width: 1px;
	height: 1px;
}
::-webkit-scrollbar-thumb { /* I like black. */
	background: #000000;
}
::-webkit-scrollbar-track-piece {
	background: transparent;
}
/* Styling for the panels */

body {
	background: none !important;
	font-size: 13px;
	font-family: 'Roboto', 'Helvetica', 'Calibri', sans-serif;
	line-height: 20px;
	margin: 0 4px;
}
hr {
	margin: 0.15em 0;
	border: 0;
	height: 1px;
	background-color: #a2a9b1;
}
#resultWindow {
	resize: vertical;
	height: 270px; /* Formerly 300 (below too) but that doesn't fit my screen. */
	min-height: 270px !important; /* important to prevent inline styles from resizing to smaller sizes */
	border: 1px solid #000000;
	padding: 3px;
	overflow: auto;
}
#inputsWindow {
	height: 360px;
	padding-bottom: 30px;
	border-bottom: 1px solid #AAAAAA;
}
#inputsBox {
	height: 100%;
}
#articleBox {
	width: 200px;
	height: 100%;
	float: left;
	margin-right: 5px;
	position: relative;
	z-index: 25;
}
#tabs {
	width: 300px;
	height: 100%;
	float: left;
	padding-top: 5px;
	position: relative;
}
#editBox {
	height: 100%;
	position: relative;
	margin-left: 510px;
	padding-top: 1px;
}
#editBoxArea {
	position: absolute;
	z-index: 30;
	top: 20px;
	right: 0;
	resize: vertical; /* Resizing both will cause some problems... */
}

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;
	border: 1px solid #888888; /* Same color as tabs */
}
input[type="text"], input[type="number"], select {
	border-radius: 0 !important; /* No curves. */
}
input[type="checkbox"], input[type="radio"] {
	margin: 0 !important;
}
#articleList:focus, #editBoxArea:focus, #namespacelist:focus, #smwquery:focus, /* So as not to hide scroll bar. */
input[type="text"]:focus, input[type="number"]:focus, select:focus { /* I'm tired with :focus { outline-color: #3366cc }. */
	outline-style: solid;
	outline-color: #000000;
	outline-width: 1px;
}
body.AutoWikiBrowser fieldset {
	padding: 0 5px 5px;
	line-height: inherit;
	border: 1px solid #000000; /* Formerly 2F6FAB. */
	margin: 2px 0;
}
b {
	font-size: 85%;
	font-weight: bold;
}
fieldset.disabled {
	border: 1px solid #767676 !important;
}
legend {
	padding: 0 5px;
	font-size: 100%;
}
button, .button {
	background: #EEEEEE; /* Old browsers */
	background: -moz-linear-gradient(#EEEEEE, #CCCCCC, #DDDDDD); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEEEEE), color-stop(50%, #CCCCCC), color-stop(100%, #DDDDDD)); /* Chrome, Safari4+ */
	background: -webkit-linear-gradient(#EEEEEE, #CCCCCC, #DDDDDD); /* Chrome10+, Safari5.1+ */
	background: -o-linear-gradient(#EEEEEE, #CCCCCC, #DDDDDD); /* Opera 11.10+ */
	background: -ms-linear-gradient(#EEEEEE, #CCCCCC, #DDDDDD); /* IE10+ */
	background: linear-gradient(#EEEEEE, #CCCCCC, #DDDDDD); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#CCCCCC', GradientType=0); /* IE6-9 */
	border: 1px solid #999999;
	border-radius: 3px;
	padding: 0 6px;
	margin: 2px;
	cursor: default;
	color: #333333;
	font: 13px/20px arial;
	display: inline-block;
}
button:hover, .button:hover {
	background: #DDDDFF; /* Old browsers */
	background: -moz-linear-gradient(#EEEEEE, #CCCCFF, #DDDDFF); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEEEEE), color-stop(50%, #CCCCFF), color-stop(100%, #DDDDFF)); /* Chrome, Safari4+ */
	background: -webkit-linear-gradient(#EEEEEE, #CCCCFF, #DDDDFF); /* Chrome10+, Safari5.1+ */
	background: -o-linear-gradient(#EEEEEE, #CCCCFF, #DDDDFF); /* Opera 11.10+ */
	background: -ms-linear-gradient(#EEEEEE, #CCCCFF, #DDDDFF); /* IE10+ */
	background: linear-gradient(#EEEEEE, #CCCCFF, #DDDDFF); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEFF', endColorstr='#CCCCFF', GradientType=0); /* IE6-9 */
	color: #333333;
}
button:active, .button:active {
	background: #CCCCFF; /* Old browsers */
	background: -moz-linear-gradient(#CCCCFF, #DDDDFF, #EEEEEE); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CCCCFF), color-stop(50%, #DDDDFF), color-stop(100%, #EEEEEE)); /* Chrome, Safari4+ */
	background: -webkit-linear-gradient(#CCCCFF, #DDDDFF, #EEEEEE); /* Chrome10+, Safari5.1+ */
	background: -o-linear-gradient(#CCCCFF, #DDDDFF, #EEEEEE); /* Opera 11.10+ */
	background: -ms-linear-gradient(#CCCCFF, #DDDDFF, #EEEEEE); /* IE10+ */
	background: linear-gradient(#CCCCFF, #DDDDFF, #EEEEEE); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCFF', endColorstr='#EEEEFF', GradientType=0); /* IE6-9 */
	color: #333333;
}
button, button:hover, button:active,
.button, .button:hover, .button:active,
input[type="checkbox"], input[type="radio"] { /* , select, option */
	cursor: pointer;
}
input[type="checkbox"][disabled], input[type="radio"][disabled], input[type="file"][disabled] {
	cursor: not-allowed;
}
button[disabled], button[disabled]:hover, button[disabled]:active,
.button.disabled, .button.disabled:hover, .button.disabled:active {
	background: #EEEEEE;
	color: #000000;
	border: 1px solid #555555;
	opacity: 0.6;
	cursor: not-allowed;
}
.button input[type="file"] {
	position: fixed;
	top: -1000px;
}
.stickyButtons { /* For .clearLogButtons and #replacesButton. */
	position: -webkit-sticky;
	position: sticky;
}

#statusBar {
	border: 1px solid #000000;
	background: white;
	padding: 0 3px;
	position: relative;
	z-index: 20;
}
#status {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	overflow: hidden;
	white-space: nowrap;
}

/* Interface */

#tabs .JWBtabc {
	display: none;
	height: 100%;
	border: 1px solid #000000;
	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;
}
#tabs .JWBtabc.active {
	display: block;
}
.JWBtabc .fullwidth {
	width: 97%;
	display: block;
}
.JWBtabc input[type="text"],
.JWBtabc input[type="number"],
.JWBpopup input[type="text"] {
	border: 1px solid #BBBBBB;
	border-radius: 5px;
	/* box-shadow: 1px 1px 3px; */
	padding: 2px;
	margin-bottom: 4px;
}
.regexFlags, #containFlags {
	margin-left: 5px;
	margin-bottom: 0 !important;
	padding: 0 2px !important;
	width: 30px;
}
#replacesButton {
	float: right;
	margin-top: -25px;
}
#RETF {
	display: inline-flex;
	align-content: center;
}
#refreshRETF, #loadedRETF {
	cursor: pointer;
	align-self: center;
	margin-left: 5px;
}
#skipRETF {
	display: none; /* JS overrides this when RETF is enabled */
	margin-left: 2em;
	margin-top: 0;
}

.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 #000000;
	border-radius: 3px 3px 0 0;
	background: #FFFFFF;
	cursor: pointer;
	line-height: 20px;
	display: inline-block;
}
.JWBtab:hover {
	background: #DDDDDD;
}
.JWBtab:active {
	background: #BBBBBB;
}
.JWBtab.active {
	background: #BBBBEE;
	border-bottom: 1px solid #BBBBEE;
}

.minorEdit {
	position: absolute;
	right: 8px;
	z-index: 5;
}
.editSummary {
	position: relative;
	display: inline-block;
	width: 286px; /* 300px - 1px border each side - 3px padding each side - 3px input border/padding each side */
	/* Formerly 266px; 260px of #summary, plus 1px border each side, plus 2px padding each side */
}
#summary {
	display: inline-block;
	width: 100%;
}
/* 
.viaJWB #summary {
	width: 100%;
	padding-right: 92px; No .viaJWB:after, no padding-right
}
.viaJWB:after {
	content: " (via JWB)";
	font-size: 12px;
	position: absolute;
	right: 0;
	bottom: 5px;
	background: #CCCCCC;
	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;
	border-left: 1px solid #AAAAAA;
	padding-left: 5px;
}

#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;
	table-layout: fixed;
	word-wrap: break-word;
	width: 100%;
}
.clearLogButtons { /* These are sticky */
	padding: 0 3px !important;
}
.clearLogButtonYesNo { /* See .js line 629 */
	display: none;
}
#clearLogButton {
	display: block;
}
#actionlog tr {
	border: 1px #AAAAAA solid;
	font-size: 0.75em;
}
/* #actionlog td:last-child {
	width: 10%;
} */
#actionlog th {
	width: 10%;
}
.timeStamps {
	width: 15%;
	text-align: center;
	font-size: 0.75em;
}
.pageNames {
	width: 65%;
}
.extraInfo,
.reAddButtons {
	width: 10%;
	text-align: center;
}
.reAddButton {
	font-size: 0.75em;
	padding: 0 0;
	margin-right: 3px;
}

/* Layout */

#stats {
	padding-top: 3px;
}
fieldset > legend {
	cursor: pointer;
}
label[data-label="checkbox"], label[data-label="radio"] {
	display: inline-flex;
}
label[data-label="checkbox"] > input[type="checkbox"],
label[data-label="radio"] > input[type="radio"] {
	align-self: center;
}
.flexBaseline {
	align-self: baseline !important;
	margin-left: 3px;
}
.flexCenter {
	align-self: center;
}
[disabled], [class*="disabled"] {
	cursor: not-allowed !important;
}
/* For attribution: //loading.io/css (CC0) */
.loader-wrapper {
	display: inline-block;
}
.loader {
	display: inline-block;
	position: relative;
}
.loader .loader-items {
	transform-origin: 40px 40px;
}
.loader .loader-items:after {
	content: ' ';
	display: block;
	position: absolute;
	top: 4px;
	left: 36px;
	width: 6px;
	height: 18px;
	border-radius: 20%;
	background: #000000;
}
@keyframes loader {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.replaceText, .replaceWith {
	width: 200px;
	margin: 2px 0 !important;
}
.inputFlex {
	display: flex;
	justify-content: space-between;
}
/*
.listSMW {
	display: none;
}
.hasSMW .listSMW {
	display: block;
}
*/
#smwquery {
	height: 3em;
	padding: 2px;
	resize: vertical;
	max-height: 500px;
}

#removeDupesUniqsButtons, #articleListTopBot {
	display: inline-block;
}
#removeDupesUniqsButtons {
	padding-left: 5px;
}

#watchOption {
	display: flex;
	margin-bottom: 4px;
	flex-wrap: nowrap;
	width: 100%;
	align-content: center;
}
#throttleOption {
	display: flex;
}
#throttleLabel {
	display: inline-flex;
}
#throttle {
	align-self: center;
	margin: 0 5px;
	padding: 0 2px;
	width: 30px;
}
#watchPage {
	width: 100%; /* flex-wrap: nowrap; and white-space: pre; will take care of the rest*/
}
#watchNow {
	margin: 0;
	white-space: pre;
}
#mainButtons {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: fit-content;
}
#mainButtons > div {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}
#mainButtons button {
	flex-grow: 2;
}
#submitButton {
	font-weight: bold;
	color: #226622;
}
#skipButton, #skipPage {
	color: #AA3333;
}
#previewButton {
	color: #3333FF;
}
#diffButton {
	color: #BB6622;
}
.startstops {
	display: flex;
	float: right;
}
.JWBtabc[data-tab="2"] .startstops {
	flex-direction: column;
}
.JWBtabc[data-tab="-1"] .startstops {
	flex-direction: row;
	z-index: 100; /* So that stopLog won't stuck with reAdds */
}
.starts { /* #startbutton, #startOther, #startLog */
	color: #008800;
}
.stops { /* #stopbutton, #stopOther, #stopLog */
	color: #FF0000;
}
.regexswitch, .ignoreswitch {
	display: flex;
}
.regexswitch {
	font-style: italic;
}
/* .re101 {
	font-size: 70%;
	vertical-align: super;
	text-decoration: none;
	border-bottom: 1px dotted #000000;
	cursor: help;
} */
.regexFlagsLabel {
	display: inline-flex;
}

.JWBtabc[data-tab="3"] .collapsibleFieldset > .radioFlex {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.JWBtabc[data-tab="3"] .radioFlex > label[data-label="radio"] {
	flex-basis: calc(100% / 3);
}
#skipContains, #skipNotContains, #skipCategories {
	margin-bottom: 0;
}

#deletePage {
	color: #FF0000;
}
#movePage {
	color: #226622;
}
#protectPage {
	color: #0000FF;
}
#movealsoOptions {
	display: inline-flex;
	float: right;
	flex-wrap: nowrap;
	width: 60%;
	justify-content: space-between;
}
#movealsoOptions > label {
	flex-basis: calc(100% / 2);
	justify-content: center;
}
#moveTo, .protectSelect, #protectExpiry { /* Make select elements float to the right side. */
	float: right;
}
#moveTo {
	margin: 0;
	width: calc(60% - 2 * 3px);
}
.protectSelect {
	width: 60%;
}
#protectExpiry {
	width: calc(60% - 2 * 3px); /* 2px padding, 1px border? */
	margin-bottom: 0;
}

.JWBtabc[data-tab="4"] button {
	margin: 0 !important;
}
#rightGrantRevoke {
	float: right;
	display: inline-flex;
	justify-content: flex-end;
	align-items: stretch;
}
#rightSummary {
	margin: 0 1px 0 0;
}
#rightGrant, #rightRevoke {
	font-family: monospace, monospace;
}
#otherButtons {
	display: flex;
	margin-top: 3px;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.JWBtab[data-tab="-2"] .collapsibleFieldset,
.readdLine {
	display: flex;
	justify-content: space-between;
}
.JWBtab[data-tab="-2"] .collapsibleFieldset {
	flex-direction: column;
}
.readdLine {
	flex-wrap: nowrap;
}
.readdLine > label {
	flex-basis: calc(100% / 3);
}

#moreReplaces, #clearLogButton {
	top: 2px;
	left: 2px;
}
#clearLogButtonYesNoButtons {
	top: 5px;
	left: 2px;
}
#clearLogButtonYes {
	margin-left: 0;
}
#startstopLog {
	top: 0;
	right: 0;
}

#articleList {
	word-wrap: break-word;
}
/* .firstpage { See JWB.highlight (.js line 614).
	background-color: #7777FF;
	color: #000000;
} */

tr[data-line]:not(.lineheader) {
	cursor: pointer;
}

#pagelistButton {
	font-weight: bold;
}

#loadSettings {
	margin: 2px 2px 2px 5px;
}
#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;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: 0.3;
}

.JWBpopup {
	position: fixed;
	z-index: 50;
	top: 10%;
	left: 20%;
	width: 60%;
	height: 80%;
	border: 2px solid #000000;
	padding: 5px;
	overflow: auto;
	background: #EEEEEE;
}

#moreReplacesBorder {
	border-bottom: 2px dashed #BBBBBB;
	background-color: transparent;
}
/* #replacesPopup .switches {
	align-self: flex-end;
	float: right;
	height: 0;
} */
#replacesPopup .removeThis {
	float: right;
	margin: 0;
}

#replacesPopup .replaceText, #replacesPopup .replaceWith {
	width: 80%;
}
#replacesPopup .replaces {
	display: flex;
	flex-direction: column;
	margin-top: 4px;
	margin-bottom: 5px;
	border-bottom: 2px dashed #BBBBBB;
}
#replacesPopup .replaces.sortable {
	cursor: grab;
}
#replacesPopup .replaces.sortable:active {
	cursor: grabbing;
}
.fieldsetPlaceholder {
	visibility: visible;
	margin: 5px 0 4px;
	border: 2px dashed #BBBBBB;
	border-top: none;
	height: 92px;
}

#pagelistPopup .inputFlex,
#pagelistPopup .checkboxFlex,
#pagelistPopup .radioFlex {
	display: flex;
	justify-content: space-between;
}
#pagelistPopup .checkboxFlex > div,
#pagelistPopup .radioFlex > div {
	display: flex;
	width: 80%; /* Similar to #pagelistPopup input[type="text"]. */
	flex-wrap: nowrap;
	justify-content: space-between;
}
#pagelistPopup .checkboxFlex > div > label[data-label="checkbox"],
#pagelistPopup .radioFlex > div > label[data-label="radio"] {
	flex-basis: calc(100% / 3);
}
#pagelistPopup .inputFlex > input[type="text"] {
	margin: 2px 0 !important;
}

#pagelistPopup form {
	position: relative;
	padding-left: 5px;
	padding-right: 195px; /*same as #ns-filter width + margin*/
}
#pagelistPopup input[type="text"] {
	float: right;
	width: 80%;
}
fieldset.disabled {
	opacity: 0.7;
}
select option[value=""] {
	font-style: italic;
}
#ns-filter {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0 10px;
	width: 175px;
	text-align: center;
}
#namespacelist {
	height: 100%;
	overflow: auto;
}