mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
CoalPoweredPuppet
6c2ba89672
This is a bug/layout fix Some new buttons, better roll templates, some hide/show areas Massive aesthetic change (its now readable) Only this sheet (HTML and CSS) The only attribute name change is from"Mega-foo" to "Mega_foo" because the roll template didn't like the dash.
616 lines
13 KiB
CSS
616 lines
13 KiB
CSS
.charsheet {
|
|
background:white;
|
|
}
|
|
/* Repeating Blocks */
|
|
/* Repeating Blocks */
|
|
/* Repeating Blocks */
|
|
.repcontrol {
|
|
min-height: 27px;
|
|
}
|
|
|
|
.repcontrol .btn {
|
|
/*visibility: hidden;*/
|
|
border: medium none;
|
|
color: white !important;
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.repcontrol .btn:focus {
|
|
outline: 0;
|
|
}
|
|
.sheet-saving-throw-container .repcontrol .repcontrol_edit,
|
|
.sheet-saving-throw-container .repcontrol .repcontrol_add {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.repcontrol .repcontrol_edit:after {
|
|
content: '(';
|
|
visibility: visible;
|
|
font-family: pictos;
|
|
background-color: #fff;
|
|
border: 1px solid black;
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
height: 12px;
|
|
width: 12px;
|
|
padding: 2px 4px 2px 4px;
|
|
color: black;
|
|
}
|
|
|
|
.editmode ~ .repcontrol .repcontrol_edit:after {
|
|
content: ')';
|
|
}
|
|
|
|
.repcontrol .repcontrol_add:before {
|
|
content: '&';
|
|
visibility: visible;
|
|
font-family: pictos;
|
|
background-color: #fff;
|
|
border: 1px solid black;
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
height: 12px;
|
|
width: 12px;
|
|
padding: 2px 4px 2px 4px;
|
|
color: black;
|
|
}
|
|
|
|
.repcontrol .repcontrol_edit:hover:after,
|
|
.repcontrol .repcontrol_add:hover:before {
|
|
background-color: #EFEFEF;
|
|
}
|
|
|
|
.sheet-resources .repcontrol {
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.itemcontrol {
|
|
z-index: 10;
|
|
}
|
|
|
|
.itemcontrol .repcontrol_del {
|
|
font-size: 10px;
|
|
margin-top: 3px;
|
|
padding: 0px;
|
|
height: 18px;
|
|
width: 18px;
|
|
}
|
|
|
|
.itemcontrol .repcontrol_move {
|
|
font-size: 10px;
|
|
margin-top: 3px;
|
|
padding: 0px;
|
|
height: 18px;
|
|
width: 18px;
|
|
}
|
|
/* End of Repeating Blocks */
|
|
/* End of Repeating Blocks */
|
|
/* End of Repeating Blocks */
|
|
/* columns */
|
|
.sheet-col {
|
|
width:250px;
|
|
}
|
|
.sheet-dual_col .sheet-col {
|
|
width:400px;
|
|
}
|
|
/* Rows and Items */
|
|
.charsheet .sheet-wrapper .sheet-row {
|
|
height: 24px;
|
|
margin: 0 0 2px;
|
|
position: relative;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item {
|
|
display: inline-block;
|
|
height: 28px;
|
|
vertical-align: middle;
|
|
margin: 0 -2px;
|
|
text-align: left;
|
|
padding: 3px 2px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-620 {
|
|
width: 620px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-250 {
|
|
width: 250px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-200 {
|
|
width: 200px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-190 {
|
|
width: 190px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-180 {
|
|
width: 180px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-150 {
|
|
width: 150px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-140 {
|
|
width: 140px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-130 {
|
|
width: 130px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-120 {
|
|
width: 120px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-110 {
|
|
width: 110px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-103 {
|
|
width: 103px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-100 {
|
|
width: 100px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-98 {
|
|
width: 98px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-95 {
|
|
width: 95px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-90 {
|
|
width: 90px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-75 {
|
|
width: 75px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-70 {
|
|
width: 70px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-50 {
|
|
width: 50px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-25 {
|
|
width: 25px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-24 {
|
|
width: 24px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-20 {
|
|
width: 20px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-13 {
|
|
width: 13px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item.sheet-5 {
|
|
width: 5px;
|
|
}
|
|
.charsheet .sheet-wrapper .sheet-item .sheet-st {
|
|
width:100%;
|
|
}
|
|
input.sheet-st,
|
|
select.sheet-st {
|
|
width:100%;
|
|
height: 23px;
|
|
background: transparent;
|
|
border-radius:0px;
|
|
border-left: 6px solid gray;
|
|
border-bottom: 1px dotted gray;
|
|
border-right: none;
|
|
border-top:none;
|
|
}
|
|
input.sheet-total {
|
|
width:20px;
|
|
height:20px;
|
|
background:transparent;
|
|
border:none;
|
|
box-shadow:none;
|
|
font-size:12px;
|
|
padding:0;
|
|
margin:0px;
|
|
font-weight:bold;
|
|
text-align:center;
|
|
}
|
|
input.sheet-specialty {
|
|
width:100%;
|
|
height: 23px;
|
|
background: transparent;
|
|
border-radius:0px;
|
|
border-bottom: 1px dotted gray;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-top:none;
|
|
font-style:italic;
|
|
}
|
|
input.sheet-repeating {
|
|
width:100%;
|
|
height: 23px;
|
|
background: transparent;
|
|
border-radius:0px;
|
|
border-bottom: 1px dotted gray;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-top:none;
|
|
|
|
}
|
|
.sheet-title {
|
|
font-weight:bold;
|
|
color:darkred;
|
|
font-variant: small-caps;
|
|
}
|
|
h1.sheet-title {
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/AEON-Aberrant/AberrantLogo.png");
|
|
background-size: auto;
|
|
margin: 0 auto;
|
|
text-indent:-10000px;
|
|
}
|
|
textarea.sheet-textarea_1 {
|
|
width:96%;
|
|
border-radius:5px;
|
|
background:white;
|
|
resize:vertical;
|
|
height:24px;
|
|
}
|
|
textarea.sheet-textarea_2 {
|
|
width:96%;
|
|
border-radius:5px;
|
|
background:white;
|
|
resize:vertical;
|
|
height:220px;
|
|
}
|
|
input.sheet-select_wound,
|
|
select.sheet-select_wound {
|
|
width:100%;
|
|
height: 23px;
|
|
background: transparent;
|
|
border-radius:0px;
|
|
border-left: 6px solid darkred;
|
|
border-bottom: 1px dotted gray;
|
|
border-right: none;
|
|
border-top:none;
|
|
}
|
|
.sheet-hidden {
|
|
display:none;
|
|
}
|
|
|
|
|
|
/* Grid */
|
|
/* Grid */
|
|
/* Grid */
|
|
div.sheet-grid_details {
|
|
display: grid;
|
|
grid-template-columns: 250px 250px 250px;
|
|
grid-column-gap: 5px;
|
|
grid-row-gap: 5px;
|
|
}
|
|
div.sheet-grid_details_2 {
|
|
display: grid;
|
|
grid-template-columns: 120px 125px 250px 250px;
|
|
grid-column-gap: 5px;
|
|
grid-row-gap: 5px;
|
|
}
|
|
div.sheet-grid_item {
|
|
padding: 2px;
|
|
height: 24px;
|
|
}
|
|
div.sheet-subtitle {
|
|
font-size:10px;
|
|
font-style: italic;
|
|
align-self: start;
|
|
}
|
|
.sheet-grid_item_a {
|
|
grid-column: span 2;
|
|
}
|
|
/* End of Grid */
|
|
/* End of Grid */
|
|
/* End of Grid */
|
|
input.sheet-hider:checked ~ div.sheet-hold {
|
|
display: none;
|
|
}
|
|
/* Hide actual radio */
|
|
input.sheet-mdot[type="radio"],
|
|
input.sheet-dot[type="radio"] {
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Fake radio */
|
|
input.sheet-dot[type="radio"] + span::before {
|
|
margin-right: 4px;
|
|
border: solid 1px #a8a8a8;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
box-shadow: 0 0 2px #ccc;
|
|
background: #f6f6f6;
|
|
background: radial-gradient(#f6f6f6, #000);
|
|
content: "";
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 24px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Remove dot from all radios _after_ selected one */
|
|
input.sheet-dot[type="radio"]:checked ~ input.sheet-dot[type="radio"] + span::before {
|
|
content: "";
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
}
|
|
|
|
input.sheet-mdot[type="radio"] + span::before {
|
|
margin-right: 4px;
|
|
border: solid 1px #a8a8a8;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
box-shadow: 0 0 2px #ccc;
|
|
background: #f6f6f6;
|
|
background: radial-gradient(#f6f6f6, #000);
|
|
content: "";
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 24px;
|
|
border-radius: 10%;
|
|
}
|
|
|
|
/* Remove dot from all radios _after_ selected one */
|
|
input.sheet-mdot[type="radio"]:checked ~ input.sheet-mdot[type="radio"] + span::before {
|
|
content: "";
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
}
|
|
/*------------empty traits-----------*/
|
|
input.sheet-zero[type="radio"]:checked + span::before{
|
|
opacity: 0;
|
|
}
|
|
input.sheet-zero[type="radio"]:hover + span::before{
|
|
opacity: 1;
|
|
background: transparent;
|
|
}
|
|
input.sheet-zero[type="radio"] + span::before{
|
|
font-size: 12px;
|
|
content: "✖";
|
|
opacity: 0.25;
|
|
background: transparent;
|
|
border:none;
|
|
box-shadow:none;
|
|
color:darkred;
|
|
font-weight:bold;
|
|
}
|
|
/* gear */
|
|
/* gear */
|
|
/* gear */
|
|
/* Hide actual radio/checkbox */
|
|
input.sheet-gear[type="checkbox"] {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Fake radio/checkbox */
|
|
input.sheet-gear[type="checkbox"] + span::before {
|
|
position: relative;
|
|
top: 4px;
|
|
left: 0px;
|
|
margin-right: 4px;
|
|
border: none;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
box-shadow: 0 0 2px #ccc;
|
|
background: transparent;
|
|
font-family: 'Pictos';
|
|
content: "y";
|
|
color:red;
|
|
}
|
|
|
|
/* Fake checkbox */
|
|
input.sheet-gear[type="checkbox"] + span::before {
|
|
font-family: 'Pictos';
|
|
content: "y";
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 16px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
input.sheet-gear[type="checkbox"]:checked + span::before {
|
|
color:gray;
|
|
}
|
|
/* strike */
|
|
/* strike */
|
|
/* strike */
|
|
input.sheet-strike[type="checkbox"] {
|
|
opacity: 0;
|
|
width: 25px;
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
margin: -5px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* -----Fake sheet-gear skillbox----- */
|
|
|
|
input.sheet-strike[type="checkbox"]::before + span::before {
|
|
margin-right: 4px;
|
|
margin-left: 0px;
|
|
line-height: 14px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
text-align:center;
|
|
content: "";
|
|
width: 20px;
|
|
height: 14px;
|
|
position: relative;
|
|
}
|
|
span.sheet-strike {
|
|
position: relative;
|
|
left: -10px;
|
|
width: 20px;
|
|
color:black;
|
|
text-shadow:none;
|
|
text-decoration: line-through;
|
|
font-weight:bold;
|
|
}
|
|
input.sheet-strike[type="checkbox"]:checked + span {
|
|
color: red;
|
|
text-shadow:none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Hide actual radio/checkbox */
|
|
input.sheet-skill_open[type="checkbox"] {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
opacity: 0;
|
|
width: 250px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Fake radio/checkbox */
|
|
input.sheet-skill_open[type="checkbox"] + span::before {
|
|
position: relative;
|
|
top: -14px;
|
|
left: -4px;
|
|
margin-right: 0px;
|
|
border: none;
|
|
border-radius:4px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
background: darkred;
|
|
color:white;
|
|
}
|
|
|
|
/* Fake checkbox */
|
|
input.sheet-skill_open[type="checkbox"] + span::before {
|
|
content: "Skill Close";
|
|
height:16px;
|
|
width:250px;
|
|
font-size: 12px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
input.sheet-skill_open[type="checkbox"]:checked + span::before {
|
|
content: "Skill Open";
|
|
}
|
|
/* grid_btn */
|
|
/* grid_btn */
|
|
/* grid_btn */
|
|
button[type=roll].sheet-background::before,
|
|
button[type=roll].sheet-grid_btn::before {
|
|
content: '';
|
|
}
|
|
.sheet-grid_btn {
|
|
height:20px;
|
|
width:20px;
|
|
color:black;
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
font-weight:bold;
|
|
border-radius:5px;
|
|
padding:0;
|
|
margin:0px;
|
|
}
|
|
.sheet-background {
|
|
height:16px;
|
|
width:16px;
|
|
color:black;
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
font-weight:bold;
|
|
border-radius:5px;
|
|
padding:0;
|
|
margin:0px;
|
|
}
|
|
/* End of grid_btn */
|
|
/* End of grid_btn */
|
|
/* End of grid_btn */
|
|
.sheet-rolltemplate-base .sheet-container {
|
|
background-color: #ffffff;
|
|
border: 1px solid;
|
|
padding: 2px;
|
|
width: 189px;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-container h1 {
|
|
color: darkred;
|
|
font-size: 1.2em;
|
|
font-variant: small-caps;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.sheet-rolltemplate-base div {
|
|
padding: 2px;
|
|
};
|
|
|
|
.sheet-rolltemplate-base span {
|
|
color: rgb(126, 45, 64);
|
|
font-family: "Times New Roman", Times, serif;
|
|
font-size: 1.2em;
|
|
font-variant: small-caps;
|
|
line-height: 1.6em;
|
|
padding-left: 5px;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-subheader {
|
|
color: #000;
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-arrow-right {
|
|
border-bottom: 2px solid transparent;
|
|
border-left: 180px solid black;
|
|
border-top: 2px solid transparent;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .sheet-tcat {
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .inlinerollresult {
|
|
background-color: #ffffff;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .inlinerollresult.fullcrit {
|
|
color: #3FB315;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .inlinerollresult.fullfail {
|
|
color: #B31515;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-base .inlinerollresult.importandivoll {
|
|
color: #4A57ED;
|
|
border: none;
|
|
}
|
|
.sheet-rolltemplate-base .sheet-rowcolor2 {
|
|
color: red;
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
font-weight:bold;
|
|
} |