mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-05 06:32:31 +00:00
13997 lines
436 KiB
SCSS
13997 lines
436 KiB
SCSS
div.tabCombat {
|
|
$subTab:(
|
|
"justifyContent": space-evenly,
|
|
"color": $white,
|
|
"background": $sombre,
|
|
"borderColor": $black,
|
|
"fontSize":14px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 5),
|
|
"widthBL":calc((100% / 5) - 1px),
|
|
"widthBLR":calc((100% / 5) - 2px),
|
|
"height":28px,
|
|
"lastLine":true
|
|
)
|
|
);
|
|
|
|
@include col(100%, calc((100% / 2) - 5px));
|
|
@include col(100%, calc((100% / 3) - 5px), "col3");
|
|
@include subMenu("subTab", $subTab);
|
|
|
|
flex-wrap:wrap;
|
|
|
|
//COL GAUCHE PJ
|
|
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 {
|
|
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.sorcererPE {
|
|
@include block($clair);
|
|
@include buttonRoll() {
|
|
border-left:1px solid $sombre;
|
|
};
|
|
|
|
h1 {
|
|
display:flex;
|
|
}
|
|
|
|
@include oneLineIS($clair, $black, 29px, true);
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//COL GAUCHE PNJ/CREATURES
|
|
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.bandeDebordement {
|
|
$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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//COL DROITE PJ
|
|
div.nods {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.ligne {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
display:flex;
|
|
background:$clair;
|
|
width: calc((100% / 3) - 2px);
|
|
padding-left: 2px;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.blockM {
|
|
display:flex;
|
|
width:calc(((100% / 3) * 2) - 28px - 2px);
|
|
height:28px;
|
|
justify-content: space-between;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
|
|
input[type="number"] {
|
|
width:calc((100% / 2) - 3px);
|
|
height:28px;
|
|
border:0px;
|
|
padding:0px;
|
|
text-align: center
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width:6px;
|
|
height:28px;
|
|
background:$white;
|
|
font-weight:bold;
|
|
align-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
border-top: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.herauts {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
width:100%;
|
|
background:$clair;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding-right:2px;
|
|
padding-left:2px;
|
|
|
|
button[type="action"] {
|
|
display:flex;
|
|
width:calc((100% / 2) - 5px);
|
|
background:$clair;
|
|
color:$black;
|
|
justify-content: center;
|
|
border:1px solid $black;
|
|
padding:0px;
|
|
margin-top:2px;
|
|
margin-bottom:2px;
|
|
font-weight:bold;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
|
|
&:nth-of-type(3) {
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.devasterAnatheme[value="1"] ~ button[type="action"].devasterAnatheme,
|
|
&.bourreauTenebres[value="1"] ~ button[type="action"].bourreauTenebres,
|
|
&.equilibreBalance[value="1"] ~ button[type="action"].equilibreBalance {
|
|
background:$sombre;
|
|
color:$white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//COL DROITE PJ/PNJ/CREATURES
|
|
label.BMJets {
|
|
display:flex;
|
|
background: $clair;
|
|
border:1px solid $sombre;
|
|
align-content:center;
|
|
align-items:center;
|
|
position:relative;
|
|
|
|
width:100%;
|
|
min-height: 28px;
|
|
|
|
span {
|
|
position:absolute;
|
|
width: calc(100% - 2px);
|
|
align-content: baseline;
|
|
background: transparent;
|
|
color: $black;
|
|
line-height: 28px;
|
|
min-height: 28px;
|
|
justify-content: left;
|
|
font-size: 14px;
|
|
padding-left:2px;
|
|
}
|
|
|
|
input[type="number"] {
|
|
position:absolute;
|
|
width: 50%;
|
|
height:28px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-bottom: 0px;
|
|
border-right: 0px;
|
|
border-left:1px solid $sombre;
|
|
padding: 0px;
|
|
right:0px;
|
|
}
|
|
}
|
|
|
|
//PORTEE
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//ZONE CENTRALE PJ
|
|
div.subTabArmure {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
>div {
|
|
display:none;
|
|
}
|
|
|
|
div.complet {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
div.barbarianGoliath {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
h1.borderBottom {
|
|
border-bottom:1px solid $clair;
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
padding-left: 2px;
|
|
line-height: 28px;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border: 0px;
|
|
}
|
|
|
|
label.ligne {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
width: calc(50% - 2px);
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 50%;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.col {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
|
|
span {
|
|
width:100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
width:50%;
|
|
}
|
|
|
|
label.colBL {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
|
|
span {
|
|
width:100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
width:calc(50% - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
label.borderTop {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.bardChangeling {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.firstTitre {
|
|
border-bottom:1px solid $clair;
|
|
}
|
|
|
|
input[type="text"] {
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border: 0px;
|
|
}
|
|
|
|
div.bard250 {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
label.ligne {
|
|
background:$clair;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
|
|
span {
|
|
display:flex;
|
|
width:calc(50% - 2px);
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
padding-left: 2px;
|
|
line-height: 28px;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width:50%;
|
|
border-left:1px solid $sombre;
|
|
border-right:0px;
|
|
border-top:0px;
|
|
border-bottom:0px;
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
width:100%;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
div.bard250,
|
|
label.bard250,
|
|
input[type="text"].bard250 {
|
|
display:none;
|
|
}
|
|
|
|
input[type="hidden"].bard250 {
|
|
&[value="on"] ~ div.bard250,
|
|
&[value="on"] ~ label.bard250,
|
|
&[value="on"] ~ input[type="text"].bard250 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value^="{{modeChangeling"] {
|
|
& ~ div.titre {
|
|
button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.berserkIllumination {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
),
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$clair,
|
|
"color":$black
|
|
),
|
|
"titreInverse":(
|
|
"actif":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
@include buttonSelect();
|
|
|
|
h1.titre,
|
|
h2.titreBis {
|
|
display:flex;
|
|
}
|
|
|
|
div.titre,
|
|
div.titreInverse {
|
|
display:none;
|
|
|
|
&:not(:first-of-type) {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"][value="on"] ~ button[type="action"] {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
|
|
h2.titreBis {
|
|
border-bottom:1px solid $sombre;
|
|
}
|
|
|
|
label {
|
|
display:none;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width:100%;
|
|
border-bottom: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border-top: 1px solid $sombre;
|
|
min-width: 0px;
|
|
}
|
|
|
|
&.col1 {
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
width:100%;
|
|
}
|
|
|
|
&.col2 {
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
&.col2BL {
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
&.col3 {
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
width:calc(100% / 3);
|
|
}
|
|
|
|
&.col3BL {
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
input[type="text"].ligne {
|
|
display:none;
|
|
width:100%;
|
|
border-top:1px solid $sombre;
|
|
border-bottom: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.blaze {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].blaze {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .blaze {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.candle {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].candle {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .candle {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.beacon {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].beacon {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .beacon {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.torch {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].torch {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .torch {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.projector {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].projector {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .projector {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.lighthouse {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].lighthouse {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .lighthouse {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.lantern {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].lantern {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .lantern {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div.berserkRage {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
),
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$clair,
|
|
"color":$black
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
@include buttonSelect();
|
|
|
|
div.button,
|
|
div.passif,
|
|
div.niveaux,
|
|
div.N1,
|
|
div.N2,
|
|
div.N3 {
|
|
display:none;
|
|
}
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.niveau {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].N1 {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.niveaux div.N1 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div button[type="action"].N2 {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.niveaux div.N2 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].N3 {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.niveaux div.N3 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
&[value="on"] {
|
|
& ~ div button[type="action"].rageActive {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.button,
|
|
& ~ div.passif,
|
|
& ~ div.niveaux {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.passif {
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
|
|
div.espoir {
|
|
display:flex;
|
|
width:100%;
|
|
background:$clair;
|
|
|
|
span {
|
|
width: max-content;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
button[type="roll"],
|
|
button[type="action"] {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
h2.titreBis {
|
|
display:flex;
|
|
border-bottom:1px solid $sombre;
|
|
|
|
&:last-of-type {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.col4 {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
width:calc(100% / 4);
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
border-top:1px solid $sombre;
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width: calc(100% - 28px);
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border-right: 1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.col4BL {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
width:calc((100% / 4) - 1px);
|
|
background:$clair;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
border-top:1px solid $sombre;
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width: calc(100% - 28px);
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border-right: 1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.niveaux {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
div.N1,
|
|
div.N2,
|
|
div.N3 {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
label.col2 {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
width:calc(100% / 2);
|
|
background:$clair;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border-top: 1px solid $sombre;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
border-right:0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 29px;
|
|
}
|
|
}
|
|
|
|
label.col2BL {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
background:$clair;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border-top: 1px solid $sombre;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
border-right:0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 29px;
|
|
}
|
|
}
|
|
|
|
label.col3 {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
width:calc(100% / 3);
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border-top: 1px solid $sombre;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
border-right:0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 29px;
|
|
}
|
|
}
|
|
|
|
label.col3BL {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border-top: 1px solid $sombre;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
border-right:0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 29px;
|
|
}
|
|
}
|
|
|
|
label.col3SBL {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width: calc(100% - 28px);
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border-right: 1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.borderTop,
|
|
label.borderTop {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.druidModJetCompagnons {
|
|
@include block($clair);
|
|
|
|
h1 {
|
|
display:flex;
|
|
}
|
|
|
|
@include oneLineIS($clair, $black, 0px, false, true);
|
|
}
|
|
div.druidModCompanions {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasSelect":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonSelect();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.titre {
|
|
border-bottom:0px;
|
|
}
|
|
|
|
input[type="hidden"].choix {
|
|
&[value="aucun"] ~ .button {
|
|
button[type="action"] {
|
|
&.aucun {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[value="lion"] ~ .button {
|
|
button[type="action"] {
|
|
&.lion {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[value="wolf"] ~ .button {
|
|
button[type="action"] {
|
|
&.wolf {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[value="crow"] ~ .button {
|
|
button[type="action"] {
|
|
&.crow {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].druidCompanions {
|
|
&[value="aucun"] {
|
|
& ~ div.DCLion,
|
|
& ~ div.DCWolf,
|
|
& ~ div.DCCrow {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
&[value="lion"] {
|
|
& ~ div.DCWolf,
|
|
& ~ div.DCCrow {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
&[value="wolf"] {
|
|
& ~ div.DCLion,
|
|
& ~ div.DCCrow {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
&[value="crow"] {
|
|
& ~ div.DCLion,
|
|
& ~ div.DCWolf {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.DCLion {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":$sombre,
|
|
"borderColor":$black,
|
|
"fontSize":1.2em,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 3),
|
|
"widthBL":calc((100% / 3) - 1px),
|
|
"height":28px
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.col4,
|
|
div.col4BL {
|
|
width:calc(100% / 4);
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
align-items:flex-start;
|
|
|
|
>h1.titre {
|
|
border-top:1px solid $white;
|
|
}
|
|
|
|
div.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.blockR {
|
|
width:50%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.aspect {
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div.blockR {
|
|
input[type="number"] {
|
|
width:calc(100% - 28px);
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.AE {
|
|
justify-content: center;
|
|
|
|
span.mineur,
|
|
span.majeur {
|
|
display:none;
|
|
margin-right:2px;
|
|
width: min-content;
|
|
justify-content: center;
|
|
}
|
|
|
|
span.value {
|
|
display:flex;
|
|
width: min-content;
|
|
justify-content: center;
|
|
|
|
&::before {
|
|
content: "(";
|
|
}
|
|
|
|
&::after {
|
|
content: ")";
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"],
|
|
&[value="1"],
|
|
&[value="2"],
|
|
&[value="3"],
|
|
&[value="4"],
|
|
&[value="5"] {
|
|
& ~ span.mineur {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="6"],
|
|
&[value="7"],
|
|
&[value="8"],
|
|
&[value="9"],
|
|
&[value="10"] {
|
|
& ~ span.majeur {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.defense,
|
|
div.reaction {
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div.blockR {
|
|
input[type="number"] {
|
|
width:100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.initiative {
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div.blockR {
|
|
input[type="number"] {
|
|
width:calc(100% - 28px);
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armure,
|
|
div.energie {
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div.blockR {
|
|
input[type="number"] {
|
|
width:calc(100% - 3px);
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width:6px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.CDF {
|
|
input[type="number"] {
|
|
width:100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.col4BL {
|
|
>h1.titre {
|
|
border-left:1px solid $white;
|
|
}
|
|
|
|
>div {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.armes {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"height":23px,
|
|
"width":100%,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
display:none;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.ligneTitre {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
display:flex;
|
|
justify-content: center;
|
|
color:$black;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
height:28px;
|
|
line-height:28px;
|
|
}
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (170px * 4));
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.midCol {
|
|
background:$clair;
|
|
width:calc(170px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.lastCol {
|
|
background:$clair;
|
|
width:calc(170px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:calc(100% - 28px);
|
|
|
|
margin-right:28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.guidage {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.guidage {
|
|
display:block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.cadence {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.cadence {
|
|
display:flex;
|
|
padding-right:28px;
|
|
}
|
|
|
|
label.guidage {
|
|
width:99px;
|
|
margin-right:0px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.coups {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":100%,
|
|
"widthBL":calc(100% - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
div.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (170px * 4));
|
|
}
|
|
|
|
div.midCol,
|
|
div.lastCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(170px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.aB1Nom {
|
|
input[type="text"] {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 4px;
|
|
min-width: 0px;
|
|
}
|
|
}
|
|
|
|
div.aB1Degats,
|
|
div.aB1Violence {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
input[type="number"].nbre {
|
|
text-align:right;
|
|
}
|
|
|
|
input[type="number"].bonus {
|
|
text-align:left;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
div.aB1Portee {
|
|
select {
|
|
width:100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
div.aB1Aspect {
|
|
select {
|
|
width:calc(100% - 28px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.special {
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
div.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.double {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
label.fakeButton {
|
|
width:calc(100% - 30px);
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.doubleTexte {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 23px;
|
|
text-align: center;
|
|
border: 1px solid black;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.triple {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
div {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
height: 23px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-left:0px;
|
|
border-top:1px solid $black;
|
|
color:$black;
|
|
|
|
&.R {
|
|
text-align:left;
|
|
border-left:1px solid $black;
|
|
}
|
|
|
|
&.L {
|
|
text-align:right;
|
|
border-right:1px solid $black;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
background:$sombre;
|
|
width: 28px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $white;
|
|
border-top: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"] {
|
|
& ~ label span::before,
|
|
& ~ div span {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].subMenu {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].effets {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.effets {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div button[type="action"].ameliorationsArmes {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.ameliorationsArmes {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].special {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.special {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.repcontainer,
|
|
div.repitem {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
div.repitem {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 3),
|
|
"widthBL":calc((100% / 3) - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
justify-content: space-between;
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
div.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (170px * 4));
|
|
}
|
|
|
|
div.midCol,
|
|
div.lastCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(170px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.aNom {
|
|
input[type="text"] {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 4px;
|
|
min-width: 0px;
|
|
}
|
|
}
|
|
|
|
div.aDegats,
|
|
div.aViolence {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
input[type="number"].nbre {
|
|
text-align:right;
|
|
}
|
|
|
|
input[type="number"].bonus {
|
|
text-align:left;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
div.aPortee {
|
|
select {
|
|
width:100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
div.aAspect {
|
|
select {
|
|
width:calc(100% - 28px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.bonus {
|
|
display:none;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
div.effets,
|
|
div.ameliorationsArmes,
|
|
div.special {
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.double {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
label.fakeButton {
|
|
width:calc(100% - 30px);
|
|
border:0px;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30px;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-left: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.doubleTexte {
|
|
width:150px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 1px solid black;
|
|
border-right: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
|
|
&.borderBottom {
|
|
border-bottom:1px solid $black;
|
|
}
|
|
}
|
|
|
|
.borderTop {
|
|
border-top:1px solid $black;
|
|
}
|
|
}
|
|
|
|
div.triple {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
div {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
height: 23px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-left:0px;
|
|
border-top:1px solid $black;
|
|
color:$black;
|
|
|
|
&.R {
|
|
text-align:left;
|
|
border-left:1px solid $black;
|
|
}
|
|
|
|
&.L {
|
|
text-align:right;
|
|
border-right:1px solid $black;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
background:$sombre;
|
|
width: 28px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $white;
|
|
border-top: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"] {
|
|
& ~ label span::before,
|
|
& ~ div span {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].subMenu {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].effets {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.effets {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div button[type="action"].ameliorationsArmes {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.ameliorationsArmes {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].special {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.special {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.bonus {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
label.cadence {
|
|
display:none;
|
|
width:382px;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width: 236px;
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
select {
|
|
width:142px;
|
|
border:0px;
|
|
padding:0px;
|
|
padding-left:15px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.guidage {
|
|
display:none;
|
|
margin-top:1px;
|
|
width:140px;
|
|
height:28px;
|
|
margin:0px;
|
|
margin-right:29px;
|
|
border-right:1px solid $sombre;
|
|
border:0px;
|
|
background:$clair;
|
|
|
|
span.actif,
|
|
span.inactif {
|
|
display:none;
|
|
text-align: center;
|
|
color:$black;
|
|
height:28px;
|
|
line-height: 28px;
|
|
align-items:center;
|
|
border-left:1px solid $sombre;
|
|
|
|
&::before {
|
|
height:28px;
|
|
line-height: 28px;
|
|
background:transparent;
|
|
color:$black;
|
|
}
|
|
}
|
|
|
|
span.actif {
|
|
border-left:1px solid $clair;
|
|
|
|
&::before {
|
|
background:$sombre;
|
|
color:$white;
|
|
border-bottom:1px solid $clair;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
height:28px;
|
|
|
|
&:checked {
|
|
& ~ span.actif {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&:not(:checked) {
|
|
& ~ span.inactif {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].codexfm4 {
|
|
&[value="0"] {
|
|
& ~ div div.codexfm4,
|
|
& ~ div label.codexfm4 {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.modules {
|
|
@include extendModules();
|
|
|
|
display:none;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
div.slots {
|
|
div.col6,
|
|
div.col6BL {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
>span {
|
|
width: max-content;
|
|
font-weight: bold;
|
|
font-variant: small-caps;
|
|
line-height: 28px;
|
|
padding-left: 3px;
|
|
color:$black;
|
|
}
|
|
|
|
div {
|
|
width: 45px;
|
|
height: 28px;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
|
|
input[type="number"] {
|
|
background: transparent;
|
|
border: none;
|
|
line-height: 28px;
|
|
height: 28px;
|
|
padding: 0px;
|
|
width: 19px;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
margin-left: auto;
|
|
text-align: right;
|
|
color: $black;
|
|
}
|
|
|
|
b {
|
|
font-size: 14px;
|
|
line-height: 28px;
|
|
color: RGB(55, 53, 53);
|
|
}
|
|
|
|
span {
|
|
line-height: 28px;
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
width: auto;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
margin-right: 2px;
|
|
color: $black;
|
|
font-weight:bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.col6 {
|
|
width:calc(100% / 6);
|
|
}
|
|
|
|
div.col6BL {
|
|
width:calc((100% / 6) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.repitem {
|
|
display:flex;
|
|
width: calc(50% - 10px);
|
|
justify-content: space-between;
|
|
background-color: $sombre;
|
|
border: 1px solid $clair;
|
|
align-self: flex-start;
|
|
flex-wrap: wrap;
|
|
|
|
div.titre {
|
|
display:flex;
|
|
position:initial;
|
|
}
|
|
|
|
div.ligne {
|
|
height:28px;
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.expandSlots {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].buttonArrow {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
& ~ .hSlots {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.expandModule {
|
|
&[value="0"] {
|
|
& ~ div button[type="action"].buttonPlus {
|
|
span.plus {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
& ~ .hModule,
|
|
& ~ .hSlots {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].buttonPlus {
|
|
span.moins {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
& ~ .hModule {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.titreModule {
|
|
input[type="text"] {
|
|
width: calc(100% - 28px);
|
|
height:28px;
|
|
text-align: center;
|
|
background: transparent;
|
|
color: $white;
|
|
font-weight: bold;
|
|
font-variant: small-caps;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
padding-left: 0px;
|
|
padding-right: 25px;
|
|
border:0px;
|
|
}
|
|
}
|
|
|
|
label.activation {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(100% - 100px);
|
|
height:28px;
|
|
|
|
span {
|
|
display:flex;
|
|
width:78px;
|
|
padding-left:2px;
|
|
font-size:13px;
|
|
line-height:28px;
|
|
height:28px;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width:calc(100% - 80px);
|
|
height:28px;
|
|
border:0px;
|
|
padding-top:0px;
|
|
padding-bottom:0px;
|
|
padding-right:0px;
|
|
padding-left:2px;
|
|
}
|
|
}
|
|
|
|
div.PE {
|
|
width:100px;
|
|
height:28px;
|
|
justify-content: space-between;
|
|
|
|
button[type="action"] {
|
|
width: 20px;
|
|
padding: 0px;
|
|
font-weight: bold;
|
|
background: $sombre;
|
|
color: $white;
|
|
border-color: $clair;
|
|
border-width: 1px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left:1px;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:calc(100% - 23px);
|
|
height:28px;
|
|
border:0px;
|
|
padding:0px;
|
|
text-align: center;
|
|
color:$black;
|
|
}
|
|
}
|
|
|
|
label.duree {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:100%;
|
|
height:28px;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:78px;
|
|
padding-left:2px;
|
|
font-size:13px;
|
|
line-height:28px;
|
|
height:28px;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width:calc(100% - 80px);
|
|
height:28px;
|
|
border:0px;
|
|
padding-top:0px;
|
|
padding-bottom:0px;
|
|
padding-right:0px;
|
|
padding-left:2px;
|
|
}
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
div.titreSlots {
|
|
input[type="number"] {
|
|
width: 20px;
|
|
height: 28px;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
background: transparent;
|
|
border: 0px;
|
|
color: $white;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
label.slot,
|
|
label.slotBL {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
width:105px;
|
|
height:28px;
|
|
line-height:28px;
|
|
padding-left:2px;
|
|
font-size:13px;
|
|
font-weight:bold;
|
|
color:$black;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:calc(100% - 107px);
|
|
height: 28px;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
label.slot {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
label.slotBL {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.bTop {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
.hModule,
|
|
.hSlots {
|
|
display:none;
|
|
}
|
|
|
|
&:not(:nth-of-type(1)):not(:nth-of-type(2)) {
|
|
margin-top:10px;
|
|
}
|
|
}
|
|
|
|
div.repcontainer{
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
padding:2px;
|
|
justify-content: space-between;
|
|
|
|
&.editmode {
|
|
.repitem {
|
|
width:100%;
|
|
|
|
&:nth-of-type(2) {
|
|
margin-top:10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.evolutions {
|
|
display:none;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
div.aspects {
|
|
display:flex;
|
|
width:calc((100% / 2) - 10px);
|
|
background:$clair;
|
|
border-right:1px solid $sombre;
|
|
flex-wrap: wrap;
|
|
|
|
div.ligneTitre {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
&:first-of-type {
|
|
width:calc(20% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
width:calc(40% - 1px);
|
|
border-left:1px solid $sombre;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.ligne2 {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:calc(20% - 2px);
|
|
padding-left:2px;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
width:calc(40% - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
input[type="number"],
|
|
select {
|
|
width: 100%;
|
|
text-align: center;
|
|
border: 0px;
|
|
padding: 0px;
|
|
height: 28px;
|
|
}
|
|
select {
|
|
padding-left:20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.VD {
|
|
display:flex;
|
|
width:calc((100% / 2) - 10px);
|
|
background:$clair;
|
|
border-left:1px solid $sombre;
|
|
flex-wrap: wrap;
|
|
|
|
div.ligneTitre {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
&:first-of-type {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
label.ligne1 {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:calc((100% / 2) - 2px);
|
|
padding-left:2px;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: calc(100% / 2);
|
|
text-align: center;
|
|
border: 0px;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
>input[type="hidden"].subMenu {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].armes {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.armes {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div button[type="action"].modules {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.modules {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].evolutions {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.evolutions {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.DCWolf {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":$sombre,
|
|
"borderColor":$black,
|
|
"fontSize":1.2em,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":100%,
|
|
"widthBL":calc(100% - 1px),
|
|
"height":28px
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
.labor,
|
|
.medik,
|
|
.tech,
|
|
.fighter,
|
|
.recon,
|
|
.N1,
|
|
.N2,
|
|
.N3 {
|
|
display:none;
|
|
}
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.col4,
|
|
div.col4BL {
|
|
width:calc(100% / 4);
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
align-items:flex-start;
|
|
|
|
>h1.titre {
|
|
border-top:1px solid $white;
|
|
}
|
|
|
|
div.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.blockR {
|
|
width:50%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.aspect {
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div.blockR {
|
|
input[type="number"] {
|
|
width:calc(100% - 28px);
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.AE {
|
|
justify-content: center;
|
|
|
|
span.mineur,
|
|
span.majeur {
|
|
display:none;
|
|
margin-right:2px;
|
|
width: min-content;
|
|
justify-content: center;
|
|
}
|
|
|
|
span.value {
|
|
display:flex;
|
|
width: min-content;
|
|
justify-content: center;
|
|
|
|
&::before {
|
|
content: "(";
|
|
}
|
|
|
|
&::after {
|
|
content: ")";
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"],
|
|
&[value="1"],
|
|
&[value="2"],
|
|
&[value="3"],
|
|
&[value="4"],
|
|
&[value="5"] {
|
|
& ~ span.mineur {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="6"],
|
|
&[value="7"],
|
|
&[value="8"],
|
|
&[value="9"],
|
|
&[value="10"] {
|
|
& ~ span.majeur {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.defense,
|
|
div.reaction {
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div.blockR {
|
|
input[type="number"] {
|
|
width:100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.initiative {
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div.blockR {
|
|
input[type="number"] {
|
|
width:calc(100% - 28px);
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armure,
|
|
div.energie {
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div.blockR {
|
|
input[type="number"] {
|
|
width:calc(100% - 3px);
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width:6px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.CDF {
|
|
input[type="number"] {
|
|
width:100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
}
|
|
|
|
div.configuration {
|
|
select {
|
|
width: calc(100% - 21px - 30px);
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
button[type="action"] {
|
|
width: 20px;
|
|
padding: 0px;
|
|
font-weight: bold;
|
|
background: $sombre;
|
|
color: $white;
|
|
border-color: $clair;
|
|
border-width: 1px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left:1px;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30px;
|
|
height: 28px;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
div.nbreCompanions {
|
|
select {
|
|
width: 100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
}
|
|
|
|
div.fighter {
|
|
span {
|
|
width: max-content;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
padding-left: 2px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
button[type="roll"],
|
|
button[type="action"] {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.col4BL {
|
|
>h1.titre {
|
|
border-left:1px solid $white;
|
|
}
|
|
|
|
>div {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.description {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
background: $clair;
|
|
|
|
span {
|
|
width: 100%;
|
|
text-align: justify;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
}
|
|
|
|
div.evolutions {
|
|
display:none;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
align-items:flex-start;
|
|
flex-wrap: wrap;
|
|
|
|
div.aspects {
|
|
display:flex;
|
|
width:calc((100% / 2) - 10px);
|
|
background:$clair;
|
|
border-right:1px solid $sombre;
|
|
flex-wrap: wrap;
|
|
|
|
div.ligneTitre {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
&:first-of-type {
|
|
width:calc(20% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
width:calc(40% - 1px);
|
|
border-left:1px solid $sombre;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.ligne2 {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:calc(20% - 2px);
|
|
padding-left:2px;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
width:calc(40% - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
input[type="number"],
|
|
select {
|
|
width: 100%;
|
|
text-align: center;
|
|
border: 0px;
|
|
padding: 0px;
|
|
height: 28px;
|
|
}
|
|
select {
|
|
padding-left:20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.companions {
|
|
display:flex;
|
|
width:calc((100% / 2) - 10px);
|
|
background:$clair;
|
|
align-content:flex-start;
|
|
align-self:stretch;
|
|
flex-wrap: wrap;
|
|
|
|
&:nth-of-type(even) {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
&:nth-of-type(odd) {
|
|
border-right:1px solid $sombre;
|
|
}
|
|
|
|
div.tCompanions {
|
|
display:flex;
|
|
width:100%;
|
|
border-bottom:1px solid $sombre;
|
|
position:relative;
|
|
|
|
h2 {
|
|
position:absolute;
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
justify-content: center;
|
|
}
|
|
|
|
select {
|
|
width: 85px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
margin-left: auto;
|
|
color:$black;
|
|
z-index:9;
|
|
}
|
|
}
|
|
|
|
span {
|
|
padding:2px;
|
|
text-align: justify;
|
|
}
|
|
}
|
|
|
|
div.mT {
|
|
margin-top:10px;
|
|
}
|
|
}
|
|
|
|
>input[type="hidden"].laborNiveau {
|
|
&[value="1"] {
|
|
& ~ div.labor .N1,
|
|
& ~ div div.cLabor .N1 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.labor .N2,
|
|
& ~ div div.cLabor .N2 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div.labor .N3,
|
|
& ~ div div.cLabor .N3 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
>input[type="hidden"].medikNiveau {
|
|
&[value="1"] {
|
|
& ~ div.medik .N1,
|
|
& ~ div div.cMedik .N1 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.medik .N2,
|
|
& ~ div div.cMedik .N2 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div.medik .N3,
|
|
& ~ div div.cMedik .N3 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
>input[type="hidden"].techNiveau {
|
|
&[value="1"] {
|
|
& ~ div.tech .N1,
|
|
& ~ div div.cTech .N1 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.tech .N2,
|
|
& ~ div div.cTech .N2 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div.tech .N3,
|
|
& ~ div div.cTech .N3 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
>input[type="hidden"].fighterNiveau {
|
|
&[value="1"] {
|
|
& ~ div.fighter .N1,
|
|
& ~ div div.cFighter .N1 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.fighter .N2,
|
|
& ~ div div.cFighter .N2 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div.fighter .N3,
|
|
& ~ div div.cFighter .N3 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
>input[type="hidden"].reconNiveau {
|
|
&[value="1"] {
|
|
& ~ div.recon .N1,
|
|
& ~ div div.cRecon .N1 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.recon .N2,
|
|
& ~ div div.cRecon .N2 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div.recon .N3,
|
|
& ~ div div.cRecon .N3 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
>input[type="hidden"].choixConfiguration {
|
|
&[value="Labor"] {
|
|
& ~ .labor,
|
|
& ~ div .labor {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="Medic"] {
|
|
& ~ .medik,
|
|
& ~ div .medik {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="Tech"] {
|
|
& ~ .tech,
|
|
& ~ div .tech {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="Fighter"] {
|
|
& ~ .fighter,
|
|
& ~ div .fighter {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="Recon"] {
|
|
& ~ .recon,
|
|
& ~ div .recon {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
>input[type="hidden"].subMenu {
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].evolutions {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.evolutions {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.DCCrow {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":$sombre,
|
|
"borderColor":$black,
|
|
"fontSize":1.2em,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":100%,
|
|
"widthBL":calc(100% - 1px),
|
|
"height":28px
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.col4,
|
|
div.col4BL {
|
|
width:calc(100% / 3);
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
align-items:flex-start;
|
|
|
|
>h1.titre {
|
|
border-top:1px solid $white;
|
|
}
|
|
|
|
div.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.blockR {
|
|
width:50%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.aspect {
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div.blockR {
|
|
input[type="number"] {
|
|
width:calc(100% - 28px);
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.defense,
|
|
div.reaction,
|
|
div.debordement {
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div.blockR {
|
|
input[type="number"] {
|
|
width:100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.initiative {
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div.blockR {
|
|
input[type="number"] {
|
|
width:calc(100% - 28px);
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.cohesion {
|
|
span {
|
|
width:calc(50% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
div.blockR {
|
|
input[type="number"] {
|
|
width:calc(100% - 3px);
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width:6px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.CDF {
|
|
input[type="number"] {
|
|
width:100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
}
|
|
|
|
div.tourCombat {
|
|
|
|
span {
|
|
width: max-content;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
padding-left: 2px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: calc(100% - 29px);
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
|
|
|
|
button[type="roll"],
|
|
button[type="action"] {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.col4BL {
|
|
>h1.titre {
|
|
border-left:1px solid $white;
|
|
}
|
|
|
|
>div {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
span.specificites {
|
|
display:inline-block;
|
|
width:100%;
|
|
padding:2px;
|
|
background:$clair;
|
|
text-align: justify;
|
|
}
|
|
|
|
div.evolutions {
|
|
display:none;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
div.aspects {
|
|
display:flex;
|
|
width:calc((100% / 2) - 10px);
|
|
background:$clair;
|
|
border-right:1px solid $sombre;
|
|
flex-wrap: wrap;
|
|
|
|
div.ligneTitre {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
|
|
span {
|
|
display:flex;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
&:first-of-type {
|
|
width:calc(40% - 2px);
|
|
padding-left:2px;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
width:calc(60% - 1px);
|
|
border-left:1px solid $sombre;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
label.ligne1 {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:calc(40% - 2px);
|
|
padding-left:2px;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
width:calc(60% - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
input[type="number"],
|
|
select {
|
|
width: 100%;
|
|
text-align: center;
|
|
border: 0px;
|
|
padding: 0px;
|
|
height: 28px;
|
|
}
|
|
select {
|
|
padding-left:20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
>input[type="hidden"].subMenu {
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].evolutions {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.evolutions {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.monkModeZen {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.ligne {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
background:$clair;
|
|
|
|
span {
|
|
width: 70%;
|
|
padding-left: 2px;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30%;
|
|
text-align: center;
|
|
border: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
input[type="number"].col2 {
|
|
width: calc(100% / 2);
|
|
text-align: center;
|
|
padding: 0px;
|
|
border-top:1px solid $sombre;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
height: 28px;
|
|
|
|
&:first-of-type {
|
|
border-left:0px;
|
|
}
|
|
|
|
&:last-of-type {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.monkModeCea {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.titre {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
div.borderBottom {
|
|
border-bottom:1px solid $clair;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.ligne2 {
|
|
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;
|
|
}
|
|
}
|
|
|
|
label.ligne2Special {
|
|
display:flex;
|
|
width: 100%;
|
|
background: $clair;
|
|
font-size: 14px;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
width: calc(70% - 2px);
|
|
line-height: 28px;
|
|
padding-left: 2px;
|
|
font-size: 14px;
|
|
font-weight:bold;
|
|
color:$black;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30%;
|
|
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 {
|
|
display:flex;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
label.col4 {
|
|
display:flex;
|
|
width:calc(100% / 4);
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
}
|
|
|
|
label.col4BL {
|
|
display:flex;
|
|
width:calc((100% / 4) - 1px);
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
label.col4,
|
|
label.col4BL {
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width:100%;
|
|
min-width:0px;
|
|
border-top:1px solid $sombre;
|
|
border-bottom: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
}
|
|
|
|
input[type="text"].ligne {
|
|
width:100%;
|
|
border-top: 1px solid $sombre;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
}
|
|
|
|
div.paladinShrine {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
label.col3 {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
flex-wrap: wrap;
|
|
|
|
width:calc(100% / 3);
|
|
|
|
span {
|
|
display:flex;
|
|
width: 100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 100%;
|
|
height: 28px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border-top: 1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.col3BL {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
flex-wrap: wrap;
|
|
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width: 100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 100%;
|
|
height: 28px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border-top: 1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value^="Activ"] {
|
|
& ~ div.titre {
|
|
button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.paladinWatchtower {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
label.ligne {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
width: calc(50% - 2px);
|
|
padding-left: 2px;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 50%;
|
|
border: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value^="Activ"] {
|
|
& ~ div.titre {
|
|
button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.priestMechanic {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
@include buttonRoll() {
|
|
border-left:1px solid $sombre;
|
|
};
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
position:relative;
|
|
background:$clair;
|
|
|
|
span {
|
|
width: calc(50% - 2px);
|
|
padding-left: 2px;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
position:absolute;
|
|
width: calc(50% - 29px);
|
|
height:28px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-bottom: 0px;
|
|
border-right: 0px;
|
|
border-left:1px solid $sombre;
|
|
padding: 0px;
|
|
right:29px;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.priestNanoC {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.titre {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.ligne2 {
|
|
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 {
|
|
display:flex;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.psion150,
|
|
.psion200 {
|
|
display:none;
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.psion150PG {
|
|
&[value="0"] {
|
|
& ~ div .psion150 {
|
|
display:none !important;
|
|
}
|
|
}
|
|
|
|
&[value="on"] {
|
|
& ~ div .psion150 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.psion200PG {
|
|
&[value="0"] {
|
|
& ~ div .psion200 {
|
|
display:none !important;
|
|
}
|
|
}
|
|
|
|
&[value="on"] {
|
|
& ~ div .psion200 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.psionPuppetMaster {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
),
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$clair,
|
|
"color":$black
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre,
|
|
h2.titreBis {
|
|
display:flex;
|
|
}
|
|
|
|
h2.titreBis{
|
|
border-bottom:1px solid $sombre;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
div.rollPJ {
|
|
width: 100%;
|
|
background: $clair;
|
|
font-size: 14px;
|
|
justify-content: space-between;
|
|
border-bottom: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-bottom:1px solid $sombre;
|
|
|
|
select {
|
|
display:none;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].bonusCarac {
|
|
&[value="0"] {
|
|
|
|
& ~ div.bonusCarac {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
&[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.psionDiscord {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true,
|
|
"hasButtonActivate":true
|
|
),
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$clair,
|
|
"color":$black
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll() {
|
|
border-left:1px solid $sombre;
|
|
};
|
|
|
|
div.titre,
|
|
h1.titre,
|
|
h2.titreBis {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.ligne2 {
|
|
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;
|
|
border-bottom:1px solid $sombre;
|
|
|
|
select {
|
|
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
|
|
&:first-of-type {
|
|
width:50%;
|
|
}
|
|
|
|
&:last-of-type {
|
|
width:calc(50% - 29px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.bonusCarac {
|
|
display:none;
|
|
width: 100%;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-bottom:1px solid $sombre;
|
|
|
|
select {
|
|
display:none;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].bonusCarac {
|
|
&[value="0"] {
|
|
|
|
& ~ div.bonusCarac {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
&[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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
label.col3 {
|
|
display:flex;
|
|
width:calc(100% / 3);
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
justify-content: center;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.col3BL {
|
|
display:flex;
|
|
width:calc((100% / 3) - 1px);
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
justify-content: center;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value^="Activ"] {
|
|
& ~ div.titre {
|
|
button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.psionWindtalker {
|
|
$titre:(
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$clair,
|
|
"color":$black
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
h1.titre,
|
|
h2.titreBis {
|
|
display:flex;
|
|
}
|
|
|
|
h2.titreBis {
|
|
border-bottom:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.rangerVision {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.titre {
|
|
border-bottom:0px;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
div.rollPJ {
|
|
display:flex;
|
|
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.rangerLongbow {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
),
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"color":$black,
|
|
"background":$clair
|
|
)
|
|
);
|
|
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 2),
|
|
"widthBL":calc((100% / 2) - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
>div.titre {
|
|
display:flex;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
div.data,
|
|
div.bonus,
|
|
div.bonusCarac,
|
|
label.pilonnage,
|
|
.PG50,
|
|
.PG50_2,
|
|
.PG100 {
|
|
display:none;
|
|
}
|
|
|
|
div.col5,
|
|
div.col5BL,
|
|
div.col5LargeBL {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
select {
|
|
border-top:1px solid $sombre;
|
|
text-align: center;
|
|
border-right: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.col5 {
|
|
width:calc(100% / 5);
|
|
}
|
|
|
|
div.col5,
|
|
div.col5BL {
|
|
select {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.col5BL {
|
|
width:calc((100% / 5) - 1px);
|
|
}
|
|
|
|
div.col5BL,
|
|
div.col5LargeBL {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.col5LargeBL {
|
|
width:calc(((100% / 5) * 2) - 1px);
|
|
|
|
select {
|
|
width:calc(100% / 2);
|
|
|
|
&:last-of-type {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.eCol3,
|
|
div.eCol3BL {
|
|
flex-wrap: wrap;
|
|
|
|
border-top:1px solid $clair;
|
|
|
|
h1.titre {
|
|
background:$sombre;
|
|
}
|
|
|
|
h1.notPG100 {
|
|
display:flex;
|
|
}
|
|
|
|
|
|
div.rangerBEffet {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
background:$clair;
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.double {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
label.fakeButton {
|
|
width:calc(100% - 30px);
|
|
border:0px;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30px;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-left: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
div.eCol3,
|
|
div.eCol3BL {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
div.eCol3BL {
|
|
|
|
h1.titre {
|
|
border-left:1px solid $clair;
|
|
}
|
|
|
|
div.rangerBEffet {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.bonus {
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
div.bonusCarac {
|
|
display:none;
|
|
width: calc(((100% / 5) *2) - 1px);
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
|
|
select {
|
|
display:none;
|
|
border:0px;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
label.pilonnage {
|
|
display:none;
|
|
width: calc(40%);
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
width: calc((100% / 2) - 2px);
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:calc(100% / 2);
|
|
border:0px;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.pilonnageDetails {
|
|
display:none;
|
|
width:calc(60% - 1px);
|
|
border-left:1px solid $sombre;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
width: max-content;
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
select {
|
|
width:calc((100% / 3) - 0.5px);
|
|
border:0px;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
padding-left:15px;
|
|
}
|
|
}
|
|
|
|
label.cadence {
|
|
display:none;
|
|
width:calc(60% - 1px);
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width: max-content;
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
}
|
|
|
|
select {
|
|
width:calc((100% / 3) - 0.5px);
|
|
border:0px;
|
|
padding:0px;
|
|
padding-left:15px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
};
|
|
|
|
div.ameliorationsArmes,
|
|
div.special {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.double {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
label.fakeButton {
|
|
width:calc(100% - 30px);
|
|
border:0px;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30px;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-left: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.doubleTexte {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 1px solid black;
|
|
border-right: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.triple {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
div {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
height: 23px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-left:0px;
|
|
border-top:1px solid $black;
|
|
color:$black;
|
|
|
|
&.R {
|
|
text-align:left;
|
|
border-left:1px solid $black;
|
|
}
|
|
|
|
&.L {
|
|
text-align:right;
|
|
border-right:1px solid $black;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
background:$sombre;
|
|
width: 28px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $white;
|
|
border-top: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"] {
|
|
& ~ label span::before,
|
|
& ~ div span {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].subMenu {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].ameliorationsArmes {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.ameliorationsArmes {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div button[type="action"].special {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.special {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].bonusCarac {
|
|
&[value="1"] {
|
|
& ~ div.titre {
|
|
button[type="action"].bonusCaracL1 {
|
|
box-shadow: 0px 0px 7px 0px #000000 inset;
|
|
}
|
|
}
|
|
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.pilonnage,
|
|
label.pilonnageDetails {
|
|
span {
|
|
border-right:1px solid $sombre;
|
|
}
|
|
|
|
input[type="number"] {
|
|
border-left:0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& ~ 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;
|
|
|
|
label.pilonnage,
|
|
label.pilonnageDetails {
|
|
span {
|
|
border-right:1px solid $sombre;
|
|
}
|
|
|
|
input[type="number"] {
|
|
border-left:0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& ~ div 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"].styleCombat {
|
|
&[value="pilonnage"] {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div label.pilonnage {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div label.pilonnageDetails {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].PG50 {
|
|
&[value="on"] {
|
|
& ~ div.eCol3,
|
|
& ~ div.eCol3BL {
|
|
width:calc(100% / 3);
|
|
}
|
|
|
|
& ~ div.PG50,
|
|
& ~ div .PG50 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].PG50_2 {
|
|
&[value="on"] {
|
|
& ~ .PG50_2,
|
|
& ~ div .PG50_2 {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ .notPG50_2,
|
|
& ~ div .notPG50_2 {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].PG100 {
|
|
&[value="on"] {
|
|
& ~ .PG100,
|
|
& ~ div .PG100 {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ .notPG100,
|
|
& ~ div .notPG100 {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.cadence {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.cadence {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.rogueGhost {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true,
|
|
"hasButtonActivate":true
|
|
),
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$clair,
|
|
"color":$black
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll() {
|
|
border-left:1px solid $sombre;
|
|
};
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.ligne2 {
|
|
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 {
|
|
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
|
|
&:first-of-type {
|
|
width:50%;
|
|
}
|
|
|
|
&:last-of-type {
|
|
width:calc(50% - 29px);
|
|
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="0"] {
|
|
|
|
& ~ div.bonusCarac {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
&[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^="{{modeGhost"] {
|
|
& ~ div.titre {
|
|
button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.shamanImpregnation,
|
|
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.ligne2 {
|
|
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.shamanTotem {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
label.ligne2 {
|
|
display:flex;
|
|
width: 100%;
|
|
background: $clair;
|
|
font-size: 14px;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
label.totem1,
|
|
label.totem2,
|
|
label.totem3 {
|
|
display:none;
|
|
}
|
|
|
|
|
|
input[type="hidden"].nbreTotem {
|
|
&[value="1"] {
|
|
& ~ label.totem1 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ label.totem1,
|
|
& ~ label.totem2 {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ label.totem1,
|
|
& ~ label.totem2,
|
|
& ~ label.totem3 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.shamanAscension {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
div.ligneTitre {
|
|
display:none;
|
|
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;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
label.ligne2 {
|
|
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.ligne3 {
|
|
display:none;
|
|
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;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value^="1"] {
|
|
& ~ div.ligne3,
|
|
& ~ div.ligneTitre {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div.titre {
|
|
button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.sorcererMorph {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true,
|
|
"hasButtonActivate":true
|
|
),
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$clair,
|
|
"color":$black,
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":102px,
|
|
"height":27px
|
|
),
|
|
"span": (
|
|
"height":27px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll() {
|
|
border-left:1px solid $sombre;
|
|
};
|
|
@include fakeButton($fakeButton) {
|
|
margin-left:auto;
|
|
};
|
|
|
|
div.titre,
|
|
h1.titre,
|
|
div.titreBis,
|
|
h2.titreBis {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.ligne2 {
|
|
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.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;
|
|
}
|
|
}
|
|
|
|
label.col2 {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
width:calc(100% / 2);
|
|
background:$clair;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border-top: 1px solid $sombre;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
border-right:0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 29px;
|
|
}
|
|
}
|
|
|
|
label.col2BL {
|
|
display:flex;
|
|
flex-wrap: wrap;
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
background:$clair;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border-top: 1px solid $sombre;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
border-right:0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 29px;
|
|
}
|
|
}
|
|
|
|
.borderCTop {
|
|
border-top:1px solid $clair;
|
|
}
|
|
|
|
.borderSBottom {
|
|
border-bottom:1px solid $sombre;
|
|
}
|
|
|
|
.borderS {
|
|
border-bottom:1px solid $sombre;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
button[type="action"].PG250 {
|
|
display:none;
|
|
}
|
|
|
|
input[type="hidden"].bonusCarac {
|
|
&[value="0"] {
|
|
|
|
& ~ div.bonusCarac {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
&[value="1"] {
|
|
|
|
& ~ div.titre,
|
|
& ~ div.titreBis {
|
|
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,
|
|
& ~ div.titreBis {
|
|
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"].sorcerer250 {
|
|
&[value="on"] {
|
|
& ~ div button[type="action"].PG250 {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div label.not250PG {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].activateModeMorph250 {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.warlockForward,
|
|
div.warlockRewind {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
),
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$sombre,
|
|
"color":$white
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.warlockForward {
|
|
div.titre {
|
|
border-bottom:0px;
|
|
}
|
|
}
|
|
|
|
div.warlockRecord {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true
|
|
),
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$sombre,
|
|
"color":$white
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
label.ligne2 {
|
|
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;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
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.warlockContrecoups {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.titre {
|
|
border-bottom:0px;
|
|
}
|
|
}
|
|
|
|
div.warmasterFalcon {
|
|
$titre:(
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$clair,
|
|
"color":$black
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
|
|
h1.titre,
|
|
h2.titreBis {
|
|
display:flex;
|
|
}
|
|
|
|
h2.titreBis {
|
|
border-bottom:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
div.warmasterWarlord {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasButtonActivate":true,
|
|
"hasButtonPersonnel":true
|
|
),
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$clair,
|
|
"color":$black
|
|
)
|
|
);
|
|
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":102px,
|
|
"height":27px
|
|
),
|
|
"span": (
|
|
"height":27px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include fakeButton($fakeButton);
|
|
@include buttonSelect();
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
h2.titreBis {
|
|
border-bottom:1px solid $sombre;
|
|
}
|
|
|
|
div.energie {
|
|
border-bottom:0px;
|
|
}
|
|
|
|
div.action {
|
|
border-bottom:1px solid $clair;
|
|
border-top:1px solid $clair;
|
|
}
|
|
|
|
label.ligne2 {
|
|
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;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.col2 {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
flex-wrap: wrap;
|
|
|
|
width:calc(100% / 2);
|
|
|
|
span {
|
|
display:flex;
|
|
width: 100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 28px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border-top: 1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.col2BL {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
flex-wrap: wrap;
|
|
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width: 100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 28px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border-top: 1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.action,
|
|
.esquive,
|
|
.force,
|
|
.guerre,
|
|
.energie {
|
|
display:none;
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="on"] {
|
|
& ~ button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].personnel {
|
|
&[value="on"] {
|
|
& ~ button[type="action"].personnel {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].action {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].action {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .action {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].esquive {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].esquive {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .esquive {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].force {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].force {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .force {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].guerre {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].guerre {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .guerre {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].energie {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].energie {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .energie {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].PG200 {
|
|
&[value="on"] {
|
|
& ~ div.button,
|
|
& ~ h2.titreBis {
|
|
display:none;
|
|
}
|
|
|
|
& ~ .action {
|
|
border-top:1px solid $clair;
|
|
}
|
|
|
|
& ~ .action,
|
|
& ~ .esquive,
|
|
& ~ .force,
|
|
& ~ .guerre,
|
|
& ~ .energie {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.warriorTypes {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
),
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$clair,
|
|
"color":$black
|
|
)
|
|
);
|
|
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100px,
|
|
"height":27px
|
|
),
|
|
"span": (
|
|
"height":27px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include fakeButton($fakeButton) {
|
|
margin-left:auto;
|
|
};
|
|
@include buttonSelect();
|
|
|
|
h1.titre,
|
|
h2.titreBis {
|
|
display:flex;
|
|
}
|
|
|
|
h1.borderBottom {
|
|
border-bottom:1px solid $clair;
|
|
}
|
|
|
|
h2.titreBis {
|
|
border-bottom:1px solid $sombre;
|
|
}
|
|
|
|
label.col3 {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
flex-wrap: wrap;
|
|
|
|
width:calc(100% / 3);
|
|
|
|
span {
|
|
display:flex;
|
|
width: 100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 28px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border-top: 1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.col3BL {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
flex-wrap: wrap;
|
|
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width: 100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 28px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border-top: 1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.soldier,
|
|
.hunter,
|
|
.scholar,
|
|
.herald,
|
|
.scout {
|
|
display:none;
|
|
}
|
|
|
|
input[type="hidden"].soldier {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].soldier {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .soldier {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].hunter {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].hunter {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .hunter {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].scholar {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].scholar {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .scholar {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].herald {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].herald {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .herald {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].scout {
|
|
&[value="on"] {
|
|
& ~ div.button button[type="action"].scout {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .scout {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].PG200 {
|
|
&[value="on"] {
|
|
& ~ .soldier,
|
|
& ~ .hunter,
|
|
& ~ .scholar,
|
|
& ~ .herald,
|
|
& ~ .scout {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ h1.titre {
|
|
border-bottom:1px solid $clair;
|
|
}
|
|
|
|
& ~ h2.titreBis,
|
|
& ~ div.button {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.wizardBorealis {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true,
|
|
"hasButtonActivate":true
|
|
),
|
|
"secondTitre":(
|
|
"actif":true,
|
|
"background":$clair,
|
|
"color":$black,
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre,
|
|
div.titreBis,
|
|
h2.titreBis {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.ligne2 {
|
|
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;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
label.col3 {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
flex-wrap: wrap;
|
|
|
|
width:calc(100% / 3);
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width: 100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 28px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border-top: 1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.col3BL {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
flex-wrap: wrap;
|
|
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width: 100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 28px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border-top: 1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.borderTop {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
button[type="action"].rollDice {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"].active {
|
|
&[value="on"] {
|
|
& ~ div button[type="action"].active {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
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="text"] {
|
|
width:100%;
|
|
text-align: center;
|
|
border-top:1px solid $sombre;
|
|
border-left:0px;
|
|
border-right:0px;
|
|
border-bottom:0px;
|
|
}
|
|
}
|
|
|
|
div.wizardOriflamme {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.col3 {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
flex-wrap: wrap;
|
|
|
|
width:calc(100% / 3);
|
|
|
|
span {
|
|
display:flex;
|
|
width: 100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 28px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border-top: 1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.col3BL {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
flex-wrap: wrap;
|
|
|
|
width:calc((100% / 3) - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width: 100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $black;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"],
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 28px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border-top: 1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
.wizard250 {
|
|
display:none;
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"].PG250 {
|
|
&[value="on"] {
|
|
& ~ div button[type="roll"].wizard250,
|
|
& ~ div button[type="action"].wizard250 {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div button[type="roll"].wizardNot250,
|
|
& ~ div button[type="action"].wizardNot250 {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.MAL {
|
|
@include block(transparent, $sombre, true);
|
|
|
|
justify-content: space-between;
|
|
|
|
>h1.titre {
|
|
display:flex;
|
|
width: 100%;
|
|
align-content: baseline;
|
|
background: $sombre;
|
|
color: $white;
|
|
line-height: 28px;
|
|
min-height: 28px;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
border-bottom:1px solid $clair;
|
|
}
|
|
|
|
div.information {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.autoex {
|
|
textarea {
|
|
background:$clair;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.MALPriest,
|
|
div.MALPsion,
|
|
div.MALShaman,
|
|
div.MALWarlock,
|
|
div.MALWarmaster {
|
|
width:100%;
|
|
|
|
>div {
|
|
border-top:0px;
|
|
}
|
|
}
|
|
|
|
div.druidModJetCompagnons {
|
|
border-top:0px;
|
|
border-bottom:0px;
|
|
}
|
|
|
|
div.MALDCompagnon {
|
|
button[type="action"].lion,
|
|
button[type="action"].wolf,
|
|
button[type="action"].crow {
|
|
display:none;
|
|
}
|
|
|
|
input[type="hidden"].legendeChoisie {
|
|
&[value="1"] {
|
|
& ~ div.button {
|
|
button[type="action"].lion {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.button {
|
|
button[type="action"].wolf {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div.button {
|
|
button[type="action"].crow {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.MALPaladin,
|
|
div.MALRanger,
|
|
div.MALWarrior,
|
|
div.MALWizard {
|
|
border-top:0px;
|
|
}
|
|
|
|
div.MALPriest {
|
|
>div {
|
|
display:none;
|
|
}
|
|
|
|
input[type="hidden"].legendeChoisie {
|
|
&[value="1"] {
|
|
& ~ div.priestMechanic {
|
|
display:flex;
|
|
|
|
div.titre {
|
|
border-top:0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.priestNanoC {
|
|
display:flex;
|
|
|
|
div.titre {
|
|
border-top:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.MALPsion {
|
|
>div {
|
|
display:none;
|
|
}
|
|
|
|
input[type="hidden"].legendeChoisie,
|
|
input[type="hidden"].legendeChoisie2 {
|
|
&[value="1"] {
|
|
& ~ div.psionPuppetMaster {
|
|
display:flex;
|
|
border-top:0px;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.psionDiscord {
|
|
display:flex;
|
|
border-top:0px;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div.psionWindtalker {
|
|
display:flex;
|
|
border-top:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.MALShaman {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
div.MALWarlock {
|
|
flex-wrap: wrap;
|
|
>div {
|
|
display:none;
|
|
}
|
|
|
|
div.warlockContrecoups {
|
|
border-bottom:1px solid $clair;
|
|
}
|
|
|
|
input[type="hidden"].legendeChoisie {
|
|
&[value="1"] {
|
|
& ~ div.warlockContrecoups,
|
|
& ~ div.warlockRecord {
|
|
display:flex;
|
|
|
|
div.titre {
|
|
border-top:0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.warlockContrecoups,
|
|
& ~ div.warlockRewind {
|
|
display:flex;
|
|
|
|
div.titre {
|
|
border-top:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.MALWarmaster {
|
|
>div {
|
|
display:none;
|
|
}
|
|
|
|
div.warmasterWarlord {
|
|
input[type="hidden"].warlordChoisie {
|
|
&[value="1"] {
|
|
& ~ div.action,
|
|
& ~ div.esquive {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.action,
|
|
& ~ div.force {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div.action,
|
|
& ~ div.guerre {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="4"] {
|
|
& ~ div.action,
|
|
& ~ div.energie {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.action {
|
|
border-bottom-color:$sombre;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].legendeChoisie {
|
|
&[value="1"] {
|
|
& ~ div.warmasterWarlord {
|
|
display:flex;
|
|
|
|
div.titre {
|
|
border-top:0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.warmasterFalcon {
|
|
display:flex;
|
|
|
|
div.titre {
|
|
border-top:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.MALWarrior {
|
|
input[type="hidden"].legendeChoisie {
|
|
&[value="1"] {
|
|
& ~ .soldier {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ .hunter {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ .scholar {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="4"] {
|
|
& ~ .herald {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="5"] {
|
|
& ~ .scout {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.MALDruidCompanions {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
@include titre($white, transparent, $titre);
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
>h1.titre {
|
|
display:flex;
|
|
border-bottom:1px solid $clair;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//ZONE CENTRALE PNJ
|
|
div.subTabArmure {
|
|
div.AEBlock {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.AE {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
display:none;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div {
|
|
display:none;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
font-size: 14px;
|
|
color: $black;
|
|
|
|
&:first-of-type {
|
|
width:70px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
line-height: 28px;
|
|
}
|
|
|
|
&:last-of-type {
|
|
width: calc(100% - 70px - 4px - 1px);
|
|
border-left:1px solid $sombre;
|
|
text-align: justify;
|
|
padding: 2px;
|
|
}
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
$AEs:"Chair", "Bete", "Machine", "Dame", "Masque";
|
|
|
|
input[type="hidden"] {
|
|
@each $AE in $AEs {
|
|
&.AE#{$AE}Mineur {
|
|
@for $i from 1 through 20 {
|
|
&[value="#{$i}"] {
|
|
& ~ div.AE#{$AE} {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div.AE#{$AE} div.Mineur {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&.AE#{$AE}Majeur {
|
|
@for $i from 1 through 20 {
|
|
&[value="#{$i}"] {
|
|
& ~ div.AE#{$AE} {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div.AE#{$AE} div.Mineur {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div.AE#{$AE} div.Majeur {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&>div {
|
|
&:not(:first-of-type) {
|
|
margin-top:10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.capacitesFanMade {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":150px,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
@include fakeButton($fakeButton) {
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
font-size:12px;
|
|
};
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: center;
|
|
background:$clair;
|
|
padding:2px;
|
|
}
|
|
}
|
|
|
|
div.capacitesSpeciales {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: center;
|
|
background:$clair;
|
|
padding:2px;
|
|
|
|
button[type="action"] {
|
|
display:flex;
|
|
width: 150px;
|
|
height:23px;
|
|
|
|
justify-content: center;
|
|
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
border: 1px solid $black;
|
|
background: $sombre;
|
|
color: $white;
|
|
line-height: 22px;
|
|
padding:0px;
|
|
|
|
z-index:9;
|
|
|
|
margin-top:1px;
|
|
margin-bottom:1px;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"] {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.capacites,
|
|
div.capacitePhase2 {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
@include extend();
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.repcontainer {
|
|
flex-wrap: wrap;
|
|
|
|
div.repitem {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
div.repitem {
|
|
details {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
summary {
|
|
display:flex;
|
|
|
|
input[type="text"] {
|
|
width: calc(100% - 25px);
|
|
padding-top: 0px;
|
|
padding-left: 0px;
|
|
padding-bottom: 0px;
|
|
padding-right: 25px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.notes {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.repcontainer {
|
|
flex-wrap: wrap;
|
|
|
|
div.repitem {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
div.autoex {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armesPJ {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.subTabMelee {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
display:none;
|
|
margin-top:10px;
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
>div.titre {
|
|
display:flex;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
div.ligneTitre {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
display:flex;
|
|
justify-content: center;
|
|
color:$black;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
height:28px;
|
|
line-height:28px;
|
|
}
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (121px * 3) - 289px);
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.midCol {
|
|
background:$clair;
|
|
width:calc(121px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.lastCol {
|
|
background:$clair;
|
|
width:calc(289px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:calc(100% - 28px);
|
|
|
|
margin-right:28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armesListe {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
input[type="hidden"] {
|
|
&.guidage {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.guidage {
|
|
display:block;
|
|
}
|
|
|
|
label.precis {
|
|
width:250px;
|
|
padding:0px;
|
|
|
|
span {
|
|
width:119px;
|
|
}
|
|
|
|
select {
|
|
width:131px;
|
|
border-right:0px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.cadence {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.cadence {
|
|
display:flex;
|
|
padding-right:28px;
|
|
}
|
|
|
|
label.guidage {
|
|
width:121px;
|
|
margin-right:0px;
|
|
}
|
|
|
|
label.precis {
|
|
width:241px;
|
|
padding-right:0px;
|
|
|
|
span {
|
|
width: calc(50% - 3px);
|
|
}
|
|
|
|
select {
|
|
width:121px;
|
|
border-right:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.poing {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":100%,
|
|
"widthBL":calc(100% - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.bonus {
|
|
display:none;
|
|
flex-wrap: wrap;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
div.bonusCarac {
|
|
display:none;
|
|
width: calc(289px - 1px - 28px);
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
padding-right:28px;
|
|
|
|
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;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armeSection1,
|
|
div.armeSection2 {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 4),
|
|
"widthBL":calc((100% / 4) - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
display:none;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.bonus {
|
|
display:none;
|
|
flex-wrap: wrap;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
label.precis,
|
|
label.guidage {
|
|
display:none;
|
|
}
|
|
|
|
div.bonusCarac {
|
|
display:none;
|
|
width: calc(289px - 1px - 28px);
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
padding-right:28px;
|
|
|
|
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;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.repcontainer {
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
div.repitem {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 4),
|
|
"widthBL":calc((100% / 4) - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.bonus {
|
|
display:none;
|
|
flex-wrap: wrap;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
label.precis {
|
|
display:none;
|
|
}
|
|
|
|
div.bonusCarac {
|
|
display:none;
|
|
width: calc(289px - 1px - 28px);
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
padding-right:28px;
|
|
|
|
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;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (121px * 3) - 289px);
|
|
}
|
|
|
|
div.midCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(121px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.lastCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(289px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.armeNom {
|
|
input[type="text"] {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 4px;
|
|
min-width: 0px;
|
|
}
|
|
}
|
|
|
|
div.armeDegats,
|
|
div.armeViolence {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
input[type="number"].nbre {
|
|
text-align:right;
|
|
}
|
|
|
|
input[type="number"].bonus {
|
|
text-align:left;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
div.armePortee {
|
|
select {
|
|
width:100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
div.armeCaracs {
|
|
select {
|
|
width:calc((100% / 2) - 14px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.bonus {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.deuxMains {
|
|
&[value="0"] {
|
|
& ~ label.precis {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.allegee {
|
|
&[value="1"] {
|
|
& ~ label.precis {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
label.precis {
|
|
display:none;
|
|
width: calc(261px - 1px);
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
padding-right:28px;
|
|
|
|
span {
|
|
width: calc((100% / 2) - 3px);
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
select {
|
|
width:calc((100% / 2) + 1px);
|
|
border:0px;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.cadence {
|
|
display:none;
|
|
width:381px;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width: 251px;
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
select {
|
|
width:132px;
|
|
border:0px;
|
|
padding:0px;
|
|
padding-left:15px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.guidage {
|
|
display:none;
|
|
margin-top:1px;
|
|
width:130px;
|
|
height:28px;
|
|
margin:0px;
|
|
margin-right:29px;
|
|
border-right:1px solid $sombre;
|
|
border:0px;
|
|
background:$clair;
|
|
|
|
span.actif,
|
|
span.inactif {
|
|
display:none;
|
|
text-align: center;
|
|
color:$black;
|
|
height:28px;
|
|
line-height: 28px;
|
|
align-items:center;
|
|
border-left:1px solid $sombre;
|
|
|
|
&::before {
|
|
height:28px;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
|
|
span.actif {
|
|
border-left:1px solid $clair;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
height:28px;
|
|
|
|
&:checked {
|
|
& ~ span.actif {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&:not(:checked) {
|
|
& ~ span.inactif {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.effets,
|
|
div.ameliorationsStructurelles,
|
|
div.ameliorationsArmes,
|
|
div.special {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.double {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
label.fakeButton {
|
|
width:calc(100% - 30px);
|
|
border:0px;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30px;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-left: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.doubleTexte {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 23px;
|
|
text-align: center;
|
|
border: 1px solid black;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.triple {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
div {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
height: 23px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-left:0px;
|
|
border-top:1px solid $black;
|
|
color:$black;
|
|
|
|
&.R {
|
|
text-align:left;
|
|
border-left:1px solid $black;
|
|
}
|
|
|
|
&.L {
|
|
text-align:right;
|
|
border-right:1px solid $black;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
background:$sombre;
|
|
width: 28px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $white;
|
|
border-top: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"] {
|
|
& ~ label span::before,
|
|
& ~ div span {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].subMenu {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].effets {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.effets {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div button[type="action"].ameliorationsStructurelles {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.ameliorationsStructurelles {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].ameliorationsArmes {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.ameliorationsArmes {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="4"] {
|
|
& ~ div button[type="action"].special {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.special {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].styleCombat {
|
|
&[value="precis"] {
|
|
& ~ div div.bonus {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div label.precis {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].bonusCarac {
|
|
&[value="1"] {
|
|
& ~ div.titre {
|
|
button[type="action"].bonusCaracL1 {
|
|
box-shadow: 0px 0px 7px 0px #000000 inset;
|
|
}
|
|
}
|
|
|
|
& ~ div div.bonus {
|
|
display:flex;
|
|
|
|
label.precis {
|
|
width:calc((121px * 2) - 1px);
|
|
padding-right:0px;
|
|
|
|
span {
|
|
width:calc(121px - 3px);
|
|
}
|
|
|
|
select {
|
|
width:121px;
|
|
border-right:0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& ~ 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 div.bonus {
|
|
display:flex;
|
|
|
|
label.precis {
|
|
width:calc((121px * 2) - 1px);
|
|
padding-right:0px;
|
|
|
|
span {
|
|
width:calc(121px - 3px);
|
|
}
|
|
|
|
select {
|
|
width:121px;
|
|
border-right:0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& ~ div div.bonusCarac {
|
|
display:flex;
|
|
|
|
select:first-of-type {
|
|
display:inline-block;
|
|
width:50%;
|
|
}
|
|
|
|
select:last-of-type {
|
|
display:inline-block;
|
|
width:50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].armePoing {
|
|
&[value="0"] {
|
|
& ~ div div.poing {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].armeSection1 {
|
|
&[value="1"] {
|
|
& ~ div div.armeSection1 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].armeSection2 {
|
|
&[value="1"] {
|
|
& ~ div div.armeSection2 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].codexfm4 {
|
|
&[value="0"] {
|
|
& ~ div div.codexfm4,
|
|
& ~ div label.codexfm4 {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.subTabDistance {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
margin-top:10px;
|
|
display:none;
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
>div.titre {
|
|
display:flex;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
div.ligneTitre {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
display:flex;
|
|
justify-content: center;
|
|
color:$black;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
height:28px;
|
|
line-height:28px;
|
|
}
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (121px * 3) - 289px);
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.midCol {
|
|
background:$clair;
|
|
width:calc(121px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.lastCol {
|
|
background:$clair;
|
|
width:calc(289px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:calc(100% - 28px);
|
|
|
|
margin-right:28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armesListe {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
input[type="hidden"] {
|
|
&.guidage {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.guidage {
|
|
display:block;
|
|
}
|
|
|
|
label.precis {
|
|
width:250px;
|
|
padding:0px;
|
|
|
|
span {
|
|
width:119px;
|
|
}
|
|
|
|
select {
|
|
width:131px;
|
|
border-right:0px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.cadence {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.cadence {
|
|
display:flex;
|
|
padding-right:28px;
|
|
}
|
|
|
|
label.guidage {
|
|
width:121px;
|
|
margin-right:0px !important;
|
|
}
|
|
|
|
label.precis {
|
|
width:241px;
|
|
padding-right:0px;
|
|
|
|
span {
|
|
width: calc(50% - 3px);
|
|
}
|
|
|
|
select {
|
|
width:121px;
|
|
border-right:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armeSection1,
|
|
div.armeSection2 {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 3),
|
|
"widthBL":calc((100% / 3) - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
display:none;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.bonus {
|
|
display:none;
|
|
flex-wrap: wrap;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
label.guidage {
|
|
display:none;
|
|
}
|
|
|
|
div.bonusCarac {
|
|
display:none;
|
|
width: calc(289px - 1px - 28px);
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
padding-right:28px;
|
|
|
|
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;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.repcontainer {
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
div.repitem {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 3),
|
|
"widthBL":calc((100% / 3) - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.bonus {
|
|
display:none;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
label.precis {
|
|
display:none;
|
|
}
|
|
|
|
div.bonusCarac {
|
|
display:none;
|
|
width: calc(289px - 1px - 28px);
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
padding-right:28px;
|
|
|
|
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;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (121px * 3) - 289px);
|
|
}
|
|
|
|
div.midCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(121px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.lastCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(289px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.armeNom {
|
|
input[type="text"] {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 4px;
|
|
min-width: 0px;
|
|
}
|
|
}
|
|
|
|
div.armeDegats,
|
|
div.armeViolence {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
input[type="number"].nbre {
|
|
text-align:right;
|
|
}
|
|
|
|
input[type="number"].bonus {
|
|
text-align:left;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
div.armePortee {
|
|
select {
|
|
width:100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
div.armeCaracs {
|
|
select {
|
|
width:calc((100% / 2) - 14px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.bonus {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
input[type="hidden"] {
|
|
&.deuxMains {
|
|
&[value="0"] {
|
|
& ~ label.pilonnage,
|
|
& ~ label.pilonnageDetails {
|
|
display:none;
|
|
}
|
|
|
|
& ~ label.guidage {
|
|
margin-right:29px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
label.pilonnage {
|
|
display:none;
|
|
width: 241px;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width: max-content;
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:121px;
|
|
border:0px;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
select {
|
|
width:131px;
|
|
border:0px;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
padding-left:15px;
|
|
}
|
|
}
|
|
|
|
label.pilonnageDetails {
|
|
display:none;
|
|
width:calc(130px + 130px + 121px);
|
|
border-left:1px solid $sombre;
|
|
padding-right:28px;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
span {
|
|
width: max-content;
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:121px;
|
|
border:0px;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
select {
|
|
width:131px;
|
|
border:0px;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
padding-left:15px;
|
|
}
|
|
|
|
&:first-of-type {
|
|
width: 241px;
|
|
}
|
|
|
|
&:last-of-type {
|
|
width:calc(130px + 130px + 121px);
|
|
border-left:1px solid $sombre;
|
|
padding-right:28px;
|
|
}
|
|
}
|
|
|
|
label.cadence {
|
|
display:none;
|
|
width:381px;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width: 251px;
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
select {
|
|
width:132px;
|
|
border:0px;
|
|
padding:0px;
|
|
padding-left:15px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.guidage {
|
|
display:none;
|
|
margin-top:1px;
|
|
width:130px;
|
|
height:28px;
|
|
margin:0px;
|
|
margin-right:29px;
|
|
border-right:1px solid $sombre;
|
|
border:0px;
|
|
background:$clair;
|
|
|
|
span.actif,
|
|
span.inactif {
|
|
display:none;
|
|
text-align: center;
|
|
color:$black;
|
|
height:28px;
|
|
line-height: 28px;
|
|
align-items:center;
|
|
border-left:1px solid $sombre;
|
|
|
|
&::before {
|
|
height:28px;
|
|
line-height: 28px;
|
|
background:transparent;
|
|
color:$black;
|
|
}
|
|
}
|
|
|
|
span.actif {
|
|
border-left:1px solid $clair;
|
|
|
|
&::before {
|
|
background:$sombre;
|
|
color:$white;
|
|
border-bottom:1px solid $clair;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
height:28px;
|
|
|
|
&:checked {
|
|
& ~ span.actif {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&:not(:checked) {
|
|
& ~ span.inactif {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.effets,
|
|
div.ameliorationsArmes,
|
|
div.special {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"height":23px,
|
|
"width":100%,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.double {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
label.fakeButton {
|
|
width:calc(100% - 30px);
|
|
border:0px;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30px;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-left: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.doubleTexte {
|
|
width:150px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 1px solid black;
|
|
border-right: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
|
|
&.borderBottom {
|
|
border-bottom:1px solid $black;
|
|
}
|
|
}
|
|
|
|
.borderTop {
|
|
border-top:1px solid $black;
|
|
}
|
|
}
|
|
|
|
div.triple {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
div {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
height: 23px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-left:0px;
|
|
border-top:1px solid $black;
|
|
color:$black;
|
|
|
|
&.R {
|
|
text-align:left;
|
|
border-left:1px solid $black;
|
|
}
|
|
|
|
&.L {
|
|
text-align:right;
|
|
border-right:1px solid $black;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
background:$sombre;
|
|
width: 28px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $white;
|
|
border-top: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"] {
|
|
& ~ label span::before,
|
|
& ~ div span {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].subMenu {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].effets {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.effets {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].ameliorationsArmes {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.ameliorationsArmes {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="4"] {
|
|
& ~ div button[type="action"].special {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.special {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].styleCombat {
|
|
&[value="pilonnage"] {
|
|
& ~ div div.bonus {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div label.pilonnage {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div label.pilonnageDetails {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div label.guidage {
|
|
margin-right:0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].bonusCarac {
|
|
&[value="1"] {
|
|
& ~ div.titre {
|
|
button[type="action"].bonusCaracL1 {
|
|
box-shadow: 0px 0px 7px 0px #000000 inset;
|
|
}
|
|
}
|
|
|
|
& ~ div div.bonus {
|
|
display:flex;
|
|
|
|
label.pilonnage {
|
|
width:calc((121px * 2) - 1px);
|
|
padding-right:0px;
|
|
|
|
input[type="number"] {
|
|
border-right:0px;
|
|
}
|
|
}
|
|
|
|
label.cadence {
|
|
width:362px;
|
|
padding-right:0px !important;
|
|
|
|
span {
|
|
width:238px;
|
|
}
|
|
|
|
select {
|
|
width:121px;
|
|
border-right:0px;
|
|
}
|
|
}
|
|
|
|
label.guidage {
|
|
margin-right:0px !important;
|
|
width:121px;
|
|
}
|
|
}
|
|
|
|
& ~ 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 div.bonus {
|
|
display:flex;
|
|
|
|
label.pilonnage {
|
|
width:calc((121px * 2) - 1px);
|
|
padding-right:0px;
|
|
|
|
|
|
input[type="number"] {
|
|
border-right:0px;
|
|
}
|
|
}
|
|
|
|
label.cadence {
|
|
width:362px;
|
|
padding-right:0px !important;
|
|
|
|
span {
|
|
width:238px;
|
|
}
|
|
|
|
select {
|
|
width:121px;
|
|
border-right:0px;
|
|
}
|
|
}
|
|
|
|
label.guidage {
|
|
margin-right:0px !important;
|
|
width:121px;
|
|
}
|
|
}
|
|
|
|
& ~ div div.bonusCarac {
|
|
display:flex;
|
|
|
|
select:first-of-type {
|
|
display:inline-block;
|
|
width:50%;
|
|
}
|
|
|
|
select:last-of-type {
|
|
display:inline-block;
|
|
width:50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].armeSection1 {
|
|
&[value="1"] {
|
|
& ~ div div.armeSection1 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].armeSection2 {
|
|
&[value="1"] {
|
|
& ~ div div.armeSection2 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].codexfm4 {
|
|
&[value="0"] {
|
|
& ~ div div.codexfm4,
|
|
& ~ div label.codexfm4 {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
margin-top:10px;
|
|
|
|
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 * 4) - 29px);
|
|
}
|
|
|
|
.jet {
|
|
width:110px;
|
|
padding-right:29px;
|
|
}
|
|
}
|
|
|
|
.OD,
|
|
.type,
|
|
.degats,
|
|
.violence {
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items:center;
|
|
align-content:center;
|
|
}
|
|
|
|
.OD {
|
|
width:110px;
|
|
}
|
|
.degats,
|
|
.violence {
|
|
width:calc(110px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
.type {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
.jet {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.ligne {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
.OD,
|
|
.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 * 4) - 29px - 4px);
|
|
background: white;
|
|
text-align: justify;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
align-content:center;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.jet {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.subTabAutre {
|
|
@include block($sombre);
|
|
@include titre($white, transparent);
|
|
@include buttonRoll();
|
|
|
|
margin-top:10px;
|
|
display:none;
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.ligneTitre {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
display:flex;
|
|
justify-content: center;
|
|
color:$black;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
height:28px;
|
|
line-height:28px;
|
|
}
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (121px * 4) - 130px - 29px);
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.midCol {
|
|
background:$clair;
|
|
width:calc(121px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.lastCol {
|
|
background:$clair;
|
|
width:calc(130px - 1px);
|
|
padding-right:29px;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armesListe {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
input[type="hidden"] {
|
|
&.guidage {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.guidage {
|
|
display:block;
|
|
}
|
|
|
|
label.precis {
|
|
width:250px;
|
|
padding:0px;
|
|
|
|
span {
|
|
width:119px;
|
|
}
|
|
|
|
select {
|
|
width:131px;
|
|
border-right:0px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.cadence {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.cadence {
|
|
display:flex;
|
|
padding-right:28px;
|
|
}
|
|
|
|
label.guidage {
|
|
width:121px;
|
|
margin-right:0px !important;
|
|
}
|
|
|
|
label.precis {
|
|
width:241px;
|
|
padding-right:0px;
|
|
|
|
span {
|
|
width: calc(50% - 3px);
|
|
}
|
|
|
|
select {
|
|
width:121px;
|
|
border-right:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.repcontainer {
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
div.repitem {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 3),
|
|
"widthBL":calc((100% / 3) - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.bonus {
|
|
display:none;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
div.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (121px * 4) - 130px - 29px);
|
|
}
|
|
|
|
div.midCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(121px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.lastCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(130px + 29px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.armeNom {
|
|
input[type="text"] {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 4px;
|
|
min-width: 0px;
|
|
}
|
|
}
|
|
|
|
div.armeDegats,
|
|
div.armeViolence {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
input[type="number"].nbre {
|
|
text-align:right;
|
|
}
|
|
|
|
input[type="number"].bonus {
|
|
text-align:left;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
div.armePortee {
|
|
select {
|
|
width:100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
div.armeAttaque {
|
|
input[type="number"] {
|
|
width:calc(100% - 28px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
input[type="number"].nbre {
|
|
text-align:right;
|
|
}
|
|
|
|
input[type="number"].bonus {
|
|
text-align:left;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
div.armeJet {
|
|
input[type="number"] {
|
|
width:calc(100% - 28px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
|
|
input[type="number"].nbre {
|
|
text-align:right;
|
|
}
|
|
|
|
input[type="number"].bonus {
|
|
text-align:left;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.bonus {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
label.cadence {
|
|
display:none;
|
|
width:372px;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width: 236px;
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
select {
|
|
width:131px;
|
|
border:0px;
|
|
padding:0px;
|
|
padding-left:15px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.guidage {
|
|
display:none;
|
|
margin-top:1px;
|
|
width:130px;
|
|
height:28px;
|
|
margin:0px;
|
|
margin-right:29px;
|
|
border-right:1px solid $sombre;
|
|
border:0px;
|
|
background:$clair;
|
|
|
|
span.actif,
|
|
span.inactif {
|
|
display:none;
|
|
text-align: center;
|
|
color:$black;
|
|
height:28px;
|
|
line-height: 28px;
|
|
align-items:center;
|
|
border-left:1px solid $sombre;
|
|
|
|
&::before {
|
|
height:28px;
|
|
line-height: 28px;
|
|
background:transparent;
|
|
color:$black;
|
|
}
|
|
}
|
|
|
|
span.actif {
|
|
border-left:1px solid $clair;
|
|
|
|
&::before {
|
|
background:$sombre;
|
|
color:$white;
|
|
border-bottom:1px solid $clair;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
height:28px;
|
|
|
|
&:checked {
|
|
& ~ span.actif {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&:not(:checked) {
|
|
& ~ span.inactif {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.effets,
|
|
div.ameliorationsArmes,
|
|
div.special {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.double {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
label.fakeButton {
|
|
width:calc(100% - 30px);
|
|
border:0px;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30px;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-left: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.doubleTexte {
|
|
width:150px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 1px solid black;
|
|
border-right: 0px;
|
|
border-left: 0px;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
|
|
&.borderBottom {
|
|
border-bottom:1px solid $black;
|
|
}
|
|
}
|
|
|
|
.borderTop {
|
|
border-top:1px solid $black;
|
|
}
|
|
}
|
|
|
|
div.triple {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
div {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
height: 23px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-left:0px;
|
|
border-top:1px solid $black;
|
|
color:$black;
|
|
|
|
&.R {
|
|
text-align:left;
|
|
border-left:1px solid $black;
|
|
}
|
|
|
|
&.L {
|
|
text-align:right;
|
|
border-right:1px solid $black;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
background:$sombre;
|
|
width: 28px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $white;
|
|
border-top: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"] {
|
|
& ~ label span::before,
|
|
& ~ div span {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].subMenu {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].effets {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.effets {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].ameliorationsArmes {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.ameliorationsArmes {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="4"] {
|
|
& ~ div button[type="action"].special {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.special {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].codexfm4 {
|
|
&[value="0"] {
|
|
& ~ div div.codexfm4,
|
|
& ~ div label.codexfm4 {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armesPNJ {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.subTabMelee {
|
|
@include block($sombre);
|
|
@include titre($white, transparent);
|
|
@include buttonRoll();
|
|
|
|
display:none;
|
|
margin-top:10px;
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.ligneTitre {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
display:flex;
|
|
justify-content: center;
|
|
color:$black;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
height:28px;
|
|
line-height:28px;
|
|
}
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (121px * 3) - 159px - 120px);
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.midCol {
|
|
background:$clair;
|
|
width:calc(121px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.midColL {
|
|
background:$clair;
|
|
width:calc(241px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.lastCol {
|
|
background:$clair;
|
|
width:calc(159px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:calc(100% - 29px);
|
|
|
|
margin-right:29px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armesListe {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
input[type="hidden"] {
|
|
&.guidage {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.guidage {
|
|
display:block;
|
|
}
|
|
|
|
label.precis {
|
|
width:250px;
|
|
padding:0px;
|
|
|
|
span {
|
|
width:119px;
|
|
}
|
|
|
|
select {
|
|
width:131px;
|
|
border-right:0px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.cadence {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.cadence {
|
|
display:flex;
|
|
padding-right:28px;
|
|
}
|
|
|
|
label.guidage {
|
|
width:121px;
|
|
margin-right:0px;
|
|
}
|
|
|
|
label.precis {
|
|
width:241px;
|
|
padding-right:0px;
|
|
|
|
span {
|
|
width: calc(50% - 3px);
|
|
}
|
|
|
|
select {
|
|
width:121px;
|
|
border-right:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armeSection1,
|
|
div.armeSection2 {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 4),
|
|
"widthBL":calc((100% / 4) - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
display:none;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.bonus {
|
|
display:none;
|
|
flex-wrap: wrap;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
label.precis,
|
|
label.guidage {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
div.repcontainer {
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
div.repitem {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 4),
|
|
"widthBL":calc((100% / 4) - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.bonus {
|
|
display:none;
|
|
flex-wrap: wrap;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
label.precis,
|
|
label.guidage {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
div.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":120px,
|
|
"height":28px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":28px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (121px * 3) - 159px - 120px);
|
|
}
|
|
|
|
div.midCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(121px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.midColL {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(241px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.lastCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(159px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.armeNom {
|
|
input[type="text"] {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 4px;
|
|
min-width: 0px;
|
|
}
|
|
}
|
|
|
|
div.armeDegats,
|
|
div.armeViolence {
|
|
div {
|
|
width:120px;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
input[type="number"].nbre {
|
|
text-align:right;
|
|
}
|
|
|
|
input[type="number"].bonus {
|
|
text-align:left;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
label.fakeButton {
|
|
span {
|
|
border-left:1px solid $black;
|
|
}
|
|
|
|
&:hover {
|
|
span::before {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armePortee {
|
|
select {
|
|
width:100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
div.armeAspect {
|
|
select {
|
|
width:calc(100% - 29px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
border:0px;
|
|
}
|
|
|
|
button[type="roll"],
|
|
button[type="action"] {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.bonus {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.deuxMains {
|
|
&[value="0"] {
|
|
& ~ label.precis {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.allegee {
|
|
&[value="1"] {
|
|
& ~ label.precis {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
label.precis {
|
|
display:none;
|
|
width: calc(261px - 1px);
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
padding-right:28px;
|
|
|
|
span {
|
|
width: calc((100% / 2) - 3px);
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
select {
|
|
width:calc((100% / 2) + 1px);
|
|
border:0px;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.cadence {
|
|
display:none;
|
|
width:381px;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width: 251px;
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
select {
|
|
width:132px;
|
|
border:0px;
|
|
padding:0px;
|
|
padding-left:15px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.guidage {
|
|
display:none;
|
|
margin-top:1px;
|
|
width:130px;
|
|
height:28px;
|
|
margin:0px;
|
|
margin-right:29px;
|
|
border-right:1px solid $sombre;
|
|
border:0px;
|
|
background:$clair;
|
|
|
|
span.actif,
|
|
span.inactif {
|
|
display:none;
|
|
text-align: center;
|
|
color:$black;
|
|
height:28px;
|
|
line-height: 28px;
|
|
align-items:center;
|
|
border-left:1px solid $sombre;
|
|
|
|
&::before {
|
|
height:28px;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
|
|
span.actif {
|
|
border-left:1px solid $clair;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
height:28px;
|
|
|
|
&:checked {
|
|
& ~ span.actif {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&:not(:checked) {
|
|
& ~ span.inactif {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.effets,
|
|
div.ameliorationsStructurelles,
|
|
div.ameliorationsArmes,
|
|
div.special {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.double {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
label.fakeButton {
|
|
width:calc(100% - 30px);
|
|
border:0px;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30px;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-left: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.doubleTexte {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 23px;
|
|
text-align: center;
|
|
border: 1px solid black;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.triple {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
div {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
height: 23px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-left:0px;
|
|
border-top:1px solid $black;
|
|
color:$black;
|
|
|
|
&.R {
|
|
text-align:left;
|
|
border-left:1px solid $black;
|
|
}
|
|
|
|
&.L {
|
|
text-align:right;
|
|
border-right:1px solid $black;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
background:$sombre;
|
|
width: 28px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $white;
|
|
border-top: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"] {
|
|
& ~ label span::before,
|
|
& ~ div span {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].subMenu {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].effets {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.effets {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div button[type="action"].ameliorationsStructurelles {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.ameliorationsStructurelles {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].ameliorationsArmes {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.ameliorationsArmes {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="4"] {
|
|
& ~ div button[type="action"].special {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.special {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].armeSection1 {
|
|
&[value="1"] {
|
|
& ~ div div.armeSection1 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].armeSection2 {
|
|
&[value="1"] {
|
|
& ~ div div.armeSection2 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].codexfm4 {
|
|
&[value="0"] {
|
|
& ~ div div.codexfm4,
|
|
& ~ div label.codexfm4 {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.subTabDistance {
|
|
@include block($sombre);
|
|
@include titre($white, transparent);
|
|
@include buttonRoll();
|
|
|
|
margin-top:10px;
|
|
display:none;
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.ligneTitre {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
display:flex;
|
|
justify-content: center;
|
|
color:$black;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
height:28px;
|
|
line-height:28px;
|
|
}
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (121px * 3) - 159px);
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.midCol {
|
|
background:$clair;
|
|
width:calc(121px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.lastCol {
|
|
background:$clair;
|
|
width:calc(159px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:calc(100% - 29px);
|
|
|
|
margin-right:29px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armesListe {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
input[type="hidden"] {
|
|
&.guidage {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.guidage {
|
|
display:block;
|
|
}
|
|
|
|
label.precis {
|
|
width:250px;
|
|
padding:0px;
|
|
|
|
span {
|
|
width:119px;
|
|
}
|
|
|
|
select {
|
|
width:131px;
|
|
border-right:0px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.cadence {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.cadence {
|
|
display:flex;
|
|
padding-right:28px;
|
|
}
|
|
|
|
label.guidage {
|
|
width:121px;
|
|
margin-right:0px;
|
|
}
|
|
|
|
label.precis {
|
|
width:241px;
|
|
padding-right:0px;
|
|
|
|
span {
|
|
width: calc(50% - 3px);
|
|
}
|
|
|
|
select {
|
|
width:121px;
|
|
border-right:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armeSection1,
|
|
div.armeSection2 {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 3),
|
|
"widthBL":calc((100% / 3) - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
display:none;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.bonus {
|
|
display:none;
|
|
flex-wrap: wrap;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
label.precis,
|
|
label.guidage {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
div.repcontainer {
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
div.repitem {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 3),
|
|
"widthBL":calc((100% / 3) - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.bonus {
|
|
display:none;
|
|
flex-wrap: wrap;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
label.precis,
|
|
label.guidage {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
div.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (121px * 3) - 159px);
|
|
}
|
|
|
|
div.midCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(121px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.lastCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(159px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.armeNom {
|
|
input[type="text"] {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 4px;
|
|
min-width: 0px;
|
|
}
|
|
}
|
|
|
|
div.armeDegats,
|
|
div.armeViolence {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
input[type="number"].nbre {
|
|
text-align:right;
|
|
}
|
|
|
|
input[type="number"].bonus {
|
|
text-align:left;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
div.armePortee {
|
|
select {
|
|
width:100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
div.armeAspect {
|
|
select {
|
|
width:calc(100% - 29px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
button[type="roll"],
|
|
button[type="action"] {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.bonus {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.deuxMains {
|
|
&[value="0"] {
|
|
& ~ label.precis {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.allegee {
|
|
&[value="1"] {
|
|
& ~ label.precis {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
label.precis {
|
|
display:none;
|
|
width: calc(261px - 1px);
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
padding-right:28px;
|
|
|
|
span {
|
|
width: calc((100% / 2) - 3px);
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
select {
|
|
width:calc((100% / 2) + 1px);
|
|
border:0px;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.cadence {
|
|
display:none;
|
|
width:381px;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width: 251px;
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
select {
|
|
width:132px;
|
|
border:0px;
|
|
padding:0px;
|
|
padding-left:15px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.guidage {
|
|
display:none;
|
|
margin-top:1px;
|
|
width:130px;
|
|
height:28px;
|
|
margin:0px;
|
|
margin-right:29px;
|
|
border-right:1px solid $sombre;
|
|
border:0px;
|
|
background:$clair;
|
|
|
|
span.actif,
|
|
span.inactif {
|
|
display:none;
|
|
text-align: center;
|
|
color:$black;
|
|
height:28px;
|
|
line-height: 28px;
|
|
align-items:center;
|
|
border-left:1px solid $sombre;
|
|
|
|
&::before {
|
|
height:28px;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
|
|
span.actif {
|
|
border-left:1px solid $clair;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
height:28px;
|
|
|
|
&:checked {
|
|
& ~ span.actif {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&:not(:checked) {
|
|
& ~ span.inactif {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.effets,
|
|
div.ameliorationsArmes,
|
|
div.special {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.double {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
label.fakeButton {
|
|
width:calc(100% - 30px);
|
|
border:0px;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30px;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-left: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.doubleTexte {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.triple {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
div {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
height: 23px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-left:0px;
|
|
border-top:1px solid $black;
|
|
color:$black;
|
|
|
|
&.R {
|
|
text-align:left;
|
|
border-left:1px solid $black;
|
|
}
|
|
|
|
&.L {
|
|
text-align:right;
|
|
border-right:1px solid $black;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
background:$sombre;
|
|
width: 28px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $white;
|
|
border-top: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"] {
|
|
& ~ label span::before,
|
|
& ~ div span {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].subMenu {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].effets {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.effets {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].ameliorationsArmes {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.ameliorationsArmes {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="4"] {
|
|
& ~ div button[type="action"].special {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.special {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].armeSection1 {
|
|
&[value="1"] {
|
|
& ~ div div.armeSection1 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].armeSection2 {
|
|
&[value="1"] {
|
|
& ~ div div.armeSection2 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].codexfm4 {
|
|
&[value="0"] {
|
|
& ~ div div.codexfm4,
|
|
& ~ div label.codexfm4 {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent);
|
|
@include fakeButton($fakeButton);
|
|
|
|
width:50%;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
margin-top:10px;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.buttons {
|
|
display:flex;
|
|
justify-content: space-evenly;
|
|
background:$clair;
|
|
width:100%;
|
|
padding-top:5px;
|
|
padding-bottom:5px;
|
|
}
|
|
}
|
|
|
|
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 * 4) - 29px);
|
|
}
|
|
|
|
.jet {
|
|
width:110px;
|
|
padding-right:29px;
|
|
}
|
|
}
|
|
|
|
.OD,
|
|
.type,
|
|
.degats,
|
|
.violence {
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items:center;
|
|
align-content:center;
|
|
}
|
|
|
|
.OD {
|
|
width:110px;
|
|
}
|
|
.degats,
|
|
.violence {
|
|
width:calc(110px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
.type {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
.jet {
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.ligne {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
.OD,
|
|
.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 * 4) - 29px - 4px);
|
|
background: white;
|
|
text-align: justify;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
align-content:center;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.jet {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.subTabAutre {
|
|
@include block($sombre);
|
|
@include titre($white, transparent);
|
|
@include buttonRoll();
|
|
|
|
margin-top:10px;
|
|
display:none;
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.ligneTitre {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
display:flex;
|
|
justify-content: center;
|
|
color:$black;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
height:28px;
|
|
line-height:28px;
|
|
}
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (116px * 4) - 150px - 29px);
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.midCol {
|
|
background:$clair;
|
|
width:calc(116px - 1px);
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
div.lastCol {
|
|
background:$clair;
|
|
width:calc(150px - 1px);
|
|
padding-right:29px;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width:100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armesListe {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
input[type="hidden"] {
|
|
&.guidage {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.guidage {
|
|
display:block;
|
|
}
|
|
|
|
label.precis {
|
|
width:250px;
|
|
padding:0px;
|
|
|
|
span {
|
|
width:119px;
|
|
}
|
|
|
|
select {
|
|
width:131px;
|
|
border-right:0px;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.cadence {
|
|
&:not([value="0"]) {
|
|
& ~ div.bonus {
|
|
display:flex;
|
|
|
|
label.cadence {
|
|
display:flex;
|
|
padding-right:28px;
|
|
}
|
|
|
|
label.guidage {
|
|
width:121px;
|
|
margin-right:0px;
|
|
}
|
|
|
|
label.precis {
|
|
width:241px;
|
|
padding-right:0px;
|
|
|
|
span {
|
|
width: calc(50% - 3px);
|
|
}
|
|
|
|
select {
|
|
width:121px;
|
|
border-right:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.repcontainer {
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
div.repitem {
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":calc(100% / 3),
|
|
"widthBL":calc((100% / 3) - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
div.bonus {
|
|
display:none;
|
|
flex-wrap: wrap;
|
|
width:100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
label.precis,
|
|
label.guidage {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
div.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
div.firstCol {
|
|
background:$clair;
|
|
width:calc(100% - (116px * 4) - 150px - 29px);
|
|
}
|
|
|
|
div.midCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(116px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.lastCol {
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
width:calc(150px + 29px - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
div.armeNom {
|
|
input[type="text"] {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 4px;
|
|
min-width: 0px;
|
|
}
|
|
}
|
|
|
|
div.armeDegats,
|
|
div.armeViolence {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
min-width: 0px;
|
|
}
|
|
|
|
input[type="number"].nbre {
|
|
text-align:right;
|
|
}
|
|
|
|
input[type="number"].bonus {
|
|
text-align:left;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
div.armePortee {
|
|
select {
|
|
width:100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
div.armeAttaque {
|
|
input[type="number"] {
|
|
width:calc(100% - 28px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
input[type="number"].nbre {
|
|
text-align:right;
|
|
}
|
|
|
|
input[type="number"].bonus {
|
|
text-align:left;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
div.armeJet {
|
|
input[type="number"] {
|
|
width:calc(100% - 28px);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
|
|
input[type="number"].nbre {
|
|
text-align:right;
|
|
}
|
|
|
|
input[type="number"].bonus {
|
|
text-align:left;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.bonus {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.deuxMains {
|
|
&[value="0"] {
|
|
& ~ label.precis {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.allegee {
|
|
&[value="1"] {
|
|
& ~ label.precis {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
label.precis {
|
|
display:none;
|
|
width: calc(261px - 1px);
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
padding-right:28px;
|
|
|
|
span {
|
|
width: calc((100% / 2) - 3px);
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
select {
|
|
width:calc((100% / 2) + 1px);
|
|
border:0px;
|
|
padding:0px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.cadence {
|
|
display:none;
|
|
width:381px;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
border-left:1px solid $sombre;
|
|
|
|
span {
|
|
width: 251px;
|
|
padding-left: 2px;
|
|
line-height: 27px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
select {
|
|
width:132px;
|
|
border:0px;
|
|
padding:0px;
|
|
padding-left:15px;
|
|
height:28px;
|
|
text-align: center;
|
|
border-left:1px solid $sombre;
|
|
border-right:1px solid $sombre;
|
|
}
|
|
}
|
|
|
|
label.guidage {
|
|
display:none;
|
|
margin-top:1px;
|
|
width:130px;
|
|
height:28px;
|
|
margin:0px;
|
|
margin-right:29px;
|
|
border-right:1px solid $sombre;
|
|
border:0px;
|
|
background:$clair;
|
|
|
|
span.actif,
|
|
span.inactif {
|
|
display:none;
|
|
text-align: center;
|
|
color:$black;
|
|
height:28px;
|
|
line-height: 28px;
|
|
align-items:center;
|
|
border-left:1px solid $sombre;
|
|
|
|
&::before {
|
|
height:28px;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
|
|
span.actif {
|
|
border-left:1px solid $clair;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
height:28px;
|
|
|
|
&:checked {
|
|
& ~ span.actif {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&:not(:checked) {
|
|
& ~ span.inactif {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.effets,
|
|
div.ameliorationsArmes,
|
|
div.special {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.double {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
label.fakeButton {
|
|
width:calc(100% - 30px);
|
|
border:0px;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30px;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-left: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.doubleTexte {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.triple {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
div {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
height: 23px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-left:0px;
|
|
border-top:1px solid $black;
|
|
color:$black;
|
|
|
|
&.R {
|
|
text-align:left;
|
|
border-left:1px solid $black;
|
|
}
|
|
|
|
&.L {
|
|
text-align:right;
|
|
border-right:1px solid $black;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
background:$sombre;
|
|
width: 28px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $white;
|
|
border-top: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"] {
|
|
& ~ label span::before,
|
|
& ~ div span {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].subMenu {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].effets {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.effets {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].ameliorationsArmes {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.ameliorationsArmes {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
&[value="4"] {
|
|
& ~ div button[type="action"].special {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.special {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].styleCombat {
|
|
&[value="pilonnage"] {
|
|
& ~ div div.bonus {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div label.pilonnage {
|
|
display:flex;
|
|
}
|
|
|
|
& ~ div label.pilonnageDetails {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].bonusCarac {
|
|
&[value="1"] {
|
|
& ~ div.titre {
|
|
button[type="action"].bonusCaracL1 {
|
|
box-shadow: 0px 0px 7px 0px #000000 inset;
|
|
}
|
|
}
|
|
|
|
& ~ div div.bonus {
|
|
display:flex;
|
|
|
|
label.pilonnage {
|
|
width:calc((121px * 2) - 1px);
|
|
padding-right:0px;
|
|
|
|
input[type="number"] {
|
|
border-right:0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& ~ 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 div.bonus {
|
|
display:flex;
|
|
|
|
label.pilonnage {
|
|
width:calc((121px * 2) - 1px);
|
|
padding-right:0px;
|
|
|
|
|
|
input[type="number"] {
|
|
border-right:0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& ~ div div.bonusCarac {
|
|
display:flex;
|
|
|
|
select:first-of-type {
|
|
display:inline-block;
|
|
width:50%;
|
|
}
|
|
|
|
select:last-of-type {
|
|
display:inline-block;
|
|
width:50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].armeSection1 {
|
|
&[value="1"] {
|
|
& ~ div div.armeSection1 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].armeSection2 {
|
|
&[value="1"] {
|
|
& ~ div div.armeSection2 {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].codexfm4 {
|
|
&[value="0"] {
|
|
& ~ div div.codexfm4,
|
|
& ~ div label.codexfm4 {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//ZONE DU BAS - COL GAUCHE PJ
|
|
div.grenade {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":100%,
|
|
"widthBL":calc(100% - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
div.titre {
|
|
display:flex;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
height:28px;
|
|
width:80px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-content: center;
|
|
margin-left:auto;
|
|
|
|
input[type="number"] {
|
|
width: 37px;
|
|
height: 100%;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border: 0px;
|
|
z-index: 9;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width: 6px;
|
|
height: 100%;
|
|
color: $black;
|
|
background: $white;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.roll {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
|
|
select {
|
|
width:calc(100% / 2);
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
|
|
&:last-of-type {
|
|
width:calc(100% / 2);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.ligne {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
align-items:center;
|
|
align-content:center;
|
|
width:100%;
|
|
border-top:1px solid $sombre;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
|
|
&.nom {
|
|
width: calc(100px - 2px);
|
|
padding-left: 2px;
|
|
line-height: 28px;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
&.description {
|
|
height:100%;
|
|
width: calc(100% - 100px - 29px - 4px);
|
|
padding-left: 2px;
|
|
padding-right:2px;
|
|
line-height: 18px;
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
border-right:1px solid $sombre;
|
|
align-items:center;
|
|
align-content:center;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.effets {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:200px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.double {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
label.fakeButton {
|
|
width:calc(100% - 30px);
|
|
border:0px;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30px;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-left: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.doubleTexte {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.triple {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
div {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
height: 23px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-left:0px;
|
|
border-top:1px solid $black;
|
|
color:$black;
|
|
|
|
&.R {
|
|
text-align:left;
|
|
border-left:1px solid $black;
|
|
}
|
|
|
|
&.L {
|
|
text-align:right;
|
|
border-right:1px solid $black;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
background:$sombre;
|
|
width: 28px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $white;
|
|
border-top: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"] {
|
|
& ~ label span::before,
|
|
& ~ div span {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.bonusCarac {
|
|
display:none;
|
|
width: 100%;
|
|
background: $clair;
|
|
justify-content: space-between;
|
|
border-top:1px solid $sombre;
|
|
|
|
select {
|
|
display:none;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].effets {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].effets {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.effets {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
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: calc(100% / 2);
|
|
}
|
|
|
|
select:last-of-type {
|
|
display:inline-block;
|
|
width: calc(100% / 2);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].codexfm4 {
|
|
&[value="0"] {
|
|
& ~ div.codexfm4 {
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//ZONE DU BAS - COL GAUCHE PNJ
|
|
div.grenadePNJ {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true
|
|
)
|
|
);
|
|
|
|
$subMenu: (
|
|
"color":$white,
|
|
"background":transparent,
|
|
"borderColor":$black,
|
|
"fontSize":12px,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":100%,
|
|
"widthBL":calc(100% - 1px),
|
|
"height":23px
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
div.titre {
|
|
display:flex;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div {
|
|
display:flex;
|
|
height:28px;
|
|
width:80px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-content: center;
|
|
margin-left:auto;
|
|
|
|
input[type="number"] {
|
|
width: 37px;
|
|
height: 100%;
|
|
text-align: center;
|
|
padding: 0px;
|
|
border: 0px;
|
|
z-index: 9;
|
|
}
|
|
|
|
b {
|
|
display:flex;
|
|
width: 6px;
|
|
height: 100%;
|
|
color: $black;
|
|
background: $white;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.roll {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
width:100%;
|
|
|
|
select {
|
|
width:100%;
|
|
font-size: 14px;
|
|
height: 28px;
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-right: 0px;
|
|
padding-bottom: 0px;
|
|
border: 0px;
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
div.ligne {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
align-items:center;
|
|
align-content:center;
|
|
width:100%;
|
|
border-top:1px solid $sombre;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
|
|
&.nom {
|
|
width: calc(100px - 2px);
|
|
padding-left: 2px;
|
|
line-height: 28px;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
&.description {
|
|
height:100%;
|
|
width: calc(100% - 100px - 29px - 4px);
|
|
padding-left: 2px;
|
|
padding-right:2px;
|
|
line-height: 18px;
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
border-right:1px solid $sombre;
|
|
align-items:center;
|
|
align-content:center;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.effets {
|
|
$fakeButton: (
|
|
"label":(
|
|
"width":100%,
|
|
"height":23px
|
|
),
|
|
"span": (
|
|
"width":100%,
|
|
"height":23px,
|
|
"background":$sombre,
|
|
"color":$white,
|
|
"border":false
|
|
),
|
|
"shadow":false
|
|
);
|
|
|
|
@include fakeButton($fakeButton) {
|
|
font-size:12px;
|
|
};
|
|
|
|
display:none;
|
|
width:100%;
|
|
background:$clair;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
|
|
label.simple {
|
|
justify-content: space-between;
|
|
width:200px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.double {
|
|
justify-content: space-between;
|
|
width:150px;
|
|
height:23px;
|
|
margin:2px;
|
|
border:1px solid $black;
|
|
|
|
label.fakeButton {
|
|
width:calc(100% - 30px);
|
|
border:0px;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 30px;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 0px;
|
|
border-right: 0px;
|
|
border-left: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.doubleTexte {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
input[type="checkbox"] {
|
|
&:not(:checked) {
|
|
& ~ span::before {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%;
|
|
height: 23px;
|
|
text-align: center;
|
|
border-top: 1px solid $black;
|
|
border-bottom: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
div.triple {
|
|
width:150px;
|
|
height:46px;
|
|
margin:2px;
|
|
flex-wrap: wrap;
|
|
border:1px solid $black;
|
|
|
|
div {
|
|
input[type="number"] {
|
|
width: calc(50% - 14px);
|
|
height: 23px;
|
|
border-radius: 0px;
|
|
padding: 0px;
|
|
border-bottom:0px;
|
|
border-right:0px;
|
|
border-left:0px;
|
|
border-top:1px solid $black;
|
|
color:$black;
|
|
|
|
&.R {
|
|
text-align:left;
|
|
border-left:1px solid $black;
|
|
}
|
|
|
|
&.L {
|
|
text-align:right;
|
|
border-right:1px solid $black;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
background:$sombre;
|
|
width: 28px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: $white;
|
|
border-top: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&[value="0"] {
|
|
& ~ label span::before,
|
|
& ~ div span {
|
|
background:$clair;
|
|
color:$black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"].effets {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].effets {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ div.effets {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//ZONE DU BAS - COL DROITE PJ
|
|
div.protections {
|
|
$subMenu: (
|
|
"width":calc(100% / 4),
|
|
"color":$white,
|
|
"background":$sombre,
|
|
"borderColor":$black,
|
|
"fontSize":1.2em,
|
|
"fontBold":true,
|
|
|
|
"button":(
|
|
"width":100%,
|
|
"widthBL":calc(100% - 1px),
|
|
"height":26px
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent);
|
|
|
|
display:none;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.ligneTitre,
|
|
div.repcontainer,
|
|
div.repitem {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
div.repcontainer {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
div.ligneTitre {
|
|
span {
|
|
display:flex;
|
|
font-weight: bold;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
color: $black;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.col4 {
|
|
display:flex;
|
|
width:calc(100% / 4);
|
|
background:$clair;
|
|
justify-content: center;
|
|
align-items:center;
|
|
align-content:center;
|
|
}
|
|
|
|
.col4BL {
|
|
display:flex;
|
|
width:calc((100% / 4) - 1px);
|
|
border-left:1px solid $sombre;
|
|
background:$clair;
|
|
justify-content: center;
|
|
align-items:center;
|
|
align-content:center;
|
|
}
|
|
|
|
.repitem {
|
|
@include subMenu("subMenu", $subMenu);
|
|
|
|
border-top:1px solid $sombre;
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
width:100%;
|
|
text-align: center;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: 0px;
|
|
height: 28px;
|
|
}
|
|
|
|
input[type="hidden"].porte {
|
|
&[value="1"] ~ div button[type="action"].porte {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//ZONE DU BAS - 3COL
|
|
div.effetsArmes {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
padding: 0px;
|
|
border: 0px;
|
|
border-bottom:1px solid $sombre;
|
|
}
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
background-color: #f5f5f5;
|
|
min-height: 28px;
|
|
padding-right: 2px;
|
|
padding-left: 2px;
|
|
text-align: justify;
|
|
white-space: pre-line;
|
|
}
|
|
}
|
|
|
|
input[type="hidden"] {
|
|
&.subTabDistance {
|
|
&[value="1"] {
|
|
& ~ div button[type="action"].subTabDistance {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .subTabMelee,
|
|
& ~ div .subTabDistance {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.subTabMelee {
|
|
&[value="2"] {
|
|
& ~ div button[type="action"].subTabMelee {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .subTabMelee,
|
|
& ~ div .subTabMelee {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.subTabAutre {
|
|
&[value="3"] {
|
|
& ~ div button[type="action"].subTabAutre {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .subTabAutre,
|
|
& ~ div .subTabAutre {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.subTabDefensif {
|
|
&[value="4"] {
|
|
& ~ div button[type="action"].subTabDefensif {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .protections,
|
|
& ~ div .protections {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.subTabArmure {
|
|
&[value="5"] {
|
|
& ~ div button[type="action"].subTabArmure {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .subTabArmure >div {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.subTabImprovisee {
|
|
&[value="6"] {
|
|
& ~ div button[type="action"].subTabImprovisee {
|
|
box-shadow: 0px 0px 7px 0px $black inset;
|
|
}
|
|
|
|
& ~ .subTabImprovisee,
|
|
& ~ div .subTabImprovisee {
|
|
display:flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
>div.col >*
|
|
{
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
div.marginTop {
|
|
margin-top:10px;
|
|
}
|
|
} |