mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
Cassie Levett
dfebdc4a87
* SR 1.41 - fixed modifier,edge,wound buttons * CSS update for French & Spanish * Dice roller, Wounds improvement (#14)
674 lines
18 KiB
CSS
674 lines
18 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"],
|
|
button[type="action"] {
|
|
font-size: 1em;
|
|
margin: 0px;
|
|
padding: 0px;}
|
|
|
|
button[type="action"]:hover {
|
|
color: #fff;
|
|
text-shadow: 1px 1px 2px black, 0 0 25px red, 0 0 5px #e31715;}
|
|
|
|
div {
|
|
background-color: transparent;}
|
|
|
|
fieldset {
|
|
background: transparent;}
|
|
|
|
h1, h2, h3, h4 {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
width: fit-content;}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
background-color: transparent;
|
|
border : none;
|
|
border-bottom: 1px solid black;
|
|
border-radius: 0px;}
|
|
|
|
input[type="text"]:hover,
|
|
input[type="number"]:hover,
|
|
input[type="text"]:focus,
|
|
input[type="number"]:focus {
|
|
color: white;
|
|
background: #929082;
|
|
padding-bottom: 1px;
|
|
outline: #39201e;}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"],
|
|
input[type="checkbox"] + span,
|
|
input[type="radio"] + span {
|
|
position: relative;}
|
|
|
|
label {
|
|
display: inline-block;
|
|
margin : 0px;
|
|
padding: 0px; }
|
|
|
|
span {
|
|
word-break: break-word;}
|
|
|
|
textarea {
|
|
border-bottom : 1px dotted #FCD116;
|
|
font-size : 12px;
|
|
font-weight : normal;
|
|
height : 100px;
|
|
line-height : 18px;
|
|
min-height : 50px;
|
|
overflow : hidden;
|
|
overflow-wrap : break-word;
|
|
padding : 2px;
|
|
resize : vertical;
|
|
text-align : left;
|
|
vertical-align: top;
|
|
white-space : pre-line;
|
|
width : 95%;}
|
|
|
|
.charsheet {
|
|
width: 850px;}
|
|
|
|
.sheet-container {
|
|
margin-left: -2%;
|
|
width : 100%;}
|
|
|
|
.sheet-container div {
|
|
box-sizing : border-box;
|
|
vertical-align: top;}
|
|
|
|
.sheet-pc {
|
|
border : 2px solid black;
|
|
padding: 1%;
|
|
width : 100%;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** TAB ***************************/
|
|
/********************************************************************************************************/
|
|
div.sheet-tabs {
|
|
display : inline-block;
|
|
width : 100%;}
|
|
|
|
div.sheet-tabs button {
|
|
margin: 0px 2%;
|
|
padding: 5%;
|
|
width : fit-content;}
|
|
|
|
div.sheet-tabs div {
|
|
display: inline-block;}
|
|
|
|
div.sheet-tabs div:nth-of-type(1) {
|
|
margin-right: 1%;
|
|
width: 18%;}
|
|
|
|
div.sheet-tabs div:nth-of-type(2) {
|
|
margin-right: 2%;
|
|
width: 22%;}
|
|
|
|
div.sheet-tabs div:nth-of-type(3) {
|
|
margin-right: 1%;
|
|
width: 45%;}
|
|
|
|
div.sheet-tabs div:nth-of-type(4) {
|
|
width: 9%;}
|
|
|
|
div.sheet-tabs h1 {
|
|
color: #39201e;
|
|
text-shadow:
|
|
3px 3px 0 #ba2c2c,
|
|
-1px -1px 0 #ba2c2c,
|
|
1px -1px 0 #ba2c2c,
|
|
-1px 1px 0 #ba2c2c,
|
|
1px 1px 0 #ba2c2c;}
|
|
|
|
div.sheet-tabs h2 {
|
|
font-size: 0.8em;}
|
|
|
|
input.sheet-whisper-toggle + button {
|
|
font-family: "pictos";}
|
|
|
|
div.sheet-diceroller {
|
|
display: inline;}
|
|
|
|
div.sheet-diceroller button {
|
|
border: 1px solid black;
|
|
box-shadow: inset 0 0 8px 3px #ccc;
|
|
text-transform: uppercase;}
|
|
|
|
div.sheet-diceroller label {
|
|
width: fit-content;}
|
|
|
|
div.sheet-diceroller input[type="number"] {
|
|
maring-left : 2%;
|
|
maring-right: 2%;
|
|
text-align : center;}
|
|
|
|
div.sheet-diceroller input[type="text"] {
|
|
margin-right: 1%;
|
|
width: 60%;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** PC ***************************/
|
|
/********************************************************************************************************/
|
|
div.sheet-info-row {
|
|
display : inline-block;
|
|
width : 100%;}
|
|
|
|
div.sheet-flexcol {
|
|
display: inline-block;
|
|
width: 49%;}
|
|
|
|
div.sheet-info-row div.sheet-flexcol div {
|
|
padding: 1% 0px;}
|
|
|
|
/* INPUTS WITH ALL THE PLAYER AND CHARACTER DETAILS */
|
|
/* DATE */
|
|
div.sheet-details div:nth-of-type(1) input:nth-of-type(2) {
|
|
width: 30%;}
|
|
|
|
/* SEX, HAIR, EYES.... */
|
|
div.sheet-details div:nth-of-type(2) input {
|
|
width: 20%;}
|
|
|
|
/* DOB/OCCUPATION/NATIONALITY */
|
|
div.sheet-details div:nth-of-type(3) input {
|
|
width: 75%;}
|
|
|
|
div.sheet-details div:nth-of-type(3) input:nth-of-type(1n+2) {
|
|
width: 78%;}
|
|
|
|
/* AUTHORIZED */
|
|
div.sheet-details div:nth-of-type(5) input {
|
|
width: 95%;}
|
|
|
|
/* ID NO */
|
|
div.sheet-details div:nth-of-type(6) input {
|
|
width: 85%;}
|
|
|
|
div.sheet-details input[type="text"]:nth-of-type(1n+9) {
|
|
margin-bottom: 2%;
|
|
width : 100%;}
|
|
|
|
div.sheet-details label {
|
|
font-size : 0.8em;
|
|
text-transform: uppercase;
|
|
font-weight : normal;
|
|
margin-right : 3%;
|
|
width : fit-content;}
|
|
|
|
/* INPUTS FOR TRACKING DAMAGE? */
|
|
div.sheet-wounds button[type="action"] {
|
|
font-family : fantasy;
|
|
font-weight : bold;
|
|
text-align : left;
|
|
text-transform: capitalize;
|
|
width : 25%;}
|
|
|
|
div.sheet-wounds input[type="hidden"] + button {
|
|
display : inline-block;
|
|
height : 20px;
|
|
border : solid 1px #a8a8a8;
|
|
border-radius: 50%;
|
|
margin-right : 1%;
|
|
width : 20px;}
|
|
|
|
div.sheet-wounds input[type="hidden"][value="0"] + button {
|
|
background: #33333305;
|
|
box-shadow: inset 0 0 8px 3px #ccc;}
|
|
|
|
div.sheet-wounds input[type="hidden"][value="1"] + button {
|
|
background: #3333336e;}
|
|
|
|
div.sheet-wounds input[type="hidden"][value="2"] + button {
|
|
background: #333;}
|
|
|
|
/* STAST section */
|
|
div.sheet-stats {
|
|
vertical-align: middle;
|
|
text-align: center;}
|
|
|
|
div.sheet-stats label {
|
|
font-size: 0.85em;
|
|
font-weight: normal;
|
|
width: fit-content;}
|
|
|
|
div.sheet-stats input[type="number"] {
|
|
background : radial-gradient(#f6f6f6, #dfdfdf);
|
|
border : 1px solid #ba2c2c;
|
|
border-radius: 50%;
|
|
display : inline-block;
|
|
height : 25px;
|
|
text-align : center;
|
|
width : 25px;}
|
|
|
|
div.sheet-stats input[type="number"]:hover,
|
|
div.sheet-stats input[type="number"]:focus {
|
|
background: #929082;}
|
|
|
|
/* Fake radio */
|
|
div.sheet-meters input[type="radio"] + span::before {
|
|
background : #333;
|
|
border : solid 1px #a8a8a8;
|
|
border-radius : 50%;
|
|
box-shadow : 0 0 2px #ccc;
|
|
content : "";
|
|
display : inline-block;
|
|
height : 18px;
|
|
margin-right : 1%;
|
|
width : 18px;}
|
|
|
|
div.sheet-meters input[type="radio"] + span::before {
|
|
border-radius: 2%;
|
|
box-shadow : 0 0 2px #658160;
|
|
height : 10px;
|
|
margin-right : 0px;
|
|
width : 10px;}
|
|
|
|
div.sheet-meters input[type="radio"].sheet-failed + span::before {
|
|
background : #ba2c2c;
|
|
border-color: #ba2c2c;}
|
|
|
|
div.sheet-meters input[type="radio"].sheet-hardened + span::before {
|
|
background : #658160;
|
|
border-color: #658160;}
|
|
|
|
/* Remove dot from all radios _after_ selected one */
|
|
div.sheet-meters input[type="radio"]:checked ~ input[type="radio"] + span::before,
|
|
div.sheet-meters input[type="hidden"][value="0"] ~ span::before {
|
|
background: #f6f6f6;
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);}
|
|
|
|
/* meters SECTION */
|
|
div.sheet-meters button[type="action"] {
|
|
font-size: 1em;
|
|
width: 100%;}
|
|
|
|
div.sheet-meters div.sheet-statcol {
|
|
display: inline-block;
|
|
width : 38%;}
|
|
|
|
div.sheet-meters div.sheet-statcol:nth-of-type(2) {
|
|
width: 20%;}
|
|
|
|
div.sheet-meters button[type="action"]:hover {
|
|
color: #fff;
|
|
text-shadow: 1px 1px 2px black, 0 0 25px red, 0 0 5px #658160;}
|
|
|
|
div.sheet-meters label,
|
|
div.sheet-meters button[type="action"] {
|
|
color : #658160;
|
|
text-align : center;
|
|
text-transform: capitalize;}
|
|
|
|
div.sheet-meters div.sheet-statcol label {
|
|
margin: auto 2%;
|
|
width: 100%;}
|
|
|
|
div.sheet-meters input[type="number"] {
|
|
border : 1px solid #ba2c2c;
|
|
box-shadow: 0 0 10px #658160 inset;
|
|
height : 22px;
|
|
margin : 2% 20%;
|
|
text-align: center;}
|
|
|
|
/* Fake radio squares for STASTS */
|
|
div.sheet-meters input[type="radio"] {
|
|
cursor : pointer;
|
|
height : 12px;
|
|
left : 6px;
|
|
margin : 0px -6px;
|
|
opacity: 0;
|
|
top : -3px;
|
|
width : 12px;
|
|
z-index: 1;}
|
|
|
|
/* EVERY LABEL AFTER PIPS */
|
|
div.sheet-details label:nth-of-type(1n+9) {
|
|
width: fit-content;}
|
|
|
|
div.sheet-notes-col {
|
|
margin-right: 1%;}
|
|
|
|
/* WEAPONS */
|
|
div.sheet-weapons h2 {
|
|
display: inline-block;
|
|
font-size: 1.8em;
|
|
width: 25%;}
|
|
|
|
div.sheet-weapons label {
|
|
font-size : 0.8em;
|
|
text-align: center;
|
|
width : 11%;}
|
|
|
|
div.sheet-weapons label:nth-of-type(1) {
|
|
width: 29%;}
|
|
|
|
div.sheet-weapons label:nth-of-type(4),
|
|
div.sheet-weapons label:nth-of-type(5) {
|
|
width: 9%;}
|
|
|
|
div.sheet-weapons input[type="text"] {
|
|
width: 8%;}
|
|
|
|
div.sheet-weapons input[type="text"]:nth-of-type(1) {
|
|
width: 25%;}
|
|
|
|
div.sheet-weapons input[type="text"]:nth-of-type(3),
|
|
div.sheet-weapons input[type="text"]:nth-of-type(5),
|
|
div.sheet-weapons input[type="text"]:nth-of-type(6) {
|
|
width: 12%;}
|
|
|
|
/* SKILLS */
|
|
div.sheet-skills-col {
|
|
display: inline-block;
|
|
width: 48%;}
|
|
|
|
div.sheet-skills-col:nth-of-type(1) {
|
|
margin-right: 3%;}
|
|
|
|
div.sheet-skills-col h3 {
|
|
margin-bottom: 5px;}
|
|
|
|
div.sheet-skills-col h4 {
|
|
border-right : 1px solid #333;
|
|
color : #7b1915;
|
|
display : inline-block;
|
|
margin-bottom : 2%;
|
|
text-orientation: mixed;
|
|
width : 5%;
|
|
writing-mode : vertical-rl;}
|
|
|
|
/* BODY HEADER */
|
|
div.sheet-skills-col:nth-of-type(1) h4:nth-of-type(1) {
|
|
height: 250px;}
|
|
|
|
/* COORDINATION HEADER */
|
|
div.sheet-skills-col:nth-of-type(1) h4:nth-of-type(2) {
|
|
height: 360px;}
|
|
|
|
/* SENSE HEADER */
|
|
div.sheet-skills-col:nth-of-type(1) h4:nth-of-type(3) {
|
|
height: 150px;}
|
|
|
|
/* MIND HEADER */
|
|
div.sheet-skills-col:nth-of-type(2) h4:nth-of-type(1) {
|
|
height: 500px;}
|
|
|
|
/* COMMAND & EMPATHY HEADER */
|
|
div.sheet-skills-col:nth-of-type(2) h4:nth-of-type(2),
|
|
div.sheet-skills-col:nth-of-type(2) h4:nth-of-type(3) {
|
|
height: 150px;}
|
|
|
|
div.sheet-skills-col label {
|
|
width: 83%;
|
|
margin-right: 2%;
|
|
font-size: 0.9em;
|
|
text-transform: capitalize;}
|
|
|
|
div.sheet-skill-col {
|
|
display: inline-block;
|
|
margin-bottom: 5%;
|
|
width: 90%;}
|
|
|
|
div.sheet-skill-col div {
|
|
padding: 1% 0px;}
|
|
|
|
div.sheet-skill-col input[type="number"] {
|
|
height: 20px;
|
|
text-align: center;
|
|
width: 2em;}
|
|
|
|
div.sheet-skill-col input[type="text"] {
|
|
height: 20px;
|
|
width: 3em;}
|
|
|
|
/* CUSTOMIZE LABELS FOR SKILLS WITH TEXT INPTUS */
|
|
div.sheet-skill-mar label {
|
|
width: 40%;}
|
|
|
|
div.sheet-skill-mar input[type="text"] {
|
|
width: 38.9%;}
|
|
|
|
div.sheet-skill-mel label {
|
|
width: 47%;}
|
|
|
|
div.sheet-skill-mel input[type="text"] {
|
|
width: 31.9%;}
|
|
|
|
div.sheet-skill-dri label {
|
|
width: 25%;}
|
|
|
|
div.sheet-skill-dri input[type="text"] {
|
|
width: 53.9%;}
|
|
|
|
div.sheet-skill-fire label {
|
|
width: 30%;}
|
|
|
|
div.sheet-skill-fire input[type="text"] {
|
|
width: 48.9%;}
|
|
|
|
div.sheet-skill-pil label {
|
|
width: 20%;}
|
|
|
|
div.sheet-skill-pil input[type="text"]{
|
|
width: 58.9%;}
|
|
|
|
div.sheet-skill-sail label {
|
|
width: 15%;}
|
|
|
|
div.sheet-skill-sail input[type="text"] {
|
|
width: 63.9%}
|
|
|
|
div.sheet-skill-cust input[type="text"] {
|
|
width: 82.9%;}
|
|
|
|
div.sheet-skill-lan label {
|
|
width: 35%;}
|
|
|
|
div.sheet-skill-lan input[type="text"] {
|
|
width: 43.9%;}
|
|
|
|
div.sheet-skill-mech label {
|
|
width: 33%;}
|
|
|
|
div.sheet-skill-mech input[type="text"] {
|
|
width: 45.9%;}
|
|
|
|
div.sheet-skill-perf label {
|
|
width: 42%;}
|
|
|
|
div.sheet-skill-perf input[type="text"] {
|
|
width: 36.9%;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** NPC ***************************/
|
|
/********************************************************************************************************/
|
|
div.sheet-npc {
|
|
border : 1px solid black;
|
|
padding: 1%;
|
|
width : 65%;}
|
|
|
|
div.sheet-npc div {
|
|
padding: 1% 0px;}
|
|
|
|
div.sheet-npc input[type="text"][name*="character"] {
|
|
font-size : 2em;
|
|
margin-bottom: 2%;
|
|
text-align : left;
|
|
width : 100%;}
|
|
|
|
div.sheet-npc label {
|
|
margin-right : 5%;
|
|
text-transform: capitalize;
|
|
width : 50%;}
|
|
|
|
div.sheet-npc input[type="text"] {
|
|
text-align: center;
|
|
width: 8em;}
|
|
|
|
div.sheet-npc-stat-block {
|
|
width: 80%;}
|
|
|
|
div.sheet-npc-body-details div {
|
|
margin-left: 5%;}
|
|
|
|
div.sheet-npc-body-details label {
|
|
margin-right: 5%;
|
|
width : 65%;}
|
|
|
|
div.sheet-npc-extras input[type="text"] {
|
|
font-weight: bolder;
|
|
text-align: left;
|
|
width : 100%;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** HIDE & SHOW THINGS ***************************/
|
|
/********************************************************************************************************/
|
|
div.sheet-pc,
|
|
div.sheet-npc {
|
|
display: none;}
|
|
|
|
input.sheet-type[value="pc"] ~ .sheet-pc,
|
|
input.sheet-type[value="npc"] ~ .sheet-npc {
|
|
display : block;}
|
|
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** HIGHLIGHT BUTTONS ***************************/
|
|
/********************************************************************************************************/
|
|
input.sheet-whisper-toggle[value*="gm"] + button[name*="whisper"],
|
|
input.sheet-type[value="pc"] ~ div.sheet-tabs button[name*="pc"],
|
|
input.sheet-type[value="npc"] ~ div.sheet-tabs button[name*="npc"] {
|
|
color : #fff;
|
|
background-color: #7b1915;
|
|
box-shadow : inset 0px 0px 3px 1px #e31715;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** FOOTER ***************************/
|
|
/********************************************************************************************************/
|
|
.sheet-footer {
|
|
border: none;
|
|
font-size: 0.55em;
|
|
line-height: 15px;
|
|
margin-top: 15px;
|
|
text-align: left;
|
|
width: 700px;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** REPEATING SECTIONS *********************/
|
|
/********************************************************************************************************/
|
|
.repcontainer {}
|
|
|
|
/* This will make the Add & Modify words transparent so that only our symbols below show up */
|
|
.repcontrol .btn {
|
|
color: transparent;}
|
|
|
|
/* 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: '(';}
|
|
|
|
.repcontrol .repcontrol_add:after {
|
|
content: '&';}
|
|
|
|
.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;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** 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: #555;}
|
|
|
|
/* 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 : white;
|
|
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,
|
|
.sheet-rolltemplate-rolls .inlinerollresult.fullcrit {
|
|
color: white;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** FIREFOX ***************************/
|
|
/********************************************************************************************************/
|
|
input[type=number]::-webkit-outer-spin-button,
|
|
input[type=number]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;}
|
|
|
|
input[type=number] {
|
|
-moz-appearance:textfield;} |