ui.css

/*
Copyright 2014-2017 darkf

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

/* Main stylesheet for the DarkFO UI */

body {
  font-family: sans-serif;
  margin: 0;
}

.disable-selection {
    /* disable text selections */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#game-container {
  position: relative;
  width: 800px;
  height: 699px; /* 600 + 99 (size of bar) */
  background-color: black;
}

/* canvas overlay */
#overlay-container {
  position: absolute;
  left: 0px; top: 0px;
  color: white;
  font-family: monospace;
  font-size: 8pt;
  width: 100%;

  /* don't affect the cursor at all */
  pointer-events: none;
}

#overlay {
  position: relative;
}

#fpsOverlay {
  position: absolute;
  right: 10px; top: 5px;
}

#bar {
  position: absolute;
  left: 80px; /* (canvas width - 640) / 2 */
  bottom: 0px;
  width: 640px;
  transform: scaleX(1.25); /* (canvas width) / 640 */
  height: 99px;
  background-image: url("art/intrface/iface.png");
}

#endContainer {
    position: absolute;
    /*left: 578px; top: 36px;*/
    bottom: 2px; right: 2px;
    width: 57px; height: 58px;
    background-image: url("art/intrface/endanim.png");
    /*background-position: -228px;*/

    /* animation for the end turn/combat button */
    /* 1 second long, 5 frames, alternates forward/reverse */
    animation: endAnimation 1s steps(5) infinite;
    animation-fill-mode: forwards;
    animation-direction: alternate;

    /* vendor prefixes because the Web sucks */
    -webkit-animation: endAnimation 1s steps(5) infinite;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-direction: alternate;

    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

@keyframes endAnimation {
   from { background-position: 0px; }
     to { background-position: -285px; }
}

@-webkit-keyframes endAnimation {
   from { background-position: 0px; }
     to { background-position: -285px; }
}

#endTurnButton {
    position: absolute;
    top: 5px; left: 10px;
    width: 38px; height: 22px;
    visibility: hidden;
    background-image: url("art/intrface/endturnu.png");
}

#endTurnButton:active {
    background-image: url("art/intrface/endturnd.png");
}

#endCombatButton {
    position: absolute;
    top: 27px; left: 10px;
    width: 38px; height: 22px;
    visibility: hidden;
    background-image: url("art/intrface/endcmbtu.png");
}

#endCombatButton:active {
    background-image: url("art/intrface/endcmbtd.png");
}

#skilldexButton {
    position: absolute;
    left: 522px; top: 5px;
    width: 22px; height: 21px;
}

#skilldexButton:active {
    background-image: url("art/intrface/bigreddn.png");
}

#displayLog {
    position: absolute;
    left: 26px; top: 30px;
    width: 158px; height: 54px;
    color: #00FF00;
    font-size: 8pt;
    overflow: hidden;
}

#attackButtonContainer {
    position: absolute;
    left: 265px; top: 26px;
    width: 188px;
    height: 67px;
}

#attackButtonCalled {
    position: absolute;
    right: 7px; bottom: 7px;
    width: 18px; height: 18px;
    background-image: url("art/intrface/bullseye.png");
    display: none;
}

#attackButtonAP {
    position: absolute;
    bottom: 7px; left: 7px;
    width: 64px; height: 12px;
    background-image: url("art/intrface/mvepnt.png");
    background-repeat: no-repeat;
}

#attackButtonAPDigit {
    position: absolute;
    top: 0px; left: 20px;
    width: 9px; height: 12px;
    background-image: url("art/intrface/mvenum.png");
}

#attackButtonType {
    position: absolute;
    top: 5px; right: 5px;
    width: 64px; height: 12px;
}

#attackButtonWeapon {
}

#attackButtonContainer:active #attackButtonWeapon {
    /* move weapon image up */
    transform: translateY(-2px);
}

#attackButton {
  position: absolute;
  left: 0px; top: 0px;
  width: 188px;
  height: 67px;
  background-image: url("art/intrface/sattkbup.png");
}

#attackButtonContainer:active #attackButton {
  background-image: url("art/intrface/sattkbdn.png");
}

#inventoryButton {
  position: absolute;
  left: 213px; top: 40px;
  width: 32px; height: 21px;
  background-image: url("art/intrface/invbutup.png");
}

#inventoryButton:active {
  background-image: url("art/intrface/invbutdn.png");
}

#chrButton {
  position: absolute;
  left: 526px; top: 59px;
  width: 41px; height: 19px;
  background-image: url("art/intrface/chaup.png");
}

#chrButton:active {
  background-image: url("art/intrface/chadn.png");
}

/* inventory box */
#inventoryBox {
  position: absolute;
  left: 130px; top: 50px;
  width: 499px; height: 377px;
  visibility: hidden;
  background-image: url("art/intrface/invbox.png");
}

