[Legend Werx] New Sheet

Legend Werx/sheet.json

@@ -0,0 +1,9 @@
+{
+    "html": "werx.html",
+    "css": "styles.css",
+    "authors": "Axon S.",
+    "roll20userid": "10872012",
+    "preview": "Werx.jpg",
+    "instructions": "Rough draft of the character sheet being used for the Legend Werx game system, will be updating over time"
+
+}

Legend Werx/styles.css

@@ -0,0 +1,369 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+.sheet-maindiv{
+    width: 4000px;
+    height: 4000px;
+}
+
+h1, h2, h3, h4{
+    color: white;
+}
+
+ .border{
+    font-family: 'Press Start 2p'; 
+    color: white;
+    text-shadow: 3px 3px 1px black, -3px -1px 0 black;
+    width: 80%;
+    background-image: url(https://i.imgur.com/PtkYwSB.png);
+    --padding: 25px;
+    float: left;
+    padding: var(--padding);
+    border: 7px solid black;
+    box-shadow: inset 0 0 0 var(--padding) rgba(92, 62, 169, 100%); 
+} 
+
+.legend{
+    position: absolute;
+    left: 305px;
+    top: 70px;
+}
+
+.werx{
+    text-align: center;
+}
+/* setting input text style */
+input[type=text]{
+    font-family: Arial, Helvetica, sans-serif;
+    border: 2px solid black;
+} 
+
+input[type=textarea]{
+    font-family: Arial, Helvetica, sans-serif;
+    border: 2px solid black;
+} 
+
+input[type=number]{
+    font-family: Arial, Helvetica, sans-serif;
+    border: 2px solid black;
+}
+/* setting up styling grids */
+.player{
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr;
+    padding: 15px;
+}
+
+.topplayer{
+    display: grid;
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: 1fr 2fr;
+    padding: 15px;
+
+}
+
+.playername{
+    grid-area: 1 / 1 / 1/ 1
+}
+
+.charactername{
+    justify-self: center;
+}
+
+.inputcharacter{
+    justify-self: center;
+}
+
+.race input{
+    width: 145px;
+}
+
+.class{
+  justify-self: center;
+}
+
+.class input{
+    width: 132px;
+}
+
+.NextLevel{
+    grid-area: 4 / 2 / 4 / 2;
+    margin-left: 92px;
+}
+
+.NextLevel input{
+  width: 100px;
+}
+/* styling character skill and general skills */
+.center{
+    justify-self: center;
+}
+
+.playerskills{
+    display: grid;
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: repeat(4, 1fr);
+    padding: 10px;
+    gap: 1px 20px;
+    font-size: 8.5px;
+}
+
+.stealthiness{
+    justify-self: start;
+}
+
+
+.playergen{
+    display: grid;
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: repeat(5, 1fr);
+    padding: 15px;
+}
+
+
+.playergen input{
+    width: 100px;
+}
+
+/* configure the tab buttons */
+.charsheet .sheet-character,
+.charsheet .sheet-actions {
+    display: none;
+}
+
+/* style the active button */
+.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {outline: 2px solid rgba(92, 62, 169, 70%); }
+.charsheet .sheet-tabstoggle[value="actions"] ~ div .sheet-button1 {outline: 2px solid rgba(92, 62, 169, 70%); }
+
+/* show the selected tab */
+.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character,
+.charsheet .sheet-tabstoggle[value="actions"] ~ div.sheet-actions {
+    display: block;
+}
+
+
+/* positioning tab buttons */
+
+ button{
+    color: black; 
+} 
+
+
+.button-position{
+    margin-left: 400px;
+}
+
+/* styling the player skill buttons */
+
+.charsheet button[type=roll].no-roll::before{
+    content: '';
+}
+
+.playerskills button, .playergen button{
+    font-family: 'press start 2p';
+    font-size: 5px;
+    color: white;
+    background-image: none;
+    border: none;
+    background-color: transparent; 
+    text-shadow: 3px 3px 1px black, -3px -1px 0 black;
+    box-shadow: none;
+}
+
+.playerskills button:hover, .playergen button:hover{
+    font-family: 'press start 2p';
+    font-size: 5px;
+    color: white;
+    background-image: none;
+    border: none;
+    background-color: transparent; 
+    text-shadow: 3px 3px 1px black, -3px -1px 0 black;
+    color: orange;
+    box-shadow: none;
+}
+
+.ui-dialog .charsheet .playergen button{
+    font-size: 1em;
+}
+
+.playergen .onset{
+    position:relative;
+    bottom: 9px;
+}
+
+/* Options on the skills tab */
+
+.charsheet .testname,
+.charsheet input.show:checked ~ div.opt-select{
+    display: block;
+}
+
+.charsheet .opt-select,
+.charsheet input.show:checked ~ .testname{
+    display: none;
+}
+
+
+.charsheet input.toggle-type-a:not(:checked) ~ .show-type-a{
+    display:none;
+}
+
+.charsheet input.toggle-type-b:not(:checked) ~ .show-type-b{
+    display:none;
+}
+
+
+.testname{
+    color: white;
+    background-image: none;
+    border: none;
+    background-color: transparent; 
+    text-shadow: 3px 3px 1px black, -3px -1px 0 black;
+    box-shadow: none;
+}
+
+.testname:hover{
+    font-family: 'press start 2p';
+    font-size: 5px;
+    color: white;
+    background-image: none;
+    border: none;
+    background-color: transparent; 
+    text-shadow: 3px 3px 1px black, -3px -1px 0 black;
+    color: orange;
+    box-shadow: none;
+}
+
+
+.desc {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 20px;
+    resize: none;
+    box-sizing: border-box;
+    width: 100px;
+    height: 231px;
+}
+
+option{
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+select{
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+
+/* Styling the rows and columns of the skills tab */
+
+.sheet-actions-style{
+    display: grid;
+    grid-template-rows: 50px, 100px,50px, 100px,50px, 100px,50px, 100px;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 20px;
+}
+
+.skill-level0{
+    grid-area: 1/1/1/1;
+}
+
+.skill-level1{
+    grid-area: 3/1/3/1;
+    align-self:end;
+}
+
+.skill-level2{
+    grid-area: 5/1/5/1;
+    align-self:end;
+}
+
+.skill-level3{
+    grid-area: 7/1/7/1;
+    align-self:end;
+}
+
+.skill-level4{
+    grid-area: 2/2/2/2;
+    align-self:end;
+}
+
+.skill-level5{
+    grid-area: 4/2/4/2;
+    align-self:end;
+}
+
+.skill-level6{
+    grid-area: 6/2/6/2;
+    align-self:end;
+}
+
+.skill-container0{
+    grid-area: 2/1/2/1;
+}
+
+.skill-container1{
+    grid-area: 4/1/4/1;
+}
+
+.skill-container2{
+    grid-area: 6/1/6/1;
+}
+
+.skill-container3{
+    grid-area: 8/1/8/1;
+}
+
+.skill-container4{
+    grid-area: 3/2/3/2;
+}
+
+.skill-container5{
+    grid-area: 5/2/5/2;
+}
+
+.skill-container6{
+    grid-area: 7/2/7/2;
+}
+
+/* Adjusting skill detail checkbox position */
+
+.details{
+    position: relative;
+    top: 10px !important;
+    left: 275px !important;
+    width: 18px !important;
+    height: 18px !important;
+    margin-bottom: -10px !important;
+}
+
+.charsheet input.details:checked{
+    top: 10px !important;
+    left: 290px !important;
+    width: 18px !important;
+    height: 18px !important;
+}
+
+.repcontrol{
+    display:flex;
+    gap: 1%;
+}
+
+/* Styling the rolltemplate */
+
+.sheet-rolltemplate-werx {
+    display: grid;
+    grid-template-columns: 45% 45%;
+    column-gap: 10%;
+    background-color: white;
+    line-height: 1.9em;
+}
+.sheet-rolltemplate-werx .sheet-template-title {
+    grid-column: 1 / -1;   
+    background-color: rgba(92, 62, 169, 70%);
+}
+
+.sheet-rolltemplate-simple-roll div:nth-child(even)  {
+    text-align: right; 
+}
+.sheet-rolltemplate-simple-roll div:nth-child(1) {
+    text-align: center;
+}