mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
259 lines
6.2 KiB
CSS
259 lines
6.2 KiB
CSS
/* Set the min-width so that when the window is resized the look will stay consistant */
|
|
|
|
|
|
|
|
/* Universal styling applied to all elements of these types */
|
|
|
|
h2 {
|
|
font-size: 1.0em;
|
|
text-align: center;
|
|
}
|
|
|
|
label {
|
|
display: inline-block;
|
|
width: 31%;
|
|
font-size: 1.0em;
|
|
}
|
|
|
|
input {
|
|
display: inline-block;
|
|
width: 170px;
|
|
}
|
|
|
|
img {
|
|
max-height: 100px;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
select {
|
|
margin-bottom: 0px;
|
|
width: 170px;
|
|
}
|
|
|
|
th {
|
|
/* text-align: center; */
|
|
padding-bottom: 5px;
|
|
padding-top: 5px;
|
|
/* background-color: #a6b5c3; */
|
|
}
|
|
|
|
table {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
div {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
hr {
|
|
border-top-color: #a6b5c3;
|
|
}
|
|
|
|
|
|
/* Targetted styling that only effects elements with these classes */
|
|
input.sheet-short {
|
|
width: 45px;
|
|
text-align: center;
|
|
}
|
|
|
|
input.sheet-transparent {
|
|
width: 45px;
|
|
background-color: var(--main-bg-color);
|
|
border: 0px;
|
|
border-bottom: 1px solid #a6b5c3;
|
|
border-radius: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
div.sheet-characterSheet {
|
|
background-color: var(--main-bg-color);
|
|
}
|
|
|
|
select.sheet-dtype {
|
|
vertical-align: top;
|
|
width: 60px;
|
|
}
|
|
span.sheet-dee {
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
left: -36%;
|
|
padding-right: 4px;
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
label.sheet-header {
|
|
/* text-align: center; */
|
|
padding-bottom: 5px;
|
|
padding-top: 5px;
|
|
background-color: var(--header-bg-color);
|
|
}
|
|
|
|
th.sheet-header {
|
|
background-color: var(--header-bg-color);
|
|
}
|
|
|
|
/* Targetted styling that only effects elements contained within the stated class */
|
|
|
|
.charsheet {
|
|
/* background-color: #cad7e2; */
|
|
/* background-color: var(--main-bg-color); */
|
|
width: 1000px;
|
|
}
|
|
|
|
.sheet-stats h3 {
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-stats h3:first-child {
|
|
margin-left: 35%;
|
|
margin-right: 15%;
|
|
}
|
|
|
|
.sheet-stats input {
|
|
margin-right: 8%;
|
|
width: 45px;
|
|
}
|
|
|
|
.charsheet label {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
/*Configure the tab buttons*/
|
|
.sheet-character,
|
|
.sheet-equipment,
|
|
.sheet-magic,
|
|
.sheet-settings, {
|
|
display: none;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.sheet-tabstoggle[value="character"] ~ div.sheet-character,
|
|
.sheet-tabstoggle[value="equipment"] ~ div.sheet-equipment,
|
|
.sheet-tabstoggle[value="magic"] ~ div.sheet-magic,
|
|
.sheet-tabstoggle[value="settings"] ~ div.sheet-settings {
|
|
display: block;
|
|
}
|
|
|
|
/* show buttons for the spell lists*/
|
|
input.sheet-toggle-show-1:not(:checked) ~ div.sheet-body-1,
|
|
input.sheet-toggle-show-2:not(:checked) ~ div.sheet-body-2,
|
|
input.sheet-toggle-show-3:not(:checked) ~ div.sheet-body-3,
|
|
input.sheet-toggle-show-4:not(:checked) ~ div.sheet-body-4,
|
|
input.sheet-toggle-show-5:not(:checked) ~ div.sheet-body-5,
|
|
input.sheet-toggle-show-6:not(:checked) ~ div.sheet-body-6,
|
|
input.sheet-toggle-show-7:not(:checked) ~ div.sheet-body-7,
|
|
input.sheet-toggle-show-8:not(:checked) ~ div.sheet-body-8,
|
|
input.sheet-toggle-show-9:not(:checked) ~ div.sheet-body-9,
|
|
input.sheet-toggle-show-10:not(:checked) ~ div.sheet-body-10,
|
|
input.sheet-toggle-hide:checked ~ div.sheet-body {
|
|
display: none;
|
|
}
|
|
|
|
/* ********************** COLORS ****************************** */
|
|
|
|
.charsheet {
|
|
--main-bg-color: #d4dce4;
|
|
--header-bg-color: #989fb3;
|
|
--input-bg-color: #fff;
|
|
}
|
|
.sheet-mainBgColor[value="default"] ~ .sheet-characterSheet { --main-bg-color: #d4dce4; --header-bg-color: #989fb3; }
|
|
.sheet-mainBgColor[value="white"] ~ .sheet-characterSheet { --main-bg-color: #fff; --header-bg-color: #cccccc; }
|
|
.sheet-mainBgColor[Value="lilac"] ~ .sheet-characterSheet { --main-bg-color: #ded6e0; --header-bg-color: #ac98b1; }
|
|
.sheet-mainBgColor[value="grayscale"] ~ .sheet-characterSheet { --main-bg-color: #f3f3f3; --header-bg-color: #bbb; }
|
|
.sheet-mainBgColor[value="book"] ~ .sheet-characterSheet { --main-bg-color: #f3efe6; --header-bg-color: #c3baa6; }
|
|
.sheet-mainBgColor[value="summer"] ~ .sheet-characterSheet { --main-bg-color: #fef7ed; --header-bg-color: #e6cfad; }
|
|
.sheet-mainBgColor[value="fall"] ~ .sheet-characterSheet { --main-bg-color: #f5dbcc; --header-bg-color: #e0a696; }
|
|
.sheet-mainBgColor[value="winter"] ~ .sheet-characterSheet { --main-bg-color: #dcefef; --header-bg-color: #9cccd6; }
|
|
.sheet-mainBgColor[value="spring"] ~ .sheet-characterSheet { --main-bg-color: #e6f1e2; --header-bg-color: #bdcc9e; }
|
|
|
|
|
|
|
|
|
|
/* ***************** Roll template ******************** */
|
|
|
|
/* Smaller margins - remove these if you want the huge default left margin */
|
|
.sheet-rolltemplate-custom {
|
|
margin-left: -37px;
|
|
}
|
|
.withoutavatars .sheet-rolltemplate-custom {
|
|
margin-left: -7px;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-container {
|
|
border: 1px solid;
|
|
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
|
|
border-color: var(--header-bg-color);
|
|
}
|
|
|
|
/* Header formatting - title and subtitle */
|
|
.sheet-rolltemplate-custom .sheet-header {
|
|
background-color: var(--header-bg-color);
|
|
/* change text-align to center to center the header text */
|
|
text-align: left;
|
|
color: var(--header-text-color);
|
|
padding: 5px;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-title {
|
|
font-size:1.1em;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-subtitle {
|
|
font-size:.9em;
|
|
}
|
|
|
|
/* example colors */
|
|
.sheet-rolltemplate-custom .sheet-container {
|
|
/* this is the default color */
|
|
--header-bg-color: #446788;
|
|
--header-text-color: #FFF;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-red {
|
|
--header-bg-color: #F00;
|
|
}
|
|
.sheet-rolltemplate-custom .sheet-container.sheet-color-green {
|
|
--header-bg-color: #0F0;
|
|
--header-text-color: #000;
|
|
}
|
|
|
|
/* Allprops part */
|
|
.sheet-rolltemplate-custom .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-custom .sheet-content > div {
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Left column */
|
|
.sheet-rolltemplate-custom .sheet-content .sheet-key {
|
|
font-weight: bold;
|
|
padding-right: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Empty rule, use this if you want to change the right column
|
|
.sheet-rolltemplate-custom .sheet-value {
|
|
}
|
|
*/
|
|
|
|
/* Make even-numbered rows grey */
|
|
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-custom .sheet-content :nth-child(4n) {
|
|
background:#EEE;
|
|
}
|
|
|
|
/* Description field */
|
|
.sheet-rolltemplate-custom .sheet-desc {
|
|
grid-column: span 2;
|
|
padding: 5px;
|
|
text-align: left;
|
|
}
|
|
|