Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .box
- {
- text-align:center;
- padding:0px;
- box-shadow:none;
- }
- .thing,.box-header,.box-footer,.box-bit
- {
- background:#39f;
- box-shadow:0px 0px 4px rgba(0,0,0,0.2),1px 1px 2px rgba(0,0,0,0.5),0px 0px 4px rgba(255,255,255,0.5) inset;
- }
- .box-bit{border-radius:20px;}
- .box-header
- {
- border-bottom-left-radius:20px;
- border-bottom-right-radius:20px;
- margin-bottom:4px;
- }
- .box-footer
- {
- border-top-left-radius:20px;
- border-top-right-radius:20px;
- margin-top:4px;
- }
- #box-main
- {
- left:0px;
- top:0px;
- bottom:0px;
- overflow:hidden;
- width:30%;
- position:absolute;
- }
- #box-resources
- {
- top:0px;
- left:30%;
- overflow:hidden;
- width:25%;
- height:75%;
- position:absolute;
- }
- #box-unlockables
- {
- right:200px;
- top:0px;
- bottom:0px;
- width:calc(200px + 7%);
- position:absolute;
- }
- #box-buildings
- {
- top:0px;
- bottom:0px;
- width:200px;
- right:0%;
- overflow-x:hidden;
- overflow-y:scroll;
- padding-bottom:48px;/* this is to accommodate the info and settings buttons */
- position:absolute;
- }
- .thing
- {
- display:inline-block;
- padding:0px;
- margin:2px;
- cursor:pointer;
- }
- .thing:hover,.thing.lit
- {
- background:#6cf;
- }
- .thing.cantAfford
- {
- opacity:0.65;
- }
- .upgrade.cantAfford
- {
- box-shadow:0px 0px 4px #39f;
- border-radius:8px;
- }
- .upgrade.cantAfford:hover
- {
- box-shadow:0px 0px 4px #6cf;
- }
- .upgrade.owned,.achiev.owned
- {
- background:#6cf;
- }
- .thing-text,.thing-costs{font-weight:bold;}
- .building
- {
- border-top-left-radius:20px;
- border-bottom-left-radius:20px;
- display:block;
- margin-right:0px;
- font-size:14px;
- }
- .fullWidth
- {
- display:block;
- margin-left:0px;
- margin-right:0px;
- z-index:10;
- }
- #game .fullWidth
- {
- height:auto;
- min-height:auto;
- }
- .fullWidth,.fullWidth:hover
- {
- /*background:rgba(0,0,0,0.5);
- background:linear-gradient(to bottom,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0.5) 100%);*/
- background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0) 100%);
- box-shadow:none;
- }
- .fullWidth:before,.fullWidth:after
- {
- content:'';
- height:1px;
- background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0) 100%);
- position:absolute;
- left:0px;
- right:0px;
- z-index:-1;
- }
- .fullWidth:before{top:-1px;}
- .fullWidth:after{bottom:-1px;}
- .fullWidth .thing-icon
- {
- margin-top:-14px;
- margin-bottom:-14px;
- }
- .fullWidth .thing-text
- {
- margin-top:-4px;
- margin-bottom:-4px;
- }
- * { box-sizing: border-box; }
- $duration: 30s;
- @-webkit-keyframes ticker {
- 0% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- visibility: visible;
- }
- 100% {
- -webkit-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0);
- }
- }
- @keyframes ticker {
- 0% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- visibility: visible;
- }
- 100% {
- -webkit-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0);
- }
- }
- .ticker-wrap {
- position: fixed;
- bottom: 0;
- top:0px;
- width: 100%;
- overflow: hidden;
- height: 4rem;
- background-color: rgba(#000, 0.9);
- padding-left: 100%;
- box-sizing: content-box;
- .ticker {
- display: inline-block;
- height: 4rem;
- line-height: 4rem;
- white-space: nowrap;
- padding-right: 100%;
- box-sizing: content-box;
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
- animation-timing-function: linear;
- -webkit-animation-name: ticker;
- animation-name: ticker;
- -webkit-animation-duration: $duration;
- animation-duration: $duration;
- &__item {
- display: inline-block;
- padding: 0 2rem;
- font-size: 2rem;
- color: white;
- }
- }
- }
- body { padding-bottom: 6rem; }
- h1,h2,p {padding: 0 5%;}
- #game.filtersOn .thing-icon{filter:drop-shadow(3px 3px 1px rgba(0,0,0,0.5));}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement