Files
roll20-character-sheets/Babylon 5/Babylon 5.css
T
Nighthawk efa7999f03 Font Fixes, Added Missing Section
Made fonts in CSS websafe.
Added missing Starship Defense section.
2017-09-09 00:50:46 -04:00

884 lines
22 KiB
CSS

/*----------- Repeating Blocks -------------*/
.charsheet .repcontrol_add {
display: block;
background:#08337d;
color:white;
text-shadow:0px 0px 2px #000,0px 0px 2px #000,0px 0px 2px #000;
box-shadow:none;
float:left!important;
margin-bottom:0px;
font-size:0.9em;
height:2.2em;
font-family: Georgia,Times New Roman,Bookman,serif;
}
.charsheet .repcontrol_edit
{
display: inline-block;
background:#08337d;
color:white;
text-shadow:0px 0px 2px #000,0px 0px 2px #000,0px 0px 2px #000;
box-shadow:none;
float:none!important;
margin-bottom:5px;
font-size:0.9em;
height:2.2em;
font-family: Georgia,Times New Roman,Bookman,serif;
}
.charsheet .repcontrol_del {
background:red;
color:white;
text-shadow:0px 0px 2px #000,0px 0px 2px #000,0px 0px 2px #000;
box-shadow:none;
float:none!important;
margin-bottom:5px;
font-size:0.9em;
height:2.2em;
}
/*----------- Top Half -------------*/
.sheet-top_half {
background-size:840px;
}
/* background toggle*/
.sheet-useBackground input[value="1"]:checked ~ *.sheet-background {
background-image:none; background-color:#878A89;
}
.sheet-banner {
background-image:url('https://i.imgur.com/APpu99H.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height:100px;
width:100px;
margin-left:auto;
margin-right:auto;
}
/*----------- Tabs Setup -------------*/
.charsheet {
width:840px;
}
div.sheet-core-content {
display: none;
width:840px;
}
.charsheet div[class^="sheet-section"] {
display: none;
background-size:840px;
}
.charsheet input.sheet-tab1:checked ~ div.sheet-section-1,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-2,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-3,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-4,
.charsheet input.sheet-tab5:checked ~ div.sheet-section-5,
.charsheet input.sheet-tab6:checked ~ div.sheet-section-6 {
display: block;
}
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {
display: block;
}
.charsheet input.sheet-tab {
width: 100px;
height: 20px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 998;
box-shadow: 0px 0px 5px blue;
}
.charsheet span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 13px;
background-repeat: no-repeat;
color: #08337d;
font-weight: bold;
font-family: Georgia,Times New Roman,Bookman,serif;
border-radius: 4px;
border: 2px solid #08337d;
width: 100px;
height: 20px;
cursor: pointer;
position: relative;
vertical-align: middle;
margin-left: -105px;
}
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
.charsheet input.sheet-tab5:checked + span.sheet-tab5,
.charsheet input.sheet-tab6:checked + span.sheet-tab6,
.charsheet input.sheet-tab99:checked + span.sheet-tab99 {
background: #08337d; /*originally ab8b57*/
color: white; /*originally white*/
border-radius: 4px;
border: 2px solid #08337d;
}
/*----------- End Tab Setup -----------*/
/*----------- Font -----------*/
.sheet-tableI {
margin-left:auto;
margin-right:auto;
font-family: Georgia,Times New Roman,Bookman,serif;
}
.sheet-tableI th {
font-size:8px;
vertical-align:super;
}
.sheet-font {
font-family: Georgia,Times New Roman,Bookman,serif;
font-weight:normal;
}
.sheet-tableII th {
background:#000;
color:white;
}
.sheet-tableII {
margin-left:auto;
margin-right:auto;
}
.sheet-tableII th.sheet-heading {
background:#000;
color:white;
font-size:9px;
}
.sheet-text {
border-top:none;
border-left:none;
border-right:none;
border-radius:0px;
box-shadow:none;
font-size:12px;
background: transparent;
}
input.sheet-text[type="text"]:focus {
border-bottom:1px solid #000;
border-radius:0px;
box-shadow:none;
background: white;
}
.sheet-title {
border-top:none;
border-left:none;
border-right:none;
border-radius:0px;
box-shadow:none;
font-size:1.8em;
font-family: Georgia,Times New Roman,Bookman,serif;
text-align:center;
background: transparent;
}
.sheet-number[type="text"]:focus,
.sheet-number[type="number"]:focus,
input.sheet-title[type="text"]:focus {
border-radius:0px;
box-shadow:none;
background: white;
}
.sheet-number[type="number"] {
background: transparent;
border:none;
border-radius:0px;
box-shadow:none;
text-align:center;
border-bottom:1px solid #000;
}
.sheet-number[type="number"]::-webkit-inner-spin-button,
.sheet-number[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sheet-number[type="text"] {
background: transparent;
border:none;
border-radius:0px;
box-shadow:none;
text-align:center;
border-bottom:1px solid #000;
width:100px;
}
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]:hover {
-moz-appearance:none;
}
.sheet-ability {
background: white;
border:none;
border-radius:5px;
box-shadow:none;
text-align:center;
color:black;
font-size:1.2em;
margin:2px;
}
.sheet-ability[type="text"] {
background: white;
border:none;
border-radius:5px;
box-shadow:none;
text-align:center;
color:black;
font-size:1.2em;
margin:2px;
width:100px;
}
select.sheet-number {
background: transparent;
width:80px;
border:none;
border-radius:0px;
margin-bottom: 0;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
padding-top:0;
font-size:0.9em;
}
.sheet-type {
border:none;
border-radius:0px;
box-shadow:none;
text-align:center;
background: transparent;
width:130px;
}
.sheet-Rating[type="number"]:-ms-input-placeholder,
.sheet-Specialty[type="number"]:-ms-input-placeholder{
font-size:0.5em;
}
.sheet-Rating[type="number"]:placeholder,
.sheet-Specialty[type="number"]:placeholder{
font-size:0.5em;
}
.sheet-Rating[type="number"]::-webkit-input-placeholder,
.sheet-Specialty[type="number"]::-webkit-input-placeholder{
font-size:0.5em;
}
.sheet-Rating[type="number"]:-moz-placeholder,
.sheet-Specialty[type="number"]:-moz-placeholder{
font-size:0.5em;
}
.sheet-Rating[type="number"]::-moz-placeholder,
.sheet-Specialty[type="number"]::-moz-placeholder {
font-size:0.5em;
}
select.sheet-Specialty {
width:90px;
margin-bottom: 0;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
padding-top:0;
font-size:0.7em;
}
.sheet-smaller {
font-size:0.8em
}
.sheet-smallest {
font-size:0.7em
}
h3 {
font-family: Georgia,Times New Roman,Bookman,serif;
text-align:center;
}
h4 {
font-family: Georgia,Times New Roman,Bookman,serif;
color: #000;
font-weight:bold;
text-align:center;
}
h5 {
font-family: Georgia,Times New Roman,Bookman,serif;
color: #000;
font-weight:bold;
}
textarea.sheet-notes {
border-radius:15px;
border: 2px solid #08337d;
height:130px;
resize:vertical;
font-family: Georgia,Times New Roman,Bookman,serif;
}
textarea.sheet-longnotes {
border-radius:15px;
border: 2px solid #08337d;
height:130px;
resize:vertical;
font-family: Georgia,Times New Roman,Bookman,serif;
}
/*-----Tootl Tips-----*/
div.sheet-tooltips {
position: relative;
display: inline;
}
div.sheet-tooltips span {
position: absolute;
width:140px;
color: #000000;
background: #FFFFFF;
border: 2px solid #6D6D6D;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
div.sheet-tooltips span:before {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -12px;
width: 0; height: 0;
border-right: 12px solid #6D6D6D;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
div.sheet-tooltips span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #FFFFFF;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
div.sheet-tooltips:hover span {
visibility: visible;
opacity: 1;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: -15px;
z-index: 999;
}
.sheet-skill_name {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: none;
box-shadow: none;
outline:0;
padding:0;
margin:0;
background: transparent;
font-weight:bold;
font-variant:small-caps;
width: 90px;
color: black;
text-align:center;
}
/*-----radio boxes-----*/
/*-----Tootl Tips-----*/
div.sheet-tooltipsdown {
position: relative;
display: inline;
}
div.sheet-tooltipsdown span {
position: absolute;
width:500px;
color: #000;
background: #fff;
height: 225px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
border:3px solid black;
}
div.sheet-tooltipsdown span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
div:hover.sheet-tooltipsdown span {
visibility: visible;
opacity: 1;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
/*-----radio boxes-----*/
input.sheet-hider:not(:checked) ~ div.sheet-hold {
display: none;
}
input.sheet-hider:checked ~ div.sheet-hold {
display: inline;
}
.sheet-hidden {
display:none;
}
/* -----Hide actual radio----- */
input.sheet-normal[type="radio"]
{
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
/* -----Fake radio----- */
input.sheet-normal[type="radio"] + span::before
{
margin-right: 2px;
border: solid 1px #a8a8a8;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
-moz-box-shadow: 0 0 10px rgba(216,218,300, 1.8);
-webkit-box-shadow: 0 0 10px rgba(216,218,300, 1.8);
box-shadow: 0 0 10px rgba(216,218,300, 1.8);
background: black;
color:black;
content: "";
width: 12px;
height: 12px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/* -----Remove dot from all radios _after_ selected one----- */
input.sheet-normal[type="radio"]:checked ~ input.sheet-normal[type="radio"] + span::before
{
content: "";
background: #fff;
}
/*------------empty traits-----------*/
input.sheet-zero[type="radio"]:checked + span::before {
opacity: 0;
}
input.sheet-zero[type="radio"]:hover + span::before {
opacity: 1;
}
input.sheet-zero[type="radio"] + span::before {
font-size: 12px;
content: "✖";
opacity: 0.25;
background: none;
}
/* ----Hide actual Big radio---- */
input.sheet-bigcheck[type="radio"]
{
width: 14px;
height: 14px;
position: relative;
top: -2px;
left: 5px;
margin-left: 0px;
margin-top: -10px;
margin-bottom: -10px;
margin-right: -10px;
cursor: pointer;
z-index: 1;
opacity: 0;
}
/* ----Fake Big radio ---- */
input.sheet-bigcheck[type="radio"] + span::before {
margin-right: 4px;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
left: 0px;
-moz-box-shadow: 0 0 2px #000;
-webkit-box-shadow: 0 0 2px #000;
box-shadow: inset 0 0 2px #000, inset 0 0 4px #000;
background:#F3F8F6;
}
input.sheet-bigcheck[type="radio"] + span::before {
content: "";
width: 14px;
height: 14px;
font-size: 12px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
input.sheet-bigcheck[type="radio"]:checked + span::before {
color: red;
content: "✓";
text-shadow:none;
font-weight:bold;
}
/* ----Hide actual Big Checkbox---- */
input.sheet-bigcheck[type="Checkbox"] {
width: 14px;
height: 14px;
position: relative;
top: -2px;
left: 5px;
margin-left: 0px;
margin-top: -10px;
margin-bottom: -10px;
margin-right: -10px;
cursor: pointer;
z-index: 1;
opacity: 0;
}
/* ----Fake Big Checkbox ---- */
input.sheet-bigcheck[type="Checkbox"] + span::before {
margin-right: 4px;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
left: 0px;
-moz-box-shadow: 0 0 2px #000;
-webkit-box-shadow: 0 0 2px #000;
box-shadow: inset 0 0 2px #000, inset 0 0 4px #000;
}
input.sheet-bigcheck[type="Checkbox"] + span::before
{
content: "";
width: 14px;
height: 14px;
font-size: 12px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
input.sheet-bigcheck[type="Checkbox"]:checked + span::before
{
color: red;
content: "✓";
text-shadow:none;
font-weight:bold;
}
/*------------Button-----------*/
/* ======== skillbtn ========*/
.sheet-skillbtn button[type="roll"]:before,
.sheet-skillbtn:before {
content: ""!important;
display: none;
border:none;
}
.sheet-skillbtn button[type="roll"],
.sheet-skillbtn {
display: block;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;
box-shadow: none;
outline:0;
margin: 0;
background: black;
font-size:1em !important;
font-weight:bold;
font-variant:small-caps;
height:50px;
width: 90px;
padding-left:20px;
color: white;
}
.sheet-skillbtn button[type="roll"]:hover,
.sheet-skillbtn:hover {
background: black; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, black , white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, black, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, black, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, black , white); /* Standard syntax */
}
.sheet-skillbtn button[type="roll"]:active,
.sheet-skillbtn:active {
background: black; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, white , black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, white, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, white , black); /* Standard syntax */
}
/*------------Button-----------*/
/* ======== btn ========*/
.sheet-btn button[type="roll"]:before,
.sheet-btn:before {
content: ""!important;
display: none;
border:none;
}
.sheet-btn button[type="roll"],
.sheet-btn {
display: block;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: none;
box-shadow: none;
outline:0;
margin: 0;
background: transparent;
font-size:12px !important;
font-weight:bold;
font-variant:small-caps;
height:20px;
width: 90px;
padding-left:20px;
color: black;
}
.sheet-btn button[type="roll"]:hover,
.sheet-btn:hover {
background: black; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, black , white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, black, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, black, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, black , white); /* Standard syntax */
color: white;
}
.sheet-btn button[type="roll"]:active,
.sheet-btn:active {
background: black; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, white , black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, white, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, white , black); /* Standard syntax */
color: white;
}
/* ======== weapon ========*/
.sheet-weapon button[type="roll"]:before,
.sheet-weapon:before {
content: ""!important;
display: none;
border:none;
}
.sheet-weapon button[type="roll"],
.sheet-weapon {
display: block;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: none;
box-shadow: none;
outline:0;
margin: 0;
background: black;
font-size:1.2em !important;
font-weight:bold;
height:50px;
width: 100px;
padding-left:20px;
color: white;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */
transform: rotate(90deg);
}
.sheet-weapon button[type="roll"]:hover,
.sheet-weapon:hover {
background: black; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(white, black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(white, black); /* Standard syntax */
}
.sheet-weapon button[type="roll"]:active,
.sheet-weapon:active {
background: white; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(black, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(black, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(black, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(black, white); /* Standard syntax */
}
/* ======== fxbtn ========*/
.sheet-fxbtn button[type="roll"]:before,
.sheet-fxbtn:before {
content: ""!important;
display: none;
border:none;
}
.sheet-fxbtn button[type="roll"],
.sheet-fxbtn {
display: block;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 2px solid #08337d;
box-shadow: none;
outline:0;
margin: 0;
background: transparent;
font-size:12px !important;
font-weight:bold;
font-variant:small-caps;
height:20px;
width: 90px;
padding-left:20px;
color: #fff;
}
.sheet-fxbtn button[type="roll"]:hover,
.sheet-fxbtn:hover {
background: black; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, black , #08337d); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, black, #08337d); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, black, #08337d); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, black , #08337d); /* Standard syntax */
color: white;
}
.sheet-fxbtn button[type="roll"]:active,
.sheet-fxbtn:active {
background: black; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #08337d , black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #08337d, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #08337d, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #08337d , black); /* Standard syntax */
color: white;
}
/*=== Roll Templates ===*/
/*=== show ===*/
.sheet-rolltemplate-show table {
width: 100%;
border-radius:15px 15px 15px 15px;
color: #08337d;
font-size: 1em;
font-variant: small-caps;
box-shadow: none;
background: #F3F8F6;
box-shadow: 0px 0px 2px #08337d, 0px 0px 2px #08337d, 0px 0px 2px #08337d;
}
.sheet-rolltemplate-show td {
padding: 5px;
}
/*=== attack ===*/
.sheet-rolltemplate-attack table {
width: 100%;
border-radius:15px 15px 15px 15px;
color: #08337d;
font-size: 1em;
font-variant: small-caps;
box-shadow: none;
background: #F3F8F6;
box-shadow: 0px 0px 2px #08337d, 0px 0px 2px #08337d, 0px 0px 2px #08337d;
}
.sheet-rolltemplate-attack td {
padding: 5px;
}
.sheet-rolltemplate-attack td.sheet-confirm {
font-style:italic;
color:black;
}
.sheet-rolltemplate-attack td.sheet-detail {
font-style:italic;
border-radius:15px 15px 0px 0px;
}
.sheet-rolltemplate-attack td.sheet-last_left {
border-radius:0px 0px 0px 15px;
}
.sheet-rolltemplate-attack td.sheet-last_right {
border-radius:0px 0px 15px 0px;
}
.sheet-rolltemplate-attack td.sheet-damage .inlinerollresult .fullcrit,
.sheet-rolltemplate-attack td.sheet-damage .inlinerollresult .fullfail,
.sheet-rolltemplate-attack td.sheet-damage .inlinerollresult .importantroll,
.sheet-rolltemplate-attack td.sheet-damage .inlinerollresult,
.sheet-rolltemplate-attack .inlinerollresult {
background:transparent;
border:none;
box-shadow:none;
color:black;
}
.sheet-rolltemplate-attack .inlinerollresult.fullcrit {
border: none;
background:black;
color:white;
border-radius:5px;
box-shadow:none;
}
.sheet-rolltemplate-attack .inlinerollresult.fullfail {
border: none;
background:red;
color:white;
border-radius:5px;
box-shadow:none;
}
.sheet-rolltemplate-attack .inlinerollresult.importantroll {
border: none;
}
/*=== show ===*/
.sheet-rolltemplate-fx table {
width: 100%;
border-radius:15px 15px 15px 15px;
color: #08337d;
font-size: 1em;
font-variant: small-caps;
box-shadow: none;
background: #F3F8F6;
box-shadow: 0px 0px 2px #08337d, 0px 0px 2px #08337d, 0px 0px 2px #08337d;
}
.sheet-rolltemplate-fx td {
padding: 5px;
}