mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
Tealk
01be073673
- Implemented full script to generate the Roll20 character sheet. - Added functions to generate Spruchlisten HTML, compile Sass to CSS, and combine HTML and JS files into a final output. - Included logic to update the version in the JSON file if HTML or CSS files have changed.
2 lines
15 KiB
CSS
2 lines
15 KiB
CSS
.charsheet .container{width:870px;padding:0;margin:0;margin-left:-10px}.charsheet .container input{background:rgba(0,0,0,0);width:100%;border:1px solid #ddd;border-radius:3px}.charsheet .container select{background:rgba(0,0,0,0);width:100%;border:1px solid #ddd;border-radius:3px}.charsheet .container input[type=number]{text-align:center;-moz-appearance:textfield;-webkit-appearance:textfield}.charsheet .container input[type=checkbox]{width:auto}.charsheet .container textarea{background:rgba(0,0,0,0);margin:0;width:100%;height:65px;resize:vertical;box-sizing:border-box;border:1px solid #ddd;border-radius:3px}.charsheet .container select{margin:0}.charsheet .container span{text-transform:uppercase}.charsheet .container label{padding:0}.charsheet .container label.title{width:auto;display:block;margin-top:-19px;margin-bottom:0px;font-weight:normal;padding-left:5px;font-size:15px}.charsheet .container div.title{padding-left:5px}.charsheet .container .input_label{cursor:pointer}.charsheet .container .redbg{background-color:red;color:#fff;font-weight:bold}.charsheet .container strong{font-weight:900}.charsheet .container .textcenter{text-align:center}.charsheet .container .float{float:left;box-sizing:border-box;width:99%;margin:10px 5px 10px 0}.charsheet .container .noborder{border:none}.charsheet .container .half{max-width:49%}.charsheet .container .twice{display:grid;grid-template-columns:49% 49%;grid-gap:5px}.charsheet .container .clear{clear:both;overflow:auto}.charsheet .container .row{padding-top:30px;margin-right:0;margin-left:0}.charsheet .container .row.twice::before,.charsheet .container .row.twice::after{display:none}.charsheet .container .row.small{padding-top:10px}.charsheet .container .row:first-child{padding-top:0px}.charsheet .container .options-flag,.charsheet .container .options-flag+span{position:absolute;top:-10px;left:-10px}.charsheet .container .options-flag{opacity:0;width:16px !important;min-height:16px;z-index:2}.charsheet .container .options-flag+span{white-space:nowrap;width:16px;height:16px;font-size:16px;font-family:pictos;color:#bbb;cursor:pointer;margin-top:0;display:none;text-transform:lowercase}.charsheet .container .options-flag~textarea{display:none}.charsheet .container .options-flag:checked~textarea{display:inherit}.charsheet .container .grid,.charsheet .container .items,.charsheet .container .repcontainer .repitem{display:grid;grid-gap:5px}.charsheet .container .items,.charsheet .container .repcontainer .repitem{margin-top:5px}.charsheet .container .grid>div{background-color:red;color:#fff;font-weight:bold;text-align:center}.charsheet .container .items input,.charsheet .container .items select,.charsheet .container .items button,.charsheet .container .repcontainer .repitem input,.charsheet .container .repcontainer .repitem select,.charsheet .container .repcontainer .repitem button{width:-webkit-fill-available;width:-moz-available}.charsheet .container .repcontainer .repitem button.repcontrol_del{width:auto}.charsheet .container .items div,.charsheet .container .repcontainer .repitem div{margin:auto 0;text-align:center}.charsheet .container .switch{position:relative;display:inline-block;width:40px;height:24px;margin-top:-19px;margin-bottom:0px;font-weight:normal;padding:0px;font-size:15px}.charsheet .container .switch input{opacity:0;width:0;height:0}.charsheet .container .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.charsheet .container .slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.charsheet .container input:checked+.slider{background-color:red}.charsheet .container input:focus+.slider{box-shadow:0 0 1px red}.charsheet .container input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translateX(16px)}.charsheet .container .main .ep{width:190px;float:left}.charsheet .container .main .ep input,.charsheet .container .main .ep label{float:left;margin-right:5px}.charsheet .container .main .ep input:last-child,.charsheet .container .main .ep label:last-child{margin-right:0px}.charsheet .container .main .ep input{width:50px;height:40px}.charsheet .container .main .ep label[for=Stufe],.charsheet .container .main .ep label[for=AP]{width:50px;text-align:center}.charsheet .container .main .ep input[name=attr_ep],.charsheet .container .main .ep label[for=attr_ep]{width:80px;text-align:center}.charsheet .container .main .vermoegen{width:210px;float:right;padding-top:0}.charsheet .container .main .vermoegen div{width:100%}.charsheet .container .main .vermoegen input,.charsheet .container .main .vermoegen label{float:left;margin-left:5px}.charsheet .container .main .vermoegen input:first-child,.charsheet .container .main .vermoegen label:first-child{margin-left:0px}.charsheet .container .main .vermoegen input{width:40px;height:40px}.charsheet .container .main .vermoegen label[for=attr_tt],.charsheet .container .main .vermoegen label[for=attr_kl],.charsheet .container .main .vermoegen label[for=attr_mu]{width:40px;text-align:center}.charsheet .container .main .vermoegen input[name=attr_gf],.charsheet .container .main .vermoegen label[for=attr_gf]{width:70px;text-align:center}.charsheet .container .main .stats{float:left}.charsheet .container .main .stats>input,.charsheet .container .main .stats>label,.charsheet .container .main .stats>div{float:left;margin-right:10px}.charsheet .container .main .stats input:last-child,.charsheet .container .main .stats label:last-child,.charsheet .container .main .stats div:last-child{margin-right:0px}.charsheet .container .main .stats input{width:50px;height:40px}.charsheet .container .main .stats .moreleft{margin-left:-4px}.charsheet .container .main .stats .bewegung{position:relative}.charsheet .container .main .stats .bewegung input{width:80px}.charsheet .container .main .stats .bewegung .suffix{position:absolute;right:10px;top:12px}.charsheet .container .main .gmroll{width:175px;float:right}.charsheet .container .main .gmroll select{float:right;width:175px}.charsheet .container .main .beruf select[name=attr_beruf]{display:none}.charsheet .container .main .beruf .switch{float:right;position:relative;height:17px;border:1px solid #ccc}.charsheet .container .main .beruf .switch .slider{box-shadow:none}.charsheet .container .main .beruf .switch .slider:before{height:13px;bottom:2px}.charsheet .container .main .beruf input[name=attr_toggle_beruf]:checked~input{display:none}.charsheet .container .main .beruf input[name=attr_toggle_beruf]:checked~select{display:inherit}.charsheet .container .main .settings{padding-top:10px;display:grid;grid-template-columns:49% 49%;grid-gap:5px}.charsheet .container .main .settings::before,.charsheet .container .main .settings::after{display:none}.charsheet .container .main .attribut .grid,.charsheet .container .main .attribut .items{grid-template-columns:150px 70px 70px 22px 42px 50px}.charsheet .container .main .attribut .arrow{border-top:10px solid rgba(0,0,0,0);border-bottom:10px solid rgba(0,0,0,0);border-left:20px solid red;width:auto;height:auto;margin:6px 0;margin-right:60px}.charsheet .container .main .attribut label{position:relative;left:-95px;top:7px}.charsheet .container .main .gott{text-align:center}.charsheet .container .main .gott label{text-align:center;margin:0}.charsheet .container .main .gott input{width:auto;margin-left:10px}.charsheet .container .main .mana{padding-top:20px}.charsheet .container .main .mana .items{grid-template-columns:40% 60%}.charsheet .container .main .mana input{width:100px;height:40px}.charsheet .container .main .magie{padding-top:15px}.charsheet .container .main .magie .grid,.charsheet .container .main .magie .items{grid-template-columns:150px 70px 70px 70px 50px}.charsheet .container .main .float.tabmenu{margin:0;display:grid;grid-gap:5px}.charsheet .container .main .float.tabmenu.physisch{grid-template-columns:auto auto}.charsheet .container .main .float.tabmenu.magisch{grid-template-columns:auto auto auto auto auto auto auto auto auto}.charsheet .container .main .float.tabmenu label{text-align:center;display:inline-block;width:100%;height:20px;cursor:pointer}.charsheet .container .main #selection-fertigkeiten,.charsheet .container .main #selection-kampf,.charsheet .container .main #selection-weissemagie,.charsheet .container .main #selection-schwarzemagie,.charsheet .container .main #selection-wildemagie,.charsheet .container .main #selection-elementaremagie,.charsheet .container .main #selection-freiemagie,.charsheet .container .main #selection-zeichenmagie,.charsheet .container .main #selection-wundermagie,.charsheet .container .main #selection-bardenmagie,.charsheet .container .main #selection-schamanenmagie{display:none}.charsheet .container .main input#fertigkeiten:checked~#selection-fertigkeiten,.charsheet .container .main input#kampf:checked~#selection-kampf,.charsheet .container .main input#weissemagie:checked~#selection-weissemagie,.charsheet .container .main input#schwarzemagie:checked~#selection-schwarzemagie,.charsheet .container .main input#wildemagie:checked~#selection-wildemagie,.charsheet .container .main input#elementaremagie:checked~#selection-elementaremagie,.charsheet .container .main input#freiemagie:checked~#selection-freiemagie,.charsheet .container .main input#zeichenmagie:checked~#selection-zeichenmagie,.charsheet .container .main input#wundermagie:checked~#selection-wundermagie,.charsheet .container .main input#bardenmagie:checked~#selection-bardenmagie,.charsheet .container .main input#schamanenmagie:checked~#selection-schamanenmagie{display:block}.charsheet .container .main input#fertigkeiten:checked~div #label-fertigkeiten,.charsheet .container .main input#kampf:checked~div #label-kampf,.charsheet .container .main input#weissemagie:checked~div #label-weissemagie,.charsheet .container .main input#schwarzemagie:checked~div #label-schwarzemagie,.charsheet .container .main input#wildemagie:checked~div #label-wildemagie,.charsheet .container .main input#elementaremagie:checked~div #label-elementaremagie,.charsheet .container .main input#freiemagie:checked~div #label-freiemagie,.charsheet .container .main input#zeichenmagie:checked~div #label-zeichenmagie,.charsheet .container .main input#wundermagie:checked~div #label-wundermagie,.charsheet .container .main input#bardenmagie:checked~div #label-bardenmagie,.charsheet .container .main input#schamanenmagie:checked~div #label-schamanenmagie{background-color:#b22222}.charsheet .container .main .fertigkeiten .grid,.charsheet .container .main .fertigkeiten .items,.charsheet .container .main .fertigkeiten .repcontainer .repitem{grid-template-columns:150px 70px 70px 70px 50px}.charsheet .container .main .kampf .grid,.charsheet .container .main .kampf .repcontainer .repitem{grid-template-columns:303px 70px 140px 70px 70px 70px 50px 50px}.charsheet .container .main .spruchliste .grid,.charsheet .container .main .spruchliste .items,.charsheet .container .main .spruchliste .repcontainer .repitem{grid-template-columns:50px 70px 140px 528px 50px;border-bottom:1px dotted}.charsheet .container .main .spruchliste .grid div,.charsheet .container .main .spruchliste .items div,.charsheet .container .main .spruchliste .repcontainer .repitem div{margin:0}.charsheet .container .main .spruchliste .grid{border:none}.charsheet .container .main .inventar{display:inherit}.charsheet .container .main .inventar input[name=attr_ruestung1],.charsheet .container .main .inventar input[name=attr_ruestung2],.charsheet .container .main .inventar input[name=attr_name]{width:250px}.charsheet .container .main .inventar input{width:84px}.charsheet .container .main .inventar,.charsheet .container .main .notes{display:inherit}.charsheet .container .main .inventar .switch,.charsheet .container .main .notes .switch{float:right;position:relative;top:19px;height:17px;border:1px solid #ccc}.charsheet .container .main .inventar .switch .slider,.charsheet .container .main .notes .switch .slider{box-shadow:none}.charsheet .container .main .inventar .switch .slider:before,.charsheet .container .main .notes .switch .slider:before{height:13px;bottom:2px}.charsheet .container .main .inventar input[name=attr_show_inventar]~div textarea,.charsheet .container .main .notes input[name=attr_show_inventar]~div textarea{display:none}.charsheet .container .main .inventar input[name=attr_show_inventar]:checked~div textarea,.charsheet .container .main .notes input[name=attr_show_inventar]:checked~div textarea{display:inline-block}.charsheet .container .main .inventar input[name=attr_show_notes]~div textarea,.charsheet .container .main .notes input[name=attr_show_notes]~div textarea{display:none}.charsheet .container .main .inventar input[name=attr_show_notes]:checked~div textarea,.charsheet .container .main .notes input[name=attr_show_notes]:checked~div textarea{display:inline-block}.charsheet .container .main .inventar .notes-row:hover .options-flag+span,.charsheet .container .main .inventar .inventar-row:hover .options-flag+span,.charsheet .container .main .notes .notes-row:hover .options-flag+span,.charsheet .container .main .notes .inventar-row:hover .options-flag+span{display:block}body.sheet-darkmode button,body.sheet-darkmode input,body.sheet-darkmode optgroup,body.sheet-darkmode select,body.sheet-darkmode textarea,body.sheet-darkmode .charsheet{color:#eee}body.sheet-darkmode .sheetform{background-color:rgba(0,0,0,0)}body.sheet-darkmode .btn,body.sheet-darkmode .btn.btn-default{color:#c8c3bc;text-shadow:rgba(24,26,27,.75) 0px 1px 1px;background-color:#1e2021;background-image:linear-gradient(rgb(24, 26, 27), rgb(38, 41, 43));border-color:#3e4446 #3e4446 #43494c;box-shadow:rgba(24,26,27,.2) 0px 1px 0px inset,rgba(0,0,0,.05) 0px 1px 2px}.sheet-rolltemplate-magie .sheet-container{background-color:#fff;border-top-left-radius:10px;width:240px}.sheet-rolltemplate-magie .sheet-container .sheet-header{background-color:red;color:#fff;text-align:left;border:1px solid red;font-weight:bold;padding-left:5px}.sheet-rolltemplate-magie .sheet-container .sheet-header span{text-transform:uppercase}.sheet-rolltemplate-magie .sheet-container .sheet-content div{padding:5px}.sheet-rolltemplate-magie .sheet-container .sheet-content div:nth-child(even){background:#eee}.sheet-rolltemplate-magie .sheet-container .sheet-content div span{margin-left:15px;font-weight:bold}.sheet-rolltemplate-magie .sheet-container .sheet-content div.sheet-ergebnis{text-align:left}.sheet-rolltemplate-magie .sheet-container .sheet-content div.sheet-desc_title{padding-top:10px;padding-left:20px;font-weight:bold;text-align:left}.sheet-rolltemplate-magie .sheet-container .sheet-content .sheet-desc{padding:5px;padding-top:0;text-align:center}.sheet-rolltemplate-magie .inlinerollresult{background-color:rgba(0,0,0,0);border:none;position:relative;right:30px;float:right;margin:0}.sheet-rolltemplate-magie .inlinerollresult.fullcrit{color:#3fb315}.sheet-rolltemplate-magie .inlinerollresult.fullcrit.fullfail{color:#b31515}.sheet-rolltemplate-magie .inlinerollresult.fullcrit.importandivoll{color:#4a57ed}.sheet-rolltemplate-magie.sheet-rolltemplate-darkmode .sheet-container{color:#eee;background-color:var(--dark-surface1)}.sheet-rolltemplate-magie.sheet-rolltemplate-darkmode .sheet-container .sheet-content{border:solid 1px var(--dark-surface1);border-top:none}.sheet-rolltemplate-magie.sheet-rolltemplate-darkmode .sheet-container .sheet-content div:nth-child(even){background:var(--dark-surface2)}
|