Files
roll20-character-sheets/Deathwatch/Deathwatch.css
T
Mago ca708eb761 Deathwatch Improved Rev3 update
REVISION 3 "Astartes Style"
Modified and improved scripts assisted by the Omnisiah (Chat GPT)

Modified Powers sustained logic, Sustaining 2 Powers or more will reduce PR by -1 per power, sustaining one power will not reduce PR

Added Bechers Gland Sit Weapon

Fixed RF VS XENOS

Added Skill notes repeating section on skills tab

Total Wounds are now Auto-calculated

Added Characteristic modifiers to power armour abilities section

Psy power roll template now marks 91+ rolls as failure

Fixed the dual column problem with elements overlapping

Added more Sizes to vehicle selector

Minor Visual adjustments

Added hit location damage calculator and bionic implant TB modifier.

Fixed bug on melee weapons critical failure roll

Removed Vehicle tab, now vehicle statistics can be found in the Combat tab

*The reason for this is to reduce clutter, both in code and visually, also allows a more unified layout for weapons and vehicles, the now obsolete vehicle weapons fields have been relocated to the Extras tab.

No information lost, only obsolete macros were removed from the code.

As long as the user does not delete the repeating section, the info is preserved, a very explicit message is placed on the Extras tab to warn against this.

These fields will Eventually be removed, maybe next year...
2025-04-07 00:28:25 -04:00

837 lines
20 KiB
CSS

