3629 lines
97 KiB
SCSS
3629 lines
97 KiB
SCSS
div.tabMechaArmure {
|
|
$subTab:(
|
|
"justifyContent": space-evenly,
|
|
"color": $white,
|
|
"background": $sombre,
|
|
"borderColor": $black,
|
|
"fontSize":14px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 4),
|
|
"widthBL":calc((100% / 4) - 1px),
|
|
"height":28px
|
|
)
|
|
);
|
|
|
|
@include col(100%, calc((100% / 2) - 5px));
|
|
@include subMenu("subTab", $subTab);
|
|
|
|
flex-wrap: wrap;
|
|
|
|
.archangel,
|
|
.nephilim,
|
|
.demon,
|
|
.subTabSpecial,
|
|
.subTabModules,
|
|
.subTabImprovisee,
|
|
.subTabArmes,
|
|
.gabriel,
|
|
.raphael,
|
|
.og,
|
|
.anak,
|
|
.djinn,
|
|
.asura {
|
|
display:none;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
div.selectionMA {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
@include buttonSelect(calc((100% / 3) - 20px));
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
div.donnees {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
text-transform:capitalize;
|
|
}
|
|
|
|
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.autoReparation {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
@include buttonRoll();
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col2,
|
|
.col2BL {
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
width:calc(100% - 31px);
|
|
padding-left:2px;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
button[type="roll"],
|
|
button[type="action"] {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col2 {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
.col2BL {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.styleCombat {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
padding: 0px;
|
|
border: 0px;
|
|
border-bottom:1px solid $sombre;
|
|
}
|
|
|
|
div.puissant {
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
border-bottom:1px solid $sombre;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
width: 70px;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
font-weight: bold;
|
|
padding-left: 2px;
|
|
color: $black;
|
|
}
|
|
|
|
select {
|
|
width: calc(50% - 35px);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: calc(50% - 35px);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: 0px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.suppression {
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
border-bottom:1px solid $sombre;
|
|
justify-content: space-between;
|
|
|
|
label {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
width:150px;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
font-weight: bold;
|
|
padding-left: 2px;
|
|
color: $black;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: calc(100% - 150px);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
&:first-of-type {
|
|
width:50%;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
width:calc(50% - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="puissant"] ~ div.puissant {
|
|
display:flex;
|
|
}
|
|
|
|
&[value="suppression"] ~ div.suppression {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.jet {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.bonus {
|
|
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"],
|
|
select {
|
|
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;
|
|
}
|
|
|
|
select {
|
|
padding-left:25px;
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
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.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.PE {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
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.DRMechaArmure {
|
|
@include block($sombre);
|
|
|
|
.col2,
|
|
.col2BL {
|
|
width:calc(100% / 2);
|
|
flex-wrap: wrap;
|
|
background: $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $white;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:100%;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border-top:1px solid $sombre;
|
|
border-bottom: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
}
|
|
}
|
|
|
|
.col2 {
|
|
span {
|
|
width:100%;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
.col2BL {
|
|
span {
|
|
width:calc(100% - 1px);
|
|
border-left:1px solid $clair;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:100%;
|
|
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.portee {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre{
|
|
display: flex;
|
|
}
|
|
|
|
div.col5 {
|
|
display:flex;
|
|
justify-content: center;
|
|
width:calc(100% / 5);
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
}
|
|
|
|
div.col5BL {
|
|
display:flex;
|
|
justify-content: center;
|
|
width:calc((100% / 5) - 1px);
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.col5,
|
|
div.col5BL {
|
|
span {
|
|
display:flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
line-height: 28px;
|
|
|
|
&:first-of-type {
|
|
font-weight:bold;
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.subTab {
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
div.configuration {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
@include buttonSelect(calc(100% - 10px), 5px, 5px) {
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
};
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
div.archangel {
|
|
div.offering {
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
div.offering,
|
|
div.curse {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
label {
|
|
display: flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
}
|
|
|
|
&.ligne {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:50%;
|
|
border-top:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
&.col2,
|
|
&.col2BL {
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
width:100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width:100%;
|
|
|
|
border-top:1px solid $sombre;
|
|
border-bottom:0px;
|
|
border-left:0px;
|
|
border-right:0px;
|
|
}
|
|
}
|
|
|
|
&.col2 {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
&.col2BL {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.podMiracle {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
align-items:flex-start;
|
|
margin-bottom:10px;
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
label.col2,
|
|
label.col2BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.col2,
|
|
div.col2BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
}
|
|
|
|
label.ligne {
|
|
display:flex;
|
|
width:100%;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
width:calc(100% - 50px - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:50px;
|
|
border-left:1px solid $sombre;
|
|
border-top:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
}
|
|
|
|
&:not(:last-of-type) {
|
|
border-bottom:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.ligneDouble {
|
|
display:flex;
|
|
width:100%;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
|
|
>span {
|
|
width:calc(100% - 100px - 4px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
width:102px;
|
|
justify-content: space-between;
|
|
background:$white;
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:50px;
|
|
border-top:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
background:transparent;
|
|
|
|
&:first-of-type {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
border-left:0px;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
width:2px;
|
|
justify-content: center;
|
|
align-items:center;
|
|
background:transparent;
|
|
color:$black;
|
|
}
|
|
}
|
|
|
|
&:not(:last-of-type) {
|
|
border-bottom:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
.col2 {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
.col2BL {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.droneEvacuation {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col2,
|
|
.col2BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col2 {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
.col2BL {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.vol {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col3,
|
|
.col3BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col3 {
|
|
width:calc(100% / 3);
|
|
}
|
|
|
|
.col3BL {
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.vagueSoin {
|
|
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col3,
|
|
.col3BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col3 {
|
|
width:calc(100% / 3);
|
|
}
|
|
|
|
.col3BL {
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.canonMetatron {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.bonus {
|
|
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"],
|
|
select {
|
|
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;
|
|
}
|
|
|
|
select {
|
|
padding-left:25px;
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
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.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;
|
|
}
|
|
}
|
|
|
|
.col4,
|
|
.col4BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col4 {
|
|
width:calc(100% / 4);
|
|
}
|
|
|
|
.col4BL {
|
|
width:calc((100% / 4) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
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.canonNoe {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col2,
|
|
.col2BL,
|
|
.col3,
|
|
.col3BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col2,
|
|
.col2BL {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
.col2 {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
.col2BL {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
.col3 {
|
|
width:calc(100% / 3);
|
|
}
|
|
|
|
.col3BL {
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.nephilim {
|
|
div.invulnerabilite {
|
|
$titre:(
|
|
"titreInverse":(
|
|
"actif":true,
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titreInverse,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col2,
|
|
.col2BL,
|
|
.col4,
|
|
.col4BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col2 {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
.col2BL {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
.col4,
|
|
.col4BL {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
.col4 {
|
|
width:calc(100% / 4);
|
|
}
|
|
|
|
.col4BL {
|
|
width:calc((100% / 4) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.stationDefense {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
margin-top:10px;
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.borderTop {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
label.col2,
|
|
label.col2BL,
|
|
label.col3,
|
|
label.col3BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.col3,
|
|
label.col3L,
|
|
div.col3BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
|
|
span {
|
|
display:flex;
|
|
width:calc(100% - 29px - 2px);
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: flex-start;
|
|
padding-left:2px;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:29px;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:1px solid $sombre;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:0px;
|
|
}
|
|
|
|
button[type="roll"],
|
|
button[type="action"] {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col2 {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
.col2BL {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
.col3,
|
|
.col3L {
|
|
width:calc(100% / 3);
|
|
}
|
|
|
|
.col3BL {
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.jericho {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col4,
|
|
.col4BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col4 {
|
|
width:calc(100% / 4);
|
|
}
|
|
|
|
.col4BL {
|
|
width:calc((100% / 4) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.siegeTower {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
margin-top:10px;
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col2,
|
|
.col2BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col2 {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
.col2BL {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.saut,
|
|
div.emblem,
|
|
div.droneAirain {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col4,
|
|
.col4BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
>span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
>input[type="number"],
|
|
>input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col4 {
|
|
width:calc(100% / 4);
|
|
}
|
|
|
|
.col4BL {
|
|
width:calc((100% / 4) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.emblem {
|
|
margin-top:10px;
|
|
}
|
|
|
|
div.droneAirain {
|
|
.borderTop {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.canonMagma,
|
|
div.surtur {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.bonus {
|
|
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"],
|
|
select {
|
|
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;
|
|
}
|
|
|
|
select {
|
|
padding-left:25px;
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
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.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;
|
|
}
|
|
}
|
|
|
|
.col4,
|
|
.col4BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col4 {
|
|
width:calc(100% / 4);
|
|
}
|
|
|
|
.col4BL {
|
|
width:calc((100% / 4) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
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.demon {
|
|
div.souffleDemoniaque {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
margin-top:10px;
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.bonus {
|
|
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"],
|
|
select {
|
|
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;
|
|
}
|
|
|
|
select {
|
|
padding-left:25px;
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
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.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;
|
|
}
|
|
}
|
|
|
|
.col4,
|
|
.col4BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col4 {
|
|
width:calc(100% / 4);
|
|
}
|
|
|
|
.col4BL {
|
|
width:calc((100% / 4) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
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.bouclierAmrita {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
margin-top:10px;
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col2,
|
|
.col2BL,
|
|
.col3,
|
|
.col3BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col2 {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
.col2BL {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
.col3,
|
|
.col3BL {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
.col3 {
|
|
width:calc(100% / 3);
|
|
}
|
|
|
|
.col3BL {
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="1"] {
|
|
|
|
& ~ div.titre {
|
|
button[type="action"].active {
|
|
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.wraith {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":102px,
|
|
"height":28px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":28px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":true
|
|
),
|
|
"shadow":true
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
@include fakeButton($fakeButton);
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.bonus {
|
|
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"],
|
|
select {
|
|
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;
|
|
}
|
|
|
|
select {
|
|
padding-left:25px;
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.rollPJ {
|
|
width: 100%;
|
|
background: $clair;
|
|
font-size: 14px;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
select {
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
|
|
&:last-of-type {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
&:first-of-type {
|
|
width:50%;
|
|
}
|
|
|
|
&:last-of-type {
|
|
width:calc(50% - 29px);
|
|
}
|
|
}
|
|
|
|
button[type="roll"],
|
|
button[type="action"] {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
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.nanobrume {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
margin-top:10px;
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col3,
|
|
.col3BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col3 {
|
|
width:calc(100% / 3);
|
|
}
|
|
|
|
.col3BL {
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="1"] {
|
|
|
|
& ~ div.titre {
|
|
button[type="action"].active {
|
|
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.poingsSoniques {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.bonus {
|
|
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"],
|
|
select {
|
|
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;
|
|
}
|
|
|
|
select {
|
|
padding-left:25px;
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
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.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;
|
|
}
|
|
}
|
|
|
|
.col4,
|
|
.col4BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col4 {
|
|
width:calc(100% / 4);
|
|
}
|
|
|
|
.col4BL {
|
|
width:calc((100% / 4) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
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.chocSonique {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
margin-top:10px;
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col2,
|
|
.col2BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col2 {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
.col2BL {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="1"] {
|
|
|
|
& ~ div.titre {
|
|
button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px #000000 inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.titre {
|
|
button[type="action"].bonusCaracL1,
|
|
button[type="action"].bonusCaracL2 {
|
|
box-shadow: 0px 0px 7px 0px #000000 inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.saut {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col4,
|
|
.col4BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col4 {
|
|
width:calc(100% / 4);
|
|
}
|
|
|
|
.col4BL {
|
|
width:calc((100% / 4) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.inferno {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col4,
|
|
.col4BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col4 {
|
|
width:calc(100% / 4);
|
|
}
|
|
|
|
.col4BL {
|
|
width:calc((100% / 4) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.lamesCinetiques {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.bonus {
|
|
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"],
|
|
select {
|
|
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;
|
|
}
|
|
|
|
select {
|
|
padding-left:25px;
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
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.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;
|
|
}
|
|
}
|
|
|
|
.col4,
|
|
.col4BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col4 {
|
|
width:calc(100% / 4);
|
|
}
|
|
|
|
.col4BL {
|
|
width:calc((100% / 4) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
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.tourelles {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.col4,
|
|
.col4BL {
|
|
display:flex;
|
|
font-size: 14px;
|
|
background: $clair;
|
|
flex-wrap: wrap;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $black;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
text-align: center;
|
|
color: $black;
|
|
border-left:0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.col4 {
|
|
width:calc(100% / 4);
|
|
}
|
|
|
|
.col4BL {
|
|
width:calc((100% / 4) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.subTabImprovisee {
|
|
|
|
display:none;
|
|
flex-wrap: wrap;
|
|
width:100%;
|
|
|
|
div.utilisation {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":calc((100% / 2) - 50px),
|
|
"height":26px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":26px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":true
|
|
),
|
|
"shadow":true
|
|
);
|
|
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include fakeButton($fakeButton);
|
|
|
|
width:50%;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.buttons {
|
|
display:flex;
|
|
justify-content: space-evenly;
|
|
background:$clair;
|
|
width:100%;
|
|
padding-top:5px;
|
|
padding-bottom:5px;
|
|
}
|
|
|
|
div.bonus {
|
|
display:none;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
div.bonusCarac {
|
|
display:none;
|
|
width: 100%;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
|
|
select {
|
|
display:none;
|
|
border:0px;
|
|
font-size:14px;
|
|
padding-top:0px;
|
|
padding-right:0px;
|
|
padding-bottom:0px;
|
|
padding-left:15px;
|
|
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.bonus {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div 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.bonus {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div div.bonusCarac {
|
|
display:flex;
|
|
|
|
select:first-of-type {
|
|
display:inline-block;
|
|
width:50%;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
|
|
select:last-of-type {
|
|
display:inline-block;
|
|
width:50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.liste {
|
|
@include block($sombre);
|
|
@include titre($white, transparent);
|
|
@include buttonRoll();
|
|
|
|
margin-top:10px;
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.ligneTitre {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
display:flex;
|
|
background:$clair;
|
|
justify-content: center;
|
|
color:$black;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
height:28px;
|
|
line-height:28px;
|
|
}
|
|
|
|
.type {
|
|
width:calc(100% - 1px - (110px * 3) - 28px);
|
|
}
|
|
|
|
.jetArme {
|
|
width:110px;
|
|
padding-right:29px;
|
|
}
|
|
}
|
|
|
|
.type,
|
|
.degats,
|
|
.violence {
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items:center;
|
|
align-content:center;
|
|
}
|
|
|
|
.degats,
|
|
.violence {
|
|
width:calc(110px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
.jetArme {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.ligne {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
.degats,
|
|
.violence {
|
|
height:28px;
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width:100%;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
min-height: 28px;
|
|
height:100%;
|
|
background: $white;
|
|
text-align: center;
|
|
cursor: context-menu;
|
|
}
|
|
}
|
|
|
|
.type {
|
|
display:flex;
|
|
width:calc(100% - 1px - (110px * 3) - 29px - 3px);
|
|
height:28px;
|
|
background: $white;
|
|
text-align: justify;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
align-content:center;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.jetArme {
|
|
width:calc(110px + 29px);
|
|
height:28px;
|
|
|
|
input[type="number"] {
|
|
width:calc(100% - 29px);
|
|
margin: 0px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
min-height: 28px;
|
|
height:100%;
|
|
background: white;
|
|
text-align: center;
|
|
cursor: context-menu;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.separationTop {
|
|
border-top:2px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.selectionMA {
|
|
&[value="archangel"] {
|
|
& ~ div div.archangel {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div button[type="action"].archangel {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
|
|
&[value="nephilim"] {
|
|
& ~ div div.nephilim {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div button[type="action"].nephilim {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
|
|
&[value="demon"] {
|
|
& ~ div div.demon {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div button[type="action"].demon {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
|
|
&[value="0"] {
|
|
& ~ div .MANom {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.subTabSpecial {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].subTabSpecial {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .subTabSpecial,
|
|
& ~ div .subTabSpecial {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.subTabModules {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].subTabModules {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .subTabModules,
|
|
& ~ div .subTabModules {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.subTabArmes {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].subTabArmes {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .subTabArmes,
|
|
& ~ div .subTabArmes {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.subTabImprovisee {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].subTabImprovisee {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .subTabImprovisee,
|
|
& ~ div .subTabImprovisee {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.archangelConfiguration {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].gabriel {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div .gabriel {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div button[type="action"].raphael {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div .raphael {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.nephilimConfiguration {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].og {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div .og {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div button[type="action"].anak {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div .anak {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.demonConfiguration {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].djinn {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div .djinn {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div button[type="action"].asura {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div .asura {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.col >* {
|
|
margin-bottom:10px;
|
|
}
|
|
} |