diff --git a/DonjonsEtChatons/donjonsetchatons.css b/DonjonsEtChatons/donjonsetchatons.css new file mode 100644 index 0000000000..9971f42183 --- /dev/null +++ b/DonjonsEtChatons/donjonsetchatons.css @@ -0,0 +1,1143 @@ +/* +SPECIAL DARK MODE +*/ +body.sheet-darkmode span, +body.sheet-darkmode h1, +body.sheet-darkmode h2, +body.sheet-darkmode h3, +body.sheet-darkmode b, +body.sheet-darkmode p { + color: RGB(179, 179, 179) !important; + letter-spacing: 1px !important; +} +body.sheet-darkmode input, +body.sheet-darkmode select, +body.sheet-darkmode textarea { + color: RGB(179, 179, 179) !important; +} +body.sheet-darkmode input option, +body.sheet-darkmode select option, +body.sheet-darkmode textarea option { + background: RGB(50, 47, 31) !important; +} +body.sheet-darkmode div.charsheet { + background: RGB(50, 47, 31) !important; +} +body.sheet-darkmode div.col label.name { + background: RGB(31, 31, 31) !important; +} +body.sheet-darkmode div.col div.identite, body.sheet-darkmode div.col div.don, body.sheet-darkmode div.col div.experience { + background: RGB(31, 31, 31) !important; +} +body.sheet-darkmode div.qualites div.input img { + filter: brightness(80%); +} +body.sheet-darkmode div.qualites div.input input { + color: black !important; +} +body.sheet-darkmode div.valeurs div.coeur img, body.sheet-darkmode div.valeurs div.amitie img { + filter: brightness(80%); +} +body.sheet-darkmode div.valeurs div.coeur input, body.sheet-darkmode div.valeurs div.amitie input { + color: black !important; +} +body.sheet-darkmode div.config { + background: RGB(31, 31, 31) !important; + border-color: RGB(207, 161, 120) !important; +} +body.sheet-darkmode div.menu input[type=hidden][value="1"] ~ button:nth-of-type(1) { + filter: brightness(80%); +} +body.sheet-darkmode div.menu input[type=hidden][value="1"] ~ button:nth-of-type(1) span { + color: black !important; +} +body.sheet-darkmode div.menu input[type=hidden][value="2"] ~ button:nth-of-type(2) { + filter: brightness(80%); +} +body.sheet-darkmode div.menu input[type=hidden][value="2"] ~ button:nth-of-type(2) span { + color: black !important; +} +body.sheet-darkmode div.menu input[type=hidden][value="3"] ~ button:nth-of-type(3) { + filter: brightness(80%); +} +body.sheet-darkmode div.menu input[type=hidden][value="3"] ~ button:nth-of-type(3) span { + color: black !important; +} +body.sheet-darkmode div.tab2 div.repitem, body.sheet-darkmode div.tab3 div.repitem { + background: RGB(31, 31, 31) !important; +} +body.sheet-darkmode label.config span::before { + color: RGB(179, 179, 179) !important; +} + +div.charsheet { + background: RGB(250, 247, 231); +} +div.charsheet > div.content { + display: flex; + flex-wrap: wrap; + min-width: 700px; + justify-content: space-between; + /* + /////////////////// + ZONES AUTOEXPENSIBLES + /////////////////// + */ + /*CORPS GENERAL*/ + /*MENU*/ +} +div.charsheet > div.content select { + margin-bottom: 0px; + border-radius: 0px; + color: black; +} +div.charsheet > div.content input[type=number]::-webkit-outer-spin-button, +div.charsheet > div.content input[type=number]::-webkit-inner-spin-button { + -webkit-appearance: none; + appearance: none; + margin: 0; +} +div.charsheet > div.content input[type=number], +div.charsheet > div.content input[type=text] { + -moz-appearance: textfield; + appearance: textfield; + border-radius: 0px; + color: black; +} +div.charsheet > div.content input[disabled] { + background-color: transparent; + cursor: not-allowed; +} +div.charsheet > div.content input:focus-visible, +div.charsheet > div.content textarea:focus-visible { + z-index: 99; +} +div.charsheet > div.content textarea { + border: none; + width: 100%; + padding: 0px; + text-align: justify; + border-radius: 0px; + color: black; + margin: 0px; +} +div.charsheet > div.content label { + margin: 0px; + padding: 0px; +} +div.charsheet > div.content input, +div.charsheet > div.content select, +div.charsheet > div.content textarea { + background: transparent; + font-family: "patrick hand"; + letter-spacing: 1px; +} +div.charsheet > div.content span { + font-family: "patrick hand"; +} +div.charsheet > div.content div.autoex { + line-height: 1.4em; + min-height: 1.4em; + cursor: text; + text-align: left; + position: relative; + width: 100%; + font-family: "patrick hand"; + letter-spacing: 1px; +} +div.charsheet > div.content div.autoex > span { + visibility: hidden; + display: block; + font-family: inherit; + font-size: inherit; + line-height: inherit; + white-space: pre-wrap; + text-align: inherit; + min-height: inherit; + height: 100%; + word-wrap: anywhere; + padding-left: 2px; +} +div.charsheet > div.content div.autoex > textarea { + display: block; + z-index: 1; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: calc(100% - 4px); + overflow: hidden; + font-family: inherit; + font-size: inherit; + line-height: inherit; + white-space: pre-wrap; + text-align: inherit; + min-height: inherit; + resize: none; + padding-right: 2px; + padding-left: 2px; +} +div.charsheet > div.content div.autoex > textarea::placeholder { + font-family: "Contrail One"; + color: rgba(87, 89, 87, 0.8549019608); + text-transform: capitalize; + font-style: italic; + text-align: center; + font-size: 95%; + font-weight: normal; +} +div.charsheet > div.content div.autoex22 { + min-height: 22px; +} +div.charsheet > div.content div.autoex28 { + min-height: 28px; +} +div.charsheet > div.content div.autoex40 { + min-height: 40px; +} +div.charsheet > div.content div.autoex100 { + min-height: 100px; +} +div.charsheet > div.content div.itemcontrol { + z-index: 999; +} +div.charsheet > div.content div.body { + display: none; + width: 100%; + flex-wrap: wrap; + justify-content: space-between; + min-width: 700px; +} +div.charsheet > div.content div.header { + /* + ///PARAMETRES EXISTANTS\\\ + */ + display: flex; + width: 100%; + justify-content: space-between; + flex-wrap: wrap; +} +div.charsheet > div.content div.header h1.titre { + width: 100%; + align-content: baseline; + background: transparent; + font-variant: small-caps; + color: black; + line-height: 45px; + min-height: 39px; + justify-content: center; + display: flex; + text-align: center; + font-size: 39px; + font-family: "Patrick Hand"; +} +div.charsheet > div.content div.header label.config { + position: absolute; + width: 23px; + height: 23px; + right: 15px; +} +div.charsheet > div.content div.header label.config span { + width: 23px; + height: 23px; +} +div.charsheet > div.content div.header label.config span::before { + content: "y"; + color: black; + font-family: "pictos"; + font-variant: initial; + font-size: 26px; + line-height: 23px; + height: 23px; + width: 23px; + display: block; + text-align: center; + opacity: 0.5; +} +div.charsheet > div.content div.header label.config input[type=checkbox] { + position: absolute; + width: 23px; + height: 23px; + opacity: 0; + z-index: 999; +} +div.charsheet > div.content div.header label.config input[type=checkbox]:checked ~ span::before { + opacity: 1; +} +div.charsheet > div.content div.header input[type=hidden][value="1"] ~ div.config { + display: flex; +} +div.charsheet > div.content div.header div.config { + display: none; + position: absolute; + justify-content: space-between; + flex-wrap: wrap; + width: 180px; + padding: 5px; + background: RGB(250, 247, 231); + border: 1px solid black; + border-radius: 5px; + right: 15px; + z-index: 9999; + margin-right: 13px; + margin-top: 13px; +} +div.charsheet > div.content div.header div.config div.full { + width: 100%; +} +div.charsheet > div.content div.header div.config div.half { + width: calc(50% - 4px); +} +div.charsheet > div.content div.header div.config div { + flex-grow: 1; + align-items: center; + padding: 2px; + font-size: 10px; + min-height: 24px; + line-height: 20px; +} +div.charsheet > div.content div.header div.config div label { + display: flex; + margin: 0; + padding: 0; + width: auto; + font: inherit; + justify-content: space-between; +} +div.charsheet > div.content div.header div.config div label span { + font: inherit; +} +div.charsheet > div.content div.header div.config div label select { + width: 80px; + margin: 0 0 0 0; + padding-top: 0; + padding-right: 0; + padding-bottom: 0; + padding-left: 5px; + height: 20px; +} +div.charsheet > div.content div.header div.config div label input[type=checkbox] { + margin-right: 5px; + width: 20px; + height: 20px; +} +div.charsheet > div.content div.header div.config div label.plainText span { + width: 100%; + font-weight: bold; + justify-content: center; +} +div.charsheet > div.content div.header div.config div label.plainText span:nth-of-type(2) { + font-variant: small-caps; +} +div.charsheet > div.content div.header div.config div label.plainText textarea { + height: 50px; + border-top: 1px solid black; + border-left: 1px solid black; + border-right: 1px solid black; +} +div.charsheet > div.content div.header div.config div label.plainText button[type=action] { + width: 100%; + padding: 0px; + justify-content: center; + font-variant: small-caps; + border: 1px solid black; + font-weight: bold; +} +div.charsheet > div.content div.header div.config div.textarea { + width: 100%; + flex-wrap: wrap; +} +div.charsheet > div.content div.header div.config div.textarea label { + display: flex; + flex-wrap: wrap; + width: 100%; +} +div.charsheet > div.content div.header div.config div.textarea label span { + display: flex; + width: 100%; + justify-content: center; +} +div.charsheet > div.content div.header div.config div.textarea label span:first-of-type { + font-weight: bold; +} +div.charsheet > div.content div.header div.config div.textarea label span:last-of-type { + font-weight: normal; + font-variant: small-caps; +} +div.charsheet > div.content div.header div.config div.textarea label textarea { + height: 50px; + border-top: 1px solid black; + border-right: 1px solid black; + border-left: 1px solid black; + border-bottom: 0px; +} +div.charsheet > div.content div.header div.config div.textarea button[type=action] { + width: 100%; + padding: 0px; + justify-content: center; + font-variant: small-caps; + border: 1px solid black; + font-weight: bold; +} +div.charsheet > div.content div.header label.name { + display: flex; + align-content: center; + align-items: center; + width: 100%; + background: white; + border: 2px solid RGB(207, 161, 120); + border-radius: 25px; + padding: 5px; + padding-right: 10px; +} +div.charsheet > div.content div.header label.name span { + width: max-content; + font-size: 16px; + font-family: "patrick hand"; +} +div.charsheet > div.content div.header label.name input { + width: 100%; + border: 0px; + padding-left: 5px; + font-size: 16px; + font-family: "patrick hand"; +} +div.charsheet > div.content div.header div.line { + display: flex; + width: 100%; + justify-content: space-between; +} +div.charsheet > div.content div.header div.col { + position: relative; + display: flex; + flex-wrap: wrap; + width: calc(50% - 10px); + align-items: flex-start; + align-content: flex-start; +} +div.charsheet > div.content div.header div.identite { + display: flex; + width: 100%; + justify-content: space-between; + flex-wrap: wrap; + background: white; + padding: 5px; + padding-right: 10px; + border: 2px solid RGB(207, 161, 120); + border-radius: 25px; + margin-top: 5px; +} +div.charsheet > div.content div.header div.identite label { + display: flex; + align-content: center; + align-items: center; + width: 100%; +} +div.charsheet > div.content div.header div.identite label span { + width: max-content; + font-size: 16px; +} +div.charsheet > div.content div.header div.identite label input { + width: 100%; + border: 0px; + padding-left: 5px; + font-size: 16px; +} +div.charsheet > div.content div.header div.don { + display: flex; + width: 100%; + justify-content: space-between; + flex-wrap: wrap; + background: white; + padding: 10px; + border: 2px solid RGB(207, 161, 120); + border-radius: 25px; + font-family: "patrick hand"; + font-size: 14px; +} +div.charsheet > div.content div.header div.don > span { + width: max-content; + font-size: 16px; + font-weight: bold; + font-family: "patrick hand"; +} +div.charsheet > div.content div.header div.experience { + display: flex; + width: 100%; + justify-content: space-between; + background: white; + padding: 5px; + padding-right: 10px; + border: 2px solid RGB(207, 161, 120); + border-radius: 25px; + margin-top: 5px; + margin-bottom: 5px; + align-items: center; + align-content: center; +} +div.charsheet > div.content div.header div.experience > span { + display: flex; + width: 75px; + font-size: 16px; + font-weight: bold; + font-family: "patrick hand"; + text-align: center; +} +div.charsheet > div.content div.header div.experience div.double { + display: flex; + flex-wrap: wrap; + position: relative; + width: calc(100% - 75px); + align-items: center; + align-content: center; + position: relative; +} +div.charsheet > div.content div.header div.experience div.double input { + width: calc(50% - 7.5px); + border: 0px; + background: transparent; + text-align: center; + height: 49px; + font-size: 34px; + font-family: "Patrick Hand"; +} +div.charsheet > div.content div.header div.experience div.double input:first-of-type { + text-align: right; +} +div.charsheet > div.content div.header div.experience div.double input:last-of-type { + text-align: left; +} +div.charsheet > div.content div.header div.experience div.double > span.separateur { + display: block; + width: 15px; + text-align: center; + font-size: 33px; + font-weight: bold; + font-family: "patrick hand"; + line-height: 30px; + color: RGB(207, 161, 120); +} +div.charsheet > div.content div.header div.experience div.double > span.absoluteL, div.charsheet > div.content div.header div.experience div.double > span.absoluteR { + width: 50%; + position: absolute; + font-family: "patrick hand"; + bottom: -3px; +} +div.charsheet > div.content div.header div.experience div.double > span.absoluteL { + text-align: center; +} +div.charsheet > div.content div.header div.experience div.double > span.absoluteR { + text-align: center; + right: 0px; +} +div.charsheet > div.content div.header div.qualites { + display: flex; + width: 390px; + justify-content: space-between; + align-items: flex-end; + align-content: flex-end; + flex-wrap: wrap; +} +div.charsheet > div.content div.header div.qualites button[type=roll].rollDice, +div.charsheet > div.content div.header div.qualites button[type=action].rollDice { + background: url(https://imgsrv.roll20.net/?src=https%3A//cdn.pixabay.com/photo/2014/04/03/11/56/dice-312621_960_720.png); + background-color: white; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + width: 28px; + height: 28px; + padding: 0px; + margin: 0px; + border: 0px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + z-index: 50; + margin-left: auto; + box-shadow: none; +} +div.charsheet > div.content div.header div.qualites button[type=roll].rollDice::before, +div.charsheet > div.content div.header div.qualites button[type=action].rollDice::before { + content: ""; +} +div.charsheet > div.content div.header div.qualites button[type=roll].rollDice:hover, +div.charsheet > div.content div.header div.qualites button[type=action].rollDice:hover { + box-shadow: inset 0px 0px 5px; +} +div.charsheet > div.content div.header div.qualites div.blockInput { + display: flex; + flex-wrap: wrap; + position: relative; + height: 157px; + width: 125px; +} +div.charsheet > div.content div.header div.qualites div.blockInput label { + display: flex; + width: 100%; + justify-content: center; + cursor: pointer; +} +div.charsheet > div.content div.header div.qualites div.blockInput label span { + display: block; + width: max-content; + margin-left: 2px; + text-align: center; + font-size: 18px; + font-weight: bold; + font-family: "patrick hand"; + line-height: 30px; +} +div.charsheet > div.content div.header div.qualites div.blockInput label button.rollDice { + margin: 0px; + border: 1px solid black; +} +div.charsheet > div.content div.header div.qualites div.input { + display: flex; + position: relative; + height: 127px; + width: 100%; +} +div.charsheet > div.content div.header div.qualites div.input input { + position: absolute; + border-radius: 50%; + border: 0px; + background: transparent; + text-align: center; + top: calc(50% - 30px); + height: 74px; + width: 74px; + left: calc(50% - 37px); + font-size: 34px; + font-family: "Patrick Hand"; +} +div.charsheet > div.content div.header div.valeurs { + display: flex; + width: 343px; + justify-content: space-between; + align-items: end; + flex-wrap: wrap; +} +div.charsheet > div.content div.header div.valeurs div.coeur { + display: flex; + flex-wrap: wrap; + position: relative; + height: 175px; + width: 164px; +} +div.charsheet > div.content div.header div.valeurs div.coeur div.blockInput { + position: absolute; + display: flex; + justify-content: center; + top: calc(50% - 45px); + width: 100%; +} +div.charsheet > div.content div.header div.valeurs div.coeur > span { + display: block; + width: 100%; + text-align: center; + font-size: 18px; + font-weight: bold; + font-family: "patrick hand"; + line-height: 30px; +} +div.charsheet > div.content div.header div.valeurs div.amitie { + display: flex; + flex-wrap: wrap; + position: relative; + height: 205px; + width: 164px; +} +div.charsheet > div.content div.header div.valeurs div.amitie div.blockInput { + position: absolute; + display: flex; + justify-content: center; + top: calc(75% - 57px); + width: 100%; +} +div.charsheet > div.content div.header div.valeurs div.amitie > span { + display: block; + width: 100%; + text-align: center; + font-size: 18px; + font-weight: bold; + font-family: "patrick hand"; + line-height: 30px; +} +div.charsheet > div.content div.header div.valeurs div.blockInput span { + height: 49px; + width: 15px; + font-size: 34px; + font-family: "Patrick Hand"; +} +div.charsheet > div.content div.header div.valeurs div input { + border-radius: 50%; + border: 0px; + background: transparent; + text-align: center; + height: 49px; + width: 37px; + font-size: 34px; + font-family: "Patrick Hand"; +} +div.charsheet > div.content div.header div.valeurs div input:first-of-type { + text-align: right; +} +div.charsheet > div.content div.header div.valeurs div input:last-of-type { + text-align: left; +} +div.charsheet > div.content div.menu { + display: flex; + width: 100%; + justify-content: space-evenly; + align-content: end; + align-items: end; + flex-wrap: wrap; + padding-bottom: 5px; + margin-bottom: 5px; + margin-top: 5px; + min-width: 700px; + /*div { + &.buttons { + display: flex; + width: 100%; + justify-content: space-evenly; + align-content: end; + align-items: end; + flex-wrap: wrap; + + & > label { + display:flex; + width:130px; + margin-bottom:2px; + + & > input[type="radio"] { + position:absolute; + width:130px; + height:27px; + opacity:0; + border-radius:10px; + + & + span { + display:inline-block; + width:100%; + + &::before { + content:attr(title); + display:inline-block; + width:calc(100% - 4px); + height:23px; + text-align:center; + background-color:black; + text-shadow: 2px 2px 2px #555555; + font-size:15px; + line-height:23px; + border:2px solid black; + border-radius:10px; + } + } + } + + &:nth-of-type(1) { + & > input[type="radio"] { + & + span { + &::before { + color:$color1; + } + } + + &:checked + span::before + { + background:$background1; + } + } + } + + &:nth-of-type(2) { + & > input[type="radio"] { + & + span { + &::before { + color:$color2; + } + } + + &:checked + span::before + { + background:$background2; + } + } + } + + &:nth-of-type(3) { + & > input[type="radio"] { + & + span { + &::before { + color:$color3; + } + } + + &:checked + span::before + { + background:$background3; + } + } + } + } + } + }*/ +} +div.charsheet > div.content div.menu button { + display: flex; + justify-content: center; + width: 130px; + margin-bottom: 2px; + border: 2px solid black; + border-radius: 10px; + background-color: black; + text-shadow: 2px 2px 2px #555555; + font-size: 15px; + line-height: 23px; + height: 23px; + text-align: center; +} +div.charsheet > div.content div.menu button:nth-of-type(1) { + color: white; +} +div.charsheet > div.content div.menu button:nth-of-type(2) { + color: white; +} +div.charsheet > div.content div.menu button:nth-of-type(3) { + color: white; +} +div.charsheet > div.content div.menu input[type=hidden][value="1"] ~ button:nth-of-type(1) { + background-color: RGB(242, 120, 102); + font-weight: bold; + letter-spacing: 1px; +} +div.charsheet > div.content div.menu input[type=hidden][value="2"] ~ button:nth-of-type(2) { + background-color: RGB(99, 142, 199); + font-weight: bold; + letter-spacing: 1px; +} +div.charsheet > div.content div.menu input[type=hidden][value="3"] ~ button:nth-of-type(3) { + background-color: RGB(109, 192, 114); + font-weight: bold; + letter-spacing: 1px; +} +div.charsheet > div.content input[type=hidden].tabExtend[value="1"] ~ div.tab1, +div.charsheet > div.content input[type=hidden].tabExtend[value="2"] ~ div.tab2, +div.charsheet > div.content input[type=hidden].tabExtend[value="3"] ~ div.tab3 { + display: flex; +} +div.charsheet > div.content div.tab1 div.col { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + align-content: flex-start; + width: calc(33.3333333333% - 10px); +} +div.charsheet > div.content div.tab1 div.col button[type=roll].rollDice, +div.charsheet > div.content div.tab1 div.col button[type=action].rollDice { + background: url(https://imgsrv.roll20.net/?src=https%3A//cdn.pixabay.com/photo/2014/04/03/11/56/dice-312621_960_720.png); + background-color: white; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + width: 28px; + height: 28px; + padding: 0px; + margin: 0px; + border: 0px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + z-index: 50; + margin-left: auto; + box-shadow: none; +} +div.charsheet > div.content div.tab1 div.col button[type=roll].rollDice::before, +div.charsheet > div.content div.tab1 div.col button[type=action].rollDice::before { + content: ""; +} +div.charsheet > div.content div.tab1 div.col button[type=roll].rollDice:hover, +div.charsheet > div.content div.tab1 div.col button[type=action].rollDice:hover { + box-shadow: inset 0px 0px 5px; +} +div.charsheet > div.content div.tab1 div.col div { + display: flex; + width: 100%; + flex-wrap: wrap; +} +div.charsheet > div.content div.tab1 div.col div label { + display: flex; + width: 100%; + margin-top: 5px; +} +div.charsheet > div.content div.tab1 div.col div label input[type=checkbox] { + /* Add if not using autoprefixer */ + -webkit-appearance: none; + appearance: none; + /* For iOS < 15 to remove gradient background */ + background-color: #fff; + /* Not removed via appearance */ + margin: 0; + font: inherit; + color: currentColor; + width: 1.15em; + height: 1.15em; + border: 0.15em solid currentColor; + border-radius: 0.15em; + transform: translateY(-0.075em); + display: grid; + place-content: center; +} +div.charsheet > div.content div.tab1 div.col div label input[type=checkbox]::before { + content: ""; + width: 0.65em; + height: 0.65em; + transform: scale(0); + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em black; + transform-origin: bottom left; + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); +} +div.charsheet > div.content div.tab1 div.col div label input[type=checkbox]:checked::before { + transform: scale(2); + margin-left: -6px; +} +div.charsheet > div.content div.tab1 div.col div label span { + margin-left: 5px; +} +div.charsheet > div.content div.tab1 div.col div select { + display: none; + width: calc(100% - 30px); + border: 1px dashed; + margin: 0px; + padding: 0px; + padding-left: 5px; + padding-right: 5px; + font-size: 14px; + height: 30px; + line-height: 30px; +} +div.charsheet > div.content div.tab1 div.col div button[type=action].rollDice { + display: none; +} +div.charsheet > div.content div.tab1 div.col div input[type=hidden][value=on] ~ select { + display: inline-block; +} +div.charsheet > div.content div.tab1 div.col div input[type=hidden][value=on] ~ button[type=action].rollDice { + display: inline-block; + border: 1px solid black; +} +div.charsheet > div.content div.tab1 div.full { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + align-content: flex-start; + width: 100%; + margin-top: 5px; +} +div.charsheet > div.content div.tab1 div.full p { + width: 100%; + text-align: justify; + margin: 0px; + font-family: "patrick hand"; + font-size: 15px; +} +div.charsheet > div.content div.tab2 { + flex-wrap: wrap; +} +div.charsheet > div.content div.tab2 div.repcontainer { + display: flex; + width: 100%; + justify-content: space-between; + align-items: flex-start; + align-content: flex-start; + flex-wrap: wrap; +} +div.charsheet > div.content div.tab2 div.repcontainer div.repitem { + display: flex; + width: calc(50% - 10px); + flex-wrap: wrap; + background: white; + border-radius: 10px; +} +div.charsheet > div.content div.tab2 div.repcontainer div.repitem input { + width: 100%; + border-top: 0px; + border-left: 0px; + border-right: 0px; + margin: 0px; + padding: 0px; + text-align: center; + border-bottom: 2px solid RGB(207, 161, 120); +} +div.charsheet > div.content div.tab2 div.repcontainer div.repitem:nth-of-type(1n+3) { + margin-top: 5px; +} +div.charsheet > div.content div.tab2 div.repcontainer.editmode div.repitem { + width: 100%; +} +div.charsheet > div.content div.tab2 div.repcontainer.editmode div.repitem:nth-of-type(2) { + margin-top: 5px; +} +div.charsheet > div.content div.tab2 div.repcontrol { + width: 100%; +} +div.charsheet > div.content div.tab3 { + flex-wrap: wrap; +} +div.charsheet > div.content div.tab3 div.repcontainer { + display: flex; + width: 100%; + justify-content: space-between; + align-items: flex-start; + align-content: flex-start; + flex-wrap: wrap; +} +div.charsheet > div.content div.tab3 div.repcontainer div.repitem { + display: flex; + width: calc(50% - 10px); + flex-wrap: wrap; + background: white; + border-radius: 10px; + border: 2px solid RGB(207, 161, 120); +} +div.charsheet > div.content div.tab3 div.repcontainer div.repitem:nth-of-type(1n+3) { + margin-top: 5px; +} +div.charsheet > div.content div.tab3 div.repcontainer div.itemcontrol button.btn, +div.charsheet > div.content div.tab3 div.repcontainer div.itemcontrol a.btn { + padding-top: 0px; + padding-bottom: 2px; +} +div.charsheet > div.content div.tab3 div.repcontainer.editmode div.repitem { + width: 100%; +} +div.charsheet > div.content div.tab3 div.repcontainer.editmode div.repitem:nth-of-type(2) { + margin-top: 5px; +} +div.charsheet > div.content div.tab3 div.repcontrol { + width: 100%; +} +div.charsheet > div.content div.tab3 div.full p { + font-family: "patrick hand"; + text-align: justify; + font-size: 15px; +} +div.charsheet > div.content span.costaud { + color: RGB(242, 120, 102); +} +div.charsheet > div.content span.malin { + color: RGB(99, 142, 199); +} +div.charsheet > div.content span.mignon { + color: RGB(109, 192, 114); +} +div.charsheet > div.content span.coeur { + color: RGB(194, 138, 188); +} +div.charsheet > div.content span.amitie { + color: RGB(209, 156, 69); +} + +.sheet-rolltemplate-simple { + display: flex; + flex-wrap: wrap; + width: 100%; + background: RGB(250, 247, 231); + border-radius: 15px; + padding-top: 10px; + padding-bottom: 10px; +} +.sheet-rolltemplate-simple h1, +.sheet-rolltemplate-simple h2 { + width: 100%; + font-family: "Patrick Hand"; + margin: 0px; + padding: 0px; + text-align: center; +} +.sheet-rolltemplate-simple h2 { + font-size: 14px; + line-height: 20px; +} +.sheet-rolltemplate-simple div.sheet-container { + display: flex; + justify-content: space-between; + width: 100%; + align-items: center; + align-content: center; +} +.sheet-rolltemplate-simple div.sheet-container > span { + display: flex; + width: 50%; + font-family: "Patrick Hand"; +} +.sheet-rolltemplate-simple div.sheet-container > span:first-of-type { + padding-left: 5px; +} +.sheet-rolltemplate-simple div.sheet-container > span:last-of-type { + justify-content: center; +} +.sheet-rolltemplate-simple .inlinerollresult, +.sheet-rolltemplate-simple .inlinerollresult.fullcrit, +.sheet-rolltemplate-simple .inlinerollresult.fullfail, +.sheet-rolltemplate-simple .inlinerollresult.importantroll { + display: flex; + border: 0px; + background: 0px; + padding: 0px; + margin: 0px; + align-items: center; + align-content: center; +} +.sheet-rolltemplate-simple a { + margin-left: auto !important; + margin-right: auto !important; + border: 2px solid black !important; + padding: 5px !important; + background: black !important; + color: white !important; + font-family: "Patrick Hand" !important; + letter-spacing: 1px !important; + border-radius: 15px !important; +} +.sheet-rolltemplate-simple a:hover { + text-decoration: none !important; + background: RGB(242, 120, 102) !important; + text-shadow: 2px 2px 2px #555555 !important; +} + +.sheet-rolltemplate-darkmode { + background: RGB(50, 47, 31) !important; +} +.sheet-rolltemplate-darkmode h1, +.sheet-rolltemplate-darkmode h2, +.sheet-rolltemplate-darkmode span { + letter-spacing: 1px !important; + color: RGB(179, 179, 179) !important; +} +.sheet-rolltemplate-darkmode a { + background-color: RGB(31, 31, 31) !important; + color: RGB(179, 179, 179) !important; +} +.sheet-rolltemplate-darkmode a:hover { + filter: brightness(80%); + color: black !important; + font-weight: bold !important; +} +.sheet-rolltemplate-darkmode .inlinerollresult, +.sheet-rolltemplate-darkmode .inlinerollresult.fullcrit, +.sheet-rolltemplate-darkmode .inlinerollresult.fullfail, +.sheet-rolltemplate-darkmode .inlinerollresult.importantroll { + display: flex; + background: 0px; + padding: 0px; + margin: 0px; + align-items: center; + align-content: center; + background-color: transparent !important; + border: 0px !important; +} \ No newline at end of file diff --git a/DonjonsEtChatons/donjonsetchatons.html b/DonjonsEtChatons/donjonsetchatons.html new file mode 100644 index 0000000000..4ca2bc76b6 --- /dev/null +++ b/DonjonsEtChatons/donjonsetchatons.html @@ -0,0 +1,696 @@ + + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ +
+ + / + +
+ Coeur +
+
+ +
+ + / + +
+ Amitié +
+
+ +
+ + + + + +
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+

Agir : lancer 3d6, chaque résultat inférieur ou égal au score de la Qualité est un succès.

+

Seuil de difficulté : facile 1, moyen 2, difficile 3, légendaire 4.

+

Talent : Donne un Avantage. Avantage : Lancer 4d6. Désavantage : Lancer 2d6.

+

Objets : Si utile, relancer 1d6 dont le résultat ne convient pas.

+

Caractère : Si positif, gagner 1 Avantage / Si négatif, offrir un point d'Amitié.

+
+
+
+ +
+ + +
+
+
+
+
+ + +
+
+ +
+

Une couverture en laine, un couteau de poche, une cuillère en bois, un petit caquelon de fonte, une grande gourde en cuir, un briquet à amadou, des morceaux de chandelle, un morceau de savon, une brosse, un paquet de croquette de route.

+
+
+ +

{{name}}

+ +

{{subname}}

+ + {{#rollTotal() type 3}} +

Jet Standard

+ {{/rollTotal() type 3}} + + {{#rollTotal() type 2}} +

Jet Avec Désavantage

+ {{/rollTotal() type 2}} + + {{#rollTotal() type 4}} +

Jet Avec Avantage

+ {{/rollTotal() type 4}} + +
+ Succès + {{roll}} {{button}} +
+ \ No newline at end of file diff --git a/DonjonsEtChatons/img/Amitié.png b/DonjonsEtChatons/img/Amitié.png new file mode 100644 index 0000000000..6959c04ccc Binary files /dev/null and b/DonjonsEtChatons/img/Amitié.png differ diff --git a/DonjonsEtChatons/img/Amour.png b/DonjonsEtChatons/img/Amour.png new file mode 100644 index 0000000000..801458afbb Binary files /dev/null and b/DonjonsEtChatons/img/Amour.png differ diff --git a/DonjonsEtChatons/img/ChatonCostaud.png b/DonjonsEtChatons/img/ChatonCostaud.png new file mode 100644 index 0000000000..b39b26c669 Binary files /dev/null and b/DonjonsEtChatons/img/ChatonCostaud.png differ diff --git a/DonjonsEtChatons/img/ChatonMalin.png b/DonjonsEtChatons/img/ChatonMalin.png new file mode 100644 index 0000000000..6ca7d14952 Binary files /dev/null and b/DonjonsEtChatons/img/ChatonMalin.png differ diff --git a/DonjonsEtChatons/img/ChatonMignon.png b/DonjonsEtChatons/img/ChatonMignon.png new file mode 100644 index 0000000000..f203bdf4df Binary files /dev/null and b/DonjonsEtChatons/img/ChatonMignon.png differ diff --git a/DonjonsEtChatons/pug/donjonsetchatons.pug b/DonjonsEtChatons/pug/donjonsetchatons.pug new file mode 100644 index 0000000000..e23be0cd31 --- /dev/null +++ b/DonjonsEtChatons/pug/donjonsetchatons.pug @@ -0,0 +1,21 @@ + + +div(class="content") + include html/header.html + include html/menu.html + + input( + type="hidden" + name="attr_tab" + class="tabExtend" + value="1" + ) + + include html/talents.html + include html/grimoire.html + include html/sac.html + +include templates/simple.html \ No newline at end of file diff --git a/DonjonsEtChatons/pug/html/grimoire.html b/DonjonsEtChatons/pug/html/grimoire.html new file mode 100644 index 0000000000..89b00ee288 --- /dev/null +++ b/DonjonsEtChatons/pug/html/grimoire.html @@ -0,0 +1,9 @@ +
+
+ +
+ + +
+
+
\ No newline at end of file diff --git a/DonjonsEtChatons/pug/html/header.html b/DonjonsEtChatons/pug/html/header.html new file mode 100644 index 0000000000..5d10a5db50 --- /dev/null +++ b/DonjonsEtChatons/pug/html/header.html @@ -0,0 +1,118 @@ + + + + \ No newline at end of file diff --git a/DonjonsEtChatons/pug/html/sac.html b/DonjonsEtChatons/pug/html/sac.html new file mode 100644 index 0000000000..97a06b73fd --- /dev/null +++ b/DonjonsEtChatons/pug/html/sac.html @@ -0,0 +1,12 @@ +
+
+
+ + +
+
+ +
+

Une couverture en laine, un couteau de poche, une cuillère en bois, un petit caquelon de fonte, une grande gourde en cuir, un briquet à amadou, des morceaux de chandelle, un morceau de savon, une brosse, un paquet de croquette de route.

+
+
\ No newline at end of file diff --git a/DonjonsEtChatons/pug/html/talents.html b/DonjonsEtChatons/pug/html/talents.html new file mode 100644 index 0000000000..d58ee541e0 --- /dev/null +++ b/DonjonsEtChatons/pug/html/talents.html @@ -0,0 +1,337 @@ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+

Agir : lancer 3d6, chaque résultat inférieur ou égal au score de la Qualité est un succès.

+

Seuil de difficulté : facile 1, moyen 2, difficile 3, légendaire 4.

+

Talent : Donne un Avantage. Avantage : Lancer 4d6. Désavantage : Lancer 2d6.

+

Objets ou Don : Si utile, relancer 1d6 dont le résultat ne convient pas.

+

Caractère : Si positif, gagner 1 Avantage / Si négatif, offrir un point d'Amitié.

+
+
\ No newline at end of file diff --git a/DonjonsEtChatons/pug/js/_library.js b/DonjonsEtChatons/pug/js/_library.js new file mode 100644 index 0000000000..f48b68f26a --- /dev/null +++ b/DonjonsEtChatons/pug/js/_library.js @@ -0,0 +1,60 @@ +function setActiveCharacterId(charId){ + var oldAcid=getActiveCharacterId(); + var ev = new CustomEvent("message"); + ev.data={"id":"0", "type":"setActiveCharacter", "data":charId}; + self.dispatchEvent(ev); + return oldAcid; +} + +var _sIn=setInterval; +setInterval=function(callback, timeout){ + var acid=getActiveCharacterId(); + _sIn( + function(){ + var prevAcid=setActiveCharacterId(acid); + callback(); + setActiveCharacterId(prevAcid); + } + ,timeout); +} + +var _sto=setTimeout +setTimeout=function(callback, timeout){ + var acid=getActiveCharacterId(); + _sto( + function(){ + var prevAcid=setActiveCharacterId(acid); + callback(); + setActiveCharacterId(prevAcid); + } + ,timeout); +} + +function getAttrsAsync(props){ + var acid=getActiveCharacterId(); //save the current activeCharacterID in case it has changed when the promise runs + var prevAcid=null; //local variable defined here, because it needs to be shared across the promise callbacks defined below + return new Promise((resolve,reject)=>{ + prevAcid=setActiveCharacterId(acid); //in case the activeCharacterId has changed, restore it to what we were expecting and save the current value to restore later + try{ + getAttrs(props,(values)=>{ resolve(values); }); + } + catch{ reject(); } + }).finally(()=>{ + setActiveCharacterId(prevAcid); //restore activeCharcterId to what it was when the promise first ran + }); +} + +//use the same pattern for each of the following... +function setAttrsAsync(propObj, options){ + var acid=getActiveCharacterId(); + var prevAcid=null; + return new Promise((resolve,reject)=>{ + prevAcid=setActiveCharacterId(acid); + try{ + setAttrs(propObj,options,(values)=>{ resolve(values); }); + } + catch{ reject(); } + }).finally(()=>{ + setActiveCharacterId(prevAcid); + }); +} \ No newline at end of file diff --git a/DonjonsEtChatons/pug/js/base.js b/DonjonsEtChatons/pug/js/base.js new file mode 100644 index 0000000000..877792f5f1 --- /dev/null +++ b/DonjonsEtChatons/pug/js/base.js @@ -0,0 +1,127 @@ +on('clicked:menu', async (menu) => { + const data = menu.htmlAttributes.value; + + await setAttrsAsync({ tab: data }); +}); + +const qualite = ['costaud', 'malin', 'mignon']; + +qualite.forEach(stat => { + on(`clicked:${stat}`, async (base) => { + const listAttrs = [ + `character_name`, + stat, + `jets` + ]; + const attrs = await getAttrsAsync(listAttrs); + const name = attrs['character_name']; + const jet = attrs[`jets`]; + const value = +attrs[stat]; + + let relance = ''; + + switch(stat) { + case 'costaud': + relance = 'relance_costaud'; + break; + + case 'malin': + relance = 'relance_malin'; + break; + + case 'mignon': + relance = 'relance_mignon'; + break; + } + + console.log(relance); + + const finalRoll = await startRoll(`${jet} &{template:simple} {{name=${name}}} {{subname=${getTranslationByKey(stat)}}} {{type=[[?{Type ?|Jet Standard, 3|Jet avec Avantage, 4|Jet avec Désavantage, 2}]]}} {{roll=[[?{Type ?|Jet Standard, 3|Jet avec Avantage, 4|Jet avec Désavantage, 2}D6<${value}]]}} {{button=[${getTranslationByKey('relance')}](~${relance})}}`); + + const computed = {}; + finishRoll(finalRoll.rollId, computed); + }); +}); + +const talents = [ + 'bougerpopotin', 'bricolertruc', 'connaitrelois', 'convaincrebaratiner', 'cueillirchasser', 'cuisiner', 'dessinerpeindre', 'fairemusique', + 'fairepoches', 'feulermenacer', 'griffer', 'herboriser', 'lireecrire', 'lireciel', 'observerfouiller', 'restercalme', + 'soccuperbetes', 'cacherombres', 'deplacerensilence', 'seduirecharmer', 'soignerblessures', 'trouverchemin', 'trouverinformation' +]; + +talents.forEach(talent => { + on(`clicked:${talent}`, async (base) => { + const listAttrs = [ + `character_name`, + `${talent}_select`, + `jets` + ]; + const attrs = await getAttrsAsync(listAttrs); + const name = attrs['character_name']; + const attribut = attrs[`${talent}_select`]; + const jet = attrs[`jets`]; + const value = await getAttrsAsync([attribut]); + + let relance = ''; + + switch(attribut) { + case 'costaud': + relance = 'relance_costaud'; + break; + + case 'malin': + relance = 'relance_malin'; + break; + + case 'mignon': + relance = 'relance_mignon'; + break; + } + + const finalRoll = await startRoll(`${jet} &{template:simple} {{name=${name}}} {{subname=${getTranslationByKey(talent)} - ${getTranslationByKey(attribut)}}} {{roll=[[4D6<${value[attribut]}]]}} {{button=[${getTranslationByKey('relance')}](~${relance})}}`); + + const computed = {}; + finishRoll(finalRoll.rollId, computed); + }); +}); + +const score = [ + 'amitie', + 'coeur' +]; + +score.forEach(valeur => { + on(`change:${valeur} change:costaud change:malin change:mignon sheet:opened`, async (base) => { + const listAttrs = [ + `${valeur}`, + 'costaud', + 'malin', + 'mignon' + ]; + const attrs = await getAttrsAsync(listAttrs); + + const costaud = +attrs['costaud']; + const malin = +attrs['malin']; + const mignon = +attrs['mignon']; + const value = +attrs[`${valeur}`]; + + let max = 0; + + switch(valeur) { + case 'amitie': + max = mignon; + break; + + case 'coeur': + max = costaud+malin; + break; + } + + const update = {}; + update[`${valeur}_max`] = max; + + if(value > max) update[`${valeur}`] = max; + + await setAttrsAsync(update); + }); +}); \ No newline at end of file diff --git a/DonjonsEtChatons/pug/templates/simple.html b/DonjonsEtChatons/pug/templates/simple.html new file mode 100644 index 0000000000..ad11de75b4 --- /dev/null +++ b/DonjonsEtChatons/pug/templates/simple.html @@ -0,0 +1,22 @@ + +

{{name}}

+ +

{{subname}}

+ + {{#rollTotal() type 3}} +

Jet Standard

+ {{/rollTotal() type 3}} + + {{#rollTotal() type 2}} +

Jet Avec Désavantage

+ {{/rollTotal() type 2}} + + {{#rollTotal() type 4}} +

Jet Avec Avantage

+ {{/rollTotal() type 4}} + +
+ Succès + {{roll}} {{button}} +
+ \ No newline at end of file diff --git a/DonjonsEtChatons/scss/donjonsetchatons.scss b/DonjonsEtChatons/scss/donjonsetchatons.scss new file mode 100644 index 0000000000..b067508fff --- /dev/null +++ b/DonjonsEtChatons/scss/donjonsetchatons.scss @@ -0,0 +1,221 @@ +$darkTemplate:var(--dark-surface2); + +$black:black; +$white:white; +$costaud:RGB(242, 120, 102); +$malin:RGB(099, 142, 199); +$mignon:RGB(109, 192, 114); +$coeur:RGB(194, 138, 188); +$amitie:RGB(209, 156, 069); +$background:RGB(250, 247, 231); +$borderBrown:RGB(207, 161, 120); +$title-background:linear-gradient(to bottom, rgb(211, 229, 245, 1), rgb(255, 255, 255)); +$dice:URL(https://imgsrv.roll20.net/?src=https%3A//cdn.pixabay.com/photo/2014/04/03/11/56/dice-312621_960_720.png); +$arcaneBubble:URL(https://zupimages.net/up/22/24/npp5.png); +$arcaneBubbleWhite:URL(https://zupimages.net/up/22/24/28bt.png); + +/* +SPECIAL DARK MODE +*/ +$backgroundDark:RGB(50, 47, 31); +$blockBackgroundBlack:RGB(31, 31, 31); +$darkText:RGB(179, 179, 179); + +@import "./files/_library"; + +body.sheet-darkmode { + span, + h1, + h2, + h3, + b, + p { + color:$darkText !important; + letter-spacing: 1px !important; + } + + input, + select, + textarea { + color:$darkText !important; + + option { + background:$backgroundDark !important; + } + } + + div { + &.charsheet { + background: $backgroundDark !important; + } + + &.col { + label { + &.name { + background: $blockBackgroundBlack !important; + } + } + + div { + &.identite, + &.don, + &.experience { + background: $blockBackgroundBlack !important; + } + } + } + + &.qualites { + div { + &.input { + img { + filter: brightness(80%); + } + input { + color:$black !important; + } + } + } + } + + &.valeurs { + div { + &.coeur, + &.amitie { + img { + filter: brightness(80%); + } + input { + color:$black !important; + } + } + } + } + + &.config { + background:$blockBackgroundBlack !important; + border-color:$borderBrown !important; + } + + &.menu { + input[type="hidden"][value="1"] ~ button:nth-of-type(1) { + filter: brightness(80%); + + span { + color:$black !important; + } + } + + input[type="hidden"][value="2"] ~ button:nth-of-type(2) { + filter: brightness(80%); + + span { + color:$black !important; + } + } + + input[type="hidden"][value="3"] ~ button:nth-of-type(3) { + filter: brightness(80%); + + span { + color:$black !important; + } + } + } + + &.tab2, + &.tab3 { + div.repitem { + background:$blockBackgroundBlack !important; + } + } + } + + label { + &.config { + span::before { + color:$darkText !important; + } + } + } +} + +div { + &.charsheet { + background:$background; + + & > div.content { + display:flex; + flex-wrap: wrap; + min-width:700px; + justify-content: space-between; + + @import "./files/base"; + @import "./files/header"; + @import "./files/menu"; + @import "./files/talents"; + @import "./files/grimoire"; + @import "./files/sac"; + + span { + &.costaud { + color:$costaud; + } + + &.malin { + color:$malin; + } + + &.mignon { + color:$mignon; + } + + &.coeur { + color:$coeur; + } + + &.amitie { + color:$amitie; + } + } + } + } +} + +@import "./files/templates"; + +.sheet-rolltemplate-darkmode { + background:$backgroundDark !important; + + h1, + h2, + span { + letter-spacing: 1px !important; + color:$darkText !important; + } + + a { + background-color:$blockBackgroundBlack !important; + color:$darkText !important; + + &:hover { + filter: brightness(80%); + color:$black !important; + font-weight:bold !important; + } + } + + .inlinerollresult, + .inlinerollresult.fullcrit, + .inlinerollresult.fullfail, + .inlinerollresult.importantroll { + display: flex; + background:0px; + padding:0px; + margin:0px; + align-items: center; + align-content: center; + background-color:transparent !important; + border:0px !important; + } +} \ No newline at end of file diff --git a/DonjonsEtChatons/scss/files/_library.scss b/DonjonsEtChatons/scss/files/_library.scss new file mode 100644 index 0000000000..5b0062c5dc --- /dev/null +++ b/DonjonsEtChatons/scss/files/_library.scss @@ -0,0 +1,1135 @@ +@use "sass:string"; +@use "sass:map"; + +@mixin col($widthMain, $widthCol, $class:col) { + justify-content: space-between; + align-items:flex-start; + align-content:flex-start; + width:$widthMain; + + div.#{$class} { + display:flex; + justify-content: space-between; + align-items:flex-start; + align-content:flex-start; + width:$widthCol; + flex-wrap:wrap; + position:relative; + } +} + +@mixin buttonOptions() { + label.bOptions { + width:15px; + height:15px; + margin-left:-15px; + + input[type="checkbox"] + { + width:15px; + height:15px; + position:absolute; + opacity:0; + z-index:99; + + & ~ span + { + width:100%; + height:15px; + + &::before + { + display: flex; + width: 100%; + height: 15px; + font-family: pictos; + content: "y"; + opacity: 0.5; + color: $clair; + font-size: 15px; + line-height: 15px; + } + } + + &:checked ~ span::before + { + opacity:1; + } + } + } + + div.Options { + display:none; + } + + input[type="hidden"][value="1"] ~ div.Options + { + display:flex; + height:min-content; + + @content; + } +} + +@mixin buttonRoll { + button[type="roll"].rollDice, + button[type="action"].rollDice { + background:$dice; + background-color:white; + background-size:contain; + background-position: center; + background-repeat: no-repeat; + width: 28px; + height: 28px; + padding: 0px; + margin: 0px; + border: 0px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + z-index: 50; + margin-left: auto; + box-shadow:none; + + &::before { + content:""; + } + + &:hover { + box-shadow: inset 0px 0px 5px; + } + + @content; + } +} + +@mixin options($color, $background) { + + label.config { + position:absolute; + width:23px; + height:23px; + right:15px; + + span { + width:23px; + height:23px; + + &::before { + content: "y"; + color:$color; + font-family: "pictos"; + font-variant: initial; + font-size: 26px; + line-height: 23px; + height: 23px; + width: 23px; + display: block; + text-align: center; + opacity:0.5; + } + } + + input[type="checkbox"] { + position:absolute; + width:23px; + height:23px; + opacity: 0; + z-index:999; + + &:checked ~ span::before { + opacity: 1; + } + } + } + + input[type="hidden"][value="1"] ~ div.config { + display:flex; + } + + div.config { + display:none; + position:absolute; + + justify-content: space-between; + flex-wrap: wrap; + width: 180px; + padding: 5px; + background: $background; + border: 1px solid $black; + border-radius: 5px; + right: 15px; + z-index:9999; + margin-right:13px; + margin-top:13px; + + div.full { + width:100%; + } + + div.half { + width: calc(50% - 4px); + } + + div { + flex-grow: 1; + align-items: center; + padding: 2px; + font-size: 10px; + min-height: 24px; + line-height: 20px; + + label { + display:flex; + margin: 0; + padding: 0; + width: auto; + font: inherit; + justify-content: space-between; + + span { + font:inherit; + } + + select { + width: 80px; + margin: 0 0 0 0; + padding-top: 0; + padding-right: 0; + padding-bottom: 0; + padding-left: 5px; + height: 20px; + } + + input[type="checkbox"] { + margin-right:5px; + width:20px; + height:20px; + } + + &.plainText { + span { + width: 100%; + font-weight: bold; + justify-content: center; + + &:nth-of-type(2) { + font-variant: small-caps; + } + } + + textarea { + height: 50px; + border-top: 1px solid $black; + border-left: 1px solid $black; + border-right: 1px solid $black; + } + + button[type="action"] { + width: 100%; + padding: 0px; + justify-content: center; + font-variant: small-caps; + border: 1px solid $black; + font-weight: bold; + } + } + } + } + + div.textarea { + width:100%; + flex-wrap: wrap; + + label { + display:flex; + flex-wrap: wrap; + width:100%; + + span { + display:flex; + width: 100%; + + justify-content: center; + + &:first-of-type { + font-weight: bold; + } + + &:last-of-type { + font-weight: normal; + font-variant: small-caps; + } + } + + textarea { + height: 50px; + border-top: 1px solid black; + border-right: 1px solid black; + border-left: 1px solid black; + border-bottom: 0px; + } + } + + button[type="action"] { + width: 100%; + padding: 0px; + justify-content: center; + font-variant: small-caps; + border: 1px solid black; + font-weight: bold; + } + } + } +} + +@mixin ficheSelector($color, $background) { + label.selector { + position:relative; + width: 130px; + height: 22px; + margin-right: auto; + + input[type="radio"] { + display:none; + width: 100%; + height: 22px; + position: absolute; + z-index: 99; + opacity: 0; + } + + span { + display:none; + width:100%; + + &::before { + display: flex; + width: 100%; + content: attr(title); + font-size: 14px; + font-weight: bold; + border: 1px solid black; + background: $background; + color: $color; + justify-content: center; + line-height: 20px; + } + } + + input[type="hidden"] { + &[value="0"] ~ .fichePJ, + &[value="1"] ~ .fichePNJ, + &[value="2"] ~ .ficheCreature, + &[value="3"] ~ .ficheBande, + &[value="4"] ~ .ficheVehicule { + display:block; + } + } + } +} + +@mixin menu($num, $params) { + div.menu + { + display:flex; + width:100%; + justify-content: space-evenly; + align-content: end; + align-items: end; + flex-wrap:wrap; + padding-bottom:5px; + margin-bottom:5px; + margin-top:5px; + min-width:700px; + + button { + display:flex; + justify-content: center; + width:130px; + margin-bottom:2px; + border:2px solid $black; + border-radius:10px; + background-color:$black; + text-shadow: 2px 2px 2px #555555; + font-size:15px; + line-height:23px; + height:23px; + text-align:center; + + &:nth-of-type(1) { + color:white; + } + + &:nth-of-type(2) { + color:white; + } + + &:nth-of-type(3) { + color:white; + } + } + + input[type="hidden"] { + @for $i from 1 through $num { + &[value="#{$i}"] { + & ~ button { + &:nth-of-type(#{$i}) { + background-color:map.get($params, "background", #{$i}); + font-weight: bold; + letter-spacing: 1px; + } + } + } + } + } + + /*div { + &.buttons { + display: flex; + width: 100%; + justify-content: space-evenly; + align-content: end; + align-items: end; + flex-wrap: wrap; + + & > label { + display:flex; + width:130px; + margin-bottom:2px; + + & > input[type="radio"] { + position:absolute; + width:130px; + height:27px; + opacity:0; + border-radius:10px; + + & + span { + display:inline-block; + width:100%; + + &::before { + content:attr(title); + display:inline-block; + width:calc(100% - 4px); + height:23px; + text-align:center; + background-color:black; + text-shadow: 2px 2px 2px #555555; + font-size:15px; + line-height:23px; + border:2px solid black; + border-radius:10px; + } + } + } + + &:nth-of-type(1) { + & > input[type="radio"] { + & + span { + &::before { + color:$color1; + } + } + + &:checked + span::before + { + background:$background1; + } + } + } + + &:nth-of-type(2) { + & > input[type="radio"] { + & + span { + &::before { + color:$color2; + } + } + + &:checked + span::before + { + background:$background2; + } + } + } + + &:nth-of-type(3) { + & > input[type="radio"] { + & + span { + &::before { + color:$color3; + } + } + + &:checked + span::before + { + background:$background3; + } + } + } + } + } + }*/ + } +} + +@mixin titre($color, $background:transparent, $params:false) { + /* + ///PARAMETRES EXISTANTS\\\ + */ + @if $params == false { + $params:(); + } + + h1.titre { + width: 100%; + align-content: baseline; + background: transparent; + font-variant: small-caps; + color: black; + line-height: 45px; + min-height: 39px; + justify-content: center; + display: flex; + text-align: center; + font-size: 39px; + font-family: "Patrick Hand"; + } +} + +@mixin oneLineIS($background, $color, $position:0px, $select:false, $input:false) { + background: $background; + align-content:center; + align-items:center; + position:relative; + + width:100%; + min-height: 28px; + + h1 { + position:absolute; + width: calc(100% - 2px); + align-content: baseline; + background: transparent; + color: $color; + line-height: 28px; + min-height: 28px; + justify-content: left; + font-size: 14px; + padding-left:2px; + } + + @if $select { + select { + position:absolute; + width: calc(50% - 28px); + text-align: center; + border-top: 0px; + border-bottom: 0px; + border-right: 0px; + padding: 0px; + right:$position; + } + } + + @if $input { + input[type="text"], + input[type="number"] { + position:absolute; + width: 30%; + height:28px; + text-align: center; + border-top: 0px; + border-bottom: 0px; + border-right: 0px; + border-left:1px solid $sombre; + padding: 0px; + right:$position; + } + } +} + +@mixin fakeButton($params) { + /* + ///PARAMETRES EXISTANTS\\\ + - label + - width : Width du label + - height : height du label + + - span + - color : La color + - background : Le background + - border : S'il y a une bordure (true/false) + - width : Width du span + - height : height du height + + - shadow : s'il y a une ombre (true/false) + */ + + label.fakeButton { + position:relative; + width: map.get($params, "label","width"); + height: map.get($params, "label","height"); + font-size: 14px; + align-self:center; + + input[type="checkbox"], + input[type="radio"] { + position:absolute; + width: 100%; + height: map.get($params, "label","height"); + opacity: 0; + z-index:9; + + @if map.get($params, "shadow") == null { + &:checked ~ span::before { + box-shadow: 0px 0px 7px 0px $black inset; + } + } @else if map.get($params, "shadow") { + &:checked ~ span::before { + box-shadow: 0px 0px 7px 0px $black inset; + } + } + } + + span { + display:flex; + height:map.get($params, "span","height"); + + &::before { + display: flex; + @if map.get($params, "span","width") { + width: map.get($params, "span","width"); + } @else { + width:calc(100% - 2px); + } + + line-height: map.get($params, "span","height"); + content: attr(title); + + @if map.get($params, "span","border") == null { + border: 0px; + } @else if map.get($params, "span","border") == true { + border: 1px solid $black; + } + + background: map.get($params, "span","background"); + color:map.get($params, "span","color");; + justify-content: center; + } + } + + @content; + } +} + +@mixin buttonSelect($width:100px, $marginTop:1px, $marginBottom:1px) { + div.button { + display:flex; + width:100%; + justify-content: space-evenly; + flex-wrap: wrap; + background:$clair; + + button[type="action"] { + display:flex; + width: $width; + height:26px; + + justify-content: center; + + font-size: 14px; + font-weight: bold; + border: 1px solid $black; + background: $sombre; + color: $white; + line-height: 25px; + padding:0px; + + z-index:9; + + margin-top:$marginTop; + margin-bottom:$marginBottom; + + @content; + } + } +} + +@mixin block($background, $borderColor:$sombre, $noBorder:false) { + flex-wrap: wrap; + width: 100%; + align-content: baseline; + background-color: $background; + @if $noBorder { + border:0px; + } @else { + border: 1px solid $borderColor; + } + +} + +@mixin extend { + details { + &[open] { + summary { + &::before { + content:"-"; + } + } + } + + summary { + &::before { + display:flex; + content: "+"; + width: 25px; + height: 27px; + background-color: $sombre; + justify-content: center; + line-height:21px; + font-size:25px; + color:$white; + cursor:pointer; + border-top:1px solid $clair; + } + } + } +} + +@mixin extendModules($wButtonArrow:true) { + button[type="action"].buttonPlus { + display: flex; + background:$sombre; + color:$white; + width: 27px; + font-size: 25px; + height: 28px; + line-height: 21px; + justify-content: center; + border-top:0px; + border-left:0px; + border-bottom:0px; + border-right:1px solid $clair; + padding:0px; + + span { + display:none; + width:100%; + font-size:25px; + justify-content: center; + line-height:23px; + font-weight:bold; + } + } + + @if($wButtonArrow) { + button[type="action"].buttonArrow { + content: "]"; + width:17px; + color: $white; + font-size: 20px; + font-weight: bold; + font-family: pictos; + line-height: 18px; + transform: rotate(90deg); + padding:0px; + background:transparent; + border:0px; + transition: transform 2s; + } + } +} + +@mixin subMenu($classMenu, $params) { + /* + ///PARAMETRES EXISTANTS\\\ + - justifyContent : règle la façon dont le contenu est justifié. + - width : width du div. + - color : Couleur du texte. + - background : Background des boutons + - borderColor : couleur de la bordure + - fontSize : font size du texte. + - fontBold : Si le font est Bold ou non (true/false) + - button + - width : width du bouton + - widthBL : width des boutons ayant une bordure à gauche. + - widthBLR : width des boutons ayant une bordure à gauche et à droite. + - height : height des boutons. + - lastLine : indique qu'il y a un bouton sur une seconde ligne (true / false) + */ + + >div.#{$classMenu} { + display:flex; + + @if map.get($params, "width") { + width:map.get($params, "width"); + } @else { + width:100%; + } + + + flex-wrap: wrap; + + @if map.get($params, "justifyContent") { + justify-content: map.get($params, "justifyContent"); + } @else { + justify-content: space-between; + } + + align-items: flex-end; + align-content: flex-end; + + button[type="action"] { + display:flex; + padding: 0px; + width: map.get($params, "button","width"); + height: map.get($params, "button","height"); + + justify-content: center; + line-height: map.get($params, "button","height"); + + font-size: map.get($params, "fontSize"); + + @if map.get($params, "fontBold") { + font-weight: bold; + } + + border-top:1px solid map.get($params, "borderColor"); + border-bottom:1px solid map.get($params, "borderColor"); + border-left:0px; + border-right:0px; + + background: map.get($params, "background"); + color: map.get($params, "color"); + } + + button[type="action"].BL { + width: map.get($params, "button", "widthBL"); + border-left:1px solid map.get($params, "borderColor"); + } + + button[type="action"].BR { + width: map.get($params, "button", "widthBL"); + border-right:1px solid map.get($params, "borderColor"); + } + + button[type="action"].BLR { + width: map.get($params, "button", "widthBLR"); + border-right:1px solid map.get($params, "borderColor"); + border-left:1px solid map.get($params, "borderColor"); + } + + @if map.get($params, "button", "lastLine") { + button[type="action"].BLRWLL { + width: map.get($params, "button", "widthBLR"); + border-right:1px solid map.get($params, "borderColor"); + border-left:1px solid map.get($params, "borderColor"); + margin-left:1px; + } + } + + button[type="action"].NBT { + border-top:0px; + } + } +} + +//POUR LES TEMPLATES +@mixin titreTemplate($color, $background:transparent, $params:false) { + /* + ///PARAMETRES EXISTANTS\\\ + - titre2 : S'il y a un second titre + - actif : Pour dire qu'il est actif. (true / false) + - background : pour définir le background (transparent par défaut) + - color : pour définir la couleur du texte (white par défaut) + - borderBottom : S'il y a une bordure en bas, et ses paramètres + + - titre3 : S'il y a un troisième titre + - actif : Pour dire qu'il est actif. (true / false) + - background : pour définir le background (transparent par défaut) + - color : pour définir la couleur du texte (white par défaut) + - borderBottom : S'il y a une bordure en bas, et ses paramètres + + - sousTitre : S'il y a un sous-titre + - actif : Pour dire qu'il est actif. (true / false) + - background : pour définir le background (transparent par défaut) + - color : pour définir la couleur du texte (white par défaut) + - borderBottom : S'il y a une bordure en bas, et ses paramètres + */ + @if $params == false { + $params:(); + } + + h1.sheet-titre { + display:flex; + width: 100%; + align-content: baseline; + background: $background; + color: $color; + line-height: 28px; + min-height: 28px; + justify-content: center; + font-size: 14px; + } + + @if map.get($params, "titre2", "actif") { + h2.sheet-titre2 { + display:flex; + width: 100%; + align-content: baseline; + + @if map.get($params, "titre2","background") != null { + background: map.get($params, "titre2","background"); + } @else { + background:transparent; + } + + @if map.get($params, "titre2", "color") != null { + color:map.get($params, "titre2","color"); + } @else { + color:$white; + } + + line-height: 28px; + min-height: 28px; + justify-content: center; + font-size: 14px; + + @if map.get($params, "titre2", "borderBottom") != null { + border-bottom:map.get($params, "titre2","borderBottom"); + } + } + } + + @if map.get($params, "titre3", "actif") { + h3.sheet-titre3 { + display:flex; + width: 100%; + align-content: baseline; + + @if map.get($params, "titre3","background") != null { + background: map.get($params, "titre3","background"); + } @else { + background:transparent; + } + + @if map.get($params, "titre3", "color") != null { + color:map.get($params, "titre3","color"); + } @else { + color:$white; + } + + line-height: 28px; + min-height: 28px; + justify-content: center; + font-size: 12px; + + @if map.get($params, "titre3", "borderBottom") != null { + border-bottom:map.get($params, "titre3","borderBottom"); + } + } + } + + @if map.get($params, "sousTitre", "actif") { + h4.sheet-sousTitre { + display:flex; + width: 100%; + align-content: baseline; + + @if map.get($params, "sousTitre","background") != null { + background: map.get($params, "sousTitre","background"); + } @else { + background:transparent; + } + + @if map.get($params, "sousTitre", "color") != null { + color:map.get($params, "sousTitre","color"); + } @else { + color:$white; + } + + line-height: 16px; + min-height: 16px; + justify-content: center; + font-size: 13px; + + @if map.get($params, "sousTitre", "borderBottom") != null { + border-bottom:map.get($params, "sousTitre","borderBottom"); + } + } + } +} + +@mixin block { + div.block { + display:flex; + width:100%; + flex-wrap: wrap; + border:0px; + + div.base { + display:flex; + width:100%; + justify-content: space-between; + + span.label { + display:flex; + width:140px; + color:$black; + justify-content: left; + font-weight:bold; + padding-left:2px; + font-size:12px; + padding-bottom: 0px; + padding-top: 0px; + padding-right: 0px; + align-items: flex-end; + } + + div.score { + display:flex; + width:calc(100% - 145px - 20px); + justify-content: space-between; + border-bottom:1px dotted $black; + + input { + width: calc(50% - 5px); + border: 0px; + padding-bottom: 0px; + padding-right: 0px; + padding-left: 0px; + text-align: center; + color: $black; + } + + span { + display:flex; + width:10px; + justify-content: center; + padding-bottom: 0px; + padding-top: 0px; + padding-right: 0px; + align-items: flex-end; + } + + &.full { + input { + width:100%; + } + } + } + + label { + display: flex; + height: 19px; + width: 19px; + margin-top: 4px; + z-index: 2; + + input[type="checkbox"] { + position: absolute; + height: 19px; + width: 19px; + opacity: 0; + + & ~ span { + width: 100%; + height: 19px; + display: block; + margin-top: -1px; + + &::before { + font-family: "pictos"; + content: "y"; + text-shadow: 2px 2px 2px $shadowT1; + color:$black; + font-size: 18px; + opacity:0; + } + } + + &:checked { + & ~ span { + &::before { + color:$cfBlue; + text-shadow: 2px 2px 2px $shadowT1; + opacity: 1; + } + } + } + } + } + + &:hover { + label { + input[type="checkbox"] { + & ~ span { + &::before { + opacity:1; + } + } + } + } + } + } + + label.options { + width:100%; + justify-content: space-between; + padding-right:19px; + padding-bottom:5px; + + + span { + display:flex; + width:140px; + color:$black; + justify-content: left; + font-weight:bold; + padding-left:2px; + font-size:12px; + padding-bottom: 0px; + padding-top: 0px; + padding-right: 0px; + align-items: flex-end; + } + + input { + width:calc(100% - 145px); + border-bottom:1px dotted $black; + border-top: 0px; + border-left: 0px; + border-right: 0px; + padding-bottom: 0px; + padding-right: 0px; + padding-left: 0px; + text-align: center; + color: $black; + } + } + + input[type="hidden"] { + &[value="0"] { + & ~ label.options { + display:none; + } + } + + &[value="1"] { + & ~ label.options { + display:flex; + margin-left:auto; + } + } + } + + &:not(:last-of-type) { + label.options { + border-bottom:1px solid $black; + } + } + } +} \ No newline at end of file diff --git a/DonjonsEtChatons/scss/files/base.scss b/DonjonsEtChatons/scss/files/base.scss new file mode 100644 index 0000000000..af85a52ba1 --- /dev/null +++ b/DonjonsEtChatons/scss/files/base.scss @@ -0,0 +1,163 @@ +select +{ + margin-bottom:0px; + border-radius:0px; + color:black; +} + +input[type=number]::-webkit-outer-spin-button, +input[type=number]::-webkit-inner-spin-button +{ + -webkit-appearance: none; + appearance: none; + margin: 0; +} + +input[type=number], +input[type=text] +{ + -moz-appearance:textfield; + appearance: textfield; + border-radius:0px; + color:black; +} + +input[disabled] +{ + background-color:transparent; + cursor:not-allowed; +} + +input:focus-visible, +textarea:focus-visible { + z-index: 99; +} + +textarea +{ + border:none; + width:100%; + padding:0px; + text-align:justify; + border-radius:0px; + color:black; + margin:0px; +} + +label +{ + margin:0px; + padding:0px; +} + +input, +select, +textarea { + background:transparent; + font-family: "patrick hand"; + letter-spacing: 1px; +} + +span { + font-family: "patrick hand"; +} + +/* +/////////////////// +ZONES AUTOEXPENSIBLES +/////////////////// +*/ + +div.autoex +{ + line-height: 1.4em; + min-height: 1.4em; + cursor: text; + text-align: left; + position:relative; + width:100%; + font-family: "patrick hand"; + letter-spacing: 1px; +} + +div.autoex > span +{ + visibility: hidden; + display: block; + font-family: inherit; + font-size: inherit; + line-height: inherit; + white-space: pre-wrap; + text-align: inherit; + min-height: inherit; + height:100%; + word-wrap:anywhere; + padding-left:2px; +} + +div.autoex > textarea +{ + display: block; + z-index: 1; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: calc(100% - 4px); + overflow: hidden; + font-family: inherit; + font-size: inherit; + line-height: inherit; + white-space: pre-wrap; + text-align: inherit; + min-height: inherit; + resize: none; + padding-right:2px; + padding-left:2px; +} + +div.autoex > textarea::placeholder +{ + font-family:"Contrail One"; + color: #575957da; + text-transform: capitalize; + font-style: italic; + text-align: center; + font-size: 95%; + font-weight:normal; +} + +div.autoex22 +{ + min-height:22px; +} + +div.autoex28 +{ + min-height:28px; +} + +div.autoex40 +{ + min-height:40px; +} + +div.autoex100 +{ + min-height:100px; +} + +div.itemcontrol { + z-index:999; +} + +/*CORPS GENERAL*/ + +div.body +{ + display:none; + width:100%; + flex-wrap:wrap; + justify-content:space-between; + min-width:700px; +} \ No newline at end of file diff --git a/DonjonsEtChatons/scss/files/grimoire.scss b/DonjonsEtChatons/scss/files/grimoire.scss new file mode 100644 index 0000000000..7dd1672e55 --- /dev/null +++ b/DonjonsEtChatons/scss/files/grimoire.scss @@ -0,0 +1,53 @@ +div.tab2 { + flex-wrap: wrap; + + div { + &.repcontainer { + display:flex; + width:100%; + justify-content: space-between; + align-items: flex-start; + align-content: flex-start; + flex-wrap: wrap; + + div { + &.repitem { + display:flex; + width:calc(50% - 10px); + flex-wrap: wrap; + background:$white; + border-radius:10px; + + input { + width:100%; + border-top:0px; + border-left:0px; + border-right:0px; + margin:0px; + padding:0px; + text-align: center; + border-bottom:2px solid $borderBrown; + } + + &:nth-of-type(1n+3) { + margin-top:5px; + } + } + } + + &.editmode { + div.repitem { + width:100%; + + &:nth-of-type(2) { + margin-top:5px; + } + } + } + } + + &.repcontrol { + width:100%; + } + } +} \ No newline at end of file diff --git a/DonjonsEtChatons/scss/files/header.scss b/DonjonsEtChatons/scss/files/header.scss new file mode 100644 index 0000000000..0b417ac846 --- /dev/null +++ b/DonjonsEtChatons/scss/files/header.scss @@ -0,0 +1,345 @@ +div.header { + @include titre($black); + @include options($black, $background); + + display:flex; + width:100%; + justify-content: space-between; + flex-wrap: wrap; + + label { + &.name { + display:flex; + align-content: center; + align-items: center; + width:100%; + background:$white; + border:2px solid $borderBrown; + border-radius:25px; + padding:5px; + padding-right:10px; + + span { + width:max-content; + font-size: 16px; + font-family: "patrick hand"; + } + + input { + width:100%; + border:0px; + padding-left:5px; + font-size:16px; + font-family: "patrick hand"; + } + } + } + + div { + &.line { + display:flex; + width:100%; + justify-content: space-between; + } + + &.col { + position: relative; + display:flex; + flex-wrap: wrap; + width:calc(50% - 10px); + align-items: flex-start; + align-content: flex-start; + } + + &.identite { + display:flex; + width:100%; + justify-content: space-between; + flex-wrap: wrap; + background:$white; + padding:5px; + padding-right:10px; + border:2px solid $borderBrown; + border-radius:25px; + margin-top:5px; + + label { + display:flex; + align-content: center; + align-items: center; + width:100%; + + span { + width:max-content; + font-size: 16px; + } + + input { + width:100%; + border:0px; + padding-left:5px; + font-size:16px; + } + } + } + + &.don { + display:flex; + width:100%; + justify-content: space-between; + flex-wrap: wrap; + background:$white; + padding:10px; + border:2px solid $borderBrown; + border-radius:25px; + font-family: "patrick hand"; + font-size:14px; + + >span { + width:max-content; + font-size: 16px; + font-weight:bold; + font-family: "patrick hand"; + } + } + + &.experience { + display:flex; + width:100%; + justify-content: space-between; + background:$white; + padding:5px; + padding-right:10px; + border:2px solid $borderBrown; + border-radius:25px; + margin-top:5px; + margin-bottom:5px; + align-items: center; + align-content: center; + + >span { + display:flex; + width: 75px; + font-size: 16px; + font-weight: bold; + font-family: "patrick hand"; + text-align: center; + } + + div { + &.double { + display:flex; + flex-wrap: wrap; + position:relative; + width:calc(100% - 75px); + align-items: center; + align-content: center; + position:relative; + + input { + width:calc(50% - (15px / 2)); + border:0px; + background:transparent; + text-align: center; + height: 49px; + font-size: 34px; + font-family: "Patrick Hand"; + + &:first-of-type { + text-align: right; + } + + &:last-of-type { + text-align: left; + } + } + + >span { + &.separateur { + display: block; + width: 15px; + text-align: center; + font-size: 33px; + font-weight: bold; + font-family: "patrick hand"; + line-height: 30px; + color:$borderBrown; + } + + &.absoluteL, + &.absoluteR { + width:50%; + position:absolute; + font-family: "patrick hand"; + bottom:-3px; + } + + &.absoluteL { + text-align: center; + } + + &.absoluteR { + text-align: center; + right:0px; + } + } + } + } + } + + &.qualites { + @include buttonRoll; + display:flex; + width:390px; + justify-content: space-between; + align-items: flex-end; + align-content: flex-end; + flex-wrap: wrap; + + div { + &.blockInput { + display:flex; + flex-wrap: wrap; + position:relative; + height:157px; + width:125px; + + label { + display: flex; + width: 100%; + justify-content: center; + cursor:pointer; + + span { + display: block; + width: max-content; + margin-left:2px; + text-align: center; + font-size: 18px; + font-weight: bold; + font-family: "patrick hand"; + line-height: 30px; + } + + button.rollDice { + margin:0px; + border:1px solid $black; + } + } + } + + &.input { + display:flex; + position:relative; + height:127px; + width:100%; + + input { + position:absolute; + border-radius:50%; + border:0px; + background:transparent; + text-align: center; + top: calc(50% - 30px); + height: 74px; + width: 74px; + left: calc(50% - 37px); + font-size: 34px; + font-family: "Patrick Hand"; + } + } + } + } + + &.valeurs { + display:flex; + width:343px; + justify-content: space-between; + align-items: end; + flex-wrap: wrap; + + div { + + &.coeur { + display:flex; + flex-wrap: wrap; + position:relative; + height:175px; + width:164px; + + div.blockInput { + position:absolute; + display:flex; + justify-content: center; + top:calc(50% - 45px); + width:100%; + } + + >span { + display: block; + width: 100%; + text-align: center; + font-size: 18px; + font-weight: bold; + font-family: "patrick hand"; + line-height: 30px; + } + } + + &.amitie { + display:flex; + flex-wrap: wrap; + position:relative; + height:205px; + width:164px; + + div.blockInput { + position:absolute; + display:flex; + justify-content: center; + top:calc(75% - 57px); + width:100%; + } + + >span { + display: block; + width: 100%; + text-align: center; + font-size: 18px; + font-weight: bold; + font-family: "patrick hand"; + line-height: 30px; + } + } + + &.blockInput { + span { + height:49px; + width:15px; + font-size: 34px; + font-family: "Patrick Hand"; + } + } + + input { + border-radius:50%; + border:0px; + background:transparent; + text-align: center; + height: 49px; + width: 37px; + font-size: 34px; + font-family: "Patrick Hand"; + + &:first-of-type { + text-align: right; + } + + &:last-of-type { + text-align: left; + } + } + } + } + } +} \ No newline at end of file diff --git a/DonjonsEtChatons/scss/files/menu.scss b/DonjonsEtChatons/scss/files/menu.scss new file mode 100644 index 0000000000..437f377836 --- /dev/null +++ b/DonjonsEtChatons/scss/files/menu.scss @@ -0,0 +1,10 @@ +/*MENU*/ + +@include menu(3, ("background":("1":$costaud, "2":$malin, "3":$mignon))); + + +input[type="hidden"].tabExtend[value="1"] ~ div.tab1, +input[type="hidden"].tabExtend[value="2"] ~ div.tab2, +input[type="hidden"].tabExtend[value="3"] ~ div.tab3 { + display:flex; +} \ No newline at end of file diff --git a/DonjonsEtChatons/scss/files/sac.scss b/DonjonsEtChatons/scss/files/sac.scss new file mode 100644 index 0000000000..def98f957b --- /dev/null +++ b/DonjonsEtChatons/scss/files/sac.scss @@ -0,0 +1,59 @@ +div.tab3 { + flex-wrap: wrap; + + div { + &.repcontainer { + display:flex; + width:100%; + justify-content: space-between; + align-items: flex-start; + align-content: flex-start; + flex-wrap: wrap; + + div { + &.repitem { + display:flex; + width:calc(50% - 10px); + flex-wrap: wrap; + background:$white; + border-radius:10px; + border:2px solid $borderBrown; + + &:nth-of-type(1n+3) { + margin-top:5px; + } + } + + &.itemcontrol { + button.btn, + a.btn { + padding-top:0px; + padding-bottom:2px; + } + } + } + + &.editmode { + div.repitem { + width:100%; + + &:nth-of-type(2) { + margin-top:5px; + } + } + } + } + + &.repcontrol { + width:100%; + } + + &.full { + p { + font-family: "patrick hand"; + text-align: justify; + font-size:15px; + } + } + } +} \ No newline at end of file diff --git a/DonjonsEtChatons/scss/files/talents.scss b/DonjonsEtChatons/scss/files/talents.scss new file mode 100644 index 0000000000..c711f95de0 --- /dev/null +++ b/DonjonsEtChatons/scss/files/talents.scss @@ -0,0 +1,112 @@ +div.tab1 { + + div { + + &.col { + @include buttonRoll; + display:flex; + flex-wrap: wrap; + align-items: flex-start; + align-content: flex-start; + width:calc((100% / 3) - 10px); + + div { + display:flex; + width:100%; + flex-wrap: wrap; + + label { + display:flex; + width:100%; + margin-top:5px; + + input[type="checkbox"] { + /* Add if not using autoprefixer */ + -webkit-appearance: none; + appearance: none; + /* For iOS < 15 to remove gradient background */ + background-color: #fff; + /* Not removed via appearance */ + margin: 0; + + font: inherit; + color: currentColor; + width: 1.15em; + height: 1.15em; + border: 0.15em solid currentColor; + border-radius: 0.15em; + transform: translateY(-0.075em); + + display: grid; + place-content: center; + + &::before { + content: ""; + width: 0.65em; + height: 0.65em; + transform: scale(0); + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em black; + transform-origin: bottom left; + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + } + + &:checked::before { + transform: scale(2); + margin-left: -6px; + } + } + + span { + margin-left:5px; + } + } + + select { + display:none; + width:calc(100% - 30px); + border:1px dashed; + margin:0px; + padding:0px; + padding-left:5px; + padding-right:5px; + font-size:14px; + height:30px; + line-height: 30px; + } + + button[type="action"].rollDice { + display:none; + } + + input[type="hidden"] { + &[value="on"] ~ select { + display:inline-block; + } + + &[value="on"] ~ button[type="action"].rollDice { + display:inline-block; + border:1px solid $black; + } + } + } + } + + &.full { + display:flex; + flex-wrap: wrap; + align-items: flex-start; + align-content: flex-start; + width:100%; + margin-top:5px; + + p { + width:100%; + text-align: justify; + margin:0px; + font-family: "patrick hand"; + font-size:15px; + } + } + } +} \ No newline at end of file diff --git a/DonjonsEtChatons/scss/files/templates.scss b/DonjonsEtChatons/scss/files/templates.scss new file mode 100644 index 0000000000..4077bf8fe1 --- /dev/null +++ b/DonjonsEtChatons/scss/files/templates.scss @@ -0,0 +1,78 @@ +.sheet-rolltemplate-simple { + display:flex; + flex-wrap: wrap; + width:100%; + background:$background; + border-radius:15px; + padding-top:10px; + padding-bottom:10px; + + h1, + h2 { + width:100%; + font-family: "Patrick Hand"; + margin:0px; + padding:0px; + text-align: center; + } + + h2 { + font-size:14px; + line-height: 20px; + } + + div { + &.sheet-container { + display:flex; + justify-content: space-between; + width:100%; + align-items: center; + align-content: center; + + >span { + display:flex; + width:50%; + font-family: "Patrick Hand"; + + &:first-of-type { + padding-left:5px; + } + + &:last-of-type { + justify-content: center; + } + } + } + } + + .inlinerollresult, + .inlinerollresult.fullcrit, + .inlinerollresult.fullfail, + .inlinerollresult.importantroll { + display: flex; + border:0px; + background:0px; + padding:0px; + margin:0px; + align-items: center; + align-content: center; + } + + a { + margin-left: auto !important; + margin-right: auto !important; + border: 2px solid black !important; + padding: 5px !important; + background: black !important; + color: white !important; + font-family: "Patrick Hand" !important; + letter-spacing: 1px !important; + border-radius: 15px !important; + + &:hover { + text-decoration: none !important; + background:$costaud !important; + text-shadow: 2px 2px 2px #555555 !important; + } + } +} \ No newline at end of file diff --git a/DonjonsEtChatons/translation.json b/DonjonsEtChatons/translation.json new file mode 100644 index 0000000000..0e01e10d40 --- /dev/null +++ b/DonjonsEtChatons/translation.json @@ -0,0 +1,62 @@ +{ + "":"", + "chaton":"Chaton", + "enfance":"Enfance", + "caractere":"Caractère", + "donDeNaissance":"Don de naissance", + "experience":"Expérience", + "actuelle":"Actuelle", + "totale":"Totale", + "qualites":"Qualités", + "costaud":"Costaud", + "malin":"Malin", + "mignon":"Mignon", + "coeur":"Coeur", + "amitie":"Amitié", + "talents":"Talents", + "grimoire":"Grimoire", + "sacDeVoyage":"Sac de voyage", + "bougerpopotin":"Bouger son popotin", + "bricolertruc":"Bricoler des trucs et des machins", + "connaitrelois":"Connaître les lois et les légendes", + "convaincrebaratiner":"Convaincre et baratiner", + "cueillirchasser":"Cueillir et chasser", + "cuisiner":"Cuisiner", + "dessinerpeindre":"Dessiner et peindre", + "fairemusique":"Faire de la musique", + "fairepoches":"Faire les poches", + "feulermenacer":"Feuler et menacer", + "griffer":"Griffer", + "herboriser":"Herboriser", + "lireecrire":"Lire et écrire", + "lireciel":"Lire le ciel et les étoiles", + "observerfouiller":"Observer et fouiller", + "restercalme":"Rester calme et impassible", + "soccuperbetes":"S'occuper des bêtes", + "cacherombres":"Se cacher dans les ombres", + "deplacerensilence":"Se déplacer en silence", + "seduirecharmer":"Séduire et charmer", + "soignerblessures":"Soigner blessures et maladies", + "trouverchemin":"Trouver son chemin", + "trouverinformation":"Trouver une information", + "contenusac":"Une couverture en laine, un couteau de poche, une cuillère en bois, un petit caquelon de fonte, une grande gourde en cuir, un briquet à amadou, des morceaux de chandelle, un morceau de savon, une brosse, un paquet de croquette de route.", + "agir":"Agir :", + "agirdetail":"lancer 3d6, chaque résultat inférieur ou égal au score de la Qualité est un succès.", + "seuildifficulte":"Seuil de difficulté :", + "seuildifficultedetail":"facile 1, moyen 2, difficile 3, légendaire 4.", + "talent":"Talent :", + "talentdetail":"Donne un Avantage.", + "avantage":"Avantage :", + "avantagedetail":"Lancer 4d6.", + "desavantage":"Désavantage :", + "desavantagedetail":"Lancer 2d6.", + "objets":"Objets ou Don :", + "objetsdetail":"Si utile, relancer 1d6 dont le résultat ne convient pas.", + "caracterest":"Caractère :", + "caracteredetail":"Si positif, gagner 1 Avantage / Si négatif, offrir un point d'Amitié.", + "succes":"Succès", + "relance":"Relance", + "jets":"Les jets sont", + "public":"public", + "prives":"privés" +} \ No newline at end of file