mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
Cassie Levett
5affacc8f4
* First upload * HTML ready CSS * Upload finished product * Finished product * Updated weapon roll * Updated calculations * update for Roll20 * add Dustin to the sheet.json * Added Dustin
536 lines
11 KiB
CSS
536 lines
11 KiB
CSS
/**********************************************************************************************************/
|
|
/*************************** GLOBAL SETTINGS ***************************/
|
|
/********************************************************************************************************/
|
|
* {
|
|
box-sizing: border-box;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
button {
|
|
background-color : transparent;
|
|
background-image : none;
|
|
box-shadow : none;
|
|
font-family : Helvetica, Arial, sans-serif;
|
|
text-shadow : none;
|
|
border-bottom : 2px solid #666;
|
|
border-bottom-right-radius: 2px;
|
|
border-color : #aaa;
|
|
border-radius : 5px;
|
|
border-right : 3px solid #999;
|
|
border-style : outset;
|
|
padding : 5px 3px;
|
|
}
|
|
|
|
button:before {
|
|
display: none;}
|
|
|
|
button:hover {
|
|
background-color: transparent;}
|
|
|
|
button[type="roll"],
|
|
button[type="action"] {
|
|
margin : 0px;
|
|
padding : 0px;
|
|
height : 35px;
|
|
width : 36px
|
|
}
|
|
|
|
button[type="roll"] {
|
|
font-family: "dicefontd10";
|
|
font-size: 2.5em !important;
|
|
}
|
|
|
|
div {
|
|
background-color: transparent;}
|
|
|
|
fieldset {
|
|
background: transparent;
|
|
}
|
|
|
|
h2 {
|
|
font-stretch:condensed;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
padding-top :0px;
|
|
text-align : center;
|
|
vertical-align : middle;
|
|
border : 1px solid black;
|
|
border-radius : 2px;
|
|
}
|
|
|
|
/**** Removes the arrows for increase numbers ****/
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
label {
|
|
display : inline-block;
|
|
font-size : 0.8em;
|
|
margin-bottom: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
span {
|
|
word-break: break-word;
|
|
}
|
|
|
|
textarea {
|
|
border-bottom : 1px dotted #FCD116;
|
|
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;}
|
|
|
|
/* Two Column Setup */
|
|
div.sheet-2column {
|
|
display : inline-block;
|
|
vertical-align: top;
|
|
width : 48%;
|
|
}
|
|
|
|
div.sheet-2column:first-child {
|
|
margin-right: 2%;
|
|
}
|
|
|
|
/* Small boxes */
|
|
div.sheet-small-box {
|
|
border: 1px solid black;
|
|
border-radius: 2px;
|
|
display: inline-block;
|
|
height: 24px;
|
|
width: 3.5em;
|
|
}
|
|
|
|
/* Shared STyles */
|
|
div.sheet-character,
|
|
div.sheet-aliases,
|
|
div.sheet-psychic,
|
|
div.sheet-backstory,
|
|
div.sheet-levelUp,
|
|
div.sheet-toughness,
|
|
div.sheet-weapons,
|
|
div.sheet-aspect,
|
|
div.sheet-contact,
|
|
div.sheet-possession,
|
|
div.sheet-notes {
|
|
border: 2px solid black;
|
|
border-radius: 2px;
|
|
padding: 1%;
|
|
}
|
|
|
|
div.sheet-speed input,
|
|
div.sheet-hp input,
|
|
div.sheet-levelUp input {
|
|
width : 20%;
|
|
}
|
|
|
|
div.sheet-speed span,
|
|
div.sheet-toughness span,
|
|
div.sheet-nerve span {
|
|
padding: 5px;
|
|
}
|
|
|
|
/* The squre Attribute boxes */
|
|
div.sheet-attributes input[type="number"] {
|
|
border-color: #000000;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
font-size : 2em;
|
|
height : 55px;
|
|
margin : 4px;
|
|
padding-top : 0px;
|
|
text-align : center;
|
|
width : 55px;
|
|
}
|
|
|
|
div.sheet-attributes div.sheet-top-labels {
|
|
margin-left: 43%;
|
|
}
|
|
|
|
div.sheet-attributes div.sheet-top-labels label {
|
|
width: 30%;
|
|
}
|
|
|
|
div.sheet-attributes div.sheet-top-labels label:first-child {
|
|
margin-right: 15%;
|
|
}
|
|
|
|
div.sheet-attributes h2 {
|
|
display: inline-block;
|
|
width: 40%;
|
|
}
|
|
|
|
/* Section start with speed */
|
|
div.sheet-speed,
|
|
div.sheet-levelUp,
|
|
div.sheet-aspect,
|
|
div.sheet-aliases,
|
|
div.sheet-psychic,
|
|
div.sheet-contact,
|
|
div.sheet-possession,
|
|
div.sheet-notes,
|
|
div.sheet-weapons {
|
|
margin-top: 2%;
|
|
}
|
|
|
|
div.sheet-speed div {
|
|
margin: 2% 1%;
|
|
}
|
|
|
|
/* Half speed row */
|
|
div.sheet-speed div:nth-of-type(1) label {
|
|
width: 25%;
|
|
}
|
|
|
|
label.sheet-half-speed {
|
|
margin-left: 20%;
|
|
}
|
|
|
|
/* The half speed span & inputs need to be pushed left */
|
|
div.sheet-speed div:nth-of-type(1) div.sheet-small-box:nth-of-type(1) {
|
|
margin-left: 21%;
|
|
margin-right: 2%;
|
|
}
|
|
|
|
div.sheet-speed input[name="attr_action_points_other"] {
|
|
margin-right: 2%;
|
|
}
|
|
|
|
/* Action points box in the half speed row */
|
|
div.sheet-speed div:nth-of-type(1) div.sheet-small-box:nth-of-type(2) {
|
|
margin-left: 12%;
|
|
}
|
|
|
|
/* Awareness row */
|
|
div.sheet-speed div:nth-of-type(2) label {
|
|
width: 21%;
|
|
}
|
|
|
|
/* Other needs to be shorter */
|
|
div.sheet-speed div:nth-of-type(2) label:nth-of-type(2),
|
|
div.sheet-speed div:nth-of-type(2) label:nth-of-type(3) {
|
|
width: 19%;
|
|
}
|
|
|
|
/* Battle Reflex label needs to be longer */
|
|
div.sheet-speed div:nth-of-type(2) label:nth-of-type(4) {
|
|
width: 24%;
|
|
}
|
|
|
|
div.sheet-speed input[name="attr_awareness"],
|
|
div.sheet-speed input[name="attr_speed"] {
|
|
margin-left : 1%;
|
|
margin-right: 1%;
|
|
}
|
|
|
|
div.sheet-speed input[name="attr_battle_reflex_other"] {
|
|
margin-left: 2%;
|
|
margin-right: 2%;
|
|
}
|
|
|
|
|
|
/* HP Row */
|
|
div.sheet-hp label:nth-of-type(1) {
|
|
width: 21%;
|
|
}
|
|
|
|
/* HP Max & HP Level labels */
|
|
div.sheet-hp label:nth-of-type(2),
|
|
div.sheet-hp label:nth-of-type(3) {
|
|
width: 15%;
|
|
}
|
|
|
|
/* Unspent trait points */
|
|
div.sheet-hp label:nth-of-type(4) {
|
|
margin-left: 5%;
|
|
width: 35%;
|
|
}
|
|
|
|
div.sheet-hp input[name="attr_hp"] {
|
|
margin-left: 2%;
|
|
margin-right: 7%;
|
|
}
|
|
|
|
div.sheet-hp input[name="attr_hp_lvl"] {
|
|
margin-left: 4%;
|
|
margin-right: 20%;
|
|
}
|
|
|
|
|
|
/* LEVEL UP Row */
|
|
div.sheet-levelUp h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
div.sheet-levelUp h3 {
|
|
display: inline-block;
|
|
margin-left: 2%;
|
|
margin-right: 2%;
|
|
width: 12%;
|
|
}
|
|
|
|
div.sheet-levelUp label {
|
|
width: 5%;
|
|
}
|
|
|
|
div.sheet-levelUp span:last-child {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/* This is the hidden input */
|
|
div.sheet-levelUp input[type="checkbox"],
|
|
div.sheet-weapon-classes input[type="checkbox"] {
|
|
height : 20px;
|
|
left : 5%; /* Use this to move the checkboxes over the span */
|
|
opacity : 0; /* Comment this out to adjust checkboxes */
|
|
position: relative;
|
|
width : 20px;
|
|
}
|
|
|
|
/* This is the box that the check will live in */
|
|
div.sheet-levelUp input[type="checkbox"] + span,
|
|
div.sheet-weapon-classes input[type="checkbox"] + span {
|
|
background : #fff;
|
|
border : 1px solid #000;
|
|
border-radius : 3px;
|
|
box-shadow : inset 0px 0px 3px 1px #7c7c7c;
|
|
display : inline-block;
|
|
height : 20px;
|
|
margin-right : 2%;
|
|
vertical-align: middle;
|
|
width : 20px;
|
|
}
|
|
|
|
/* This is for the checkmark */
|
|
div.sheet-levelUp input[type="checkbox"]:checked + span::before,
|
|
div.sheet-weapon-classes input[type="checkbox"]:checked + span::before {
|
|
background-color: #7b1915;
|
|
color : #fff;
|
|
content : "3";
|
|
display : inline-block;
|
|
font-family : pictos;
|
|
font-size : 1.2em;
|
|
height : 20px;
|
|
text-align : center;
|
|
width : 20px;
|
|
}
|
|
|
|
/* Character Row */
|
|
div.sheet-character label {
|
|
width: 27%;
|
|
}
|
|
|
|
div.sheet-character input {
|
|
margin-bottom: 1%;
|
|
}
|
|
|
|
div.sheet-character input[name="attr_character_name"] {
|
|
margin-left: 1%;
|
|
width: 50%;
|
|
}
|
|
|
|
/* Level label */
|
|
div.sheet-character label:nth-of-type(2) {
|
|
width: 9%;
|
|
}
|
|
|
|
/* Mind Type label */
|
|
div.sheet-character label:nth-of-type(4) {
|
|
margin-left: 20%;
|
|
margin-right: 20%;
|
|
}
|
|
|
|
div.sheet-character input[name="attr_mind_type"] {
|
|
width: 46%;
|
|
}
|
|
|
|
/* Motivation Row */
|
|
div.sheet-motivation {
|
|
margin-top: 1%;
|
|
margin-bottom: 2%;
|
|
}
|
|
|
|
div.sheet-motivation label {
|
|
width: 20%;
|
|
}
|
|
|
|
/* Margins on CYNICISM */
|
|
div.sheet-motivation label:nth-of-type(2) {
|
|
margin-left: 36%;
|
|
}
|
|
|
|
div.sheet-motivation input[name="attr_cynicism"] {
|
|
margin-left: 5%;
|
|
margin-right: 9%;
|
|
}
|
|
|
|
div.sheet-motivation input[name="attr_cynicism"],
|
|
div.sheet-motivation input[name="attr_resolve"] {
|
|
width: 3.5em;
|
|
}
|
|
|
|
/* Toughness row */
|
|
div.sheet-toughness label {
|
|
width: 28%;
|
|
}
|
|
|
|
div.sheet-toughness div:nth-of-type(1) label:nth-of-type(1) {
|
|
margin-left: 21%;
|
|
text-align: center;
|
|
margin-right: 2%;
|
|
}
|
|
|
|
div.sheet-toughness div:nth-of-type(1) label:nth-of-type(2) {
|
|
width: 15%;
|
|
}
|
|
|
|
div.sheet-toughness div:nth-of-type(1) label:nth-of-type(3) {
|
|
width: 30%;
|
|
}
|
|
|
|
div.sheet-toughness div:nth-of-type(1) div.sheet-small-box:nth-of-type(1) {
|
|
margin-left: 28%;
|
|
}
|
|
|
|
div.sheet-toughness input[name="attr_toughness_other"] {
|
|
margin-right: 5%;
|
|
}
|
|
|
|
div.sheet-toughness div:nth-of-type(1) div.sheet-small-box:nth-of-type(2) {
|
|
margin-left: 2%;
|
|
}
|
|
|
|
div.sheet-toughness div:nth-of-type(2) label:nth-of-type(2) {
|
|
width: 20%;
|
|
}
|
|
|
|
div.sheet-toughness div:nth-of-type(2) label:nth-of-type(3) {
|
|
margin-left: 2%;
|
|
width: 18%;
|
|
}
|
|
|
|
div.sheet-toughness div:nth-of-type(2) div.sheet-small-box:nth-of-type(1){
|
|
margin-left: 2%;
|
|
margin-right: 5%;
|
|
}
|
|
|
|
div.sheet-toughness input[name="attr_armor_defense_other"] {
|
|
margin-left: 3%;
|
|
}
|
|
|
|
div.sheet-toughness div:nth-of-type(2) div.sheet-small-box:nth-of-type(2) {
|
|
margin-left: 7%;
|
|
}
|
|
|
|
/* NERVE */
|
|
div.sheet-nerve label {
|
|
width: 30%;
|
|
}
|
|
|
|
div.sheet-nerve input[name="attr_nerve"] {
|
|
margin-right: 3%;
|
|
}
|
|
|
|
div.sheet-nerve input[name="attr_nerve_other"] {
|
|
margin-left: 5%;
|
|
margin-right: 5%;
|
|
}
|
|
|
|
div.sheet-nerve div.sheet-small-box {
|
|
margin-left: 13%;
|
|
}
|
|
|
|
/* WEAPONS BOX */
|
|
div.sheet-weapons label:nth-of-type(1) {
|
|
margin-right: 2%;
|
|
width: 25%;
|
|
}
|
|
|
|
div.sheet-weapons label:nth-of-type(4) {
|
|
margin-right: 2%;
|
|
width: 25%;
|
|
}
|
|
|
|
div.sheet-weapons label:nth-of-type(2),
|
|
div.sheet-weapons label:nth-of-type(3),
|
|
div.sheet-weapons label:nth-of-type(5) {
|
|
width: 10%;
|
|
}
|
|
|
|
div.sheet-weapons input[name="attr_weapon"],
|
|
div.sheet-weapons input[name="attr_attack_spd"] {
|
|
width: 25%;
|
|
}
|
|
|
|
div.sheet-weapons input[name="attr_other_notes"] {
|
|
width: 100%;
|
|
}
|
|
|
|
div.sheet-weapon-classes label {
|
|
text-align: center;
|
|
width: 17%;
|
|
}
|
|
|
|
div.sheet-weapon-classes label:nth-of-type(1) {
|
|
margin-left: 26%;
|
|
}
|
|
|
|
div.sheet-weapon-classes label:nth-of-type(5) {
|
|
width: 25%;
|
|
}
|
|
|
|
div.sheet-weapon-classes input[type="checkbox"] + span {
|
|
margin-right: 8%;
|
|
}
|
|
|
|
|
|
/* ASPECT row */
|
|
div.sheet-aspect input[name="attr_aspect"] {
|
|
width: 100%;
|
|
}
|
|
|
|
/* PSYCHIC Row */
|
|
div.sheet-psychic,
|
|
div.sheet-notes {
|
|
margin-bottom: 2%;
|
|
}
|
|
|
|
div.sheet-psychic label:nth-of-type(1) {
|
|
width: 70%;
|
|
}
|
|
|
|
div.sheet-psychic label:nth-of-type(2) {
|
|
width: 20%;
|
|
}
|
|
|
|
div.sheet-psychic label:nth-of-type(3) {
|
|
width: 8%;
|
|
}
|
|
|
|
div.sheet-psychic input[name="attr_power"] {
|
|
width: 75%;
|
|
}
|
|
|
|
div.sheet-psychic input[name="attr_overcharge"],
|
|
div.sheet-psychic input[name="attr_uses"] {
|
|
width: 3.5em;
|
|
}
|
|
|
|
/* Possession Row */
|
|
div.sheet-possession input[type="text"] {
|
|
width: 100%;
|
|
} |