Monday, April 6, 2020

Big Button CSS - second version

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;
}

No comments:

Post a Comment