Lock please!
Replies
definitely possible, i can try whip something together based off of this description [:
- move the "make your turn/see results" to above the weapon selection
- make the weapon and scroll icons smaller - is this still necessary if i do the first thing?
i'll try to do both, let me know if there's something else you wanted that i missed
.battle-select {width: auto !important; }
.battle-select.active, , {width:45% !important; }
.battle-section-title {display:none; }Tho, like I said... do not remember what it does. =/
replace your code you showed me with this to move the buttons. i made the buttons larger and the same size too so they're easier to click
.battle-ui-controls{display:flex;flex-direction:column;}
.battle-ui-controls div:first-of-type{order: -2;}
.endBattle{order: -1;}
.endBattle h2{display:none;}
,.endBattle .btn{margin:25px 0;padding:20px 0;width:80%;}
i also tried something to make the potions and spells more compact. it makes two columns for each, and you have to hover over them to see the name (i'm hovering over Gale Force in this pic).
.choices-box{text-align:left;}
.potion-choice,.spell-choice{position:relative;width:42px;height:42px;display:inline-block;margin-right:2px;}
.potion-choice img,.spell-choice img{position:absolute;top:0;left:0;}
.choice-name{position:absolute;top:0;left:0;line-height:1;text-align:left;background:rgba(255,255,255,.8);opacity:0;padding-bottom:2px;z-index:999;}
.potion-choice:hover .choice-name, .spell-choice:hover .choice-name{opacity:1;}
it looks a bit messy if a spell has a long name. if you don't like that and want it to cut off the name instead, use this one instead
.choices-box{text-align:left;}
.potion-choice,.spell-choice{position:relative;width:42px;height:42px;display:inline-block;margin-right:2px;overflow:hidden;}
.potion-choice img,.spell-choice img{position:absolute;top:0;left:0;}
.choice-name{position:absolute;top:0;left:0;width:42px;line-height:1;text-align:left;background:rgba(255,255,255,.8);opacity:0;padding-bottom:2px;}
.potion-choice:hover .choice-name, .spell-choice:hover .choice-name{opacity:1;}
please feel free to try them out for a bit and see how you like it! if you want any changes let me know <3
.battle-ui-controls{display:flex;flex-direction:column;}
.battle-ui-controls div:first-of-type{order: -2;}
.endBattle{order: -1;}
.endBattle h2{display:none;}
,.endBattle .btn{margin:25px 0;padding:20px 0;width:80%;}</p><p>i also tried something to make the potions and spells more compact. it makes two columns for each, and you have to hover over them to see the name (i&;m hovering over Gale Force in this pic).
.choices-box{text-align:left;}
.potion-choice,.spell-choice{position:relative;width:42px;height:42px;display:inline-block;margin-right:2px;}
.potion-choice img,.spell-choice img{position:absolute;top:0;left:0;}
.choice-name{position:absolute;top:0;left:0;line-height:1;text-align:left;background:rgba(255,255,255,.8);opacity:0;padding-bottom:2px;z-index:999;}
.potion-choice:hover .choice-name, .spell-choice:hover .choice-name{opacity:1;}</p><p>it looks a bit messy if a spell has a long name. if you don&;t like that and want it to cut off the name instead, use this one instead
.choices-box{text-align:left;}
.potion-choice,.spell-choice{position:relative;width:42px;height:42px;display:inline-block;margin-right:2px;overflow:hidden;}
.potion-choice img,.spell-choice img{position:absolute;top:0;left:0;}
.choice-name{position:absolute;top:0;left:0;width:42px;line-height:1;text-align:left;background:rgba(255,255,255,.8);opacity:0;padding-bottom:2px;}
.potion-choice:hover .choice-name, .spell-choice:hover .choice-name{opacity:1;}please feel free to try them out for a bit and see how you like it! if you want any changes let me know <3
no payment needed! i love doing these little helpful css addons so i'm glad to be of assistance <3 feel free to ping me directly in the future if you need help with something else like this!