From ea868ea613b92d9dc1ba8f11baece8c7a5b0fe91 Mon Sep 17 00:00:00 2001 From: JennyWolff <121284435+JennyWolff@users.noreply.github.com> Date: Thu, 29 Dec 2022 19:59:41 -0800 Subject: [PATCH] updated to v2.5 -general cosmetic improvements -added interactive color elements -added gender wheel --- To Change/to_change_sheet.css | 912 +++++++++++++++++++++++++++++++++ To Change/to_change_sheet.html | 279 ++++++++-- To Change/to_change_sheet.png | Bin 465337 -> 532467 bytes 3 files changed, 1150 insertions(+), 41 deletions(-) diff --git a/To Change/to_change_sheet.css b/To Change/to_change_sheet.css index 4052f928e3..91705854a3 100644 --- a/To Change/to_change_sheet.css +++ b/To Change/to_change_sheet.css @@ -297,3 +297,915 @@ background: linear-gradient(40deg, rgba(255,228,225,.6) 10%, rgba(176,196,222,.6 +.switch { + position: relative; + display: block; + vertical-align: top; + box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05); + cursor: pointer; + box-sizing:content-box; +} + +.switch.change-gender { + background: linear-gradient(to bottom, rebeccapurple, crimson 80%); + background-image: -webkit-linear-gradient(top, rebeccapurple, crimson 80%); +} + +.switch.cross-console { + background: linear-gradient(to bottom, rebeccapurple, crimson 80%); + background-image: -webkit-linear-gradient(top, rebeccapurple, crimson 80%); +} + +.switch.gender-colors { + background: linear-gradient(to bottom, rebeccapurple, crimson 80%); + background-image: -webkit-linear-gradient(top, rebeccapurple, crimson 80%); +} + +.switch.large { + padding: 3px; + min-width: 130px; + max-width: 130px; + height: 30px; + border-radius: 18px; + margin: 0 10px 10px 0; +} + +.switch.small { + padding: 1px; + min-width: 30px; + max-width: 30px; + height: 15px; + border-radius: 18px; + margin: 0 5px 5px 0; +} + +.switch-input{ + position: absolute; + top: 0; + left: 0; + opacity: 0; + box-sizing:content-box; +} + +.switch-label{ + position: relative; + display: block; + height: inherit; + font-size: 10px; + text-transform: uppercase; + border-radius: inherit; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); + box-sizing:content-box; +} + +.switch-label.change-gender{ + background: mediumpurple; +} + +.switch-label.cross-console{ + background: rebeccapurple; +} + +.switch-label.gender-colors{ + background: dodgerblue; +} + +.switch-label.large{ + font-size: 10px; +} +.switch-label.small.gender-colors{ + font-size: 8px; + transform: translateY(-20px); +} + +.switch-label.small.cross-console{ + font-size: 8px; +} + +.switch-label:before, .switch-label:after { + position: absolute; + top: 50%; + margin-top: -.5em; + line-height: 1; + -webkit-transition: inherit; + -moz-transition: inherit; + -o-transition: inherit; + transition: inherit; + box-sizing:content-box; +} +.switch-label.large:before { + content: attr(data-off); + right: 11px; + color: indigo; + text-shadow: 0 1px rgba(255, 255, 255, 0.5); +} + +.switch-label.small:before{ + right:6px; + +} + +.switch-label.large:after { + content: attr(data-on); + left: 11px; + text-shadow: 0 1px rgba(0, 0, 0, 0.2); + opacity: 0; +} +.switch-label.small:after { + left: 6px; +} + +.switch-label.change-gender:after { + color: dodgerblue; +} + +.switch-input:checked ~ .switch-label { +/* background: lightpink;*/ + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); +} + +.switch-input.change-gender:checked ~ .switch-label.change-gender { + background: lightpink; +} + +.switch-input.cross-console:checked ~ .switch-label.cross-console { + background: mediumvioletred; +} + +.switch-input.gender-colors:checked ~ .switch-label.gender-colors { + background: hotpink; +} + +.switch-input:checked ~ .switch-label:before { + opacity: 0; +} +.switch-input:checked ~ .switch-label:after { + opacity: 1; +} +.switch-handle { + position: absolute; + background: linear-gradient(to bottom, rgba(173,216,230,1) 40%, rgba(147,112,219,1)); + background-image: -webkit-linear-gradient(top, rgba(173,216,230,1) 40%, rgba(147,112,219,1)); + border-radius: 100%; + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); +} + +.switch-handle.large { + top: 4px; + left: 4px; + width: 28px; + height: 28px; +} + +.switch-handle.small{ + top: 2px; + left: 2px; + width: 14px; + height: 14px; +} + +.switch-handle:before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + margin: -6px 0 0 -6px; + width: 12px; + height: 12px; + background: linear-gradient(to bottom, rgba(147,112,219,1), rgba(173,216,230,1)); + background-image: -webkit-linear-gradient(top, rgba(147,112,219,1),1, rgba(173,216,230,1)); + border-radius: 6px; + box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); +} + +.switch-handle.large:before { + margin: -6px 0 0 -6px; + width: 12px; + height: 12px; +} + +.switch-handle.small:before { + margin: -3px 0 0 -3px; + width: 6px; + height: 6px; +} + + +.switch-input.large:checked ~ .switch-handle.large { + left: 104px; + box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); +} + +.switch-input.small:checked ~ .switch-handle.small { + left: 15px; + box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); +} + +/* Transition +========================== */ +.switch-label, .switch-handle { + transition: All 0.3s ease; + -webkit-transition: All 0.3s ease; + -moz-transition: All 0.3s ease; + -o-transition: All 0.3s ease; +} + + + + + + + + +.charsheet{ + border-radius: 16px; + background: rgb(147, 112, 219); + background: linear-gradient(180deg, rgba(173,216,230,1) 0%, rgba(147,112,219,1) 36%, + rgba(219,112,147,1) 56%, rgba(147,112,219,1) 76%, rgba(173,216,230,1) 100%); + width: 100%; + color: indigo; + +} + + +h1{ + font-size: 40px; + color: indigo; +} + +h2{ + color: indigo; +} + +h3{ + color: indigo; +} + +h4{ + color: indigo; +} + +.row{ + display: flex; + margin-right: auto; + margin-left: auto; + color: indigo; + justify-content: space-between; + background-color: transparent; + +} + +.first{ + width: 100%; + min-width: 800px; +} + +.second{ + width: 80%; + min-width: 772px; +} + +.third{ + width: 70%; + min-width: 716px; +} + + +.enclosure{ + display: flex; + + } + +.wrapper{ + display: flex; + flex-direction: column; + justify-content: space-evenly; + min-height:180px; +} + +.inner{ + display: flex; + align-items: baseline; +} + + +.box{ + display: flex; + direction: ltr; + resize: none; + box-sizing: border-box; + overflow: auto; + max-width: 250px; + min-width: 250px; + width: 100%; + max-height: 150px; + min-height: 150px; + padding: 5px; + border-radius: 12px; + font-size: 100%; + line-height: 115%; + color: black; + font-family: candal; + +} + +input.damagecheck:not(:checked) ~ div.box { + border: 5px solid rebeccapurple; + box-shadow: 5px 5px 10px 5px rgba(0,0,0,.5); + transition-duration: 2s; + transition-property: background, border, box shadow; +} +input.damagecheck:checked ~ div.box{ + border: 5px solid red; + box-shadow: 5px 5px 10px 5px rgba(0,0,0,.5), 0 0 20px 0 red inset; + transition-duration: 2s; + transition-property: background, border, box shadow; +} + +.empty{ + display: block; + +} + +.center{ + display: flex; + + justify-content: flex-end; +} + +.flex-end{ + display: flex; + justify-content: flex-end; +} + + +.flex-space-between{ + display: flex; + justify-content: space-between; + +} + +.flex-space-evenly{ + display: flex; + justify-content: space-evenly; + +} + +.flex-start{ + display: flex; + justify-content: flex-start; +} + +.flex-column{ + display: flex; + flex-direction: column; +} + +.align-center{ + display: flex; + align-items: center; +} + +} + +.cardpicker{ + overflow: auto; + text-align: center; +} + + + + +.cardtext{ + padding: 3px; + text-align: center; +} + +input.changecheck:not(:checked) ~ div.box.phys.apt{ + background: linear-gradient(310deg, rgba(230,230,250,.6) 10%, rgba(255,182,193,.6) 40%, rgba(153,102,204,.6) 100%); + transition-duration: 2s; + transition-property: background, border; + } + +input.changecheck:checked ~ div.box.phys.apt{ + background: rgb(255,182,193); + transition-duration: 2s; + transition-property: background, border; +} + + +input.changecheck:not(:checked) ~ div.box.phys.fort{ + background: linear-gradient(130deg, rgba(230,230,250,.6) 10%, rgba(255,182,193,.6) 40%, rgba(153,102,204,.6) 100%); + transition-duration: 2s; + transition-property: background, border; +} + +input.changecheck:checked ~ div.box.phys.fort{ + background: rgb(255,182,193); + transition-duration: 2s; + transition-property: background, border; +} + +input.changecheck:not(:checked) ~ div.box.ment.apt{ + background: linear-gradient(40deg, rgba(255,228,225,.6) 10%, rgba(176,196,222,.6) 40%, rgba(153,102,204,.6) 100%); + transition-duration: 2s; + transition-property: background, border; +} + +input.changecheck:checked ~ div.box.ment.apt{ + background: rgb(176,196,222); + transition-duration: 2s; + transition-property: background, border; +} + +input.changecheck:not(:checked) ~ div.box.ment.fort{ + background: linear-gradient(220deg, rgba(255,228,225,.6) 10%, rgba(176,196,222,.6) 40%, rgba(153,102,204,.6) 100%); + transition-duration: 2s; + transition-property: background, border; +} + +input.changecheck:checked ~ div.box.ment.fort{ + background: rgb(176,196,222); + transition-duration: 2s; + transition-property: background, border; +} + +input.changecheck:not(:checked) ~ div.box.perm{ + background: radial-gradient(circle, rgba(220,20,60,.6) 10%, rgba(221, 160, 221,.6) 50%, rgba(201,112,165,0) 90%)rgba(153,102,204,.6) 100%; + background-position: center; + transition-duration: 2s; + transition-property: background, border; +} + + +input.changecheck:checked ~ div.box.perm{ + background: fuchsia; + transition-duration: 2s; + transition-property: background, border; +} + +input.changecheck:not(:checked) ~ span.perm{ + opacity: 0; + transition-duration: 2s; + transition-property: opacity; +} + +input.changecheck:checked ~ span.perm{ + opacity: 0.7; + transition-duration: 2s; + transition-property: opacity; +} + + +/*FACE CARD TEXT CONTROL*/ + +/* hides the face card text*/ +.charsheet .sheet-default, +.charsheet .sheet-thefool, +.charsheet .sheet-themagician, +.charsheet .sheet-thehighpriestess, +.charsheet .sheet-theempress, +.charsheet .sheet-theemperor, +.charsheet .sheet-thehierophant, +.charsheet .sheet-thelovers, +.charsheet .sheet-thechariot, +.charsheet .sheet-strength, +.charsheet .sheet-thehermit, +.charsheet .sheet-wheeloffortune, +.charsheet .sheet-justice, +.charsheet .sheet-thehangedman, +.charsheet .sheet-death, +.charsheet .sheet-temperance, +.charsheet .sheet-thedevil, +.charsheet .sheet-thetower, +.charsheet .sheet-thestar, +.charsheet .sheet-themoon, +.charsheet .sheet-thesun, +.charsheet .sheet-judgement, +.charsheet .sheet-theworld +{ + display: none; +} + + + +/* show the selected face card */ +.charsheet .sheet-facecardtoggle[value="default"] ~ div.sheet-default, +.charsheet .sheet-facecardtoggle[value="thefool"] ~ div.sheet-thefool, +.charsheet .sheet-facecardtoggle[value="themagician"] ~ div.sheet-themagician, +.charsheet .sheet-facecardtoggle[value="thehighpriestess"] ~ div.sheet-thehighpriestess, +.charsheet .sheet-facecardtoggle[value="theempress"] ~ div.sheet-theempress, +.charsheet .sheet-facecardtoggle[value="theemperor"] ~ div.sheet-theemperor, +.charsheet .sheet-facecardtoggle[value="thehierophant"] ~ div.sheet-thehierophant, +.charsheet .sheet-facecardtoggle[value="thelovers"] ~ div.sheet-thelovers, +.charsheet .sheet-facecardtoggle[value="thechariot"] ~ div.sheet-thechariot, +.charsheet .sheet-facecardtoggle[value="strength"] ~ div.sheet-strength, +.charsheet .sheet-facecardtoggle[value="thehermit"] ~ div.sheet-thehermit, +.charsheet .sheet-facecardtoggle[value="wheeloffortune"] ~ div.sheet-wheeloffortune, +.charsheet .sheet-facecardtoggle[value="justice"] ~ div.sheet-justice, +.charsheet .sheet-facecardtoggle[value="thehangedman"] ~ div.sheet-thehangedman, +.charsheet .sheet-facecardtoggle[value="death"] ~ div.sheet-death, +.charsheet .sheet-facecardtoggle[value="temperance"] ~ div.sheet-temperance, +.charsheet .sheet-facecardtoggle[value="thedevil"] ~ div.sheet-thedevil, +.charsheet .sheet-facecardtoggle[value="thetower"] ~ div.sheet-thetower, +.charsheet .sheet-facecardtoggle[value="thestar"] ~ div.sheet-thestar, +.charsheet .sheet-facecardtoggle[value="themoon"] ~ div.sheet-themoon, +.charsheet .sheet-facecardtoggle[value="thesun"] ~ div.sheet-thesun, +.charsheet .sheet-facecardtoggle[value="judgement"] ~ div.sheet-judgement, +.charsheet .sheet-facecardtoggle[value="theworld"] ~ div.sheet-theworld +{ + display: block; +} + + +.charsheet .input-menu { + display: flex; + justify-content: center; +} +.charsheet .input-menu > * { + flex: 1; +} + +input.cross-console:not(:checked) ~ div.opened-console { + display: none; +} + +.opened-console { + + box-sizing: content-box; + display: flex; + flex-wrap:wrap; + gap: 10px; + justify-content: space-evenly; + + } + +.text-input { + max-width: 300px; + margin: 2px; + flex: 1 1 auto; +} + +.submit { + max-width: 200 px; + align-self: center; +} + + +.changetab, +.cross-wheel:checked ~ .gendertab { +display: block;} + +.gendertab, +.cross-wheel:checked ~ .changetab { + display: none; +} + +.gendertab { + width: 100%; + min-height: 50px; + background: linear-gradient(145deg, darkorchid 20%, blueviolet 40%, blueviolet 60%, darkorchid 80%); + border-radius: 16px; + border: 3px solid rebeccapurple; + box-shadow: 0 0 10px 5px rgba(0,0,0,.6) +} + + +/* gender wheel styling */ + +.bar.gender { + display: flex; + margin: auto; + justify-content: center; + min-width:820 px; + max-width: 820px; + background: linear-gradient(145deg, darkorchid 60%, blueviolet 80%); + max-height: 34px; +} + +.bar.cross { + display: flex; + margin: auto; + justify-content: flex-start; + min-width:820 px; + max-width: 820px; + height: 40px; + margin-bottom: 20px; +} + +.switch { + position: relative; + display: inline-block; + max-width: 60px; + max-height: 34px; +} +input.switch{ + opacity:0; +} + + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 60px; + background-color: hotpink; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: aliceblue; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: cornflowerblue; +} + +input:focus + .slider { + box-shadow: 0 0 1px magenta; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%;} + + + + +.changetype{ + font-weight: bold; + font-family: patrick hand; + font-size: 60px; + margin-left: 50px; + margin-right: 50px; + z-index: 1; +} + + +input.gender.text { + color: indigo; + background: plum; + font-family: patrick hand; + font-size: 120%; + height: 30px; + border-radius: 5px; + max-width: 180px; + z-index: 2; + } + +div.sleeve { + display: flex; + justify-content: space-between; + min-width: 250px; + max-width: 250px; +} + +.gender.checkbox { + position: absolute; + opacity: 0; + cursor: pointer; + min-height: 40px; + min-width: 40px; + z-index: 2; +} + +.checkmark { + position: absolute; + height: 30px; + width: 30px; + font-size:18px; + align-content: center; + font-family: shadows; + text-align: center; + box-shadow: 0px 0px 5px 0 rgba(0,0,0,.6); + transition-duration: 1.5s; + transition-property: background-color border; + } + +.checkmark.blue-pink { + background-color: cadetblue; + border: 5px outset cadetblue; +} +.checkmark.pink-blue { + background-color: lightcoral; + border: 5px outset lightcoral; +} + + .checkbox:hover ~ .checkmark { + background-color: darkorchid; + border: 5px outset darkorchid; + transition-duration: .25s; + transition-property: background-color border; +} + +.checkbox:checked ~ .checkmark.blue-pink { + background-color: lightcoral; + border: 5px inset lightcoral; +} + +.checkbox:checked ~ .checkmark.pink-blue { + background-color: cadetblue; + border: 5px inset cadetblue; +} + + + +.cluster { + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: 300px; + height: 350px; +} + +.cluster.phys.apt{ + align-items: flex-start; + color: darkmagenta; + text-shadow: 5px 5px 10px rgba(0,0,0,1), 0 0 5px magenta; +} + +.cluster.ment.apt{ + align-items: flex-end; + color: rebeccapurple; + text-shadow: 5px 5px 10px rgba(0,0,0,1), 0 0 5px deepskyblue; + +} + +.cluster.ment.fort{ + align-items: flex-start; + color: rebeccapurple; + text-shadow: 5px 5px 10px rgba(0,0,0,1), 0 0 5px deepskyblue; + +} + +.cluster.phys.fort{ + align-items: flex-end; + color: darkmagenta; + text-shadow: 5px 5px 10px rgba(0,0,0,1), 0 0 5px magenta; + +} + + +.holder { + margin: auto; + display: flex; + padding: 10px; + flex-wrap: wrap; + justify-content: space-between; + min-width: 800px; + max-width: 800px; + background: linear-gradient(145deg, darkorchid 20%, blueviolet 40%, blueviolet 60%, darkorchid 80%); + z-index: 0; +} + + +.wheel { + align-self: center; + position: absolute; + display: block; + background: #baa1d4; + border-radius: 50%; + width: 400px; + height: 400px; + transform: translateX(50%); + z-index: 0; + box-shadow: 0 0 50px 80px #baa1d4; + +} + +.hidden{ + display:none; + } + + +.dot { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + height: 60px; + width: 60px; + border-radius: 50%; + font-weight: bold; + z-index: 3; + font-size: 30px; + font-family: shadows; + transition-delay: .75; + transition-duration: 1.5s; + transition-property: background box-shadow; + +} + +input.hidden.gender:not(:checked) + div.dot.blue-pink { + background: dodgerblue; + box-shadow: 0 0 5px 2px darkslateblue inset, 0 0 15px 10px slateblue; +} + +input.hidden.gender:checked + div.dot.blue-pink { + background: hotpink; + box-shadow: 0 0 5px 2px firebrick inset, 0 0 30px 20px lightpink; +} + +input.hidden.gender:not(:checked) + div.dot.pink-blue { + background: hotpink; + box-shadow: 0 0 5px 2px firebrick inset, 0 0 15px 10px indianred; +} + +input.hidden.gender:checked + div.dot.pink-blue { + background: dodgerblue; + box-shadow: 0 0 5px 2px darkslateblue inset, 0 0 30px 20px lightskyblue; +} + + +.dot.xi{ + left: 200px; + top: 0px; + transform: translate(-50%, -50%) rotate(0deg); +} + +.dot.xii{ + left: 300px; + top: 27px; + transform: translate(-50%, -50%) rotate(30deg); +} + +.dot.i{ + left: 373px; + top: 100px; + transform: translate(-50%, -50%) rotate(60deg); +} + +.dot.ii{ + left: 400px; + top: 200px; + transform: translate(-50%, -50%) rotate(90deg) ; +} + +.dot.iii{ + left: 373px; + top: 300px; + transform: translate(-50%, -50%) rotate(120deg); +} + +.dot.iv{ + left: 300px; + top: 373px; + transform: translate(-50%, -50%) rotate(150deg); +} + +.dot.v{ + left: 200px; + top: 400px; + transform: translate(-50%, -50%) rotate(180deg); +} + +.dot.vi{ + left: 100px; + top: 373px; + transform: translate(-50%, -50%) rotate(210deg); +} + +.dot.vii{ + left: 23px; + top: 300px; + transform: translate(-50%, -50%) rotate(240deg); +} + +.dot.viii{ + left: 0px; + top: 200px; + transform: translate(-50%, -50%) rotate(270deg); +} + +.dot.ix{ + left: 23px; + top: 100px; + transform: translate(-50%, -50%) rotate(300deg); +} + +.dot.x{ + left: 100px; + top: 23px; + transform: translate(-50%, -50%) rotate(330deg); +} \ No newline at end of file diff --git a/To Change/to_change_sheet.html b/To Change/to_change_sheet.html index 979cdd04d7..4bba6d91c0 100644 --- a/To Change/to_change_sheet.html +++ b/To Change/to_change_sheet.html @@ -2,13 +2,13 @@
To Change by Ulysses Duckler & Ewen Albright (https://usducktape.itch.io/to-change)
R20 Character Sheet V2.2
+R20 Character Sheet V2.5
hruU$44DV4H7>B0=S!Gv37nkec6CWN%(B
zzJ!jgKJW@bQ}r42cJ9Dc&*q?|lVt30+V{||?HDNNzI)Ei=|yJYIXh hNWnuO|OtXu+s
zIXk0~{*_Z_1~5o3L5HNkB m!znJ-$X_cu8E52Z18$8@mSMDXsFQwq{N
zzWMSW@cRz~3VJD-kOcp4SxI?{-m{_2q1HO9?Vi>9^Q0*w?T7R)dr)1H6r!r!nyx1?8>|X_
z$MK>|uxlyz)zK5)2#ochiREbkwt=ttl|aIbhTnpn-3vdj%aR*Q$Av057o7i82~XsldXV5z9UG%h`y;ft
zdhCmIAYH^k{IA0k?b~iv^U7?F)ylt-mj@fI