441 lines
6.8 KiB
CSS
441 lines
6.8 KiB
CSS
*|* {
|
|
margin:0;
|
|
padding:0;
|
|
-webkit-user-select:none;
|
|
-moz-user-select:none;
|
|
-ms-user-select:none;
|
|
user-select:none;
|
|
/* FF scroll bars */
|
|
scrollbar-width:thin;
|
|
scrollbar-color:rgba(100,100,100,0.5) rgba(0,0,0,0);
|
|
/* MS scroll bars */
|
|
scrollbar-base-color: rgba(0,0,0,0);
|
|
scrollbar-face-color: rgba(100,100,100,0.5);
|
|
scrollbar-3dlight-color: rgba(100,100,100,0.5);
|
|
scrollbar-highlight-color: rgba(100,100,100,0.5);
|
|
scrollbar-track-color: rgba(0,0,0,0);
|
|
scrollbar-arrow-color: rgba(0,0,0,0);
|
|
scrollbar-shadow-color: rgba(0,0,0,0);
|
|
scrollbar-dark-shadow-color: rgba(0,0,0,0);
|
|
}
|
|
|
|
/* Chrome scroll bars */
|
|
::-webkit-scrollbar {
|
|
width:5px;
|
|
}
|
|
::-webkit-scrollbar-button {
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background:rgba(0,0,0,0);
|
|
width:5px;
|
|
}
|
|
::-webkit-scrollbar-track-piece {
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
width:5px;
|
|
background:rgba(100,100,100,0.5);
|
|
}
|
|
::-webkit-scrollbar-corner {
|
|
}
|
|
::-webkit-resizer {
|
|
}
|
|
|
|
body {
|
|
position:absolute;
|
|
background:rgba(0,0,0,1);
|
|
color:rgba(255,255,255,1);
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content:space-evenly;
|
|
height:100vh;
|
|
}
|
|
|
|
span {
|
|
margin:5px;
|
|
}
|
|
|
|
ul {
|
|
list-style:none;
|
|
}
|
|
|
|
#outer_infoLog {
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
width:calc( 30vw - 2em);
|
|
height:calc( 50vh - 2em);
|
|
}
|
|
|
|
#infoLog {
|
|
overflow:auto;
|
|
height:calc(50vh - 3em);
|
|
}
|
|
|
|
#outer_infoMarket {
|
|
position:absolute;
|
|
top:50vh;
|
|
left:0;
|
|
width:calc(30vw - 2em);
|
|
height:calc(50vh - 2em);
|
|
}
|
|
|
|
#outer_player {
|
|
position:absolute;
|
|
top:0;
|
|
left:30vw;
|
|
height:calc(100vh - 2em);
|
|
width:calc(70vw - 2em);
|
|
}
|
|
|
|
.outer {
|
|
padding:calc(1em - 10px);
|
|
border:solid 5px rgba(100,100,100,1);
|
|
}
|
|
|
|
.title {
|
|
width:100%;
|
|
text-align:center;
|
|
border-bottom:solid 1px rgba(100,100,100,1);
|
|
}
|
|
|
|
#playerStats {
|
|
display:flex;
|
|
justify-content:space-around;
|
|
}
|
|
|
|
#outer_playerStats {
|
|
height:5vh;
|
|
}
|
|
|
|
#playerInv {
|
|
height:12vh;
|
|
overflow:auto;
|
|
display:flex;
|
|
justify-content:left;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
.item {
|
|
width:3em;
|
|
height:3em;
|
|
margin:1em;
|
|
border:none 1px rgba(100,100,100,1);
|
|
cursor:pointer;
|
|
transition:250ms;
|
|
position:relative;
|
|
cursor:pointer;
|
|
background-repeat:no-repeat;
|
|
background-size:contain;
|
|
}
|
|
|
|
.item .itemCount {
|
|
position:absolute;
|
|
color:rgba(100,150,200,1);
|
|
bottom:0;
|
|
right:0;
|
|
height:1.3em;
|
|
min-width:1.3em;
|
|
line-height:1.3em;
|
|
text-align:center;
|
|
font-size:0.6em;
|
|
border-radius:0.65em;
|
|
background:rgba(100,50,0,0.8);
|
|
padding-left:2px;
|
|
padding-right:2px;
|
|
margin:0;
|
|
}
|
|
|
|
.item .itemCost {
|
|
position:absolute;
|
|
bottom:0;
|
|
left:0;
|
|
margin:0;
|
|
color:rgba(200,200,10,1);
|
|
font-size:0.8em;
|
|
background:rgba(10,10,10,0.8);
|
|
}
|
|
|
|
.item .itemName {
|
|
display:none;
|
|
overflow:hidden;
|
|
width:100%;
|
|
margin:0;
|
|
text-align:center;
|
|
}
|
|
|
|
.item:hover {
|
|
width:3.5em;
|
|
height:3.5em;
|
|
margin:0.75em;
|
|
transition:250ms;
|
|
}
|
|
|
|
.itemDesc {
|
|
position:fixed;
|
|
left:5vw;
|
|
width:90vw;
|
|
height:10vh;
|
|
bottom:10vh;
|
|
z-index:11;
|
|
text-align:center;
|
|
background:rgba(0,0,0,1);
|
|
overflow:hidden;
|
|
border:solid 1px rgba(100,100,100,1);
|
|
justify-content:center;
|
|
align-items:center;
|
|
display:none;
|
|
}
|
|
|
|
.item:hover .itemDesc {
|
|
display:flex;
|
|
}
|
|
|
|
.itemEgg {
|
|
background-image:url("../img/Egg.svg");
|
|
}
|
|
|
|
.itemFood {
|
|
background-image:url("../img/Food.svg");
|
|
}
|
|
|
|
.itemWater {
|
|
background-image:url("../img/Water.svg");
|
|
}
|
|
|
|
.itemToy {
|
|
background-image:url("../img/Toy.svg");
|
|
}
|
|
|
|
.itemTreasure {
|
|
background-image:url("../img/Treasure.svg");
|
|
}
|
|
|
|
.itemSEgg {
|
|
background-image:url("../img/SEgg.svg");
|
|
}
|
|
|
|
.itemNexus {
|
|
background-image:url("../img/Nexus.svg");
|
|
}
|
|
|
|
#infoMarket,#platerInv {
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content:left;
|
|
align-items:flex-start;
|
|
align-content:flex-start;
|
|
overflow-y:auto;
|
|
overflow-x:hidden;
|
|
}
|
|
|
|
#infoMarket {
|
|
height:calc(50vh - 3em);
|
|
}
|
|
|
|
#playerActions {
|
|
height:5vh;
|
|
overflow:auto;
|
|
display:flex;
|
|
justify-content:space-around;
|
|
}
|
|
|
|
#playerPets {
|
|
height:52vh;
|
|
overflow:auto;
|
|
display:flex;
|
|
justify-content:left;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
.pet {
|
|
position:relative;
|
|
background:rgba(0,0,0,1);
|
|
width:calc(calc(52vh - 5rem) * 0.6 );
|
|
height:calc(52vh - 5rem);
|
|
margin:1em;
|
|
padding:1em;
|
|
border:solid 1px rgba(100,100,100,1);
|
|
border-radius:2vw;
|
|
cursor:pointer;
|
|
transition:250ms;
|
|
}
|
|
|
|
.pet:hover:not(.selected) {
|
|
background:rgba(10,10,10,1);
|
|
width:calc(calc(calc(52vh - 5rem) * 0.6 ) + 4px);
|
|
height:calc(calc(52vh - 5rem) + 4px);
|
|
margin:calc(1rem - 2px);
|
|
transition:250ms;
|
|
}
|
|
|
|
.selected {
|
|
background:rgba(20,10,0,1);
|
|
border:solid 4px rgba(200,150,50,1);
|
|
cursor:default;
|
|
}
|
|
|
|
.pet span {
|
|
display:inline-block;
|
|
margin:0;
|
|
}
|
|
|
|
.gender0 {
|
|
color:rgba(250,150,200,1);
|
|
}
|
|
|
|
.gender1 {
|
|
color:rgba(100,100,250,1);
|
|
}
|
|
|
|
.dead {
|
|
display:none;
|
|
}
|
|
|
|
.petName {
|
|
width:100%;
|
|
text-align:center;
|
|
}
|
|
.petAge,.petAffection {
|
|
width:50%;
|
|
text-align:center;
|
|
}
|
|
.petHealth,.petHydration,.petNurishment,.petStomach {
|
|
width:80%;
|
|
text-align:right;
|
|
padding-right:20%;
|
|
}
|
|
|
|
.petHydration {
|
|
color:rgba(10,100,200,1);
|
|
}
|
|
|
|
.petNurishment {
|
|
color:rgba(200,100,10,1);
|
|
}
|
|
|
|
.petStomach {
|
|
color:rgba(100,50,0,1);
|
|
}
|
|
|
|
.petAction {
|
|
position:absolute;
|
|
/* border:solid 1px rgba(100,100,100,1); */
|
|
height:calc(calc(calc(52vh - 5rem) * 0.6 ) / 2);
|
|
width:calc(calc(calc(52vh - 5rem) * 0.6 ) / 2);
|
|
overflow:hidden;
|
|
bottom:calc(calc(calc(52vh - 5rem) * 0.6 ) / 4);
|
|
left:calc(calc(calc(calc(52vh - 5rem) * 0.6 ) / 4) + 1rem - 1px );
|
|
display:block;
|
|
justify-content:center;
|
|
align-items:center;
|
|
background-size:cover;
|
|
text-align:center;
|
|
line-height:calc(calc(calc(calc(52vh - 5rem) * 0.6 ) / 2));
|
|
font-size:400%;
|
|
color:rgba(255,255,255,0.4);
|
|
text-shadow:-1px -1px rgba(0,0,0,0.2), 1px 1px rgba(0,0,0,0.2), -1px 1px rgba(0,0,0,0.2), 1px -1px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.eating {
|
|
background-image:url("../img/eating.svg");
|
|
}
|
|
|
|
.drinking {
|
|
background-image:url("../img/drinking.svg");
|
|
}
|
|
|
|
.playing {
|
|
background-image:url("../img/playing.svg");
|
|
}
|
|
|
|
.walking {
|
|
background-image:url("../img/walking.svg");
|
|
}
|
|
|
|
.sleeping {
|
|
background-image:url("../img/sleepingA.svg");
|
|
}
|
|
|
|
.bathing {
|
|
background-image:url("../img/bathing.svg");
|
|
}
|
|
|
|
.pooping {
|
|
background-image:url("../img/pooping.svg");
|
|
}
|
|
|
|
.petPoop {
|
|
position:absolute;
|
|
bottom:0;
|
|
right:0;
|
|
height:5vw;
|
|
width:4vw;
|
|
color:rgba(100,50,0,0.5);
|
|
}
|
|
|
|
.actionButton {
|
|
padding:5px;
|
|
width:5em;
|
|
height:1em;
|
|
text-align:center;
|
|
}
|
|
|
|
.enabled {
|
|
border:solid 1px rgba(200,100,0,1);
|
|
background:rgba(100,50,0,0.8);
|
|
color:rgba(50,150,100,1);
|
|
cursor:pointer;
|
|
}
|
|
|
|
.enabled:hover {
|
|
border-color:rgba(200,200,100,1);
|
|
background:rgba(150,100,50,1);
|
|
color:rgba(100,200,250,1);
|
|
|
|
}
|
|
|
|
.disabled {
|
|
background:rgba(100,100,100,1);
|
|
color:rgba(10,10,10,1);
|
|
}
|
|
|
|
.water {
|
|
color:rgba(10,100,200,1);
|
|
}
|
|
|
|
.food {
|
|
color:rgba(200,100,10,1);
|
|
}
|
|
|
|
.coins {
|
|
color:rgba(200,200,100,1);
|
|
}
|
|
|
|
.dialog_back {
|
|
position:fixed;
|
|
left:0;
|
|
top:0;
|
|
width:100vw;
|
|
height:100vh;
|
|
background:rgba(0,0,0,0.8);
|
|
}
|
|
|
|
.dialog_title {
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
background:rgba(100,100,100,1);
|
|
color:rgba(0,0,0,1);
|
|
text-align:center;
|
|
height:2vh;
|
|
width:100%;
|
|
}
|
|
|
|
.dialog_content {
|
|
position:absolute;
|
|
left:0;
|
|
top:2vh;
|
|
width:100%;
|
|
height:calc(100% - 2vh);
|
|
}
|