mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
578 lines
15 KiB
SCSS
578 lines
15 KiB
SCSS
div.tabModules {
|
|
@include col(100%, calc((100% / 2) - 5px));
|
|
|
|
flex-wrap:wrap;
|
|
|
|
div.dataArmure {
|
|
@include block($sombre);
|
|
@include titre($white, transparent);
|
|
|
|
input[type="number"] {
|
|
width: 100%;
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
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.PES {
|
|
@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.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.information {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
display:flex;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
border-top:1px solid $clair;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
div.autoex {
|
|
textarea {
|
|
background:$clair;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.slots {
|
|
@include block($sombre);
|
|
@include titre($white);
|
|
|
|
width:100%;
|
|
justify-content: space-between;
|
|
margin-top:10px;
|
|
|
|
div.data {
|
|
display:none;
|
|
}
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
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.modulesListe {
|
|
@include titre($white, transparent);
|
|
@include extendModules();
|
|
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
margin-top:10px;
|
|
|
|
h1.titre {
|
|
display:flex;
|
|
}
|
|
|
|
.ligne {
|
|
width:100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
div.repitem {
|
|
@include block($sombre);
|
|
|
|
display:flex;
|
|
width: calc(50% - 10px);
|
|
justify-content: space-between;
|
|
align-self: flex-start;
|
|
|
|
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;
|
|
justify-content: space-between;
|
|
|
|
&.editmode {
|
|
.repitem {
|
|
width:100%;
|
|
|
|
&:nth-of-type(2) {
|
|
margin-top:10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.repcontrol {
|
|
background:none;
|
|
border:0px;
|
|
|
|
.btn {
|
|
border:1px solid $black;
|
|
}
|
|
}
|
|
}
|
|
} |