RatasEnLasParedes, refactor to CSE & SCSS, update visuals
This commit is contained in:
Andreas Johansson
@@ -1,313 +1,237 @@
|
||||
/* FONDO DE FICHA */
|
||||
/*@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');*/
|
||||
/*@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');*/
|
||||
|
||||
/* FONDO DE FICHA */
|
||||
div.sheet-mainBg {
|
||||
height: 100%;
|
||||
width: 700px;
|
||||
background: url("https://i.imgur.com/0tA6R9M.jpg");
|
||||
background-size: cover;
|
||||
border: 2px solid #2F5860;
|
||||
border-radius: 10px;
|
||||
padding: 6px 0px 6px 0px;
|
||||
}
|
||||
|
||||
|
||||
/* TIPOGRAFIAS */
|
||||
@font-face {
|
||||
font-family: '!PaulMaul';
|
||||
src: local('!PaulMaul.ttf'),
|
||||
url(!PaulMaul.woff2) format('woff2'),
|
||||
url(!PaulMaul.woff) format('woff'),
|
||||
url(!PaulMaul.ttf) format('truetype'),
|
||||
url(!PaulMaul.otf) format('opentype'),
|
||||
url(!PaulMaul.eot) format('embedded-opentype');
|
||||
font-family: "!PaulMaul";
|
||||
src: local("!PaulMaul.ttf"), url(!PaulMaul.woff2) format("woff2"), url(!PaulMaul.woff) format("woff"), url(!PaulMaul.ttf) format("truetype"), url(!PaulMaul.otf) format("opentype"), url(!PaulMaul.eot) format("embedded-opentype");
|
||||
}
|
||||
.charsheet div.mainBg {
|
||||
height: 100%;
|
||||
width: 700px;
|
||||
background: url("https://i.imgur.com/0tA6R9M.jpg");
|
||||
background-size: cover;
|
||||
border: 2px solid #2F5860;
|
||||
border-radius: 10px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
.charsheet img.logo {
|
||||
width: 341px;
|
||||
height: 165px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.charsheet .section-block {
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
.charsheet .float-right {
|
||||
float: right;
|
||||
}
|
||||
.charsheet .float-left {
|
||||
float: left;
|
||||
}
|
||||
.charsheet .center {
|
||||
text-align: center;
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
float: right;
|
||||
font-family: "Shadows Into Light";
|
||||
color: blue;
|
||||
font-size: 18px;
|
||||
font-weight: bolder;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.charsheet .separatorVertical {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.charsheet .separatorVerticalInicio {
|
||||
display: flex;
|
||||
margin: 6px 0px;
|
||||
height: 40px;
|
||||
}
|
||||
.charsheet .separatorVerticalGrande {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
.charsheet .separatorVerticalGrande2 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.charsheet .separatorVerticalGrande3 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.charsheet input[type=number] {
|
||||
text-align: center;
|
||||
}
|
||||
.charsheet input[type=text].wid50 {
|
||||
width: 50%;
|
||||
}
|
||||
.charsheet button[type=roll].blank-roll-button::before {
|
||||
color: red;
|
||||
content: "";
|
||||
}
|
||||
.charsheet button[type=roll] {
|
||||
background: none;
|
||||
border: 1px solid black;
|
||||
font-style: normal;
|
||||
color: black;
|
||||
content: "";
|
||||
}
|
||||
.charsheet button[type=roll] span.d6 {
|
||||
font-family: "dicefontd6";
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.charsheet button[type=roll]:hover {
|
||||
background: #a6a6a6;
|
||||
}
|
||||
.charsheet button[type=roll]:before {
|
||||
content: "";
|
||||
}
|
||||
.charsheet .labelCentro {
|
||||
font-family: "veteran typewriter";
|
||||
color: black;
|
||||
text-align: center;
|
||||
}
|
||||
.charsheet .labelCentral {
|
||||
font-family: "veteran typewriter";
|
||||
font-size: 20px;
|
||||
}
|
||||
.charsheet .labelPeque {
|
||||
font-family: "veteran typewriter";
|
||||
color: black;
|
||||
text-align: center;
|
||||
font-weight: lighter;
|
||||
margin-right: 3px;
|
||||
margin-left: 5px;
|
||||
display: inline;
|
||||
}
|
||||
.charsheet .label {
|
||||
font-family: "veteran typewriter";
|
||||
color: black;
|
||||
display: inline-block;
|
||||
padding: 0.8%;
|
||||
margin-right: -0.5%;
|
||||
font-size: 20px;
|
||||
font-weight: Normal;
|
||||
text-align: center;
|
||||
display: inline;
|
||||
}
|
||||
.charsheet div.nombre label.label {
|
||||
padding-top: 11px;
|
||||
width: 150px;
|
||||
}
|
||||
.charsheet div.skills label.label {
|
||||
padding-left: 35px;
|
||||
}
|
||||
.charsheet div.salud {
|
||||
text-align: center;
|
||||
}
|
||||
.charsheet h4 {
|
||||
/* DAÑO */
|
||||
border-radius: 35px 0px 35px 0px;
|
||||
-moz-border-radius: 35px 0px 35px 0px;
|
||||
-webkit-border-radius: 35px 0px 35px 0px;
|
||||
text-align: center;
|
||||
background-image: url("https://i.imgur.com/vNVTYig.png");
|
||||
padding-left: 5px;
|
||||
width: 70%;
|
||||
margin-left: 150px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
.charsheet h4 div.flex-column {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.charsheet h4 div.flex-column label {
|
||||
width: 120px;
|
||||
padding-left: 20px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.charsheet div.notes .note-bg {
|
||||
background: url("https://i.imgur.com/Gjsmgoo.jpg");
|
||||
width: 95%;
|
||||
}
|
||||
.charsheet div.notes .note-left {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.charsheet div.notes .recursos {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.charsheet div.notes .armasEquipo {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.charsheet div.notes label.label {
|
||||
margin-left: 65px;
|
||||
}
|
||||
.charsheet div.notes textarea {
|
||||
width: calc(100% - 70px);
|
||||
height: 90px;
|
||||
resize: none;
|
||||
background: transparent;
|
||||
margin-left: 52px;
|
||||
font-family: "Shadows Into Light";
|
||||
color: blue;
|
||||
font-size: 18px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.charsheet div.notes textarea:hover {
|
||||
background: rgba(217, 217, 217, 0.6);
|
||||
}
|
||||
|
||||
.sheet-center {
|
||||
text-align: center;
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
float: right;
|
||||
font-family: 'Shadows Into Light';
|
||||
color: blue;
|
||||
font-size: 18px;
|
||||
font-weight: bolder;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sheet-separatorVertical {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.sheet-separatorVerticalInicio {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sheet-separatorVerticalGrande {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.sheet-separatorVerticalGrande2 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.sheet-separatorVerticalGrande3 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: calc(100% - 70px);
|
||||
height: 90px;
|
||||
resize: none;
|
||||
background: transparent;
|
||||
margin-left: 45px;
|
||||
font-family:'Shadows Into Light';
|
||||
color: blue;
|
||||
font-size: 18px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
input[type="number"]{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sheet-izquierda {
|
||||
height: 50%;
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.sheet-izquierda2 {
|
||||
float: left;
|
||||
background: url("https://i.imgur.com/Gjsmgoo.jpg");
|
||||
}
|
||||
|
||||
.sheet-derecha {
|
||||
height: 50%;
|
||||
float: right;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.sheet-margin-top {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.sheet-margin-bottom {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.sheet-margin-left {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.sheet-margin-right {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.sheet-separate{
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* ETIQUETAS */
|
||||
.sheet-labelCentro {
|
||||
font-family: 'veteran typewriter';
|
||||
color: black;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.sheet-labelCentral{
|
||||
font-family: 'veteran typewriter';
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sheet-labelPeque {
|
||||
font-family: 'veteran typewriter';
|
||||
color: black;
|
||||
text-align: center;
|
||||
font-weight: lighter;
|
||||
margin-right: 3px;
|
||||
margin-left: 5px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
.sheet-label {
|
||||
font-family: 'veteran typewriter';
|
||||
color: black;
|
||||
display: inline-block;
|
||||
padding: 0.8%;
|
||||
margin-right: -.5%;
|
||||
font-size: 20px;
|
||||
font-weight: Normal;
|
||||
text-align: center;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
/* DAÑO */
|
||||
.sheet-section-Armas {
|
||||
float: left;
|
||||
}
|
||||
|
||||
h4 {
|
||||
border-radius: 35px 0px 35px 0px;
|
||||
-moz-border-radius: 35px 0px 35px 0px;
|
||||
-webkit-border-radius: 35px 0px 35px 0px;
|
||||
text-align: center;
|
||||
background-image: url("https://i.imgur.com/vNVTYig.png");
|
||||
padding-left: 5px;
|
||||
width: 70%;
|
||||
margin-left: 150px;
|
||||
}
|
||||
|
||||
.sheet-Salud {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* RECURSOS */
|
||||
.sheet-section-recursos {
|
||||
float: left;
|
||||
background: url("https://i.imgur.com/Gjsmgoo.jpg");
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.sheet-section-recursos input {
|
||||
margin-left: 40px;
|
||||
width: calc(100% - 102px);
|
||||
}
|
||||
|
||||
/* HECHIZOS */
|
||||
.sheet-section-recursos2 {
|
||||
float: left;
|
||||
background: url("https://i.imgur.com/Gjsmgoo.jpg");
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
/* HECHIZOS */
|
||||
.sheet-section-hechizos {
|
||||
float: left;
|
||||
background: url("https://i.imgur.com/Gjsmgoo.jpg");
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 5px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.sheet-section-hechizos input {
|
||||
margin-left: 55px;
|
||||
width: calc(100% - 102px);
|
||||
}
|
||||
|
||||
/* ARMAS Y EQUIPO */
|
||||
.sheet-section-armasEquipo {
|
||||
float: right;
|
||||
background: url("https://i.imgur.com/Gjsmgoo.jpg");
|
||||
margin-right: 15px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.sheet-section-armasEquipo input {
|
||||
margin-left: 40px;
|
||||
width: calc(100% - 102px);
|
||||
}
|
||||
|
||||
/* CICATRICES */
|
||||
.sheet-section-cicatrices {
|
||||
float: right;
|
||||
background: url("https://i.imgur.com/Gjsmgoo.jpg");
|
||||
margin-right: 15px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.sheet-section-cicatrices input {
|
||||
margin-left: 40px;
|
||||
width: calc(100% - 102px);
|
||||
}
|
||||
|
||||
button[type=roll].sheet-blank-roll-button::before {
|
||||
color: red;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.charsheet button {
|
||||
background: none;
|
||||
font-size: 1.1em !important;
|
||||
border: 1px solid black;
|
||||
font-style: normal;
|
||||
color: black;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.charsheet button:hover {
|
||||
background: #a6a6a6;
|
||||
}
|
||||
|
||||
.charsheet button[type=roll]: before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
/* PLANTILLA */
|
||||
.sheet-rolltemplate-RELP .sheet-rt-title {
|
||||
font-size: 2em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-RELP .sheet-backg {
|
||||
background: url(https://i.imgur.com/SJdfgIn.png) top left;
|
||||
background-size: 90%;
|
||||
background-repeat: no-repeat;
|
||||
border-spacing: 0;
|
||||
padding: 50px 40px 60px 15px;
|
||||
background: url(https://i.imgur.com/SJdfgIn.png) top left;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
border-spacing: 0;
|
||||
display: flex;
|
||||
place-content: center;
|
||||
flex-flow: nowrap column;
|
||||
background-position: top -48px left -4px;
|
||||
height: 150px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-RELP .sheet-center {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-RELP .sheet-header1 {
|
||||
|
||||
color : blue;
|
||||
font-size: 22px;
|
||||
font-family: 'veteran typewriter';
|
||||
letter-spacing:0.5px;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 10px;
|
||||
|
||||
color: blue;
|
||||
font-size: 22px;
|
||||
font-family: "veteran typewriter";
|
||||
letter-spacing: 0.5px;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-RELP .sheet-header2 {
|
||||
background-color: transparent;
|
||||
color : black;
|
||||
font-size: 18px;
|
||||
font-family: 'veteran typewriter';
|
||||
letter-spacing:1px;
|
||||
font-weight: bolder;
|
||||
margin-bottom: 10px;
|
||||
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
font-size: 18px;
|
||||
font-family: "veteran typewriter";
|
||||
letter-spacing: 1px;
|
||||
font-weight: bolder;
|
||||
margin-bottom: 10px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-RELP .sheet-body1 {
|
||||
|
||||
color : #212f3d ;
|
||||
font-size: 30px;
|
||||
font-family: 'Shadows Into Light';
|
||||
padding:15px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
color: #212f3d;
|
||||
font-size: 30px;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sheet-rolltemplate-RELP .inlinerollresult {
|
||||
font-size: 1.5em;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.sheet-rolltemplate-RELP .inlinerollresult.fullcrit {
|
||||
border: 5px solid #3FB315;
|
||||
}
|
||||
.sheet-rolltemplate-RELP .inlinerollresult.fullfail {
|
||||
border: 5px solid #B31515;
|
||||
}
|
||||
.sheet-rolltemplate-RELP .inlinerollresult.importantroll {
|
||||
border: 5px solid #4A57ED;
|
||||
}
|
||||
|
||||
@@ -1,127 +1,117 @@
|
||||
<div class="mainBg">
|
||||
<div class="section-block float-left nombre">
|
||||
<div class="separatorVerticalInicio">
|
||||
<label class="label">NOMBRE:</label><input class="center wid50" type="text" name="attr_character_name"><br/>
|
||||
</div>
|
||||
<div class="separatorVerticalInicio">
|
||||
<label class="label">PROFESION:</label><input class="center wid50" type="text" name="attr_character_profession"><br/>
|
||||
<br/>
|
||||
</div>
|
||||
<div class="separatorVerticalGrande">
|
||||
<label class="label">REPUTACION:</label><input class="center wid50" type="text" name="attr_character_reputation"><br/>
|
||||
</div>
|
||||
|
||||
<div class="sheet-mainBg">
|
||||
<div class="sheet-izquierda">
|
||||
<div class="sheet-separatorVerticalInicio">
|
||||
<label class="sheet-label">NOMBRE:</label><input class="sheet-center" type="text" name="attr_character_name" style="width: 50%;"><br/>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="sheet-separatorVerticalInicio">
|
||||
<label class="sheet-label">PROFESION:</label><input class="sheet-center" type="text" name="attr_character_profession" style="width: 50%;"><br/>
|
||||
<br/>
|
||||
</div>
|
||||
<div class="sheet-separatorVerticalGrande">
|
||||
<label class="sheet-label">REPUTACION:</label><input class="sheet-center" type="text" name="attr_character_reputation" style="width: 50%;"><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-block float-right">
|
||||
<img class="logo" alt="" src="https://i.imgur.com/C6jKqDq.png">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="sheet-derecha">
|
||||
<div class="sheet-separatorVerticalGrande2">
|
||||
<img style="width: 308px; height: 159px;" alt="" src="https://i.imgur.com/C6jKqDq.png"><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-block float-left skills">
|
||||
<div class="separatorVertical">
|
||||
<label class="label">DESTREZA:</label><input name="attr_des" title="@{des}" style="margin-left: 11px;" type="number" value="0" min="0">
|
||||
<button name="roll_DESTREZA" class="blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=DESTREZA}} {{roll=[[2d6+?{modificador|0}+@{des}]]}}" ><span class="d6">Lr</span></button>
|
||||
</div>
|
||||
<div class="separatorVertical">
|
||||
<label class="label">INGENIO:</label><input name="attr_ing" title="@{ing}" style="margin-left: 30px;" type="number" value="0" min="0">
|
||||
<button name="roll_INGENIO" class="blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=INGENIO}} {{roll=[[2d6+?{modificador|0}+@{ing}]]}}" ><span class="d6">Lr</span></button>
|
||||
</div>
|
||||
<div class="separatorVertical">
|
||||
<label class="label">MUSCULO:</label><input name="attr_mus" title="@{mus}" style="margin-left: 16px;" type="number" value="0" min="0">
|
||||
<button name="roll_MUSCULO" class="blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=MUSCULO}} {{roll=[[2d6+?{modificador|0}+@{mus}]]}}" ><span class="d6">Lr</span></button>
|
||||
</div>
|
||||
<div class="separatorVertical">
|
||||
<label class="label">VIOLENCIA:</label><input name="attr_vio" title="@{vio}" style="margin-left: 5px;" type="number" value="0" min="0">
|
||||
<button name="roll_VIOLENCIA" class="blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=VIOLENCIA}} {{roll=[[2d6+?{modificador|0}+@{vio}]]}}" ><span class="d6">Lr</span></button>
|
||||
</div>
|
||||
<div class="separatorVerticalGrande3">
|
||||
<label class="label">VOLUNTAD:</label><input name="attr_vol" title="@{vol}" style="margin-left: 5px;" type="number" value="0" min="0">
|
||||
<button name="roll_VOLUNTAD" class="blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=VOLUNTAD}} {{roll=[[2d6+?{modificador|0}+@{vol}]]}}" ><span class="d6">Lr</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-block float-right salud">
|
||||
<div class="separatorVertical">
|
||||
<label class="label">PV:</label>
|
||||
<input name="attr_pv1" type="number" value="0" min="0">
|
||||
<label class="label">/</label>
|
||||
<input name="attr_pv2" type="number" value="0" min="0">
|
||||
</div>
|
||||
<div class="separatorVertical">
|
||||
<label class="label">PC:</label>
|
||||
<input name="attr_pc1" type="number" value="0" min="0">
|
||||
<label class="label">/</label>
|
||||
<input name="attr_pc2" type="number" value="0" min="0">
|
||||
</div>
|
||||
<div class="separatorVerticalGrande3">
|
||||
<label class="label">PE:</label>
|
||||
<input name="attr_pe" type="number" value="0" min="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div>
|
||||
<label class="labelCentral">DAÑO</label>
|
||||
<h4>
|
||||
<div class="flex-column">
|
||||
<label class="labelPeque">Armas 1 Mano</label>
|
||||
<button name="roll_1D6" class="blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=ARMA A 1 MANO}} {{roll=[[{1d6}]]}}"><span class="d6">L</button>
|
||||
<label class="labelPeque">Armas 2 Manos</span></label>
|
||||
<button name="roll_2D6" class="blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=ARMA A 2 MANOS}} {{roll=[[{2d6}]]}}"><span class="d6">Lf</button>
|
||||
</div>
|
||||
<div class="flex-column">
|
||||
<label class="labelPeque">Armas Grandes</span></label>
|
||||
<button name="roll_3D6" class="blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=ARMAS GRANDES}} {{roll=[[{3d6}]]}}"><span class="d6">LfL</button>
|
||||
</div>
|
||||
</h4>
|
||||
<br>
|
||||
</div>
|
||||
<div class="section-block float-left notes">
|
||||
<div class="recursos float-left note-bg note-left">
|
||||
<label class="label">RECURSOS</label>
|
||||
<textarea name="attr_resources"></textarea>
|
||||
</div>
|
||||
<div class="float-left note-bg note-left">
|
||||
<label class="label">HECHIZOS</label>
|
||||
<textarea name="attr_spells"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sheet-izquierda">
|
||||
<div class="sheet-separatorVertical">
|
||||
<label class="sheet-label">DESTREZA:</label><input name="attr_des" title="@{des}" style="margin-left: 11px;" type="number" value="0" min="0">
|
||||
<button name="roll_DESTREZA" class="sheet-blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=DESTREZA}} {{roll=[[2d6+?{modificador|0}+@{des}]]}}" ><span style="font-family: 'dicefontd6'">Lr</span></button>
|
||||
</div>
|
||||
<div class="sheet-separatorVertical">
|
||||
<label class="sheet-label">INGENIO:</label><input name="attr_ing" title="@{ing}" style="margin-left: 30px;" type="number" value="0" min="0">
|
||||
<button name="roll_INGENIO" class="sheet-blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=INGENIO}} {{roll=[[2d6+?{modificador|0}+@{ing}]]}}" ><span style="font-family: 'dicefontd6'">Lr</span></button>
|
||||
</div>
|
||||
<div class="sheet-separatorVertical">
|
||||
<label class="sheet-label">MUSCULO:</label><input name="attr_mus" title="@{mus}" style="margin-left: 16px;" type="number" value="0" min="0">
|
||||
<button name="roll_MUSCULO" class="sheet-blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=MUSCULO}} {{roll=[[2d6+?{modificador|0}+@{mus}]]}}" ><span style="font-family: 'dicefontd6'">Lr</span></button>
|
||||
</div>
|
||||
<div class="sheet-separatorVertical">
|
||||
<label class="sheet-label">VIOLENCIA:</label><input name="attr_vio" title="@{vio}" style="margin-left: 5px;" type="number" value="0" min="0">
|
||||
<button name="roll_VIOLENCIA" class="sheet-blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=VIOLENCIA}} {{roll=[[2d6+?{modificador|0}+@{vio}]]}}" ><span style="font-family: 'dicefontd6'">Lr</span></button>
|
||||
</div>
|
||||
<div class="sheet-separatorVerticalGrande3">
|
||||
<label class="sheet-label">VOLUNTAD:</label><input name="attr_vol" title="@{vol}" style="margin-left: 5px;" type="number" value="0" min="0">
|
||||
<button name="roll_VOLUNTAD" class="sheet-blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=VOLUNTAD}} {{roll=[[2d6+?{modificador|0}+@{vol}]]}}" ><span style="font-family: 'dicefontd6'">Lr</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sheet-derecha">
|
||||
<div class="sheet-Salud">
|
||||
<div class="sheet-separatorVertical">
|
||||
<label class="sheet-label">PV:</label>
|
||||
<input name="attr_pv1" type="number" value="0" min="0">
|
||||
<label class="sheet-label">/</label>
|
||||
<input name="attr_pv2" type="number" value="0" min="0">
|
||||
</div>
|
||||
<div class="sheet-separatorVertical">
|
||||
<label class="sheet-label">PC:</label>
|
||||
<input name="attr_pc1" type="number" value="0" min="0">
|
||||
<label class="sheet-label">/</label>
|
||||
<input name="attr_pc2" type="number" value="0" min="0">
|
||||
</div>
|
||||
<div class="sheet-separatorVerticalGrande3">
|
||||
<label class="sheet-label">PE:</label>
|
||||
<input name="attr_pe" type="number" value="0" min="0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sheet-section-Armas">
|
||||
<label class="sheet-labelCentral">DAÑO</label>
|
||||
<br/>
|
||||
<h4>
|
||||
<label class="sheet-labelPeque">Armas 1 Mano</label>
|
||||
<button name="roll_1D6" class="sheet-blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=ARMA A 1 MANO}} {{roll=[[{1d6}]]}}"><span style="font-family: 'dicefontd6'">L</button>
|
||||
<label class="sheet-labelPeque">Armas 2 Manos</span></label>
|
||||
<button name="roll_2D6" class="sheet-blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=ARMA A 2 MANOS}} {{roll=[[{2d6}]]}}"><span style="font-family: 'dicefontd6'">Lf</button>
|
||||
<label class="sheet-labelPeque">Armas Grandes</span></label>
|
||||
<button name="roll_3D6" class="sheet-blank-roll-button" type="roll" value="&{template:RELP} {{title=@{character_name}}} {{subheader=ARMAS GRANDES}} {{roll=[[{3d6}]]}}"><span style="font-family: 'dicefontd6'">LfL</button>
|
||||
</h4>
|
||||
<br>
|
||||
</div>
|
||||
<div class="sheet-izquierda">
|
||||
<div class="sheet-section-recursos2">
|
||||
<label class="sheet-label">RECURSOS</label>
|
||||
<textarea name="attr_resources"></textarea>
|
||||
</div>
|
||||
<div class="sheet-section-hechizos">
|
||||
<label class="sheet-label">HECHIZOS</label>
|
||||
<textarea name="attr_spells"></textarea>
|
||||
</div> <!-- .section-hechizos -->
|
||||
</div>
|
||||
<div class="sheet-derecha">
|
||||
<div class="sheet-section-armasEquipo">
|
||||
<label class="sheet-label">ARMAS Y EQUIPO</label>
|
||||
<textarea name="attr_armaequipo"></textarea>
|
||||
</div> <!-- .section-armasEquipo -->
|
||||
<div class="sheet-separatorVertical">
|
||||
<div class="sheet-section-cicatrices">
|
||||
<label class="sheet-label">CICATRICES</label>
|
||||
<textarea name="attr_cicatrices"></textarea>
|
||||
</div> <!-- .section-cicatrices -->
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<p>.</p>
|
||||
<div class="section-block float-right notes">
|
||||
<div class="armasEquipo float-right note-bg">
|
||||
<label class="label">ARMAS Y EQUIPO</label>
|
||||
<textarea name="attr_armaequipo"></textarea>
|
||||
</div>
|
||||
<div class="separatorVertical">
|
||||
<div class="float-right note-bg">
|
||||
<label class="label">CICATRICES</label>
|
||||
<textarea name="attr_cicatrices"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<p>.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<rolltemplate class="sheet-rolltemplate-RELP">
|
||||
<div class="sheet-backg sheet-center">
|
||||
|
||||
<div class="sheet-center sheet-header1" style="margin-top:-5px">
|
||||
{{title}}
|
||||
<div class="sheet-center sheet-header1">
|
||||
{{title}}
|
||||
</div>
|
||||
<div class="sheet-center sheet-header2">
|
||||
{{subheader}}
|
||||
</div>
|
||||
{{#roll}}
|
||||
<div class="sheet-center sheet-body1">
|
||||
{{roll}}
|
||||
</div>
|
||||
<div class="sheet-center sheet-header2">
|
||||
{{subheader}}
|
||||
</div>
|
||||
|
||||
|
||||
{{#roll}}
|
||||
<div class="sheet-center sheet-body1">
|
||||
{{roll}}
|
||||
</div>
|
||||
{{/roll}}
|
||||
|
||||
|
||||
{{/roll}}
|
||||
</div>
|
||||
</rolltemplate>
|
||||
</rolltemplate>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 889 KiB After Width: | Height: | Size: 439 KiB |
@@ -0,0 +1,300 @@
|
||||
// FONDO DE FICHA
|
||||
// @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');*/
|
||||
// @import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');*/
|
||||
|
||||
// TIPOGRAFIAS
|
||||
@font-face {
|
||||
font-family: '!PaulMaul';
|
||||
src: local('!PaulMaul.ttf'),
|
||||
url(!PaulMaul.woff2) format('woff2'),
|
||||
url(!PaulMaul.woff) format('woff'),
|
||||
url(!PaulMaul.ttf) format('truetype'),
|
||||
url(!PaulMaul.otf) format('opentype'),
|
||||
url(!PaulMaul.eot) format('embedded-opentype');
|
||||
}
|
||||
|
||||
.charsheet{
|
||||
|
||||
div.mainBg {
|
||||
height: 100%;
|
||||
width: 700px;
|
||||
background: url("https://i.imgur.com/0tA6R9M.jpg");
|
||||
background-size: cover;
|
||||
border: 2px solid #2F5860;
|
||||
border-radius: 10px;
|
||||
padding: 6px 10px;
|
||||
|
||||
}
|
||||
img.logo{
|
||||
width: 341px;
|
||||
height: 165px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-block{
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
float: right;
|
||||
font-family: 'Shadows Into Light';
|
||||
color: blue;
|
||||
font-size: 18px;
|
||||
font-weight: bolder;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.separatorVertical {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.separatorVerticalInicio {
|
||||
display: flex;
|
||||
margin: 6px 0px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.separatorVerticalGrande {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.separatorVerticalGrande2 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.separatorVerticalGrande3 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
input[type="number"]{
|
||||
text-align: center;
|
||||
}
|
||||
input[type="text"].wid50{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
button[type=roll].blank-roll-button::before {
|
||||
color: red;
|
||||
content: '';
|
||||
}
|
||||
|
||||
button[type=roll] {
|
||||
background: none;
|
||||
border: 1px solid black;
|
||||
font-style: normal;
|
||||
color: black;
|
||||
content: '';
|
||||
|
||||
span.d6{
|
||||
font-family: 'dicefontd6';
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
button[type=roll]:hover {
|
||||
background: #a6a6a6;
|
||||
}
|
||||
|
||||
button[type=roll]:before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ETIQUETAS
|
||||
.labelCentro {
|
||||
font-family: 'veteran typewriter';
|
||||
color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.labelCentral{
|
||||
font-family: 'veteran typewriter';
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.labelPeque {
|
||||
font-family: 'veteran typewriter';
|
||||
color: black;
|
||||
text-align: center;
|
||||
font-weight: lighter;
|
||||
margin-right: 3px;
|
||||
margin-left: 5px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
.label {
|
||||
font-family: 'veteran typewriter';
|
||||
color: black;
|
||||
display: inline-block;
|
||||
padding: 0.8%;
|
||||
margin-right: -.5%;
|
||||
font-size: 20px;
|
||||
font-weight: Normal;
|
||||
text-align: center;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
div.nombre label.label{
|
||||
padding-top: 11px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
div.skills label.label{
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
div.salud {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h4 {
|
||||
/* DAÑO */
|
||||
border-radius: 35px 0px 35px 0px;
|
||||
-moz-border-radius: 35px 0px 35px 0px;
|
||||
-webkit-border-radius: 35px 0px 35px 0px;
|
||||
text-align: center;
|
||||
background-image: url("https://i.imgur.com/vNVTYig.png");
|
||||
padding-left: 5px;
|
||||
width: 70%;
|
||||
margin-left: 150px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
div.flex-column{
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
label{
|
||||
width: 120px;
|
||||
padding-left: 20px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.notes {
|
||||
|
||||
.note-bg{
|
||||
background: url("https://i.imgur.com/Gjsmgoo.jpg");
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.note-left{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
// RECURSOS
|
||||
.recursos {
|
||||
margin-top: 5px;
|
||||
}
|
||||
// ARMAS Y EQUIPO
|
||||
.armasEquipo {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
label.label{
|
||||
margin-left: 65px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: calc(100% - 70px);
|
||||
height: 90px;
|
||||
resize: none;
|
||||
background: transparent;
|
||||
margin-left: 52px;
|
||||
font-family:'Shadows Into Light';
|
||||
color: blue;
|
||||
font-size: 18px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
textarea:hover{
|
||||
background: hsla(0, 0%, 85%, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ROLL TEMPLATE / PLANTILLA EN ROLLO
|
||||
.sheet-rolltemplate-RELP {
|
||||
.sheet-rt-title {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.sheet-backg {
|
||||
background: url(https://i.imgur.com/SJdfgIn.png) top left;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
border-spacing: 0;
|
||||
display: flex;
|
||||
place-content: center;
|
||||
flex-flow: nowrap column;
|
||||
background-position: top -48px left -4px;
|
||||
height: 150px;
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.sheet-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sheet-header1 {
|
||||
color : blue;
|
||||
font-size: 22px;
|
||||
font-family: 'veteran typewriter';
|
||||
letter-spacing:0.5px;
|
||||
word-wrap: break-word;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sheet-header2 {
|
||||
background-color: transparent;
|
||||
color : black;
|
||||
font-size: 18px;
|
||||
font-family: 'veteran typewriter';
|
||||
letter-spacing:1px;
|
||||
font-weight: bolder;
|
||||
margin-bottom: 10px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.sheet-body1 {
|
||||
color : #212f3d ;
|
||||
font-size: 30px;
|
||||
padding:15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.inlinerollresult{
|
||||
font-size: 1.5em;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.inlinerollresult.fullcrit{
|
||||
border: 5px solid #3FB315;
|
||||
}
|
||||
.inlinerollresult.fullfail{
|
||||
border: 5px solid #B31515;
|
||||
}
|
||||
.inlinerollresult.importantroll {
|
||||
border: 5px solid #4A57ED;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
# Update character sheet code
|
||||
|
||||
Edit the `.scss`-file, then compile it to CSS with:
|
||||
|
||||
**A)** some online SASS compiler like [sassmeister](https://www.sassmeister.com/), then copy-paste changes into the `.css`-file.
|
||||
|
||||
**B)** install [SASS](https://sass-lang.com/install) for Command line, then run command `sass RatasEnLasParedes.scss RatasEnLasParedes.css --no-source-map --no-charset`. The `.css`-file is now automatically updated.
|
||||
@@ -5,5 +5,5 @@
|
||||
"roll20userid": "2881202",
|
||||
"preview": "RatasEnLasParedes.png",
|
||||
"instructions": "Rats in the walls character sheet, based on Spanish Patronage edition by the Hills press, author:Kobayashi",
|
||||
"legacy": true
|
||||
"legacy": false
|
||||
}
|
||||
Reference in New Issue
Block a user