mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
555 lines
13 KiB
CSS
555 lines
13 KiB
CSS
/**********************************************************************************************************/
|
|
/*************************** GLOBAL SETTINGS ***************************/
|
|
/********************************************************************************************************/
|
|
* {
|
|
box-sizing: border-box;
|
|
font-family: sans-serif;}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-color: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-size: 0.8em;
|
|
text-shadow: none;}
|
|
|
|
button:before {display: none;}
|
|
button:hover {background-color: transparent;}
|
|
|
|
button[type="roll"] {
|
|
font-size: 1em;
|
|
margin: 0px 0px 0px 0px;
|
|
padding: 0px 0px;}
|
|
|
|
div {
|
|
background-color: transparent;}
|
|
|
|
fieldset {
|
|
background: transparent;}
|
|
|
|
h1, h2, h3, label {
|
|
display : inline-block;
|
|
font-family: sans-serif;}
|
|
|
|
h1 {
|
|
font-size: 1.5em;}
|
|
|
|
h2 {
|
|
font-size: 1.3em;}
|
|
|
|
hr {
|
|
border-bottom: 2px solid #333;}
|
|
|
|
label {
|
|
font-size: 1.2em;
|
|
font-weight: normal;}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
background-color: transparent;
|
|
border : none;
|
|
border-bottom : 1px solid #a0a0a0;
|
|
border-radius : 0px;
|
|
}
|
|
|
|
input[type="text"]:hover,
|
|
input[type="number"]:hover {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"],
|
|
input[type="checkbox"] + span,
|
|
input[type="radio"] + span {
|
|
position: relative;}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
opacity: 0;
|
|
z-index: 2;}
|
|
|
|
|
|
span {
|
|
word-break: break-word;}
|
|
|
|
textarea {
|
|
font-size : 12px;
|
|
font-weight : normal;
|
|
height : 50px;
|
|
line-height : 18px;
|
|
overflow-wrap : break-word;
|
|
overflow : hidden;
|
|
padding : 2px;
|
|
resize : vertical;
|
|
text-align : left;
|
|
vertical-align: top;
|
|
white-space : pre-line;}
|
|
|
|
.charsheet {
|
|
width: 850px;
|
|
}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** GENERAL ***************************/
|
|
/********************************************************************************************************/
|
|
.sheet-header-row {
|
|
margin-bottom: 3%;
|
|
}
|
|
|
|
.sheet-header-row button {
|
|
float : right;
|
|
font-family : "pictos";
|
|
font-size : 2em;
|
|
margin-right : 5%;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.sheet-header-row div {
|
|
display : inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.sheet-header-row div:nth-of-type(1) {
|
|
vertical-align: top;
|
|
width : 60%;
|
|
}
|
|
|
|
.sheet-header-row h2 {;
|
|
font-size : 1.3em;
|
|
margin-right: 2%;
|
|
width : auto;
|
|
}
|
|
|
|
/* 'Logo' on the top right */
|
|
.sheet-reach {
|
|
width: 35%;
|
|
}
|
|
|
|
.sheet-reach div:nth-of-type(1) {
|
|
margin-top: 1%;
|
|
width : 30%;
|
|
}
|
|
|
|
.sheet-reach div:nth-of-type(3) {
|
|
margin-top: -1%;
|
|
margin-left: 3%;
|
|
}
|
|
|
|
.sheet-reach h1 {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.sheet-reach h1:nth-of-type(1) {
|
|
font-weight: 900;
|
|
line-height: 0px;
|
|
}
|
|
|
|
.sheet-reach h1:nth-of-type(2) {
|
|
font-size : 1.2em;
|
|
vertical-align: top;
|
|
margin-top : -10%;
|
|
}
|
|
|
|
.sheet-reach h1:nth-of-type(3) {
|
|
font-weight: 500;
|
|
margin-left: 1%;
|
|
margin-top : -10%;
|
|
}
|
|
|
|
.sheet-reach h3 {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.sheet-reach h3:nth-of-type(1) {
|
|
font-size : 0.8em;
|
|
margin-top : -3%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.sheet-reach h3:nth-of-type(2){
|
|
margin-bottom: -3%;
|
|
}
|
|
|
|
.sheet-reach h3:nth-of-type(3) {
|
|
margin-left: 20%;
|
|
margin-top : -5%;
|
|
}
|
|
|
|
.sheet-line {
|
|
background-color: black;
|
|
display : inline-block;
|
|
border-left : 2px solid black;
|
|
height : 50px;
|
|
width : 2px;
|
|
}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** PC ***************************/
|
|
/********************************************************************************************************/
|
|
.sheet-pc button[type="roll"] {
|
|
margin-bottom: 2%;
|
|
margin-right : 10%;
|
|
}
|
|
|
|
.sheet-pc button[type="roll"]:hover {
|
|
color: #81a9ca;
|
|
}
|
|
|
|
.sheet-pc button[type="roll"] + label {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.sheet-pc button[type="roll"] > span {
|
|
font-family: 'dicefontd6';
|
|
font-size: 3em;
|
|
}
|
|
|
|
.sheet-pc input[type="number"] {
|
|
vertical-align: top;
|
|
text-align : center;
|
|
}
|
|
|
|
.sheet-pc label {
|
|
vertical-align: top;
|
|
width : auto;
|
|
}
|
|
|
|
|
|
/* SQUARES ROWS CUSTOMIZATIONS */
|
|
.sheet-dice-row {
|
|
height: 6em;
|
|
}
|
|
|
|
.sheet-dice-row label {
|
|
width: 15%;
|
|
}
|
|
|
|
.sheet-square {
|
|
border : 1px solid #a0a0a0;
|
|
display: inline-block;
|
|
height : 60px;
|
|
margin : 0.5%;
|
|
width : 60px;
|
|
}
|
|
|
|
.sheet-dice-row span {
|
|
font-size : 5em;
|
|
left : 5%;
|
|
opacity : 0;
|
|
position : relative;
|
|
top : -135%;
|
|
}
|
|
|
|
.sheet-die-radio + span {
|
|
font-family: "dicefontd6";
|
|
}
|
|
|
|
.sheet-die-radio + span + span {
|
|
color : #610b0d;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.sheet-die-radio:checked + span {
|
|
opacity: 1
|
|
}
|
|
|
|
input.sheet-die-radio {
|
|
height: 100%;
|
|
width : 100%;
|
|
}
|
|
|
|
.sheet-damage[value="1"] ~ .sheet-square:nth-of-type(6) input + span,
|
|
.sheet-damage[value="2"] ~ .sheet-square:nth-of-type(1n+5) input + span,
|
|
.sheet-damage[value="3"] ~ .sheet-square:nth-of-type(1n+4) input + span,
|
|
.sheet-damage[value="4"] ~ .sheet-square:nth-of-type(1n+3) input + span,
|
|
.sheet-damage[value="5"] ~ .sheet-square:nth-of-type(1n+2) input + span,
|
|
.sheet-damage[value="6"] ~ .sheet-square:nth-of-type(1n+1) input + span {
|
|
opacity: 0;
|
|
}
|
|
|
|
.sheet-damage[value="1"] ~ .sheet-square:nth-of-type(6) input + span + span,
|
|
.sheet-damage[value="2"] ~ .sheet-square:nth-of-type(1n+5) input + span + span,
|
|
.sheet-damage[value="3"] ~ .sheet-square:nth-of-type(1n+4) input + span + span,
|
|
.sheet-damage[value="4"] ~ .sheet-square:nth-of-type(1n+3) input + span + span,
|
|
.sheet-damage[value="5"] ~ .sheet-square:nth-of-type(1n+2) input + span + span,
|
|
.sheet-damage[value="6"] ~ .sheet-square:nth-of-type(1n+1) input + span + span {
|
|
left : -75%;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* REPEATING SECTIONS CUSTOMIZATIONS */
|
|
|
|
.sheet-repeating {
|
|
margin-top : 5%;
|
|
margin-bottom: 5%;
|
|
width : 75%;
|
|
}
|
|
|
|
.sheet-repeating input[type="text"] {
|
|
color : #333;
|
|
font-size : 1.2em;
|
|
font-weight : bolder;
|
|
margin-right: 2%;
|
|
}
|
|
|
|
.sheet-repeating textarea {
|
|
margin-top: 1%;
|
|
}
|
|
|
|
/* HIDE & SHOW TITAN OR PC SHEETS */
|
|
.sheet-pc,
|
|
.sheet-titan,
|
|
div.sheet-pc-hide,
|
|
div.sheet-titan-hide {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-layout[value="pc"] ~ .sheet-pc,
|
|
.sheet-layout[value="pc"] ~ .sheet-header-row div.sheet-pc-hide {
|
|
display: inline-block;
|
|
}
|
|
|
|
.sheet-layout[value="titan"] ~ .sheet-titan,
|
|
.sheet-layout[value="titan"] ~ .sheet-header-row div.sheet-titan-hide {
|
|
display: inline-block;
|
|
}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** TITAN ***************************/
|
|
/********************************************************************************************************/
|
|
.sheet-titan {
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-titan-header {
|
|
width: 70%;
|
|
}
|
|
|
|
.sheet-titan h1 {
|
|
text-transform: capitalize;
|
|
width : 100%;
|
|
}
|
|
|
|
.sheet-titan-stats label {
|
|
font-weight: bolder;
|
|
width : 10%;
|
|
}
|
|
|
|
.sheet-titan-stats div:nth-of-type(1) label {
|
|
width: 20%;
|
|
}
|
|
|
|
.sheet-titan-stats input[type="text"] {
|
|
text-align : center;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
/* TITAN BODY WHERE REPEATING FIELDS ARE */
|
|
.sheet-titan-body h3 {
|
|
font-size : 1.1em;
|
|
margin-bottom: -1%;
|
|
}
|
|
|
|
.sheet-titan-body label {
|
|
font-weight: bolder;
|
|
padding : 0px;
|
|
width: 10%;
|
|
}
|
|
|
|
.sheet-titan-body input[type="number"] {
|
|
margin-right: 15%;
|
|
}
|
|
|
|
.sheet-titan-body .sheet-repeating {
|
|
margin-top: -1%;
|
|
}
|
|
|
|
.sheet-titan-body .sheet-repeating div {
|
|
margin-top : 1%;
|
|
}
|
|
|
|
.sheet-titan-body .sheet-repeating label.sheet-section-label {
|
|
width: 20%;
|
|
}
|
|
|
|
.sheet-titan-body .sheet-repeating label.sheet-section-label + input[type="text"] {
|
|
width: 32%;
|
|
}
|
|
|
|
.sheet-titan-body .sheet-repeating textarea {
|
|
background-color: transparent;
|
|
margin-bottom : 0%;
|
|
}
|
|
|
|
.sheet-titan-body .sheet-repeating .sheet-action-row {
|
|
border: 1px solid #333;
|
|
}
|
|
|
|
.sheet-titan-body .sheet-repeating .sheet-action-section {
|
|
display : inline-block;
|
|
margin-top : 0%;
|
|
text-align : center;
|
|
vertical-align: top;
|
|
width : 24.5%;
|
|
}
|
|
|
|
.sheet-titan-body .sheet-repeating .sheet-action-section div:first-child {
|
|
border-bottom: 1px soild #333;
|
|
}
|
|
|
|
.sheet-titan-body .sheet-repeating .sheet-action-section:nth-of-type(1n+2) {
|
|
border-left: 1px solid #333;
|
|
}
|
|
|
|
.sheet-titan-body .sheet-repeating .sheet-action-section input[type="text"] {
|
|
border : none;
|
|
height : 50px;
|
|
margin-left : 2%;
|
|
overflow-wrap: break-word;
|
|
text-align : center;
|
|
width : 100%;
|
|
}
|
|
|
|
.sheet-titan-body .sheet-repeating .sheet-action-section input[type="text"]:nth-of-type(4) {
|
|
margin-left: 2%;
|
|
width : 104%;
|
|
}
|
|
|
|
.sheet-titan-body .sheet-repeating .sheet-action-section label {
|
|
border-bottom: 1px solid #333;
|
|
margin-left : 2%;
|
|
text-align : center;
|
|
width : 100%;
|
|
}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** FOOTER ***************************/
|
|
/********************************************************************************************************/
|
|
.sheet-footer {
|
|
border : none;
|
|
font-size : 0.55em;
|
|
line-height: 15px;
|
|
margin-top : 15px;
|
|
text-align : left;
|
|
width : 700px;
|
|
}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** REPEATING SECTIONS *********************/
|
|
/********************************************************************************************************/
|
|
.repcontrol {
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* This will make the Add & Modify words transparent so that only our symbols below show up */
|
|
.repcontrol .btn {
|
|
color: transparent !important;
|
|
}
|
|
|
|
/* This will put icons next to the buttons. A `+` for Add and a lock for edit */
|
|
.repcontrol .repcontrol_edit:after,
|
|
.repcontrol .repcontrol_add:after {
|
|
color : #111518;
|
|
font-family : pictos;
|
|
font-size : 2.5em;}
|
|
|
|
.repcontrol .repcontrol_edit:after {
|
|
content : '(';
|
|
margin-left: -50%;
|
|
}
|
|
|
|
.repcontrol .repcontrol_add:after {
|
|
content : '&';
|
|
margin-left: -30%;
|
|
}
|
|
|
|
.editmode ~ .repcontrol .repcontrol_edit:after {
|
|
content: ')';
|
|
}
|
|
|
|
/* These are the buttons that appear after the repcontrol_edit is clicked*/
|
|
.itemcontrol {
|
|
z-index: 10;
|
|
}
|
|
|
|
.itemcontrol .repcontrol_del,
|
|
.itemcontrol .repcontrol_move {
|
|
font-size: 18px;
|
|
margin-top: 0px;
|
|
padding: 0px;
|
|
width: 15px;}
|
|
|
|
.itemcontrol .repcontrol_del {
|
|
background-color: darkred;
|
|
font-family: pictos;}
|
|
|
|
|
|
/*.repitem:nth-of-type(1n+2) {
|
|
background-color: #81a9ca40;
|
|
} */
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** ROLL TEMPLATE *********************/
|
|
/********************************************************************************************************/
|
|
.sheet-rolltemplate-rolls {
|
|
|
|
}
|
|
|
|
.sheet-rolltemplate-rolls .sheet-template-body {
|
|
border : 1px solid #000;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-rolls .sheet-template-header {
|
|
background-color: white;
|
|
border : 1px solid #000;
|
|
border-bottom : 2px solid #000;
|
|
color : black;
|
|
font-size : 20px;
|
|
font-variant : small-caps;
|
|
letter-spacing : 2px;
|
|
padding : 4px 0px 3px 0px;
|
|
text-align : center;
|
|
text-transform : capitalize;
|
|
}
|
|
|
|
.sheet-rolltemplate-rolls .sheet-template-row {
|
|
background-color: #888;
|
|
}
|
|
|
|
/* Use this to alternate the background colors for each row */
|
|
.sheet-rolltemplate-rolls .sheet-template-row:nth-child(2n+0) {
|
|
background-color: #1c1c1c;
|
|
}
|
|
|
|
/* Remove some fo the built in styles around rolls */
|
|
.sheet-rolltemplate-rolls .inlinerollresult {
|
|
background-color: transparent;
|
|
border : none;
|
|
color : black;
|
|
display : inline-block;
|
|
font-size : 25px;
|
|
padding : 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-rolls .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-rolls .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-rolls.inlinerollresult.importantroll {
|
|
border: none;
|
|
}
|
|
|
|
/* Change the colors of Full Fails & Full Crits from their built in defaults */
|
|
.sheet-rolltemplate-rolls .inlinerollresult.fullfail {
|
|
color: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-rolls .inlinerollresult.fullcrit {
|
|
color: white;
|
|
}
|
|
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** FIREFOX ***************************/
|
|
/********************************************************************************************************/ |