mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
614 lines
13 KiB
CSS
614 lines
13 KiB
CSS
/*----------- Tabs Setup -------------*/
|
|
.charsheet {
|
|
background-color: #fffbfb;
|
|
font-family: Candal, Arial, sans-serif;
|
|
font-size:14px;
|
|
color: black;
|
|
}
|
|
|
|
|
|
.charsheet .repcontrol {
|
|
margin-top:15px;
|
|
width: 175px;
|
|
}
|
|
|
|
.charsheet .repcontrol button {
|
|
background:#223297;
|
|
color: #fff;
|
|
box-shadow:none;
|
|
text-shadow:none;
|
|
font-size:12px;
|
|
}
|
|
|
|
.charsheet .repcontrol[data-groupname=repeating_grimoire] button.repcontrol_edit,
|
|
.charsheet .repcontrol[data-groupname=repeating_skull] button.repcontrol_edit,
|
|
.charsheet .repcontrol[data-groupname=repeating_orisons] button.repcontrol_edit,
|
|
.charsheet .repcontrol[data-groupname=repeating_ablutions] button.repcontrol_edit,
|
|
.charsheet .repcontrol[data-groupname=repeating_hymns] button.repcontrol_edit,
|
|
.charsheet .repcontrol[data-groupname=repeating_lorespells] button.repcontrol_edit,
|
|
{
|
|
float:none;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.charsheet button[type="roll"] {
|
|
color: #992e2e;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.charsheet .info:before {
|
|
content:"ⓘ" !important;
|
|
}
|
|
|
|
/*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-adventurer,
|
|
.charsheet input.sheet-tab2:checked ~ div.sheet-section-saveskill,
|
|
.charsheet input.sheet-tab3:checked ~ div.sheet-section-combat,
|
|
.charsheet input.sheet-tab4:checked ~ div.sheet-section-gear,
|
|
.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 {
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
background: white;
|
|
color: black;
|
|
font-weight: bold;
|
|
border-radius: 4px;
|
|
border: 1px solid #83B583;
|
|
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-tab3:checked + span.sheet-tab4,
|
|
.charsheet input.sheet-tab99:checked + span.sheet-tab99 {
|
|
background: #83B583;
|
|
color: white;
|
|
border-radius: 4px;
|
|
}
|
|
/*----------- End Tab Setup -----------*/
|
|
|
|
|
|
/*----------- Tooltips -----------*/
|
|
|
|
/* Tooltip container */
|
|
.mytooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Tooltip text */
|
|
.mytooltip .mytooltiptext {
|
|
visibility: hidden;
|
|
width: 240px;
|
|
background-color: black;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 5px 0;
|
|
border-radius: 6px;
|
|
|
|
/* Position the tooltip text - see examples below! */
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Show the tooltip text when you mouse over the tooltip container */
|
|
.mytooltip:hover .mytooltiptext {
|
|
visibility: visible;
|
|
}
|
|
|
|
|
|
/** COLORS **/
|
|
|
|
.green {
|
|
background-color: #507f62;
|
|
}
|
|
|
|
.brown {
|
|
background-color: #7f513e;
|
|
}
|
|
|
|
.blue {
|
|
background-color: #51a5c5;
|
|
}
|
|
|
|
.black {
|
|
background-color: #555752;
|
|
}
|
|
|
|
.white {
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.silver {
|
|
background-color: #91A1B2;
|
|
}
|
|
|
|
.orange {
|
|
background-color: #e7623e;
|
|
}
|
|
|
|
.gold {
|
|
background-color: #b59e54;
|
|
}
|
|
|
|
.red {
|
|
background-color: #c73032;
|
|
}
|
|
|
|
|
|
|
|
/*-----cols and rows-----*/
|
|
.charsheet .my1colrow {
|
|
}
|
|
|
|
.charsheet .my1colrow .sheet-col {
|
|
width: calc(100% - 5px);
|
|
padding: 5px;
|
|
}
|
|
|
|
.charsheet .my2colrow {
|
|
}
|
|
|
|
.charsheet .my2colrow .sheet-col {
|
|
width: calc(48% - 10px) !important;
|
|
padding: 5px;
|
|
}
|
|
|
|
.charsheet .my3colrow {
|
|
}
|
|
|
|
|
|
.charsheet .my3colrow .sheet-col {
|
|
width: calc(30% - 10px) !important;
|
|
padding: 5px;
|
|
}
|
|
|
|
.charsheet .my4colrow {
|
|
}
|
|
|
|
|
|
.charsheet .my4colrow .sheet-col {
|
|
width: calc(23% - 10px) !important;
|
|
padding: 5px;
|
|
}
|
|
|
|
|
|
|
|
.charsheet .mysheet-row {
|
|
margin-top:15px;
|
|
}
|
|
|
|
|
|
/* character sheets */
|
|
.charsheet .my1colrow .knave,
|
|
.charsheet .my1colrow .mystic,
|
|
.charsheet .my1colrow .philosopher,
|
|
.charsheet .my1colrow .sellsword,
|
|
.charsheet .my1colrow .murk,
|
|
.charsheet .my1colrow .night_child,
|
|
.charsheet .my1colrow .pooka,
|
|
.charsheet .my1colrow .spriggan
|
|
{
|
|
margin-left: -20px;
|
|
max-width: 100%;
|
|
background-color: #b59e54 !important;
|
|
}
|
|
|
|
.charsheet .my1colrow .sellsword .my3colrow .sheet-col,
|
|
.charsheet .my1colrow .knave .my3colrow .sheet-col,
|
|
.charsheet .my1colrow .philosopher .my3colrow .sheet-col,
|
|
.charsheet .my1colrow .mystic .my3colrow .sheet-col,
|
|
.charsheet .my1colrow .murk .my3colrow .sheet-col,
|
|
.charsheet .my1colrow .spriggan .my3colrow .sheet-col,
|
|
.charsheet .my1colrow .night_child .my3colrow .sheet-col,
|
|
.charsheet .my1colrow .pooka .my3colrow .sheet-col
|
|
{
|
|
color: #000000;
|
|
width: calc(30% - 10px) !important;
|
|
padding: 5px;
|
|
}
|
|
|
|
.charsheet .my1colrow .sellsword .my2colrow .sheet-col,
|
|
.charsheet .my1colrow .knave .my2colrow .sheet-col,
|
|
.charsheet .my1colrow .philosopher .my2colrow .sheet-col,
|
|
.charsheet .my1colrow .mystic .my2colrow .sheet-col,
|
|
.charsheet .my1colrow .murk .my2colrow .sheet-col,
|
|
.charsheet .my1colrow .spriggan .my2colrow .sheet-col,
|
|
.charsheet .my1colrow .night_child .my2colrow .sheet-col,
|
|
.charsheet .my1colrow .pooka .my2colrow .sheet-col
|
|
{
|
|
width: calc(48% - 10px) !important;
|
|
padding: 5px;
|
|
}
|
|
|
|
|
|
.box {
|
|
border: 1px solid black;
|
|
padding: 7px;
|
|
margin-bottom: 15px;
|
|
min-height:66px;
|
|
}
|
|
|
|
|
|
.halfbox {
|
|
border-top: 1px solid black;
|
|
border-bottom: 1px solid black;
|
|
padding: 7px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
|
|
/*this hides the contents of each tab by default*/
|
|
.charsheet .my1colrow .sellsword,
|
|
.charsheet .my1colrow .knave,
|
|
.charsheet .my1colrow .philosopher,
|
|
.charsheet .my1colrow .mystic,
|
|
.charsheet .my1colrow .murk,
|
|
.charsheet .my1colrow .spriggan,
|
|
.charsheet .my1colrow .night_child,
|
|
.charsheet .my1colrow .pooka
|
|
|
|
{
|
|
display: none !important;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.isSellsword:checked ~ .sellsword {
|
|
display: block !important;
|
|
}
|
|
|
|
.isKnave:checked ~ .knave {
|
|
display: block !important;
|
|
}
|
|
|
|
.isPhilosopher:checked ~ .philosopher {
|
|
display: block !important;
|
|
}
|
|
|
|
.isMystic:checked ~ .mystic {
|
|
display: block !important;
|
|
}
|
|
|
|
.isMurk:checked ~ .murk {
|
|
display: block !important;
|
|
}
|
|
|
|
.isSpriggan:checked ~ .spriggan {
|
|
display: block !important;
|
|
}
|
|
|
|
.isNightChild:checked ~ .night_child {
|
|
display: block !important;
|
|
}
|
|
|
|
.isPooka:checked ~ .pooka {
|
|
display: block !important;
|
|
}
|
|
|
|
|
|
.charsheet .my4colrow .good-book {
|
|
display: none !important;
|
|
}
|
|
|
|
.charsheet .my4colrow .book-of-secrets {
|
|
display: none !important;
|
|
}
|
|
|
|
.charsheet .my4colrow .book-of-goblins {
|
|
display: none !important;
|
|
}
|
|
|
|
.isBookOpen:checked ~ .good-book {
|
|
display: block !important;
|
|
}
|
|
|
|
.isBookClosed:checked ~ .good-book {
|
|
display: none !important;
|
|
}
|
|
|
|
.areSecretsOpen:checked ~ .book-of-secrets {
|
|
display: block !important;
|
|
}
|
|
|
|
.areSecretsClosed:checked ~ .book-of-secrets {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
.areGoblinsOpen:checked ~ .book-of-goblins {
|
|
display: block !important;
|
|
}
|
|
|
|
.areGoblinsClosed:checked ~ .book-of-goblins {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
|
|
/** OVERRIDES AND FONTS**/
|
|
.smalltext {
|
|
font-size:12px;
|
|
}
|
|
|
|
.left {
|
|
text-align:left;
|
|
}
|
|
|
|
.charsheet .center {
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet .center label {
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet h3 {text-decoration: underline; padding-bottom:5px; color:black;}
|
|
.charsheet h4 {text-decoration: underline; padding-bottom:5px; color:black;}
|
|
.charsheet label {
|
|
--dark-secondarytext: #000000; /* local variable will override global */
|
|
margin:0px;
|
|
color: --dark-secondarytext;
|
|
padding:5px;
|
|
}
|
|
|
|
.ui-dialog .charsheet input[type=number] {
|
|
width: 4.5em;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
|
|
/** Inputs **/
|
|
.charsheet input {
|
|
text-align: center;
|
|
}
|
|
.charsheet .inventory {
|
|
min-height: 300px;
|
|
max-width: 800px;
|
|
background-color: #f7f3f3;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.charsheet .abandoned {
|
|
min-height: 300px;
|
|
max-width: 800px;
|
|
width:94%;
|
|
background-color: #f7f3f3;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
|
|
.charsheet .tblWeapon {
|
|
width: 100%;
|
|
margin-top:45px;
|
|
|
|
}
|
|
.charsheet .tblWeapon th {
|
|
text-align:center;
|
|
}
|
|
.charsheet .tblWeapon td {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.charsheet .tblAttribute td {
|
|
padding: 5px;
|
|
}
|
|
|
|
.charsheet .tblAttributeTitle {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.traitdie {
|
|
width: 45px;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
text-align: center;
|
|
margin: 0px;
|
|
}
|
|
|
|
.weaponselect {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
text-align: center;
|
|
margin: 0px;
|
|
width:100px;
|
|
}
|
|
|
|
.myselect {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
text-align: center;
|
|
margin: 0px;
|
|
max-width: 180px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Sidebar and Roll Templates */
|
|
|
|
.sheet-rolltemplate-darkmode {
|
|
--primary-dark: #e6e5ea;
|
|
background-color: var(--primary-dark);
|
|
border: 0px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-toy-basic > *,
|
|
.sheet-rolltemplate-toy-succeed > *,
|
|
.sheet-rolltemplate-toy-twenty > *,
|
|
.sheet-rolltemplate-toy-fighting > *,
|
|
.sheet-rolltemplate-toy-info > * {
|
|
--primary-dark: #fef68e;
|
|
margin-left: -37px;
|
|
border: 3px solid;
|
|
border-color: var(--primary-dark);
|
|
--header-bg-color: rgba(112,32,130,1);
|
|
--header-text-color: #FFF;
|
|
}
|
|
|
|
|
|
.withoutavatars .sheet-rolltemplate-toy-basic,
|
|
.withoutavatars .sheet-rolltemplate-toy-succeed,
|
|
.withoutavatars .sheet-rolltemplate-toy-twenty,
|
|
.withoutavatars .sheet-rolltemplate-toy-fighting,
|
|
.withoutavatars .sheet-rolltemplate-toy-info{
|
|
margin-left: -7px;
|
|
}
|
|
|
|
/* Header formatting - title and subtitle */
|
|
.sheet-rolltemplate-toy-basic .sheet-header,
|
|
.sheet-rolltemplate-toy-succeed .sheet-header,
|
|
.sheet-rolltemplate-toy-twenty .sheet-header,
|
|
.sheet-rolltemplate-toy-fighting .sheet-header,
|
|
.sheet-rolltemplate-toy-info .sheet-header {
|
|
background-color: #7f513e;
|
|
text-align: center;
|
|
font-weight:bold;
|
|
color: white;
|
|
padding: 5px;
|
|
min-height:30px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-toy-basic .sheet-title,
|
|
.sheet-rolltemplate-toy-succeed .sheet-title,
|
|
.sheet-rolltemplate-toy-twenty .sheet-title,
|
|
.sheet-rolltemplate-toy-fighting .sheet-title,
|
|
.sheet-rolltemplate-toy-info .sheet-title {
|
|
font-size:1.1em;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-toy-basic .sheet-subtitle,
|
|
.sheet-rolltemplate-toy-succeed .sheet-subtitle,
|
|
.sheet-rolltemplate-toy-twenty .sheet-subtitle,
|
|
.sheet-rolltemplate-toy-fighting .sheet-subtitle,
|
|
.sheet-rolltemplate-toy-info .sheet-subtitle {
|
|
font-size:.9em;
|
|
}
|
|
|
|
|
|
/* Allprops part */
|
|
.sheet-rolltemplate-toy-basic .sheet-content,
|
|
.sheet-rolltemplate-toy-succeed .sheet-content,
|
|
.sheet-rolltemplate-toy-twenty .sheet-content,
|
|
.sheet-rolltemplate-toy-fighting .sheet-content,
|
|
.sheet-rolltemplate-toy-info .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;
|
|
padding-top:20px;
|
|
}
|
|
|
|
.sheet-rolltemplate-toy-basic .sheet-content > div,
|
|
.sheet-rolltemplate-toy-succeed .sheet-content > div,
|
|
.sheet-rolltemplate-toy-twenty .sheet-content > div,
|
|
.sheet-rolltemplate-toy-fighting .sheet-content > div,
|
|
.sheet-rolltemplate-toy-info .sheet-content > div {
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Left column */
|
|
.sheet-rolltemplate-toy-basic .sheet-content .sheet-key,
|
|
.sheet-rolltemplate-toy-succeed .sheet-content .sheet-key,
|
|
.sheet-rolltemplate-toy-twenty .sheet-content .sheet-key,
|
|
.sheet-rolltemplate-toy-fighting .sheet-content .sheet-key,
|
|
.sheet-rolltemplate-toy-info .sheet-content .sheet-key {
|
|
font-weight: bold;
|
|
padding-right: 10px;
|
|
text-align: center;
|
|
min-height:40px;
|
|
}
|
|
|
|
/* Make even-numbered rows grey */
|
|
.sheet-rolltemplate-toy-basic .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-toy-basic .sheet-content :nth-child(4n),
|
|
.sheet-rolltemplate-toy-succeed .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-toy-succeed .sheet-content :nth-child(4n) {
|
|
background:#91a1b2;
|
|
}
|
|
|
|
/* Description field */
|
|
.sheet-rolltemplate-toy-basic .sheet-desc,
|
|
.sheet-rolltemplate-toy-succeed .sheet-desc,
|
|
.sheet-rolltemplate-toy-twenty .sheet-desc,
|
|
.sheet-rolltemplate-toy-fighting .sheet-desc,
|
|
.sheet-rolltemplate-toy-info .sheet-desc {
|
|
grid-column: span 2;
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-toy-succeed .sheet-failure,
|
|
.sheet-rolltemplate-toy-twenty .sheet-failure,
|
|
.sheet-rolltemplate-toy-fighting .sheet-failure {
|
|
grid-column: span 2;
|
|
padding: 5px;
|
|
text-align: center;
|
|
color: white;
|
|
background-color: #c73032 !important;
|
|
}
|
|
|
|
.sheet-rolltemplate-toy-succeed .sheet-success,
|
|
.sheet-rolltemplate-toy-twenty .sheet-success,
|
|
.sheet-rolltemplate-toy-fighting .sheet-success {
|
|
grid-column: span 2;
|
|
padding: 5px;
|
|
text-align: center;
|
|
color: white;
|
|
background-color: #507f62 !important;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-toy-succeed .sheet-value,
|
|
.sheet-rolltemplate-toy-twenty .sheet-value,
|
|
.sheet-rolltemplate-toy-fighting .sheet-value {
|
|
margin-top:5px;
|
|
padding-top:10px;
|
|
}
|