diff --git a/OverArms/overarms.css b/OverArms/overarms.css new file mode 100644 index 0000000000..434f59e9b2 --- /dev/null +++ b/OverArms/overarms.css @@ -0,0 +1,429 @@ +.sheet-container { + width: 832px; + position: relative; +} + +.sheet-sepia { + height: 1050px; + width: 100%; + position: absolute; + z-index: -1; + background: url("https://i.imgur.com/7FGLBZw.jpg"); + background-size: 100% 100%; + filter: sepia(100%) brightness(120%); + opacity: 0.8; +} + +.sheet-logo { + background: url("https://i.imgur.com/ZmcT0OY.png"); + background-size: 100% 100%; + height: 155px; + width: 400px; + margin-left: 15px; +} + +@import url("https://fonts.googleapis.com/css?family=Architects+Daughter|Dosis|Roboto|Work+Sans:900&display=swap"); + +/* General Styling */ + +.sheet-hidden { + display: none; +} + +.sheet-column { + padding-top: 25px; + display: inline-block; + vertical-align: top; +} + +.sheet-left-column { + width: 450px; +} + +.sheet-right-column { + width: 378px; +} + +/* Tab Styling */ + +input[type="radio"].sheet-tab { + opacity: 0; + position: absolute; + z-index: 2; + height: 20px; +} + +input[type="radio"].sheet-tab + span { + position: absolute; + border: 1px solid black; + border-radius: 5px; + background-color: #e8e8e8; + color: black; + text-align: center; + font-weight: bold; +} + +input[type="radio"].sheet-tab:checked + span { + color: #ffffff; + background-color: #2a2d80; +} + +input[type="radio"].sheet-tab.sheet-editing, +input[type="radio"].sheet-tab.sheet-editing + span { + top: 0px; + left: 81px; + width: 75px; +} + +input[type="radio"].sheet-tab.sheet-playing, +input[type="radio"].sheet-tab.sheet-playing + span { + top: 0px; + left: 0px; + width: 75px; +} + +/* Edit Mode Styling */ +input[type="radio"].sheet-editing:checked ~ .sheet-column input, +input[type="radio"].sheet-editing:checked ~ .sheet-column select, +input[type="radio"].sheet-editing:checked ~ .sheet-column textarea { + background-color: rgb(255, 255, 0, 0.2); +} + +input[type="radio"].sheet-playing:checked ~ .sheet-column input:not(.sheet-toggle):not(.sheet-always-active), +input[type="radio"].sheet-playing:checked ~ .sheet-column select:not(.sheet-always-active), +input[type="radio"].sheet-playing:checked ~ .sheet-column textarea:not(.sheet-always-active) { + pointer-events: none; +} + +input[type="radio"].sheet-playing:checked ~ .sheet-column .repcontrol, +input[type="radio"].sheet-editing:checked ~ .sheet-column input[type="radio"]:not(.sheet-balance), +input[type="radio"].sheet-playing:checked ~ .sheet-edit, +input[type="radio"].sheet-editing:checked ~ .sheet-play, +input[type="radio"].sheet-playing:checked ~ .sheet-column .sheet-edit, +input[type="radio"].sheet-editing:checked ~ .sheet-column .sheet-play { + display: none; +} + +/* RIGHT COLUMN STYLING */ +.sheet-info-container { + display: block; + box-sizing: border-box; + width: calc(100% + 3px); + background: white; + background-clip: padding-box !important; + border-radius: 25px 0px 0px 25px; + border: solid 3px transparent !important; + position: relative; + margin-bottom: 10px; + padding-top: 5px; + padding-bottom: 5px; +} + +.sheet-info-container:before { + content: ''; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + z-index: -1; + margin: -3px !important; + border-radius: inherit; + background: linear-gradient(to right, gold, transparent); +} + +.sheet-info-container .sheet-edit, +.sheet-info-container .sheet-play { + display: inline-block; +} + +.sheet-info-container.sheet-large_spacing { + margin-bottom: 20px; +} + +.sheet-blue-label { + color: darkblue; + vertical-align: middle; + font-size: 20px; + margin-left: 15px; + font-family: "Dosis"; +} + +.sheet-handwritten { + font-family: "Architects Daughter"; + vertical-align: middle; + font-size: 20px; + margin-left: 15px; +} + +.sheet-gold { + display: block; + border-bottom: 2px solid gold; + width: calc(100% - 15px); + margin-left: 15px; + margin-bottom: 15px; +} + +.sheet-gold .sheet-blue-label { + margin-left: 0px; +} + +.sheet-gold:first-of-type { + margin-top: 10px; +} + +.sheet-super-bold { + font-weight: 900; + font-size: 20px; + font-family: "Work Sans"; + color: gold; + vertical-align: bottom; + margin-right: 10px; +} + +.sheet-info .sheet-edit, +.sheet-info .sheet-play { + display: block; +} + +.sheet-info .sheet-play, +.sheet-info input +{ + margin-left: 15px; +} + +textarea { + width: calc(100% - 30px); + resize: vertical; + height: 250px; + margin-left: 15px; +} + +.sheet-character-name input { + width: 200px; +} + +.sheet-anima-type select { + margin: 0px; +} + +/* LEFT COLUMN STYLING */ + +.sheet-star-five { + margin: 50px 0; + position: relative; + display: block; + color: gold; + width: 0px; + height: 0px; + border-right: 100px solid transparent; + border-bottom: 70px solid gold; + border-left: 100px solid transparent; + transform: rotate(35deg); + opacity: 0.9; +} +.sheet-star-five:before { + border-bottom: 80px solid gold; + border-left: 30px solid transparent; + border-right: 30px solid transparent; + position: absolute; + height: 0; + width: 0; + top: -45px; + left: -65px; + display: block; + content: ''; + transform: rotate(-35deg); +} +.sheet-star-five:after { + position: absolute; + display: block; + color: gold; + top: 3px; + left: -105px; + width: 0px; + height: 0px; + border-right: 100px solid transparent; + border-bottom: 70px solid gold; + border-left: 100px solid transparent; + transform: rotate(-70deg); + content: ''; +} + +/* .sheet-star-outline > .sheet-star-five, +.sheet-star-outline > .sheet-star-five:before, +.sheet-star-outline > .sheet-star-five:after { + border-bottom-color: black; +} */ + +.sheet-star-outline { + position: absolute; + transform: scale(1.3) rotate(3deg); + top: 70px; + left: 120px; +} + +.sheet-attribute-text { + font-size: 18px; + font-family: "Work Sans"; + font-weight: 900; + color: white; + text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000; + -webkit-font-smoothing: antialiased; +} + +.sheet-attribute-container { + width: 70px; + position: absolute; +} + +.sheet-attribute-container .sheet-edit select { + width: 52px; +} + +input[type="radio"].sheet-editing:checked ~ .sheet-column .sheet-attribute-container select { + background-color: rgb(255, 255, 0, 0.8); +} + +.sheet-star { + position: relative; + height: 300px; +} + +.sheet-hp, +.sheet-ap +{ + top: 10px; + left: 205px; +} + +.sheet-int, +.sheet-rng +{ + top: 107px; + left: 355px; + } + +.sheet-str, +.sheet-pwr +{ + top: 273px; + left: 288px; +} + +.sheet-cha, +.sheet-def +{ + top: 264px; + left: 95px; +} + +.sheet-spd, +.sheet-dex +{ + top: 93px; + left: 46px; +} + +.sheet-top-star { + z-index: 2; +} + +button[type="roll"] { + background: none; + border: none; + padding: 0px; + font-size: inherit; + margin: 0px; + -webkit-box-shadow: none; + box-shadow: none; +} + +button[type="roll"]::before { + content: "" !important; +} + +.sheet-junction-container { + border-radius: 0px 25px 25px 0px; + margin-top: 25px; + margin-left: -5px; + width: 400px; + text-align: right; +} + +.sheet-junction-container:before { + background: linear-gradient(to right, transparent, gold); +} + +.sheet-junction-container .sheet-blue-label { + margin-right: 15px; +} + +.sheet-junction-container select { + width: 60px; +} + +.sheet-junction-container button[type="roll"]::before { + content: "t" !important; + font-size: 30px; + color: darkblue; +} + +/* ROLL TEMPLATE STYLING */ + +.sheet-rolltemplate-container { + display: block; + box-sizing: border-box; + width: calc(100% + 8px); + background: white; + background-clip: padding-box !important; + border-radius: 25px 0px 0px 25px; + border: solid 3px transparent !important; + position: relative; + margin-bottom: 10px; + padding-top: 5px; + padding-bottom: 5px; + /* z-index: 1; */ + transform-style: preserve-3d; +} + +.sheet-rolltemplate-container:before { + content: ''; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + /* z-index: 0; */ + margin: -3px !important; + border-radius: inherit; + background: linear-gradient(to right, gold, transparent); + transform: translateZ(-1px); +} + +.sheet-rolltemplate-container .sheet-attribute-text { + font-size: 18px; + font-family: "Work Sans"; + font-weight: 900; + color: white; + text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000; + -webkit-font-smoothing: antialiased; + margin-left: 15px; +} + +.sheet-rolltemplate-container .sheet-handwritten { + font-family: "Architects Daughter"; + font-size: 17px; + display: block; + margin-left: 15px; +} + +.sheet-rolltemplate-container .sheet-result { + font-family: "Architects Daughter"; + display: inline-block; + font-size: 25px; +} + +.sheet-rolltemplate-container .sheet-result .inlinerollresult { + border: none; + background-color: transparent; +} + +.sheet-rolltemplate-container .sheet-small-star { + color: gold; + margin-left: 5px; +} \ No newline at end of file diff --git a/OverArms/overarms.html b/OverArms/overarms.html new file mode 100644 index 0000000000..14344528ed --- /dev/null +++ b/OverArms/overarms.html @@ -0,0 +1,410 @@ +
+ +
+ + + Edit Mode + + Play Mode + + +
+
+
+ +
+
+
+ HP + +
+
+ HP + +
+ +
+
+
+
+ INT + +
+
+ +
+
+
+
+ STR + +
+
+ +
+
+
+
+ CHA + +
+
+ +
+
+
+
+ DEX + +
+
+ +
+
+
+
+
+ +
+
+
+ AP + +
+
+ AP + +
+ +
+
+
+
+ RNG + +
+
+ +
+
+
+
+ PWR + +
+
+ +
+
+
+
+ DEF + +
+
+ +
+
+
+
+ SPD + +
+
+ +
+
+
+
+ JUNCTION +
+ + + + + +
+
+ +
+ + +
+
+
+ LEVEL +
+ +
+
+ +
+
+
+ CHARACTER NAME +
+ +
+
+ +
+
+
+ ANIMA NAME +
+ +
+
+ +
+
+
+ ANIMA TYPE +
+ +
+
+ +
+
+
+
+ ABILITIES +
+ 1 +
+ +
+
+ +
+
+
+ 2 +
+ +
+
+ +
+
+
+ 3 +
+ +
+
+ +
+
+
+
+
+ VIRTUE +
+ +
+
+ +
+
+
+ VICE +
+ +
+
+ +
+
+
+ DRIVE +
+ +
+
+ +
+
+
+
+ BIO + APPEARANCE + INVENTORY +
+ +
+
+ +
+ STATUS + MONEY +
+ +
+
+ +
+
+
+
+ + + + + +
+ {{attribute}} {{die}} + ★ +
{{result}}
+ {{charname}} +
+ + + +
+ {{attribute1}} {{die1}} + {{attribute2}} {{die2}} + ★ +
{{result}}
+ {{charname}} +
+ + + + diff --git a/OverArms/overarms.jpg b/OverArms/overarms.jpg new file mode 100644 index 0000000000..ab55ae4792 Binary files /dev/null and b/OverArms/overarms.jpg differ diff --git a/OverArms/sheet.json b/OverArms/sheet.json new file mode 100644 index 0000000000..95667caf8e --- /dev/null +++ b/OverArms/sheet.json @@ -0,0 +1,8 @@ +{ + "html": "overarms.html", + "css": "overarms.css", + "authors": "Steve K.", + "roll20userid": "5047", + "preview": "overarms.jpg", + "instructions": "Over Arms by Rookie Jet Studios. Over Arms is a rules-light Tabletop Role Playing Game designed for people familiar with series like JoJo’s Bizarre Adventure, Persona, Fate, Shaman King, etc. This game aims to recreate the themes, mechanics, and powers as seen in these kind of media." +}