feat: improve character sheet
This commit is contained in:
parent
7b9acaab38
commit
5a71a0f467
5 changed files with 124 additions and 11 deletions
|
@ -1,3 +1,4 @@
|
||||||
|
@charset "UTF-8";
|
||||||
/*
|
/*
|
||||||
* 0. Palette and global colorization
|
* 0. Palette and global colorization
|
||||||
*
|
*
|
||||||
|
@ -604,6 +605,22 @@ mark {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Table elements */
|
/* Table elements */
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
table, th, td {
|
||||||
|
border: 0;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
vertical-align: center;
|
||||||
|
padding-top: 0.325em;
|
||||||
|
padding-bottom: 0.325em;
|
||||||
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
@ -977,6 +994,43 @@ ul.social li a:hover {
|
||||||
padding-bottom: 0.325rem;
|
padding-bottom: 0.325rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* CARD LIST - Make a list part of a card */
|
||||||
|
ul.card-list {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
ul.card-list li.list-element {
|
||||||
|
line-height: 1.5rem;
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
padding-left: 0.325rem;
|
||||||
|
padding-top: 0.325rem;
|
||||||
|
padding-bottom: 0.325rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-check li.list-element {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.list-check li.list-element::before {
|
||||||
|
font-family: "ForkAwesome";
|
||||||
|
content: "";
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
}
|
||||||
|
.list-cross li.list-element {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.list-cross li.list-element::before {
|
||||||
|
font-family: "ForkAwesome";
|
||||||
|
content: "";
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
}
|
||||||
|
.list-danger li.list-element::before {
|
||||||
|
color: #dc322f;
|
||||||
|
}
|
||||||
|
.list-success li.list-element::before {
|
||||||
|
color: #859900;
|
||||||
|
}
|
||||||
|
|
||||||
.smallcard, .toast {
|
.smallcard, .toast {
|
||||||
border-radius: 0px 0px 0px 0px;
|
border-radius: 0px 0px 0px 0px;
|
||||||
background-color: #eee8d5;
|
background-color: #eee8d5;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -130,21 +130,21 @@
|
||||||
|
|
||||||
<div class="card card-success personnage-aime">
|
<div class="card card-success personnage-aime">
|
||||||
<h2 class="card-header">Aime</h2>
|
<h2 class="card-header">Aime</h2>
|
||||||
<ul class="card-menu">
|
<ul class="card-list list-success list-check">
|
||||||
<li class="menu-element">Se balader</li>
|
<li class="list-element">Se balader</li>
|
||||||
<li class="menu-element">Manger</li>
|
<li class="list-element">Manger</li>
|
||||||
<li class="menu-element">Se cacher</li>
|
<li class="list-element">Se cacher</li>
|
||||||
<li class="menu-element">Être happy de la vie</li>
|
<li class="list-element">Être happy de la vie</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card card-danger personnage-dete">
|
<div class="card card-danger personnage-dete">
|
||||||
<h2 class="card-header">N'aime pas</h2>
|
<h2 class="card-header">N'aime pas</h2>
|
||||||
<ul class="card-menu">
|
<ul class="card-list list-danger list-cross">
|
||||||
<li class="menu-element">Se faire poursuivre</li>
|
<li class="list-element">Se faire poursuivre</li>
|
||||||
<li class="menu-element">L'empire</li>
|
<li class="list-element">L'empire</li>
|
||||||
<li class="menu-element">La guerre</li>
|
<li class="list-element">La guerre</li>
|
||||||
<li class="menu-element">Réussir à s'enfermer dans un coffre :<</li>
|
<li class="list-element">Réussir à s'enfermer dans un coffre :<</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -119,6 +119,49 @@ $card-smallpad: 0.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* CARD LIST - Make a list part of a card */
|
||||||
|
|
||||||
|
|
||||||
|
@mixin list-symbol($symbol) {
|
||||||
|
li.list-element {
|
||||||
|
list-style: none;
|
||||||
|
&::before {
|
||||||
|
font-family: "ForkAwesome";
|
||||||
|
content:$symbol;
|
||||||
|
padding-right:0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin list-color($color) {
|
||||||
|
li.list-element {
|
||||||
|
&::before {
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.card-list {
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
li.list-element {
|
||||||
|
line-height:1.5rem;
|
||||||
|
padding-right:0.75rem;
|
||||||
|
padding-left:0.325rem;
|
||||||
|
padding-top:0.325rem;
|
||||||
|
padding-bottom:0.325rem;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
&-check {@include list-symbol("\f00c");}
|
||||||
|
&-cross {@include list-symbol("\f00d");}
|
||||||
|
|
||||||
|
&-danger{@include list-color($color-danger);}
|
||||||
|
&-success{@include list-color($color-success);}
|
||||||
|
}
|
||||||
|
|
||||||
.smallcard, .toast {
|
.smallcard, .toast {
|
||||||
@include card($card-smallpad);
|
@include card($card-smallpad);
|
||||||
&-header {
|
&-header {
|
||||||
|
|
|
@ -299,6 +299,22 @@ mark {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
table, th, td {
|
||||||
|
border: 0;
|
||||||
|
padding:0px;
|
||||||
|
margin:0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
vertical-align:center;
|
||||||
|
padding-top: 0.325em;
|
||||||
|
padding-bottom: 0.325em;
|
||||||
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
font-weight: $fontweight_hyper;
|
font-weight: $fontweight_hyper;
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue