mirror of
https://github.com/goonstation/goonstation-2020.git
synced 2026-08-22 11:36:13 +01:00
518 lines
12 KiB
CSS
518 lines
12 KiB
CSS
/*************************
|
|
* STRUCTURE
|
|
**************************/
|
|
|
|
html, body {margin: 0; padding: 0; height: 100%; position: relative;}
|
|
body {
|
|
background-color: #ff00e4;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
color: #fcfcfc;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
padding: 0;
|
|
*border-collapse: expression('separate', cellSpacing = '0px');
|
|
}
|
|
|
|
/* TITLEBAR START */
|
|
#titlebar {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 40px;
|
|
background: #21272c;
|
|
border-top: 3px solid #21272c;
|
|
border-left: 3px solid #21272c;
|
|
border-right: 3px solid #21272c;
|
|
}
|
|
#titlebar .corner {
|
|
position: absolute;
|
|
top: -3px; /* #titlebar border-top width */
|
|
}
|
|
#titlebar .corner.tl {
|
|
left: -3px; /* #titlebar border-left width */
|
|
width: 23px;
|
|
height: 23px;
|
|
background: url('tl.gif');
|
|
}
|
|
#titlebar .corner.tr {
|
|
right: -3px; /* #titlebar border-right width */
|
|
width: 6px;
|
|
height: 6px;
|
|
background: url('tr.gif');
|
|
}
|
|
#titlebar h1 {
|
|
margin: 0;
|
|
padding: 12px 75px 0 20px; /* right: width of .actions plus padding */
|
|
color: #fcfcfc;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
}
|
|
#titlebar a {
|
|
display: block;
|
|
position: absolute;
|
|
text-decoration: none;
|
|
color: white;
|
|
padding: 0 5px;
|
|
height: 10px;
|
|
line-height: 10px;
|
|
font-size: 14px;
|
|
}
|
|
#titlebar .min {
|
|
top: 14px;
|
|
right: 50px;
|
|
}
|
|
#titlebar .close {
|
|
top: 12px;
|
|
right: 15px;
|
|
}
|
|
#titlebar a:hover {
|
|
color: #58B4DC;
|
|
}
|
|
/* TITLEBAR END */
|
|
|
|
/* CONTENT AREA START */
|
|
#cornerWrap {
|
|
position: absolute;
|
|
top: 43px; /* #titlebar height (plus titlebar vertical borders) */
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
#cornerWrap .borderSlants {
|
|
position: absolute;
|
|
z-index: 999;
|
|
top: 0;
|
|
left: 20px;
|
|
width: 27px;
|
|
height: 3px;
|
|
background: url('borderSlants.png') no-repeat;
|
|
}
|
|
#cornerWrap .corner {
|
|
position: absolute;
|
|
z-index: 999;
|
|
bottom: 0;
|
|
}
|
|
#cornerWrap .corner.bl {
|
|
left: 0;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: url('bl.gif');
|
|
}
|
|
#cornerWrap .corner.br {
|
|
right: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: url('br.gif');
|
|
}
|
|
#content {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
border-top: 3px solid #58B4DC;
|
|
border-left: 3px solid #21272c;
|
|
border-right: 3px solid #21272c;
|
|
border-bottom: 3px solid #21272c;
|
|
background: #3e464e url('scanLine.png');
|
|
}
|
|
#content .innerContent { /* also has: .nano-content */
|
|
padding: 15px 15px 15px 15px;
|
|
background: url('topShadow.png') repeat-x;
|
|
}
|
|
/* CONTENT AREA END */
|
|
|
|
/* RESIZE AREAS START */
|
|
#resizeArea {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 999999;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: nwse-resize;
|
|
}
|
|
.resizeArea {
|
|
position: absolute;
|
|
z-index: 99999;
|
|
}
|
|
.resizeArea.top {
|
|
top: 0;
|
|
left: 10px;
|
|
right: 10px;
|
|
height: 3px;
|
|
cursor: n-resize;
|
|
}
|
|
.resizeArea.tr {
|
|
top: 0;
|
|
right: 0;
|
|
height: 10px;
|
|
width: 10px;
|
|
cursor: ne-resize;
|
|
}
|
|
.resizeArea.right {
|
|
top: 10px;
|
|
right: 0;
|
|
bottom: 10px;
|
|
width: 3px;
|
|
cursor: e-resize;
|
|
}
|
|
.resizeArea.br {
|
|
bottom: 0;
|
|
right: 0;
|
|
height: 10px;
|
|
width: 10px;
|
|
cursor: se-resize;
|
|
}
|
|
.resizeArea.bottom {
|
|
bottom: 0;
|
|
left: 10px;
|
|
right: 10px;
|
|
height: 3px;
|
|
cursor: s-resize;
|
|
}
|
|
.resizeArea.bl {
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 10px;
|
|
width: 10px;
|
|
cursor: sw-resize;
|
|
}
|
|
.resizeArea.left {
|
|
top: 10px;
|
|
left: 0;
|
|
bottom: 10px;
|
|
width: 3px;
|
|
cursor: w-resize;
|
|
}
|
|
.resizeArea.tl {
|
|
top: 0;
|
|
left: 0;
|
|
height: 10px;
|
|
width: 10px;
|
|
cursor: nw-resize;
|
|
}
|
|
/* RESIZE AREAS END */
|
|
|
|
/* CUSTOM SCROLLBARS START */
|
|
.nano > .nano-content {
|
|
position : absolute;
|
|
overflow-y : scroll;
|
|
top : 0;
|
|
right : 0;
|
|
bottom : 0;
|
|
left : 0;
|
|
}
|
|
.nano > .nano-content:focus {
|
|
outline: thin dotted;
|
|
}
|
|
.nano > .nano-content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.has-scrollbar > .nano-content::-webkit-scrollbar {
|
|
display: block;
|
|
}
|
|
.nano > .nano-pane {
|
|
background : #21272c;
|
|
position : absolute;
|
|
width : 10px;
|
|
right : 0;
|
|
top : 0;
|
|
bottom : 17px; /* #resizeArea height + padding */
|
|
visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
|
|
opacity : 0.75;
|
|
-webkit-transition : .2s;
|
|
-moz-transition : .2s;
|
|
-o-transition : .2s;
|
|
transition : .2s;
|
|
}
|
|
.nano > .nano-pane > .nano-slider {
|
|
background: #58B4DC;
|
|
position : relative;
|
|
margin : 0;
|
|
}
|
|
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
|
|
visibility : visible\9; /* Target only IE7 and IE8 with this hack */
|
|
opacity : 1;
|
|
}
|
|
/* CUSTOM SCROLLBARS END */
|
|
|
|
/*************************
|
|
* STYLESHEET ELEMENTS
|
|
**************************/
|
|
|
|
.well {
|
|
background-color: #21272c;
|
|
border-top: 1px solid #131619;
|
|
border-left: 1px solid #181c20;
|
|
border-right: 1px solid #363b40;
|
|
border-bottom: 1px solid #4a4f53;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* Buttons are complicated */
|
|
.button {
|
|
display: inline-block;
|
|
position: relative;
|
|
height: 22px;
|
|
padding: 0 15px;
|
|
margin: 8px 2px 8px 0;
|
|
line-height: 21px; /* height of self + 1 - difference between .button:before and .button:after heights */
|
|
background: #788492;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
border: 0;
|
|
border-left: 1px solid #909da7;
|
|
border-right: 1px solid #909da7;
|
|
overflow: visible;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
}
|
|
.button:focus {
|
|
border-color: transparent;
|
|
}
|
|
.button:active {
|
|
border-left-color: #788492;
|
|
border-right-color: #788492;
|
|
}
|
|
/* Right vertical shadow */
|
|
.button:before {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: -3px; /* minus width of self - .button border-right width */
|
|
width: 2px;
|
|
background: #252a2f;
|
|
}
|
|
.button:active:before {
|
|
top: -8px; /* height of .button .top + .button border-top width */
|
|
background: #4f555c;
|
|
}
|
|
.button:after {
|
|
|
|
}
|
|
/* Left vertical shadow (active only) */
|
|
.button:active:after {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: -5px; /* height of .button .bottom */
|
|
left: -1px;
|
|
width: 2px;
|
|
background: #171b1f;
|
|
}
|
|
/* Top area */
|
|
.button .top {
|
|
position: absolute;
|
|
height: 7px;
|
|
top: -8px; /* minus height of self - border-top width of self */
|
|
left: 7px; /* width of .button .top:before - .button border-left width */
|
|
right: -1px; /* .button border-right width */
|
|
background: #788492;
|
|
border-top: 1px solid #909da7;
|
|
border-right: 1px solid #909da7;
|
|
}
|
|
.button:active .top {
|
|
border-top-color: #788492;
|
|
border-right-color: #788492;
|
|
}
|
|
/* Top left corner */
|
|
.button .top:before {
|
|
content: " ";
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -8px; /* width of self */
|
|
width: 8px;
|
|
height: 8px;
|
|
background: url('btn-contrast-tl.gif') no-repeat left top;
|
|
}
|
|
.button:active .top:before {
|
|
background-image: url('btn-contrast-active-tl.gif');
|
|
}
|
|
/* Top horiz shadow (active only) */
|
|
.button:active .top:after {
|
|
content: " ";
|
|
position: absolute;
|
|
top: -1px;
|
|
left: 0;
|
|
right: -1px;
|
|
height: 2px;
|
|
background: #171b1f;
|
|
}
|
|
/* Bottom area */
|
|
.button .bottom {
|
|
position: absolute;
|
|
height: 5px;
|
|
bottom: -5px; /* height of self */
|
|
left: -1px; /* .button border-left width */
|
|
right: 5px; /* width of .button .bottom:after width - (.button width + .button:before width) */
|
|
background: #788492;
|
|
border-bottom: 1px solid #909da7;
|
|
border-left: 1px solid #909da7;
|
|
}
|
|
.button:hover .bottom, .button:active .bottom {
|
|
height: 4px;
|
|
border-bottom: 2px solid #58B4DC;
|
|
}
|
|
.button:active .bottom {
|
|
border-left-color: #788492;
|
|
}
|
|
/* Bottom horiz shadow */
|
|
.button .bottom:before {
|
|
content: " ";
|
|
position: absolute;
|
|
bottom: -3px; /* minus height of self - .button .bottom border-bottom width */
|
|
left: 5px;
|
|
right: 0;
|
|
height: 2px;
|
|
background: #252a2f;
|
|
}
|
|
.button:hover .bottom:before {
|
|
bottom: -4px;
|
|
}
|
|
.button:active .bottom:before {
|
|
bottom: -4px;
|
|
left: -1px;
|
|
background: #4f555c;
|
|
}
|
|
/* Bottom right corner */
|
|
.button .bottom:after {
|
|
content: " ";
|
|
position: absolute;
|
|
bottom: -3px; /* minus height of .button .bottom:before height - .button .bottom border-bottom width */
|
|
right: -8px; /* minus width of self */
|
|
width: 8px;
|
|
height: 8px;
|
|
background: url('btn-contrast-br.gif') no-repeat left top;
|
|
}
|
|
.button:hover .bottom:after {
|
|
bottom: -4px;
|
|
background-image: url('btn-contrast-hover-br.gif');
|
|
}
|
|
.button:active .bottom:after {
|
|
bottom: -4px;
|
|
background-image: url('btn-contrast-active-br.gif');
|
|
}
|
|
|
|
|
|
/* Alt button styles */
|
|
|
|
.small.button {
|
|
padding: 0 5px;
|
|
height: 12px;
|
|
line-height: 11px;
|
|
font-size: 10px;
|
|
}
|
|
.full.button {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/* Button color schemes */
|
|
|
|
/* Dark
|
|
BG: #21272c
|
|
Border: #3f4b54
|
|
Highlight: #58B4DC
|
|
Text: #fff
|
|
*/
|
|
.dark.button,
|
|
.dark.button .top,
|
|
.dark.button .bottom {background-color: #21272c;}
|
|
.dark.button:active,
|
|
.dark.button:active .top {border-color: #21272c;}
|
|
.dark.button:active .bottom {border-left-color: #21272c;}
|
|
.dark.button,
|
|
.dark.button .top,
|
|
.dark.button .bottom {border-color: #3f4b54;}
|
|
|
|
.dark.button:hover .bottom,
|
|
.dark.button:active .bottom {border-bottom-color: #58B4DC;}
|
|
|
|
.dark.button .top:before {background-image: url('btn-standard-tl.gif');}
|
|
.dark.button:active .top:before {background-image: url('btn-standard-active-tl.gif');}
|
|
.dark.button .bottom:after {background-image: url('btn-standard-br.gif');}
|
|
.dark.button:hover .bottom:after {background-image: url('btn-standard-hover-br.gif');}
|
|
.dark.button:active .bottom:after {background-image: url('btn-standard-active-br.gif');}
|
|
|
|
|
|
/*************************
|
|
* INDIVIDUAL PAGES
|
|
**************************/
|
|
|
|
/* Traitor tips stuff included here due to the large amount of html files necessary for them */
|
|
.traitor-tips {font-family: Verdana, sans-serif;font-size:10pt;line-height:1.3; padding: 10px;}
|
|
.traitor-tips h1 {font-size: 200%;padding-bottom: 10px;color:#000}
|
|
.traitor-tips p {margin-bottom: 1em; position:relative}
|
|
.traitor-tips .small {font-size:80%}
|
|
.traitor-tips em {font-size:110%;color:red;font-weight:bold;font-style:normal}
|
|
.traitor-tips span.sub {font-size:80%}
|
|
.traitor-tips .indent {padding:5px 0 5px 25px;display:block;}
|
|
.traitor-tips img {display:block}
|
|
.traitor-tips img.right {position:absolute;top:5px;right:20px}
|
|
.traitor-tips .center {text-align:center;margin: 0 auto;}
|
|
.traitor-tips .image-right {padding-right: 50px;}
|
|
|
|
#createobj .selector_hs {
|
|
width: 400px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.matcomptext{width: 100%;text-align: center;margin: 0;padding: 0;font-weight:normal;color:#000000;letter-spacing:0pt;word-spacing:1pt;font-size:12px;font-family:arial, helvetica, sans-serif;line-height:1;}
|
|
|
|
#manubody {background:url(images/bluebg.png) top left no-repeat; background-attachment:fixed; width: 100%; height: 100%; text-align: center; margin:0; padding:15px; padding-right:0px;}
|
|
#manudiv {border:none 0px; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden;}
|
|
div.manuborder{background-color: #0b5091; border:solid 3px #0053ED; border-radius: 15px; width:50%; padding: 3px; margin: 0 auto; font-family: "Arial", sans-serif; color: white; text-align: center; display: block;}
|
|
a.manulink {border:none 0px; font-family: "Arial", sans-serif; color: white; text-align: center; display: block;}
|
|
a.manulink:link {border:none 0px; font-family: "Arial", sans-serif; color: white; text-align: center; display: block;}
|
|
a.manulink:visited {border:none 0px; font-family: "Arial", sans-serif; color: white; text-align: center; display: block;}
|
|
a.manulink:hover {border:none 0px; font-family: "Arial", sans-serif; color: white; text-align: center; display: block;}
|
|
a.manulink:active {border:none 0px; font-family: "Arial", sans-serif; color: white; text-align: center; display: block;}
|
|
|
|
|
|
/*************************
|
|
* HELPER CLASSES
|
|
**************************/
|
|
|
|
.traitorTag {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.text-normal {
|
|
font-weight: normal !important;
|
|
font-style: normal !important;
|
|
}
|
|
|
|
.text-red {color: red;}
|
|
|
|
/* Clearfix */
|
|
.cf:before, .cf:after { content: " "; display: table;}
|
|
.cf:after {clear: both;}
|
|
.cf {*zoom: 1;}
|
|
|
|
.tight {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.emoji {font-family: "Segoe UI Emoji" !important;}
|