#inventoryBoxList {
  position: absolute;
  left: 40px; top: 40px;
  width: 70px; height: 300px;
  /*background-color: gray;*/
  overflow: hidden;
}

#inventoryDoneButton {
  position: absolute;
  left: 433px; top: 325px;
  width: 26px; height: 26px;
  background-image: url("art/intrface/menuup.png");
}

#inventoryDoneButton:hover {
  cursor: pointer;
}

#inventoryDoneButton:active {
  background-image: url("art/intrface/menudown.png");
}

#inventoryBoxItem1, #inventoryBoxItem2, #inventoryBoxArmor {
  position: absolute;
  width: 90px; height: 64px;
}

#inventoryBoxItem1 { left: 155px; top: 285px; }
#inventoryBoxItem2 { left: 245px; top: 285px; }
#inventoryBoxArmor { left: 155px; top: 180px; }

#inventoryBoxInfo {
  position: absolute;
  left: 295px; top: 45px;
  width: 150px; height: 190px;
}

.number {
  position: absolute;
  /* 0 1 2 3 4 5 6 7 8 9 turn1 turn2 - */
  background-image: url("art/intrface/numbers.png");
  width: 9px; height: 17px;
}

#hpNumber {
  position: absolute;
  left: 472px; top: 40px;
}

#acNumber {
position: absolute;
left: 472px; top: 75px;
}

#hpDigit1 { left: 0px; }
#hpDigit2 { left: 9px; }
#hpDigit3 { left: 18px; }
#hpDigit4 { left: 27px; }

#acDigit1 { left: 0px; }
#acDigit2 { left: 9px; }
#acDigit3 { left: 18px; }
#acDigit4 { left: 27px; }

#itemContextMenu {
  position: absolute;
  width: 40px; height: 260px; /* height? */
  top: 0px; /* this will be overriden by the UI script */
  background-color: gray;
  visibility: hidden;
  z-index: 10;
}

.itemContextMenuButton {
  /*position: absolute;*/
  width: 40px; height: 40px;
}

#context_cancel { background-image: url("art/intrface/canceln.png"); }
#context_cancel:hover { background-image: url("art/intrface/cancelh.png"); }

#context_use { background-image: url("art/intrface/usegetn.png"); }
#context_use:hover { background-image: url("art/intrface/usegeth.png"); }

#context_drop { background-image: url("art/intrface/dropn.png"); }
#context_drop:hover { background-image: url("art/intrface/droph.png"); }

#context_look { background-image: url("art/intrface/lookn.png"); }
#context_look:hover { background-image: url("art/intrface/lookh.png"); }

#context_pickup { background-image: url("art/intrface/dropn.png"); }
#context_pickup:hover { background-image: url("art/intrface/droph.png"); }

#context_talk { background-image: url("art/intrface/talkn.png"); }
#context_talk:hover { background-image: url("art/intrface/talkh.png"); }

/* bar height is 99
   bottom of screen then is 501 */

#dialogueContainer {
  position: absolute;
  left: 80px; top: 20px;
  width: 640px; height: 480px;

  visibility: hidden;
  background-image: url("art/intrface/alltlk.png");
  overflow: hidden;
}

#dialogueBox {
  position: absolute;
  left: 0px; top: 300px;
  width: 640px; height: 190px;

  visibility: hidden;
  background-image: url("art/intrface/di_talk.png");
}

#dialogueBoxReply {
  position: absolute;
  left: 138px; top: 232px;
  width: 375px; height: 47px;
  color: #00FF00;
  font-size: .75em;
  overflow: hidden;
}

#dialogueBoxTextArea {
  position: absolute;
  left: 130px; top: 50px;
  width: 390px; height: 112px;
  color: #00FF00;
  font-size: .75em;
  overflow: auto;
}

#dialogueBoxTextArea a {
  color: #00FF00;
  text-decoration: none;
}

#dialogueBoxTextArea a:hover {
  color: white;
}

#barterBox {
  position: absolute;
  left: 0px; top: 300px;
  width: 640px; height: 190px;

  visibility: hidden;
  background-image: url("art/intrface/barter.png");
}

/* barter screen "talk" button */
#barterTalkButton {
  position: absolute;
  left: 580px; top: 160px;
  width: 26px; height: 26px;
  background-image: url("art/intrface/menuup.png");
}

#barterTalkButton:hover { cursor: pointer; }
#barterTalkButton:active { background-image: url("art/intrface/menudown.png"); }

/* barter screen "offer" button */
#barterOfferButton {
  position: absolute;
  left: 36px; top: 160px;
  width: 26px; height: 26px;
  background-image: url("art/intrface/menuup.png");
}

