pets/css/css.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);
}