Files
roll20-character-sheets/Demon Hunters Beta/DHRPGtabs.css
T
vince c0bab8c13e Demon Hunters Beta
- fix roll template typo that was breaking the roll template.
- added some higher speceficity to the CSS because roll20's base style was causing issues.
2025-04-27 18:15:02 -07:00

791 lines
14 KiB
CSS

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family:sans-serif;}
.sheet-wrapper{
width:100%;
min-width:750px !important;
position:relative;
border:1px solid black;
}
div{
position:relative;
}
input[type="text"], textarea {
width:calc(100% - 75px);
font-size:14px;
color:#000080;
border:1px solid gray;
font-family:cursive;
padding:0 5px;
margin:0;
}
textarea{
resize:vertical;
padding:5px;
}
select {
color:#000080;
font-family:cursive;
}
input[type="text"]:focus, textarea:focus, select:focus {
background:#D1EEEE;
}
table {
width:calc(100% - 5px);
border-collapse:separate;
font-size:16px;
}
label{
font-weight:bold;
font-variant: small-caps;
font-size:1.2em;
display:block;
font-family:serif;
}
span.sheet-span_right{
display: inline-block;
float: right;
padding-top:5px;
text-align:right;
}
span.sheet-span_left{
display: inline-block;
float: left;
padding-top:5px;
text-align:left;
}
span.sheet-info{
float:right;
margin:0 20px 0 0;
font-size: 12px;
line-height: 22px;
}
/*Tabs*/
input.sheet-tab[type=radio] {
margin:0;
}
input.sheet-tab {
height: 30px;
z-index: 4;
opacity: 0;
}
input.sheet-tab,
input.sheet-tab + span {
position: absolute;
right: 5px;
height: 30px;
text-align:center;
font-weight:bold;
font-variant: small-caps;
}
input.sheet-tab + span {
display: inline-block;
padding: 5px;
border: 1px solid black;
border-top: none;
background: #ddd;
z-index: 1;
}
input.sheet-tab + span::before {
content: attr(title);
}
input.sheet-tab[value=dmc] {
top: 0;
right: -1px;
width:calc(45% - 145px);
}
input.sheet-tab[value=dmc] + span {
top: 0;
right: -1px;
width:calc(45% - 144px);
}
input.sheet-tab.sheet-dmc[value=dmc-minion] {
top: 29px;
right: -1px;
width:calc(22.5% - 72px);
}
input.sheet-tab.sheet-dmc[value=dmc-minion] + span {
top: 29px;
right: -1px;
width:calc(22.5% - 71px);
border-top:1px dashed gray;
border-radius: 0 0 4px 4px;
}
input.sheet-tab.sheet-dmc[value=dmc-dmc] {
top: 29px;
right:calc(22.5% - 74px);
width:calc(22.5% - 72px);
}
input.sheet-tab.sheet-dmc[value=dmc-dmc] + span {
top: 29px;
right:calc(22.5% - 74px);
width:calc(22.5% - 71px);
border-top:1px dashed gray;
border-radius: 0 0 4px 4px;
}
input.sheet-tab[value=character] {
top: 0;
right:calc(45% - 146px);
width:calc(55% - 144px);
}
input.sheet-tab[value=character] + span {
top: 0;
right:calc(45% - 146px);
width:calc(55% - 144px);
}
input.sheet-tab.sheet-char[value=character-sheet] {
top: 30px;
right: calc(50% - 146px);
width:calc(50% - 144px);
}
input.sheet-tab.sheet-char[value=character-sheet] + span {
top: 30px;
right: calc(50% - 146px);
width:calc(25% - 71px);
border-top:1px dashed gray;
}
input.sheet-tab:checked + span {
z-index: 3;
background: #E6DD93;
}
div.sheet-tab{
display:none;
position: relative;
z-index: 2;
}
input.sheet-sub, input.sheet-sub + span{
display:none;
}
input.sheet-tab[value=dmc]:checked ~ div.sheet-dmc-wrapper,
input.sheet-tab[value=dmc]:checked ~ input.sheet-dmc,
input.sheet-tab[value=dmc]:checked ~ input.sheet-dmc + span,
input.sheet-tab[value=character]:checked ~ div.sheet-character-wrapper/*,
input.sheet-tab[value=character]:checked ~ input.sheet-char,
input.sheet-tab[value=character]:checked ~ input.sheet-char + span*/ {
display: block;
}
input.sheet-dmc[value=dmc-dmc]:checked ~ div.sheet-dmc-wrapper div.sheet-dmcs-wrapper,
input.sheet-dmc[value=dmc-minion]:checked ~ div.sheet-dmc-wrapper div.sheet-minions-wrapper,
input.sheet-char[value=character-sheet]:checked ~ div.sheet-character-wrapper div.sheet-pc-wrapper {
display:block;
}
/*Head*/
.sheet-head{
border-bottom:1px solid black;
margin:0 0 5px;
padding:5px;
position:relative;
height:116px;
}
.sheet-title{
position: absolute;
bottom: 5px;
right: 5px;
text-align: right;
margin: 0;
}
.sheet-title h2{
font-family:serif;
font-size:30px;
margin:0;
vertical-align:bottom;
font-variant: small-caps;
}
.sheet-logo{
float:left;
position:relative;
margin:-5px 0 -5px -5px;
padding:5px;
background:white;
height:115px;
}
.sheet-logo img
{
border: 0;
outline: 0;
color: #660000;
font-weight: bold;
font-family: fantasy;
font-variant: small-caps;
text-shadow: 1px 1px 1px #555;
font-size: 50px;
height: 105px;
line-height: 105px;
text-align: center;
}
/*Player*/
.sheet-pc-wrapper {
min-height: 500px !important;
padding: 5px;
}
.sheet-left_cont{
float:left;
width:49.5%;
clear:left;
}
.sheet-right_cont{
float:right;
width:49.5%;
}
.sheet-left_cont div,
.sheet-right_cont div
{
padding:10px 0;
}
.sheet-pc-wrapper .sheet-approaches label,
.sheet-pc-wrapper .sheet-disciplines label{
display:inline-block;
max-width:50%;
}
/*Left Side*/
.sheet-name label{
display:inline-block;
max-width:50px !important;
}
.sheet-name input[type="text"]
{
height:35px;
font-size:15px;
width: calc(100% - 55px);
}
.sheet-description textarea{
height:150px;
width:98%;
}
.sheet-aspt_table td{
border:1px solid gray;
height:35px;
padding-right:3px;
color:#888;
font-size:10px;
text-transform:uppercase;
letter-spacing: -1px;
}
.sheet-aspt_table td span{
min-width:50px;
margin:0;
}
.sheet-aspt_table input[type="text"]{
height:25px;
width:85%;
letter-spacing: 0;
display:inline-block;
margin:5px -3px 5px 5px;
border:1px solid #bbb;
}
/*Right Side*/
.sheet-top_label{
position:absolute;
top:0;
left:0;
padding:0 2px;
margin-top:0;
font-size:1em;
white-space:nowrap;
text-align:center;
}
.sheet-faith{
margin:0 0 0 10%;
}
.sheet-faith,
.sheet-devo{
position:relative;
float:left;
display:inline-block;
}
.sheet-chapter, .sheet-demon{
position:relative;
float:left;
display:inline-block;
margin:0 10px;
}
.sheet-faith input[type="text"],
.ui-dialog .tab-content .charsheet .sheet-demon button[type="roll"]{
width: 50px;
height: 40px;
border: 3px solid black;
padding:5px;
margin:10px 0 -5px 0;
border-radius: 10px;
text-align:center;
}
.ui-dialog .tab-content .charsheet .sheet-demon button[type="roll"] {
background-color: black;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Demon%20Hunters%20Beta/images/infernal.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 40px;
margin-left: 5px;
}
.sheet-chapter input[type="text"]
{
width: 80px;
height: 40px;
border: 3px solid black;
padding:5px;
margin:10px 5px -5px -4px;
border-radius: 10px;
text-align:center;
}
.sheet-devo input[type="text"]{
width: 50px;
height: 40px;
border: 2px solid black;
padding:5px;
margin:10px 10px -5px -5px;
border-radius: 10px;
text-align:center;
}
.sheet-spacer
{
font-size:25px;
font-weight:bold;
padding:7px;
vertical-align: middle;
}
.sheet-approaches{
clear:left;
}
.sheet-appr_table td,
.sheet-disc_table td{
height:40px;
padding-right:5px;
color:black;
font-size:12px;
text-transform:uppercase;
letter-spacing: -1px;
}
.ui-dialog .tab-content .charsheet .sheet-appr_table button,
.ui-dialog .tab-content .charsheet .sheet-disc_table button{
height: 24px;
display: inline-block;
}
.sheet-appr_table select,
.sheet-disc_table select{
width: 58px;
height: 40px;
border: 2px solid black;
border-radius: 5px;
}
.sheet-appr_table td {
width:49%;
}
.sheet-appr_table td.attr_left_td select{
margin:0 0 0 -67px;
}
.ui-dialog .tab-content .charsheet .sheet-appr_table td.attr_left_td button {
margin: 1px 0 0 -85px;
}
.sheet-appr_table td.attr_left_td select.sheet-d2{
margin:0 0 0 -120px;
}
.sheet-appr_table td.attr_right_td select,
.sheet-disc_table select{
margin:0 -71px 0 10px;
}
.ui-dialog .tab-content .charsheet .sheet-appr_table td.attr_right_td button[type="roll"],
.ui-dialog .tab-content .charsheet .sheet-disc_table button[type="roll"] {
margin: 1px -100px 0 72px;
}
.sheet-appr_table span,
.sheet-disc_table span{
width:100%;
border:1px solid gray;
padding:3px;
margin:8px 0 0;
}
.sheet-appr_table span.sheet-span_right,
.sheet-disc_table span.sheet-span_right {
text-align:left;
padding-left:100px;
}
.sheet-appr_table span.sheet-span_left{
text-align:right;
padding-right:100px;
}
.sheet-appr_table span.sheet-span_left.sheet-d2{
text-align:right;
padding-right:140px;
}
.sheet-disc_table span.sheet-fringe {
margin-top:5px;
}
.sheet-disc_table input[type="text"] {
margin:0 0 0 10px;
border:1px solid #bbb;
}
/*Bottom*/
.sheet-bot {
clear:both;
}
.sheet-bot div
{
padding:5px 0 10px;
}
.sheet-conditions input[type=checkbox]{
border:1px solid black;
}
.sheet-cond_table td{
height:25px;
}
span.sheet-cond{
color:#888;
font-size: 10px;
text-transform: uppercase;
}
.sheet-stunts textarea {
height:35px;
width:100%;
max-width:100% !important;
margin: 0;
}
/*DM*/
.sheet-dmcs-wrapper,
.sheet-minions-wrapper {
min-height:500px !important;
padding:5px;
}
.sheet-dmc_col1
{
width:33%;
float:left;
padding:10px 0;
}
.sheet-dmc_col2
{
width:66%;
float:right;
padding:10px 0;
}
.sheet-dmcs .sheet-bot div
{
padding:5px 0 10px;
}
.sheet-dmcs-wrapper .sheet-aspects input[type="text"] {
height:35px;
width:100%;
max-width:100% !important;
}
.sheet-dmc-disc_table{
border-spacing:0 0 5px 0;
}
.sheet-dmc-disc_table td{
height: 40px;
padding: 0 5px 0 0;
}
.sheet-dmc-disc_table span.sheet-disc {
margin: 2px;
margin-left: calc(-100% + 10px);
width: 40px;
height: 40px;
line-height: 35px;
border: 2px solid black;
border-radius: 5px;
display: inline-block;
background: white;
text-align: center;
vertical-align: middle;
}
.sheet-dmc-disc_table input[type="text"] {
display:inline-block;
width: calc(100% - 5px);
border: 1px solid gray;
padding: 3px 3px 3px 55px;
margin: 0;
z-index:2;
}
.sheet-notes textarea {
height:35px;
width:100%;
max-width:100% !important;
}
/*Minions*/
.sheet-minions-wrapper .sheet-aspects label,
.sheet-minions-wrapper .sheet-stats label{
display:inline-block;
max-width:50%;
}
input.sheet-tab[value=mob] {
top: 10px;
right: 10px;
width:calc(50% - 40px);
}
input.sheet-tab[value=mob] + span {
top: 10px;
right: 10px;
width:calc(50% - 40px);
border: 1px solid black;
border-bottom: 1px dashed gray;
border-radius: 4px 4px 0 0;
}
input.sheet-tab[value=individual] {
top: 10px;
right:calc(50% - 30px);
width:calc(50% - 40px);
}
input.sheet-tab[value=individual] + span {
top: 10px;
right: calc(50% - 30px);
width:calc(50% - 40px);
border: 1px solid black;
border-bottom: 1px dashed gray;
border-radius: 4px 4px 0 0;
}
div.sheet-mob-wrapper, div.sheet-individual-wrapper{
border:1px solid black;
background:#E6DD93;
margin-top:1px;
padding: 5px 10px 0;
border-radius: 4px 0;
}
input.sheet-tab[value=mob]:checked ~ div.sheet-mob-wrapper,
input.sheet-tab[value=individual]:checked ~ div.sheet-individual-wrapper {
display:block;
}
.sheet-min_dif ul {
padding-left:20px;
font-size:14px;
}
.sheet-min_dif ul li{
padding-bottom:5px;
}
/*Roll Templates, Edit Buttons & Other*/
div.repcontrol, div.repcontainer{
padding:0 0 3px;
}
div.repitem{
padding:3px;
}
.repcontainer.editmode[data-groupname=repeating_min_cond-mild] button,
.repcontainer.editmode[data-groupname=repeating_min_cond-mod] button,
.repcontainer.editmode[data-groupname=repeating_min_cond-sev] button,
.repcontainer.editmode[data-repeating_min_aspt] button {
padding: 1px 6px;
margin-top: -10px;
}
.sheet-rolltemplate-RollAll > table {
background-color:white;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Demon%20Hunters%20Beta/images/logo_light.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
min-height: 150px;
min-width:180px;
border-spacing: 0;
border:3px solid black;
border-radius: 10px;
}
.sheet-rolltemplate-RollAll > table tr th,
.sheet-rolltemplate-Demon > table tr th{
height:25px;
padding:5px;
color: #990000;
text-align:left;
font-style: italic;
font-weight:bold;
}
.sheet-rolltemplate-RollAll > table tr td {
height:20px;
padding:5px;
}
.sheet-rolltemplate-RollAll > table tr td:nth-child(2){
font-weight:bold;
text-align:center;
font-size:1.1em;
}
.sheet-rolltemplate-RollAll > table tr td:first-child{
font-variant:small-caps;
}
.sheet-rolltemplate-RollAll > table tr:nth-child(1) td,
.sheet-rolltemplate-RollAll > table tr:nth-child(3) td,
.sheet-rolltemplate-RollAll > table tr:nth-child(5) td{
background-color:rgba(0, 0, 0, 0.2);
}
.sheet-rolltemplate-RollAll .inlinerollresult {
background-color: transparent;
border: none;
}
.sheet-rolltemplate-RollAll .inlinerollresult.fullcrit {
color: #3FB315;
border: none;
}
.sheet-rolltemplate-RollAll .inlinerollresult.fullfail{
color: #B31515;
border: none;
}
.sheet-rolltemplate-RollAll .inlinerollresult.importantroll{
color: #4A57ED;
border: none;
}
.sheet-rolltemplate-Demon > table
{
height:125px;
width:150px;
}
.sheet-rolltemplate-Demon > table tr td {
height: 100px;
width: 150px;
border-spacing: 0;
border: 1px solid black;
font-size: 80px;
font-weight: 700;
text-shadow: 0 0 5px #cc0000;
padding: 0;
margin: 0;
background: black;
text-align: center;
}
.sheet-rolltemplate-Demon .inlinerollresult,
.sheet-rolltemplate-Demon .inlinerollresult.fullcrit,
.sheet-rolltemplate-Demon .inlinerollresult.importantroll {
display:block;
width:100%;
height:100%;
padding:0 0 0 8px;
margin:0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height:100px;
background-color:white;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Demon%20Hunters%20Beta/images/dont-panic.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position:right;
border:none;
color:black;
}
.sheet-rolltemplate-Demon .inlinerollresult.fullfail {
width:100%;
height:100%;
background-color:black;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Demon%20Hunters%20Beta/images/blood-spatter.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position:center;
border:none;
color:black;
}