diff --git a/Rogue Trader Improved/RogueTraderImproved.css b/Rogue Trader Improved/RogueTraderImproved.css index 905a096321..b61d329799 100644 --- a/Rogue Trader Improved/RogueTraderImproved.css +++ b/Rogue Trader Improved/RogueTraderImproved.css @@ -19,7 +19,6 @@ .characterviewer .nav-tabs { padding-top: 0px; } - /*Universal override for Roll20 content box*/ .ui-dialog .charsheet .rti * { box-sizing: border-box; @@ -49,36 +48,13 @@ display: block; } -/* action button used for CRP */ {} -.charsheet .rti button[type="action"] { - width: 100%; - height: 24px; - font-size: 13px; - font-weight: bold; - color: black; - cursor: pointer; - background-color: rgb(255 182 0 / 17%); - 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="action"]:hover { - color: white; - border: 1px solid rgb(218, 165, 32, 1.0); - background-color: rgb(218, 165, 32, 1.0); -} - -/* Main HTML tags Styling */ -/* general rules for some tags*/ -.charsheet .rti button[type="action"], +/* HTML tags Styling general rules */{} .charsheet .rti button[type="roll"], .charsheet .rti span, .charsheet .rti label, .charsheet .rti select, +.charsheet .rti b, +.charsheet .rti i, .charsheet .rti input[type="text"], .charsheet .rti input[type="number"] { display: inline-block; @@ -87,6 +63,20 @@ vertical-align: middle; text-shadow: none; box-shadow: none; + color: black; +} +.charsheet .rti button[type="roll"], +.charsheet .rti span, +.charsheet .rti label, +.charsheet .rti select, +.charsheet .rti h1, +.charsheet .rti h2, +.charsheet .rti b, +.charsheet .rti i { + -webkit-user-select: none; /* Safari and older Chrome versions */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer and Edge */ + user-select: none; /* Standard syntax */ } /* Button type Roll */{} @@ -99,11 +89,8 @@ background-color: rgb(255 182 0 / 17%); 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; + border-radius: 3px; + line-height: 24px; } .charsheet .rti button[type="roll"]:hover { background-color: #DAA520; @@ -114,39 +101,32 @@ font-size: 13px; font-weight: bold; text-align: center; - background: none; - border: none; margin: 0; + border: 0; cursor: inherit; } .charsheet .rti button[type="roll"]:hover label, .charsheet .rti button[type="roll"]:hover input { color: white; - border: none; +} +.charsheet .rti button[type="roll"] b { + margin: 0; + line-height: 22px; } /* SPAN tag */{} .charsheet .rti span { text-align: center; - color: black; 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; + -webkit-user-select: all; /* Safari and older Chrome versions */ + -moz-user-select: all; /* Firefox */ + -ms-user-select: all; /* Internet Explorer and Edge */ + user-select: all; /* Standard syntax */ cursor: pointer; } -.charsheet .rti span.info { - height: 24px; - line-height: 24px; - font-size: 20px; - font-weight: normal; - cursor: help; -} .charsheet .rti span.shipl { height: fit-content; width: fit-content; @@ -154,29 +134,51 @@ font-size: 10px; } -/* Header tags H1 H2 H3 */{} +/* Header tags H1 H2 */{} .charsheet .rti h1, -.charsheet .rti h2, -.charsheet .rti h3 { +.charsheet .rti h2 { color: black; margin-top: 7px; - margin-bottom: 2px; + margin-bottom: 3px; padding: 0; font-weight: bold; text-transform: uppercase; text-align: center; } -.charsheet .rti h3 { +.charsheet .rti h1 { font-size: 18px; line-height: 18px; } .charsheet .rti h2 { - font-size: 16px; - line-height: 16px; + font-size: 15px; + line-height: 15px; } -.charsheet .rti h1 { - font-size: 14px; - line-height: 14px; + +/* Tags B and I used for icons */{} +.charsheet .rti b, +.charsheet .rti i { + width: fit-content; + height: 24px; + font-style: normal; + font-weight: normal; + font-family: "pictos"; + font-size: 18px; + text-align: center; + line-height: 24px; + cursor: help; +} +.charsheet .rti b:hover { + color: red; +} +.charsheet .rti i { + cursor: initial; + line-height: normal; +} +.charsheet .rti button[type="roll"] label.shct { + font-size: 22px; + font-family: "pictos"; + margin: 0; + line-height: 20px; } /* TEXTAREA Field for descriptions */{} @@ -184,7 +186,6 @@ resize: vertical; display: inline-block; border: 1px solid #aaa; - height: 24px; width: 100%; margin: 0 0 5px 0; padding: 2px; @@ -203,22 +204,6 @@ text-align: start; box-shadow: none; } -.charsheet .rti textarea.rulesbox { - width: 49.5%; - height: 70px; - color: black; - white-space: pre-line; - cursor: pointer; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - -moz-select: none; - overflow: hidden; - resize: none; -} -.charsheet .rti textarea.rulesbox:focus { - height: 525px; -} /* INPUT fields that record player info */{} .charsheet .rti input[type="text"], @@ -229,7 +214,6 @@ font-size: 14px; font-weight: bold; line-height: 16px; - color: black; text-align: center; background-color: transparent; cursor: auto; @@ -238,12 +222,10 @@ text-transform: none; text-indent: 0px; -webkit-user-select: text; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; border-radius: 3px; } -/* INPUT fields type checkbox */{} +/* INPUT type checkbox */{} .charsheet .rti input[type="checkbox"] { display: inline-block; height: 13px; @@ -256,6 +238,9 @@ } /* Improved Fancy checkbox Baleine version */{} +.charsheet .rti label.fancyButton { + line-height: normal; +} .charsheet .rti label.fancyButton > div { height:24px; display: inline-block; @@ -268,7 +253,7 @@ -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 3px; - line-height: 24px; + line-height: normal; cursor: pointer; background-color: rgb(255 182 0 / 17%); } @@ -277,11 +262,22 @@ border: 1px solid rgb(218, 165, 32, 1.0); background-color: rgb(218, 165, 32, 1.0); } +.charsheet .rti label.fancyButton input:checked ~ div, +.charsheet .rti label.fancyButton input:checked ~ span { + background-color: rgba(255, 0, 0, 0.6); + color: white; +} .charsheet .rti label.fancyButton > input { display: none; } -.charsheet .rti label.fancyButton input:checked ~ div { - background-color: red; +.charsheet .rti .fancyButton b, +.charsheet .rti .fancyButton span { + margin: 0; +} +.charsheet .rti .fancyButton b { + line-height: 22px; +} +.charsheet .rti .fancyButton span:hover { color: white; } @@ -297,11 +293,16 @@ font-size: 20px; font-weight: bold; } -.charsheet .rti input.hidden { - display: none; +.charsheet .rti label.shipweapon > div { + font-size: 9px; + height: 18px; + line-height: 18px; + font-weight: bold; } - -/* Checkbox Arrow icon that toggles visibility may be combined with arrow class later */{} +.charsheet .rti label.shipweapon { + height: 18px; +} +/* Checkbox Arrow icon that toggles visibility */{} .charsheet .rti input[type="checkbox"].icon { appearance: none; -webkit-appearance: none; @@ -336,7 +337,6 @@ font-size: 14px; line-height: 16px; font-weight: normal; - color: black; background-color: transparent; cursor: pointer; letter-spacing: normal; @@ -376,7 +376,6 @@ font-weight: bold; line-height: 24px; text-align: left; - color: black; } /*CSS Grid Cols and Rows architecture*/{} @@ -430,7 +429,6 @@ .charsheet .rti .gridbox3rd { grid-column: 3 / 4; } - /* grid for nav powers */ .charsheet .rti .gridnav { width: 100%; @@ -438,15 +436,13 @@ grid-template-columns: 5fr 1fr 32px 32px 32px 32px 32px; gap: 0; } - /*grid with 9 blocks used in npc, custom skill, trade and advance skills*/ .charsheet .rti .grid9 { width: 100%; display: grid; - grid-template-columns: 3fr 1fr 30px 30px 30px 30px 30px 30px 30px; + grid-template-columns: 4fr 1fr 30px 30px 30px 30px 30px 30px 30px; gap: 0; } - /* grid with 8 blocks used in skill groups*/ .charsheet .rti .grid8 { width: 100%; @@ -454,23 +450,13 @@ grid-template-columns: 1fr 30px 30px 30px 30px 30px 30px 30px; gap: 0; } - /* grid with 8 blocks used in basic skills*/ .charsheet .rti .grid8b { width: 100%; display: grid; - grid-template-columns: 3fr 1fr 30px 30px 30px 30px 30px 30px; + grid-template-columns: 5fr 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; @@ -483,7 +469,8 @@ } .charsheet .rti input[id="subitem"], .charsheet .rti select[id="subitem"], -.charsheet .rti button[id="subitem"] { +.charsheet .rti button[id="subitem"], +.charsheet .rti span[id="gridspan"] { border-radius: 0; border: 1px solid black; margin: 0; @@ -496,31 +483,6 @@ } .charsheet .rti span[id="gridspan"] { 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 */ @@ -563,7 +525,7 @@ .charsheet .rti button input { pointer-events: none; } -/* This adds a backgroun color to some input fields */ +/* This adds a background color to some input fields */ .charsheet .rti input[type="text"].cur, .charsheet .rti input[type="number"].cur { background-color: white; @@ -581,7 +543,11 @@ .charsheet .rti textarea.crewef:focus { height: 140px; } - +/*labels with tooltip*/ +.charsheet .rti label:hover.help { + cursor: help; + color: red; +} /*Firefox spinner buttons mod*/ /*by default is not visible*/ .charsheet .rti input[Type="number"]{ @@ -602,20 +568,7 @@ .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; -} + /* armour section */ .charsheet .rti .quickborder { border: 1px solid #AAAAAA; @@ -623,22 +576,20 @@ margin-bottom: 3px; } .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: inherit; + white-space: pre-wrap; + text-transform: uppercase; } -.charsheet .rti .armourblock input { - text-align: center; - font-size: 14px; -} -.charsheet .rti .help { - cursor: help; +.charsheet .rti .armourblock button { + height: 48px; } + /*used as horizontal spacing for inline-block lines*/ .charsheet .rti .spacing { display: inline-block; @@ -680,33 +631,20 @@ display: block; } -/*radio input and div used in ship weapons*/ -.charsheet .rti div[id="shipwp1"], -.charsheet .rti div[id="shipwp2"], -.charsheet .rti div[id="shipwp3"], -.charsheet .rti div[id="shipwp4"], -.charsheet .rti div[id="shipwp5"] { +/*tab setup for ship actions - replaces radio input*/ +.charsheet .rti .shipmanu, +.charsheet .rti .shipaction, +.charsheet .rti .shipnpc, +.charsheet .rti .shipwp4, +.charsheet .rti .shipwp5 { display: none; } - -.charsheet .rti input.macro, -.charsheet .rti input.lance, -.charsheet .rti input.torpedo, -.charsheet .rti input.acraft, -.charsheet .rti input.novac { - display: inline-block; - width: 4%; - margin-bottom: 3px -} - -.charsheet .rti input.macro:checked ~ div[id="shipwp1"], -.charsheet .rti input.lance:checked ~ div[id="shipwp2"], -.charsheet .rti input.torpedo:checked ~ div[id="shipwp3"], -.charsheet .rti input.acraft:checked ~ div[id="shipwp4"], -.charsheet .rti input.novac:checked ~ div[id="shipwp5"] { +.charsheet .rti .shiptoggle[value="shipmanu"] ~ div.shipmanu, +.charsheet .rti .shiptoggle[value="shipaction"] ~ div.shipaction, +.charsheet .rti .shiptoggle[value="shipnpc"] ~ div.shipnpc, +.charsheet .rti .shiptoggle[value="shipwp4"] ~ div.shipwp4, +.charsheet .rti .shiptoggle[value="shipwp5"] ~ div.shipwp5 { display: block; - padding: 0 3px; - margin-bottom: 8px; } /* Modification for Add, Delete, Move and Modify buttons under a fieldset */ @@ -754,9 +692,9 @@ .repcontainer[data-groupname="repeating_shipweapons"] > .repitem { display: inline-block; width: 50%; + padding: 0 3px; } - /* ROLL TEMPLATE STYLE CUSTOM based on "better default template"*/ /* margin reduction to better fit the chat window */ .sheet-rolltemplate-custom { diff --git a/Rogue Trader Improved/RogueTraderImproved.html b/Rogue Trader Improved/RogueTraderImproved.html index 01afb7b968..d608fa445e 100644 --- a/Rogue Trader Improved/RogueTraderImproved.html +++ b/Rogue Trader Improved/RogueTraderImproved.html @@ -3,15 +3,15 @@
- +
- +
-

Characteristics

+

Characteristics

@@ -66,13 +66,11 @@ -
-
-
+
+ + ? + + + +
+
- Pool - - - - Current -
- -
-
-