#barterOfferButton:hover { cursor: pointer; }
#barterOfferButton:active { background-image: url("art/intrface/menudown.png"); }

/* left (player) inventory box */
#barterBoxInventoryLeft {
  position: absolute;
  left: 110px; top: 40px;
  width: 70px; height: 130px;
  /*background-color: gray;*/
  overflow: hidden;
}

/* right (merchant) inventory box */
#barterBoxInventoryRight {
  position: absolute;
  left: 470px; top: 40px;
  width: 70px; height: 130px;
  /*background-color: gray;*/
  overflow: hidden;
}

/* left (player) bartering table */
#barterBoxLeft {
  position: absolute;
  left: 248px; top: 12px;
  width: 55px; height: 155px;
  /*background-color: gray;*/
  overflow: hidden;
}

/* right (merchant) bartering table */
#barterBoxRight {
  position: absolute;
  left: 330px; top: 12px;
  width: 55px; height: 155px;
  /*background-color: gray;*/
  overflow: hidden;
}

/* monetary amount for right (merchant) bartering table */
#barterBoxRightAmount {
  position: absolute;
  left: 340px; top: 168px;
  color: white;
  font-size: 0.75em;
}

/* monetary amount for left (player) bartering table */
#barterBoxLeftAmount {
  position: absolute;
  left: 248px; top: 168px;
  color: white;
  font-size: 0.75em;
}

/* loot box */
#lootBox {
  position: absolute;
  left: 80px; top: 20px;
  width: 537px; height: 376px;
  visibility: hidden;
  background-image: url("art/intrface/loot.png");
}

/* left loot inventory */
#lootBoxLeft {
  position: absolute;
  left: 180px; top: 40px;
  width: 64px; height: 290px;
  overflow: hidden;
}

/* right loot inventory */
#lootBoxRight {
  position: absolute;
  left: 300px; top: 40px;
  width: 64px; height: 290px;
  overflow: hidden;
}

#lootBoxDoneButton {
  position: absolute;
  left: 475px; top: 325px;
  width: 26px; height: 26px;
  background-image: url("art/intrface/menuup.png");
}

#lootBoxDoneButton:hover { cursor: pointer; }
#lootBoxDoneButton:active { background-image: url("art/intrface/menudown.png"); }

#lootBoxTakeAllButton {
  position: absolute;
  left: 430px; top: 205px;
  width: 39px; height: 41px;
  background-image: url("art/intrface/invmaup.png");
}

#lootBoxTakeAllButton:hover { cursor: pointer; }
#lootBoxTakeAllButton:active { background-image: url("art/intrface/invmadn.png"); }

#worldMapContainer {
    position: absolute;
    left: 0px; top: 0px;
    width: 800px; height: 600px;
    background-color: black;
    display: none;
}

#worldMapBox {    
    position: absolute;
    left: 80px; top: 60px;
    width: 640px; height: 480px;
    background-image: url("art/intrface/wmapbox.png");
}

#worldmapViewButton {
    position: absolute;
    left: 519px; top: 440px;
    width: 15px; height: 16px;
    background-image: url("art/intrface/lilredup.png");
}

#worldmapViewButton:active {
    background-image: url("art/intrface/lilreddn.png");
}

#worldMapWorld {
    position: absolute;
    left: 105px; top: 82px;
    width: 445px; height: 438px;
}

#areamap {
    position: absolute;
    left: 0px; top: 0px;
    /*overflow: auto;*/
    overflow: hidden;
    width: 100%; height: 100%;
}

#worldMapLabels {
    position: absolute;
    left: 503px; top: 133px;
    width: 120px; height: 182px;
    overflow: hidden;
}

#worldMapLabelsBackground {
    position: absolute;
    left: -13px; top: -27px;
    width: 145px; height: 480px;
    background-image: url("art/intrface/wmtabs.png");
}

.worldMapLabel {
    position: absolute;
    left: 3px;
    width: 110px; height: 24px;
}

.worldMapLabelImage {
    position: absolute;
    left: 21px; top: 2px;
    width: 82px; height: 18px;
}

.worldMapLabelButton {
    position: absolute;
    left: 0px; top: 2px;
    width: 15px; height: 16px;
    background-image: url("art/intrface/lilredup.png");
}

.worldMapLabelButton:active {
    background-image: url("art/intrface/lilreddn.png");
}

.worldmapEntrance {
    position: absolute;
    width: 100px;
    height: 32px;
    color: #00FF00;
}

.worldmapEntranceHotspot {
    width: 25px; height: 13px;
    background-image: url("art/intrface/hotspot1.png");
}

.worldmapEntranceHotspot:active {
    background-image: url("art/intrface/hotspot2.png");
}

#elevatorBox {
    position: absolute;
    width: 230px; height: 284px;
    left: 285px; top: 158px; /* center */
    visibility: hidden;

    /* background-image varies per elevator type */
}

