diff --git a/less/character-sheet.less b/less/character-sheet.less index b1d0683..8022385 100644 --- a/less/character-sheet.less +++ b/less/character-sheet.less @@ -146,11 +146,12 @@ flex-direction: column; align-items: center; width: 200px; + height: 400px; border-right: #5e0000; } .imgBox { - height: 165px; + height: 170px; width: 180px; padding: 0 20px; background-color: #b0b0b0; @@ -160,8 +161,8 @@ -o-border-radius: 15px; position: absolute; - bottom: 0; - left: 0; + top: 120; + left: 20; } .imgBox:after { @@ -171,7 +172,8 @@ height: 0; float: left; position: absolute; - left: 20px; + left: 0px; + bottom: 0px } .screen { @@ -194,6 +196,75 @@ justify-content: center; } + div#topPicture + { + margin: 6px auto; + width: 40px; + } + + div#buttontopPicture1, div#buttontopPicture2 + { + height: 8px; + width: 8px; + background-color: #c00d0d; + border: 1px solid #000; + float: left; + + border-radius: 15px; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + -o-border-radius: 15px; + } + + div#buttontopPicture1 + { + margin-right: 20px; + } + + div#buttonbottomPicture + { + height: 26px; + width: 26px; + background-color: #c00d0d; + margin-left: 35px; + float: left; + + border-radius: 30px; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + -o-border-radius: 30px; + + box-shadow: -2px 1px #5e0000; + -webkit-box-shadow: -2px 1px #5e0000; + -moz-box-shadow: -2px 1px #5e0000; + -o-box-shadow: -2px 1px #5e0000; + + background: linear-gradient(top, #c00d0d 0%, #8b0000 80%); + background: -webkit-linear-gradient(top, #c00d0d 0%, #8b0000 80%); + background: -moz-linear-gradient(top, #c00d0d 0%, #8b0000 80%); + background: -o-linear-gradient(top, #c00d0d 0%, #8b0000 80%); + } + + div#speakers + { + float: right; + width: 75px; + height: 25px; + margin-right: 20px; + } + + div.sp + { + height: 3px; + margin-bottom: 5px; + background-color: #494949; + + border-radius: 30px; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + -o-border-radius: 30px; + } + .charImg { max-height: 95px; max-width: 125px; @@ -202,12 +273,18 @@ } .vertLine { - height: 100%; + position: absolute; + height: 400px; + float: left; + left: 200px; + bottom: 0px; width: 5px; background-color: #5e0000; } .menuBox { background-color: #5e0000; + border: none; + padding: 0px 10px; } } \ No newline at end of file diff --git a/pokemon.css b/pokemon.css index f305a63..bc40ccb 100644 --- a/pokemon.css +++ b/pokemon.css @@ -123,10 +123,11 @@ flex-direction: column; align-items: center; width: 200px; + height: 400px; border-right: #5e0000; } .pokemon.sheet.characterSheet .imgBox { - height: 165px; + height: 170px; width: 180px; padding: 0 20px; background-color: #b0b0b0; @@ -135,8 +136,8 @@ -moz-border-radius: 15px; -o-border-radius: 15px; position: absolute; - bottom: 0; - left: 0; + top: 120; + left: 20; } .pokemon.sheet.characterSheet .imgBox:after { content: ""; @@ -145,7 +146,8 @@ height: 0; float: left; position: absolute; - left: 20px; + left: 0px; + bottom: 0px; } .pokemon.sheet.characterSheet .screen { height: 110px; @@ -163,6 +165,59 @@ align-items: center; justify-content: center; } +.pokemon.sheet.characterSheet div#topPicture { + margin: 6px auto; + width: 40px; +} +.pokemon.sheet.characterSheet div#buttontopPicture1, +.pokemon.sheet.characterSheet div#buttontopPicture2 { + height: 8px; + width: 8px; + background-color: #c00d0d; + border: 1px solid #000; + float: left; + border-radius: 15px; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + -o-border-radius: 15px; +} +.pokemon.sheet.characterSheet div#buttontopPicture1 { + margin-right: 20px; +} +.pokemon.sheet.characterSheet div#buttonbottomPicture { + height: 26px; + width: 26px; + background-color: #c00d0d; + margin-left: 35px; + float: left; + border-radius: 30px; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + -o-border-radius: 30px; + box-shadow: -2px 1px #5e0000; + -webkit-box-shadow: -2px 1px #5e0000; + -moz-box-shadow: -2px 1px #5e0000; + -o-box-shadow: -2px 1px #5e0000; + background: linear-gradient(top, #c00d0d 0%, #8b0000 80%); + background: -webkit-linear-gradient(top, #c00d0d 0%, #8b0000 80%); + background: -moz-linear-gradient(top, #c00d0d 0%, #8b0000 80%); + background: -o-linear-gradient(top, #c00d0d 0%, #8b0000 80%); +} +.pokemon.sheet.characterSheet div#speakers { + float: right; + width: 75px; + height: 25px; + margin-right: 20px; +} +.pokemon.sheet.characterSheet div.sp { + height: 3px; + margin-bottom: 5px; + background-color: #494949; + border-radius: 30px; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + -o-border-radius: 30px; +} .pokemon.sheet.characterSheet .charImg { max-height: 95px; max-width: 125px; @@ -170,10 +225,16 @@ width: auto; } .pokemon.sheet.characterSheet .vertLine { - height: 100%; + position: absolute; + height: 400px; + float: left; + left: 200px; + bottom: 0px; width: 5px; background-color: #5e0000; } .pokemon.sheet.characterSheet .menuBox { background-color: #5e0000; + border: none; + padding: 0px 10px; } diff --git a/system.json b/system.json index 0604ef2..04f1f71 100644 --- a/system.json +++ b/system.json @@ -1,5 +1,5 @@ { - "version": "0.0.24", + "version": "0.0.25", "id": "pokemon", "title": "Pokémon TTRPG", "description": "A Pokémon TTRPG", diff --git a/system.zip b/system.zip index a9721b9..6e8958e 100644 Binary files a/system.zip and b/system.zip differ