Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-08-30 19:52:29 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
e13aa10f6d3bf8c86bcdaae501ecff7e2fa7e8a9
roll20-character-sheets/ProjectMoonTRPG/ProjectMoonTRPGStyle.css
T
BeautiDemise 4cee5f0b69 Feature preview: 
- Added a modified version of the Block automation feature that is to be released in v0.7
- Due to how heavily this feature has been requested an early preview of this feature has been added
   - This preview will be released with the full version after v0.7 is released
- Does not include any other combat options features
2024-08-27 05:55:09 +02:00

3240 lines
90 KiB
CSS
Raw Blame History

/* Universal styling */
* {
margin: 0px;
padding: 0px;
text-decoration: none;
list-style: none;
border-style: none;
line-height: 1;
font-family: 'Noto Sans JP', sans-serif;
}
/* Sheet base */
#menuContainer {
width: 100%;
display: flex;
position: relative;
min-width: 800px;
}
#sheetTitle {
color: #fee2b0;
font-weight: bolder;
display: flex;
align-items: center;
font-size: 15pt;
height: 20px;
position: absolute;
top: 0;
left: 180px;
min-width: 600px;
}
#sheetWrapper {
margin-top: 70px;
margin-bottom: 30px;
}
.sheetform {
background-color: #1F1F1F !important;
position: relative;
min-width: 850px;
}
.title, body, .sheet-body {
min-width: 800px;
max-width: 850px;
}
/* Popup messages */
#messagePop {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 999;
}
#messagePop input, #messagePop textarea {
text-align: center;
}
.messageClose {
position: absolute;
top: 5px;
right: 5px;
border: 1px rgba(256,256,256, 0.5) solid;
border-radius: 5px;
z-index: 900;
width: 30px;
height: 30px;
}
.messageClose label {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.mHeader{
font-size: 20px;
color: #fee2b0 !important;
}
.mBody {
border: none;
/* border: 1px red solid !important; */
}
.messageContent {
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
border: 1px #fee2b0 solid;
background-color: rgba(0,0,0,0.8);
border-radius: 5px;
color: #fee2b0;
width: 50%;
min-width: 350px;
padding: 5px;
height: 0px;
opacity: 0;
overflow: hidden;
/* transition: opacity 0.55s, height 1s; */
}
#messageToggle:checked ~ #messagePop .messageContent {
height: 100px;
opacity: 100%;
/* transition: opacity 0.55s, height 0s; */
}
/* Placeholder text for input fields and textfields */
::placeholder {
color: #fff;
opacity: 50%;
}
textarea::placeholder, .CharSmallNotes::placeholder, .CharDetail::placeholder, .egoIdeologyInput::placeholder {
color: #111;
opacity: 30%;
}
/* Cusomizable names for equipment, skills, mystery ect. */
.contentName, .viewerName, .skillName, .toolName, .skillSelectionElement .skillSelectionName, input[type=text] {
text-overflow:ellipsis;
}
.contentName {
width: 100%;
}
.skillName {
width: 140px;
margin-left: 40px;
}
.toolName {
width: 95px;
}
/* Setting bars that appear when editing weapon/tool uses, outfit resistances ect. */
.editCover {
position: absolute;
z-index: 5;
background-image: linear-gradient(rgba(160,160,160,0.8), rgba(160,160,160,0.9), rgba(160,160,160,0.7));
left: 0px;
bottom: 0px;
right: 0px;
padding: 5px;
min-height: 25px;
}
.editCover .settingStyle {
color: #fff;
}
.helperText:checked ~ .helperTextContainer .helpers b {
display: none !important;
}
.helperText:checked ~ .damageHelperContainer.helperTextContainer :is(.slash, .pierce) {
margin-right: 28px;
}
.helperText:checked ~ .damageHelperContainer.helperTextContainer .blunt {
position: absolute;
top: 0px;
left: 28px;
}
.editCover > .rowContainer,
.editCover > .hide-item,
.editCover > .hide-item > .rowContainer {
position: relative;
height: 100%;
}
/* Currently unused. Will wrap a fourth ego outfit property down to a second row */
/* If outfits ever gain more than this many properties a change should probably be made
to a columnAligned rowContainer structure */
.distortionContainer .editCover .rowContainer .rowContainer:nth-child(n+4),
.egoContainer .editCover .rowContainer .rowContainer:nth-child(n+4) {
position: absolute;
left: 0;
bottom: 0;
}
/* Dropdown menues in top right corner of augments and special items */
.topRight {
width: 140px;
height: 25px;
position: absolute;
right: 5px;
text-align: center;
top: 5px;
}
/* Displays for the health, stagger, sanity and light bars as well as the distortion counter */
.banner {
text-align: left; font-weight: bold; padding: 5px; width: 50%;
height: 50px; color: #fff;
text-transform: uppercase;
}
.counter {
opacity: 100%;
}
.Cstat, .Mstat {
font-size: 16pt;
font-weight: bold;
}
.Cstat{
color: #111;
background-color: transparent !important;
width: 125% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0;
z-index: 5;
opacity: 80%;
padding-left: 5px;
}
.Mstat{
color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
right: 0;
width: 50% !important;
height: 100% !important;
text-align: center;
border-radius: 0px 3px 3px 0px;
z-index: 10;
}
.distortProfile .bars {
width: 65px !important;
height: 25px !important;
background-color: transparent;
opacity: 70%;
}
.distortProfile .Cstat {
width: 130% !important;
font-size: 14pt;
opacity: 100%;
}
.distortProfile .Mstat {
font-size: 14pt;
border-left: 2px #cc4125 dotted;
background-color: #000;
position: absolute;
top: 0;
right: 0;
z-index: 20;
}
.bars {position: relative; background-color: #111; width: 90px !important; height: 25px; height: 37px; border-radius: 5px;}
.contentBlock { width: 100%; display: flex; justify-content: start; align-items: start; }
#Counter span {
font-weight: bold;
}
/* Assorted sizing and positioning of sheet elements. Most are self-explanatory */
.rowContainer {
display: flex;
align-items: start;
justify-content: start;
width: 100%;
position: relative;
}
.centerFlex {
align-items: center;
justify-content: center;
}
.rowContainer select {
text-align: center;
}
.settingStyle {
display: flex;
align-items: center;
justify-content: start;
}
.qolButton {
height: 15px;
width: 15px;
text-align: center;
border: 1px #fee2b0 solid;
color: #fee2b0;
padding: 3px;
border-radius: 5px;
background-color: rgba(0,0,0,0);
float: left;
font-size: 12pt;
font-weight: bold;
opacity: 50%;
margin-right: 5px;
}
.reloadButton {
height: 15px;
width: 15px;
padding: 3px;
border-radius: 5px;
border: 1px #fee2b0 solid;
border-radius: 5px;
background-color: rgba(0,0,0,0);
opacity: 40%;
position: absolute;
top: 3px;
right: -5px;
}
.titleHeader {
height: 30px;
margin-top: 5px;
margin-bottom: 5px;
display: flex;
align-items: center;
opacity: 100%;
}
/* Header of all sections in the sheet (equipment, skills, player profile at the top of the sheet) */
.sectionHeader {
background-color: #ddd;
width: 100%;
padding-top: 3px;
padding-bottom: 3px;
text-align: left;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: start;
flex-basis: 0;
height: 30px;
}
/* User for sections displayed in pairs (ex. tools), each taking up half of the column */
.half {
width: 49%;
}
.contentContainer.half {
width: 49% !important;
}
#TopContainer { width: 100%; text-align: center; display: flex; }
#TopColumnL { min-width: 265px; float: left; padding-left: 0px; padding-right: 0px; margin-right: 5px; }
#TopColumnM { min-width: 180px; padding-left: 10px; padding-right: 10px; }
#TopColumnR { width: 265px; float: right; padding-left: 15px; padding-right: 10px; }
.columnContent { min-width: 180px; max-width: 280px; position: relative;}
.columnAlign {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
color: #fff;
position: relative;
}
.contentContainer, .specialBlock, .augmentBlock, .skillBlock {
width: 100%;
text-align: center;
background-color: #c3c3c3; border-radius: 3px;
position: relative;
overflow: hidden;
}
.specialBlock { margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom:5px; }
.augmentBlock { margin-top: 10px; }
/* Player name field at the top of the sheet */
.player { position: absolute; top: 40px; left: 203px; z-index: 4; text-align: left; display: flex; align-items: flex-start; justify-content: flex-start; height: 25px; opacity: 50%; }
.player div { color: #fee2b0; font-weight: bolder; height: 25px; display: flex; align-items: center; justify-content: center; }
#playerName { background-color: transparent; text-decoration-line: underline; text-decoration-color: #fee2b0; color: #fee2b0; }
/* Setting menu (displayed by hovering over cogwheel in top-right corner) */
#settings label {
color: #fff !important;
font-size: 10pt !important;
}
#settings {
width: 27px;
height: 27px;
position: absolute;
top: 2px;
right: 0px;
background-color: rgba(0,0,0,0);
border-radius: 5px;
border: 1px transparent solid;
overflow: hidden;
color: #fee2b0;
font-weight: bold;
z-index: 150;
}
/*#settings {*/
#settings:hover {
height: auto;
width: 530px;
border: 1px #fee2b0 solid;
border-radius: 5px 15px 5px 5px;
background-color: rgba(0,0,0,0.8);
}
.settingsIcon {
position: absolute;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
top:0;
right: 0;
width: 25px;
height: 25px;
font-size: 20px;
border-radius: 100px;
border: 1px #fee2b0 solid;
}
.settingsText {
width: 220px;
padding: 35px;
padding-bottom: 25px;
}
.settingsText input[type="checkbox"] {
position: absolute;
}
.settingsText span:not(.settingsTitle) {
position: relative;
left: 21px;
}
.settingsTitle {
line-height: 1.8em;
}
/* Credits (displayed by hovering over logo in top-left corner) */
#credits {
width: 32px;
height: 32px;
position: absolute;
top: -2px;
left: 60px;
background-color: rgba(0,0,0,0);
border-radius: 5px;
border: 1px transparent solid;
overflow: hidden;
color: #fee2b0;
z-index: 100;
}
#credits:hover{
width: 500px;
height: 160px;
border: 1px #fee2b0 solid;
border-radius: 15px 5px 5px 5px;
background-color: rgba(0,0,0,0.8);
}
.creditIcon {
position: absolute;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
width: 30px;
height: 30px;
color: #fee2b0;
font-size: 20px;
border-radius: 100px;
border: 1px rgba(256,256,256, 0.2) solid;
}
.creditText {
padding: 10px 10px 10px 50px;
}
.creditText input {
height: 15px !important;
}
#logo {
height: 75px; width: 150px; min-width: 150px; margin-bottom: 10px;
position: absolute;
top: 0; left: 15px;
}
#logo img {width: 150px; min-width: 150px;
}
/* These do not look like they're used anywhere, but look important enough to keep around */
.sheet-template_Body{width: 240px; height: 360px;
background-image: url(https://i.imgur.com/TjGTQ7o.png); background-size: 240px 360px; overflow: hidden;}
.sheet-container{width: 150px; height: 250px; margin-left: 45px; margin-top: 55px; text-shadow: #FC0 0px 0 4px;}
.sheet-template_type{width: 150px; height: 20px; color: #fee2b0; text-align: center; padding-top: 10px;}
.sheet-template_name{width: 150px; height: 20px; color: #fee2b0; text-align: center; font-family: 'HeirofLightBold';}
.sheet-template_dice_type{width: 150px; height: 20px; color: #fee2b0; text-align: center;}
.sheet-template_dice{width: 150px; height: 60px; color: #000000; text-align: center;}
.sheet-template_effect {width: 150px; height: 60px; color: #fee2b0; text-align: center;}
/* Default for all icons on the sheet */
.icon {
position: absolute;
top: 0;
left: 0;
}
/* Default styling for different interactive elements */
textarea, input { outline: none; }
input[type="number"]{border-style: none; vertical-align: middle; background-color: #ddd;}
input[type="text"]{border-style: none; outline-style: none; vertical-align: middle; background-color: #ddd;}
input[type="checkbox"]{ width: 21px; height: 21px; text-align: center; vertical-align: middle; }
input[type='checkbox'] {
accent-color: #fee2b0;
opacity: 50%;
}
input[type='checkbox']:checked {
opacity: 100%;
}
textarea {
border-style: none;
outline-style: none;
vertical-align: middle;
background-color: #ddd;
border-left: 2px #ccc solid;
border-right: 2px #ccc solid;
max-width: 97%;
width: 100%;
max-height: 100px;
resize: none;
}
select {
border-style: none;
outline-style: none;
vertical-align: top;
background-color: #ddd;
margin-bottom: 0px;
}
/* Styling for default, dark and light input elements */
.transpInput {
background-color: rgba(0,0,0,0) !important;
color: #fff;
font-weight: bold;
}
.darkInput, .status_effect_value {
background-color: rgba(0,0,0,0.2) !important;
color: #fff;
font-weight: bold;
}
.whiteInput {
background-color: rgba(256,256,256,0.1) !important;
color: #eee;
font-weight: bold;
}
/* Genuinely have no clue what this does. May be for having the sheet function better on tablets and mobiles */
textarea::-webkit-outer-spin-button,textarea::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
/* H3 is used for sections on the main character sheet. H4 is used for headers in the Editor tab. viewerName is used for the skill preview */
h3, h4, .viewerName {
vertical-align: middle;
color: #fee2b0 !important;
font-weight: bolder;
}
#sheetSettings h3 {
background-color: #333;
padding: 5px;
position: relative;
}
/* Character profile */
.profileData {
text-align: left;
display: flex;
margin-bottom: 1px;
}
.textSection {
width: 65px !important;
font-size: 8pt !important;
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 5px;
font-weight: bold;
overflow: hidden;
}
.CharImage {
background-color: #555;
right: 0px;
margin-top: 0px;
top: 62px;
border: 2px #555 solid;
overflow: hidden;
position: absolute;
height: 105px;
width: 100px;
}
.CharImageText {
top: 0;
right: 0;
position: absolute;
height: 100%;
width: 100%;
}
.CharImageText {
color: #ddd;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
#characterDetails .CharImage, #characterDetails .CharImageText {
top: 0px;
width: 155px;
height: 158px;
}
.CharMediumNotes {
height: 50px !important;
margin: 0 !important;
}
.CharImage img {
position: absolute;
top: 0;
right: 0;
height: 100%;
object-fit: contain !important;
z-index: 2;
}
.levelBox {
position: absolute;
top: 3px;
left: auto;
right: 0;
font-size: 9pt !important;
align-items: flex-end;
justify-content: flex-end;
opacity: 50%;
width: 90px;
}
.CharAge, .CharHeight, .CharOrigin, .CharJob {
max-width: 95px;
margin-left: -3px;;
text-overflow:ellipsis;
}
#CharExtra, #distortExtra {
padding-top: 10px;
margin-left: 5px;
margin-right: 5px;
}
#CharExtra div {
color: #333;
}
#CharExtra div, #CharExtra textarea, #distortExtra div, #distortExtra textarea {
width: 100% !important;
}
#characterDetails .CharSmallNotes {
width: 175px !important;
}
#DistortionName, #CharacterName {
width: 150px !important;
}
#characterDetails .CharDetail {
width: 330px !important;
}
.CharBigNotes {
display: flex;
align-items: center;
flex-direction: column;
margin-left: 15px;
overflow: hidden;
height: 100px !important;
padding: 5px;
}
#CharExtra .textSection, #distortExtra .textSection {
margin-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.CharBigNotes textarea {
height: 100% !important;
width: 100% !important;
margin: 0px !important;
padding: 5px !important;
display: inline-block;
border-radius: 5px;
}
/* EXP counter / level box */
.levelBox input {
height: 25px !important;
}
/* Distortion profile */
.distortProfile .CharImage {
background-color: #111;
border: 2px #111 solid;
top: 30px;
}
.distortionDice .dicerollBlock {
width: 85px;
margin-left: 2px;
margin-right: 2px;
}
.distortProfile {
background-color: #111;
color: #999 !important;
}
.distortProfile .textSection {
color: #777;
}
.distortProfile .whiteInput, .distortDescInput, .distortEffectInput {
color: #bbb;
border: none;
scrollbar-color: #555 #333 !important;
font-weight: normal;
background-color: #333 !important;
}
.distortEffectInput, .distortDescInput {
border-left: 2px #111 solid;
border-right: 2px #111 solid;
border-top: 1px #111 solid;
border-bottom: 1px #111 solid;
}
.distortProfile ::placeholder {
color: #999 !important;
opacity: 50%;
}
.workPref input {
height: 27px !important;
width: 27px;
font-weight: bold !important;
font-size: 14pt;
margin: 3px;
}
/* The distort button */
.distortIcon {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Distort.png');
}
.profileHeader {
position: absolute;
top: 3px;
left: 3px;
z-index: 5;
}
.profileHeader input[type=checkbox] + label {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 30px !important;
width: 30px !important;
display:inline-block;
padding: 0 0 0 0px;
opacity: 20%;
}
.profileHeader input[type=checkbox]:checked + label {
opacity: 30%;
}
/* Distortion observation levels */
.observationSelect span {
font-size: 9px;
}
.observationSelect .columnAlign {
width: 50%;
}
.observationSelect label {
color: #888 !important;
}
/* Dice / combat pallette and skill selection */
.combatPaletteName {
max-width: 100px;
margin-left: 35px !important;
font-size: 9pt;
}
.paletteButton input {
background-color: transparent !important;
}
.paletteDiceContainer {
justify-content: flex-end;
align-items: center;
height: 100%;
margin: 0;
position: relative;
}
.paletteButton {
height: 30px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3px;
}
.paletteDice {
overflow: hidden;
width: 60px;
height: 30px;
position: absolute;
right: 30px !important;
top: 0px;
padding-left: 3px;
padding-right: 3px;
}
.paletteDice * {
margin: 0 !important;
padding: 0 !important;
font-size: 9.5pt !important;
height: 100% !important;
width: 17px !important;
display: flex;
align-items: center;
justify-content: center;
text-align: center !important;
color: #fff !important;
font-weight: bold !important;
}
.paletteDice .plainText {
opacity: 70%;
width: 5px !important;
}
.paletteButton .BDice, .paletteButton .NDice {
height: 23px !important;
width: 23px !important;
position: absolute; top: 3px; right: 0px;
}
.blocker {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
}
.skillSelectionElement .icon, .skillN .icon, .skillE .icon {
border-radius: 100px;
overflow: hidden;
height: 30px;
width: 30px;
border: 1px #fff solid;
}
.skillSelectionElement img, .skillIcon, .skillE img {
height: 30px;
width: 30px;
}
.toolSelect {
height: 50%;
overflow-y: auto;
overflow-x: hidden;
width: 100%;
flex-wrap: wrap;
z-index: 90;
position: absolute;
width: 125%;
bottom: 0;
margin-left: 15px;
}
.declare {
height: 23px;
padding: 3px;
border-radius: 3px;
color: #fff !important;
background-color: #222 !important;
border: 1px #111 solid;
font-weight: bold;
min-width: 40px;
}
.noHover{
cursor: text !important;
background-color: #ddd !important;
}
/* Skill / tool selection (newer) */
.skillSelectionLabel .icon input[type='checkbox'] {
display: none !important;
}
.skillSelectionElement .skillSelector {
opacity: 0% !important;
}
.skillhide {
overflow: hidden;
position: relative;
border-radius: 100px;
border: 1px #555 solid;
margin-left: 2px;
margin-right: 2px;
width: 125px;
height: 32px;
}
.skillBuffer {
max-width: 49%;
overflow: hidden;
}
.skillSelectionLabel {
background-color: transparent;
color: #fff;
position: absolute; left: 0; width: 100%; top: 0; height: 100%; z-index: 10;
border-radius: 100px 100px 100px 100px;
opacity: 60%;
width: 125px;
}
.skillSelectionLabel input {
color: #fff;
}
.skillSelector:not(:checked) + .skillSelectionLabel:hover {
background-color: rgba(0, 0, 0, 0.3) !important;
}
.skillSelector:checked ~ .skillSelectionLabel {
background-color: #555;
opacity: 100%;
}
.toolSelectHolder {
display: flex; position: relative; width: 30px; height: 30px;
border: 1px transparent solid;
border-radius: 5px;
overflow: hidden;
}
.toolSelectHolder type-image {
position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 0;
}
.toolSelectBox {
text-align: center;
font-weight: bold;
position: absolute;
left: 9px;
top: -5px;
z-index: 2;
width: 100%;
opacity: 80%;
}
.blocker .toolBlocker {
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
border-radius: 5px;
}
.weaponBlocker {
background-color: rgba(0,0,0,0.5);
color: #fff;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
z-index: 25;
}
.skillSelectionElement {
position: relative;
display: flex;
align-items: center;
height: 32px;
width: 100%;
}
.skillSelectionElement .skillSelectionName {
width: 100%;
height: 100%;
font-weight: bold;
margin-left: 30px !important;
margin-top: 3px;
}
.paletteOverride {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
z-index: 20;
}
.egoDefPalette, .egoEvdPalette, .egoAttPalette {
background-color: #000;
overflow: hidden;
}
.egoDefPalette input, .egoDefPalette .plainText {
color: #6d9eeb !important;
}
.egoEvdPalette input, .egoEvdPalette .plainText {
color: #f1c232 !important;
}
.egoAttPalette input, .egoAttPalette .plainText {
color: #cc4125 !important;
}
.paletteOverride .hide-item {
width: 100%;
}
.hide-item.tool {
width: 45px;
}
.weaponSlot {
max-height: 35px;
}
.weaponSlot .paletteButton, .weaponSlot .hide-toggle-rev, .weaponSlot .hide-item-rev {
height: 30px !important;
overflow: hidden !important;
}
.paletteRange {
font-weight: bold;
color: #fff;
text-align: center;
overflow: hidden;
width: 30px;
height: 30px;
position: relative;
margin-left: 3px;
}
.paletteRange .buffer {
width: 100% !important;
position: absolute; top: 0; right: 0;
width: 30px !important;
height: 30px !important;
display: flex;
align-items: center;
justify-content: center;
}
.weaponPaletteUses {
width: 30px;
height: 30px;
position: absolute;
top:0px;
right: 100px;
z-index: 24;
opacity: 70%;
}
.weaponPaletteUses input {
color: #fff !important;
}
/* Roll buttons around the character sheet. See Dice Roll Blocks for the roll template input fields */
button[type=action].challengeButton {
font-size: 9pt !important;
background-color: transparent !important;
height: 25px;
overflow:hidden;
width: 70px;
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0));
font-weight: bolder;
text-align: center;
text-decoration: none;
text-shadow: none;
border: 1px rgba(256,256,256, 0.3) solid;
box-shadow: none !important;
padding: 0px !important;
}
button[type=action].challengeButton:hover{
opacity: 80%;
}
button[type=action].challengeButton::before {
display: none;
}
button[type=roll].NDice, button[type=action].NDice{
background-color: #333;
font-weight: bolder;
font-size: 0px;
width: 23px !important;
height: 23px !important;
margin: 0.0;
padding: 0.0em;
border: 1px solid #000000;
border-radius: 5px;
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/buttondice.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
line-height: 100;
margin-left: 5px;
margin-right: 2px;
}
/* Dice roll blocks, aka anything in the format "xdx+x". Not to be confused with the block reaction */
.combatDice{ text-align: center; justify-content: end; align-items: center; margin-right: 3px; }
.dicerollBlock {
display: flex;
height: 100%;
justify-content: end;
width: 90px;
align-items: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
.dicerollBlock .plainText {
width: 8px;
color: #fff;
text-align: center;
opacity: 70%;
font-weight: bold;
}
.dicerollBlock input{
width: 25px;
background-color: transparent;
color: #fff;
font-weight: bold;
font-size: 12pt;
}
.diceNum {
text-align: right !important;
}
.diceVval {
text-align: left !important;
}
/* Hide the toggle checkbox */
.expand-toggle, .hide-toggle, .hide-toggle-rev {
display: none;
}
.expand-btn {
width: 35px !important;
height: 35px !important;
opacity: 30%;
}
.distortProfile .expand-btn {
padding: 0px;
margin: 5px;
height: 25px !important;
width: 25px !important;
}
.fade-toggle + div {
opacity: 100%;
}
.fade-toggle:checked + div {
opacity: 20%;
}
.status_effect_value {
opacity: 60%;
}
.fade-toggle ~ .status_effect_value {
opacity: 80%;
}
.fade-toggle:checked ~ .status_effect_value {
opacity: 40%;
}
/* Reveal/hide content with checkbox is checked */
.expand-toggle:checked ~ .expand-btn,
#weapon1-slash:checked ~ .expand-btn, #weapon1-pierce:checked ~ .expand-btn, #weapon1-blunt:checked ~ .expand-btn,
#weapon2-slash:checked ~ .expand-btn, #weapon2-pierce:checked ~ .expand-btn, #weapon2-blunt:checked ~ .expand-btn {
opacity: 100% !important;
}
.expand-toggle:checked ~ .type-image {
opacity: 100% !important;
}
.hide-item-rev {
display: inline-block;
}
.hide-toggle:checked ~ button, .hide-toggle-rev:checked ~ .hide-item-rev {
display: none !important;
}
.hide-item {
width: 100%;
display: none;
}
.hide-toggle:checked ~ .hide-item {
display: inline-block;
}
/* General equipment */
/* ALL of these classes were labelled as "outfitRank" before the reformatting */
.weaponRank, .outfitRank, .augmentRank, .toolRank, .specialItemRank, .egoRank,
.characterRank, .characterLevel, .workAmount, .workPref .workPref,
.disadvCounter, .advCounter,
.lightCostInput, .egoLightCostInput {
width: 25px;
text-align: center;
background-color: rgba(0,0,0,0.2) !important;
color: #fff;
font-weight: bold;
height: 25px !important;
margin-left: 5px;
margin-right: 5px;
}
.weaponContainer, .outfitContainer, .toolContainer, .egoSkillContainer, .skillContainer {
width: 100%;
max-width: 400px;
display: flex;
align-items: start;
justify-content: start;
position: relative;
padding: 5px;
flex-wrap: wrap;
}
.weaponDescriptionInput, .weaponEffectInput, .outfitDescription, .outfitDescriptionInput, .augmentDescriptionInput {
position: relative;
margin-bottom: 0px;
}
/* Icons used for equipment and skills */
.iconHolder {
height: 35px;
width: 45px;
}
.iconHolder img {
height: 35px;
width: 35px;
}
.type-image{ text-align: center; }
.icon .type-image, .resIconRight .type-image, .resIconLeft .type-image {
opacity: 0;
}
/* Weapons */
.weaponIcons {
width: 35px;
min-width: 35px;
height: 35px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
position: relative;
}
.weapon_distance, .weapon_type {
height: 25px;
width: 50% !important;
text-align: center;
}
.weapon_type {width: 90px !important; height: 25px; margin-right: 5px;}
.weaponPropertySelect, .weaponRangeBox{
color: #fff !important;
border-radius: 0px 0px 5px 0px;
padding: 4px;
height: 25px;
position: absolute;
top: 30px;
left: 0;
z-index: 1;
}
.weaponPropertySelect {
width: 190px;
display: flex;
align-content: flex-start;
justify-content: flex-start;
}
.weaponRangeBox {
width: 190px;
border-radius: 0px 0px 0px 5px;
left: auto;
right: 0;
}
.weaponRangeBox select, .weaponPropertySelect select{
width: 70px;
background-color: rgba(0,0,0,0.2) !important;
color: #fff;
font-weight: bold;
}
.weaponDescription, .weaponEffect {
width: 50%;
}
.weaponDescriptionInput {
height: 70px !important;
}
.weaponDescription span, .weaponEffect span {
height: 10px;
padding: 0 !important;
}
.descHead {
height: 28px !important;
display: flex;
align-items: center;
justify-content: center;
}
/* Removes the spacing between weapons if only two weapons are displayed (aka. the hide-toggle for extra weapons is unchecked) */
.weaponContainer .contentContainer:has(+ .hide-toggle):has(+ :not(:checked)) {
margin-top: 0px !important;
}
/* Outfits */
.outfitDescriptionInput {
height: 60px !important;
}
.resistanceChart {
flex-wrap: wrap;
min-width: 50%;
max-width: 100%;
}
.resistanceChart img, .resistanceChart select {
margin: 0; padding: 0;
}
.resistanceChart img {
height: 30px !important;
width: 30px !important;
}
.resistanceChart select {
width: 55px !important;
appearance: none;
text-indent: 3px;
border: 1px solid #c3c3c3;
}
.outfitResistVal { width: 45px; text-align: center; }
.resIconLeft {
position: absolute;
top: 0;
left: 10px;
}
.resIconRight {
position: absolute;
top: 0;
right: 10px;
}
.evadeIcon, .evadeIcon img {
height: 30px;
width: 30px;
}
.evadeAdjust {
height: 25px;
margin-left: 1px;
}
/* Outfit custom resistance display */
.outfitCustomResistDisplay {
width: 300px;
}
:is(.outfitContainer, .egoContainer, .distortionContainer) .editCover .hide-toggle:checked ~ .hide-item {
display: flex;
}
:is(.outfitContainer, .egoContainer, .distortionContainer) .editCover .columnAlign {
align-items: normal;
flex-direction: column;
justify-content: start;
}
:is(.egoContainer, .distortionContainer) .editCover {
padding-bottom: 35px;
}
.outfitContainer .editCover > .columnAlign > .rowContainer > .rowContainer,
.egoContainer .editCover .columnAlign > .rowContainer > .rowContainer,
.distortionContainer .editCover > .columnAlign > .rowContainer > .rowContainer,
.outfitCustomResistDisplay .repitem:has(.hide-toggle:checked) { width: 82.34px; }
:is(.outfitContainer, .egoContainer) .status_effect_value {
background-color: rgba(0, 0, 0, 0.2) !important;
border-radius: 5px;
}
:is(.outfitContainer, .egoContainer, .distortionContainer) .ailmentNum {
text-align: center;
}
:is(.outfitContainer, .egoContainer, .distortionContainer) .status_effect_item {
width: 25px;
opacity: 100%;
}
.outfitCustomResistDisplay .repcontainer, .egoContainer .repcontainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* Tools */
.tool input[type=checkbox] + label {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 30px !important;
width: 30px !important;
display:inline-block;
padding: 0 0 0 0px;
margin: 0px;
opacity: 30%;
}
.tool input[type=checkbox] + label:hover {
opacity: 50%;
}
.tool input[type=checkbox]:checked + label {
opacity: 100%;
}
.toolDescriptionInput {
height: 65px !important;
margin-bottom: 2px !important;
}
.tool input[type=checkbox], .profileHeader input[type=checkbox] {
display:none;
}
/* Hide spinner on Chromium brosers unless selected/hovered over */
.toolMaxInput:not(:hover):not(:focus)::-webkit-inner-spin-button,
.toolMaxInput:not(:hover):not(:focus)::-webkit-outer-spin-button {
display: none;
}
/* Hide spinner on Firefox */
.toolMaxInput {
appearance: textfield;
}
.toolMaxInput:focus, .toolMaxInput:hover {
appearance: auto;
}
.portableIcon {
background-image: url("https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Portable.png");
}
/* Also used in a lot of other places*/
.reusableIcon {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/reuse.png');
background-size: contain;
background-repeat: no-repeat;
}
/* Special items */
.specialDescriptionInput {
margin-bottom: 0px !important;
}
.specialColumn {
color: rgba(0,0,0,0.5);
font-weight: bold;
text-align: left;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 0 !important;
margin-top: 7px;
width: 140px;
}
.specialInput {
width: 140px;
}
.toolDescriptionInput {
height: 65px !important;
margin-bottom: 2px !important;}
.egoDescInput {
height: 60px;
}
.egoIdeologyInput {
width: 100% !important;
height: 25px !important;
margin-bottom: 3px !important;
}
.egoSpecialLabel span {
width: 150px;
height: 20px;
text-align: left;
padding-left: 10px;
}
.egoSpecialLabel select {
margin-right: 5px;
}
.resistanceChart.BLACK select {
border: 1px solid #000;
}
.egoCheck {
position: absolute !important;
top: 10px;
right: 5px;
height: 20px !important;
width: 20px !important;
}
/* Skills */
.skillType {
width: 100%;
margin-right: 5px;
height: 25px !important;
color: #fff !important;
}
.skillRank {
position: absolute;
top: 3px;
left: 6px;
z-index: 20;
width: 30px;
height: 30px !important;
border-radius: 100px;
text-shadow: rgba(0,0,0,1) 0px 0px 5px;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
background-color: rgba(0,0,0,0) !important;
color: #fff;
text-align: center;
font-size: 14px;
font-weight: bold;
}
.lightCost {
color: #fee2b0;
font-weight: bold;
float: right;
}
.lightCost input {
background-color: #fee2b0 !important;
border-radius: 100px;
color: rgba(0,0,0,0.5);
}
.skillN .icon, .skillE .icon {
margin-top: 2px !important;
margin-left: 5px !important;
}
/* Ego skills */
.skillE .icon {
border: 1px #888 solid !important;
}
/* Damage helpers */
.damageHelperContainer b {
display: inline-block;
max-width: 80%;
opacity: 30%;
font-size: 9pt;
}
.damageHelperContainer input[type=number] {
height: 50px !important;
text-align: center;
font-size: 16pt;
font-weight: bold;
opacity: 80%;
margin-top: 3px !important;
}
.baseDamageInput {
width: 55px !important;
border-top: 2px solid #cc4125 !important;
border-left: 2px solid #cc4125 !important;
border-right: 2px solid #dbb748 !important;
border-bottom: 2px solid #dbb748 !important;
}
.flatDamage input {
width: 45px !important;
}
.flatHPInput, .flatSTInput {
text-align: left !important;
padding-right: 2px;
padding-left: 8px;
}
.flatHPInput {
border: 2px solid #cc4125 !important;
}
.flatSTInput {
border: 2px solid #dbb748 !important;
}
/* Hide spinner on Chromium brosers unless selected/hovered over */
.flatHPInput:not(:hover):not(:focus)::-webkit-inner-spin-button,
.flatHPInput:not(:hover):not(:focus)::-webkit-outer-spin-button,
.flatSTInput:not(:hover):not(:focus)::-webkit-inner-spin-button,
.flatSTInput:not(:hover):not(:focus)::-webkit-outer-spin-button {
display: none;
}
/* Hide spinner on Firefox */
.flatHPInput, .flatSTInput {
appearance: textfield;
}
.flatHPInput:focus, .flatHPInput:hover,
.flatSTInput:focus, .flatSTInput:hover {
appearance: auto;
}
.damageHelperType input[type=radio] {
display: none;
}
.damageHelperType input[type=radio]:not(:checked) + label:hover {
opacity: 60% !important;
cursor: pointer;
}
.damageHelperType input[type=radio]:checked + label {
opacity: 100%;
}
.damageHelperType input[type=radio] + label {
opacity: 30%;
}
.damageHelperType label {
height: 30px;
width: 30px;
margin: 0px;
padding: 0px;
}
/* When no damage type is selected, the button is grayed out and unresponsive to input */
.applyDamageInput {
opacity: 60%;
cursor: default;
height: 50px;
min-width: 50px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-top: 2px;
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/damage.png');
border-radius: 5px;
background-color: #222 !important;
border: 1px #111 solid;
}
.damageHelperType:has(input:checked:not([value="None"])) ~ .applyDamage .applyDamageInput {
opacity: 100%;
}
.damageHelperType:has(input:checked:not([value="None"])) ~ .applyDamage .applyDamageInput:hover {
background-color: #000 !important;
cursor: pointer;
}
/* Combat options */
/* Currently just contains a preview of the defence automation from v0.7 */
.combatOptionsContainer {
margin-bottom: 6px;
}
.defenceDice {
height: 40px !important;
width: 40px !important;
font-size: 20px;
text-shadow: #000 0 0 3px, #000 0 0 10px;
text-align: center;
background-size: contain;
background-position: left;
background-repeat: no-repeat;
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/Release-v0.6.2/ProjectMoonTRPG/imagesResized/icons/egoDef.png');
}
.defenceDice:not(:hover):not(:focus)::-webkit-inner-spin-button,
.defenceDice:not(:hover):not(:focus)::-webkit-outer-spin-button {
display: none;
}
/* This disables the spinner in Firefox */
.defenceDice {
appearance: textfield;
}
.defenceDice:focus, .defenceDice:hover {
appearance: auto;
}
/* For preview. Delete later */
.combatOptionsContainer .rowContainer {
display: flex;
align-items: center;
justify-content: center;
}
.combatOptionsContainer b {
margin-right: 5px;
font-size: 11pt !important;
}
/* Roll helpers */
.helpers {
margin-left: 1px;
margin-right: 1px;
}
.helpers b, .work b {
font-size: 9pt;
opacity: 30%;
}
.speed {
height: 30px;
width: 30px;
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Speed.png');
background-size: cover;
background-repeat: no-repeat;
border-radius: 5px;
background-color: #222 !important;
border: 1px #111 solid;
margin: 1px;
}
.speed:hover, button[type=roll].NDice:hover, button[type=action].NDice:hover, .challengeButton:hover, .declare:hover, .btn:hover {
background-color: #000 !important;
}
.expand-toggle:checked ~ .whisper {
border: 1px #fee2b0 solid;
opacity: 60%;
}
.difficultyInput {
height: 50px !important;
width: 55px !important;
font-size: 12pt;
text-align: center;
margin-top: 3px !important;
margin-bottom: 0px;
}
.updateInput {
height: 50px;
width: 50px;
background-size: contain;
background-position: center;
margin-top: 2px;
margin-right: 3px;
}
.utilitybuttons {
height: 27px;
background-size: contain;
background-position: center;
}
.disadvCounter {
border: 2px #cc4125 solid !important;
}
.disadvCheck {
height: 30px !important;
accent-color: #cc4125 !important;
}
.advCounter {
border: 2px #93c47d solid !important;
}
.advCheck {
height: 30px !important;
accent-color: #93c47d !important;
}
.speedbox {
text-align: center;
width: 30px !important;
}
.sideDice {
color: #fff;
font-weight: bold;
}
.power {
text-align: center !important;
font-weight: bold;
border: 1px #666 solid !important;
margin-bottom: 2px !important;
width: 40px !important;
}
/* Character stats */
.statBlock {
margin: 3px;
width: 100px;
overflow: hidden;
border-radius: 3px;
}
.statHeader {
background-color: #000;
font-weight: bold;
padding: 0px;
padding-bottom: 5px;
}
.statImage {
background-color: #000;
position: relative;
overflow: hidden;
height: 60px;
}
#InstinctStat {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/stats/Instinct.png');
}
#WisdomStat {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/stats/Wisdom.png');
}
#JusticeStat {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/stats/Justice.png');
}
#CharmStat {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/stats/Charm.png');
}
#InsightStat {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/stats/Insight.png');
}
#TemperanceStat {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/stats/Temperance.png');
}
.statInput {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: bottom-left;
background-size: 100%;
}
.statInput input {
text-align: center;
height: 100% !important;
width: 100% !important;
background-color: rgba(0,0,0,0.6) !important;
font-weight: bold;
font-size: 25pt;
}
.wisdom {
color: #d9d9d9 !important;
}
.justice {
color: #46bdc6 !important;
}
.charm {
color: #9c66c6 !important;
}
.insight {
color: #ffe599 !important;
}
.temperance {
color: #ac609d !important;
}
/* Status ailments */
.statusIcon {
width: 25px;
height: 25px;
}
.ailmentStates .statusIcon {
width: 35px;
height: 35px;
}
.ailmentStates input[type="checkbox"]{
display: none;
}
.ailmentStates label {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 3px;
}
.ailmentNum {
color: #fff;
font-weight: bold;
background-color: transparent !important;
padding-left: 1px;
text-align: left;
}
.ailmentNumThisTurn {
width: 30px !important;
padding-right: 0px;
position: absolute;
left: 3px;
}
.ailmentNumNextTurn {
color: #999;
width: 28px !important;
padding-right: 0px;
position: absolute;
left: 25px;
}
/* This rule disables the spinner (up and down buttons in number inputs) when not hovering over or selecting an ailment field */
.ailmentNumNextTurn:not(:hover):not(:focus)::-webkit-inner-spin-button,
.ailmentNumNextTurn:not(:hover):not(:focus)::-webkit-outer-spin-button,
.ailmentNumThisTurn:not(:hover):not(:focus)::-webkit-inner-spin-button,
.ailmentNumThisTurn:not(:hover):not(:focus)::-webkit-outer-spin-button {
display: none;
}
/* This disables the spinner in Firefox! */
.ailmentNumNextTurn, .ailmentNumThisTurn {
appearance: textfield;
}
.ailmentNumNextTurn:focus, .ailmentNumNextTurn:hover,
.ailmentNumThisTurn:focus, .ailmentNumThisTurn:hover {
appearance: auto;
}
/* If the next turn field is disabled by a hide toggle (Burn/Bleed/Smoke/Charge individual setting) or by a hide toggle rev (Global setting) the standard field is returned to it's normal styling */
.status_effect_value .hide-toggle:not(:checked) ~ .ailmentNumThisTurn,
.status_effect_value .hide-toggle-rev:checked ~ .ailmentNumThisTurn {
width: 45.5px !important;
padding-right: 4px;
}
/* This lengthy boi disables interacting with the next turn field while selecting or hovering over the current turn field (the fields partially overlap) */
:is(.ailmentNumThisTurn:hover, .ailmentNumThisTurn:focus) +
:is(.ailmentNumNextTurn) {
pointer-events: none;
z-index:-1;
}
#ailmentBlock .contentContainer {
padding-top: 10px;
padding-bottom: 10px;
}
.status_effect_item {
width: 30px;
}
.status_effect_value {
width: 52px;
height: 26px;
text-align: center;
border-radius: 5px;
}
.ailmentButton {
background-color: transparent;
width: 25px;
}
/* Automated state detection icons */
#state_Stagger, #state_Panic, #state_Defeat, #state_Immobile {
display: hidden !important;
}
#state_Stagger:checked, #state_Panic:checked, #state_Defeat:checked, #state_Immobile:checked {
accent-color: #555;
opacity: 100%;
}
/* Custom ailments display */
.customAilText {
width: 70px !important;
text-align: left;
font-weight: bold;
}
.ailmentIconSelector, .ailmentIconSelector .icon, .ailmentIconSelector .skillIcon {
height: 25px;
width: 25px;
}
.ailmentCustomDisplay .repcontainer {
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.ailmentCustomDisplay .repcontrol,
.outfitCustomResistDisplay .repcontrol,
.conditionalButtonDisplay .repcontrol {
display: none;
}
.ailmentCustomDisplay .repitem {
display: inline-block !important;
flex-basis: 33%;
min-width: 83.33px;
overflow: hidden;
}
.ailmentCustomEditor {
height: 280px;
}
.ailmentCustomEditor .repcontrol_move, #globalSettings .repcontrol_move {
display: none;
}
.ailmentCustomEditor .repcontrol {
position: absolute;
top: -38px;
right: 0px;
}
.ailmentCustomDisplay .hide-item-rev {
display: flex;
}
/* Game settings and custom ailment editor */
#globalSettings .repcontrol {
display: none;
}
#globalSettings ::placeholder {
color: #555 !important;
}
#globalSettings .transpInput {
color: #555 !important;
}
.ailmentCustomEditor .repitem {
margin: 5px;
flex-basis: 30%;
min-width: 250px;
padding: 5px;
border-radius: 5px;
background-color: #999;
overflow: hidden;
}
.ailmentCustomEditor .repitem textarea {
width: 205px;
height: 37px;
margin-bottom: 0px;
}
.repitemMock {
margin: 2px;
width: 160px;
padding: 5px;
border-radius: 5px;
background-color: #999;
overflow: hidden;
}
.repitemMock .settingStyle select {
padding-left: 3px; padding-right: 3px;
}
.repitemMock .settingStyle div:has(b) {
text-align: right;
padding-right: 4px;
}
.repIconMock .columnAlign .rowContainer {
align-items: flex-end !important;
}
.ailmentCustomEditor .itemcontrol {
position: absolute;
z-index: 10;
right: 0px;
top: 0px;
}
.ailmentCustomEditor .repcontainer, .ailmentCustomEditor .repcontainerMock {
display: flex;
flex-wrap: wrap;
max-height: 280px;
overflow: auto;
padding-left: 18px;
}
.hide-toggle-rev + .settingStyle.hide-item-rev {
display: flex;
}
/* Displays additional options for the WhenHit ailment trigger */
div.settingStyle:has(select[name="attr_ailTrigger"] > option[value="WhenHit"]:checked)
~ div.hide-item {
display: flex !important;
}
/* Icons! */
.skillAtt {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Attack.png');
}
.skillDef {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/defend.png');
}
.skillEvd {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/evade.png');
}
.skillAct {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Portable.png');
}
.skillMass {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Wide.png');
}
.skillSpecial {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/specialwhite.png');
}
.luck {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/fortunewhite.png');
}
.whisper {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/whisper.png');}
.damageResist {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/ProjectMoonTRPG-LoR-Rework/ProjectMoonTRPG/imagesResized/ailments/DamageResist.png');
}
.damageResist-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/ProjectMoonTRPG-LoR-Rework/ProjectMoonTRPG/imagesResized/ailments/limbus/DamageResist.png');
}
/* Ailment Icons */
.burn {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Burn.png');
}
.burn-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Burn.png');
}
.bleed {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Bleed.png');
}
.bleed-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Bleed.png');
}
.paralysis {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Paralysis.png');
}
.paralysis-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Paralysis.png');
}
.smoke {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Smoke.png');
}
.smoke-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Smoke.png');
}
.charge {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Charge.png');
}
.charge-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Charge.png');
}
.fortune {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Fortune.png');
}
.fortune-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Fortune.png');
}
.fragile {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Fragile.png');
}
.fragile-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Fragile.png');
}
.fragile-limbus-red {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/FragileRed.png');
}
.protection {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Protection.png');
}
.protection-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Protection.png');
}
.staggerprotection {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/StaggerProtection.png');
}
.staggerprotection-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/limbus/StaggerProtection.png');
}
.strength {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Strength.png');
}
.strength-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Strength.png');
}
.endurance {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Endurance.png');
}
.endurance-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Endurance.png');
}
.endurance-limbus-blue {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/EnduranceBlue.png');
}
.haste {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Haste.png');
}
.haste-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Haste.png');
}
.feeble {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Feeble.png');
}
.feeble-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Feeble.png');
}
.disarm {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Disarm.png');
}
.disarm-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Disarm.png');
}
.disarm-limbus-blue {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/DisarmBlue.png');
}
.bind {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Bind.png');
}
.bind-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Bind.png');
}
.panic {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Panic.png');
}
.panic-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Panic.png');
}
.panic-limbus-blue {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/PanicBlue.png');
}
.hostile {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Hostile.png');
}
.hostile-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Hostile.png');
}
.stagger, .fragilestagger {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/FragileStagger.png');
}
.stagger-limbus, .fragilestagger-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/FragileStagger.png');
}
.seal {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Seal.png');
}
.seal-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Seal.png');
}
.immobile {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Immobile.png');
}
.immobile-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Immobile.png');
}
.defeat {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Defeat.png');
}
.defeat-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Defeat.png');
}
/* Limbus specific icons */
.sinking-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Sinking.png');
}
.tremor-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Tremor.png');
}
.tremorchain-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorChain.png');
}
.tremordecay-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorDecay.png');
}
.tremordistribution-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorDistribution.png');
}
.tremoreverlasting-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorEverlasting.png');
}
.tremorfracture-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorFracture.png');
}
.tremorreverb-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorReverb.png');
}
.tremorsuperposition-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorSuperposition.png');
}
.rupture-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Rupture.png');
}
.poise-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Poise.png');
}
.critical-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Critical.png');
}
.devastation-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Devastation.png');
}
.ruin-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Ruin.png');
}
.frostbite-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Frostbite.png');
}
.nails-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Nails.png');
}
.poison-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Poison.png');
}
.aggro-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Aggro.png');
}
.bullseye-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Bullseye.png');
}
.ammo-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Ammo.png');
}
.barrier-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Barrier.png');
}
.duel-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Duel.png');
}
.fist-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Fist.png');
}
.fist-limbus-green {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/FistGreen.png');
}
.heal-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Heal.png');
}
.kampule-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/KAmpule.png');
}
.ttime-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TTime.png');
}
.rottingskin-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/RottingSkin.png');
}
.blood {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/Release-v0.6.3/ProjectMoonTRPG/images/ailments/Blood.png');
}
.slashprotection-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/SlashProtection.png');
}
.slashfragility-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/SlashFragility.png');
}
.pierceprotection-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/PierceProtection.png');
}
.piercefragility-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/PierceFragility.png');
}
.bluntprotection-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/BluntProtection.png');
}
.bluntfragility-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/BluntFragility.png');
}
.wrath-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Wrath.png');
}
.lust-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Lust.png');
}
.sloth-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Sloth.png');
}
.gluttony-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Gluttony.png');
}
.gloom-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Gloom.png');
}
.pride-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Pride.png');
}
.envy-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Envy.png');
}
/* Community icons */
.style-community {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/community/Style.png');
}
.thorns-community {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/community/Thorns.png');
}
.rhythm-community {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/community/Rhythm.png');
}
/* Ailment Icons END */
.next { /* Aka update */
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/next.png');
}
.egoSkills .skillAtt, .egoAtt {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoAtt.png');
background-color: #000;
}
.egoSkills .skillDef, .egoDef {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoDef.png');
background-color: #000;
}
.egoSkills .skillEvd, .egoEvd {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoEvd.png');
background-color: #000;
}
.egoSkills .skillAct, .egoAct {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoAct.png');
background-color: #000;
}
.egoSpecial {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoSpecial.png');
background-color: #000;
}
.egoSkills .skillMass {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoWide.png');
background-color: #000;
}
.slash {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Slash.png');
}
.pierce {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/pierce.png');
}
.blunt {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/blunt.png');
}
.egoSlash {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoSlash.png');
}
.egoPierce {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoPierce.png');
}
.egoBlunt {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoBlunt.png');
}
.question {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/question.png');
}
.defend {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/defend.png');}
.evade {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/evade.png');}
.slashNormal {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/def/ResSlash.png');}
.slashNormalSTG {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/def/ResSlashStg.png');}
.pierceNormal {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/def/ResPierce.png');}
.pierceNormalSTG {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/def/ResPierceStg.png');}
.bluntNormal {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/def/ResBlunt.png');}
.bluntNormalSTG {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/def/ResBluntStg.png');}
.skillIcon, .typeIcon, .resistIcon {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.resistIcon {
width: 30px;
height: 30px;}
.typeIcon {
width: 35px;
height: 35px;}
/* This... looks like it's supposed to be some tab changing CSS wizardry? It isn't in use currently */
#infoSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#infoSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body,
#skillSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#skillSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body,
#equipmentSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#equipmentSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body,
#exportSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#exportSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body,
#editSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#editSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body {
display: none;
}
/* Rolltemplate styling */
.sheet-rolltemplate-message div {
color: #fff !important;
background-color: rgba(0,0,0,0.5) !important;
}
/* Damage helper message styling*/
.sheet-rolltemplate-damagecalculation img {
height: 25px;
width: 25px;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer {
margin-top: 10px;
border-radius: 5px;
border: 1px solid #555;
position: relative;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer div {
min-height: 25px;
line-height: 20px;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer > div:nth-child(n+2) div {
padding-top: 3px;
padding-bottom: 3px;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer div > img:first-child {
position: absolute;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer div > img:first-child + div {
margin-left: 25px;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer > div:nth-child(n+2) {
border-bottom: 1px solid #555;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer > div:first-child {
height: 30px;
border: 2px solid #000;
}
.sheet-rolltemplate-damagecalculation .userscript-damageDisplay {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
text-align: center;
width: 64%;
position: absolute;
left: 0px;
top: 0px;
}
.sheet-rolltemplate-damagecalculation .userscript-baseDamage, .sheet-rolltemplate-damagecalculation .userscript-flatModifier {
padding-left: 9px;
line-height: 25px !important;
}
.sheet-rolltemplate-damagecalculation .userscript-updateStatDisplay {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
width: 35%;
background-color: #000;
border: 2px solid #000 !important;
position: absolute;
right: 0px;
top: 0px;
font-size: 16px;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer:has(div:only-child) {
display: none;
}
.sheet-rolltemplate-damagecalculation .userscript-hpCalculationContainer div:first-child { color: #cc4125; background-color: #111; }
.sheet-rolltemplate-damagecalculation .userscript-stCalculationContainer div:first-child { color: #f1c232; background-color: #111; }
.sheet-rolltemplate-damagecalculation .userscript-spCalculationContainer div:first-child { color: #6d9eeb; background-color: #111; }
/* Description and effect container styling */
.sheet-rolltemplate-baseRoll .userscript-descriptionContainer {
width: 50%;
height: auto;
float: left;
}
/* If only one description is present, expand its width */
.sheet-rolltemplate-baseRoll :nth-child(1 of div.userscript-descriptionContainer):not(:has(+ .userscript-descriptionContainer)) {
width: 100% !important;
}
.sheet-rolltemplate-baseRoll .userscript-effectDescription {
max-height: 70px;
overflow: auto;
border: 1px #555 solid;
padding-bottom: 1px;
}
/* AutoEffect message styling */
/* Yes, you have to write them all out like this... */
.sheet-rolltemplate-damagecalculation .userscript-autoeffectContainer .userscript-autoEffectImage,
.sheet-rolltemplate-autoeffect .userscript-autoeffectContainer .userscript-autoEffectImage,
.sheet-rolltemplate-message .userscript-autoeffectContainer .userscript-autoEffectImage,
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer .userscript-autoEffectImage {
height: 25px;
width: 25px;
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectContainer a,
.sheet-rolltemplate-autoeffect .userscript-autoeffectContainer a,
.sheet-rolltemplate-message .userscript-autoeffectContainer a,
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer a {
pointer-events: none;
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectContainer,
.sheet-rolltemplate-autoeffect .userscript-autoeffectContainer,
.sheet-rolltemplate-message .userscript-autoeffectContainer,
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer {
margin-top: 5px;
border-radius: 5px;
border: 1px solid #555;
position: relative;
}
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer {
float: left;
width: 99.3%;
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectContainer > .userscript-autoeffectEntry,
.sheet-rolltemplate-autoeffect .userscript-autoeffectContainer > .userscript-autoeffectEntry,
.sheet-rolltemplate-message .userscript-autoeffectContainer > .userscript-autoeffectEntry,
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer > .userscript-autoeffectEntry {
position: relative;
padding-left: 25px;
min-height: 25px;
line-height: 20px;
border-bottom: 1px solid #555;
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectContainer .userscript-autoEffectTitle,
.sheet-rolltemplate-autoeffect .userscript-autoeffectContainer .userscript-autoEffectTitle,
.sheet-rolltemplate-message .userscript-autoeffectContainer .userscript-autoEffectTitle,
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer .userscript-autoEffectTitle {
width: calc(100% - 40px);
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectEntry div,
.sheet-rolltemplate-autoeffect .userscript-autoeffectEntry div,
.sheet-rolltemplate-message .userscript-autoeffectEntryn div,
.sheet-rolltemplate-baseRoll .userscript-autoeffectEntry div{
padding-top: 3px;
padding-bottom: 3px;
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectEntry:has(div:first-child),
.sheet-rolltemplate-autoeffect .userscript-autoeffectEntry:has(div:first-child),
.sheet-rolltemplate-message .userscript-autoeffectEntryn:has(div:first-child),
.sheet-rolltemplate-baseRoll .userscript-autoeffectEntry:has(div:first-child){
padding-left: 9px;
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectContainer > .userscript-autoeffectEntry > img:first-child,
.sheet-rolltemplate-autoeffect .userscript-autoeffectContainer > .userscript-autoeffectEntry > img:first-child,
.sheet-rolltemplate-message .userscript-autoeffectContainer > .userscript-autoeffectEntry > img:first-child,
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer > .userscript-autoeffectEntry > img:first-child {
position: absolute;
left: 0;
}
/* Collapseable section styling */
.sheet-rolltemplate-damagecalculation .userscript-collapseSection,
.sheet-rolltemplate-message .userscript-collapseSection,
.sheet-rolltemplate-baseRoll .userscript-collapseSection {
max-height: 29px;
transition: max-height 10s 0.1s ease-in;
overflow: hidden;
}
.sheet-rolltemplate-damagecalculation .userscript-collapseSection:hover,
.sheet-rolltemplate-message .userscript-collapseSection:hover,
.sheet-rolltemplate-baseRoll .userscript-collapseSection:hover {
max-height: 500px;
transition: max-height 3s 0.1s ease;
}
/* Removed mergin for every section but the first */
.sheet-rolltemplate-damagecalculation .userscript-collapseSection ~ .userscript-collapseSection,
.sheet-rolltemplate-message .userscript-collapseSection ~ .userscript-collapseSection,
.sheet-rolltemplate-baseRoll .userscript-collapseSection ~ .userscript-collapseSection {
margin-top: 0px;
}
/* Create arrow to indicate if the section is collapsed or expanded */
.sheet-rolltemplate-damagecalculation .userscript-collapseSection .userscript-arrow,
.sheet-rolltemplate-message .userscript-collapseSection .userscript-arrow,
.sheet-rolltemplate-baseRoll .userscript-collapseSection .userscript-arrow {
position: absolute; top: 10px; right: 10px;
width: 0px;
height: 0px;
border-bottom: none;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid #fff;
opacity: 50%;
transition: opacity 10s 0.1s ease;
}
/* Create arrow to indicate if the section is collapsed or expanded */
.sheet-rolltemplate-damagecalculation .userscript-collapseSection:hover .userscript-arrow,
.sheet-rolltemplate-message .userscript-collapseSection:hover .userscript-arrow,
.sheet-rolltemplate-baseRoll .userscript-collapseSection:hover .userscript-arrow {
opacity: 0%;
transition: opacity 0.6s 0.1s ease;
}
/* Action buttons below chat messages */
.sheet-rolltemplate-actionbuttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
width: 100%;
}
.sheet-rolltemplate-actionbuttons .sheet-actionButtonContainer {
background-color: #454545;
position: relative;
top: -10px;
left: 2px;
padding: 5px;
margin: -2px;
border-radius: 5px;
width: calc(50% - 8px);
}
.sheet-rolltemplate-actionbuttons .sheet-button {
height: 100%;
background-color: #6f8b60;
border-radius: 10px;
}
.sheet-rolltemplate-actionbuttons .sheet-actionButtonContainer:not(:has(div)) {
display: none;
}
.sheet-rolltemplate-actionbuttons .sheet-button a {
color: #fff;
background-color: rgba(0, 0, 0, 0);
border: 0px;
border-radius: 10px;
width: 76%;
}
.sheet-rolltemplate-actionbuttons .sheet-button a:hover {
background-color: rgba(255, 255, 255, 0.15);
}
.sheet-rolltemplate-actionbuttons img {
width: 20px;
height: 20px;
margin-right: 2px;
}
.sheet-rolltemplate-actionbuttons a:has(img) {
position:absolute;
pointer-events: none;
background-color: rgba(0,0,0,0) !important;
padding: 4px;
z-index: 1;
}
.sheet-rolltemplate-actionbuttons a:has(img) + a {
padding-left: 25px !important;
}
/* Chat avatar fix */
/* For the love of all that is holy do not change these styling rules. I cannot describe to you how long it took to get them right */
.sheet-rolltemplate-actionbuttons:not(:first-child) .sheet-actionButtonBlocker,
.sheet-rolltemplate-actionbuttons:not(:first-child) .sheet-actionButtonBlockerWhisper {
position: absolute;
height: calc(100% + 16px);
margin-top: -60px;
background-color: #d3e5f5;
top: 25px;
left: -50px;
right: -50px;
}
.sheet-rolltemplate-darkmode .sheet-actionButtonBlocker {
background-color: var(--surface-dark2) !important;
}
.sheet-rolltemplate-darkmode .sheet-actionButtonBlockerWhisper {
background-color: var(--surface-dark-gamecard) !important;
}
.sheet-rolltemplate-actionbuttons:not(:first-child):has(:nth-child(3):not(:empty)) {
position: relative;
}
.sheet-rolltemplate-actionbuttons:not(:first-child) {
position: relative;
margin-bottom: -25px;
}
.sheet-rolltemplate-actionbuttons:not(:first-child) .sheet-actionButtonContainer {
top: -35px;
}
/* Alright here's the actual sheet tab switching functionality */
.toggleButtons {
width: 100%;
height: 60px;
min-width: 800px;
max-width: 860px;
display: flex;
align-items: center;
justify-content: center;
}
.sheet-equipment,
.sheet-skills,
.sheet-details,
.sheet-edit,
.sheet-export {
display: none;
}
/* show the selected tab */
.sheet-tabstoggle[value="equipment"] ~ div.sheet-equipment,
.sheet-tabstoggle[value="skills"] ~ div.sheet-skills,
.sheet-tabstoggle[value="details"] ~ div.sheet-details,
.sheet-tabstoggle[value="export"] ~ div.sheet-export,
.sheet-tabstoggle[value="edit"] ~ div.sheet-edit {
display: block;
}
.sheet-tabstoggle[value="equipment"] ~ div #equipmentButton, .sheet-tabstoggle[value="skills"] ~ div #skillsButton, .sheet-tabstoggle[value="details"] ~ div #detailsButton, .sheet-tabstoggle[value="export"] ~ div #exportButton, .sheet-tabstoggle[value="edit"] ~ div #editButton {
color: #fee2b0 !important;
background-color: #333;
}
.toggleButtons button {
height: 100%;
width: 100%;
display: flex;
font-size: 16pt;
font-weight: bold;
border-radius: 5px 5px 0px 0px;
align-items: center;
justify-content: center;
background-color: #111;
color: #888 !important;
}
/* AutoScript Editor */
.autoscriptEditorContainer {
position: fixed;
top: 0px;
left: 2%;
width: 95%;
z-index: 999;
}
#autoScriptEditorToggle + .autoscriptEditorContainer {
display:none !important;
}
#autoScriptEditorToggle:checked + .autoscriptEditorContainer {
display:block !important;
}
.autoScriptEditorTarget {
position: absolute;
top: 2px;
left: 145px;
color: #999;
pointer-events: none
}
.autoscriptEditorContainer label {
color: #B3B3B3;
}
#autoScriptInput {
resize: vertical;
overflow: auto;
min-height:60px;
height: 120px;
max-height: 500px;
}
/* AutoEffect conditional buttons */
.conditionalButtonDisplay .repcontainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.conditionalButtonDisplay .repitem {
width: 49%;
}
.conditionalButton {
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 12px;
border: 1px #555 solid;
background-color: #85a874;
margin-left: 2px;
margin-right: 2px;
width: 100%;
height: 30px;
z-index: 0;
}
.conditionalButtonAct {
position: absolute;
top: 0;
left: 1px;
width: calc(100% + 2px);
height: 100%;
border-radius: 12px;
background-color: #000;
opacity: 0.2;
z-index: 1;
}
.conditionalButtonAct:hover {
opacity: 0;
}
.conditionalButtonName {
position: absolute;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
left: 0;
max-width: calc(95% - 34px);
padding-left: 34px;
font-size: 9pt;
line-height: 1em;
max-height: 2em;
font-weight: bold;
color: #fff;
z-index: 3;
}
.conditionalButtonIcon {
position: absolute;
pointer-events: none;
left: 1px;
width: 30px;
height: 30px;
z-index: 3;
border-radius: 12px 0 0 12px;
border: 1px #555 solid;
}
/* Assorted buttons */
.shareButton, .editButton, .autoScriptButton, .closeAutoScriptButton, .saveAutoScriptButton, .styleAutoScriptButton, .styleAutoScriptDefault, .copyButton, .displayButton, .lockButton {
position: absolute;
height: 25px;
width: 25px;
border-radius: 5px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
:is(.shareButton, .editButton, .autoScriptButton, .copyButton, .displayButton, .lockButton):hover {
background-color: rgba(0, 0, 0, 0.3) !important;
}
:is(.closeAutoScriptButton, .saveAutoScriptButton, .styleAutoScriptButton, .styleAutoScriptDefault):hover {
background-color: #000 !important;
}
.shareButton {
bottom: 5px;
right: 5px;
z-index: 20;
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/share.png');
}
.editButton {
bottom: 5px;
right: 35px;
z-index: 20;
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/edit.png');
}
.autoScriptButton {
bottom: 5px;
right: 65px;
z-index: 20;
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/script.png');
}
.closeAutoScriptButton {
top: 4px;
right: 6px;
z-index: 20;
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/exit.png');
}
.saveAutoScriptButton {
top: 4px;
right: 36px;
z-index: 20;
padding-left: 4px;
padding-right: 4px;
width: auto;
}
.styleAutoScriptButton {
top: 4px;
right: 80px;
z-index: 20;
padding-left: 4px;
padding-right: 4px;
width: auto;
}
.toggleStylingButton:checked ~ .styleAutoScriptButton {
display: none !important;
}
.styleAutoScriptDefault {
top: 4px;
right: 80px;
z-index: 20;
padding-left: 4px;
padding-right: 4px;
width: auto;
}
.toggleStylingButton:not(:checked) ~ .styleAutoScriptDefault {
display: none !important;
}
:is(.augmentBlock, .specialBlock, .skillBlock) .autoScriptButton {
right: 35px;
}
.copyButton {
top: 5px;
right: 5px;
z-index: 1;
background-color: transparent;
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/copy.png');
opacity: 50%;
}
.displayButton {
top: 5px;
right: 35px;
z-index: 1;
background-color: transparent;
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/view-hide.png');
opacity: 50%;
}
.lockButton {
height: 30px;
width: 30px;
top: 3px;
left: 5px;
border-radius: 0px;
background-color: transparent;
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/lock-unlock.png');
opacity: 50%;
}
.syncIcon {
height: 5px;
width: 5px;
top: 7px;
left: 29px;
background-color: #cc4125;
border-radius: 100px;
}
.arrowholder {
height: 30px;
width: auto !important;
position: absolute;
top: 0px;
left: 45px;
right: 0px;
z-index: 1;
}
.arrow {
position: absolute; top: 12px; right: 10px;
width: 0px;
height: 0px;
border-bottom: none;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 14px solid #fff;
opacity: 50%;
}
.switch-toggle:checked ~ .arrow {
position: absolute; top: 10px; right: 13px;
width: 0px;
height: 0px;
border-left: none;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 14px solid #fff;
opacity: 100%;
}
.smallarrow {
width: 0px;
height: 0px;
border-bottom: none;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 12px solid #fff;
opacity: 50%;
}
.switch-toggle:checked ~ .smallarrow {
margin-bottom: 2px;
margin-right: 2px;
width: 0px;
height: 0px;
border-left: none;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 12px solid #fff;
opacity: 100%;
}
.switch-toggle:checked ~ .displayButton {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/view.png');
}
.switch-toggle:checked ~ .lockButton {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/lock.png');
opacity: 100%;
}
.btn {
border-radius: 5px;
background-image: none;
background-color: #222 !important;
border: 1px #111 solid;
height: 20px;
padding: 3px;
border-radius: 3px;
color: #fff !important;
background-color: #222 !important;
border: 1px #111 solid;
font-weight: bold;
min-width: 40px;
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0));
text-align: center;
text-shadow: none;
box-shadow: none !important;
margin-right: 5px;
margin-left: 5px;
}
/* Seem to be used specifically for custom ailments */
.btn-danger {
width: 45px;
height: 25px;
}
/* Colors */
.conditioalButtonColorSelection[value="blue"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-yellow { background-color: #7397d1; }
.conditioalButtonColorSelection[value="yellow"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-blue { background-color: #dbb748; }
.conditioalButtonColorSelection[value="orange"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-blue { background-color: #cf8c44; }
.conditioalButtonColorSelection[value="red"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-red { background-color: #c25944; }
.conditioalButtonColorSelection[value="purple"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-purple { background-color: #8e7cc3; }
.conditioalButtonColorSelection[value="green"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-green { background-color: #85a874; }
.conditioalButtonColorSelection[value="black"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-green { background-color: #000000; }
.WHITE {
background-color: #eee !important;
}
.BLACK {
background-color: #000 !important;
}
.HP{
background-color: #cc4125 !important;
}
.HPtext, .instinct, .counterText {
color: #cc4125 !important;
}
.STGR {
background-color: #dbb748 !important;}
.STGRtext {
color: #dbb748 !important;}
.egoSTGR {
background-color: #f1c232 !important;
}
.egoSTGRtext {
color: #f1c232 !important;
}
.SAN {
background-color: #6d9eeb !important;}
.SANtext {
color: #6d9eeb !important;
}
.LIGHT {
background-color: #fee2b0 !important;}
.LIGHTtext {
color: #fee2b0 !important;}
.weapon {
background-color: #c25944 !important;
}
.outfit {
background-color: #7397d1 !important;
}
/* It's kind of incredible this is only the third mention of the word augment in this file. You'd expect it to come up a lot more */
.augment {
background-color: #85a874 !important;}
.tool {
background-color: #8e7cc3 !important;}
.toolText {
color: #8e7cc3 !important;
}
.special {
background-color: #cf8c44 !important;
}
.ego, .skillE {
background-color: #111 !important;
}
.skillN {
background-color: #555 !important;
}
.darkBG {
background-color: #333 !important;
padding: 5px !important;
}
.egoDiceDEF {
border: 1px #6d9eeb solid;
color: #6d9eeb !important;
height: 30px;
margin-right: 10px !important;
}
.egoDiceEVD {
border: 1px #f1c232 solid;
color: #f1c232 !important;
height: 30px;
}
.egoDiceATK {
border: 1px #cc4125 solid;
color: #cc4125 !important;
height: 30px;
}
.egoDiceATK input, .egoDiceATK .plainText {
color: #cc4125 !important;
}
.egoDiceDEF input, .egoDiceDEF .plainText {
color: #6d9eeb !important;
}
.egoDiceEVD input, .egoDiceEVD .plainText {
color: #f1c232 !important;
}
/* Colors end */
Reference in New Issue View Git Blame Copy Permalink