#elevatorLabel {
    position: absolute;
    width: 107px; height: 248px;
    left: 0px; top: 37px;
    visibility: hidden;

    /* background-image varies per elevator type */
}

#elevatorPositioner {
    /**/
}

.elevatorButton {
    position: absolute;
    width: 48px; height: 50px;
    left: 16px; /* left/x constant for all elevator buttons, top/y changes */
    visibility: hidden;
    background-image: url("art/intrface/ebut_out.png");
}

.elevatorButton:active {
    background-image: url("art/intrface/ebut_in.png");
}

#elevatorButton1 { top: 42px; }
#elevatorButton2 { top: 102px; }
#elevatorButton3 { top: 162px; }
#elevatorButton4 { top: 222px; }

/* ------- */
/* world map */

/*#worldmapBox {
    border: 1px solid green;
    position: absolute;
    left: 30%; top: 20%;
}*/

#worldmap {
    position: absolute;
    left: 0px; top: 0px;
    /*overflow: auto;*/
    overflow: hidden;
    width: 100%; height: 100%;
    /* */
}

#worldmapImage {
    position: absolute; left: 0px; top: 0px;
    /*background-image: url("worldmap.png");*/
    /*width: 525px; height: 450px;*/
}

.area {
    position: absolute;
    z-index: 1;
}

.areaLabel {
    position: absolute;
    font-family: sans-serif;
    color: #00FF00;
}

.areaCircle {
    position: absolute;
    /*width: 100px; height: 100px;*/
    border: 2px solid #00FF00;
    border-radius: 50%; /* circle */
    background: #007F00;
    opacity: 0.25;
}

.areaSize-small { width: 8px; height: 8px; }
.areaSize-medium { width: 32px; height: 32px; }
.areaSize-large { width: 64px; height: 64px; }

.worldmapSquare {
    position: absolute;
    width: 51px; height: 51px;
}

.worldmapSquare-undiscovered { background-color: black; z-index: 2; }
.worldmapSquare-discovered { background-color: black; display: none; }
.worldmapSquare-seen { background-color: black; opacity: 0.5; }

/* The player marker on the world map. Hidden until travelling. */
#worldmapPlayer {
    position: absolute;
    width: 25px; height: 13px;
    background-repeat: no-repeat;
    background-image: url("art/intrface/wmaploc.png");
    /*visibility: hidden;*/
    z-index: 100;
}

/* Target. Changes into a hotspot when reached by the player. */
#worldmapTarget {
    position: absolute;
    width: 25px; height: 13px;
    background-repeat: no-repeat;           
    z-index: 100;
}

#calledShotBox {
    position: absolute;
    left: 135px; top: 135px;
    width: 504px; height: 309px;
    display: none;
    background-image: url("art/intrface/called.png");
}

#calledShotBackground {
    position: absolute;
    left: 170px; top: 31px;
    width: 170px; height: 225px;
    /*border: 1px solid cyan;*/
    background-image: url("art/critters/masratna.png");
}

#calledShotCancelBtn {
    position: absolute;
    left: 208px; top: 268px;
    width: 15px; height: 16px;
    background-image: url("art/intrface/lilredup.png");
}

#calledShotCancelBtn:active {
    background-image: url("art/intrface/lilreddn.png");
}

.calledShotLabel {
    position: absolute;
    width: 100px;
    color: #00FF00;
    font-size: small;
}

.calledShotLabel:hover {
    cursor: pointer;
}

.calledShotChance {
    position: absolute;
    width: 25px; height: 25px;
    /*border: 1px solid cyan;*/
}

/* right side of called shot screen */
#calledShot-torso-chance { right: 26px; top: 35px; }
#calledShot-torso-label { left: 380px; top: 30px; }

#calledShot-groin-chance { right: 26px; top: 102px; }
#calledShot-groin-label { left: 380px; top: 90px; }

#calledShot-leftArm-chance { right: 26px; top: 164px; }
#calledShot-leftArm-label { left: 360px; top: 160px; }

#calledShot-leftLeg-chance { right: 26px; top: 230px; }
#calledShot-leftLeg-label { left: 370px; top: 225px; }

/* left side */
#calledShot-head-chance { left: 33px; top: 35px; }
#calledShot-head-label { left: 75px; top: 30px; }

#calledShot-eyes-chance { left: 33px; top: 102px; }
#calledShot-eyes-label { left: 75px; top: 95px; }

#calledShot-rightArm-chance { left: 33px; top: 164px; }
#calledShot-rightArm-label { left: 75px; top: 160px; }

#calledShot-rightLeg-chance { left: 33px; top: 230px; }
#calledShot-rightLeg-label { left: 75px; top: 225px; }