diff --git a/Fabula Ultima/FabulaUltima.css b/Fabula Ultima/FabulaUltima.css new file mode 100644 index 0000000000..cfcd49eba4 --- /dev/null +++ b/Fabula Ultima/FabulaUltima.css @@ -0,0 +1,472 @@ +/**** General stuff ***/ + +input[type=text] { + border: none; + border-bottom: 1px solid #2d4c45; + border-radius: 0; + background-color: white; + width: 100%; + margin-left: 5px; +} + +input[type=checkbox] { + margin: 0 3px; +} + +input[type=number].circle-container { + width: 50px !important; + height: 50px !important; + padding: 5px; + border: 2px solid #9caca4; + border-radius: 50%; + text-align: center; +} + +.justify-element { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +select { + margin: 5px; +} + +.very-small-width { + width: 45px !important; +} + +.small-width { + width: 65px !important; +} + +.medium-width { + width: 100px; +} + +.full-width { + width: 100%; +} + +.largedialog textarea { + box-sizing: border-box; + height: 65px; +} + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.ui-dialog .charsheet input[type=number] { + margin: 2px; +} + +.tab ul { + list-style-type: none; + padding: 0; + margin: 0; + list-style: ""; +} + +.tab li { + padding-left: 16px; +} + +.tab li::before { + content: "✦"; + padding-right: 8px; + color: #2d4c45; +} + +label { + color: #2d4c45; + text-align: center; +} + +.frame { + border: 2px solid #9caca4; + min-width: 635px; + border-radius: 20px; + padding: 15px; + margin: 10px; + height: fit-content; +} + +.no-frame { + padding: 15px; + min-width: 635px; +} + +.toggle-button { + background-color: white; + border: 2px solid #9caca4; + border-radius: 5px; +} + +.side-padding { + margin: 10px; + padding: 0 15px; +} + +.half-width { + width: 45%; + min-width: 0; +} + +.separation-line { + width: 100%; + margin: 10px; + border-bottom: 2px solid #9caca4; +} + +.inline-display { + display: flex; + justify-content: space-between; + align-items: baseline; + white-space: nowrap; +} + +/**** tabs handler ***/ +/*Configure the tab buttons*/ +.charsheet .sheet-character, +.charsheet .sheet-stats, +.charsheet .sheet-magic, +.charsheet .sheet-class, +.charsheet .sheet-notes { + display: none; +} + +/* show the selected tab */ +.charsheet .sheet-tabstoggle[value="character"]~div.sheet-character, +.charsheet .sheet-tabstoggle[value="stats"]~div.sheet-stats, +.charsheet .sheet-tabstoggle[value="magic"]~div.sheet-magic, +.charsheet .sheet-tabstoggle[value="class"]~div.sheet-class, +.charsheet .sheet-tabstoggle[value="notes"]~div.sheet-notes { + display: block; +} + +/**** Traits *****/ +.charTraits { + margin: 5px; + display: grid; + grid-template-columns: repeat(12); +} + +.charTraits * { + margin: 5px; + padding: unset; + display: inline-flex; +} + +.charTraits .name { + grid-row: row; + grid-column-start: 1; + grid-column-end: 3; +} + +.charTraits .identity { + grid-column-start: 3; + grid-column-end: 12; + grid-row: row; +} + +.charTraits .theme { + grid-column-start: 1; + grid-column-end: 6; + grid-row: row 2; +} + +.charTraits .origin { + grid-column-start: 6; + grid-column-end: 12; + grid-row: row 2; +} + + +/**** Bonds *****/ +.charBonds .grid { + margin: 5px; + display: grid; + grid-template-columns: repeat(2, 50%); + gap: 1px #2d4c45; +} + +.bond { + display: grid; + grid-template-columns: 50% 25% 25%; + margin: 5px; +} + +.bond .name { + grid-row: 1 / 5; + padding: 5px; +} + + +/**** FABULA POINT *****/ +.charFabula .grid { + margin: 5px; + display: grid; + grid-template-areas: + 'input label label' + 'input info-left info-right'; + grid-template-columns: 75px 1.2fr 1fr; +} + +.charFabula label { + grid-area: label +} + +.charFabula input { + grid-area: input +} + +.charFabula .info-left { + grid-area: info-left +} + +.charFabula .info-right { + grid-area: info-right +} + +/**** EXPERIENCE POINT *****/ +.charExperience .grid { + margin: 5px; + display: grid; + grid-template-areas: + 'input label' + 'input infos'; + grid-template-columns: 75px 1fr; +} + +.charExperience label { + grid-area: label +} + +.charExperience input { + grid-area: input +} + +.charExperience div { + grid-area: infos +} + + +/**** ATTRIBUTE *****/ + +.charAttribute { + margin: 5px; +} + +.charAttribute .grid { + display: grid; + grid-template-areas: + 'gird-dex gird-rage' + 'gird-ins gird-rage' + 'grid-migth gird-pois' + 'gird-will gird-pois'; + grid-template-columns: 1fr 0.25fr; +} + +.innerGrid { + display: grid; + grid-template-columns: 1.5fr 1fr; +} + +.charAttribute input[type="text"] { + width: 65px; +} + +.charAttribute.char-dex { + grid-area: gird-dex +} + +.charAttribute.char-ins { + grid-area: gird-ins +} + +.charAttribute.char-migth { + grid-area: grid-migth +} + +.charAttribute.char-will { + grid-area: gird-will +} + +.charAttribute.char-rage { + grid-area: gird-rage; + display: flex; + align-items: center; +} + +.charAttribute.char-pois { + grid-area: gird-pois; + display: flex; + align-items: center; +} + +select[name="attr_dexterity"], +select[name="attr_insight"], +select[name="attr_might"], +select[name="attr_willpower"] { + width: 65px; +} + + +/**** GAUGE *****/ + +.magic, +.inventory { + max-width: 70%; +} + + +.charGauges .grid { + display: grid; + align-items: center; + grid-template-areas: + 'gird-hp gird-add-hp grid-crisis grid-current-hp' + 'grid-mp gird-add-mp empty gird-currrent-mp' + 'gird-ip gird-add-ip empty gird-currrent-ip'; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.gird-hp { + grid-area: gird-hp; +} + +.gird-add-hp { + grid-area: gird-add-hp; +} + +.grid-crisis { + grid-area: grid-crisis; +} + +.grid-current-hp { + grid-area: grid-current-hp; +} + +.grid-mp { + grid-area: grid-mp; +} + +.gird-add-mp { + grid-area: gird-add-mp; +} + +.gird-currrent-mp { + grid-area: gird-currrent-mp; +} + +.gird-ip { + grid-area: gird-ip; +} + +.gird-add-ip { + grid-area: gird-add-ip; +} + +.gird-currrent-ip { + grid-area: gird-currrent-ip; +} + +/*** DEFENSES ***/ + +.charDefenses .inline-display div { + min-width: 15%; +} + +.charDefenses .grid { + display: grid; + grid-template-columns: 1fr 1fr; +} + +/*** ARMOR ***/ + +.charArmor input[type="text"] { + width: 210px; +} + +/**** WEAPON ***/ + +.repeating_weapons.grid { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.weapon .repcontainer .repitem { + width: 50%; + display: -webkit-inline-box; + padding: 15px; +} + +/*** RITUAL ***/ + +.rituals .repcontainer .repitem { + width: 25%; + display: -webkit-inline-box; + padding: 7px; +} + + +.sheet-rolltemplate-Magic .sheet-frame { + border: 2px solid #9caca4; + border-radius: 20px; + padding: 10px; + background-color: white; +} + +.sheet-rolltemplate-Attack .sheet-frame { + border: 2px solid #9caca4; + border-radius: 20px; + padding: 10px; + background-color: white; + +} + +.sheet-rolltemplate-Skills .sheet-frame { + border: 2px solid #9caca4; + border-radius: 20px; + padding: 10px; + background-color: white; + +} + +.sheet-rolltemplate-Magic h3 { + color: #2d4c45; +} + +.sheet-rolltemplate-Skills h3 { + color: #2d4c45; +} + +.sheet-rolltemplate-Attack h3 { + color: #2d4c45; +} + +.sheet-rolltemplate-Magic h4 { + color: #9caca4; +} + +.sheet-rolltemplate-Skills h4 { + color: #9caca4; +} + +.sheet-rolltemplate-Attack h4 { + color: #9caca4; +} + +.sheet-rolltemplate-Attack h5 { + color: black; +} + +.sheet-rolltemplate-Attack .inlinerollresult { + background-color: white !important; +} + +.sheet-rolltemplate-Skills .inlinerollresult { + background-color: white !important; +} \ No newline at end of file diff --git a/Fabula Ultima/FabulaUltima.html b/Fabula Ultima/FabulaUltima.html new file mode 100644 index 0000000000..ed8e7bef8b --- /dev/null +++ b/Fabula Ultima/FabulaUltima.html @@ -0,0 +1,1304 @@ + + + + + + + + +