Merge pull request #12311 from RandomUsername/Achtung_Cthulhu_2d20_v1.7

Achtung Cthullu 2d20 - New Feature
Roll20 · Nov 20, 2023 · 705185e · 705185e
2 parents a1b013a + d7d6cdb
commit 705185e
Show file tree

Hide file tree

Showing 2 changed files with 812 additions and 21 deletions.
diff --git a/Achtung!_Cthulhu_2d20/Achtung!_Cthulhu_2d20.css b/Achtung!_Cthulhu_2d20/Achtung!_Cthulhu_2d20.css
@@ -5,15 +5,17 @@
 .charsheet .sheet-main_char,
 .charsheet .sheet-equipment,
 .charsheet .sheet-spells,
-.charsheet .sheet-settings {
+.charsheet .sheet-settings,
+.charsheet .sheet-vehicle {
     display: none;
 }
 
 /* show the selected tab */
 .charsheet .sheet-tabstoggle[value="main_char"] ~ div.sheet-main_char,
 .charsheet .sheet-tabstoggle[value="equipment"] ~ div.sheet-equipment,
 .charsheet .sheet-tabstoggle[value="spells"] ~ div.sheet-spells,
-.charsheet .sheet-tabstoggle[value="settings"] ~ div.sheet-settings {
+.charsheet .sheet-tabstoggle[value="settings"] ~ div.sheet-settings,
+.charsheet .sheet-tabstoggle[value="vehicle"] ~ div.sheet-vehicle {
     display: grid;
 }
 
@@ -104,6 +106,26 @@
 }
 
 
+/*----------------- vehicle Layout ------------------*/
+
+/* A CSS Grid example using "grid-template-areas"
+  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
+*/
+.sheet-vehicle {
+  display: grid;
+  width: 800px;
+  /* height: 600px; */
+  grid-gap: 4px;
+  grid-template-columns: 10fr 5fr 5fr 6fr;
+  grid-template-rows: 60px 4fr 5fr auto;
+  grid-template-areas:
+    "v_header v_header v_header v_header"
+    "v_main v_main v_main v_main"
+    "v_stress v_injuries v_rolls v_truths"
+    "v_weapons v_weapons v_weapons v_weapons";
+}
+
+
 /*----------------- settings Layout ------------------*/
 
 /* A CSS Grid example using "grid-template-areas"
@@ -144,6 +166,10 @@ section {
   display: block;
 }
 
+.show_element_inline{
+  display: inline-block;
+}
+
 .show_element_grid{
   display: grid;
 }
@@ -344,12 +370,10 @@ input[type="number"], select {
 }
 
 .stress input[type="checkbox"]{
-
   width: 1.75em;
   height: 1.75em;
   position: relative;
   margin: 1px;
-
 }
 
 .stress input[type="checkbox"]::after {
@@ -387,10 +411,10 @@ input[type="number"], select {
   transform: translate(-50%,-50%);
 }
 
-
 .disableStressBox {
   pointer-events: none;
 }
+
 .disableStressBox:after {
   background: darkgrey;
 }
@@ -717,6 +741,233 @@ input[type="number"], select {
 }
 
 
+/*------------- vehicle Section-specific CSS -------------*/
+.v_header {
+  grid-area: v_header;
+  background-color: darkolivegreen;
+  flex-direction: row;
+  justify-content: space-between;
+  color: ghostwhite;
+}
+.v_header h1 {
+  color:ghostwhite;
+}
+
+.v_header span {
+  font-size: 2em;
+}
+
+.v_main {
+  grid-area: v_main;
+  background-color: linen;
+  justify-content: space-between;
+}
+
+.v_main label{
+  background-color: darkolivegreen;
+  padding-right: 25px;
+  padding-top: 3px;
+  color: ghostwhite;
+  width: fit-content;
+}
+
+.v_weapons {
+  grid-area: v_weapons;
+  background-color: linen;
+  justify-content: space-evenly;
+}
+
+.v_weapons label{
+  background-color: olive;
+  padding-right: 25px;
+  padding-top: 3px;
+  color: ghostwhite;
+  width: fit-content;
+}
+
+.v_weapons h3{
+  background-color: darkolivegreen;
+  padding-right: 25px;
+  padding-top: 3px;
+  color: ghostwhite;
+  width: fit-content;
+}
+
+.vehicle_weapons_row1 {
+  height:65px;
+}
+
+.vehicle_weapons_row1 .stress_effects {
+  height:30px;
+  width: 95%;
+}
+
+.vehicle_weapons_row2{
+  height:85px;
+}
+
+.vehicle_weapons_row2 div{
+  height:50px;
+  width: 95%;
+}
+
+.v_stress {
+  grid-area: v_stress;
+  background-color: linen;
+  justify-content: space-evenly;
+}
+
+.v_stress label{
+  background-color: darkolivegreen;
+  padding-right: 25px;
+  padding-top: 3px;
+  color: ghostwhite;
+  width: fit-content;
+}
+
+.v_stress input[type="checkbox"]{
+  width: 1.75em;
+  height: 1.75em;
+  position: relative;
+  margin: 1px;
+}
+
+.v_stress input[type="checkbox"]::after {
+  content: " ";
+  width: 90%;
+  height: 90%;
+  border: 1px solid black;
+
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -moz-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.v_stress input[type="checkbox"]:checked:after {
+  content: "X";
+  color: black;
+  width: 90%;
+  height: 90%;
+  background: white;
+  border: 1px solid black;
+  text-align: center;
+  font-size: large;
+
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -moz-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+
+
+
+
+
+
+.v_injuries {
+  grid-area: v_injuries;
+  background-color: linen;
+  justify-content: space-evenly;
+}
+
+.v_injuries label{
+  background-color: darkolivegreen;
+  padding-right: 25px;
+  padding-top: 3px;
+  color: ghostwhite;
+  width: fit-content;
+}
+
+
+
+.v_injuries input[type="checkbox"]{
+  width: 1.75em;
+  height: 1.75em;
+  position: relative;
+  margin: 1px;
+}
+
+.v_injuries input[type="checkbox"]::after {
+  content: " ";
+  width: 90%;
+  height: 90%;
+  border: 1px solid black;
+
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -moz-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.v_injuries input[type="checkbox"]:checked:after {
+  content: "X";
+  color: black;
+  width: 90%;
+  height: 90%;
+  background: white;
+  border: 1px solid black;
+  text-align: center;
+  font-size: large;
+
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -moz-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+
+
+
+
+.v_rolls {
+  grid-area: v_rolls;
+  background-color: linen;
+  justify-content: space-between;
+}
+
+.v_rolls label{
+  background-color: darkolivegreen;
+  padding-right: 25px;
+  padding-top: 3px;
+  color: ghostwhite;
+  width: fit-content;
+}
+
+
+.v_truths {
+  grid-area: v_truths;
+  background-color: linen;
+  justify-content: space-between;
+}
+
+.v_truths label{
+  background-color: darkolivegreen;
+  padding-right: 25px;
+  padding-top: 3px;
+  color: ghostwhite;
+  width: fit-content;
+}
+
+
+
+
+
+
+
 /*------------- settings Section-specific CSS -------------*/
 .st_header {
   grid-area: st_header;