mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
1738 lines
43 KiB
CSS
1738 lines
43 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap');
|
|
|
|
/* reset all
|
|
.ui-dialog .charsheet select,
|
|
.ui-dialog .charsheet textarea,
|
|
.ui-dialog .charsheet input,
|
|
.ui-dialog .charsheet .uneditable-input,
|
|
.ui-dialog .charsheet label,
|
|
.ui-dialog .charsheet button{
|
|
all: initial;
|
|
}
|
|
*/
|
|
.charsheet * {
|
|
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.charsheet,
|
|
.sheet-rolltemplate-tor,
|
|
.sheet-rolltemplate-msg {
|
|
/* Define CSS variables */
|
|
--red: rgb(176, 33, 30);
|
|
--grey: rgb(65, 64, 64);
|
|
--lightgrey: rgba(65, 64, 64, 0.5);
|
|
--yellow: rgb(249, 246, 233);
|
|
--accent-color: rgb(176, 33, 30);
|
|
--diamond-color-radio: #AC4637;
|
|
--primarytext: black;
|
|
--dark-secondarytext: black;
|
|
--rollbutton-color: rgb(40, 40, 40);
|
|
--rollbutton-font-weight: bold;
|
|
--eyeofsauron: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/The%20One%20Ring%202e/images/eye2.png');
|
|
--gandalf: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/The%20One%20Ring%202e/images/gandalf2.png');
|
|
--borderred: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/The%20One%20Ring%202e/assets/boxline-border-red1.png');
|
|
--borderbrown: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/The%20One%20Ring%202e/assets/boxline-border-brown1.png');
|
|
--backgroundimage: url('https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/The%20One%20Ring%202e/assets/background.jpg');
|
|
--solidborder: 1px solid var(--lightgrey);
|
|
--doubleborder: 4px double var(--grey);
|
|
--diamondborder-radio: 2px solid var(--diamond-color-radio);
|
|
--diamondborder: 4px solid transparent;
|
|
--diamondborder-red: 4px solid transparent;
|
|
--diamondborder-image: var(--borderbrown);
|
|
--diamondborder-image-red: var(--borderred);
|
|
--diamond-size: 35px;
|
|
--diamond-small-size: 20px;
|
|
--sheetborder: 10px solid transparent;
|
|
--sheetborder-image-source: var(--borderred);
|
|
--innerborder: 6px solid transparent;
|
|
--innerborder-image-source: var(--borderbrown);
|
|
--background: var(--backgroundimage) repeat;
|
|
--background-color: var(--yellow);
|
|
--background-color-transparent: rgba(255, 255, 255, .5);
|
|
--background-color-hover: rgba(255, 255, 255, 1);
|
|
--h-fontfamily: 'Uncial Antiqua', "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
|
|
--label-fontweight: bold;
|
|
--margin-bottom: 4px;
|
|
--box-shadow: 0 3px 15px rgba(0, 0, 0, .2)
|
|
padding: 0px;
|
|
}
|
|
|
|
/*Configure the tab buttons*/
|
|
.charsheet :is(.sheet-pc, .sheet-adversary) {
|
|
display: none;
|
|
position: relative;
|
|
z-index: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
background: var(--background);
|
|
background-color: var(--background-color);
|
|
border: var(--sheetborder);
|
|
border-image-source: var(--sheetborder-image-source);
|
|
border-image-slice: 24 24 24 24;
|
|
border-image-repeat: repeat;
|
|
color: var(--primarytext);
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.charsheet .sheet-pc {
|
|
min-width: 1200px;
|
|
min-height: 600px;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.charsheet .sheet-tabstoggle[value="isPC"]~div.sheet-pc,
|
|
.charsheet .sheet-tabstoggle[value="isAdversary"]~div.sheet-adversary {
|
|
display: block;
|
|
}
|
|
|
|
/* Generic element styles */
|
|
.charsheet :is(h1, h2, h3),
|
|
.charsheet #gearoritems_toggle {
|
|
font-family: var(--h-fontfamily);
|
|
font-weight: normal;
|
|
font-size: medium;
|
|
line-height: 25px;
|
|
color: var(--red);
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet :is(h2, h3),
|
|
.charsheet #gearoritems_toggle {
|
|
color: var(--grey);
|
|
font-weight: lighter;
|
|
}
|
|
|
|
.charsheet h2,
|
|
.charsheet #gearoritems_toggle {
|
|
font-size: small;
|
|
}
|
|
|
|
.charsheet select option {
|
|
color: var(--primarytext);
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
.charsheet h3 {
|
|
font-size: smaller;
|
|
}
|
|
|
|
.charsheet span {
|
|
font-size: small;
|
|
color: var(--primarytext);
|
|
text-align: left;
|
|
padding: 0px 0px 0px 0px;
|
|
}
|
|
|
|
.charsheet label {
|
|
display: inline;
|
|
font-size: small;
|
|
color: var(--primarytext);
|
|
font-weight: var(--label-fontweight);
|
|
text-align: left;
|
|
padding: 0px 0px 0px 0px;
|
|
margin: 0;
|
|
}
|
|
|
|
.charsheet input,
|
|
.charsheet textarea {
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
-moz-box-sizing: border-box;
|
|
color: var(--primarytext);
|
|
box-shadow: none;
|
|
box-sizing: border-box;
|
|
background: var(--background-color-transparent);
|
|
border: none;
|
|
}
|
|
|
|
.charsheet textarea {
|
|
color: var(--primarytext);
|
|
border: var(--solidborder);
|
|
text-align: left;
|
|
}
|
|
|
|
.charsheet input:hover,
|
|
.charsheet textarea:hover,
|
|
.charsheet input:focus,
|
|
.charsheet textarea:focus {
|
|
background: var(--background-color-hover);
|
|
}
|
|
|
|
.charsheet input[type="text"],
|
|
.charsheet input[type="number"],
|
|
.charsheet input.sheet-number,
|
|
.charsheet select {
|
|
background: none !important;
|
|
border-radius: 0;
|
|
border-bottom: var(--solidborder);
|
|
text-align: left;
|
|
margin-bottom: 2px;
|
|
color: var(--primarytext);
|
|
}
|
|
|
|
.charsheet input[type="text"] {
|
|
width: 150px;
|
|
}
|
|
|
|
.charsheet input.sheet-number {
|
|
width: 3.5em !important;
|
|
}
|
|
|
|
.charsheet input[type="number"] {
|
|
-webkit-appearance: textfield;
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
}
|
|
|
|
.charsheet input[type="number"]::-webkit-inner-spin-button,
|
|
.charsheet input[type="number"]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/* Combobox */
|
|
.charsheet select {
|
|
width: min-content;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
line-height: 18px;
|
|
height: 20px;
|
|
padding: 0px 4px 0px 4px;
|
|
}
|
|
|
|
/* Checkboxes*/
|
|
.charsheet input[type="checkbox"] {
|
|
padding: 0px !important;
|
|
margin: 0px !important;
|
|
width: 12px !important;
|
|
}
|
|
|
|
.charsheet :is(#skill-strength, #skill-heart, #skill-wits, #virtues, #rewards, #protection, #combat) input[type="checkbox"]:checked+label,
|
|
.charsheet :is(#skill-strength, #skill-heart, #skill-wits, #virtues, #rewards) input[type="checkbox"]:checked+span {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.charsheet input[type='checkbox'],
|
|
.charsheet input[type='radio'] {
|
|
accent-color: var(--accent-color);
|
|
}
|
|
|
|
/* Dots*/
|
|
.charsheet .sheet-dots {
|
|
display: block;
|
|
float: right;
|
|
top: 2px;
|
|
right: 0;
|
|
-margin: 1px 15px 0px 0px;
|
|
}
|
|
|
|
.charsheet .sheet-dots input[type="radio"] {
|
|
opacity: 0;
|
|
width: 10px;
|
|
height: 10px;
|
|
position: relative;
|
|
top: -4px;
|
|
left: -4px;
|
|
margin: -8px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.charsheet .sheet-dots input[type="radio"]+span {
|
|
margin: 5px 5px 0px -5px;
|
|
line-height: 5px;
|
|
font-size: 7px;
|
|
transform: rotate(45deg);
|
|
-webkit-transform: rotate(45deg);
|
|
}
|
|
|
|
.charsheet .sheet-dots input[type="radio"]+span:before {
|
|
margin-right: 5px;
|
|
display: inline-flex;
|
|
text-align: center;
|
|
--moz-animation-direction: top;
|
|
line-height: 10px;
|
|
width: 8px;
|
|
height: 8px;
|
|
content: "";
|
|
opacity: 1;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.charsheet .sheet-dots input[type="radio"][value="0"]+span:before {
|
|
content: 'X';
|
|
transform: unset;
|
|
color: var(--accent-color);
|
|
opacity: 0.3;
|
|
border: var(--solidborder);
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
font-family: Papyrus, "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
|
|
}
|
|
|
|
.charsheet .sheet-dots input[type="radio"]:not([value="0"])+span:before {
|
|
background-size: 100%;
|
|
border: var(--diamondborder-radio);
|
|
background-color: var(--diamond-color-radio);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.charsheet .sheet-dots input[type='radio']:checked~input[type='radio']+span:before {
|
|
background-size: 100%;
|
|
background-color: transparent;
|
|
border: var(--diamondborder-radio);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* Remove dot from all radios _after_ selected one */
|
|
.charsheet .sheet-dots input[type="radio"]:checked~input[type="radio"]+span:before {
|
|
content: "";
|
|
}
|
|
|
|
.charsheet .sheet-hover-info {
|
|
display: block;
|
|
position: absolute;
|
|
background: var(--background-color-hover);
|
|
z-index: 10;
|
|
padding: 20px;
|
|
width: 400px;
|
|
height: fit-content;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
box-shadow: var(--box-shadow);
|
|
transition: visibility 0s linear 0.3s, opacity 0.3s linear;
|
|
text-align: left;
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
white-space: normal;
|
|
text-overflow: ellipsis;
|
|
overflow: visible;
|
|
}
|
|
|
|
.charsheet span.label:hover+.sheet-hover-info,
|
|
.charsheet span.sheet-label:hover+.sheet-hover-info,
|
|
.charsheet input:hover+span.sheet-label+.sheet-hover-info,
|
|
.charsheet label:hover+.sheet-hover-info {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition-delay: 1s;
|
|
}
|
|
|
|
/* Diamond */
|
|
.charsheet :is(span.diamond-red, span.diamond) {
|
|
display: inline-flex;
|
|
box-sizing: content-box;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
background-color: var(--background-color);
|
|
border: var(--diamondborder);
|
|
border-image-source: var(--diamondborder-image);
|
|
border-image-slice: 24 24 24 24;
|
|
border-image-repeat: repeat;
|
|
width: var(--diamond-size);
|
|
height: var(--diamond-size);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.charsheet span.diamond-red {
|
|
border: var(--diamondborder-red);
|
|
border-image-source: var(--diamondborder-image-red);
|
|
border-image-slice: 24 24 24 24;
|
|
border-image-repeat: repeat;
|
|
}
|
|
|
|
.charsheet span[class|="diamond"] input[type="number"] {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.charsheet :is(span.diamond-red, span.diamond) span {
|
|
transform: rotate(-45deg);
|
|
border: 0;
|
|
}
|
|
|
|
.charsheet :is(span.diamond-small-red, span.diamond-small) {
|
|
display: inline-flex;
|
|
box-sizing: content-box;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: var(--diamondborder);
|
|
border-image-source: var(--diamondborder-image);
|
|
border-image-slice: 24 24 24 24;
|
|
border-image-repeat: repeat;
|
|
width: var(--diamond-small-size);
|
|
height: var(--diamond-small-size);
|
|
transform: rotate(45deg);
|
|
margin-bottom: 4px
|
|
}
|
|
|
|
.charsheet span.diamond-small-red {
|
|
border-image-source: var(--diamondborder-image-red);
|
|
}
|
|
|
|
.charsheet :is(span.diamond-small-red, span.diamond-small) span {
|
|
transform: rotate(-45deg);
|
|
border: 0;
|
|
}
|
|
|
|
.charsheet .hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Borders */
|
|
.charsheet #content :is(#strength, #wits, #skill-strength, #skill-heart, #skill-wits, #conditions, #mount) {
|
|
border: var(--innerborder);
|
|
border-image-source: var(--innerborder-image-source);
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.charsheet #content #strength,
|
|
body.sheet-darkmode .charsheet #content #strength {
|
|
border-image-slice: 24 24 24 24;
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
border-right: 0;
|
|
}
|
|
|
|
.charsheet #content #skill-strength,
|
|
body.sheet-darkmode .charsheet #content #skill-strength {
|
|
border-image-slice: 24 24 24 24;
|
|
border-top: 0;
|
|
border-right: 0;
|
|
padding-bottom: 10px;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.charsheet #content #skill-heart,
|
|
body.sheet-darkmode .charsheet #content #skill-heart {
|
|
border-image-slice: 24 24 24 24;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
padding-bottom: 10px;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.charsheet #content #skill-wits,
|
|
body.sheet-darkmode .charsheet #content #skill-wits {
|
|
border-image-slice: 24 24 24 24;
|
|
border-left: 0;
|
|
border-top: 0;
|
|
padding-bottom: 10px;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.charsheet #content #wits,
|
|
body.sheet-darkmode .charsheet #content #wits {
|
|
border-image-slice: 24 24 24 24;
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
border-left: 0;
|
|
}
|
|
|
|
.charsheet #content :is(#mount, #conditions),
|
|
body.sheet-darkmode .charsheet #content :is(#mount, #conditions) {
|
|
border-image-slice: 24 24 24 24;
|
|
border-top: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
}
|
|
|
|
/* CSS for pc sheet*/
|
|
.charsheet .left {
|
|
justify-self: left !important;
|
|
text-align: left !important;
|
|
}
|
|
|
|
.charsheet .right {
|
|
justify-self: right !important;
|
|
text-align: right !important;
|
|
}
|
|
|
|
.charsheet .center {
|
|
justify-self: center !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
.charsheet .strong {
|
|
font-size: large;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* needed for hover infos */
|
|
.charsheet .sheet-strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.charsheet .bordertop {
|
|
margin: 0px 20px 0px 20px;
|
|
border-top: var(--solidborder);
|
|
}
|
|
|
|
.charsheet .borderbottom {
|
|
padding: 0px 20px 0px 20px !important;
|
|
border-bottom: var(--solidborder);
|
|
}
|
|
|
|
.charsheet .sheet-row {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/* Spanning element styles for PC Sheet */
|
|
.charsheet :is(#experience-nested, #protection-nested) input {
|
|
width: 1.5em;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin: 0px 0px 0px 0px;
|
|
}
|
|
|
|
.charsheet :is(#experience-nested, #protection-nested) span {
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet :is(#experience-nested, #protection-nested, #skill-strength, #skill-heart, #skill-wits, #combat) label {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Specific area styles for PC sheet */
|
|
.charsheet #content {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: repeat(10, 1fr);
|
|
grid-auto-rows: minmax(10px, auto);
|
|
grid-template-areas:
|
|
'char char char char rewa rewa virt virt gear gear'
|
|
'cond cond stre stre hear hear wits wits expe expe'
|
|
'cond cond skst skst skhe skhe skwi skwi moun moun'
|
|
'comb comb warg warg warg warg warg armo armo prot';
|
|
/* Testing without prot prot */
|
|
grid-gap: 0px;
|
|
}
|
|
|
|
.charsheet #content>* {
|
|
width: 100%;
|
|
padding: 5px;
|
|
margin: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet #character {
|
|
grid-area: char;
|
|
}
|
|
|
|
.charsheet #character-nested .onecol {
|
|
display: grid;
|
|
grid-auto-rows: minmax(auto, 1.5em);
|
|
grid-template-columns: 100px auto;
|
|
}
|
|
|
|
.charsheet #character-nested .twocols {
|
|
display: grid;
|
|
grid-auto-rows: minmax(auto, 1.5em);
|
|
grid-template-columns: 100px 130px 100px auto;
|
|
}
|
|
|
|
.charsheet #character-nested .threecols {
|
|
display: grid;
|
|
grid-auto-rows: minmax(auto, 1.5em);
|
|
grid-template-columns: 100px 130px 100px auto min-content 40px;
|
|
}
|
|
|
|
.charsheet #character-nested input {
|
|
font-size: small;
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.charsheet #rewards {
|
|
grid-area: rewa;
|
|
}
|
|
|
|
.charsheet #virtues {
|
|
grid-area: virt;
|
|
}
|
|
|
|
.charsheet :is(#gear, #rewards, #virtues) textarea {
|
|
margin: 5px -10px 0px 0px;
|
|
max-height: 128px;
|
|
min-height: 128px;
|
|
height: 128px;
|
|
max-width: 300px;
|
|
min-width: 200px;
|
|
width: 94%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
resize: none;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: darkgrey lightgrey;
|
|
cursor: auto;
|
|
}
|
|
|
|
.charsheet :is(#gear, #rewards, #virtues) textarea::-webkit-scrollbar {
|
|
width: 6px;
|
|
margin-left: 4px;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.charsheet :is(#gear, #rewards, #virtues) textarea::-webkit-scrollbar-track {
|
|
border-radius: 3px;
|
|
background: darkgrey;
|
|
}
|
|
|
|
.charsheet :is(#gear, #rewards, #virtues) textarea::-webkit-scrollbar-thumb {
|
|
border-radius: 3px;
|
|
background: gray;
|
|
}
|
|
|
|
.charsheet :is(#gear, #rewards, #virtues) textarea::-webkit-scrollbar-thumb:hover {
|
|
background: black;
|
|
}
|
|
|
|
/* Virtues and Rewards */
|
|
.charsheet :is(#virtues, #rewards) h2 {
|
|
text-align: left;
|
|
text-indent: 15px;
|
|
margin-bottom: var(--margin-bottom);
|
|
}
|
|
|
|
.charsheet :is(#virtues, #rewards) div {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: end;
|
|
}
|
|
|
|
.charsheet :is(#virtues, #rewards) div {
|
|
margin-top: -25px;
|
|
}
|
|
|
|
.charsheet #virtues div {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.charsheet :is(#virtues, #rewards) label {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.charsheet :is(#virtues, #rewards) .diamond-small-red input {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.charsheet #gear {
|
|
grid-area: gear;
|
|
display: block;
|
|
}
|
|
|
|
.charsheet #gearoritems_toggle[name="attr_gearoritems"] {
|
|
border: none;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.charsheet #gear-nested,
|
|
.charsheet #items-nested {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet .gearoritems_toggle[value="1"]~#gear-nested {
|
|
display: block;
|
|
}
|
|
|
|
.charsheet .gearoritems_toggle[value="2"]~#items-nested {
|
|
display: block;
|
|
}
|
|
|
|
.charsheet #items-row {
|
|
display: grid;
|
|
grid-template-columns: auto min-content min-content min-content;
|
|
grid-template-rows: min-content;
|
|
column-gap: 2px;
|
|
justify-items: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.charsheet #items-row input[type="text"] {
|
|
padding: 0px 0px 0px 5px;
|
|
width: 100%;
|
|
}
|
|
|
|
.charsheet #items-row select {
|
|
appearance: none;
|
|
}
|
|
|
|
.charsheet #items-row label {
|
|
padding: 0px 5px 0px 5px;
|
|
}
|
|
|
|
.charsheet .repcontrol[data-groupname=repeating_items] button.repcontrol_edit,
|
|
.charsheet .repcontrol[data-groupname=repeating_items] button.repcontrol_add {
|
|
visibility: hidden;
|
|
margin-left: -5px;
|
|
padding: 0px 5px 0px 5px;
|
|
width: 5px;
|
|
}
|
|
|
|
.charsheet .repcontrol[data-groupname=repeating_items] button.repcontrol_add::before,
|
|
.charsheet .repcontrol[data-groupname=repeating_items] button.repcontrol_edit::before {
|
|
visibility: visible;
|
|
color: grey;
|
|
font-family: "Pictos";
|
|
}
|
|
|
|
.charsheet .repcontrol[data-groupname=repeating_items] button.repcontrol_add::before {
|
|
content: "&";
|
|
}
|
|
|
|
.charsheet .repcontrol[data-groupname=repeating_items] button.repcontrol_edit::before {
|
|
content: "(";
|
|
}
|
|
|
|
.charsheet .repcontrol[data-groupname=repeating_items] button.repcontrol_add,
|
|
.charsheet .repcontrol[data-groupname=repeating_items] button.repcontrol_edit,
|
|
.charsheet .repcontrol[data-groupname=repeating_items] button.repcontrol_move {
|
|
float: right;
|
|
}
|
|
|
|
.charsheet #experience {
|
|
grid-area: expe;
|
|
}
|
|
|
|
.charsheet #experience-nested {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: min-content;
|
|
justify-items: center;
|
|
}
|
|
|
|
.charsheet #experience-nested button {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Attribute grids */
|
|
.charsheet :is(#strength, #heart, #wits) h1 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.charsheet #strength {
|
|
grid-area: stre;
|
|
border-left: var(--solidborder);
|
|
}
|
|
|
|
.charsheet #heart {
|
|
grid-area: hear;
|
|
}
|
|
|
|
.charsheet #wits {
|
|
grid-area: wits;
|
|
border-right: var(--solidborder);
|
|
}
|
|
|
|
.charsheet :is(#strength, #heart, #wits) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.charsheet :is(#strength, #heart, #wits) input {
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet :is(.attribute-row1, .attribute-row3) {
|
|
display: grid;
|
|
grid-template-columns: 45px 32px 73px 30px 45px;
|
|
}
|
|
|
|
.charsheet .attribute-row2 {
|
|
display: grid;
|
|
grid-template-columns: 58px 44px 18px 40px 60px;
|
|
align-items: center;
|
|
}
|
|
|
|
.charsheet div.attribute label.left {
|
|
white-space: break-spaces;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.charsheet div.attribute label.right {
|
|
white-space: break-spaces;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.charsheet div.attribute .attribute-row1 .left {
|
|
position: relative;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
.charsheet div.attribute .attribute-row1 .right {
|
|
position: relative;
|
|
bottom: 10px;
|
|
left: 5px;
|
|
}
|
|
|
|
.charsheet div.attribute .attribute-row3 .left {
|
|
position: relative;
|
|
top: 20px;
|
|
right: 5px;
|
|
}
|
|
|
|
.charsheet div.attribute .attribute-row3 .right {
|
|
position: relative;
|
|
top: 20px;
|
|
left: 5px;
|
|
}
|
|
|
|
.charsheet div.attribute .attribute-row3 div.center {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
position: relative;
|
|
bottom: 10px;
|
|
margin-left: -6px;
|
|
}
|
|
|
|
.charsheet #wits-row3 div.center span.center,
|
|
.charsheet #strength-row3 div.center label.center {
|
|
flex: 0 0 80px
|
|
}
|
|
|
|
.charsheet div.attribute input {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Skills */
|
|
.charsheet #skill-strength {
|
|
grid-area: skst;
|
|
border-left: var(--solidborder);
|
|
border-bottom: var(--solidborder);
|
|
}
|
|
|
|
.charsheet #skill-heart {
|
|
grid-area: skhe;
|
|
border-bottom: var(--solidborder);
|
|
}
|
|
|
|
.charsheet #skill-wits {
|
|
grid-area: skwi;
|
|
border-right: var(--solidborder);
|
|
border-bottom: var(--solidborder);
|
|
}
|
|
|
|
.charsheet :is(#skill-strength, #skill-heart, #skill-wits) {
|
|
text-align: left;
|
|
padding-top: 0px;
|
|
margin-right: 10px;
|
|
height: fit-content;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.charsheet #conditions {
|
|
grid-area: cond;
|
|
padding: 0px 0px 0px 0px;
|
|
border-bottom: var(--solidborder);
|
|
}
|
|
|
|
.charsheet #conditions-nested {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: repeat(3, 22px);
|
|
padding: 0px 10px 0px 20px;
|
|
}
|
|
|
|
.charsheet #conditions button {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.charsheet #attribute-heart .sheet-hopetoggle[value="0"]~#hope_readonly {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet #attribute-heart .sheet-hopetoggle[value="1"]~#hope {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet #custom-diceroller {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.charsheet #custom-diceroller .onecols,
|
|
.charsheet #custom-diceroller .twocols,
|
|
.charsheet #custom-diceroller .threcols {
|
|
display: grid;
|
|
grid-auto-rows: min-content;
|
|
grid-template-columns: auto;
|
|
vertical-align: middle;
|
|
column-gap: 10px;
|
|
padding: 0px 5px 0px 5px;
|
|
}
|
|
|
|
.charsheet #custom-diceroller .twocols {
|
|
grid-template-columns: 50px auto;
|
|
}
|
|
|
|
.charsheet #custom-diceroller .threecols {
|
|
grid-template-columns: 50px 50px auto;
|
|
}
|
|
|
|
.charsheet #custom-diceroller input[type="text"],
|
|
.charsheet #custom-diceroller select {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 0px 0px 0px 0px;
|
|
margin: 0px 0px 0px 0px;
|
|
}
|
|
|
|
.charsheet #custom-diceroller label {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.charsheet #combat {
|
|
grid-area: comb;
|
|
text-align: left;
|
|
padding: 0px 0px 0px 0px;
|
|
margin: 0px 0px 0px 5px;
|
|
min-width: 0;
|
|
width: 95%
|
|
}
|
|
|
|
.charsheet #war-gear {
|
|
grid-area: warg;
|
|
}
|
|
|
|
.charsheet #war-gear-nested {
|
|
display: grid;
|
|
grid-template-columns: min-content 4fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 4fr;
|
|
grid-template-rows: repeat(7, 22px);
|
|
padding: 10px 0px 0px 10px;
|
|
text-align: left;
|
|
border-right: var(--solidborder)
|
|
}
|
|
|
|
.charsheet #war-gear-nested input[type="checkbox"],
|
|
.charsheet #armour-nested input[type="checkbox"] {
|
|
text-align: center;
|
|
vertical-align: sub;
|
|
}
|
|
|
|
.charsheet #war-gear-nested select,
|
|
.charsheet #armour-nested select {
|
|
appearance: none;
|
|
justify-self: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet #armour {
|
|
grid-area: armo;
|
|
z-index: 1;
|
|
}
|
|
|
|
.charsheet #armour-nested {
|
|
display: grid;
|
|
grid-template-columns: min-content 125px min-content min-content min-content min-content;
|
|
grid-template-rows: repeat(6, 22px);
|
|
column-gap: 2px;
|
|
justify-items: left;
|
|
padding: 0px 0px 0px 5px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.charsheet #protection {
|
|
grid-area: prot;
|
|
padding: 0px 0px 0px 0px;
|
|
z-index: 0;
|
|
}
|
|
|
|
.charsheet #protection-nested {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 20px 60px 20px 40px 20px;
|
|
padding: 0px 0px 0px 40px;
|
|
justify-items: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet #protection-nested-alt input {
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet #mount {
|
|
grid-area: moun;
|
|
border-bottom: var(--solidborder);
|
|
}
|
|
|
|
.charsheet #content #mount {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.charsheet #mount-nested {
|
|
display: grid;
|
|
grid-template-columns: 130px min-content min-content;
|
|
grid-template-rows: repeat(2, 22px);
|
|
column-gap: 5px;
|
|
justify-items: left;
|
|
padding: 0px 0px 0px 10px;
|
|
border-left: unset;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.charsheet :is(#war-gear-nested, #armour-nested, #mount-nested) h2 {
|
|
margin-top: -8px;
|
|
text-align: left;
|
|
text-indent: 5px;
|
|
}
|
|
|
|
.charsheet :is(#war-gear-nested, #armour-nested, #mount-nested) input[type="text"] {
|
|
width: 95%;
|
|
}
|
|
|
|
.charsheet :is(#war-gear-nested, #armour-nested, #mount-nested, #combat) input[type="number"] {
|
|
width: 2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet #notes {
|
|
background-color: var(--yellow);
|
|
grid-column: 1 / span 12;
|
|
grid-row: 4 / span 2;
|
|
width: 100%;
|
|
z-index: 100;
|
|
display: none;
|
|
}
|
|
|
|
.charsheet .sheet-notestoggle[value="1"]~#notes {
|
|
display: block;
|
|
}
|
|
|
|
.charsheet #darkmode-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet #releaselog {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet .sheet-releaselogtoggle[value="1"]~#releaselog {
|
|
display: block;
|
|
background: var(--backgournd-color);
|
|
background-color: var(--backgournd-color);
|
|
color: var(--primarytext);
|
|
}
|
|
|
|
.charsheet #notes-nested {
|
|
display: grid;
|
|
grid-template-columns: minmax(245px, 1fr) 10fr;
|
|
grid-auto-rows: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 100;
|
|
}
|
|
|
|
.charsheet #notes .notes-text {
|
|
grid-column: 2 / span 1;
|
|
grid-row: 1 / span 4;
|
|
display: none;
|
|
}
|
|
|
|
.charsheet #notes textarea {
|
|
height: 100%;
|
|
}
|
|
|
|
.charsheet .sheet-notestoggle[value="1"]~#notes {
|
|
display: block;
|
|
}
|
|
|
|
.charsheet .sheet-notestabtoggle[value="notes1"]~#notes-text1 {
|
|
display: block;
|
|
}
|
|
|
|
.charsheet .sheet-notestabtoggle[value="notes2"]~#notes-text2 {
|
|
display: block;
|
|
}
|
|
|
|
.charsheet .sheet-notestabtoggle[value="notes3"]~#notes-text3 {
|
|
display: block;
|
|
}
|
|
|
|
.charsheet .sheet-notestabtoggle[value="notes4"]~#notes-text4 {
|
|
display: block;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn-labeled {
|
|
color: var(--primarytext);
|
|
text-shadow: none;
|
|
background-color: var(--background-color);
|
|
background-image: none;
|
|
border-color: var(--darkgrey);
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
/* Parsed rolls */
|
|
.ui-dialog .charsheet :is(button[type="roll"],
|
|
button[type="roll"][class~="table-rolls"],
|
|
button[type="action"][class~="parsed-rolls"]) {
|
|
color: var(--rollbutton-color);
|
|
font-weight: var(--rollbutton-font-weight);
|
|
font-size: 1.3em;
|
|
background: transparent;
|
|
border: none;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
opacity: 0.8;
|
|
padding: 0px;
|
|
margin: 0px 0px;
|
|
outline: none;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.ui-dialog .charsheet :is(button[type="roll"][class~="table-rolls"],
|
|
button[type="roll"][class~="parsed-rolls"],
|
|
button[type="action"][class~="parsed-rolls"]):hover {
|
|
opacity: .5;
|
|
}
|
|
|
|
.ui-dialog .charsheet button[class~="crosshair"]::before {
|
|
/* change D12 to target-appropriate crosshairs */
|
|
font-family: "Pictos Custom" !important;
|
|
content: "[" !important;
|
|
font-size: 1.1em;
|
|
color: var(--rollbutton-color);
|
|
font-weight: normal;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.ui-dialog .charsheet button[class~="chat"]::before {
|
|
/* change D12 to target-appropriate crosshairs */
|
|
font-family: "Pictos" !important;
|
|
content: "q" !important;
|
|
font-size: 1.1em;
|
|
color: var(--rollbutton-color);
|
|
font-weight: normal;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.ui-dialog .charsheet :is(button[type="roll"][class~="table-rolls"],
|
|
button[type="roll"][class~="parsed-rolls"],
|
|
button[type="action"][class~="parsed-rolls"])::before {
|
|
/* change D20 to system-appropriate D12 */
|
|
font-family: "dicefontd12";
|
|
content: "0";
|
|
}
|
|
|
|
.charsheet input.config-parsed-rolls~div .parsed-rolls,
|
|
.charsheet input.config-parsed-rolls:checked~div .table-rolls {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet input.config-parsed-rolls~div .table-rolls,
|
|
.charsheet input.config-parsed-rolls:checked~div .parsed-rolls {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Adversary */
|
|
.charsheet .sheet-adversary {
|
|
min-width: 850px;
|
|
min-height: 500px;
|
|
padding: 0px 20px 0px 20px;
|
|
}
|
|
|
|
.charsheet .adversary-header,
|
|
.charsheet .adversary-attributes,
|
|
.charsheet .adversary-combat-proficiencies,
|
|
.charsheet .adversary-fell-abilities {
|
|
margin: 0px 0px 00px 0px;
|
|
padding: 10px 10px 0px 10px
|
|
}
|
|
|
|
.charsheet .adversary-header {
|
|
display: grid;
|
|
grid-template-columns: 4fr 1fr;
|
|
grid-template-rows: repeat(4, min-content);
|
|
justify-items: center;
|
|
margin: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
.charsheet .adversary-level {
|
|
grid-column: 2;
|
|
grid-row: 2 / span 4;
|
|
justify-self: center;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.charsheet .adversary-header>input {
|
|
text-align: left;
|
|
justify-self: left;
|
|
width: 75%
|
|
}
|
|
|
|
.charsheet .adversary-attributes {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
grid-template-rows: 1.5fr 2fr 1fr;
|
|
text-align: center;
|
|
justify-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.charsheet .adversary-attributes select {
|
|
font-family: 'Uncial Antiqua', "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
|
|
font-size: medium;
|
|
font-weight: normal;
|
|
color: var(--red);
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
height: min-content;
|
|
width: min-content;
|
|
border: unset;
|
|
}
|
|
|
|
|
|
.charsheet .adversary-attributes input {
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .charsheet .adversary-attributes button:is([type="roll"], [type="action"]) {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.charsheet .adversary-combat-proficiencies {
|
|
display: grid;
|
|
grid-template-columns: 220px 60px 60px 60px auto;
|
|
grid-template-rows: repeat(3, 1fr);
|
|
grid-gap: 0px;
|
|
}
|
|
|
|
.charsheet .adversary-combat-proficiencies input[type="text"],
|
|
.charsheet .adversary-fell-abilities input[type="text"] {
|
|
text-align: left;
|
|
width: auto;
|
|
}
|
|
|
|
.charsheet .adversary-combat-proficiencies input[type="number"],
|
|
.charsheet .adversary-fell-abilities input[type="number"] {
|
|
text-align: center;
|
|
justify-self: center;
|
|
width: 2.5em
|
|
}
|
|
|
|
.charsheet .adversary-fell-abilities {
|
|
display: grid;
|
|
grid-template-columns: 35px 190px auto;
|
|
grid-template-rows: repeat(4, auto);
|
|
justify-items: left;
|
|
grid-gap: 0px;
|
|
}
|
|
|
|
.charsheet .adversary-fell-abilities :is(label, textarea[name^="attr_fell_ability_desc"]) {
|
|
width: 100%;
|
|
height: auto;
|
|
word-wrap: break-word;
|
|
resize: vertical;
|
|
overflow: auto;
|
|
}
|
|
|
|
.charsheet .adversary-notes textarea {
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
resize: vertical;
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Roll Template */
|
|
.sheet-rolltemplate-tor,
|
|
.sheet-rolltemplate-msg {
|
|
margin-left: -7px;
|
|
padding-top: 10px;
|
|
background: transparent;
|
|
color: black !important;
|
|
}
|
|
|
|
/* Base classes */
|
|
.sheet-rolltemplate-tor div,
|
|
.sheet-rolltemplate-msg div,
|
|
.sheet-rolltemplate-tor span,
|
|
.sheet-rolltemplate-msg span {
|
|
font-family: Papyrus, 'Book Antiqua', Palatino, serif, sans-serif;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-text-center,
|
|
.sheet-rolltemplate-msg .sheet-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-center,
|
|
.sheet-rolltemplate-msg .sheet-center {
|
|
display: inline-flex;
|
|
box-sizing: border-box;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-full-col {
|
|
display: inline-flex;
|
|
box-sizing: content-box;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
width: 99%;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-half-col {
|
|
display: inline-flex;
|
|
box-sizing: content-box;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
width: 49%;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-red,
|
|
.sheet-rolltemplate-tor .sheet-red span {
|
|
color: black;
|
|
}
|
|
|
|
/* Containers and Flex items */
|
|
.sheet-rolltemplate-tor .sheet-container,
|
|
.sheet-rolltemplate-msg .sheet-container {
|
|
background: var(--background);
|
|
background-color: var(--yellow);
|
|
border: 5px solid transparent;
|
|
border-image-source: var(--borderred);
|
|
border-image-slice: 20 20 20 20;
|
|
border-image-repeat: repeat;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Header formatting - title and subtitle */
|
|
.sheet-rolltemplate-tor .sheet-header,
|
|
.sheet-rolltemplate-msg .sheet-header {
|
|
/* change text-align to center to center the header text */
|
|
text-align: left;
|
|
color: black;
|
|
}
|
|
|
|
.sheet-rolltemplate-msg .sheet-header-sep {
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-title,
|
|
.sheet-rolltemplate-msg .sheet-title,
|
|
.sheet-rolltemplate-msg .sheet-title-alt {
|
|
font-family: 'Uncial Antiqua', "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
|
|
font-weight: lighter;
|
|
line-height: 1;
|
|
color: rgb(176, 33, 30);
|
|
font-size: medium;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.sheet-rolltemplate-msg .sheet-header .sheet-title-alt span {
|
|
border: 0px !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-subtitle,
|
|
.sheet-rolltemplate-msg .sheet-subtitle {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.sheet-rolltemplate-msg .sheet-header .sheet-subtitle-alt span {
|
|
border: 0px !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Rolltemplate middle content section */
|
|
.sheet-rolltemplate-tor .sheet-content {
|
|
border-top: 1px solid #000;
|
|
height: 205px;
|
|
}
|
|
|
|
/* Target Number */
|
|
.sheet-rolltemplate-tor .sheet-die-title.sheet-target-number {
|
|
margin-top: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-target-number .sheet-rotated-box,
|
|
.sheet-rolltemplate-tor .sheet-roll-total .sheet-rotated-box {
|
|
background-color: var(--yellow);
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-target-number .sheet-rotated-box span,
|
|
.sheet-rolltemplate-tor .sheet-roll-total .sheet-rotated-box span {
|
|
color: black;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor div.sheet-die-result span.sheet-rotated-box {
|
|
display: inline-flex;
|
|
box-sizing: content-box;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
border: 4px solid transparent;
|
|
background-color: var(--yellow);
|
|
border-image-source: var(--borderbrown);
|
|
border-image-slice: 24 24 24 24;
|
|
border-image-repeat: repeat;
|
|
width: 30px;
|
|
height: 30px;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.sheet-rolltemplate-tor div.sheet-die-result span.sheet-rotated-box span {
|
|
background-color: var(--yellow);
|
|
transform: rotate(-45deg);
|
|
border: 0;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-feat-label {
|
|
position: relative;
|
|
top: -30px;
|
|
right: 35px;
|
|
margin-bottom: -50px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-success-label {
|
|
position: relative;
|
|
top: -30px;
|
|
text-align: end;
|
|
left: 25px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-tor div.sheet-feat-die {
|
|
justify-content: flex-end;
|
|
position: relative;
|
|
top: -45px;
|
|
right: 12px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-tor div.sheet-success-die {
|
|
justify-content: flex-start;
|
|
position: relative;
|
|
top: -45px;
|
|
left: 12px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-rotated-box,
|
|
.sheet-rolltemplate-tor div.sheet-success-die span.sheet-rotated-box {
|
|
width: 45px;
|
|
height: 45px;
|
|
border: 5px solid transparent;
|
|
border-image-source: var(--borderred);
|
|
border-image-slice: 24 24 24 24;
|
|
border-image-repeat: repeat;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-rotated-box span,
|
|
.sheet-rolltemplate-tor div.sheet-success-die span.sheet-rotated-box span {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-fullcrit,
|
|
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-fullfail,
|
|
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-gandalf,
|
|
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-eye {
|
|
opacity: 0;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-rotated-box .sheet-fullcrit {
|
|
z-index: 100;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-rotated-box .sheet-fullfail {
|
|
z-index: 100;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-gandalf,
|
|
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-eye {
|
|
position: absolute;
|
|
opacity: 1;
|
|
background-color: var(--yellow);
|
|
background-repeat: no-repeat;
|
|
background-position-x: center;
|
|
background-position-y: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-gandalf {
|
|
top: 12px;
|
|
right: 12px;
|
|
width: 20px;
|
|
height: 19px;
|
|
background-size: 1em;
|
|
background-image: var(--gandalf);
|
|
}
|
|
|
|
.sheet-rolltemplate-tor div.sheet-feat-die span.sheet-eye {
|
|
top: 15px;
|
|
right: -2px;
|
|
width: 50px;
|
|
height: 15px;
|
|
background-size: 2em;
|
|
background-image: var(--eyeofsauron);
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-favoured,
|
|
.sheet-rolltemplate-tor .sheet-modification,
|
|
.sheet-rolltemplate-tor .sheet-miserable,
|
|
.sheet-rolltemplate-tor .sheet-weary {
|
|
position: relative;
|
|
top: -50px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-favoured,
|
|
.sheet-rolltemplate-tor .sheet-miserable {
|
|
right: 28px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-modification,
|
|
.sheet-rolltemplate-tor .sheet-weary {
|
|
left: 30px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-roll-total {
|
|
position: relative;
|
|
top: -91px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-roll-diff {
|
|
position: relative;
|
|
top: -73px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-roll-total.sheet-die-title {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-roll-diff.sheet-die-title {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-roll-outcome {
|
|
position: relative;
|
|
top: -85px;
|
|
display: flex;
|
|
align-self: center;
|
|
text-align: center;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-roll-outcome div.sheet-die-title {
|
|
display: flex;
|
|
align-self: center;
|
|
padding: 3px;
|
|
background-color: #AC4637;
|
|
border: 2px solid #AC4637;
|
|
color: #FFF;
|
|
width: fit-content;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-roll-outcome span {
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
/* Sheet Footer */
|
|
.sheet-rolltemplate-tor .sheet-footer,
|
|
.sheet-rolltemplate-msg .sheet-footer {
|
|
padding: 5px;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor .sheet-additional {
|
|
padding: 3px;
|
|
}
|
|
|
|
/* message rolltemplate */
|
|
.sheet-rolltemplate-msg .sheet-contentmin {
|
|
padding-top: 5px;
|
|
height: min-content;
|
|
}
|
|
|
|
.sheet-rolltemplate-msg .sheet-contentmin .sheet-main-alt span {
|
|
border: 0px !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
|
|
|
|
/* quick and dirty dark mode */
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode,
|
|
.sheet-rolltemplate-msg.sheet-rolltemplate-darkmode,
|
|
body.sheet-darkmode :is(#releaselog, #version),
|
|
body.sheet-darkmode .tab-content .charsheet .user-darkmode:checked,
|
|
body.sheet-darkmode .charsheet .user-darkmode:checked~ :is(h1, h2, h3, h4, h5, h6),
|
|
body.sheet-darkmode .charsheet .user-darkmode:checked~ :is(.sheet-pc, .sheet-adversary),
|
|
body.sheet-darkmode .charsheet .user-darkmode:checked #notes,
|
|
body.sheet-darkmode .charsheet .user-darkmode:checked :is(input, span, button, optgroup, select, textarea, select option) {
|
|
--red: #e1e1e1;
|
|
--grey: #ebebeb;
|
|
--lightgrey: rgba(65, 64, 64, 0.5);
|
|
--yellow: #1f1f1f;
|
|
--accent-color: #e1e1e1;
|
|
--darkgrey: #535353;
|
|
--diamond-color-radio: #7c7c7c;
|
|
--primarytext: #e1e1e1;
|
|
--dark-secondarytext: #e1e1e1;
|
|
--rollbutton-color: var(--grey);
|
|
--rollbutton-font-weight: lighter;
|
|
--eyeofsauron: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20One%20Ring%202e/images/eye2_dark.png');
|
|
--gandalf: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/The%20One%20Ring%202e/images/gandalf2_dark.png');
|
|
--solidborder: 1px solid var(--darkgrey);
|
|
--doubleborder: 4px double var(--darkgrey);
|
|
--diamondborder-radio: 2px solid var(--lightgrey);
|
|
--diamondborder: 1px solid var(--darkgrey);
|
|
--diamondborder-red: 1px solid var(--grey);
|
|
--diamondborder-image: none;
|
|
--diamondborder-image-red: none;
|
|
--diamond-size: 35px;
|
|
--diamond-small-size: 24px;
|
|
--sheetborder: 4px double var(--darkgrey);
|
|
--sheetborder-image-source: none;
|
|
--innerborder: 2px solid var(--darkgrey);
|
|
--innerborder-image-source: none;
|
|
--background: var(--background-color);
|
|
--background-color: #1f1f1f;
|
|
--background-color-transparent: var(--background-color);
|
|
--background-color-hover: #1f1f1f;
|
|
--label-fontweight: lighter;
|
|
--margin-bottom: 6px;
|
|
--box-shadow: 0 3px 15px rgba(221, 221, 221, 0.2);
|
|
}
|
|
|
|
body.sheet-darkmode .sheetform {
|
|
background-color: var(--background-color);
|
|
color: var(--primarytext);
|
|
}
|
|
|
|
body.sheet-darkmode #version,
|
|
body.sheet-darkmode #version span {
|
|
background-color: var(--background-color);
|
|
color: #e1e1e1;
|
|
}
|
|
|
|
/* Buttons */
|
|
body.sheet-darkmode .btn-tab {
|
|
color: white;
|
|
background-color: #1f1f1f;
|
|
border-color: var(--grey);
|
|
}
|
|
|
|
body.sheet-darkmode .charsheet input[type='checkbox']:not(:checked),
|
|
body.sheet-darkmode .charsheet label>input[type='radio']:not(:checked) {
|
|
appearance: none;
|
|
margin-bottom: 0;
|
|
width: 1em;
|
|
height: 1em;
|
|
border: var(--solidborder);
|
|
}
|
|
|
|
body.sheet-darkmode .charsheet input[type='radio']:not(:checked) {
|
|
border-radius: 50px;
|
|
}
|
|
|
|
body.sheet-darkmode .charsheet textarea {
|
|
border: var(--solidborder);
|
|
}
|
|
|
|
body.sheet-darkmode .charsheet #darkmode-toggle {
|
|
display: inline;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode,
|
|
.sheet-rolltemplate-msg.sheet-rolltemplade-darkmode {
|
|
background: var(--backgournd-color);
|
|
color: var(--primarytext);
|
|
}
|
|
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-container,
|
|
.sheet-rolltemplate-msg.sheet-rolltemplate-darkmode .sheet-container,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-title,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-header,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-red,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-title-alt,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-red span,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode div.sheet-die-result span.sheet-rotated-box,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode div.sheet-die-result span.sheet-rotated-box span {
|
|
background-color: var(--background);
|
|
border: var(--sheetborder);
|
|
border-image-source: unset;
|
|
border-image-slice: unset;
|
|
border-image-repeat: unset;
|
|
color: var(--primarytext);
|
|
}
|
|
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-header,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-red,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-title,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-title-alt,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-red span,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode div.sheet-die-result span.sheet-rotated-box span {
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-content {
|
|
border-top: var(--solidborder);
|
|
}
|
|
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-roll-outcome div.sheet-die-title {
|
|
background-color: var(--primarytext);
|
|
border: var(--solidborder);
|
|
color: black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode div,
|
|
.sheet-rolltemplate-msg.sheet-rolltemplate-darkmode div,
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode span,
|
|
.sheet-rolltemplate-msg.sheet-rolltemplate-darkmode span {
|
|
font-family: 'Book Antiqua', Palatino, serif, sans-serif;
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode .sheet-title,
|
|
.sheet-rolltemplate-msg.sheet-rolltemplate-darkmode .sheet-title,
|
|
.sheet-rolltemplate-msg.sheet-rolltemplate-darkmode .sheet-title-alt {
|
|
font-family: 'Uncial Antiqua', "Palatino Linotype", "Book Antiqua", Palatino, serif, sans-serif;
|
|
font-size: medium;
|
|
font-weight: lighter;
|
|
color: var(--primarytext);
|
|
}
|
|
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode div.sheet-die-result span.sheet-rotated-box span.sheet-eye {
|
|
background-image: var(--eyeofsauron);
|
|
}
|
|
|
|
.sheet-rolltemplate-tor.sheet-rolltemplate-darkmode div.sheet-die-result span.sheet-rotated-box span.sheet-gandalf {
|
|
background-image: var(--gandalf);
|
|
} |