918 lines
25 KiB
SCSS
918 lines
25 KiB
SCSS
div.tabDossier {
|
|
@include col(100%, calc((100% / 2) - 5px));
|
|
|
|
div.identite {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasRollSpecial":true
|
|
)
|
|
);
|
|
|
|
$fakeButton:(
|
|
"label":(
|
|
"width":140px,
|
|
"height":22px
|
|
),
|
|
"span":(
|
|
"color":$black,
|
|
"background":$clair,
|
|
"width":100%,
|
|
"height":20px,
|
|
"border":true
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include fakeButton($fakeButton);
|
|
|
|
>label {
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-content: center;
|
|
|
|
width: 100%;
|
|
background: $clair;
|
|
color: $black;
|
|
font-size: 14px;
|
|
|
|
border-bottom:1px solid $sombre;
|
|
|
|
span {
|
|
display:inline-block;
|
|
width: calc(50% - 2px);
|
|
line-height: 28px;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
input[type="text"],
|
|
select {
|
|
display:inline-block;
|
|
width: 50%;
|
|
border: 0px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
height: 28px;
|
|
}
|
|
}
|
|
|
|
div.button {
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-content: center;
|
|
|
|
width: 100%;
|
|
background: $clair;
|
|
color: $black;
|
|
font-size: 14px;
|
|
|
|
div {
|
|
width: calc((100% / 4) * 3);
|
|
|
|
>span {
|
|
display:flex;
|
|
width: max-content;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
padding-left:2px;
|
|
margin-right:5px;
|
|
}
|
|
|
|
label.fakeButton {
|
|
font-size:12px;
|
|
|
|
span {
|
|
|
|
&:last-of-type {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
&:checked {
|
|
& ~ span {
|
|
&:first-of-type {
|
|
display:none;
|
|
}
|
|
|
|
&:last-of-type {
|
|
display:flex;
|
|
|
|
&::before {
|
|
background:$sombre;
|
|
color:$white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
display:inline-block;
|
|
width: calc(100% / 4);
|
|
border: 0px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
height: 28px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.repeating {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
.repcontainer {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
.repitem {
|
|
width:100%;
|
|
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.repcontrol {
|
|
background:$clair;
|
|
}
|
|
}
|
|
|
|
.armurePorte {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
input[type="hidden"].choixArmure {
|
|
&[value="choix"] ~ button[type="action"].choix,
|
|
&[value="barbarian"] ~ button[type="action"].barbarian,
|
|
&[value="bard"] ~ button[type="action"].bard,
|
|
&[value="berserk"] ~ button[type="action"].berserk,
|
|
&[value="druid"] ~ button[type="action"].druid,
|
|
&[value="monk"] ~ button[type="action"].monk,
|
|
&[value="necromancer"] ~ button[type="action"].necromancer,
|
|
&[value="paladin"] ~ button[type="action"].paladin,
|
|
&[value="priest"] ~ button[type="action"].priest,
|
|
&[value="psion"] ~ button[type="action"].psion,
|
|
&[value="ranger"] ~ button[type="action"].ranger,
|
|
&[value="rogue"] ~ button[type="action"].rogue,
|
|
&[value="shaman"] ~ button[type="action"].shaman,
|
|
&[value="sorcerer"] ~ button[type="action"].sorcerer,
|
|
&[value="warlock"] ~ button[type="action"].warlock,
|
|
&[value="warmaster"] ~ button[type="action"].warmaster,
|
|
&[value="warrior"] ~ button[type="action"].warrior,
|
|
&[value="wizard"] ~ button[type="action"].wizard {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].porte {
|
|
&[value="sans"] ~ button[type="action"].sans,
|
|
&[value="guardian"] ~ button[type="action"].guardian,
|
|
&[value="barbarian"] ~ button[type="action"].barbarian,
|
|
&[value="bard"] ~ button[type="action"].bard,
|
|
&[value="berserk"] ~ button[type="action"].berserk,
|
|
&[value="druid"] ~ button[type="action"].druid,
|
|
&[value="monk"] ~ button[type="action"].monk,
|
|
&[value="necromancer"] ~ button[type="action"].necromancer,
|
|
&[value="paladin"] ~ button[type="action"].paladin,
|
|
&[value="priest"] ~ button[type="action"].priest,
|
|
&[value="psion"] ~ button[type="action"].psion,
|
|
&[value="ranger"] ~ button[type="action"].ranger,
|
|
&[value="rogue"] ~ button[type="action"].rogue,
|
|
&[value="shaman"] ~ button[type="action"].shaman,
|
|
&[value="sorcerer"] ~ button[type="action"].sorcerer,
|
|
&[value="warlock"] ~ button[type="action"].warlock,
|
|
&[value="warmaster"] ~ button[type="action"].warmaster,
|
|
&[value="warrior"] ~ button[type="action"].warrior,
|
|
&[value="wizard"] ~ button[type="action"].wizard {
|
|
background:$sombre;
|
|
color:$white;
|
|
border:2px solid $clair;
|
|
}
|
|
}
|
|
|
|
button[type="action"] {
|
|
height: 28px;
|
|
color: black;
|
|
padding: 0px;
|
|
margin-right: 2px;
|
|
|
|
margin-left: 2px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: $clair;
|
|
border: 2px solid $sombre;
|
|
font-size: 14px;
|
|
font-variant: small-caps;
|
|
font-weight: bold;
|
|
z-index: 50;
|
|
|
|
&.principalA {
|
|
display:none;
|
|
width:calc(100% - 15px);
|
|
margin-bottom: 2px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
&.principalB {
|
|
display:none;
|
|
width:calc((100% / 3) - 15px);
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
&.secondaire {
|
|
display:flex;
|
|
width:calc((100% / 3) - 15px);
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: inset 1px 1px 2px 2px $black;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].choixArmure {
|
|
&[value="necromancer"],
|
|
&[value="sorcerer"] {
|
|
& ~ button[type="action"].secondaire {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.jet {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label {
|
|
display:flex;
|
|
width: 100%;
|
|
background: $clair;
|
|
font-size: 14px;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
width: calc(50% - 2px);
|
|
line-height: 28px;
|
|
padding-left: 2px;
|
|
font-size: 14px;
|
|
font-weight:bold;
|
|
color:$black;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 50%;
|
|
height:28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
border-left:1px solid $sombre;
|
|
color:$black;
|
|
}
|
|
}
|
|
|
|
div.rollPJ {
|
|
width: 100%;
|
|
background: $clair;
|
|
font-size: 14px;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
select {
|
|
width:50%;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
|
|
&:last-of-type {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.rollPNJ {
|
|
width: 100%;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
select {
|
|
width:100%;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
div.bonusCarac {
|
|
display:none;
|
|
width: 100%;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
select {
|
|
display:none;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].bonusCarac {
|
|
&[value="1"] {
|
|
|
|
& ~ div.titre {
|
|
button[type="action"].bonusCaracL1 {
|
|
box-shadow: 0px 0px 7px 0px #000000 inset;
|
|
}
|
|
}
|
|
|
|
& ~ div.bonusCarac {
|
|
display:flex;
|
|
|
|
select:first-of-type {
|
|
display:inline-block;
|
|
width:100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.titre {
|
|
button[type="action"].bonusCaracL1,
|
|
button[type="action"].bonusCaracL2 {
|
|
box-shadow: 0px 0px 7px 0px #000000 inset;
|
|
}
|
|
}
|
|
|
|
& ~ div.bonusCarac {
|
|
display:flex;
|
|
|
|
select:first-of-type {
|
|
display:inline-block;
|
|
width:50%;
|
|
}
|
|
|
|
select:last-of-type {
|
|
display:inline-block;
|
|
width:50%;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.dataArmure {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasActionSpecial":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
h1.titre {
|
|
span {
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
div.ligneTitre {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
justify-content: center;
|
|
align-items:center;
|
|
|
|
&:first-of-type {
|
|
padding-left: 2px;
|
|
width: calc(31% - 2px);
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
width: calc(23% - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.ligne3 {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
padding-left: 2px;
|
|
width: calc(31% - 2px);
|
|
}
|
|
|
|
div {
|
|
width: calc(23% - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.ligne1 {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
padding-left: 2px;
|
|
width: calc(31% - 2px);
|
|
}
|
|
|
|
div {
|
|
width: 23%;
|
|
|
|
&:nth-of-type(1),
|
|
&:nth-of-type(2) {
|
|
width: calc(23% - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.physiqueMental {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
div.ligneTitre {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
justify-content: center;
|
|
align-items:center;
|
|
|
|
&:first-of-type {
|
|
padding-left: 2px;
|
|
width: calc(31% - 2px);
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
width: calc(23% - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.ligne3 {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
padding-left: 2px;
|
|
width: calc(31% - 2px);
|
|
}
|
|
|
|
div {
|
|
width: calc(23% - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.egide {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
div.ligneTitre {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
justify-content: center;
|
|
align-items:center;
|
|
|
|
&:first-of-type {
|
|
width:calc(100% / 3);
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.ligne3 {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
padding-left: 2px;
|
|
width: calc(31% - 2px);
|
|
}
|
|
|
|
div {
|
|
&:first-of-type {
|
|
width:calc(100% / 3);
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.PES {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
div.ligneTitre {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
width: calc(100% / 3);
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
justify-content: center;
|
|
align-items:center;
|
|
|
|
&:not(:first-of-type) {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.ligne2 {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
width: calc((100% / 3) - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div {
|
|
width: calc(100% / 3);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.resilience {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
border-top:1px solid $sombre;
|
|
|
|
div {
|
|
span {
|
|
display:flex;
|
|
width: calc(100% - 70px);
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&:first-of-type {
|
|
width: calc((100% / 3) - 2px);
|
|
padding-left:2px;
|
|
|
|
button[type="action"] {
|
|
width: 68px;
|
|
height: 26px;
|
|
padding: 0px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: $sombre;
|
|
border: 1px solid $clair;
|
|
font-size: 12px;
|
|
font-variant: small-caps;
|
|
font-weight: bold;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
margin-left: auto;
|
|
color: $white;
|
|
|
|
&:hover {
|
|
box-shadow: inset 1px 1px 2px 2px $black;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
width: calc(100% / 3);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.debordement {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
div.ligneTitre {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
width: calc(100% / 2);
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
justify-content: center;
|
|
align-items:center;
|
|
|
|
&:not(:first-of-type) {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.ligne2 {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
width: calc(100% / 2);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div {
|
|
width: calc(100% / 2);
|
|
|
|
&:not(:first-of-type) {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.stats {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.ligne {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
|
|
div.fichePJ {
|
|
width:60%;
|
|
flex-wrap: wrap;
|
|
border-right:1px solid $sombre;
|
|
|
|
div {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
|
|
label {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
width: calc(100% - 52px);
|
|
font-size: 14px;
|
|
padding-left: 2px;
|
|
line-height: 28px;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 50px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border: 0px;
|
|
}
|
|
|
|
&:first-of-type {
|
|
width: 60%;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
border-left: 1px solid $sombre;
|
|
width:40%;
|
|
}
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.fichePNJ {
|
|
width:60%;
|
|
flex-wrap: wrap;
|
|
border-right:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width: 100%;
|
|
line-height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
background: $clair;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
height: 29px;
|
|
text-align: center;
|
|
border-bottom: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-top: 1px solid $sombre;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"].aspect {
|
|
width: 40%;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border: 0px;
|
|
height: 87px;
|
|
font-size: 48px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.ptsFaibles {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
}
|
|
|
|
div.col >div {
|
|
&:not(:first-of-type) {
|
|
margin-top:10px;
|
|
}
|
|
}
|
|
} |