After some weeks of playing around this is what I most liked so far. This is not tested on a phone yet, but I have played with this comfortably on a normal web browser. Check the first versión post for how to set up personalized CSS on a browser with extensions. I think what I like most is the Bank window position. I no longer have to do anything to have access to the filters and also having a slightly higher game screen.
===== CSS CODE =====
/* TOP BAR */
#topbar {
height: 30px;
}
#topbar ul li {
font-size: 14px;
line-height: 14px;
height: 20px;
padding-top: 10px;
}
/* SIDE PANEL */
#sidepanel {
top: 80px;
bottom: 20px;
}
#panelbuttonbar {
margin-left: -50px;
}
#panelbuttonbar ul li {
font-size: 30px;
padding: 13px 5px 13px 9px;
border-radius: 17px 0 0 17px;
}
#equipgroups ul li {
font-size: 20px;
}
/* rearrange equipment in 3x5 array to allow bigger display */
#equip_helmet {
left: 100px;
top: 10px;
}
#equip_torso {
left: 100px;
top: 70px;
}
#equip_legs {
left: 100px;
top: 130px;
}
#equip_feet {
left: 100px;
top: 190px;
}
#equip_cloak {
left: 40px;
top: 10px;
}
#equip_arms {
left: 40px;
top: 130px;
}
#equip_bracers {
left: 160px;
top: 130px;
}
#equip_leftobject {
left: 160px;
top: 70px;
}
#equip_rightobject {
left: 40px;
top: 70px;
}
#equip_necklace {
left: 160px;
top: 10px;
}
#equip_rightring {
left: 160px;
top: 190px;
}
#equip_leftring {
left: 40px;
top: 190px;
}
.inventory,
.inventory span {
width: 54px;
height: 54px;
background-size: 54px 54px;
}
#bagcategoryselect {
font-size: 20px;
}
.bagitem{
width: 50px;
height: 50px;
border-radius: 25px;
background-size: 50px 50px;
}
.petlisting {
border: 1px solid #104b10;
}
/* GAME WINDOW */
#middlebar {
height: 460px;
}
#lootclosebutton {
top: 7px;
right: 15px;
font-size: 20px;
}
#loot_contents {
top: 50px;
width: 210px;
height: 120px;
}
/* on mobile phones the edge does not detect touch, move slide more right */
#zoombar {
left: 0px;
margin-top: 5%;
}
input[type=range][orient=vertical] {
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
width: 20px;
height: 300px;
}
/* BOTTOM BAR */
#skillbar ul li {
font-size: 14px;
height: 50px;
line-height: 14px;
width: 50px;
}
/* downsize battle and chat text and change position expand button */
#battleexpand {
right: 40px;
top: 85px;
font-size: 36px;
background-color:#216e2c;
opacity: .7;
}
#battlepanel {
bottom: 30px;
width: 25%;
}
#battletext {
bottom: 32px;
}
#chatpanel {
bottom: 30px !important;
width: 100% !important;
}
#chatoutput {
width: 45%;
}
#channelbar {
left: 650px;
top: 10px;
width: 300px;
}
#chat {
width: 300px;
opacity: 0.8;
}
#channelbar li {
float: left;
font-family: Verdana;
font-size: 15px;
padding: 3px 0px;
margin: 0;
}
#channelbar li input {
margin-right: 10px;
}
#chatbutton {
left: 500px
}
#chatexpand {
top: 85px;
font-size: 36px;
left: 620px;
background-color:#216e2c;
opacity: .7;
}
/* OTHER WINDOWS */
.closewindows {
height: 30px;
width: 30px;
font-size: 24px;
}
.stataddpoint {
font-size: 24px;
}
/* Crafting window */
#craftingwindowtitle {
font-size: 16px;
}
.gamewindowtitlebar {
height: 30px;
}
.gamewindowclose {
font-size: 24px
}
#itemcraftingbuttons{
width: 240px;
height: 80px;
}
#craftbutton {
width: 100px;
}
.craftingbutton {
width: 80px;
height: 80px;
border-radius: 40px;
}
#CraftButton1text, #CraftButton2text {
width: 100%;
text-align: center;
font-size: 16px;
margin-top: 28px;
}
.itemlist {
height: 280px;
}
/* Vendor window */
.vendorbuybutton,.vendorsellbutton {
height: 28px;
}
.gamewindowclose {
font-size: 32px !important;
}
/* Fishing tradeskill Reelin-button
.doactionbutton {
height: 44px;
font-size: 24px;
padding: 5px;
margin-top: 20px;
} */
/* Character Sheet Windows */
.CSheetMenu ul li {
font-size: 24px;
}
.focuspointsreset {
font-size: 20px;
}
/* Players Online Window */
#PlayersOnline {
font-size: 16px;
}
/* Bankwindow */
/* move the bank-inventory way up to allow acces to select filter directly*/
#bankcategoryselect {
font-size: 24px;
}
#bankwin {
top: -20px;
}
/* 2 gem windows, pet window */
.button {
font-size: 24px !important;
}
/* pet window */
.petskillbutton {
font-size:24px;
}
