ClickerGuy icon

My CSS Layout (Clone)

ClickerGuy | PRO | 10/02/22 10:13:33 AM UTC (Edited) | 0 ⭐ | 610 👁️ | Never ⏰ | []
text |

5.4 KB

|

None

|

0 👍

/

0 👎

/*Stylesheet created by morkysherk, owned by Eric*/
 #game
{
    background-image:http://www.colorhexa.com/afafaf.png;
    font-size:12px;
    color:rgba(0,0,0,0.9);
    text-shadow:none;
}
.box
{
    text-align:center;
    padding:0px;
    box-shadow:none;
}
 .thing,.box-header,.box-footer,.box-bit
{
    background:#7c7c7c;
    border:1px solid rgba(0,0,0,0.9);
    margin:1px;
}
.thing.cantAfford
{
    background:#cf5055;
} 
.thing:hover
{
    background:#cccccc;
}
.thing.cantAfford:hover
{
    background:#cc6a6d;
}
 .box-header
{
    margin-top:2px;
    margin-bottom:4px;
    display:inline-block;
    font-family:Verdana;
    font-weight:bold;
    border-radius:10px;
    border:3px solid black;
}
.box-footer
{
    margin-top:4px;
}
 .title
{
    text-decoration:underline;
}
 #box-title
{
    display:inline-block;
    margin-top:0.75%;
    margin-left:0.75%;
    float:left;
}
#box-version
{
    display:inline-block;
    margin-top:0.75%;
    margin-left:0.75%;
    margin-right:0.75%;
    float:left;
}
 #box-main
{
    left:0px;
    top:0px;
    bottom:0px;
    overflow:hidden;
    width:60%;
    position:absolute;
    border:5px solid black;
    border-right:0px;
}
#box-buttons
{
    top:0px;
    right:25px;
    bottom:0px;
    left:0px;
    position:absolute;
}
#box-store
{
    right:0px;
    top:0px;
    bottom:0px;
    width:40%;
    position:absolute;
}
#box-buildings,#box-upgrades, upgradesZZ, upgrades IV, #box-achievs, #box-prestige
{
    top:0px;
    bottom:0px;
    width:50%;
    right:0%;
    overflow-x:hidden;
    overflow-y:scroll;
    padding-bottom:48px;/* this is to accommodate the info and settings buttons */
    position:absolute;
    border:solid 5px black;
}
#box-res
{
    border-top:5px solid black;
    border-left:2.5px solid black;
    border-bottom:3px solid black;
    width:150%;
    right:100%;
    bottom:72%;
    height:21.2%;
    z-index:100;
    position:absolute;
    overflow-y:scroll;
    background:linear-gradient(to right,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.15) 100%);
}
#box-buildings
{
    right:50%;
    border-right:solid 0px black;
}
#box-achievs
{
    right:100%;
    width:150%;
    top:75%;
    height:25%;
    border-right:solid 0px black;
}
#box-prestige
{
    right:100%;
    top:28%;
    height:47.7%;
    border-top:solid 0px black;
    border-bottom:solid 0px black;
    border-right:solid 0px black;
}
#box-stats
{
    border-top:2.5px solid black;
    border-bottom:5px solid black;
    width:0%;
    bottom:0%;
    right:0%;
    z-index:100;
    position:absolute;
    overflow-y:scroll;
    height:8.5%;
    background:linear-gradient(to right,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.15) 100%);
}
 #box-buildings>.box-header
{
    padding-bottom:16px;
}
 #bulkDisplay
{
    margin-top:-2.5px;
    border:solid 1px black;
    background:#7c7c7c;
    width:70px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    z-index:200;
}
  .thing
{
    display:inline-block;
    padding:0px;
    cursor:pointer;
    font-family:Verdana;
}
.thing:active
{
    opacity:0.5;
}
.upgrade.owned,.achiev.owned
{
    box-shadow:0px 0px 0px 2px rgba(0,0,0,0.5) inset;
    background:#55cf50;
]
}
.upgrade.owned:hover,.achiev.owned:hover
{
    background:#7dcc7a;
}
.thing.cantAfford
{
    opacity:0.65;
}
.upgrade.cantAfford
{
    border:none;
}
 .thing-costs{font-weight:bold;text-shadow:1px 1px 0px rgba(0,0,0,0.5);}
.cost.hasEnough{color:#0f0;}
.cost.notEnough{color:#f00;}
  .button>.thing-text
{
    text-decoration:underline;
}
 .building
{
    display:block;
    margin-right:0px;
    font-size:14px;
}
 .fullWidth
{
    display:block;
    margin-left:0px;
    margin-right:0px;
    z-index:10;
}
 .fullWidth,.fullWidth:hover
{
    background:rgba(0,0,0,0.75);
    box-shadow:none;
    color:#fff;
}
.fullWidth:before,.fullWidth:after
{
    content:'';
    height:1px;
    background:rgba(255,255,255,0.75);
    position:absolute;
    left:0px;
    right:0px;
    z-index:-1;
}
.fullWidth .thing-icon
{
    margin-top:-10px;
    margin-bottom:-10px;
}
.fullWidth .thing-text
{
    margin-top:-4px;
    margin-bottom:-4px;
}
 .listing
{
    font-weight:normal;
}
 .res
{
    vertical-align:middle;
}
 #game.filtersOn .thing-icon{filter:drop-shadow(3px 3px 1px rgba(0,0,0,0.5));}
 .tag-achievements
{
    margin-bottom:4px;
    display:inline-block;
    font-family:Verdana;
    font-weight:bold;
    border-radius:10px;
    border:3px solid black;
}
.tag-upgradesII
{
    margin-bottom:4px;
    display:inline-block;
    font-family:Verdana;
    font-weight:bold;
    border-radius:10px;
    border:3px solid black;
}
.tag-upgradesIII
{
    margin-bottom:4px;
    display:inline-block;
    font-family:Verdana;
    font-weight:bold;
    border-radius:10px;
    border:3px solid black;
}
.tag-prestigeII
{
    margin-bottom:4px;
    display:inline-block;
    font-family:Verdana;
    font-weight:bold;
    border-radius:10px;
    border:3px solid black;
}
#box-things-achievements
{
    display:inline-block;
}
#box-things-upgradesII
{
    display:inline-block;
}
#box-things-upgradesIV
{
    display:inline-block;
}
#box-things-prestigeII
{
    display:inline-block;
}

Comments

  •  icon
    01/01/70 12:00:00 AM UTC
    Plain Text |

    0 B

    |

    👍

    /

    👎

    
        
  •  icon
    01/01/70 12:00:00 AM UTC
    Plain Text |

    0 B

    |

    👍

    /

    👎