Browse Source

Absolute positionning version

master
Pierre Vanhulst 3 years ago
parent
commit
5552140d02
  1. BIN
      images/sheet-bg.png
  2. 245
      kemi.css
  3. 109
      kemi.html

BIN
images/sheet-bg.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.8 MiB

After

Width:  |  Height:  |  Size: 5.4 MiB

245
kemi.css

@ -1,3 +1,246 @@
.charsheet {
background: url('')
background: url('https://gogs.vanhulst.one/vanhulst/Kemi_character_sheet/raw/branch/master/images/sheet-bg.png');
background-position: top;
background-size: contain;
background-repeat: no-repeat;
width: 50vw;
height: 71vw;
position: relative;
}
.charsheet .sheet-numericfields .sheet-field {
display: flex;
}
.charsheet .sheet-field > input, .charsheet .sheet-field > textarea {
background-color: rgba(255, 200, 150, .1);
backdrop-filter: blur(10px);
border: 0;
padding: .5rem;
box-shadow: 0 0 5px -1px rgba(0,0,0,.3);
width: 100%;
transition: all .2s ease-in-out;
height: 2vw;
}
.charsheet .sheet-field > input:focus, .charsheet .sheet-field > textarea:focus {
box-shadow: 0 0 6px 2px rgba(0,0,0,.2);
padding: .6rem;
}
.charsheet .sheet-field--tracker > input[type="number"] {
border-radius: 50%;
height: 8rem;
width: 8rem;
background: transparent;
border: 0;
text-align: center;
font-size: 6rem;
transition: all .2s ease-in-out;
height: 2vw;
}
.charsheet .sheet-field--tracker > input[type="number"]:focus {
background: rgba(255,200,150,.1);
backdrop-filter: blur(10px);
box-shadow: 0 0 6px 2px rgba(0,0,0,.2);
}
.charsheet .sheet-field h2, .charsheet .sheet-field--tracker h2 {
text-align: center;
line-height: 3vw;
height: 3vw;
opacity: 0;
}
.charsheet .sheet-character_name {
position: absolute;
top: 15.5vw;
left: 8.5vw;
width: 14vw;
}
.charsheet .sheet-career {
position: absolute;
top: 20.5vw;
left: 8.5vw;
width: 14vw;
}
.charsheet .sheet-description {
position: absolute;
top: 25.5vw;
left: 8.5vw;
width: 14vw;
}
.charsheet .sheet-physique {
position: absolute;
top: 20.9vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-agility {
position: absolute;
top: 22.95vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-perception {
position: absolute;
top: 25vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-charisma {
position: absolute;
top: 27.05vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-craftmanship {
position: absolute;
top: 31.15vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-bureaucracy {
position: absolute;
top: 33.2vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-combat {
position: absolute;
top: 35.25vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-world {
position: absolute;
top: 37.3vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-culture {
position: absolute;
top: 39.35vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-knowledge {
position: absolute;
top: 41.4vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-medicine {
position: absolute;
top: 43.45vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-ranged {
position: absolute;
top: 45.5vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-travel {
position: absolute;
top: 47.55vw;
left: 28.4vw;
height: 3rem;
width: 20rem;
}
.charsheet .sheet-description > textarea {
height: 2vw;
resize: none;
}
.charsheet .sheet-background {
position: absolute;
top: 32vw;
left: 8.5vw;
width: 14vw;
}
.charsheet .sheet-background > textarea {
height: 2vw;
resize: none;
}
.charsheet .sheet-belongings {
position: absolute;
top: 38.5vw;
left: 8.5vw;
width: 14vw;
}
.charsheet .sheet-belongings > textarea {
height: 3vw;
resize: none;
}
.charsheet .sheet-weapons {
position: absolute;
top: 46.5vw;
left: 8.5vw;
width: 14vw;
}
.charsheet .sheet-weapons > textarea {
height: 2vw;
resize: none;
}
.charsheet .sheet-armors {
position: absolute;
top: 53vw;
left: 8.5vw;
width: 14vw;
}
.charsheet .sheet-armors > textarea {
height: 2vw;
resize: none;
}
.charsheet .sheet-hitpoints {
position: absolute;
top: 51vw;
left: 31.75vw;
width: 10rem;
}
.charsheet .sheet-maat {
position: absolute;
top: 51vw;
left: 40.5vw;
width: 10rem;
}

109
kemi.html

@ -0,0 +1,109 @@
<main>
<div class="textualfields">
<label class="field character_name">
<h2>Nom</h2>
<input type="text" name="attr_character_name" />
</label>
<label class="field career">
<h2>Carrière</h2>
<input type="text" name="attr_career" />
</label>
<label class="field description">
<h2>Description</h2>
<textarea name="attr_description"></textarea>
</label>
<label class="field background">
<h2>Histoire personnelle</h2>
<textarea name="attr_background"></textarea>
</label>
<label class="field belongings">
<h2>Équipement</h2>
<textarea name="attr_belongings"></textarea>
</label>
<label class="field weapons">
<h2>Armes</h2>
<textarea name="attr_weapons"></textarea>
</label>
<label class="field armors">
<h2>Armures</h2>
<textarea name="attr_armors"></textarea>
</label>
</div>
<div class="numericfields">
<label class="field physique">
<button type="roll" name="roll_physique" value="[[1d6 + @{physique}]]"></button>
<input type="number" name="attr_physique" />
<h2>Physique</h2>
</label>
<label class="field agility">
<button type="roll" name="roll_agility" value="[[1d6 + @{agilty}]]"></button>
<input type="number" name="attr_agility" />
<h2>Agilité</h2>
</label>
<label class="field perception">
<button type="roll" name="roll_perception" value="[[1d6 + @{perception}]]"></button>
<input type="number" name="attr_perception" />
<h2>Perception</h2>
</label>
<label class="field charisma">
<button type="roll" name="roll_charisma" value="[[1d6 + @{charisma}]]"></button>
<input type="number" name="attr_charisma" />
<h2>Charisme</h2>
</label>
<label class="field craftmanship">
<button type="roll" name="roll_craftmanship" value="[[1d6 + @{craftmanship}]]"></button>
<input type="number" name="attr_craftmanship" />
<h2>Artisanat</h2>
</label>
<label class="field bureaucracy">
<button type="roll" name="roll_bureaucracy" value="[[1d6 + @{bureaucracy}]]"></button>
<input type="number" name="attr_bureaucracy" />
<h2>Bureaucratie</h2>
</label>
<label class="field combat">
<button type="roll" name="roll_combat" value="[[1d6 + @{combat}]]"></button>
<input type="number" name="attr_combat" />
<h2>Combat</h2>
</label>
<label class="field world">
<button type="roll" name="roll_world" value="[[1d6 + @{world}]]"></button>
<input type="number" name="attr_world" />
<h2>Connaissance du monde</h2>
</label>
<label class="field culture">
<button type="roll" name="roll_culture" value="[[1d6 + @{culture}]]"></button>
<input type="number" name="attr_culture" />
<h2>Culture Égyptienne</h2>
</label>
<label class="field knowledge">
<button type="roll" name="roll_knowledge" value="[[1d6 + @{knowledge}]]"></button>
<input type="number" name="attr_knowledge" />
<h2>Érudition</h2>
</label>
<label class="field medicine">
<button type="roll" name="roll_medicine" value="[[1d6 + @{medicine}]]"></button>
<input type="number" name="attr_medicine" />
<h2>Médecine</h2>
</label>
<label class="field ranged">
<button type="roll" name="roll_ranged" value="[[1d6 + @{ranged}]]"></button>
<input type="number" name="attr_ranged" />
<h2>Tir</h2>
</label>
<label class="field travel">
<button type="roll" name="roll_travel" value="[[1d6 + @{travel}]]"></button>
<input type="number" name="attr_travel" />
<h2>Voyage</h2>
</label>
</div>
<div class="trackerfields">
<label class="field--tracker hitpoints">
<h2>Points de vie</h2>
<input type="number" name="attr_hitpoints" />
</label>
<label class="field--tracker maat">
<h2>Points de Maât</h2>
<input type="number" name="attr_maat" />
</label>
</div>
</main>
Loading…
Cancel
Save