Files
roll20-character-sheets/Tales from the Loop/TFTL css.css
T
2022-03-10 14:22:06 -06:00

827 lines
18 KiB
CSS

@import url('https://fonts.googleapis.com/css?family=Catamaran:800|Montserrat:400:800&display=swap');
/* Colours for Reference:
Light Pink: #fde6d3
Dark Pink: #f8bd90
Orange: #ee752c
Shadow Grey: #3d3d29
Deep Purple: #793149
Dark Purple: #af7b87
Light Purple: #dac0c3
Dark Blue: #b0b9c8
Light Blue: #dce0e9
*/
.charsheet.lang-sv .sheet-full{
background-image: url("http://i.imgur.com/qzeYEFG.jpg");
}
/****** Tabs ******/
.sheet-section-1,
.sheet-section-2 {
display: none;
}
.sheet-tab1:checked ~ .sheet-section-1,
.sheet-tab2:checked ~ .sheet-section-2 {
display: block;
}
.sheet-wrapper input.sheet-tab {
width: 50px;
height: 15px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 998;
}
.sheet-wrapper span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 12px;
background: #dac0c3;
color: #af7b87;
font-weight: bold;
border-radius: 5px;
border-style: outset;
border-color: #af7b87;
width: 50px;
height: 15px;
cursor: pointer;
position: relative;
vertical-align: middle;
margin-left: -45px;
}
.sheet-wrapper input.sheet-tab:checked + span.sheet-tab {
color: #ee752c;
border-style: inset;
border-color: #ee752c;
background: #fde6d3;
}
/****** Divs ******/
div {
box-sizing: border-box;
}
/* Contains the whole page */
.sheet-wrapper {
width: 750px;
background-color: white;
position: relative;
font-size: 14px;
font-family: "Catamaran", Gadget, sans-serif;
color: black;
}
/* Spans across the page (title) */
.sheet-full,
.sheet-tftf-full {
position: relative;
width: 100%;
height: 140px;
padding: 10px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
.sheet-full {
background-image: url("https://s3.amazonaws.com/files.d20.io/images/134821648/zsgtTwHGN6Ooki4IZQtc6g/max.png?1589569230");
}
.sheet-tftf-full {
background-image: url("https://i.imgur.com/SbQ0HKl.jpg");
}
/* Creates the left hand column */
.sheet-left {
float: left;
width: 36%;
}
/* Creates the right hand column */
.sheet-right {
float: right;
width: 60%;
}
/* Rows */
.sheet-label,
.sheet-boxLight,
.sheet-boxDark,
.sheet-exp,
.sheet-boxInfo,
.sheet-boxInfoText,
.sheet-iconic,
.sheet-relation,
.sheet-tftf-boxLight,
.sheet-tftf-boxDark,
.sheet-tftf-exp,
.sheet-tftf-boxInfo,
.sheet-tftf-boxInfoText,
.sheet-tftf-iconic,
.sheet-tftf-relation,
.sheet-tftf-scarsBox,
.sheet-tftf-shame {
width: 100%;
padding: 5px;
border-style: hidden solid solid solid;
border-width: 1px;
border-color: black;
-webkit-box-shadow: 1px 1px 2px 0px #3d3d29;
-moz-box-shadow: 1px 1px 2px 0px #3d3d29;
box-shadow: 1px 1px 2px 0px #3d3d29;
overflow: hidden;
}
/* Black and white background for headers */
.sheet-label {
padding: .75em;
color: white;
background-color: #000;
background-image: linear-gradient(90deg, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 55%), url("http://i.imgur.com/CDBj8fq.jpg");
font-size: 11pt;
font-family: "Catamaran", sans-serif;
font-weight: 800;
line-height: 1;
text-transform: uppercase;
}
label {
font-size: 10pt;
font-family: "Catamaran", sans-serif;
font-weight: 800;
text-transform: uppercase;
}
/* Light pink rows */
.sheet-boxLight {
background-color: #fde6d3;
}
.sheet-iconic,
.sheet-boxInfo,
.sheet-boxInfoText,
.sheet-relation {
background-color: #fff2da;
}
/* Light purple rows */
.sheet-tftf-boxLight {
background-color: #dac0c3;
}
/* Light blue rows */
.sheet-tftf-boxInfo,
.sheet-tftf-boxInfoText,
.sheet-tftf-iconic,
.sheet-tftf-relation,
.sheet-tftf-scarsBox,
.sheet-tftf-shame {
background-color: #dce0e9;
}
/* Dark pink rows */
.sheet-boxDark {
background-color: #f8bd90;
}
/* Dark purple rows */
.sheet-tftf-boxDark {
background-color: #af7b87;
}
/* Div for experience */
.sheet-exp {
background-color: #f8bd90;
width: 100%;
}
.sheet-tftf-exp {
background-color: #af7b87;
width: 100%;
}
/* Div for large checkboxes */
.sheet-boxChk,
.sheet-tftf-boxChk {
float: left;
width: 10%;
padding: 0px;
margin: 0px;
}
/* Left information column on the right */
.sheet-leftCol,
.sheet-tftf-leftCol {
float: left;
width: 45%;
}
/* Right information column on the right */
.sheet-rightCol,
.sheet-tftf-rightCol {
float: right;
width: 50%;
}
/* Luck */
.sheet-luck {
float: left;
width: 50%;
}
/* Keeps divs position relative to the div on top, even if the top div expands downwards */
.sheet-clearfix::after{
content: "";
clear: both;
display: table;
}
/****** Input Boxes ******/
.sheet-wrapper input,
.sheet-wrapper select,
.sheet-wrapper textarea {
border-radius: 0;
}
/* Number input boxes */
.sheet-left input[type=number],
.sheet-right input[type=number],
.sheet-tftf-left input[type=number],
.sheet-tftf-right input[type=number] {
text-align: center;
font-family: "Catamaran", Gadget, sans-serif;
font-size: 15px;
float: right;
width: 50px;
border-color: #3d3d29;
border-radius: 0;
-webkit-box-shadow: 1px 1px 2px 0px rgba(61, 61, 41,0.5);
-moz-box-shadow: 1px 1px 2px 0px rgba(61, 61, 41,0.5);
box-shadow: 1px 1px 2px 0px rgba(61, 61, 41,0.5);
}
/* Number input boxes in right column */
.sheet-rightCol input[type=number],
.sheet-leftCol input[type=number],
.sheet-tftf-rightCol input[type=number],
.sheet-tftf-leftCol input[type=number] {
border: none;
font-family: "Catamaran", Gadget, sans-serif;
font-size: 15px;
width: 55%;
text-align: center;
box-shadow: none;
}
.sheet-rightCol input[type=number],
.sheet-leftCol input[type=number] {
background-color: #f8bd90;
}
.sheet-tftf-rightCol input[type=number],
.sheet-tftf-leftCol input[type=number] {
background-color: #b0b9c8;
}
.sheet-rightCol input[type=number],
.sheet-tftf-rightCol input[type=number] {
width:25%;
float:left;
}
.sheet-items input[type=number],
.sheet-tftf-items input[type=number] {
width:12%;
float:none;
}
/* Text input boxes */
.sheet-boxInfo input[type=text],
.sheet-items input[type=text],
.sheet-rightCol input[type=text],
.sheet-leftCol input[type=text],
.sheet-iconic input[type=text],
.sheet-tftf-boxInfo input[type=text],
.sheet-tftf-items input[type=text],
.sheet-tftf-rightCol input[type=text],
.sheet-tftf-leftCol input[type=text],
.sheet-tftf-iconic input[type=text],
.sheet-tftf-scarsBox input[type=text] {
border: none;
font-family: "Catamaran", Gadget, sans-serif;
font-size: 15px;
}
.sheet-boxInfo input[type=text],
.sheet-items input[type=text],
.sheet-rightCol input[type=text],
.sheet-leftCol input[type=text],
.sheet-iconic input[type=text] {
background-color: #f8bd90;
}
.sheet-tftf-boxInfo input[type=text],
.sheet-tftf-items input[type=text],
.sheet-tftf-rightCol input[type=text],
.sheet-tftf-leftCol input[type=text],
.sheet-tftf-iconic input[type=text],
.sheet-tftf-scarsBox input[type=text] {
background-color: #b0b9c8;
}
/* Name input box */
.sheet-boxInfo input[type=text],
.sheet-tftf-boxInfo input[type=text] {
width: 80%;
text-align: center;
float: right;
}
/* Scars input box */
.sheet-tftf-scarsBox input[type=text] {
width: 80%;
text-align: center;
float: left;
}
/* Iconic item input box */
.sheet-iconic input[type=text],
.sheet-tftf-iconic input[type=text] {
width: 45%;
text-align: center;
}
/* Small input boxes for age, luck, etc. */
.sheet-rightCol input[type=text],
.sheet-leftCol input[type=text],
.sheet-tftf-rightCol input[type=text],
.sheet-tftf-leftCol input[type=text] {
float: right;
width: 55%;
}
/* Input boxes for items */
.sheet-items input[type=text],
.sheet-tftf-items input[type=text] {
float: none;
width: 52%;
text-align: left;
}
/* Input boxes for luck */
.sheet-luck input[type=number],
.sheet-tftf-luck input[type=number] {
float: left;
width: 50%;
text-align: center;
}
/* Input boxes for repeating relationship fields */
.sheet-relation input[type=text],
.sheet-tftf-relation input[type=text] {
float: left;
margin-right: 5px;
font-family: "Catamaran", Gadget, sans-serif;
font-size: 10pt;
color: black;
border: none;
width: 25%;
box-shadow: none;
}
.sheet-relation input[type=text] {
background-color: transparent;
}
.sheet-tftf-relation input[type=text] {
background-color: #b0b9c8;
}
/* Labels */
.sheet-boxInfo label,
.sheet-rightCol label,
.sheet-leftCol label,
.sheet-iconic label,
.sheet-tftf-boxInfo label,
.sheet-tftf-rightCol label,
.sheet-tftf-leftCol label,
.sheet-tftf-iconic label,
.sheet-tftf-shame label {
float: left;
margin-right: 5px;
font-size: 11px;
color: black;
margin-bottom: 0px;
}
.sheet-boxDark span,
.sheet-boxLight span {
font-family: "Catamaran", Gadget, sans-serif;
font-size: 13pt;
}
/* Lables for large input boxes for name, problem, etc. */
.sheet-boxInfo label,
.sheet-tftf-boxInfo label,
.sheet-tftf-shame label {
width: 10%;
}
/* Lable for iconic item */
.sheet-iconic label,
.sheet-tftf-iconic label {
width: 17%;
}
/* Lables for small input boxes for age, etc. */
.sheet-rightCol label,
.sheet-leftCol label,
.sheet-tftf-rightCol label,
.sheet-tftf-leftCol label {
width: 35%;
}
/* Lables for luck */
.sheet-luck label,
.sheet-tftf-luck label {
width: 20%;
margin-right: 10px;
}
/****** Selection Boxes ******/
.sheet-boxInfo select,
.sheet-tftf-boxInfo select {
width: 55%;
border: none;
font-family: "Catamaran", Gadget, sans-serif;
font-size: 11px;
text-align: left;
margin-bottom: 0px;
}
.sheet-boxInfo select {
background-color: #f8bd90;
}
.sheet-tftf-boxInfo select {
background-color: #b0b9c8;
}
.sheet-iconic select,
.sheet-items select,
.sheet-tftf-iconic select,
.sheet-tftf-items select {
width: 25%;
border: none;
font-family: "Catamaran", Gadget, sans-serif;
font-size: 11px;
text-align: left;
margin-bottom: 0px;
}
.sheet-iconic select,
.sheet-items select {
background-color: #f8bd90;
}
.sheet-tftf-iconic select,
.sheet-tftf-items select {
background-color: #b0b9c8;
}
/****** Text Areas ******/
.sheet-right textarea,
.sheet-tftf-right textarea {
width: 98%;
height: 115px;
resize: vertical;
border: none;
margin-bottom: 0px;
}
.sheet-right textarea,
.sheet-hideout textarea {
background-color: #f8bd90;
}
.sheet-tftf-right textarea,
.sheet-tftf-hideout textarea,
.sheet-tftf-relation textarea{
background-color: #b0b9c8;
}
.sheet-hideout textarea,
.sheet-tftf-hideout textarea {
width: 97%;
height: 115px;
resize: vertical;
border: none;
margin-bottom: 0px;
}
.sheet-boxInfo textarea,
.sheet-tftf-boxInfo textarea {
font-family: "Catamaran", Gadget, sans-serif;
font-size: 15px;
float: right;
width: 78%;
height: 20px;
margin-bottom: 0px;
}
.sheet-tftf-shame textarea {
font-family: "Catamaran", Gadget, sans-serif;
font-size: 15px;
width: 66%;
height: 20px;
margin-bottom: 0px;
float: left;
margin-left: 30px;
margin-right: 10px;
}
.sheet-tftf-boxInfo textarea,
.sheet-tftf-boxInfoText textarea,
.sheet-tftf-shame textarea {
background-color: #b0b9c8;
}
.sheet-relation textarea,
.sheet-tftf-relation textarea {
font-family: "Catamaran", Gadget, sans-serif;
font-size: 15px;
float: right;
width: 70%;
height: 20px;
margin-bottom: 0px;
}
.sheet-tftf-relation input[type=text] {
background-color: #b0b9c8;
}
/****** Checkboxes ******/
.sheet-boxDark input[type=checkbox],
.sheet-boxLight input[type=checkbox],
.sheet-boxChk input[type=checkbox],
.sheet-tftf-boxDark input[type=checkbox],
.sheet-tftf-boxLight input[type=checkbox],
.sheet-tftf-boxChk input[type=checkbox] {
display: none;
visibility: hidden;
}
.sheet-tftf-scarsBox input[type="checkbox"] {
opacity: 0;
width: 24px;
height: 24px;
position: relative;
top: 2px;
left: 60px;
margin: -43px;
cursor: pointer;
z-index: 1;
}
.sheet-tftf-scarsBox input[type="checkbox"] + span::before
{
content: "";
margin-left: 80px;
background: #ffffff;
height: 20px;
width: 20px;
padding: 0px;
border: 1px solid #888;
border-color: #3d3d29;
display: inline-block;
-webkit-box-shadow: 1px 1px 2px 0px #3d3d29;
-moz-box-shadow: 1px 1px 2px 0px #3d3d29;
box-shadow: 1px 1px 2px 0px #3d3d29;
vertical-align: middle;
}
.sheet-tftf-scarsBox input[type="checkbox"]:checked + span::before
{
background: #ffffff url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Tales%20from%20the%20Loop/Black_check.svg.png") no-repeat right top;
background-size: 100%;
}
.sheet-boxLight label,
.sheet-boxDark label,
.sheet-tftf-boxLight label,
.sheet-tftf-boxDark label {
float: right;
background: #ffffff;
height: 20px;
width: 20px;
margin: 0px;
padding: 0px;
border: 1px solid #888;
display: block;
-webkit-box-shadow: 1px 1px 2px 0px #3d3d29;
-moz-box-shadow: 1px 1px 2px 0px #3d3d29;
box-shadow: 1px 1px 2px 0px #3d3d29;
cursor: pointer;
}
.sheet-boxLight label,
.sheet-boxDark label,
.sheet-tftf-boxLight label,
.sheet-tftf-boxDark label {
border-color: #3d3d29;
}
.sheet-boxChk label,
.sheet-tftf-boxChk label {
float: clear;
margin: 2px;
background: #ffffff;
height: 20px;
width: 20px;
padding: 0px;
border: 1px solid #888;
display: block;
border-color: #3d3d29;
-webkit-box-shadow: 1px 1px 2px 0px #3d3d29;
-moz-box-shadow: 1px 1px 2px 0px #3d3d29;
box-shadow: 1px 1px 2px 0px #3d3d29;
cursor: pointer;
}
.sheet-boxLight input[type=checkbox]:checked ~ label,
.sheet-boxDark input[type=checkbox]:checked ~ label,
.sheet-boxChk input[type=checkbox]:checked ~ label,
.sheet-tftf-boxLight input[type=checkbox]:checked ~ label,
.sheet-tftf-boxDark input[type=checkbox]:checked ~ label,
.sheet-tftf-boxChk input[type=checkbox]:checked ~ label {
background: #ffffff url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Tales%20from%20the%20Loop/Black_check.svg.png") no-repeat right top;
background-size: 100%;
}
/****** Focus Colour ******/
.sheet-boxInfo input:focus,
.sheet-boxInfo select:focus,
.sheet-right textarea:focus,
.sheet-iconic input:focus,
.sheet-iconic select:focus,
.sheet-relation textarea:focus,
.sheet-hideout textarea:focus {
box-shadow: 0 0 10px 0px #ee752c;
outline: 1px solid #ee752c;
}
.sheet-boxInfo input[type=number]:focus{
border-color: #3d3d29;
-webkit-box-shadow: 1px 1px 2px 0px #3d3d29;
-moz-box-shadow: 1px 1px 2px 0px #3d3d29;
box-shadow: 1px 1px 2px 0px #3d3d29;
outline: none;
}
/****** Roll Buttons ******/
/* Roll buttons for attributes and skils */
.sheet-boxLight button[type=roll],
.sheet-boxDark button[type=roll],
.sheet-tftf-boxLight button[type=roll],
.sheet-tftf-boxDark button[type=roll] {
background-color: transparent;
color: black;
border: none;
font-family: "Catamaran", Gadget, sans-serif;
font-size: 13pt;
line-height: 15px;
background-image: none;
text-shadow: none;
box-shadow: none;
padding: 0px;
margin: 0px;
font-weight: normal;
}
/* Changes the attributes and skills to orange while the mouse is hovering over them */
.sheet-boxDark button[type=roll]:hover,
.sheet-boxLight button[type=roll]:hover {
color: #ee752c;
}
/* Changes the attributes and skills to purple while the mouse is hovering over them */
.sheet-tftf-boxLight button[type=roll]:hover {
color: #af7b87;
}
.sheet-tftf-boxDark button[type=roll]:hover {
color: #dac0c3;
}
/****** Roll Templates ******/
/* Prevents the roll templates from showing on the character sheet */
.sheet-hidden {
display: none;
}
/* Background image and container for the roll template */
.sheet-rolltemplate-simpleAtt .sheet-container,
.sheet-rolltemplate-simpleSkill .sheet-container,
.sheet-rolltemplate-simpleItem .sheet-container{
width: 189px;
height: 189px;
padding: 0px;
background: url(http://i.imgur.com/aDITA9m.png);
background-size: 189px 189px;
background-repeat: no-repeat;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
}
/* Title for the roll */
.sheet-rolltemplate-simpleAtt .sheet-rollType,
.sheet-rolltemplate-simpleSkill .sheet-rollType,
.sheet-rolltemplate-simpleItem .sheet-rollType{
position: relative;
width: 164px;
padding: 15px 5px 0px 20px;
font-size: 20px;
color: #ee752c;
font-weight: bold;
}
/* Character name */
.sheet-rolltemplate-simpleAtt .sheet-name,
.sheet-rolltemplate-simpleSkill .sheet-name,
.sheet-rolltemplate-simpleItem .sheet-name{
width: 164px;
padding: 0px 5px 5px 20px;
font-size: 10px;
font-weight: bold;
}
/* Calculated number of dice to roll */
.sheet-rolltemplate-simpleAtt .sheet-calc,
.sheet-rolltemplate-simpleSkill .sheet-calc,
.sheet-rolltemplate-simpleItem .sheet-calc{
width: 164px;
padding: 20px 5px 5px 20px;
font-size: 14px;
font-weight: bold;
}
/* Result of the roll */
.sheet-rolltemplate-simpleAtt .sheet-result,
.sheet-rolltemplate-simpleSkill .sheet-result,
.sheet-rolltemplate-simpleItem .sheet-result{
position: absolute;
bottom: 0;
width: 164px;
padding: 5px 5px 40px 20px;
font-size: 20px;
font-weight: bold;
}
/* Removes Roll20 formatting around inline rolls */
.sheet-rolltemplate-simpleAtt .inlinerollresult,
.sheet-rolltemplate-simpleSkill .inlinerollresult,
.sheet-rolltemplate-simpleItem .inlinerollresult{
background-color: transparent;
color: #000000;
border: none;
}
/* Removes Roll20 formatting around critical successes */
.sheet-rolltemplate-simpleAtt .inlinerollresult.fullcrit,
.sheet-rolltemplate-simpleSkill .inlinerollresult.fullcrit,
.sheet-rolltemplate-simpleItem .inlinerollresult.fullcrit{
color: #000000;
border: none;
}
/* Removes Roll20 formatting around critical fails */
.sheet-rolltemplate-simpleAtt .inlinerollresult.fullfail,
.sheet-rolltemplate-simpleSkill .inlinerollresult.fullfail,
.sheet-rolltemplate-simpleItem .inlinerollresult.fullfail{
color: #000000;
border: none;
}
/* Removes Roll20 formatting around inline rolls */
.sheet-rolltemplate-simpleAtt .inlinerollresult.importantroll,
.sheet-rolltemplate-simpleSkill .inlinerollresult.importantroll,
.sheet-rolltemplate-simpleItem .inlinerollresult.importantroll{
color: #000000;
border: none;
}