mirror of
https://forge.murkfall.net/bluesaxman/pets.git
synced 2026-03-13 03:24:20 -06:00
initial git commit for pets
This commit is contained in:
440
css/css.css
Normal file
440
css/css.css
Normal file
@@ -0,0 +1,440 @@
|
||||
*|* {
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user