mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-02 05:02:28 +00:00
469 lines
12 KiB
CSS
469 lines
12 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;
|
|
background-color : #ddd;
|
|
border-bottom : 2px solid #666;
|
|
border-bottom-right-radius: 2px;
|
|
border-color : #66790b;
|
|
border-radius : 5px;
|
|
border-right : 3px solid #999;
|
|
border-style : outset;
|
|
font-weight : bold;
|
|
}
|
|
|
|
div {
|
|
background-color: transparent;}
|
|
|
|
fieldset {
|
|
background: transparent;}
|
|
|
|
h1 {
|
|
color: #000;}
|
|
|
|
h2 {
|
|
color: #66790b;}
|
|
|
|
h3 {
|
|
color: #ce541d;}
|
|
|
|
h1, h2, h3, h4 {
|
|
margin : 0px;
|
|
padding : 0px;
|
|
text-transform: uppercase;
|
|
width : 100%;}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
background-color: transparent;
|
|
border : none;
|
|
border-radius : 0px;
|
|
border-bottom : 1px dotted #66790b;}
|
|
|
|
input[type="text"]:placeholder-shown,
|
|
input[type="number"]:placeholder-shown {
|
|
background-color: #66790b30;}
|
|
|
|
label, label > input[type="text"] { text-transform: uppercase; }
|
|
|
|
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;}
|
|
|
|
.sheet-container {
|
|
width: 800px;}
|
|
|
|
.sheet-pc {
|
|
width : 100%;}
|
|
|
|
.sheet-container div {
|
|
box-sizing : border-box;
|
|
vertical-align: top;}
|
|
|
|
input.sheet-whisper-toggle + button {
|
|
font-family: "pictos";}
|
|
|
|
button.sheet-dicefontd6 {
|
|
font-family: "dicefontd6";
|
|
left : -30%;
|
|
position : relative;
|
|
top : 9px;}
|
|
|
|
button.sheet-dicefontd6 + h2 {
|
|
margin-top: -20px;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** PC ***************************/
|
|
/********************************************************************************************************/
|
|
div.sheet-maindiv {
|
|
display: inline-block;
|
|
width: 60%;}
|
|
|
|
div.sheet-maindiv div {
|
|
width: 100%;}
|
|
|
|
div.sheet-maindiv h2 {
|
|
margin-top: 10px;
|
|
margin-left: 1%;}
|
|
|
|
div.sheet-maindiv input[type="text"] {
|
|
margin-left: 1%;
|
|
width: 80%;}
|
|
|
|
div.sheet-maindiv label {
|
|
display : inline-block;
|
|
margin-left: 1%;
|
|
width: 17%;}
|
|
|
|
div.sheet-maindiv label.sheet-green {
|
|
color: #66790b;}
|
|
|
|
div.sheet-maindiv div:nth-of-type(1n+3) label,
|
|
div.sheet-maindiv div:nth-of-type(1n+3) label > input[type="text"] {
|
|
color : black;
|
|
font-size : 1em;
|
|
font-weight: 700;}
|
|
|
|
div.sheet-maindiv label:nth-of-type(3),
|
|
div.sheet-maindiv label:nth-of-type(4),
|
|
div.sheet-maindiv label:nth-of-type(5),
|
|
div.sheet-maindiv label:nth-of-type(6) {
|
|
width: 16%;}
|
|
|
|
div.sheet-maindiv div.sheet-home input[type="text"] {
|
|
width: 73%;}
|
|
|
|
div.sheet-maindiv div.sheet-write input[type="text"] {
|
|
width: 44%;}
|
|
|
|
div.sheet-maindiv div.sheet-home label {
|
|
width: 23%;}
|
|
|
|
div.sheet-maindiv div.sheet-write label {
|
|
width: 53%;}
|
|
|
|
div.sheet-maindiv label:last-child {
|
|
width: 100%;}
|
|
|
|
div.sheet-maindiv textarea {
|
|
width: 100%;}
|
|
|
|
div.sheet-maindiv div label > input[type="text"] {
|
|
padding-left: inherit;
|
|
}
|
|
|
|
/* TITLE */
|
|
div.sheet-title {
|
|
display: inline-block;
|
|
margin-left: 2%;
|
|
width: 35%;}
|
|
|
|
div.sheet-title label {
|
|
width: fit-content;}
|
|
|
|
div.sheet-title input[type="text"] {
|
|
border : none;
|
|
color : #66790b;
|
|
font-size : 3em;
|
|
font-weight : bold;
|
|
text-transform: uppercase;
|
|
width : 100%;}
|
|
|
|
div.sheet-info-row {
|
|
display: inline-block;
|
|
width: 100%;}
|
|
|
|
/* MID ROW */
|
|
div.sheet-mid-row,
|
|
div.sheet-regard-row,
|
|
div.sheet-advancement-row {
|
|
border-top: 5px solid #66790b;
|
|
margin-top: 5px;
|
|
width : 100%;}
|
|
|
|
div.sheet-mid-row div.sheet-mid-col {
|
|
display : inline-block;
|
|
text-align: center;
|
|
width : 33%;}
|
|
|
|
div.sheet-moverole {
|
|
padding: 0.5%;}
|
|
|
|
div.sheet-moverole input[type="text"] {
|
|
margin-bottom: 5px;
|
|
margin-left: 1%;
|
|
font-weight: bolder;}
|
|
|
|
div.sheet-moverole textarea {
|
|
margin-left: 8%;
|
|
width: 83%;}
|
|
|
|
div.sheet-square {
|
|
display: inline-block;
|
|
border: 4px solid #66790b;
|
|
height: 100px;
|
|
margin: 5px;
|
|
width: 100px;}
|
|
|
|
div.sheet-square button[type="roll"] {
|
|
float : left;
|
|
margin : -3px 3px 0px -3px !important;
|
|
position : relative;
|
|
text-transform: uppercase;
|
|
z-index : 3;}
|
|
|
|
div.sheet-square button[type="roll"]:hover {
|
|
color : #ce541d;
|
|
font-weight: bold;}
|
|
|
|
div.sheet-square input[type="number"] {
|
|
border : none;
|
|
font-size : 4em;
|
|
height : 80%;
|
|
text-align: center;
|
|
width : 100%;}
|
|
|
|
/* BOTTOM ROW */
|
|
div.sheet-regard-col {
|
|
padding: 0.5%;
|
|
display: inline-block;}
|
|
|
|
div.sheet-regard-col:nth-of-type(1) {
|
|
width: 70%;}
|
|
|
|
div.sheet-regard-col:nth-of-type(2) {
|
|
width: 29%;}
|
|
|
|
div.sheet-regard-col:nth-of-type(1) input[type="text"]:nth-of-type(1) {
|
|
margin-left: 1%;
|
|
margin-right: 3%;}
|
|
|
|
div.sheet-regard-col:nth-of-type(1) input[type="text"] {
|
|
width: 41%;}
|
|
|
|
div.sheet-regard {
|
|
display : inline-block;
|
|
margin-bottom: 2%;
|
|
margin-left : 8%;
|
|
width : 40%;}
|
|
|
|
div.sheet-regard span {
|
|
display : inline-block;
|
|
float :left;
|
|
color : #66790b;
|
|
height : 75px;
|
|
font-size: 10em;}
|
|
|
|
div.sheet-regard-col:nth-of-type(2) label {
|
|
display: inline;
|
|
padding: 0px;
|
|
margin-left: 5%;}
|
|
|
|
|
|
/* MEDALS ROW */
|
|
div.sheet-mid-col:nth-of-type(3) label:nth-of-type(6),
|
|
div.sheet-mid-col:nth-of-type(3) label:nth-of-type(7) {
|
|
color : #66790b;
|
|
display : inline-block;
|
|
font-size: 1em;
|
|
width : 45%;}
|
|
|
|
/* Make Honors header smaller */
|
|
div.sheet-honors div.sheet-moverole:nth-of-type(2) h2 {
|
|
font-size: 1.7em;}
|
|
|
|
div.sheet-command {
|
|
padding: 0.5%;}
|
|
|
|
div.sheet-command input[type="text"]{
|
|
height : 20px;
|
|
margin-bottom: 2px;
|
|
width : 98%;}
|
|
|
|
div.sheet-command input[type="text"]:nth-of-type(6),
|
|
div.sheet-command input[type="text"]:nth-of-type(7) {
|
|
color : #66790b;
|
|
font-size : 1em;
|
|
text-align : center;
|
|
text-transform: uppercase;
|
|
width : 55%;}
|
|
|
|
div.sheet-command label {
|
|
font-size : 0.8em;
|
|
margin-bottom: 2px;
|
|
padding-left : 0px;
|
|
width : 100%;}
|
|
|
|
/* ADVANCEMENT ROW */
|
|
div.sheet-adv-col {
|
|
display: inline-block;
|
|
padding: 0.5%;
|
|
width: 49.7%;}
|
|
|
|
div.sheet-adv-col label {
|
|
font-size : 1em;
|
|
margin-bottom: 0px;
|
|
padding-left : 0px;}
|
|
|
|
div.sheet-adv-row {
|
|
margin: 5px 0px;
|
|
width: 100%;}
|
|
|
|
div.sheet-adv-row label {
|
|
display: inline-block;
|
|
padding-right: 0px;
|
|
width : fit-content;}
|
|
|
|
div.sheet-adv-row input[type="text"] {
|
|
width: 95%;}
|
|
|
|
div.sheet-marks label {
|
|
width: 90%;}
|
|
|
|
|
|
/* Random Customizations */
|
|
input.sheet-whisper-toggle + button {
|
|
font-family: "pictos";
|
|
font-size : 1.5em;
|
|
left : 80%;
|
|
margin-left: -9%;
|
|
position : relative;
|
|
top : -30px;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** HIGHLIGHT BUTTONS ***************************/
|
|
/********************************************************************************************************/
|
|
input.sheet-whisper-toggle[value*="gm"] + button[name*="whisper"] {
|
|
color: #ce541d;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** FOOTER ***************************/
|
|
/********************************************************************************************************/
|
|
.sheet-footer {
|
|
border: none;
|
|
font-size: 0.55em;
|
|
line-height: 15px;
|
|
margin-top: 15px;
|
|
text-align: left;
|
|
width: 700px;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** REPEATING SECTIONS *********************/
|
|
/********************************************************************************************************/
|
|
.repcontainer .repitem {
|
|
|
|
};
|
|
|
|
.repcontrol .btn {
|
|
background : none;
|
|
border : medium none;
|
|
box-shadow : none;
|
|
color : transparent !important;
|
|
display : inline-block;
|
|
margin-left: 10px;
|
|
outline : 0;
|
|
padding : 0px 0px 0px 0px;
|
|
text-shadow: none;
|
|
width : 25px;}
|
|
|
|
/* 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 : 2em;}
|
|
|
|
.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 : 5px;
|
|
text-align : center;
|
|
text-transform : capitalize;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-rolls .sheet-template-row {
|
|
background-color: #718406;
|
|
padding: 5px;}
|
|
|
|
/* 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,
|
|
.sheet-rolltemplate-rolls .inlinerollresult.importantroll,
|
|
.sheet-rolltemplate-rolls .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-rolls .inlinerollresult.fullcrit {
|
|
background-color: transparent;
|
|
border : none;
|
|
color : white;
|
|
display : inline-block;
|
|
font-size : 25px;
|
|
padding : 5px;}
|
|
|
|
/**********************************************************************************************************/
|
|
/*************************** 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;} |