mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
318 lines
6.5 KiB
CSS
318 lines
6.5 KiB
CSS
/*----------- Logo -------------*/
|
|
|
|
img.sheet-logo {
|
|
max-width: 96px;
|
|
filter: invert(100%);
|
|
float: right;
|
|
padding-right: 60px;
|
|
}
|
|
|
|
.charsheet ::placeholder{
|
|
color: #9FA8A1;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
/*----------- Tabs Setup -------------*/
|
|
|
|
/*this hides the contents of each tab by default*/
|
|
.charsheet div[class^="sheet-section"]{
|
|
display: none;
|
|
}
|
|
|
|
/*this shows the tab content when the appropriate input field is selected*/
|
|
.charsheet input.sheet-tab1:checked ~ div.sheet-section-profile,
|
|
.charsheet input.sheet-tab2:checked ~ div.sheet-section-inv,
|
|
.charsheet input.sheet-tab3:checked ~ div.sheet-section-abilities,{
|
|
display: block;
|
|
width: 540px;
|
|
background-color: white;
|
|
}
|
|
|
|
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"]{
|
|
display: block;
|
|
}
|
|
|
|
/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/
|
|
.charsheet input.sheet-tab {
|
|
width: 100px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
|
|
.charsheet span.sheet-tab {
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
background: #c7c3b0;
|
|
color: white;
|
|
font-weight: bold;
|
|
border-radius: 4px;
|
|
|
|
width: 100px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
margin-left: -101px;/*originally 91px*/
|
|
}
|
|
|
|
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
|
|
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
|
|
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
|
|
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
|
|
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
|
|
.charsheet input.sheet-tab5:checked + span.sheet-tab5,
|
|
.charsheet input.sheet-tab6:checked + span.sheet-tab6,
|
|
.charsheet input.sheet-tab7:checked + span.sheet-tab7,
|
|
.charsheet input.sheet-tab8:checked + span.sheet-tab8,
|
|
.charsheet input.sheet-tab99:checked + span.sheet-tab99{
|
|
background: #2c424e;
|
|
color: white;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
|
|
|
|
/*----------- Profile Section -------------*/
|
|
.charsheet .sheet-section-profile{
|
|
background-color: #ffffff;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.charsheet div.sheet-section-profile{
|
|
padding-top: 30px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.charsheet .sheet-section-profile p{
|
|
font-family: 'Ovo', serif;
|
|
font-size: 17px;
|
|
margin-left: 20px;
|
|
line-height: 1.6;
|
|
width: 545px;
|
|
}
|
|
|
|
|
|
input[type=text],
|
|
input[type=number] {
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
box-shadow: none;
|
|
border: none;
|
|
border-bottom: 1px solid black;
|
|
-moz-appearance:textfield;
|
|
font-size: 17px;
|
|
margin-top: -5px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.charsheet input.sheet-name-field {
|
|
width: 250px;
|
|
}
|
|
|
|
.charsheet input.sheet-pronoun {
|
|
width: 130px;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet input.sheet-age {
|
|
width: 70px;
|
|
}
|
|
|
|
.charsheet input.sheet-height {
|
|
width: 140px;
|
|
}
|
|
|
|
.charsheet input.sheet-role {
|
|
width: 200px;
|
|
}
|
|
|
|
.charsheet input.sheet-attribute {
|
|
width: 200px;
|
|
}
|
|
|
|
.charsheet input.sheet-attribute2 {
|
|
width: 240px;
|
|
}
|
|
|
|
.charsheet input.sheet-clothes {
|
|
width: 210px;
|
|
}
|
|
|
|
.charsheet input.sheet-background {
|
|
width: 240px;
|
|
}
|
|
|
|
.charsheet input.sheet-background2 {
|
|
width: 410px;
|
|
}
|
|
|
|
.charsheet input.sheet-ethos {
|
|
width: 270px;
|
|
}
|
|
|
|
.charsheet input.sheet-goal {
|
|
width: 410px;
|
|
}
|
|
|
|
.charsheet textarea.sheet-notes {
|
|
width: 470px;
|
|
height: 130px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.charsheet div.sheet-profile-notes {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
|
|
|
|
/*----------- Abilities Section -------------*/
|
|
|
|
div.sheet-section-abilities {
|
|
padding-top: 30px;
|
|
}
|
|
|
|
div.sheet-section-abilities p {
|
|
font-size: 17px;
|
|
}
|
|
|
|
span.sheet-ap {
|
|
float: right;
|
|
margin-right: 50px;
|
|
}
|
|
|
|
span.sheet-hp,
|
|
input.sheet-ap,
|
|
input.sheet-hp{
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
h3.sheet-ability-header {
|
|
text-align: center;
|
|
color: #FFF;
|
|
background-color: #2c424e;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
width: 510px;
|
|
}
|
|
|
|
input.sheet-ability-name {
|
|
margin-bottom: 10px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
input.sheet-ability-cost {
|
|
margin-bottom: 10px;
|
|
font-size: 18px;
|
|
width: 75px;
|
|
}
|
|
|
|
div.repcontrol{
|
|
width: 510px;
|
|
}
|
|
|
|
textarea.sheet-ability-description {
|
|
font-size: 18px;
|
|
resize: none;
|
|
width: 575px;
|
|
height: 90px;
|
|
resize: none;
|
|
}
|
|
|
|
|
|
/*----------- Inventory Section -------------*/
|
|
|
|
div.sheet-2colrow.sheet-2colrow-top {
|
|
padding-top: 30px;
|
|
}
|
|
|
|
div.sheet-2colrow.sheet-2colrow-top div.sheet-col,
|
|
div.sheet-2colrow.sheet-invbottom div.sheet-col{
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.sheet-section-inv textarea {
|
|
font-size: 18px;
|
|
resize: none;
|
|
width: 95%;
|
|
}
|
|
|
|
|
|
/*------------------------------------*\
|
|
#ROLL TEMPLATES
|
|
\*------------------------------------*/
|
|
|
|
/* Smaller margins - remove these if you want the huge default left margin */
|
|
.sheet-rolltemplate-quest {
|
|
margin-left: -37px;
|
|
}
|
|
.withoutavatars .sheet-rolltemplate-quest {
|
|
margin-left: -7px;
|
|
}
|
|
|
|
.sheet-rolltemplate-quest .sheet-container {
|
|
border: 3px solid var(--quest-blue);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Header formatting - title and subtitle */
|
|
.sheet-rolltemplate-quest .sheet-header {
|
|
background-color: var(--quest-blue);
|
|
color: white;
|
|
text-align: left;
|
|
text-transform: capitalize;
|
|
padding: 5px;
|
|
border-bottom: 2px solid var(--quest-blue);
|
|
}
|
|
.sheet-rolltemplate-quest .sheet-title {
|
|
font-size:1.2em;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-rolltemplate-quest .sheet-subtitle {
|
|
font-size:.9em;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-quest .sheet-container {
|
|
--quest-blue: #2c424e;
|
|
}
|
|
|
|
/* Allprops part */
|
|
.sheet-rolltemplate-quest .sheet-content {
|
|
display: grid;
|
|
background: #FFF;
|
|
/* Header formatting - modify the column layout below */
|
|
grid-template-columns: auto auto;
|
|
/* Line height to match default roll template */
|
|
line-height:1.4em;
|
|
}
|
|
.sheet-rolltemplate-quest .sheet-content > div {
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Left column */
|
|
.sheet-rolltemplate-quest .sheet-content .sheet-key {
|
|
font-weight: bold;
|
|
padding-right: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Make even-numbered rows grey */
|
|
.sheet-rolltemplate-quest .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-quest .sheet-content :nth-child(4n) {
|
|
background:#EEE;
|
|
}
|
|
|
|
/* Wide Description field */
|
|
.sheet-rolltemplate-quest .sheet-desc {
|
|
grid-column: span 2;
|
|
padding: 5px;
|
|
text-align: center;
|
|
} |