diff --git a/Outgunned Superheroes/Diceface1.png b/Outgunned Superheroes/Diceface1.png new file mode 100644 index 0000000000..159b611f5f Binary files /dev/null and b/Outgunned Superheroes/Diceface1.png differ diff --git a/Outgunned Superheroes/Diceface2.png b/Outgunned Superheroes/Diceface2.png new file mode 100644 index 0000000000..c5e61f13b2 Binary files /dev/null and b/Outgunned Superheroes/Diceface2.png differ diff --git a/Outgunned Superheroes/Diceface3.png b/Outgunned Superheroes/Diceface3.png new file mode 100644 index 0000000000..9b1075b480 Binary files /dev/null and b/Outgunned Superheroes/Diceface3.png differ diff --git a/Outgunned Superheroes/Diceface4.png b/Outgunned Superheroes/Diceface4.png new file mode 100644 index 0000000000..af9880d8a5 Binary files /dev/null and b/Outgunned Superheroes/Diceface4.png differ diff --git a/Outgunned Superheroes/Diceface5.png b/Outgunned Superheroes/Diceface5.png new file mode 100644 index 0000000000..a02fa7276f Binary files /dev/null and b/Outgunned Superheroes/Diceface5.png differ diff --git a/Outgunned Superheroes/Diceface6.png b/Outgunned Superheroes/Diceface6.png new file mode 100644 index 0000000000..18cd1e239f Binary files /dev/null and b/Outgunned Superheroes/Diceface6.png differ diff --git a/Outgunned Superheroes/DicerollerBG.png b/Outgunned Superheroes/DicerollerBG.png new file mode 100644 index 0000000000..ab4e972179 Binary files /dev/null and b/Outgunned Superheroes/DicerollerBG.png differ diff --git a/Outgunned Superheroes/OGSBackground.jpg b/Outgunned Superheroes/OGSBackground.jpg new file mode 100644 index 0000000000..1584508503 Binary files /dev/null and b/Outgunned Superheroes/OGSBackground.jpg differ diff --git a/Outgunned Superheroes/OGSDetails.png b/Outgunned Superheroes/OGSDetails.png new file mode 100644 index 0000000000..83d6e57b76 Binary files /dev/null and b/Outgunned Superheroes/OGSDetails.png differ diff --git a/Outgunned Superheroes/OGSHeat.png b/Outgunned Superheroes/OGSHeat.png new file mode 100644 index 0000000000..d43e469f35 Binary files /dev/null and b/Outgunned Superheroes/OGSHeat.png differ diff --git a/Outgunned Superheroes/OGSLogo.png b/Outgunned Superheroes/OGSLogo.png new file mode 100644 index 0000000000..14866a68ec Binary files /dev/null and b/Outgunned Superheroes/OGSLogo.png differ diff --git a/Outgunned Superheroes/OGSPower.png b/Outgunned Superheroes/OGSPower.png new file mode 100644 index 0000000000..89e9c64892 Binary files /dev/null and b/Outgunned Superheroes/OGSPower.png differ diff --git a/Outgunned Superheroes/OGSPowerIcon.png b/Outgunned Superheroes/OGSPowerIcon.png new file mode 100644 index 0000000000..5838291d21 Binary files /dev/null and b/Outgunned Superheroes/OGSPowerIcon.png differ diff --git a/Outgunned Superheroes/OGSPowerTier.png b/Outgunned Superheroes/OGSPowerTier.png new file mode 100644 index 0000000000..a03d2a3762 Binary files /dev/null and b/Outgunned Superheroes/OGSPowerTier.png differ diff --git a/Outgunned Superheroes/OGSPowerless.png b/Outgunned Superheroes/OGSPowerless.png new file mode 100644 index 0000000000..e849c6c51a Binary files /dev/null and b/Outgunned Superheroes/OGSPowerless.png differ diff --git a/Outgunned Superheroes/OGSSpotlight.png b/Outgunned Superheroes/OGSSpotlight.png new file mode 100644 index 0000000000..55175f4b5a Binary files /dev/null and b/Outgunned Superheroes/OGSSpotlight.png differ diff --git a/Outgunned Superheroes/Outgunned Superheroes.css b/Outgunned Superheroes/Outgunned Superheroes.css new file mode 100644 index 0000000000..c540256d2b --- /dev/null +++ b/Outgunned Superheroes/Outgunned Superheroes.css @@ -0,0 +1,1378 @@ +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap'); + +.charsheet, +.sheet-rolltemplate-diceroller { + --primary-color: #2a4a83; + font-family: "Oswald", serif; + font-style: italic; +} + +.charsheet { + min-width: 830px; +} + +/* Setting up character and opponent tabbed panes */ +.outgunned-tab-select:has(#outgunned-character:checked) ~ .outgunned-team, +.outgunned-tab-select:has(#outgunned-character:checked) ~ .outgunned-villain, +.outgunned-tab-select:has(#outgunned-team:checked) ~ .outgunned-character, +.outgunned-tab-select:has(#outgunned-team:checked) ~ .outgunned-villain, +.outgunned-tab-select:has(#outgunned-villain:checked) ~ .outgunned-character, +.outgunned-tab-select:has(#outgunned-villain:checked) ~ .outgunned-team { + display: none; +} + +#outgunned-character:checked + label, +#outgunned-team:checked + label, +#outgunned-villain:checked + label { + color: var(--primary-color); +} + +.outgunned-tab-select { + display: grid; + grid-template-columns: 1fr 0.1fr 1fr 0.1fr 1fr; + margin-top: 3px; + width: 830px; +} + +.outgunned-tab-select label { + width: auto !important; +} + +.outgunned-tab-select > input { + display: none; +} + +.outgunned-tab-select > label { + text-align: center; + font-optical-sizing: auto; + font-size: 22px; + color: lightgray; + font-weight: normal; + border: solid 1px black; + border-radius: 3px; + padding: 5px; + margin-bottom: 6px; + width: 380px; +} + +.outgunned-nodisplay { + display: none; +} + +input[type="checkbox"] { + accent-color: var(--primary-color); +} + +.outgunned-nodisplay { + display: none !important; +} + +.outgunned-adrenalin { + color: transparent !important; + text-shadow: 0 0 0 var(--primary-color); +} + +.outgunned-dice-roller { + text-align: center; + margin-top: 5px; + margin-bottom: 5px; +} + +.outgunned-dice-roller button { + color: var(--primary-color); +} + +.outgunned-main-grid { + display: grid; + grid-template-areas: + "avatar tooltips tooltips" + "avatar-details avatar-details avatar-details" + "statistics grit grit" + "statistics adrenaline feats" + "statistics spotlight feats" + "statistics superpower feats" + "youlook youlook mission" + "gunsngear gunsngear gunsngear" + "cashstorageride cashstorageride cashstorageride" + "notes notes notes"; + grid-template-columns: fit-content(275px) fit-content(250px) 1fr; + grid-template-rows: 20px; + background-image: url(https://files.d20.io/images/479613168/2_z1rlpXJcHAvFeweuzGGg/max.jpg); + background-size: cover; + min-width: 830px; +} + +.outgunned-box { + border: 2px solid var(--primary-color); +} + +.outgunned-tooltips { + height: fit-content; + display: block !important; +} + +.outgunned-tooltips > span { + display: flex; + margin-top: 3px; + color: var(--primary-color); + font-size: 12px; + font-weight: bold; +} + +.outgunned-tooltips > span > input { + margin-left: 3px; + accent-color: var(--primary-color); +} + +.outgunned-avatar-details { + grid-area: avatar-details; + display: flex; + background-image: url(https://files.d20.io/images/479614272/O2XTHFfkstDmAP8__vH4ww/max.png); + background-size: 100% 100%; + padding-bottom: 30px; +} + +.outgunned-avatar { + width: 30%; + border: 0; + margin-top: 50px; + margin-left: 22px; +} + +.outgunned-avatar > div { + text-align: center; +} + +.outgunned-avatar > .outgunned-avatar-bg { + background-color: black; + clip-path: polygon( + 0% 0%, + 100% 0%, + 100% 50%, + 95% 55%, + 95% 100%, + 0% 100% + ); + margin: 5px; +} + +.outgunned-avatar > .outgunned-avatar-bg > img:first-child { + margin: 2px; + width: -webkit-fill-available; + clip-path: polygon( + 0% 0%, + 100% 0%, + 100% 50%, + 95% 55%, + 95% 100%, + 0% 100% + ); + background-color: white; +} + +.outgunned-details { + width: 60%; + display: grid; + grid-template-columns: 1fr; + margin-top: 20px; +} + +.outgunned-details > div, +.outgunned-mission > div:first-of-type, +.outgunned-ride > div:first-of-type { + border-bottom: 2px solid var(--primary-color); + display: flex; + align-items: end; +} + +.outgunned-details > div > span, +.outgunned-mission > div:first-of-type > span, +.outgunned-team-names span, +.outgunned-team-heroes span { + color: var(--primary-color); + font-size: 12px; + font-weight: bold; + align-content: end; + margin-left: 5px; + padding-right: 10px; + width: 22%; +} + +.outgunned-details > div > span.outgunned-job-label, +.outgunned-details > div > span.outgunned-background-label { + width: 52%; +} + +.outgunned-details > div > input, +.outgunned-mission > div > input { + border: 0; + background-color: white; + /* height: 20px !important;*/ + width: 100% !important; + margin-top: 4px; + border-radius: 0; + margin-bottom: 1px; + padding: 4px; + outline-color: var(--primary-color); + color: black; + padding-left: 10px; + font-size: 16px; +} + +.outgunned-statistics { + grid-area: statistics; + margin-top: -10px; + max-width: 275px; + min-width: 275px; +} + +.outgunned-statistics-block { +/* margin-top: 30px;*/ +} + +.outgunned-statistics-block > div:first-child > span:first-child > span:first-child { + color: white; + background-color: var(--primary-color); + font-weight: bold; + font-size: 20px; + clip-path: polygon( + 0% 0%, + 15px 10px, + 100% 10px, + 95% 50%, + 100% 100%, + 0% 100% + ); + fill: none; + padding-left: 20px; + padding-right: 5px; + display: inline-block; + margin: 5px; + width: 80px; + text-align: right; + position: relative; + height: 40px; + align-content: end; + padding-right: 15px; +} + +.outgunned-statistics-block > div:not(:first-child) { + margin-left: 90px; + text-align: right; +} + +.outgunned-statistics-block > div:not(:first-child) > span { + display: inline-block; + color: black; + font-weight: bold; + width: 100px; + font-size: 15px; +} + +.outgunned-statistics-block > div > input { + margin-bottom: 5px; +} + +.outgunned-statistics-block > div { + display: inline-flex; +} + +.outgunned-statistics-block > div > div { + display: inline-flex; + margin-top: -12px; +} + +.outgunned-statistics-block > div > div > input.outgunned-attr[type="checkbox"] + span::before { + color: black; +} + +.outgunned-centre-checkbox { + margin-left: -5px !important; + display: inline-grid; + width: 16px; + min-width: 16px; + max-width: 16px; + height: 35px; +} + +input.outgunned-attr[type="checkbox"] { + opacity: 0; + position: relative; + left: 15px; + top: 15px; + cursor: pointer; + z-index: 1; + width: 15px; + margin-left: -8px !important; + height: 16px; +} + +input.outgunned-attr[type="checkbox"] + span::before { + position: relative; + top: 0px; + color: var(--primary-color); + text-shadow: none; + text-align: center; + content: "◇"; + font-size: 30px;; + box-shadow: none; + font-style: normal; +} + +input.outgunned-attr[type="checkbox"]:checked + span::before { + content: "◆"; + font-size: 29px; + font-style: normal; +} + +/* Grit images*/ +/* +Normal https://files.d20.io/images/447651817/TVo4h0DUk4FU-nMJLT-P5g/original.png +Bad https://files.d20.io/images/447651818/svVo0FS3eklsdKRtdgYG2A/original.png +Hot https://files.d20.io/images/447651819/0rnMk29Fz6xii0iJLDHeZg/original.png +*/ + +.outgunned-grit { + grid-area: grit; + margin-top: 30px; + margin-left: 20px; + color: var(--primary-color); + font-weight: bold; + font-size: 20px; + border: 1px solid var(--primary-color); + padding: 3px; + min-width: 525px; +} + +.outgunned-grit > div:first-of-type { + display: grid; + grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px; + grid-template-rows: 60px; +} + +.outgunned-gritnormal { + display: block; + background-image: url(https://files.d20.io/images/447651817/TVo4h0DUk4FU-nMJLT-P5g/original.png); + background-repeat: no-repeat; + background-size: 40px; + filter: hue-rotate(-130deg); +} + +.outgunned-gritnormal input { + filter: hue-rotate(135deg); +} + +.outgunned-gritbad { + display: block; + background-image: url(https://files.d20.io/images/447651819/0rnMk29Fz6xii0iJLDHeZg/original.png); + background-repeat: no-repeat; + background-size: 40px; +} + +.outgunned-gritpower { + display: block; + background-image: url(https://files.d20.io/images/479620848/uQEBPRvRAlprO2NtviIOfA/original.png); + background-repeat: no-repeat; + background-size: 45px; + margin-top: 5px; +} + +.outgunned-gritpower > input { + margin-top: 10px !important; + margin-left: 16.5px !important; +} + +.outgunned-gritpower > span { + color: #c56c28 !important; +} + +.outgunned-grit > div > span > input { + margin-top: 21px; + margin-left: 14px; + transform: scale(1.9); + clip-path: circle(42% at 50% 50%); +} + +.outgunned-grit > div > span > span:first-of-type { + color: black; + font-size: 12px; + font-weight: bold; + display: flex; + justify-content: center; + margin-top: 10px; +} + +.outgunned-grit > div > span:nth-of-type(12) > span:first-of-type { + color: var(--primary-color); +} + +.outgunned-grit > div:nth-of-type(2) { + display: grid; + +} + +.outgunned-grit-hot { + border: 2px solid var(--primary-color) !important; +} + +.outgunned-grit-text { + color: black; + font-size: 12px; + font-weight: bold; +} + +.outgunned-grit-text-power { + color: #c56c28; + font-size: 12px; + font-weight: bold; + margin-bottom: 5px; +} + +.outgunned-feats { + grid-area: feats; + margin-left: 10px; + border: 1px solid var(--primary-color); + padding: 3px; + margin-top: 15px; +} + +.outgunned-feats > span, +.outgunned-superpower > span, +.outgunned-team-heroes > span:first-of-type, +.outgunned-team-powertier > span:first-of-type { + display: block; + border: 0 !important; + width: 95%; + text-align: right; + margin-right: 10px; + font-weight: bold; + font-size: 20px; + color: var(--primary-color); +} + +.outgunned-feats > div { + width: 100%; +} + +.outgunned-feats input, +.outgunned-superpower input { + width: 99.5%; + background-color: white; + font-weight: bold; +} + +.outgunned-feats textarea, +.outgunned-superpower textarea { + width: calc(100% - 11px); + height: fit-content; + height: + resize: vertical; + background-color: white; + field-sizing: content; +} + +.outgunned-spotlight { + grid-area: spotlight; + text-align: center; + position: relative; + margin-top: 15px; + max-width: 245px; + min-width: 245px; +} + +/* Undo the radial filter we use for the image colour shift for the label */ +.outgunned-spotlight span, +.outgunned-superpower span { + color: var(--primary-color); + font-weight: bold; + font-size: 20px; +} + +.outgunned-spotlight span:nth-of-type(2) { + font-size: 12px; +} + +.outgunned-spotlight > img { + width: 80%; + margin-top: 10px; +} + +.outgunned-spotlight > input { + position: absolute; + transform: scale(1.6); + clip-path: circle(40% at 50% 50%); +} + +.outgunned-spotlight > input:first-of-type { + left: 146.5px; + top: 109.5px; +} + +.outgunned-spotlight input:nth-of-type(2) { + left: 172.5px; + top: 109.5px; +} + +.outgunned-spotlight input:nth-of-type(3) { + left: 198.5px; + top: 109.5px; +} + +.outgunned-spotlight-image.outgunned-nodisplay ~ input[type="checkbox"] { + filter: hue-rotate(-45deg); +} + +/* +Icon: https://files.d20.io/images/447657537/-fY4DtclMXmG0gV4_khZDA/original.png +*/ +.outgunned-power { + grid-area: adrenaline; + text-align: center; + margin-top: 20px; + max-width: 245px; + min-width: 245px; +} + +.outgunned-power > div:first-of-type { + display: grid; + grid-template-columns: 40px 40px 40px 40px 40px 40px; + grid-template-rows: 20px 60px; + justify-items: center; +} + +.outgunned-power input { + margin-bottom: -100px; + width: 16px; +} + +.outgunned-power-icon1, +.outgunned-power-icon2, +.outgunned-power-icon3, +.outgunned-power-icon4, +.outgunned-power-icon5, +.outgunned-power-icon6 { + display: block; + background-image: url(https://files.d20.io/images/479623403/jXTqWcNG_CyCobBww9oPXg/original.png); + background-repeat: no-repeat; + background-size: 40px; + height: 40px; + width: 40px; + margin-top: -15px; +} + +.outgunned-power-check1:checked ~ .outgunned-power-icon1, +.outgunned-power-check2:checked ~ .outgunned-power-icon2, +.outgunned-power-check3:checked ~ .outgunned-power-icon3, +.outgunned-power-check4:checked ~ .outgunned-power-icon4, +.outgunned-power-check5:checked ~ .outgunned-power-icon5, +.outgunned-power-check6:checked ~ .outgunned-power-icon6 { +/* background-image: url(https://files.d20.io/images/447912548/EWIH5QgtpBdcnE7TEMhupw/original.png);*/ + filter: hue-rotate(135deg) saturate(10); +} + +.outgunned-power > span { + font-size: 20px; + font-weight: bold; + color: var(--primary-color); +} + +.outgunned-power > span:nth-of-type(3) { + font-size: 12px; + font-weight: bold; + color: var(--primary-color); +} + +.outgunned-mission { + grid-area: mission; + margin-left: 10px; + border: 1px solid var(--primary-color); + padding: 3px; + margin-top: 5px; +} + +.outgunned-mission > div > span { + margin-top: 30px; + color: var(--primary-color); + font-weight: bold; + font-size: 20px; +} + +.outgunned-mission > div:nth-of-type(2) { + text-align: center; +} + +.outgunned-mission > div:nth-of-type(2) > span { + display: inline-block; +} + +.outgunned-mission > div:nth-of-type(2) > input { + border-bottom: 2px solid var(--primary-color); +} + +.outgunned-mission > div:nth-of-type(2) > span:nth-of-type(2) { + color: black; + font-weight: bold; + font-size: 10px; + margin-top: 10px; +} + +.outgunned-youlook { + grid-area: youlook; + width: 100%; + margin-top: 30px; +} + +.outgunned-youlook > span:first-child { + color: white; + background-color: var(--primary-color); + font-weight: bold; + font-size: 20px; + clip-path: polygon( + calc(100% - 30px) 0%, + 100% 100%, + 0% 100%, + 0% 0% + ); + padding-right: 10%; + padding-left: 5px; + display: block; + /* width: 100%;*/ + text-align: center ; +} + +.outgunned-youlook > div > div:nth-child(1) { + display: grid; + grid-template-columns: 1fr 0.1fr 0.7fr 2fr 0.1fr 0.5fr 2fr; + grid-template-rows: repeat(5, 28px); +} + +.outgunned-youlook span { + font-weight: bold; + font-size: 15px; + text-align: right; +} + +.outgunned-youlook-left { + text-align: left !important; + color: gray !important; +} + +.outgunned-youlook > span:nth-of-type(3) { + text-align: left !important; +} + +.outgunned-youlook input { + background-color: white; + font-weight: bold; + height: 24px !important; +} + +.outgunned-youlook input[type="text"] { + width: 150px; +} + +.outgunned-youlook div > span { + font-size: 12px; + margin-left: 5px; +} + +.outgunned-youlook div > span > span { + font-size: 12px; +} + +.outgunned-youlook span.outgunned-all { + color: #cd957d; +} + +.outgunned-your4thcondition { + text-align: center !important; + width: 100%; + display: block; +} + +.outgunned-your4thcondition > span { + color: var(--primary-color); +} + +.outgunned-powerless > span { + color: var(--primary-color); + font-weight: bold; + font-size: 20px !important; + text-align: center; + width: 100%; + display: block; +} + +.outgunned-powerless > img { + width: 50%; + margin: auto; + display: block; + margin-top: -65px; + pointer-events: none; +} + +.outgunned-powerless > .outgunned-centre-checkbox { + position: relative !important; + top: 8px !important; + left: 67px !important; +} + +.outgunned-powerless > .outgunned-attr { + position: relative !important; + top: 52px !important; + left: 75px !important; +} + +.outgunned-powerless > .outgunned-centre-checkbox::before { + font-size: 35px !important; +} + +.outgunned-powerless > .outgunned-centre-checkbox:not(:checked) ~ span::before { + opacity: 0; +} + +.outgunned-powerless > .outgunned-centre-checkbox:checked ~ img { + filter: hue-rotate(135deg) saturate(10); +} + +.outgunned-superpower { + grid-area: superpower; + margin-left: 10px; + border: 1px solid var(--primary-color); + padding: 3px; + margin-top: 15px; +} + +.outgunned-gunsngear { + grid-area: gunsngear; +} + +.outgunned-gunsngear > span:first-child, +.outgunned-villain-base > span:first-child, +.outgunned-villain-storage > span:first-child, +.outgunned-villain-contacts > span:first-child { + color: white; + background-color: var(--primary-color); + font-weight: bold; + font-size: 20px; + clip-path: polygon( + calc(100% - 30px) 0%, + 100% 100%, + 0% 100%, + 0% 0% + ); + padding-right: 10%; + padding-left: 5px; + display: block; + text-align: center; + margin-top: 30px; +} + +.outgunned-gunsngear input[type="checkbox"] { + width: 20px !important; + margin-left: 5px; +} + +.outgunned-gunsngear input[type="text"] { + width: auto; + background-color: white; +} + +.outgunned-gunsngear-gear { + display: grid; + grid-template-columns: 5fr 0.1fr 0.1fr 0.1fr; +} + +/*.outgunned-gunsngear-gear > div > span {*/ +/* font-family: Pictos;*/ +/* font-size: 3em;*/ +/* margin-top: -13px;*/ +/* margin-bottom: -13px;*/ +/* color: var(--primary-color);*/ +/*}*/ + +.outgunned-cash-storage-ride { + grid-area: cashstorageride; + display: grid; + grid-template-columns: 0.75fr 1.75fr 2fr; +} + +.outgunned-cash { + text-align: center; + z-index: 1; +} + +.outgunned-cash > img { + display: block; + align-content: center; + margin-top: 30px; +} + +.outgunned-cash > div { + display: grid; + grid-template-columns: 1fr; + align-items: center; + row-gap: 15px; +} + +.outgunned-cash > div > input:nth-of-type(1) { + margin-top: 10px; +} + +.outgunned-cash > div > input { + transform: scale(2); +} + +.outgunned-cash-label { + display: block; + margin-top: 30px; + color: var(--primary-color); + font-weight: bold; + font-size: 20px; + filter: hue-rotate(-45deg); + margin-left: -20px; +} + +.outgunned-cash, +.outgunned-storage { + margin-top: 30px; + margin-right: 15px; + z-index: 0; +} + +.outgunned-cash > span:nth-of-type(1), +.outgunned-storage > span { + color: white; + background-color: var(--primary-color); + font-weight: bold; + font-size: 20px; + padding-right: 10%; + padding-left: 5px; + display: block; + text-align: center; +} + +.outgunned-cash > input, +.outgunned-storage > input { + width: 100%; + background-color: white; +} + +.outgunned-ride, +.outgunned-bag { + margin-top: 30px; +} + +.outgunned-ridetype { + display: flex; + margin-top: -5px; + margin-left: -10px; +} + +.outgunned-backpack-image { + position: absolute; + width: 210px; + margin-left: -90px; + z-index: -1; + margin-top: -30px; +} + +.outgunned-ride-hits { + display: block; + background-image: url(https://files.d20.io/images/447651817/TVo4h0DUk4FU-nMJLT-P5g/original.png); + background-repeat: no-repeat; + background-size: 40px; + background-position: center; + height: 40px; + filter: hue-rotate(-130deg); +} + +.outgunned-ride-hits input { + filter: hue-rotate(130deg); +} + +.outgunned-ride-speed { + display: block; + background-image: url(https://files.d20.io/images/447915786/Y6ORl6g5ENF274zGmBs70g/original.png); + background-repeat: no-repeat; + background-size: 40px; + background-position: center; + height: 40px; + filter: hue-rotate(-130deg); +} + +.outgunned-ride-armour > input { + accent-color: #545454; +} + +.outgunned-ride-armour { + display: block; + background-image: url(https://files.d20.io/images/447915661/QP4vVW-_jvom8D58l00vew/original.png); + background-repeat: no-repeat; + background-size: 40px; + background-position: center; + height: 40px; +} + +.outgunned-ride > div input[type="checkbox"], +.outgunned-bag > input { + width: 100%; + background-color: white; + filter: brightness(100%) hue-rotate(130deg); +} + +.outgunned-ridetype > input { + filter: brightness(100%) !important; +} + +.outgunned-ride > img { + width: 100%; + filter: hue-rotate(-130deg); + margin-bottom: 3px; +} + +.outgunned-ride > div > span > input[type="checkbox"] { + margin-left: 5.5px; + transform: scale(1.9); + clip-path: circle(19% at 50% 50%); +} + +.outgunned-ride > div > span > input[type="text"] { + margin-left: 15px; + width: 25px !important; + background: transparent; + appearance: none; + border: 0; + font-weight: bold; + font-size: 20px; + color: var(--primary-color); +} + +.outgunned-ride > div > input[type="checkbox"]:nth-of-type(4), +.outgunned-ride > div > input[type="checkbox"]:nth-of-type(5), +.outgunned-ride > div > input[type="checkbox"]:nth-of-type(6) { + accent-color: black +} + +.outgunned-ride > span:first-child, +.outgunned-bag > span:first-child { + color: white; + background-color: var(--primary-color); + font-weight: bold; + font-size: 20px; + clip-path: polygon( + calc(100% - 30px) 0%, + 100% 100%, + 0% 100%, + 0% 0% + ); + padding-right: 10%; + padding-left: 5px; + display: block; + text-align: center; + margin-bottom: 10px; +} + +.outgunned-bag > span:first-child { + margin-bottom: 0; +} + +.outgunned-ride > div > span { + color: var(--primary-color); + font-size: 12px; + font-weight: bold; + align-content: center; + margin-left: 5px; + padding-right: 10px; + width: 22%; +} + +.outgunned-ride > div:nth-of-type(2) { + margin-top: 10px; + display: flex; + margin-bottom: 10px; +} + +/* Team Styles*/ +.outgunned-team-grid { + display: grid; + grid-template-areas: + "tnames theroes" + "tshot tpowertier" + "tshot tride"; + grid-template-columns: 1fr 1fr; + background-image: url(https://files.d20.io/images/479613168/2_z1rlpXJcHAvFeweuzGGg/max.jpg); + background-size: cover; + min-width: 830px; + column-gap: 10px; +} + +.outgunned-team-grid input[type="text"] { + background-color: white; + width: 100%; +} + +.outgunned-team-names { + grid-area: tnames; + display: grid; + grid-template-columns: 1fr 6fr; + /* height: fit-content;*/ +} + +.outgunned-team-names > img { + grid-column: 1/3; + margin-bottom: 10px; + width: 250px; + margin-top: 10px; +} + +.outgunned-team-names span, +.outgunned-team-heroes span { + align-content: center; +} + +.outgunned-team-heroes { + grid-area: theroes; + display: grid; + grid-template-columns: 1fr 6fr; + margin-top: 10px; + padding: 0; + grid-template-rows: repeat(6, 28px); +} + +.outgunned-team-heroes input { + height: 28px !important; +} + +.outgunned-team-heroes span:first-of-type { + grid-column: 1/3; + text-align: center; + margin-bottom: 10px; +} + +.outgunned-team-shot { + grid-area: tshot; +} + +.outgunned-team-shot > div { + margin-bottom: 5px; + border: 1px solid var(--primary-color); + clip-path: polygon( + 0% 0%, + 60px 0%, + 70px 10px, + 100% 10px, + 100% 100%, + 0% 100% + ); + background-color: var(--primary-color); +} + +.outgunned-team-shot > div > div { + margin-bottom: 3px; + border: 1px solid var(--primary-color); + clip-path: polygon( + 0% 0%, + 60px 0%, + 70px 10px, + 100% 10px, + 100% 100%, + 0% 100% + ); + padding-top: 15px; +} + +.outgunned-team-powertier { + grid-area: tpowertier; +} + +.outgunned-team-powertier > span { + text-align: center !important; + display: block; +} + +.outgunned-team-powertier > input:nth-of-type(1) { + position: relative; + top: -618px; + right: -28px; + transform: scale(2.55); +} + +.outgunned-team-powertier > input:nth-of-type(2) { + position: relative; + top: -407px; + right: -12px; + transform: scale(2.55); +} + +.outgunned-team-powertier > input:nth-of-type(3) { + position: relative; + top: -195px; + right: 4px; + transform: scale(2.55); +} + +.outgunned-team-ride { + grid-area: tride +} + +.outgunned-ridefeat { + display: flex; + margin-top: 10px; + border-bottom: 2px solid var(--primary-color); +} + +.outgunned-ridefeat span { + width: 25px !important; +} + +.outgunned-ridefeat input { + width: 100%; +} + +/* Villain Styles */ +.outgunned-villain textarea { + width: stretch; + background-color: white; +} + +.outgunned-villain-grid { + display: grid; + grid-template-areas: + "vheat villain villain" + "vbase vbase vbase" + "vstorage vstorage vstorage" + "vcontacts vcontacts vcontacts"; + grid-template-columns: 1fr 1fr 1fr; + background-image: url(https://files.d20.io/images/479613168/2_z1rlpXJcHAvFeweuzGGg/max.jpg); + background-size: cover; + min-width: 830px; + column-gap: 10px; + row-gap: 10px; +} + +.outgunned-villain-heat { + padding: 10px; +} + +.outgunned-villain-heat > img { +} + +.outgunned-villain-heat > input { + position: relative; + transform: scale(1.5); +} + +.outgunned-villain-heat > input:nth-of-type(1) { + top: -235px; + left: 185px; +} + +.outgunned-villain-heat > input:nth-of-type(2) { + top: -198px; + left: 207px; +} + +.outgunned-villain-heat > input:nth-of-type(3) { + top: -137px; + left: 208px; +} + +.outgunned-villain-heat > input:nth-of-type(4) { + top: -78px; + left: 176px; +} + +.outgunned-villain-heat > input:nth-of-type(5) { + top: -37px; + left: 122px; +} + +.outgunned-villain-heat > input:nth-of-type(6) { + top: -19px; + left: 39px; + accent-color: red; +} + +.outgunned-villain-heat > input:nth-of-type(7) { + top: -38px; + left: -45px; +} + +.outgunned-villain-heat > input:nth-of-type(8) { + top: -77px; + left: -98px; +} + +.outgunned-villain-heat > input:nth-of-type(9) { + top: -137px; + left: -130px; + accent-color: red; +} + +.outgunned-villain-heat > input:nth-of-type(10) { + top: -198px; + left: -129px; +} + +.outgunned-villain-heat > input:nth-of-type(11) { + top: -234px; + left: -110px; +} + +.outgunned-villain-heat > input:nth-of-type(12) { + top: -254px; + left: -58px; + accent-color: red; +} + +.outgunned-villain-details { + grid-area: villain; + width: auto; +} + +.outgunned-villain-details > div > span { + width: 90px; +} + +.outgunned-villain-details > span { + text-align: center; + margin-top: 10px; +} + +.outgunned-villain-base { + grid-area: vbase; + width: auto; +} + +.outgunned-villain-storage { + grid-area: vstorage; + width: auto; +} + +.outgunned-villain-contacts { + grid-area: vcontacts; + width: auto; +} + +.outgunned-villain-base > span:first-child, +.outgunned-villain-storage > span:first-child, +.outgunned-villain-contacts > span:first-child { + margin-top: 0 !important; +} + +.sheet-rolltemplate-diceroller { + border: 2px solid var(--primary-color); + border-radius: 5px; + padding: 5px; + background-image: url("https://files.d20.io/images/479904990/lSAsM55OC3kRCZouJ7D2dw/original.png?1773772632"); + background-repeat: no-repeat; + background-position: center center; + background-blend-mode: lighten; + background-color: #ffffffdd; + background-size: cover; +} + +.sheet-rolltemplate-diceroller > div > div { + display: grid; + grid-template-columns: 1fr; +} + +.sheet-rolltemplate-diceroller > div > div > span:first-of-type { + margin-bottom: 15px; +} + +.sheet-rolltemplate-diceroller > div > div > span { + color: var(--primary-color); + font-weight: bold; + font-style: italic; + font-size: 2em; + text-shadow: 2px 2px 2px white; + +} + +.sheet-rolltemplate-diceroller > div > div > span:nth-of-type(2) { + font-size: 1.5em; + padding: 5px; + line-height: 1em; +} + +.sheet-rolltemplate-diceroller > div > div > div { + color: var(--primary-color); + font-weight: bold; + display: inline-flex; + font-size: 0.75em; +} + +.sheet-rolltemplate-diceroller > div > div > div:empty { + display: none; +} + +.sheet-rolltemplate-diceroller img { + width: 35px; + height: 35px; + margin-bottom: 10px; + margin-right: 5px; +} + +.outgunned-notes { + grid-area: notes; +} + +.outgunned-notes > textarea { + box-sizing: border-box; + background-color: white; + resize: vertical; +} + +.outgunned-tooltiptext { + display: none; + font-family: "Helvetica Neue", serif !important; + width: 200px; + text-align: left !important; + background-color: whitesmoke; + color: black !important; + font-size: 10px !important; + font-weight: bold !important; + padding: 5px; + border: 1px black solid; + border-radius: 3px; + position: absolute; + z-index: 10000; + height: fit-content !important; + line-height: normal; +} + +.outgunned-tooltiptext-narrow { + width: 120px; + margin-top: -135px !important; +} + +.outgunned-tooltiptext-wide { + width: 400px; + margin-top: -50px !important; +} + +.outgunned-tooltiptext-wideup { + width: 400px; + margin-top: -160px !important; +} + +.outgunned-tooltiptext-wideup2 { + width: 400px; + margin-top: -250px !important; +} + +.outgunned-tooltips:has(.outgunned-tooltips-cb:checked) .outgunned-tooltip:hover ~ .outgunned-tooltiptext { + display: block; + pointer-events: none; + margin-top:35px; +} + +.outgunned-tooltips:has(.outgunned-tooltips-cb:checked) .outgunned-tooltip:hover .outgunned-tooltiptext { + display: block; +} + +.outgunned-tooltips:has(.outgunned-tooltips-cb:checked) .outgunned-tooltip .outgunned-tooltiptext:hover { + display: none; +} diff --git a/Outgunned Superheroes/Outgunned Superheroes.html b/Outgunned Superheroes/Outgunned Superheroes.html new file mode 100644 index 0000000000..66e7ae6248 --- /dev/null +++ b/Outgunned Superheroes/Outgunned Superheroes.html @@ -0,0 +1,1331 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+