Files
roll20-character-sheets/Haunted-West-Character-Sheet/haunted_west.css
T
hwcharsheet 58b6a81fe8 Haunted West Official Character Sheet Official Commit
The first commit for the Haunted West official character sheet.
2022-01-21 20:05:53 -05:00

1086 lines
16 KiB
CSS

@import url('https://fonts.googleapis.com/css?family=Baskerville|Rye&display=swap');
/* This css is a little wonkier than I like to leave it. I tried to keep things in their sections, but there are a few places I had to drop things later to override or had to use !important because of other css roll 20 pulls in. JA 06022021 */
/* General */
.charsheet {}
.sheetfix3 {
margin-top: -60px;
}
.label {color: black;}
/* Buttons for Tab Switching */
.topbuttons {
width: 1000px;
font-size: 20px;
font-weight: bold;
text-align: right;
}
.topbuttons button {
font-weight: bold !important;
}
.charactertab,
.detailtab,
.milestonetab {
display: none;
background-image: url("https://raw.githubusercontent.com/hwcharsheet/hwcarsheet/main/hwcharactersheetbackground.jpg");
background-size: 100% 1900px;
background-repeat: no-repeat !important;
width: 950px;
height: 1900px;
padding: 50px 70px 50px 70px !important;
font-family: "Baskerville";
font-weight: 600;
font-size: 14px;
}
.topbuttons button:hover {
opacity: .8;
border-bottom: 1px solid #000000;
}
/* show the selected tab */
.tabstoggle[value="charactertab"]~div.charactertab,
.tabstoggle[value="detailtab"]~div.detailtab,
.tabstoggle[value="milestonetab"]~div.milestonetab {
display: block;
}
/* Repeater Fields */
.repcontrol_add,
.repcontrol_edit,
.repcontrol_add:hover,
.repcontrol_edit:hover {
color: #592929 !important;
font-size: 10px;
}
/*
.repcontrol_add,
.repcontrol_edit,
.repcontrol_add:hover,
.repcontrol_edit:hover {
color: #592929 !important;
border: 1px solid #592929;
text-transform: uppercase;
margin: 5px 2px;
padding:2px;
font-size:10px;
}
.repcontrol_add:hover,
.repcontrol_edit:hover {opacity:.8;
color: #fff !important;
background: #592929; }
*/
input,
textarea {
color: #592929;
}
.skilltitle input,
.skillattvalue input,
.skillattvalue input,
.skillrawattvalue input {
color: #000000;
}
label,
input,
button,
select,
textarea {
background: transparent;
}
/* Fonts */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Rye";
letter-spacing: .04em;
}
.hwfont {
font-family: "Rye";
letter-spacing: .04em;
}
.hwlogo {
width: 450px;
}
.hwlogo img {
height: 220px;
margin: 0 auto;
display: block;
}
/* Inputs */
input {
width: 100%;
background: transparent;
font-family: "Baskerville";
font-weight: 400;
border: 0px;
border-radius: 0;
font-size: 16px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.ui-dialog .charsheet input[type="number"] {
width: 50px;
}
select {
margin: 0;
padding: 0;
}
button,
button:hover,
button.btn,
button.btn:hover {
background: 0;
border: 0;
box-shadow: none;
font-size: 14px;
border-radius: 0;
text-shadow: none !important;
}
button:before,
button.btn::before {
display: none;
}
button.txtbutton {
border-radius: 0;
font-weight: bold;
}
.btn {
text-shadow: none !important;
}
.ui-dialog .charsheet button[type="roll"],
.ui-dialog .charsheet button[type="compendium"] {
padding: 2px 3px;
margin: 0 3px 0 3px;
font-size: 14px;
}
.ui-dialog .charsheet .skilllabel button[type="roll"] {
margin: 6px 3px 0 3px;
font-size: 16px;
}
.ui-dialog .charsheet input[type="number"] {
width: 50px;
text-align: center;
}
/* Dice Font */
span.icond20{
font-family: dicefontd20;
}
span.icond10{
font-family: dicefontd10;
}
.skilltitle span.icond10{
font-family: dicefontd10;
transform: scale(2, 2);
}
/* Layout */
.flex-section {
display: flex;
flex-direction: row;
}
.flex-section span {
flex-grow: 1;
flex-basis: 0;
}
.flex-section-col {
display: flex;
flex-direction: column;
}
.flex-section span {
flex-grow: 1;
flex-basis: 0;
}
.btn {
text-shado: none !important;
}
/* Attributes and Top Page 1 */
.logo {
max-height: 250px;
display: block;
margin: 0 auto;
}
.attributerow {
width: 220px;
height: 32px;
}
.blackbar {
color: #000000;
}
.atttitle {
letter-spacing: .04em;
}
.attlabel {
font-size: 16px;
width: 220px;
padding: 2px 3px;
margin: 0px 3px 0px 3px;
}
.ui-dialog .charsheet .attlabel button[type="roll"] {
margin: 0px 3px 0 -3px;
font-size: 18px;
}
.attlabel2 {
}
.atttype {
margin-left: 5px;
padding-bottom: 5px;
}
.modifier {
margin-top: 20px;
padding: 10px 5px;
border: 1px solid black;
width: 94%;
}
.modtext {
width: 75%;
display: block;
float: left;
}
.modtext .label{
padding: 0px;
}
.modinput {
width: 25%;
display: block;
float: right;
}
.modinput input {
font-size: 30px;
float: right;
text-align: center;
background: transparent;
font-weight: bold;
border-radius: 0;
padding-bottom: 8px;
width: 80px !important;
border: 1px solid black;
margin-right: 20px;
}
.attvalue {
border: 0;
border-left: 1px solid black;
width: 48px !important;
}
.attvalue input {
border: 0;
text-align: center;
background: transparent;
font-size: 18px;
font-weight: bold;
border-radius: 0;
display: block;
float: right;
}
.attvalue {
border-left: 1px solid black;
width: 48px !important;
display: flex;
}
.titleattrow {
overflow: hidden;
width: 100% !important;
text-transform: uppercase;
letter-spacing: .2em;
font-size: 14px;
transform: scale(1, 2);
margin: 0px 3px 0px 3px;
font-family: "Rye";
}
.atttable {
display:table;
}
.attrow {
border: 1px solid black;
height: 30px;
overflow: hidden;
width: 286px;
display: flex;
}
.charinforow {
margin: 0px 60px 10px 10px;
display: flex;
width: 450px;
height: 24px;
display: flex;
}
.charinfovalue {
border-bottom: 1px solid #000;
}
.charinfolabel {
width: 140px;
font-size: 16px;
height: 26px;
display: flex;
vertical-align: bottom;
text-transform: uppercase;
padding-top: 4px;
}
.charinfovalue input {
text-align: left;
border: 0;
background: transparent;
width: 300px;
border-radius: 0;
font-size: 20px;
padding-bottom: 0px;
margin-top: -5px;
}
.attsection {
width: 590px;
margin: 1%;
}
.attrlabel {
text-transform: uppercase !important;
letter-spacing: .2em !important;
font-size: 14px !important;
transform: scale(1, 2) !important;
display: flex;
}
.attsection {
display: flex;
}
.att1 {
width: 286px !important;
margin: 1%;
}
.att2 {
width: 286px !important;
margin: 1%;
}
/* Skill Section */
input.attr_skillattvalue {
width: 1.5em !important;
}
.skillvalue input[type="number"] {
width: 1.5em !important;
}
.skillrow {
border: 1px solid black;
height: 30px;
overflow: hidden;
width: 286px;
display: flex;
}
.skillrow.extra div {
width: 100%;
}
.skillsection {
width: 286px !important;
margin: 1%;
}
.skillsection .atttable {
width: 286px !important;
display:table;
}
.skillsection input[type=number] {
width: 50px !important;
}
.largelabel {
font-weight: bold;
text-transform: uppercase;
letter-spacing: .2em;
font-size: 14px;
transform: scale(1, 2);
}
.label {
font-weight: bold;
}
.skilltitle {
letter-spacing: 2em;
text-transform: uppercase;
font-size: 10px;
transform: scale(1, 2);
width: 240px;
display: flex;
}
.ui-dialog .charsheet .skilltitle button[type="roll"],
.ui-dialog .charsheet .skilltitle button[type="compendium"] {
font-size: 12px;
}
.skilltitle button {
text-transform: uppercase;
letter-spacing: .2em;
}
.skilllabel {
font-size: 12px;
width: 190px !important;
}
.skilltype {
margin-left: 5px;
padding-bottom: 5px;
}
.skillvalue {
border: 0;
border-left: 1px solid black;
width: 48px !important;
display: flex;
}
.skillvalue input {
border: 0;
text-align: center;
background: transparent;
font-size: 18px;
font-weight: bold;
border-radius: 0;
}
.skillattvalue {
border-left: 1px solid black;
width: 48px !important;
display: flex;
}
.titleskillrow {
overflow: hidden;
width: 287.6px !important;
display: flex;
}
.titleskillrawattvalue {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
width: 48px !important;
display: flex;
}
.titleskillrawattvalue input {
border: 0;
text-align: center;
background: transparent;
font-size: 20px;
font-weight: bold;
border-radius: 0;
color: #000000;
}
.skillattvalue input {
border: 0;
text-align: center;
background: transparent;
font-size: 18px;
font-weight: bold;
border-radius: 0;
text-align: center !important;
width: 46px;
}
.skilllabel button.txtbutton {
border: 0;
}
button.txtbutton:hover {
opacity: .8;
text-decoration: underline;
}
/* Vitality and Lucidity */
.vitluclabel {
text-transform: uppercase !important;
letter-spacing: .2em;
}
.vitlucsection {
width: 98%;
margin: 1%;
}
.bulletbox {
height: 50px;
}
.bullettitle {
text-align: center;
font-weight: normal;
}
.vitbox {
border: none;
width: 40px;
height: 60px;
text-align: center;
display: inline-block;
}
input[type="checkbox"].attr-vitbox {
opacity: 0;
width: 15px;
height: 30px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
input[type=checkbox].attr-vitbox+span::before {
width: 100%;
border: none;
text-align: left;
display: inline-block;
vertical-align: middle;
content: url("https://raw.githubusercontent.com/hwcharsheet/hwcarsheet/main/bullet-empty.png");
width: 15px;
height: 30px;
font-size: 30px;
}
input[type="checkbox"].attr-vitbox:hover+span::before {
content: url("https://raw.githubusercontent.com/hwcharsheet/hwcarsheet/main/bullet-filled.png");
}
input[type="checkbox"].attr-vitbox:checked+span::before {
content: url("https://raw.githubusercontent.com/hwcharsheet/hwcarsheet/main/bullet-filled.png");
}
.jusfine {
width: 100%;
}
.mauled {
width: 100%;
}
.battered {
width: 100%;
}
.whupped {
width: 100%;
}
.goner {
width: 100%;
}
.lucbox {
border: none;
width: 40px;
height: 60px;
text-align: center;
display: inline-block;
}
input[type="checkbox"].attr-lucbox {
opacity: 0;
width: 15px;
height: 30px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
input[type=checkbox].attr-lucbox+span::before {
width: 100%;
border: none;
width: 100%;
border: none;
text-align: left;
display: inline-block;
vertical-align: middle;
content: url("https://raw.githubusercontent.com/hwcharsheet/hwcarsheet/main/bullet-empty.png");
width: 15px;
height: 30px;
font-size: 40px;
}
input[type="checkbox"].attr-lucbox:hover+span::before {
content: url("https://raw.githubusercontent.com/hwcharsheet/hwcarsheet/main/bullet-filled.png");
}
input[type="checkbox"].attr-lucbox:checked+span::before {
content: url("https://raw.githubusercontent.com/hwcharsheet/hwcarsheet/main/bullet-filled.png");
}
.broken {
width: 100%;
}
.haunted {
width: 100%;
}
.shaken {
width: 100%;
}
.unnerved {
width: 100%;
}
.lucid {
width: 100%;
}
/* Details Page - Conflicts, Propensities, Peculiarities, Sundries, Notes */
.sundriesrow {
height: 24px;
}
.miscrow {
height: 24px;
}
.peculiaritybox,
.propensitybox {
height: 24px;
text-align: left;
display: block;
width: 50%;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
padding: 10px 10px 0px 0px;
float: left;
}
.peculiaritybox {
border-right: 1px solid #000;
}
.confboxlabel {
height: 18px;
text-align: center;
text-transform: uppercase;
width: 86px;
display: inline-block;
}
.confbox {
height: 24px;
border-left: 1px solid black;
width: 86px;
display: inline-block;
}
.confrow {
border-bottom: 1px solid black;
}
.conflict {
width: 224px;
display: inline-block;
}
.milestoneinput input {
height: 20px;
margin-left: 15px;
}
.sundriesbox {
border: 0px;
height: 24px;
text-align: left;
padding: 10px 20px 0px 0px;
}
/* Input Overrides */
input[type=text].attr-confbox {
max-width: 100%;
text-align: left;
margin-left: 12px;
}
input[type=text].attr-propbox {
max-width: 100%;
text-align: left;
margin-left: 12px;
}
input[type=text].attr-pecbox {
max-width: 100%;
text-align: left;
margin-left: 12px;
}
input[type=text].attr-sundbox {
max-width: 100%;
text-align: left;
margin-left: 12px;
}
input[type=text].attr-milestonebox {
border: 0px;
border-radius: 0;
margin-left: 12px;
}
/* Mount */
input[type=text].attr-mountbox {
max-width: 100%;
text-align: left;
border-bottom: 1px solid #000;
height: 24px;
margin-left: 12px;
}
.mountnotes textarea {
border: 1px solid black;
}
/* Western Code */
.mountandcode {
overflow: hidden;
}
.mountbox {
width: 450px;
margin-right: 20px;
display: inline-block;
float: left;
}
.westerncodebox {
width: 450px;
margin-left: 20px;
display: inline-block;
float: left;
}
input[type=number].attr-vsbox {
max-width: 100%;
width: 50px !important;
display: block;
text-align: center !important;
margin: 0 auto;
}
.westcodebox {
padding: 4px 10px;
font-size: 16px;
}
.wccol1 {
width: 100px;
min-width: 100px;
}
.wccol2 {
width: 50px;
min-width: 50px;
}
.wccol3 {
width: 50px;
min-width: 50px;
text-align: center;
}
.wccol4 {
width: 50px;
min-width: 50px;
}
.wccol5 {
width: 100px;
min-width: 100px;
}
/* Milestones */
.milestonetitle {
text-transform: uppercase;
letter-spacing: .2em;
font-size: 16px;
padding: 5px;
}
.milestoneinput {
padding: 5px 15px 5px 0px;
}
/* Overrides (at end)*/
.borderleft {
border-left: 1px solid black;
}
.borderbottom {
border-bottom: 1px solid black;
}
.borderbrown {
border-color: #845f18;
}
.bordergrey {
border-color: #c8c8c8;
}
.textcenter {
text-align: center;
}
.textleft {
text-align: left;
}
.textright {
text-align: right;
}
.borderleft {
border-left: 1px solid black;
}
.borderbottom {
border-bottom: 1px solid black;
}
.bordertop {
border-top: 1px solid black;
}
.borderlast {
border-right: 1px solid black;
}
.width100 {
width: 100%
}
.width90 {
width: 90%;
}
.width85 {
width: 85%;
}
.width80 {
width: 80%;
}
.width70 {
width: 70%;
}
.width60 {
width: 60%;
}
.width58 {
width: 58%;
}
.halfwidth,
.width50 {
width: 50%;
}
.width40 {
width: 40%;
}
.width30 {
width: 30%;
}
.width20 {
width: 20%;
}
.width15 {
width: 15%;
}
.width10 {
width: 10%;
}
.inlineblock {
display: inline-block;
}
.marginbottomlv1 {
margin-bottom: 10px;
}
.marginbottomlv2 {
margin-bottom: 30px;
}
.marginbottomlv3 {
margin-bottom: 60px;
}
.margintoplv1 {
margin-top: 10px;
}
.margintoplv2 {
margin-top: 30px;
}
.margintoplv3 {
margin-top: 60px;
}
.padding20 {
padding: 20px;
}
;
.noborderleft {
border-left: none;
}
.noborderight {
border-right: none;
}
.nobordertop {
border-top: none;
}
.noborderbottom {
border-bottom: none;
}