/* Roll20 character sheet layout override */
.ui-dialog .largedialog {
padding: 0px 8px 0px 8px;
}
/* placed background image here to allow the image to extend past html */
.ui-dialog .charsheet {
padding: 5px;
background-color: #ced1ce;
}
/* navigation tabs padding/margin mod */
.nav {
margin-left: 0;
margin-bottom: 5px;
list-style: none;
}
.characterviewer .nav-tabs {
padding-top: 0px;
}
/*Universal override for Roll20 content box*/
.ui-dialog .charsheet .rti * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* Tabs setup, this hides and shows the tabs */{}
.charsheet .rti .skill,
.charsheet .rti .combat,
.charsheet .rti .talent,
.charsheet .rti .psykana,
.charsheet .rti .journal,
.charsheet .rti .vehicles,
.charsheet .rti .experience,
.charsheet .rti .npcs,
.charsheet .rti .config {
display: none;
}
.charsheet .rti .tabstoggle[value="skill"] ~ div.skill,
.charsheet .rti .tabstoggle[value="combat"] ~ div.combat,
.charsheet .rti .tabstoggle[value="talent"] ~ div.talent,
.charsheet .rti .tabstoggle[value="psykana"] ~ div.psykana,
.charsheet .rti .tabstoggle[value="journal"] ~ div.journal,
.charsheet .rti .tabstoggle[value="vehicles"] ~ div.vehicles,
.charsheet .rti .tabstoggle[value="experience"] ~ div.experience,
.charsheet .rti .tabstoggle[value="npcs"] ~ div.npcs,
.charsheet .rti .tabstoggle[value="config"] ~ div.config {
display: block;
}
/* Main HTML tags Styling */
/* general rules for some tags*/
.charsheet .rti button[type="roll"],
.charsheet .rti span,
.charsheet .rti label,
.charsheet .rti select,
.charsheet .rti input[type="text"],
.charsheet .rti input[type="number"] {
display: inline-block;
padding: 0;
margin: 0 0 3px 0; /* shorthand reminder Top - Right - Bottom - Left (0 0 0 0) */
vertical-align: middle;
text-shadow: none;
box-shadow: none;
}
.charsheet .rti .major {
font-weight: bold;
}
/* action button used for CRP {}
.charsheet .rti button[type="action"].crp {
text-align: center;
display: inline-block;
color: black;
border: 1px solid black;
font-size: 20px;
font-weight: bold;
border-radius: 6px;
width: 11%;
height: 42px;
cursor: pointer;
vertical-align: middle;
margin: 4px 0px;
background-color: white;
}
.charsheet .rti button[type="action"].crp:hover {
color: white;
border: 1px solid rgb(218, 165, 32, 1.0);
background-color: rgb(218, 165, 32, 1.0);
background-image: none;
} */
/* Button type Roll */ {}
.charsheet .rti button[type="roll"] {
width: 100%;
height:24px;
font-size: 0px;
cursor: pointer;
background-image: none;
background-color: white;
border: 1px solid black;
white-space: nowrap;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.charsheet .rti button[type="roll"]:hover {
background-color: #DAA520;
border-color: #DAA520;
}
.charsheet .rti button[type="roll"] label,
.charsheet .rti button[type="roll"] input {
font-size: 13px;
font-weight: bold;
text-align: center;
background: none;
border: none;
margin: 0;
cursor: inherit;
}
.charsheet .rti button[type="roll"]:hover label,
.charsheet .rti button[type="roll"]:hover input {
color: white;
border: none;
}
/* SPAN tag */ {}
.charsheet .rti span {
text-align: center;
font-size: 13px;
font-weight: bold;
border: none;
}
.charsheet .rti span.hpl {
-webkit-user-select: all;
-ms-user-select: all;
user-select: all;
-moz-select: all;
cursor: pointer;
text-decoration: underline;
}
.charsheet .rti span.info {
height: 24px;
line-height: 24px;
font-size: 20px;
font-weight: normal;
cursor: help;
}
.charsheet .rti p.message {
font-family: Times, "Times New Roman", serif;
margin-left: 4em;
}
.charsheet .rti p.message > span {
text-align: left;
}
/* Header tags H1 H2 H3 */ {}
.charsheet .rti h1,
.charsheet .rti h2,
.charsheet .rti h3 {
color: black;
margin-top: 7px;
margin-bottom: 2px;
padding: 0;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.charsheet .rti h3 {
font-size: 18px;
line-height: 18px;
}
.charsheet .rti h2 {
font-size: 16px;
line-height: 16px;
}
.charsheet .rti h1 {
font-size: 14px;
line-height: 14px;
}
/* TEXTAREA Field for descriptions */ {}
.charsheet .rti textarea {
resize: vertical;
display: inline-block;
border: 1px solid #aaa;
height: 24px;
width: 100%;
margin: 0 0 2px 0;
padding: 2px;
font-size: 14px;
line-height: 16px;
background-color: white;
vertical-align: middle;
cursor: auto;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: start;
box-shadow: none;
}
/* INPUT fields that record player info */ {}
.charsheet .rti input[type="text"],
.charsheet .rti input[type="number"] {
border: 1px solid black;
height: 24px;
width: 100%;
font-size: 14px;
line-height: 16px;
color: #202020;
text-align: center;
background-color: #E5E5E5;
cursor: auto;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
-webkit-user-select: text;
user-select: text;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* INPUT fields type checkbox */ {}
.charsheet .rti input[type="checkbox"] {
display: inline-block;
height: 13px;
width: 13px;
vertical-align: middle;
margin: 0;
padding: 0;
border: 0;
cursor: pointer;
}
/* Improved Fancy checkbox Baleine version */ {}
.charsheet .rti label.fancyButton > div {
height:24px;
display:inline-block;
vertical-align: middle;
width: 100%;
text-align:center;
border:1px solid black;
font-size: 14px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 3px;
line-height: 24px;
cursor: pointer;
background-color: white;
}
.charsheet .rti label.fancyButton:hover > div {
color: white;
border: 1px solid rgb(218, 165, 32, 1.0);
background-color: rgb(218, 165, 32, 1.0);
}
.charsheet .rti label.fancyButton > input {
display: none;
}
.charsheet .rti label.fancyButton input:checked ~ div {
background-color: red;
color: white;
}
.charsheet .rti label.titleButton {
height: 42px;
line-height: 42px;
width: 12%;
}
.charsheet .rti label.titleButton > div {
height: 42px;
line-height: 42px;
border-radius: 6px;
font-size: 20px;
font-weight: bold;
}
/* Checkbox Arrow icon that toggles visibility */ {}
.charsheet .rti input[type="checkbox"].icon {
appearance: none;
-webkit-appearance: none;
display: inline-block;
height: 15px;
font-size: 14px;
font-family: "pictos";
color: black;
text-align: center;
box-sizing: border-box;
background-color: transparent;
}
.charsheet .rti input[type="checkbox"].icon:before {
content: "{";
box-sizing: border-box;
}
.charsheet .rti input[type="checkbox"].icon:checked:before {
content: "}";
}
.charsheet .rti input[type="checkbox"].icon:focus:before {
outline: 0;
}
.charsheet .rti input[type="checkbox"].icon:focus {
outline: 0;
}
/* SELECT drop-down menu, OPTION tag inside */ {}
.charsheet .rti select {
border: 1px solid black;
height: 24px;
width: 100%;
font-size: 14px;
line-height: 16px;
color: #202020;
background-color: #E5E5E5;
cursor: pointer;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-align: left;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-padding-start: 3px;
}
.charsheet .rti option {
display: block;
height: inherit;
width: inherit;
padding: 0;
margin: 0;
white-space: nowrap;
}
.charsheet .rti option[disabled] {
background:gray;
font-weight:bold;
color:white;
}
/* Disabled readonly fields */ {}
.charsheet .rti input[disabled],
.charsheet .rti select[disabled],
.charsheet .rti input[readonly],
.charsheet .rti select[readonly] {
cursor: not-allowed;
border-color: #AAAAAA;
}
/* LABEL tag */ {}
.charsheet .rti label {
width: 100%;
height: 24px;
border: 0;
font-size: 14px;
font-weight: bold;
line-height: 24px;
text-align: left;
color: black;
}
/*CSS Grid Cols and Rows architecture*/ {}
.charsheet .rti .grid2 {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 7px;
justify-content: center;
}
.charsheet .rti .leftbox {
grid-column-start: 1 / -1;
}
.charsheet .rti .rightbox {
grid-column-start: 2 / -2;
}
/* grid for player info */
.charsheet .rti .grid5 {
width: 100%;
display: grid;
grid-template-columns: 2fr 5fr 5fr 5fr 2fr;
column-gap: 6px;
justify-content: center;
}
.charsheet .rti .gridbox2 {
grid-column-start: 2 / -2;
}
.charsheet .rti .gridbox3 {
grid-column-start: 3 / -3;
}
.charsheet .rti .gridbox4 {
grid-column-start: 4 / -4;
}
/* grid with 9 blocks used in npc */
.charsheet .rti .grid9 {
width: 100%;
display: grid;
grid-template-columns: 3fr 1fr 30px 30px 30px 30px 30px 30px 30px;
gap: 0;
}
/* grid with 7 blocks used for advanced skills */
.charsheet .rti .grid7 {
width: 100%;
display: grid;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 30px;
gap: 0;
}
/* grid with 8 blocks used in custom skills */
.charsheet .rti .grid8 {
width: 100%;
display: grid;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 30px 30px;
gap: 0;
}
/* grid with 8 blocks used in basic and advanced skills, as well as trade skill */
.charsheet .rti .grid8b {
width: 100%;
display: grid;
grid-template-columns: 3fr 1fr 30px 30px 30px 30px 30px 30px;
gap: 0;
}
/* grid with 9 blocks used in intimidate skill*/
.charsheet .rti .gridinputbasic9 {
width: 100%;
display: grid;
grid-template-columns: 9fr 2fr 1fr 30px 30px 30px 30px 30px 30px;
gap: 0;
}
/*element styling to fit the grid*/
.charsheet .rti .label2 {
font-size: 9px;
margin: 0;
text-align: center;
}
.charsheet .rti .label1 {
margin: 0;
text-align: center;
}
.charsheet .rti input[id="subitem"],
.charsheet .rti select[id="subitem"],
.charsheet .rti button[id="subitem"] {
border-radius: 0;
border: 1px solid black;
margin: 0;
}
.charsheet .rti div[id="cbitem"] {
display: flex;
border: 1px solid black;
justify-content: center;
align-items: center;
}
.charsheet .rti span[id="gridspan"] {
height: 24px;
font-size: 15px;
font-weight: normal;
margin: 0;
border: 1px solid black;
cursor: help;
}
/*element styling to fit intimidate*/
.charsheet .rti span[id="gridspansp"] {
font-size: 15px;
font-weight: normal;
margin: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: none;
cursor: help;
}
.charsheet .rti select[id="subitem2"] {
border-radius: 0;
margin: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: none;
border-left: 1px solid black;
color: black;
font-size: 15px;
}
/* Grid for characteristics */
.charsheet .rti .CharGrid {
width: 100%;
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 5px;
}
.charsheet .rti .CharGrid label.characteristic{
text-align:center;
line-height:16px;
white-space:pre;
height:35px;
}
.charsheet .rti .CharGrid label.startinglabel{
text-align:center;
font-size:9px;
width:45%;
}
.charsheet .rti .CharGrid input.charadvance{
width:13%;
height:10px;
}
.charsheet .rti button > input[id="CharBtnIn"] {
width: inherit;
height: inherit;
margin: 0;
font-size: 38px;
text-align: right;
padding: 0 15px 0 0;
}
/* Characteristic Bonus container "unnatural" */
.charsheet .rti input[id="unnatural"] {
font-weight: bold;
font-size: 25px;
height: 60px;
text-align: center;
background: #b7b7b7;
border: 1px solid black;
position: relative;
z-index: 1;
width: 30%;
border-radius: 0 23px 23px 0;
bottom: 63px;
margin-bottom: -60px;
}
/* Special styles and containers */
.charsheet .rti {
font-family: Times, "Times New Roman", serif;
font-size: 0px; /*this eliminates XML whitespaces */
}
/* This rule is needed to allow inputs inside buttons */
.charsheet .rti button input {
pointer-events: none;
}
/*Firefox spinner buttons mod*/
/*by default is not visible*/
.charsheet .rti input[Type="number"]{
-moz-appearance: textfield;
appearance: textfield;
}
/* hover over reveals buttons*/
.charsheet .rti input[Type="number"]:hover{
-moz-appearance: initial;
appearance: initial;
}
/* Chrome, Safari, Edge, Opera spinner buttons*/
/*by default is not visible*/
.charsheet .rti input[type="number"]::-webkit-inner-spin-button,
.charsheet .rti input[type="number"]::-webkit-outer-spin-button {
display: none;
}
/* hover over reveals buttons*/
.charsheet .rti input[type="number"]:hover::-webkit-inner-spin-button,
.charsheet .rti input[type="number"]:hover::-webkit-outer-spin-button {
display: inline
}
/* small roll button */
.charsheet .rti span[id="tinyroll"] {
font-size: 17px;
font-family: "dicefontd20";
margin: 0;
line-height: 22px;
}
/* small chat show button */
.charsheet .rti button[type="roll"] label.shct {
font-size: 22px;
font-family: "pictos";
margin: 0;
line-height: 20px;
}
.charsheet .rti .quickborder {
border: 1px solid #737373;
padding: 2px 2px 1px 2px;
margin-bottom: 3px;
}
.charsheet .rti .border {
border: 1px solid #737373;
padding: 2px 2px 1px 2px;
margin: 0 2px 4px 2px;
}
.charsheet .rti .armourblock {
text-align: center;
margin: auto auto 5px auto;
width: calc(33% - 3px);
display: inline-block;
}
.charsheet .rti .armourblock label {
text-align: center;
text-transform: uppercase;
height: auto;
height: auto;
line-height: normal;
white-space: break-spaces;
}
.charsheet .rti .armourblock input {
font-weight:bold;
}
.charsheet .rti .help {
cursor: help;
}
/*used as horizontal spacing for inline-block lines*/
.charsheet .rti .spacing {
display: inline-block;
width: auto;
height: auto;
vertical-align: middle;
margin: 0;
padding: 0;
border: 0;
}
/* container for image top logo */
.charsheet .rti .logo {
display: inline-block;
width: auto;
height: auto;
}
/* container for image in armour section */
.charsheet .rti .trask {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Deathwatch/images/DWIsemitrans.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/*the checkbox that allows to hide divs with hbody*/
.charsheet .rti input.arrow {
position: relative;
}
.charsheet .rti input.arrow:checked ~ div.hbody {
display: none;
}
/*the checkbox that allows to Show divs with hbody2*/
.charsheet .rti input.arrow2 {
position: relative;
}
.charsheet .rti input.arrow2 ~ div.hbody2 {
display: none;
}
.charsheet .rti input.arrow2:checked ~ div.hbody2 {
display: block;
}
.charsheet .rti input.hidden {
display: none;
}
/* Modification for Add, Delete, Move and Modify buttons under a fieldset */
.repcontrol_move,
.repcontrol_add,
.repcontrol_edit,
.repcontrol_del {
box-shadow: none;
z-index: 1;
position: relative;
text-shadow: none;
height: 27px;
width: 30px;
}
.repcontrol_add {
font-size: 0px;
color: rgba(255, 0, 0, 0.0);
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Deathwatch/images/plus-icon.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: white;
}
.repcontrol_edit {
font-size: 0px;
color: rgba(255, 0, 0, 0.0);
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Deathwatch/images/gear-icon.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: white;
}
.repcontrol_move:hover,
.repcontrol_add:hover,
.repcontrol_edit:hover,
.repcontrol_del:hover {
background-position: initial;
color: white;
border: 1px solid rgb(218, 165, 32, 1.0);
background-color: rgb(218, 165, 32, 1.0);
}
/* Mod for skill notes in a fieldset */
.repcontainer[data-groupname="repeating_skillnotes"] > .repitem {
display: inline-block;
width: 25%;
}
/* Mod for single fieldset dual layout */
.repcontainer[data-groupname="repeating_talents"] > .repitem,
.repcontainer[data-groupname="repeating_traits"] > .repitem,
.repcontainer[data-groupname="repeating_cybernetics"] > .repitem,
.repcontainer[data-groupname="repeating_soloabilities"] > .repitem,
.repcontainer[data-groupname="repeating_squadabilities"] > .repitem,
.repcontainer[data-groupname="repeating_psypowers"] > .repitem {
display: inline-block;
width: 50%;
}
/* ROLL TEMPLATE STYLE CUSTOM based on "better default template"*/
/* margin reduction to better fit the chat window */
.sheet-rolltemplate-custom {
margin: 0px -11px;
font-family: math, Arial;
}
/* Header formatting */
.sheet-rolltemplate-custom .sheet-header {
background-image: url(https://raw.githubusercontent.com/roguetradermago/Rogue-Trader-improved-assets/refs/heads/main/dwi-template-top1.png);
background-position: top;
background-size: contain;
background-repeat: no-repeat;
width: 275px;
height: 29px;
margin-bottom: -1px;
}
/* footer formatting */
.sheet-rolltemplate-custom .sheet-footer {
background-image: url(https://raw.githubusercontent.com/roguetradermago/Rogue-Trader-improved-assets/refs/heads/main/dwi-template-bottm1.png);
background-position: bottom;
background-size: contain;
background-repeat: no-repeat;
width: 275px;
height: 40px;
margin-top: -1px;
}
/* Name field */
.sheet-rolltemplate-custom .sheet-name {
grid-column: span 2;
padding: 3px 5px;
text-align: center;
font-size: 17px;
font-weight: bold;
color: #00ff1c;
}
/* main container */
.sheet-rolltemplate-custom .sheet-content {
margin-top: -2px;
margin-bottom: -1px;
display: grid;
background: black;
width: 275px;
height: auto;
box-sizing: border-box;
/* Header formatting - modify the column layout below */
grid-template-columns: auto auto;
/* Line height to match default roll template */
line-height: 1.4em;
}
/* Left column "key"*/
.sheet-rolltemplate-custom .sheet-content .sheet-key {
padding: 3px;
text-align: right;
font-weight: bold;
font-size: 15px;
color: #00ff1c;
}
/* right column "value"*/
.sheet-rolltemplate-custom .sheet-value {
padding: 3px;
text-align: left;
font-weight: bold;
font-size: 15px;
color: #00ff1c;
}
/* Description field */
.sheet-rolltemplate-custom .sheet-desc {
grid-column: span 2;
padding: 3px 5px;
text-align: center;
font-weight: normal;
line-height: 18px;
color: #00ff1c;
font-size: 15px;
}
/* Result field */
.sheet-rolltemplate-custom .sheet-result {
grid-column: span 2;
padding: 3px 5px;
text-align: center;
font-weight: bold;
font-size: 15px;
color: #00ff1c;
}
/* Style similar to the Roll20 inlineRollResult */
.sheet-rolltemplate-custom .sheet-inlinerollresult {
border: 2px solid #fef68e;
padding: 0px 3px 0px 3px;
}
.sheet-rolltemplate-custom .sheet-result span,
.sheet-rolltemplate-custom .sheet-value span,
.sheet-rolltemplate-custom .sheet-desc span{
background-color: transparent;
display: inline;
line-height: 22px;
font-size: 15px;
color: #00ff1c;
font-weight: bold;
}
.sheet-rolltemplate-custom .sheet-desc span.sheet-textDesc{
font-weight: normal;
}
.sheet-rolltemplate-custom .sheet-result p {
font-size: 50px;
margin-top: 10px;
color: #00ff1c;
}