[Gestalt RPG] New Sheet w/corrected JSON file

Gestalt/GestaltSheet.css

@@ -0,0 +1,260 @@
+/* Set the min-width so that when the window is resized the look will stay consistant */
+
+.charsheet {
+	background-color: #f1e8cf;
+	min-width: 780px;
+	padding: 0;
+	margin: 0;
+}
+
+/* Universal styling applied to all elements of these types */
+
+h2 {
+	font-size: 1.5em;
+	margin-bottom: 10px;
+	text-align: bottom;
+	display: inline;
+}
+
+h3 {
+	margin-bottom: 10px;
+	text-align: bottom;
+	display: inline;
+}
+
+.ui-dialog .charsheet label {
+	padding: inherit;
+	margin: inherit;
+/*	padding-top: 18px; */
+}
+
+
+.ui-dialog .charsheet input {
+	display: inline-block;
+	width: auto;
+	height: 30px;
+	padding: inherit;
+	margin: inherit;
+}
+
+img {
+	max-height: 100px;
+}
+
+/*todo= figure out how to format textarea boxes*/
+.charsheet textarea {
+	resize: vertical;
+	width: 90%;
+}
+
+textarea.sheet-numwindow {
+	border: 1px solid black;
+	vertical-align: bottom;
+	display: inline-block;
+	max-height: 19px;
+	max-width: 36px;
+}
+
+/* Targetted styling that only effects elements with these classes */
+
+/* creating arrowless text boxes */
+/* Chrome, Safari, Edge, Opera */
+input.sheet-arrowless::-webkit-outer-spin-button,
+input.sheet-arrowless::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+/* creating arrowless text boxes, mozilla edition */
+
+input.sheet-arrowless {
+	  -moz-appearance: textfield;
+}
+
+input.sheet-short {
+	width: 17%;
+}
+
+select.sheet-proftype {
+    vertical-align: top;
+    width: 20px;
+}
+
+select.sheet-proftypedef {
+    vertical-align: top;
+    width: 150px;
+}
+
+select.sheet-abilitytype {
+    vertical-align: top;
+}
+
+span.sheet-prof {
+	font-size: 1.2em;
+	font-weight: bold;
+	left: -36%;
+	padding-right: 4px;
+	position: relative;
+	top: 0px;
+}
+
+
+
+/* Targetted styling that only effects elements contained within the stated class */
+.sheet-stats h3 {
+	display: inline-block;
+	text-align: left;
+}
+
+.sheet-stats h3:first-child {
+	margin-left: 35%;
+	margin-right: 15%;
+}
+
+.sheet-stats input {
+	margin-right: 8%;
+	width: 10%;
+}
+
+/* Attempting to create a sheet grid independent of Roll20 Columns */
+.charsheet .sheet-grid-section{
+
+}
+
+/* frontal character sheet grid */
+.charsheet .sheet-grid-sectionfront{
+	display: grid;
+	grid-template-columns: 200px 390px 200px;
+	grid-template-rows: 350px 550px;
+	grid-template-areas:"namelvl lineage hp"
+						"attributes defenses keywords";
+	grid-gap: 5px;
+}
+
+.charsheet div.sheet-block{
+	display: inline;
+	justify-items: start; 
+	padding: 5px;
+	border: 3px solid gray;
+}
+.charsheet div.sheet-namelvl{
+	grid-area: namelvl;
+}
+.charsheet div.sheet-lineage{
+	grid-area: lineage;
+}
+.charsheet div.sheet-hp{
+	grid-area: hp;
+}
+.charsheet div.sheet-attributes{
+	grid-area: attributes;
+}
+.charsheet div.sheet-keywords{
+	grid-area: keywords;
+}
+.charsheet div.sheet-defenses{
+	grid-area: defenses;
+}
+
+/*traits grid*/
+.charsheet .sheet-grid-sectiontraits{
+	display: grid;
+	grid-template-columns: 280px 300px 300px;
+	grid-template-rows: 950px;
+	grid-template-areas:"lineagetraits culturetraits honors";
+	grid-gap: 5px;
+}
+
+/* class features "grid"*/
+.charsheet .sheet-grid-sectionclassf{
+	display: grid;
+	grid-template-columns: 600px;
+	grid-template-rows: auto;
+	grid-template-areas:"classf";
+	grid-gap: 5px;
+}
+
+/* Feats "grid"*/
+.charsheet .sheet-grid-sectionfeats{
+	display: grid;
+	grid-template-columns: 600px;
+	grid-template-rows: auto;
+	grid-template-areas:"feats";
+	grid-gap: 5px;
+}
+
+/*traits grid sections*/
+.charsheet div.sheet-lineagetraits{
+	grid-area: lineagetraits;
+}
+.charsheet div.sheet-culturetraits{
+	grid-area: culturetraits;
+}
+.charsheet div.sheet-honors{
+	grid-area: honors;
+}
+
+/* class features grid section */
+.charsheet div.sheet-classf{
+	grid-area: classf;
+}
+/* feats grid section */
+.charsheet div.sheet-feats{
+	grid-area: feats;
+}
+
+/*Defenses section grid*/
+
+.charsheet .sheet-grid-sectiondefenses{
+	display: grid;
+	grid-template-columns: 390px 380px;
+	grid-template-rows: 800px;
+	grid-template-areas:"generaldef armor";
+	grid-gap: 5px;
+}
+
+/*Defenses grid sections*/
+
+.charsheet div.sheet-generaldef{
+	grid-area: generaldef;
+}
+
+.charsheet div.sheet-armor{
+	grid-area: armor;
+}
+
+/* configure the tab buttons to hide */
+.charsheet .sheet-character,
+.charsheet .sheet-skills,
+.charsheet .sheet-traits,
+.charsheet .sheet-classf,
+.charsheet .sheet-feats,
+.charsheet .sheet-attacks,
+.charsheet .sheet-defenses,
+.charsheet .sheet-spells,
+.charsheet .sheet-notes {
+    display: none;
+}
+
+/* style the active button */
+.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {outline: 2px solid red;}
+.charsheet .sheet-tabstoggle[value="skills"] ~ div .sheet-button1 {outline: 2px solid red;}
+.charsheet .sheet-tabstoggle[value="traits"] ~ div .sheet-button2 {outline: 2px solid red;}
+.charsheet .sheet-tabstoggle[value="classf"] ~ div .sheet-button3 {outline: 2px solid red;}
+.charsheet .sheet-tabstoggle[value="feats"] ~ div .sheet-button4 {outline: 2px solid red;}
+.charsheet .sheet-tabstoggle[value="attacks"] ~ div .sheet-button5 {outline: 2px solid red;}
+.charsheet .sheet-tabstoggle[value="defenses"] ~ div .sheet-button6 {outline: 2px solid red;}
+.charsheet .sheet-tabstoggle[value="spells"] ~ div .sheet-button7 {outline: 2px solid red;}
+.charsheet .sheet-tabstoggle[value="notes"] ~ div .sheet-button8 {outline: 2px solid red;}
+
+/* show the selected tab */
+.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character,
+.charsheet .sheet-tabstoggle[value="skills"] ~ div.sheet-skills,
+.charsheet .sheet-tabstoggle[value="traits"] ~ div.sheet-traits,
+.charsheet .sheet-tabstoggle[value="classf"] ~ div.sheet-classf,
+.charsheet .sheet-tabstoggle[value="feats"] ~ div.sheet-feats,
+.charsheet .sheet-tabstoggle[value="attacks"] ~ div.sheet-attacks,
+.charsheet .sheet-tabstoggle[value="defenses"] ~ div.sheet-defenses,
+.charsheet .sheet-tabstoggle[value="spells"] ~ div.sheet-spells,
+.charsheet .sheet-tabstoggle[value="notes"] ~ div.sheet-notes {
+    display: block;
+}