diff --git a/DeusVault/DeusVault.css b/DeusVault/DeusVault.css new file mode 100644 index 0000000000..df11cfd025 --- /dev/null +++ b/DeusVault/DeusVault.css @@ -0,0 +1,686 @@ +@import url("https://fonts.googleapis.com/css?family=Material+Icons&display=swap"); + +.sheetform, +.charactersheet { + background-color: transparent !important; +} + +.sheet-body { + --background-image-url: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/DeusVault/images/background.jpg); + --option-image-url: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/DeusVault/images/options.png); + + --input-border-color: #d8d4d3; + --rounded-input-border-color: #ece9e9; + --button-roll-color: #3e3431; + --text-color: #3e3431; + --beige-color: #a69c73; + --light-beige-color: #fcf8f2; + --font: "Lucida Calligraphy"; +} + +.sheet-body { + position: relative; + left: 0; + right: 0; +} + +.sheet-body, +.sheet-options, +.sheet-fiche { + width: 950px; + box-sizing: border-box; +} + +.sheet-body, +input, +select, +textarea { + font-family: var(--font), "Comic Sans MS", "Comic Sans", cursive; + color: var(--text-color); +} + +.sheet-body input, +.sheet-body select, +.sheet-body textarea { + background-color: rgba(255, 255, 255, 0.5); +} + +.sheet-general-informations input { + border: 0px; + padding: 0px; +} + +.sheet-input-field { + display: flex; + flex-direction: row; + align-items: center; +} + +.sheet-text-center { + text-align: center; +} + +.sheet-option-btn { + position: absolute; + opacity: 0; + z-index: 2; + width: 20px !important; + height: 20px !important; +} + +.sheet-option-btn + span { + height: 20px; + width: 20px; + position: absolute; + z-index: 1; +} + +.sheet-option-btn + span { + content: var(--option-image-url); +} + +.sheet-option-btn:hover + span { + background-color: rgba(0, 0, 0, 0.1); +} + +.sheet-extend-btn, +.sheet-extend-btn + span { + left: calc(100% - 20px); +} + +[name="attr_options_show"]:not(:checked) ~ .sheet-options { + display: none; +} + +.sheet-options { + padding: 20px 10px 10px 10px; + background-color: rgb(245, 245, 265); + border: 1px solid black; +} + +.sheet-options > label { + margin-left: 10px; +} + +.sheet-fiche { + background: #fcf8f2 var(--background-image-url) no-repeat center top; + border: 1px solid var(--beige-color); + background-size: cover; + position: absolute; + padding: 15px; +} + +.sheet-darkmode .sheet-fiche { + background: #fcf8f2 var(--background-image-url) no-repeat center top; +} + +.sheet-fiche > div + div { + margin-top: 20px; +} + +.sheet-box { + border: 3px groove var(--input-border-color); +} + +.sheet-character-avatar { + width: 150px; + height: 150px; +} + +.sheet-button-roll { + margin: 0px; + padding: 2px; + background: transparent; + border: transparent; + font-size: 28px; + box-shadow: none; + line-height: 25px; + z-index: 999; + color: var(--button-roll-color); + text-shadow: 0 0.5px 0px var(--button-roll-color); +} + +.sheet-button-roll::before { + font-family: "dicefontd20" !important; + content: "t"; + text-shadow: none; + vertical-align: bottom; + font-size: 25px; +} + +.sheet-button-roll:hover { + background-color: rgba(0, 0, 0, 0.1); + border-radius: 5px; +} + +.sheet-general-informations { + display: flex; + flex-direction: row; + column-gap: 25px; +} + +.sheet-general-informations > * { + margin-top: auto; + margin-bottom: auto; +} + +.sheet-character-informations { + display: flex; + flex-direction: column; + justify-content: space-around; + height: 150px; +} + +.sheet-character-informations > div:first-child > .sheet-input-field { + width: 100%; +} + +.sheet-input-field > span { + font-weight: bold; + margin-right: 5px; +} + +.sheet-character-informations input { + border-bottom: 1px solid var(--input-border-color); + width: 100%; +} + +.sheet-character-informations > div { + width: 300px; + display: flex; + flex-direction: row; +} + +.sheet-character-informations .sheet-input-field + .sheet-input-field { + margin-left: 20px; +} + +.sheet-input-field.sheet-input-field-age, +.sheet-input-field.sheet-input-field-level, +.sheet-input-field.sheet-input-field-experience { + width: unset; +} + +.sheet-input-field-age > input, +.sheet-input-field-level > input, +.sheet-input-field-experience > input { + width: 50px; +} + +.sheet-character-status { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.sheet-character-status > div { + display: flex; + flex-direction: column; + margin-top: auto; + width: 120px; +} + +.sheet-character-status > div > div > input { + border: 2px solid var(--input-border-color); + border-radius: 100%; + text-align: center; +} + +.sheet-character-status > div > div:first-child > input { + font-size: 25px; +} + +.sheet-character-status > div > div { + position: relative; +} + +.sheet-character-status > div > div.sheet-s-50 > input { + height: 50px; + width: 50px; +} + +.sheet-character-status > div > div.sheet-s-65 > input { + height: 65px; + width: 65px; +} + +.sheet-character-status > div > div.sheet-s-80 > input { + height: 80px; + width: 80px; +} + +.sheet-character-status > div > span { + text-transform: uppercase; +} + +.sheet-character-status > div > * { + text-align: center; +} + +.sheet-character-status > div > div > div > input { + border-radius: 100%; + text-align: center; +} + +.sheet-character-status > div > div > div:not(:first-child) { + position: absolute; + width: max-content; +} + +.sheet-character-status > div > div > div:nth-child(2) { + top: 0; +} + +.sheet-character-status > div > div > div:nth-child(3) { + bottom: 0; +} + +.sheet-character-status > div > div.sheet-s-65 > div:not(:first-child) > input { + height: 30px !important; + width: 30px !important; +} + +.sheet-character-status > div > div.sheet-s-65 > div:not(:first-child) { + left: 87px; +} + +.sheet-character-status > div > div.sheet-s-80 > div:not(:first-child) > input { + height: 35px !important; + width: 35px !important; +} + +.sheet-character-status > div > div.sheet-s-80 > div:not(:first-child) { + left: 93px; +} + +.sheet-caracteristiques { + margin: auto; +} + +.sheet-caracteristiques > div { + display: flex; + flex-direction: row; + column-gap: 10px; +} + +.sheet-caracteristiques > div > div:first-child { + flex-grow: 1; +} + +.sheet-caracteristiques > div > div:last-child { + margin: auto; +} + +.sheet-caracteristiques .sheet-button-roll { + font-size: 20px; + font-size: 1.3em; +} + +.sheet-caracteristiques input { + width: 30px; + border: 2px solid var(--input-border-color); + text-align: center; +} + +.sheet-section-buttons { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.sheet-section-buttons > label { + width: 240px; + border: 2px solid var(--input-border-color); + border-radius: 30px; + cursor: pointer; + color: var(--text-color) !important; + text-align: center; + padding: 5px 5px; +} + +.sheet-section-buttons > label:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +input[type="hidden"][name="attr_section"][value="1"] ~ * label[for="section-1"], +input[type="hidden"][name="attr_section"][value="2"] ~ * label[for="section-2"], +input[type="hidden"][name="attr_section"][value="3"] ~ * label[for="section-3"] { + background-color: rgba(0, 0, 0, 0.2); +} + +input[type="hidden"][name="attr_section"][value="1"] ~ * [data-section-id]:not([data-section-id*="|1|"]), +input[type="hidden"][name="attr_section"][value="2"] ~ * [data-section-id]:not([data-section-id*="|2|"]), +input[type="hidden"][name="attr_section"][value="3"] ~ * [data-section-id]:not([data-section-id*="|3|"]) { + display: none !important; +} + +.sheet-fiche > hr, +.sheet-sections-container-col > hr { + box-shadow: 0px 2px 2px var(--text-color); + border-width: 1px; + width: 95%; +} + +.sheet-sections-container-col > hr { + margin-top: 0; + margin-bottom: 0; +} + +.sheet-sections-container { + display: flex; + flex-direction: row; + column-gap: 20px; + justify-content: space-around; +} + +.sheet-sections-container-col { + display: flex; + flex-direction: column; + row-gap: 20px; +} + +.sheet-sections-container > div { + width: 100%; +} + +.sheet-sections-container > hr { + height: auto; + width: 1px; + box-shadow: 2px 0px 2px var(--text-color); + border-width: 1px; +} + +.sheet-section-title { + position: relative; + width: max-content; + margin-right: auto; + margin-left: auto; +} + +.sheet-section:hover .sheet-section-title .sheet-option-btn.sheet-extend-btn, +.sheet-section:hover .sheet-section-title .sheet-option-btn.sheet-extend-btn + span { + display: unset; +} + +.sheet-section-title .sheet-option-btn.sheet-extend-btn, +.sheet-section-title .sheet-option-btn.sheet-extend-btn + span { + display: none; + left: calc(100% + 10px); + bottom: 6px; +} + +.sheet-section-title h2 { + text-align: center; +} + +.sheet-link { + display: flex; + flex-direction: row; + align-items: center; + font-weight: bold; +} + +.sheet-link select { + width: 62px; + padding: 0; + margin-bottom: 0; +} + +.sheet-link select > option { + text-transform: uppercase; +} + +.sheet-skill-section { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin-top: 5px; +} + +.sheet-skill-section .sheet-button-roll { + font-size: 25px; +} + +.sheet-skill-section > .sheet-link { + margin-right: 5px; + margin-left: 5px; +} + +input.sheet-mastery-value, +input.sheet-mastery-bonus { + width: 40px; + text-align: center; +} + +input.sheet-mastery-bonus { + margin-left: 5px; + margin-right: 5px; +} + +input.sheet-mastery-value { + background: transparent; +} + +.sheet-link + input.sheet-mastery-bonus { + margin-left: 0; +} + +.sheet-display-repcontrol .repcontrol { + visibility: hidden; + margin-top: 5px; +} + +.editmode ~ .repcontrol, +.sheet-display-repcontrol:hover .repcontrol { + visibility: unset; +} + +.sheet-attack-section .sheet-skill-section { + padding-right: 20px; +} + +.sheet-attack-section:not(:hover) .sheet-extend-btn, +.sheet-attack-section:not(:hover) .sheet-extend-btn + span { + display: none; +} + +[name="attr_extended"][type="hidden"]:not([value="on"]) ~ .sheet-extended-attack-section { + display: none; +} + +.sheet-extended-attack-section { + margin-top: -15px; +} + +.sheet-input-field.sheet-description-field { + flex-direction: column; +} + +.sheet-input-field.sheet-description-field > * { + margin-right: auto; +} + +.sheet-input-field.sheet-description-field > textarea { + box-sizing: border-box; + height: 60px; +} + +.sheet-attack-section .sheet-mastery-value, +.sheet-attack-section .sheet-mastery-bonus { + height: 60px !important; + width: 70px !important; + border: 2px solid var(--input-border-color); + background-color: rgba(255, 255, 255, 0.5); + border-radius: 100%; + margin-left: 20px; +} + +.sheet-skill-section > input[type="checkbox"] { + margin-right: 5px; + margin-left: 5px; + height: 20px; + width: 20px; +} + +.sheet-talent-title { + display: flex; + flex-direction: row; + column-gap: 10px; + align-items: baseline; + width: 100%; + min-width: max-content; +} + +.sheet-talent-title > label { + margin-bottom: 0; +} + +.sheet-skill-xp { + display: flex; + flex-direction: row; + align-items: baseline; + font-weight: bold; + margin-left: 5px; + margin-right: 5px; +} + +.sheet-skill-xp > input { + width: 50px; +} + +.sheet-retract-icon, +.sheet-expend-icon { + vertical-align: bottom; +} + +.sheet-expand-talent-btn:checked ~ .sheet-talent-title .sheet-expend-icon { + display: none; +} +.sheet-expand-talent-btn:not(:checked) ~ .sheet-talent-title .sheet-retract-icon { + display: none; +} + +.sheet-expand-talent-btn:not(:checked) ~ :not(.sheet-talent-title) { + display: none; +} + +.sheet-talent-container { + display: flex; + flex-direction: column; +} + +.sheet-sections-container.sheet-inventory-sections-container { + flex-direction: column; +} + +.sheet-inventory-container { + display: flex; + flex-direction: row; +} + +.sheet-inventory-sections-container textarea { + box-sizing: border-box; + height: 250px; +} + +.sheet-inventory-container .sheet-inventory-section, +.sheet-inventory-container .sheet-equipment-section { + flex-grow: 1; + margin: 5px; + height: 100%; +} + +.sheet-money-section { + margin-top: 30px; + display: flex; + flex-direction: column; +} + +.sheet-currency-input { + background-color: rgba(255, 255, 255, 0.5); + border: 2px solid var(--input-border-color); + height: 60px !important; + width: 60px !important; + border-radius: 100%; + padding: 0 !important; + text-align: center !important; + position: relative; + margin: 0 !important; +} + +.sheet-currency-input > span { + position: absolute; + bottom: 0; + left: 0; + right: 0; +} + +.sheet-currency-input input { + background: transparent; + border: none; + font-size: 20px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + text-align: center; +} + +.sheet-inventory-container text { + width: 100%; + height: 300px; +} + +.sheet-notes-section { + width: 100%; +} + +.sheet-notes-section textarea { + width: 100%; + height: 200px; +} + +/* + ROLLTEMPLATES +*/ +.sheet-rolltemplate-rt1 .sheet-rt1-success { + margin-top: 5px; + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.sheet-rolltemplate-rt1 .sheet-rt1-success > div { + display: none; +} + +.sheet-rolltemplate-rt1 .sheet-rt1-success > .sheet-rt1-success-level { + padding: 2px; +} + +.sheet-rolltemplate-rt1 .sheet-rt1-success > div + .sheet-rt1-success-level, +.sheet-rolltemplate-rt1 .sheet-rt1-success > div + .sheet-rt1-success-level, +.sheet-rolltemplate-rt1 .sheet-rt1-success > div + .sheet-rt1-success-level, +.sheet-rolltemplate-rt1 .sheet-rt1-success > div + .sheet-rt1-success-level, +.sheet-rolltemplate-rt1 .sheet-rt1-success > div + .sheet-rt1-success-level { + border: 1px solid #3e3431; + border-radius: 5px; +} + +.sheet-rolltemplate-rt1 .sheet-rt1-roll > div { + width: max-content; + font-size: 24px; + margin: 20px auto 10px auto; +} + +.sheet-rolltemplate-rt1 .sheet-rt1-roll .inlinerollresult { + background: transparent; + border: none; +} + +.sheet-rolltemplate-rt1 .sheet-rt1-rollvalue > span { + font-weight: bold; +} diff --git a/DeusVault/DeusVault.html b/DeusVault/DeusVault.html new file mode 100644 index 0000000000..225b5af3db --- /dev/null +++ b/DeusVault/DeusVault.html @@ -0,0 +1,1183 @@ +