forked from Roll20/roll20-character-sheets
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request Roll20#9996 from coyotegrey/sorcerer-dev
[Sorcerer] new sheet
- Loading branch information
Showing
4 changed files
with
594 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,341 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz&display=swap'); | ||
| @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap'); | ||
|
|
||
| body { | ||
| background: red; | ||
| } | ||
|
|
||
| body .charactersheet * { | ||
| font-family: 'Yanone Kaffeesatz', sans-serif; | ||
| } | ||
|
|
||
| body .charactersheet h1 { | ||
| width: fit-content; | ||
| text-align: center; | ||
| color: white; | ||
| background-color: black; | ||
| padding: 2px; | ||
| vertical-align: text-top; | ||
| font-size: 30px; | ||
| line-height: 30px; | ||
| } | ||
| body .charactersheet h1 em { | ||
| font-style: normal; | ||
| color: black; | ||
| background-color: white; | ||
| } | ||
|
|
||
| .charactersheet .grid { | ||
| position: relative; | ||
| display: grid; | ||
| grid-auto-rows: minmax(min-content, max-content); | ||
| gap: 10px; | ||
| width: 100%; | ||
| } | ||
| .charactersheet .biggap { | ||
| gap: 30px; | ||
| justify-items: center; | ||
| } | ||
| .col2 { | ||
| grid-template-columns: repeat(2, 1fr); | ||
| } | ||
| .col2-roll { | ||
| grid-template-columns: 6fr 1fr; | ||
| } | ||
| .col2-stats { | ||
| grid-template-columns: 2fr 3fr; | ||
| } | ||
| .col3 { | ||
| grid-template-columns: repeat(3, 1fr); | ||
| } | ||
| .col3-binding { | ||
| grid-template: auto 2fr / 3fr 3fr 1fr; | ||
| grid-auto-flow: column; | ||
| } | ||
| .col4 { | ||
| grid-template-columns: repeat(4, 1fr); | ||
| } | ||
| .col4-name { | ||
| grid-template: auto 2fr / 3fr 1fr 1fr 1fr; | ||
| grid-auto-flow: column; | ||
| } | ||
| .charactersheet .flex { | ||
| display: flex; | ||
| } | ||
|
|
||
| body .charactersheet div .grid input, | ||
| body .charactersheet div .grid select, | ||
| body .charactersheet div .grid textarea { | ||
| display: inline-block; | ||
| width: 100%; | ||
| height: 100%; | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| border: none; | ||
| border-bottom: solid 1px black; | ||
| border-radius: 0; | ||
| } | ||
|
|
||
| body .ui-dialog .charsheet input[type=number] { | ||
| width: 100%; | ||
| } | ||
|
|
||
| body .charactersheet div .grid label { | ||
| margin: 0; | ||
| } | ||
|
|
||
| h2 { | ||
| width: 20%; | ||
| transform: rotate(10deg); | ||
| } | ||
| body .charactersheet div .grid.col4-name input, | ||
| body .charactersheet div .grid.col3-binding input { | ||
| color: black; | ||
| font-size: 30px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .charsheet .col2-roll button[type="roll"]::before { | ||
| font-family: "dicefontd10"; | ||
| content: "K"; | ||
| font-size: 40px; | ||
| } | ||
|
|
||
| .col2-roll, | ||
| .col2-stats, | ||
| .col3-binding { | ||
| transform: rotate(5deg); | ||
| } | ||
| .col2-stats label { | ||
| font-size: 40px; | ||
| line-height: 40px; | ||
| width: fit-content; | ||
| height: fit-content; | ||
| background-color: gold; | ||
| color: black; | ||
| padding: 2px; | ||
| } | ||
| .col2-stats label em { | ||
| font-style: normal; | ||
| background-color: black; | ||
| color: gold; | ||
| } | ||
| body .ui-dialog .col2-stats input[type="number"], | ||
| body .ui-dialog .col2-stats .input { | ||
| font-size: 20px; | ||
| line-height: 30px; | ||
| font-weight: bold; | ||
| width: 40px; | ||
| height: fit-content; | ||
| margin-top: 20px; | ||
| background-color: gold; | ||
| color: black; | ||
| text-align: center; | ||
| border: none; | ||
| } | ||
| body .ui-dialog .col2-stats .input { | ||
| font-size: 10px; | ||
| width: fit-content; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 40px; | ||
| line-height: 40px; | ||
| width: fit-content; | ||
| background-color: cyan; | ||
| color: black; | ||
| padding: 2px; | ||
| } | ||
| h2 em { | ||
| font-style: normal; | ||
| background-color: black; | ||
| color: cyan; | ||
| } | ||
|
|
||
| .col1-demons label, | ||
| .col1-abilities label { | ||
| font-size: 30px; | ||
| line-height: 30px; | ||
| width: fit-content; | ||
| background-color: cyan; | ||
| color: black; | ||
| padding: 2px; | ||
| } | ||
| .col1-demons label em, | ||
| .col1-abilities label em { | ||
| font-style: normal; | ||
| background-color: black; | ||
| color: cyan; | ||
| } | ||
|
|
||
| .repitem .grid.col3 *:first-child, | ||
| .repitem .grid.col4 *:first-child { | ||
| color: black; | ||
| font-size: 30px; | ||
| } | ||
|
|
||
| /* demons */ | ||
|
|
||
| .demon-sheet[value="1"] ~ div .sorcerer { | ||
| display: none; | ||
| } | ||
| .demon-sheet:not([value="1"]) ~ div .demon { | ||
| display: none; | ||
| } | ||
|
|
||
| /* templates */ | ||
| .sheet-rolltemplate-action { | ||
| background-color: black; | ||
| border: solid 5px white; | ||
| padding: 5px; | ||
| box-sizing: border-box; | ||
| transform: rotate(2deg); | ||
| } | ||
| .sheet-rolltemplate-action h1, | ||
| .sheet-rolltemplate-action div { | ||
| font-family: 'Yanone Kaffeesatz', sans-serif; | ||
| color: white; | ||
| } | ||
| .sheet-rolltemplate-action h1 { | ||
| transform: rotate(3deg); | ||
| width: fit-content; | ||
| background-color: red; | ||
| color: black; | ||
| padding: 2px; | ||
| font-size: 30px; | ||
| line-height: 30px; | ||
| } | ||
| .sheet-rolltemplate-action h1 em { | ||
| font-style: normal; | ||
| background-color: black; | ||
| color: red; | ||
| } | ||
| .sheet-rolltemplate-action .sheet-results { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| align-items: center; | ||
| justify-content: space-around; | ||
| justify-items: center; | ||
| margin: 5px 0; | ||
| } | ||
| .sheet-rolltemplate-action .sheet-result { | ||
| position: relative; | ||
| text-align: center; | ||
| padding: 5px 0 0 0; | ||
| width: 40px; | ||
| height: 40px; | ||
| } | ||
| .sheet-rolltemplate-action .sheet-result::before { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| font-family: "dicefontd10"; | ||
| content: '0'; | ||
| font-size: 50px; | ||
| } | ||
|
|
||
| .sheet-rolltemplate-action .inlinerollresult, | ||
| .sheet-rolltemplate-action .inlinerollresult.fullcrit, | ||
| .sheet-rolltemplate-action .inlinerollresult.fullfail, | ||
| .sheet-rolltemplate-action .inlinerollresult.importantroll { | ||
| background: none; | ||
| color: white; | ||
| border: none; | ||
| } | ||
|
|
||
| .sheet-rolltemplate-action .sheet-hidden { | ||
| display: none; | ||
| } | ||
| .sheet-rolltemplate-action .sheet-hidden-score[data-i18n-placeholder*=Stamina] ~ .sheet-container .sheet-stamina, | ||
| .sheet-rolltemplate-action .sheet-hidden-score[data-i18n-placeholder*=Will] ~ .sheet-container .sheet-will, | ||
| .sheet-rolltemplate-action .sheet-hidden-score[data-i18n-placeholder*=Lore] ~ .sheet-container .sheet-lore, | ||
| .sheet-rolltemplate-action .sheet-hidden-score[data-i18n-placeholder*=Humanity] ~ .sheet-container .sheet-humanity, | ||
| .sheet-rolltemplate-action .sheet-hidden-score[data-i18n-placeholder*=Power] ~ .sheet-container .sheet-power, | ||
| .sheet-rolltemplate-action .sheet-hidden-score[data-i18n-placeholder*=Cover] ~ .sheet-container .sheet-cover { | ||
| display: inline-block; | ||
| } | ||
|
|
||
|
|
||
| /* arrows */ | ||
| /* Chrome, Safari, Edge, Opera */ | ||
| body .charactersheet input::-webkit-outer-spin-button, | ||
| body .charactersheet input::-webkit-inner-spin-button { | ||
| -webkit-appearance: none; | ||
| margin: 0; | ||
| } | ||
|
|
||
| /* Firefox */ | ||
| body .charactersheet input[type=number] { | ||
| -moz-appearance: textfield; | ||
| } | ||
|
|
||
| /* sliders */ | ||
|
|
||
| /* The switch - the box around the slider */ | ||
| body .charactersheet label.switch { | ||
| position: absolute; | ||
| right: 0; | ||
| top: 0; | ||
| display: inline-block; | ||
| width: 80px; | ||
| height: 24px; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| /* Hide default HTML checkbox */ | ||
| .switch input { | ||
| opacity: 0; | ||
| width: 0; | ||
| height: 0; | ||
| } | ||
|
|
||
| /* The slider */ | ||
| .slider { | ||
| position: absolute; | ||
| cursor: pointer; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background-color: black; | ||
| -webkit-transition: .4s; | ||
| transition: .4s; | ||
| } | ||
|
|
||
| .slider:before { | ||
| position: absolute; | ||
| content: "Sorcerer"; | ||
| height: 16px; | ||
| width: 46px; | ||
| left: 4px; | ||
| bottom: 4px; | ||
| text-align: center; | ||
| background-color: white; | ||
| -webkit-transition: .4s; | ||
| transition: .4s; | ||
| } | ||
|
|
||
| input:checked + .slider { | ||
| background-color: red; | ||
| } | ||
|
|
||
| input:focus + .slider { | ||
| xbox-shadow: 0 0 1px #2196F3; | ||
| } | ||
|
|
||
| input:checked + .slider:before { | ||
| content: "Demon"; | ||
| -webkit-transform: translateX(26px); | ||
| -ms-transform: translateX(26px); | ||
| transform: translateX(26px); | ||
| } | ||
|
|
||
| .slider.round { | ||
| border-radius: 34px; | ||
| } | ||
|
|
||
| .slider.round:before { | ||
| border-radius: 50%; | ||
| } |
Oops, something went wrong.