Files
roll20-character-sheets-tester/Knight/scss/files/tabs/historique.scss
T

421 lines
9.8 KiB
SCSS

div.tabHistorique {
@include col(100%, calc((100% / 2) - 5px));
div.experience,
div.gloire {
@include block($sombre);
@include titre($white);
justify-content: space-between;
h1.titre {
display:flex;
}
.col3,
.col3BL {
display:flex;
background:$clair;
flex-wrap: wrap;
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"] {
border-top:1px solid $sombre;
width: 100%;
text-align: center;
padding: 0px;
height: 28px;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
border-top:1px solid $sombre;
}
}
.col3 {
width:calc(100% / 3);
}
.col3BL {
width:calc((100% / 3) - 1px);
border-left:1px solid $sombre;
}
}
div.avantageInconvenient {
@include block($sombre);
@include titre($white);
@include extendModules(false);
h1.titre {
display:flex;
}
div.repcontainer{
width:100%;
flex-wrap: wrap;
justify-content: space-between;
}
div.repitem {
width:100%;
flex-wrap: wrap;
div.ligneTitre {
display:flex;
width:100%;
input[type="text"] {
width: calc(100% - 28px);
height:29px;
text-align: center;
background: $white;
color: $black;
font-variant: small-caps;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 25px;
border:0px;
}
}
div.autoex {
display:none;
border-top:1px solid $sombre;
}
input[type="hidden"] {
&[value="0"] {
& ~ div button[type="action"] span.plus {
display:flex;
}
}
&[value="1"] {
& ~ div.autoex {
display:flex;
}
& ~ div button[type="action"] span.moins {
display:flex;
}
}
}
&:first-of-type {
div.ligneTitre {
border-top:1px solid $white;
}
}
&:not(:first-of-type) {
div.ligneTitre {
button[type="action"] {
border-top:1px solid $white;
}
input[type="text"] {
border-top:1px solid $sombre;
}
}
}
}
}
div.langues {
@include block($sombre);
@include titre($white);
h1.titre {
display:flex;
}
.repcontainer {
width:100%;
flex-wrap: wrap;
}
.repitem {
width:100%;
input[type="text"] {
width: 100%;
border: 0px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
height: 28px;
padding-left: 2px;
}
&:not(:first-of-type) {
border-top:1px solid $sombre;
}
}
}
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.contact {
$titre:(
"titre":(
"hasButton":true
)
);
@include block($sombre);
@include titre($white, transparent, $titre);
div.titre,
h1.titre {
display:flex;
}
input[type="number"] {
width: 40px;
height: 28px;
text-align: center;
padding: 0px;
border: 0px;
z-index: 50;
margin-left:auto;
}
.repcontainer {
width:100%;
flex-wrap: wrap;
}
.repitem {
width:100%;
&:not(:first-of-type) {
border-top:1px solid $sombre;
}
}
}
div.blessuresGraves {
$titre:(
"titre":(
"hasButton":true
)
);
@include block($sombre);
@include titre($white, transparent, $titre);
@include buttonRoll();
@include extendModules(false);
div.titre,
h1.titre {
display:flex;
}
div.repcontainer{
width:100%;
flex-wrap: wrap;
justify-content: space-between;
}
div.repitem {
width:100%;
flex-wrap: wrap;
div.ligneTitre {
display:flex;
width:100%;
justify-content: space-between;
border-top:1px solid $white;
input[type="text"] {
width: calc(100% - 28px);
height:28px;
text-align: center;
background: $white;
color: $black;
font-variant: small-caps;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 25px;
border:0px;
}
}
div.autoex {
display:none;
border-top:1px solid $sombre;
}
input[type="hidden"] {
&[value="0"] {
& ~ div button[type="action"] span.plus {
display:flex;
}
}
&[value="1"] {
& ~ div.autoex {
display:flex;
}
& ~ div button[type="action"] span.moins {
display:flex;
}
}
}
&:first-of-type {
div.ligneTitre {
border-top:1px solid $white;
}
}
&:not(:first-of-type) {
div.ligneTitre {
button[type="action"] {
border-top:1px solid $white;
}
input[type="text"] {
border-top:1px solid $sombre;
}
}
}
}
}
div.traumas {
$titre:(
"titre":(
"hasButton":true
)
);
@include block($sombre);
@include titre($white, transparent, $titre);
@include buttonRoll();
@include extendModules(false);
div.titre,
h1.titre {
display:flex;
}
div.data {
display:none;
}
div.repcontainer{
width:100%;
flex-wrap: wrap;
justify-content: space-between;
}
div.repitem {
width:100%;
flex-wrap: wrap;
div.ligneTitre {
display:flex;
width:100%;
justify-content: space-between;
input[type="text"] {
width: calc(100% - 28px);
height:28px;
text-align: center;
background: $white;
color: $black;
font-variant: small-caps;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 25px;
border:0px;
}
}
div.autoex {
display:none;
border-top:1px solid $sombre;
}
input[type="hidden"] {
&[value="0"] {
& ~ div button[type="action"] span.plus {
display:flex;
}
}
&[value="1"] {
& ~ div.autoex {
display:flex;
}
& ~ div button[type="action"] span.moins {
display:flex;
}
}
}
&:first-of-type {
div.ligneTitre {
border-top:1px solid $white;
}
}
&:not(:first-of-type) {
div.ligneTitre {
button[type="action"] {
border-top:1px solid $white;
}
input[type="text"] {
border-top:1px solid $sombre;
}
}
}
}
}
div.col >* {
margin-bottom:10px;
}
}