diff --git a/SabreRPG/sabreRPG_sheet.jpg b/SabreRPG/sabreRPG_sheet.jpg new file mode 100644 index 000000000000..12fdb2079d72 Binary files /dev/null and b/SabreRPG/sabreRPG_sheet.jpg differ diff --git a/SabreRPG/sabre_rpg.css b/SabreRPG/sabre_rpg.css new file mode 100644 index 000000000000..637d9f3b4556 --- /dev/null +++ b/SabreRPG/sabre_rpg.css @@ -0,0 +1,1159 @@ +/* Import Google Roboto Condensed Font */ +@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap'); + +.charsheet div.page { + font-family:"Arial"; + font-size: 15px; + font-weight:bold; + width:850px; + height:1550px; +} +/*Common Styles*/ +.charsheet input,select,textarea { + font-family:"Roboto Condensed", "Arial"; + box-sizing: border-box; + padding: 3px 0 2px 0; + margin: 0; + border:0; + outline-style:none; + font-size:1.2em; + color:black; +} +.charsheet button { + width:150px; +} +.charsheet textarea { + overflow:auto; +} +.charsheet textarea.ta1 { + padding:0 3px; + height:87px; + width:104px; + margin:3px 0; + font-size:1em; +} +.charsheet img { + vertical-align:top; + padding:2px 0; +} +.charsheet img.sml { + height:25px; + width:25px; + padding:0; +} +.charsheet img.page2 { + height:30px; + width:30px; + vertical-align:top; + padding:2px; +} +.charsheet input.pname { + text-align:left; + width:160px; + margin:0 4px 0 0; +} +.charsheet input.cname { + text-align:left; + width:290px; + margin:0 4px 0 0; +} +.charsheet input.speca { + text-align:left; + width:240px; + margin: 2px 0; +} +.charsheet input.w1 { + text-align:center; + width:30px; +} +.charsheet input.w2 { + text-align:center; + width:45px; +} +.charsheet input.MPw2 { + margin: 5px 0 3px 0; + text-align:center; + width:40px; + font-size:1.2em; +} +.charsheet input.w3 { + text-align:center; + width:90px; +} +.charsheet input.MPw3 { + text-align:center; + width:75px; + font-size:1.2em; +} +.charsheet input.w31 { + text-align:center; + width:100px; +} +.charsheet input.w3s { + text-align:center; + width:75px; + margin:4px 0; + font-size:1.2em; +} +.charsheet input.w4 { + text-align:center; + width:110px; +} +.charsheet input.w41 { + text-align:left; + width:120px; +} +.charsheet input.w45 { + text-align:center; + width:150px; +} +.charsheet input.w4s { + text-align:center; + width:150px; + margin:2px 0; +} +.charsheet input.w45s { + text-align:center; + width:160px; + margin: 2px 0; +} +.charsheet input.w5 { + text-align:center; + width:150px; +} +.charsheet input.w6 { + text-align:center; + width:195px; +} +.charsheet input.w7 { + text-align:left; + width:560px; +} +.charsheet input.w71 { + text-align:left; + width:380px; +} +.charsheet input.w72 { + text-align:left; + width:450px; +} +.charsheet input.w8 { + text-align:left; + width:640px; +} +.charsheet input.w81 { + text-align:left; + width:540px; +} +.charsheet input.w82 { + text-align:left; + width:640px; +} +.charsheet input.w83 { + text-align:left; + width:470px; +} +.charsheet input.w84 { + text-align:left; + width:720px; +} +.charsheet input.w9 { + text-align:left; + width:720px; +} +.charsheet input.normal { + vertical-align:middle; +} +.charsheet input.damred { + vertical-align:middle; + font-size:1em; + width:670px; +} +.charsheet input.stat { + vertical-align:top; + margin:8px 2px 4px 2px; + padding:0; + font-size:2em; + width:40px; +} +.charsheet input.stat1 { + text-align:center; + vertical-align:top; + margin:0; + padding:0; + font-size:1.3em; + width:30px; +} +.charsheet input.stat11 { + text-align:center; + vertical-align:top; + margin:3px; + padding:0; + font-size:1.3em; + width:36px; +} +.charsheet input.stat12 { + text-align:center; + vertical-align:top; + margin:6px 0 0 0; + padding:0; + font-size:1.4em; + width:30px; +} + +.charsheet input.stat2 { + text-align:center; + vertical-align: middle; + margin:12px 2px 2px 2px; + padding:0; + font-size:1.6em; + width:34px; +} +.charsheet input.stat22 { + margin:0; + padding:0; + font-size:1.6em; + width:34px; +} +.charsheet input.stat3 { + text-align:center; + vertical-align:top; + margin:4px 4px 4px 4px; + padding:0; + font-size:1.0em; + width:30px; +} +.charsheet input.stat4 { + text-align:center; + vertical-align: middle; + margin:5px; + padding:0; + font-size:1.8em; + width:40px; +} +.charsheet input.stat44 { + text-align:center; + vertical-align:top; + margin:1px 1px 6px 4px; + padding:0; + font-size:1em; + width:30px; +} +.charsheet input.stat5 { + text-align:left; + margin:10px 4px 4px 4px; + padding:0; + font-size:1.7em; + width:30px; +} +.charsheet input.stat6 { + text-align:center; + margin:0; + padding:0; + font-size:1.3em; + width:30px; +} +/* row1 - Player Info */ +.charsheet div.row1 { + padding:2px; + margin: 8px 0; + background-color:black; + color:white; + border-radius:8px; + border:2px solid #000000; +} +/* row2 - Profession - initiatiation etc */ +.charsheet div.row2 { + padding: 4px; + background-color:black; + color:white; + border-radius:8px; + border:2px solid #000000; +} +.charsheet div.row2c1 { + text-align:right; + margin:0; + background-color:black; + color:white; + border-radius:8px; + border:2px solid #000000; +} +.charsheet div.row2c2 { + margin:0; + background-color:black; + color:white; + border-radius:8px; + border:2px solid #000000; + padding:2px 2px; +} +.charsheet div.row2c3 { + margin:0; + background-color:black; + color:white; + border-radius:8px; + border:2px solid #000000; + padding:2px 2px; +} +/* row3 - Attributes _ Bonus etc */ +.charsheet div.row3c1 { + text-align:center; + background-color:black; + color:white; + border-radius:8px; + border:2px solid #000000; + padding:2px 2px 8px 2px; +} +.charsheet div.row3c2 { + background-color:black; + color:white; + border-radius:8px; + border:2px solid #000000; + padding:2px 2px; +} +.charsheet div.row3c3 { + text-align:center; + margin:3px 0; + color:white; + border:0; + padding:0; +} +.charsheet div.row3c5 { + text-align:left; + background-color:black; + color:white; + border-radius:8px; + border:2px solid #000000; +} +.charsheet div.row3c4 { + text-align:center; + background-color:black; + color:white; + border-radius:8px; + border:2px solid #000000; + padding:2px 6px; +} +.charsheet div.row3c3r2 { + display:block; + text-align:center; + background-color:black; + color:white; + border-radius:8px; + border:0 solid #000000; + padding:4px 2px; + height:74px; +} +/* row4 - Weapons */ +.charsheet .weapons { + display: grid; + grid-template-columns: 140px 60px 90px 60px 60px 60px 60px 60px 60px 100px 40px; + grid-template-rows:auto; + border-radius:8px; + border:2px solid #000000; + +} +.charsheet .weapons_tabs { + padding: 1px; + border: 1px solid #ddd; + background-color: white; + text-align: center; + border:1px solid #ddd; +} +.charsheet .weapons_first { + border: 1px solid #ddd; + background-color: white; + color:white; + vertical-align:middle; + border:1px solid #ddd; + text-align: center; + +} + +.charsheet .page2_tabs { + padding: 2px; + border: 1px solid #ddd; + background-color: white; + text-align: left; + vertical-align:middle; + border:1px solid #ddd; +} + +.charsheet .tabs { + border: 1px solid #ddd; + background-color: white; + color: black; +} +.charsheet .tabslab { + padding: 0; + border: 1px solid #ddd; + background-color: white; + color: black; + line-height:2.2; +} + + +.charsheet .weapons_headl { + padding: 2px; + text-align: left; + color: white; +} +.charsheet .weapons_head { + padding: 2px; + text-align: center; + color: white; +} +.charsheet .weapons_effects { + grid-column: 2 / span 10; + grid-row: 3; + padding: 1px; + border: 1px solid #ddd; + background-color: white; + vertical-align:middle; + border:1px solid #ddd; +} + +/* row5 - bottom half */ +.charsheet .grid-container9 { + display: grid; + grid-template-columns:276px 276px 276px; + grid-gap: 10px; + padding: 0; +} +.charsheet .grid-container10 { + display: grid; + grid-template-rows:auto; + grid-gap: 20px; +} +.charsheet .skills { + display: grid; + grid-template-columns: 110px 40px 40px 40px 40px; + border-radius:8px; + border:4px solid #000000; + font-size:0.8em; + font-weight:bold; + text-align:center; + color:white; + background-color:black; +} +.charsheet .skills > div { + padding:0; +} + +.charsheet .skills_head { + padding:2px; + margin:0; + font-size:0.9em; + font-weight:bold; + text-align:center; + color:white; + background-color:black; +} +.charsheet div.total_prof { + grid-column: 1 / span 5; + grid-row: auto; + text-align:right; +} +.charsheet div.total_inv { + grid-column: 1 / span 2; + grid-row: auto; + text-align:right; +} +.charsheet .lift { + display: grid; + grid-template-columns: 90px 85px 90px; + grid-template-rows: auto; + grid-gap: 0; + padding:2px; + margin:15px 0; + border-radius:8px; + border:2px solid #000000; + text-align:center; + color:white; + background-color:black; + height:75px; +} +.charsheet .sidebyside { + display: grid; + grid-template-columns: 140px 120px; + grid-template-rows: auto; + grid-gap: 10px; + text-align:center; + +} +.charsheet .splith { + display: grid; + grid-template-columns: 50px auto; + grid-template-rows: auto; + grid-gap:0; +} +.charsheet .wealth { + margin:0; + background-color:black; + color:white; + border-radius:8px; + border:2px solid #000000; + padding:0; +} + +.charsheet .accolades { + margin:0; + background-color:black; + color:white; + border-radius:8px; + border:2px solid #000000; + padding:0; +} + +.charsheet div.weap_skills { + padding:0 2px; + margin: 2px 2px; + background-color:black; + border-radius:8px; + border:2px solid #000000; + width:260px; + height:155px; +} +.charsheet div.com_skills { + padding:0 2px; + margin: 2px 2px; + background-color:black; + border-radius:8px; + border:2px solid #000000; + width:260px; + height:285px; +} +.charsheet div.prof_skills { + padding:0 2px; + text-align:right; + margin: 2px; + background-color:black; + border-radius:8px; + border:2px solid #000000; + width:260px; + height:470px; +} +.charsheet .inventory { + display: grid; + grid-template-columns: 220px 50px; + grid-gap: 0; + padding:2px; + margin:0; + border-radius:8px; + border:2px solid #000000; + font-size:0.8em; + font-weight:bold; + text-align:center; + color:white; + background-color:black; +} +.charsheet .inventory_head { + padding:2px; + margin:0; + font-size:0.9em; + font-weight:bold; + text-align:center; + color:white; + background-color:black; +} + +.charsheet input.armour { + font-size:1em; + width:40px; +} +.charsheet input.armourr { + font-size:1em; + width:160px; +} + +.charsheet .heading { + display:grid; + grid-template-columns: 150px auto 150px; + grid-gap: 15px; + padding: 0px; + font-size: 0.6em; +} +.charsheet .grid-row2 { + display: grid; + grid-template-columns: 260px 120px 140px 140px 150px; + grid-gap: 10px; + padding: 0; + text-align:center; +} +.charsheet .grid-row2 > div { + padding: 4px; + font-size:0.9em; +} +.charsheet .grid-row3 { + display: grid; + grid-template-columns: 125px 59px 100px 114px 280px 122px; + grid-gap: 10px; + padding: 0; + margin: 6px 0; +} +.charsheet .grid-container2 > div { + padding: 0px 0; +} +.charsheet .grid-container3 { + display: grid; + grid-template-rows: 80px 43px 70px; + grid-gap: 0; + padding: 0; +} + +.charsheet .grid-container4 { + display: grid; + grid-template-rows: 37px 50px; + grid-gap: 0; + padding: 0; +} +.charsheet .grid-container4 > div { + padding: 0px 0; +} +.charsheet .grid-container5 { + display: grid; + grid-template-columns: 77px 102px 90px; + grid-gap: 5px; + padding: 0px; +} +.charsheet .grid-container5 > div { + padding: 0 0; +} +.charsheet .att_grid { + display: grid; + grid-template-columns: 40px 40px 40px; + grid-template-rows: 25px 25px 25px 25px 25px; + gap: 12px 0; + font-weight: bold; + font-size: 1.2em; + vertical-align:middle; +} +.charsheet .item1 { + grid-column: 1; + grid-row: 1; +} +.charsheet .item15 { + grid-column: 3; + grid-row: 5; +} +.charsheet .bonus_grid { + display: grid; + gap: 12px 0; + grid-template-columns: 15px 25px; + grid-template-rows: 25px 25px 25px 25px 25px; + font-weight: bold; + font-size: 1.2em; +} +.charsheet .item5 { + grid-column: 1; + grid-row: 5; +} +.charsheet .shield_att { + display: grid; + color:black; + background-color:white; + grid-template-columns: 51px 45px; + grid-template-rows: 22px 22px 22px; + font-weight: bold; + font-size: 0.8em; +} +.charsheet .item6 { + grid-column: 2; + grid-row: 3; +} +.charsheet .armour_att { + display: grid; + color:black; + background-color:white; + grid-template-columns: 55px 40px auto; + grid-template-rows: 24px 24px 24px 24px; + font-weight: bold; + font-size: 0.8em; +} +.charsheet .item12 { + grid-column: 3; + grid-row: 4; +} + +.charsheet .armour1 { + display: grid; + grid-template-columns: 50px 30px 50px 50px 65px 30px; + grid-template-rows: 45px 30px 30px 22px 22px 22px 22px; + border-radius:8px; + font-size:0.8em; +} + +.charsheet .head_l { + grid-column: 1 / span 3; + grid-row: auto; + padding:2px 12px; + background-color:transparent; + color: white; + font-size:1.2em; +} +.charsheet .head_mid { + grid-column: auto; + grid-row: auto; + padding:0; + background-color:transparent; + color: white; +} +.charsheet .head_r { + grid-column: 5 / span 2; + grid-row: auto; + padding:0; + background-color:transparent; + color: white; + text-align:right; +} +.charsheet .armour_c1 { + grid-column: auto; + grid-row: auto; + padding:5px 2px; + background-color:transparent; + color: white; + text-align:right; + vertical-align:middle; +} +.charsheet .armour_c2 { + grid-column: 4 / span 2; + grid-row: auto; + padding:5px 2px; + background-color:transparent; + color: white; + text-align:right; + vertical-align:middle; +} +.charsheet .armour_i1 { + grid-column: auto; + grid-row: auto; + padding:0; + background-color:transparent; + color: white; + font-size:1.4em; +} +.charsheet .armour_t1 { + padding:2px; + background-color:black; + color: white; + text-align:right; + vertical-align:middle; +} +.charsheet .armour_t2 { + padding:0; + background-color:white; + color: black; + text-align:center; + vertical-align:middle; + border:1px solid #ddd; + +} +.charsheet .armour_t3 { + grid-column: 3 / span 4; + grid-row: auto; + padding:0; + background-color:white; + color: black; + text-align:left; + vertical-align:middle; + border:1px solid #ddd; + +} +.charsheet input.stat7 { + text-align:center; + margin:0; + padding:0; + width:25px; + font-size:1.2em; +} +.charsheet input.stat8 { + text-align:left; + margin:0; + padding:0 3px; + width:180px; +} +.charsheet .subhead1l { + grid-column: 1; + grid-row: 4; + padding: 4px 1px 0 0; + text-align:right; +} +.charsheet .subhead1 { + grid-column: 3; + grid-row: 3 / span 1; + padding: 0; +} +.charsheet .subhead1r { + grid-column: 4; + grid-row: 3 / span 1; + padding: 4px 0 0 0; +} +.charsheet .subhead2r { + grid-column: auto; + grid-row: 4 / span 1; + padding: 4px 0 0 0; +} +.charsheet .subhead2l { + grid-column: auto; + grid-row: 5; + padding: 4px 1px 0 0; + text-align:right; +} +.charsheet .subhead2 { + grid-column: auto; + grid-row: 4 / span 1; + padding: 0; +} +.charsheet .energy1 { + grid-column: 5; + grid-row-start: 2; + grid-row-end: span 3; + background-color:transparent; + width:90px; + margin:0; +} +.charsheet .boxes1 { + grid-column: 1; + grid-row: auto; + padding:0; + color:black; + background-color:white; + border:2px solid #000000; + text-align:right; +} +.charsheet .boxes2 { + grid-column: 2; + grid-row: auto; +} +.charsheet .boxes3 { + grid-column: 3 / span 3; + grid-row: auto; +} +.charsheet div.tbox { + margin: 1px 0 1px 0; +} +.charsheet div.openbox_s { + border:1px solid #000000; + border-style: solid solid none solid; + padding:8px 4px; +} +.charsheet div.openbox_n { + border:1px solid #000000; + padding:8px 4px; + border-style: none solid solid solid; +} +.charsheet div.energy1 { + padding:0; +} + +.charsheet .grid-container6 { + margin: 8px 2px; + background-color:black; + border-radius:8px; + border:2px solid #000000; + display: grid; + grid-template-columns: 45px auto; + grid-gap: 0; +} +.charsheet .grid-container6 > div { + padding: 2px; + font-size:0.8em; +} +.charsheet .grid-container7 { + display: grid; + grid-template-rows: 40px 50px; + grid-gap: 0px; + padding: 0px; +} +.charsheet .grid-container7 > div { + padding: 0px 0; +} +.charsheet .hitpoints { + display: grid; + grid-template-rows: 66px 34px 50px; + grid-gap: 0px; + padding:0; + background-color:transparent; + color: white; +} +.charsheet .hitpoints_c1 { + grid-column: auto; + grid-row: auto; + padding:5px 0; + background-color:transparent; + font-size:1.2em + color: white; + text-align:left; + line-height:2.2; +} +.charsheet .grid-container11 { + display: grid; + grid-template-rows: 190px 550px; + grid-gap: 15px; + padding: 0px; +} +.charsheet .grid-container12 { + display: grid; + grid-template-columns: 84px 89px 84px; + grid-gap: 0px; + padding: 1px; +} +.charsheet .grid-container12 > div { + padding: 0px 0; +} +.charsheet .grid-container13 { + display: grid; + grid-template-columns: 160px 120px; + grid-gap: 0px; + padding: 1px; +} +.charsheet .grid-container13 > div { + padding: 0px 0; +} +.charsheet .grid-container21 { + display: grid; + grid-template-rows:auto; + grid-gap: 20px; +} +.charsheet .grid-container22 { + display: grid; + grid-template-columns:570px auto; + grid-gap: 5px; + padding: 2px; + margin: 6px 0; +} +.charsheet .grid-container23 { + display: grid; + grid-template-rows: auto; + grid-gap: 20px; + padding: 0px; +} + +.charsheet .species { + margin: 2px 2px; + background-color:black; + color:white; + border-radius:8px; + border:4px solid #000000; +} +.charsheet .traits { + display: grid; + grid-template-columns: 130px 130px 110px 140px; + grid-template-rows:auto; + padding:4px 0; + grid-gap:4px; + font-weight:bold; + text-align:right; +} +.charsheet .traits_span3 { + grid-column: 3 / span 2; + grid-row: auto; +} + + +.charsheet .bgevents { + padding:4px 0 0 0; + margin: 2px 2px; + background-color:black; + color:white; + border-radius:8px; + border:4px solid #000000; +} +.charsheet .contacts { + padding:4px 0 0 0; + background-color:black; + color:white; + border-radius:8px; + border:4px solid #000000; +} +.charsheet .portrait { + margin: 4px 16px; + background-color:#ccc; + border:4px solid #000000; + height:430px; +} +/*Manoevres*/ +.charsheet .manoevres { + display: grid; + grid-template-columns: 150px 80px 40px 40px 40px 40px auto; + grid-template-rows:auto; + font-weight:bold; + font-size:0.9em; + background-color:black; + color:white; + border-radius:8px; + border:4px solid #000000; +} +.charsheet .manoevres_tabs { + padding: 1px; + border: 1px solid #ddd; + background-color: white; + color:black; + text-align: left; + vertical-align:middle; + border:1px solid #ddd; +} +.charsheet .manoevres_head { + padding: 2px 4px; + text-align: left; + color: white; + font-size:0.8em; +} +/*Enhancements*/ +.charsheet .enhancements { + display: grid; + grid-template-columns: 150px 100px 550px 50px; + grid-template-rows:auto; + border-radius:8px; + font-weight:bold; + font-size:0.9em; + background-color:black; + color:white; + border-radius:8px; + border:4px solid #000000; + line-height:1.8; +} +.charsheet .enhancements_tabs { + padding: 1px; + border: 1px solid #ddd; + background-color: white; + color:black; + text-align: left; + vertical-align:middle; + border:1px solid #ddd; +} +.charsheet .enhancements_head { + padding: 6px 4px; + text-align: left; + color: white; + line-height:2.2; + font-size:0.8em; +} +.charsheet .talents { + display: grid; + grid-template-columns: 120px auto; + grid-template-rows:auto; + border-radius:8px; + font-weight:bold; + font-size:0.9em; + background-color:black; + color:white; + border-radius:8px; + border:4px solid #000000; + margin: 8px 0; +} +.charsheet .talents_tabs { + padding: 1px; + border: 1px solid #ddd; + background-color: white; + color:black; + text-align: left; + vertical-align:middle; + border:1px solid #ddd; +} +.charsheet .talents_head { + padding: 2px; + text-align: left; + color: white; + font-size:0.8em; +} +.charsheet .upgrades { + display: grid; + grid-template-columns: 200px 100px auto; + grid-template-rows:auto; + border-radius:8px; + font-weight:bold; + font-size:0.9em; + background-color:black; + color:white; + border-radius:8px; + border:4px solid #000000; + margin: 8px 0; + +} +.charsheet .upgrades_tabs { + padding: 1px; + border: 1px solid #ddd; + background-color: white; + color:black; + text-align: left; + vertical-align:middle; + border:1px solid #ddd; +} +.charsheet .upgrades_head { + padding: 2px; + text-align: left; + color: white; +} + + +.charsheet .psi { + text-align: justify; + padding:4px 2px 0 2px; + margin: 2px 2px; + background-color:black; + color:white; + font-weight:bold; + font-size:0.9em; + border-radius:8px; + border:4px solid #000000; + height:30px; + margin: 8px 0; +} + +.charsheet .psychic { + display: grid; + grid-template-columns: 160px 50px 50px 50px 50px auto; + grid-template-rows:auto; + font-size:0.9em; + font-weight:bold; + background-color:black; + border-radius:8px; + border:4px solid #000000; + margin: 6px 0; + +} +.charsheet .psychic_tabs { + padding: 1px; + border: 1px solid #ddd; + background-color: white; + text-align: center; +} + +.charsheet .psychic_first { + padding: 2px; + text-align: left; + color: white; + width: 150px; +} +.charsheet .psychic_head { + padding: 2px; + text-align: center; + color: white; +} +.charsheet .psychic_effects { + grid-column: 2 / span 5; + grid-row: 3; + padding: 1px; + border: 1px solid #ddd; + background-color: white; + vertical-align:middle; + border:1px solid #ddd; +} + +/*Configure the tab buttons*/ +.charsheet div.sheet-skills, +.charsheet div.sheet-manoevres, +.charsheet div.sheet-talents, +.charsheet div.sheet-upgrades, +.charsheet div.sheet-psi { + display: none; +} + +/* show the selected sheet */ +.charsheet input.tabstoggle[value="skills"] ~ div.sheet-skills, +.charsheet input.tabstoggle[value="manoevres"] ~ div.sheet-manoevres, +.charsheet input.tabstoggle[value="talents"] ~ div.sheet-talents, +.charsheet input.tabstoggle[value="upgrades"] ~ div.sheet-upgrades, +.charsheet input.tabstoggle[value="psi"] ~ div.sheet-psi { + display: block; +} + diff --git a/SabreRPG/sabre_rpg.html b/SabreRPG/sabre_rpg.html new file mode 100644 index 000000000000..9b2164bb6722 --- /dev/null +++ b/SabreRPG/sabre_rpg.html @@ -0,0 +1,3789 @@ + + +
+ +