User:CenPop/CenPop.css
/** Stylesheet for the CenPop 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/CenPop.js for more information.
*
* @version 1.1
* @author Jacob Alperin-Sheriff, Joeytje50
*/
/* 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: white;
}
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;
}
- resultWindow {
resize: vertical;
height: 275px;
min-height: 275px !important; /*important to prevent inline styles from resizing to smaller sizes*/
border: 1px solid #555;
padding: 3px;
overflow: auto;
}
- resultWindow * {resize: none;}
- inputsWindow {
height: 375px;
padding-bottom: 30px;
border-bottom: 1px solid #AAA;
}
- inputsBox {
height: 100%;
}
- tabs {
width: 360px;
height: 100%;
float: left;
padding-top: 5px;
position: relative;
}
- editBox {
height: 100%;
position: relative;
margin-left: 560px;
padding-top: 1px;
}
- articleTabs {
width: 200px;
height: 100%;
float: left;
margin-right: 5px;
position: relative;
z-index: 5;
}
- articleBox {
width: 100%;
height: 100%;
float: left;
margin-right: 5px;
position: relative;
z-index: 5;
}
- noWebsiteBox {
width: 100%;
height: 100%;
float: left;
margin-right: 5px;
position: relative;
z-index: 5;
}
- editBoxArea {
position: absolute;
z-index: 10;
top: 20px;
right: 0;
}
textarea {
width: 100%;
min-width: 100% !important; /*important to prevent inline styles from resizing to smaller sizes*/
height: 100%;
min-height: 100% !important;
padding: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
fieldset {
padding: 0 5px 5px;
line-height: inherit;
border: 1px solid #2F6FAB;
margin: 2px 0;
}
legend {
padding: 0 5px;
font-size: 100%;
}
button, .button {
background: #EEE; /* Old browsers */
background: -moz-linear-gradient(#EEE, #CCC, #DDD); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEE), color-stop(50%, #CCC), color-stop(100%, #DDD)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#EEE, #CCC, #DDD); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#EEE, #CCC, #DDD); /* Opera 11.10+ */
background: -ms-linear-gradient(#EEE, #CCC, #DDD); /* IE10+ */
background: linear-gradient(#EEE, #CCC, #DDD); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EEEEEE', endColorstr='#CCCCCC',GradientType=0 ); /* IE6-9 */
border: 1px solid #999;
border-radius: 3px;
padding: 0 6px;
margin: 2px;
cursor: default;
color: #333;
font: 13px/20px arial;
display: inline-block;
}
button:hover, .button:hover {
background: #DDF; /* Old browsers */
background: -moz-linear-gradient(#EEE, #CCF, #DDF); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEE), color-stop(50%, #CCF), color-stop(100%, #DDF)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#EEE, #CCF, #DDF); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#EEE, #CCF, #DDF); /* Opera 11.10+ */
background: -ms-linear-gradient(#EEE, #CCF, #DDF); /* IE10+ */
background: linear-gradient(#EEE, #CCF, #DDF); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EEEEFF', endColorstr='#CCCCFF',GradientType=0 ); /* IE6-9 */
color: #333;
}
button:active, .button:active {
background: #CCF; /* Old browsers */
background: -moz-linear-gradient(#CCF, #DDF, #EEE); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CCF), color-stop(50%, #DDF), color-stop(100%, #EEE)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(#CCF, #DDF, #EEE); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(#CCF, #DDF, #EEE); /* Opera 11.10+ */
background: -ms-linear-gradient(#CCF, #DDF, #EEE); /* IE10+ */
background: linear-gradient(#CCF, #DDF, #EEE); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCCCFF', endColorstr='#EEEEFF',GradientType=0 ); /* IE6-9 */
color: #333;
}
button[disabled], button[disabled]:hover, button[disabled]:active,
.button.disabled, .button.disabled:hover, .button.disabled:active {
background: #EEE;
color: #000;
border: 1px solid #555;
opacity: 0.6;
}
.button input[type="file"] {
position: fixed;
top: -1000px;
}
- save:after {
content: " '" attr(value) "'";
font-style: italic;
}
- status {
border: 1px solid #555;
background: white;
padding: 0 3px;
}
/* Interface */
- tabs .CenPoptabc {
display: none;
height: 100%;
border: 1px solid #888;
padding: 3px;
margin-top: -1px;
margin-bottom: -22px;
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
- tabs .CenPoptabc.active {
display: block;
}
- articleTabs .articleTabc {
display: none;
height: 100%;
border: 1px solid #888;
padding: 3px;
margin-top: -1px;
margin-bottom: -22px;
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
- articleTabs .articleTabc.activeArticle {
display: block;
}
.CenPoptabc .fullwidth {
width: 95%;
display: block;
}
.CenPoptabc input[type="text"], .CenPoppopup input[type="text"] {
border: 1px solid #BBB;
border-radius: 5px;
box-shadow: 1px 1px 3px;
padding: 2px;
margin-top: 2px;
margin-bottom: 8px;
}
- replacesButton {
float: right;
margin-top: -25px;
}
- refreshRETF {
cursor: pointer;
}
.tabholder {
position: relative;
}
.CenPoptab.log {
position: absolute;
right: 0;
font-weight: bold;
}
[dir="rtl"] .CenPoptab.log {
right:auto;
left:0;
}
.CenPoptabc.log {
padding-bottom: 1.5em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.CenPoptab {
padding: 0 3px;
border: 1px solid #888;
border-radius: 3px 3px 0 0;
background: #FFF;
cursor: pointer;
line-height: 20px;
display: inline-block;
}
.CenPoptab:hover {background: #DDD;}
.CenPoptab:active {background: #BBB;}
.CenPoptab.active {
background: #BBE;
border-bottom: 1px solid #BBE;
}
.articleTab {
padding: 0 3px;
border: 1px solid #888;
border-radius: 3px 3px 0 0;
background: #FFF;
cursor: pointer;
line-height: 20px;
display: inline-block;
}
.articleTab:hover {background: #DDD;}
.articleTab:activeArticle {background: #BBB;}
.articleTab.activeArticle {
background: #BBE;
border-bottom: 1px solid #BBE;
}
.viaCenPop {
position:relative;
}
.editbutton .otherbutton {
padding: 10px;
margin: 2px;
font-size: 115%;
height: auto;
}
- stateAdding {
margin-right: 10px;
}
.divisor {
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid #AAA;
}
- actionlog {
border-collapse: collapse;
margin-bottom: 25px;
}
- actionlog tr {
border: 1px #AAA solid;
}
- actionlog td:last-child {
width: 85%;
}
/* Layout */
- stats {
padding-top: 3px;
}
.regexFlags,
- containFlags {
width: 30px;
}
.replaces {
margin-top: 15px;
}
.beginYearText, .estRefText, .estYearText, .footnoteText, .replaceText, .replaceWith, #summary {
width: 190px;
margin-right: 5px;
float: right;
}
- replacesPopup .replaceText, #replacesPopup .replaceWith {
width: 80%;
width: calc(100% - 100px);
}
- replacesPopup .replaces {
border-bottom: 2px dashed #BBB;
margin-bottom: 5px;
}
.replaces > label, .replaces > .regexswitch, .cens {
clear: both;
}
- histPopDiv, .myHeader {
display: block;
padding-top: 5px;
padding-bottom: 15px;
font-size: 200%;
text-align: center;
}
- pagelistPopup fieldset > label {
display:block;
}
- 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 #000;
cursor: help;
}
- startstop {
float: right;
margin-top: 10px;
margin-bottom: 10px;
}
- startstop button {
margin: 2px;
}
- submitButton {font-weight:bold;color:#262;}
- skipButton, #skipPage {color: #A33;}
- previewButton {color:#33F;}
- diffButton {color:#B62;}
- stopbutton {color: #F00;}
- startbutton {color: #080;}
- deletePage {color: #F00;}
- movePage {color: #262;}
- protectPage {color: #00F;}
- articleList {white-space: pre-line;}
- articleList[disabled]:first-line {
background-color: #77F;
color: #000;
}
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: 30;
cursor: pointer;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.3;
}
.CenPoppopup {
position: fixed;
z-index: 50;
top: 15%;
left: 25%;
width: 50%;
height: 70%;
border: 2px solid black;
padding: 5px;
overflow: auto;
background: #EEE;
}
- pagelistPopup form {
position: relative;
padding-right: 175px; /*same as #ns-filter width*/
}
fieldset[disabled] {
opacity: 0.7;
}
- ns-filter {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 175px;
text-align: center;
}
- ns-filter select {
height: 100%;
}
.loadFileText:focus {
width: 180px;
}
.to_add_div {
display: inline-block;
margin-left: 10px;
margin-right: 5px;
margin-top: 1px;
}
- select_div {
display: inline-block;
margin-top: 5px;
}
.to_add_span {
display: block;
width: 100%;
margin-bottom: 3px;
}
- county_fips {
width: 40px;
}
- min_fips {
width: 50px;
}
/* A div with checkboxes */
.check_div {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
}
.my_radio {
margin: 5px;
}
.radio_label {
padding: 5px;
}
- load_from_div, #est_or_census_div {
margin: 5px;
}
- load_label,.load_label {
font-weight: bold;
}
- file_load {
margin-top: 5px;
}
- load_details {
height: 70px;
margin: 0px;
}
- button_div {
margin-top: 10px;
}