1899 lines
55 KiB
SCSS
1899 lines
55 KiB
SCSS
div.tabVehicule {
|
|
@include col(100%, calc((100% / 2) - 5px));
|
|
@include col(100%, calc((100% / 3) - 5px), "col3");
|
|
|
|
flex-wrap: wrap;
|
|
|
|
div.donnees {
|
|
@include block($sombre);
|
|
@include titre($white, transparent);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
label {
|
|
display:flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-content: center;
|
|
|
|
width: 100%;
|
|
background: $clair;
|
|
color: $black;
|
|
font-size: 14px;
|
|
|
|
span {
|
|
display:inline-block;
|
|
width: calc(50% - 2px);
|
|
line-height: 28px;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"],
|
|
select {
|
|
width: 50%;
|
|
border: 0px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
height: 28px;
|
|
text-align: center;
|
|
}
|
|
|
|
&:not(:first-of-type) {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.jet {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre,
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
select {
|
|
border:0px;
|
|
}
|
|
|
|
label.bonus {
|
|
display:flex;
|
|
width: 100%;
|
|
background: $clair;
|
|
font-size: 14px;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
width: calc(50% - 2px);
|
|
line-height: 28px;
|
|
padding-left: 2px;
|
|
font-size: 14px;
|
|
font-weight:bold;
|
|
color:$black;
|
|
}
|
|
|
|
input[type="number"] {
|
|
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;
|
|
}
|
|
}
|
|
|
|
.col2,
|
|
.col2BL {
|
|
flex-wrap: wrap;
|
|
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="number"] {
|
|
width:100%;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border-top:1px solid $sombre;
|
|
border-bottom: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
}
|
|
}
|
|
|
|
.col2 {
|
|
width:calc(100% / 2);
|
|
}
|
|
|
|
.col2BL {
|
|
width:calc((100% / 2) - 1px);
|
|
border-left:1px solid $sombre;
|
|
}
|
|
|
|
input[type="hidden"].bonusCarac {
|
|
&[value="1"] {
|
|
|
|
& ~ div.titre {
|
|
button[type="action"].bonusCaracL1 {
|
|
box-shadow: 0px 0px 7px 0px #000000 inset;
|
|
}
|
|
}
|
|
|
|
& ~ div.bonusCarac {
|
|
display:flex;
|
|
|
|
select:first-of-type {
|
|
display:inline-block;
|
|
width:100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[value="2"] {
|
|
& ~ div.titre {
|
|
button[type="action"].bonusCaracL1,
|
|
button[type="action"].bonusCaracL2 {
|
|
box-shadow: 0px 0px 7px 0px #000000 inset;
|
|
}
|
|
}
|
|
|
|
& ~ div.bonusCarac {
|
|
display:flex;
|
|
|
|
select:first-of-type {
|
|
display:inline-block;
|
|
width:50%;
|
|
}
|
|
|
|
select:last-of-type {
|
|
display:inline-block;
|
|
width:50%;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.PE {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
div.ligneTitre {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
background:$clair;
|
|
|
|
span {
|
|
display:flex;
|
|
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.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.DRVehicule {
|
|
@include block($sombre);
|
|
|
|
.col2,
|
|
.col2BL {
|
|
width:calc(100% / 2);
|
|
flex-wrap: wrap;
|
|
background: $sombre;
|
|
|
|
span {
|
|
display:flex;
|
|
width:100%;
|
|
line-height: 28px;
|
|
font-size: 14px;
|
|
justify-content: center;
|
|
color: $white;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:100%;
|
|
text-align: center;
|
|
padding: 0px;
|
|
height: 28px;
|
|
border-top:1px solid $sombre;
|
|
border-bottom: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
}
|
|
}
|
|
|
|
.col2 {
|
|
span {
|
|
width:100%;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
.col2BL {
|
|
span {
|
|
width:calc(100% - 1px);
|
|
border-left:1px solid $clair;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:100%;
|
|
border-left:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armesVehicule {
|
|
$titre:(
|
|
"titre":(
|
|
"hasButton":true,
|
|
"hasBonusCarac":true
|
|
)
|
|
);
|
|
|
|
@include block($sombre);
|
|
@include titre($white, transparent, $titre);
|
|
@include buttonRoll();
|
|
|
|
div.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
div.ligneTitrePJ {
|
|
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.ligneTitreV {
|
|
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.armesListePJ {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
|
|
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.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 {
|
|
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": (
|
|
"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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.armesListeV {
|
|
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;
|
|
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;
|
|
}
|
|
|
|
& ~ 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
& ~ 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%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.notes {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.repcontainer {
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.repitem {
|
|
width:100%;
|
|
|
|
&:not(:first-of-type) {
|
|
border-top:1px solid $sombre;
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
div.col >* {
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
div.col3 {
|
|
margin-top:10px;
|
|
}
|
|
} |