SHOW:
|
|
- or go back to the newest paste.
| 1 | .box | |
| 2 | {
| |
| 3 | text-align:center; | |
| 4 | padding:0px; | |
| 5 | box-shadow:none; | |
| 6 | } | |
| 7 | ||
| 8 | .thing,.box-header,.box-footer,.box-bit | |
| 9 | {
| |
| 10 | background:#39f; | |
| 11 | 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; | |
| 12 | } | |
| 13 | .box-bit{border-radius:20px;}
| |
| 14 | ||
| 15 | .box-header | |
| 16 | {
| |
| 17 | border-bottom-left-radius:20px; | |
| 18 | border-bottom-right-radius:20px; | |
| 19 | margin-bottom:4px; | |
| 20 | } | |
| 21 | .box-footer | |
| 22 | {
| |
| 23 | border-top-left-radius:20px; | |
| 24 | border-top-right-radius:20px; | |
| 25 | margin-top:4px; | |
| 26 | } | |
| 27 | ||
| 28 | #box-main | |
| 29 | {
| |
| 30 | left:0px; | |
| 31 | top:0px; | |
| 32 | bottom:0px; | |
| 33 | overflow:hidden; | |
| 34 | width:30%; | |
| 35 | position:absolute; | |
| 36 | } | |
| 37 | #box-resources | |
| 38 | {
| |
| 39 | top:0px; | |
| 40 | left:30%; | |
| 41 | overflow:hidden; | |
| 42 | width:25%; | |
| 43 | height:75%; | |
| 44 | position:absolute; | |
| 45 | } | |
| 46 | #box-unlockables | |
| 47 | {
| |
| 48 | right:200px; | |
| 49 | top:0px; | |
| 50 | bottom:0px; | |
| 51 | width:calc(200px + 7%); | |
| 52 | position:absolute; | |
| 53 | } | |
| 54 | #box-buildings | |
| 55 | {
| |
| 56 | top:0px; | |
| 57 | bottom:0px; | |
| 58 | width:200px; | |
| 59 | right:0%; | |
| 60 | overflow-x:hidden; | |
| 61 | overflow-y:scroll; | |
| 62 | padding-bottom:48px;/* this is to accommodate the info and settings buttons */ | |
| 63 | position:absolute; | |
| 64 | } | |
| 65 | .thing | |
| 66 | {
| |
| 67 | display:inline-block; | |
| 68 | padding:0px; | |
| 69 | margin:2px; | |
| 70 | cursor:pointer; | |
| 71 | } | |
| 72 | .thing:hover,.thing.lit | |
| 73 | {
| |
| 74 | background:#6cf; | |
| 75 | } | |
| 76 | .thing.cantAfford | |
| 77 | {
| |
| 78 | opacity:0.65; | |
| 79 | } | |
| 80 | .upgrade.cantAfford | |
| 81 | {
| |
| 82 | box-shadow:0px 0px 4px #39f; | |
| 83 | border-radius:8px; | |
| 84 | } | |
| 85 | .upgrade.cantAfford:hover | |
| 86 | {
| |
| 87 | box-shadow:0px 0px 4px #6cf; | |
| 88 | } | |
| 89 | .upgrade.owned,.achiev.owned | |
| 90 | {
| |
| 91 | background:#6cf; | |
| 92 | } | |
| 93 | .thing-text,.thing-costs{font-weight:bold;}
| |
| 94 | ||
| 95 | .building | |
| 96 | {
| |
| 97 | border-top-left-radius:20px; | |
| 98 | border-bottom-left-radius:20px; | |
| 99 | display:block; | |
| 100 | margin-right:0px; | |
| 101 | font-size:14px; | |
| 102 | } | |
| 103 | ||
| 104 | .fullWidth | |
| 105 | {
| |
| 106 | display:block; | |
| 107 | margin-left:0px; | |
| 108 | margin-right:0px; | |
| 109 | z-index:10; | |
| 110 | } | |
| 111 | #game .fullWidth | |
| 112 | {
| |
| 113 | height:auto; | |
| 114 | min-height:auto; | |
| 115 | } | |
| 116 | .fullWidth,.fullWidth:hover | |
| 117 | {
| |
| 118 | /*background:rgba(0,0,0,0.5); | |
| 119 | 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%);*/ | |
| 120 | background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0) 100%); | |
| 121 | box-shadow:none; | |
| 122 | } | |
| 123 | .fullWidth:before,.fullWidth:after | |
| 124 | {
| |
| 125 | content:''; | |
| 126 | height:1px; | |
| 127 | background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0) 100%); | |
| 128 | position:absolute; | |
| 129 | left:0px; | |
| 130 | right:0px; | |
| 131 | z-index:-1; | |
| 132 | } | |
| 133 | .fullWidth:before{top:-1px;}
| |
| 134 | .fullWidth:after{bottom:-1px;}
| |
| 135 | ||
| 136 | .fullWidth .thing-icon | |
| 137 | {
| |
| 138 | margin-top:-14px; | |
| 139 | margin-bottom:-14px; | |
| 140 | } | |
| 141 | .fullWidth .thing-text | |
| 142 | {
| |
| 143 | margin-top:-4px; | |
| 144 | margin-bottom:-4px; | |
| 145 | } | |
| 146 | * { box-sizing: border-box; }
| |
| 147 | $duration: 30s; | |
| 148 | ||
| 149 | @-webkit-keyframes ticker {
| |
| 150 | 0% {
| |
| 151 | -webkit-transform: translate3d(0, 0, 0); | |
| 152 | transform: translate3d(0, 0, 0); | |
| 153 | visibility: visible; | |
| 154 | } | |
| 155 | ||
| 156 | 100% {
| |
| 157 | -webkit-transform: translate3d(-100%, 0, 0); | |
| 158 | transform: translate3d(-100%, 0, 0); | |
| 159 | } | |
| 160 | } | |
| 161 | ||
| 162 | @keyframes ticker {
| |
| 163 | 0% {
| |
| 164 | -webkit-transform: translate3d(0, 0, 0); | |
| 165 | transform: translate3d(0, 0, 0); | |
| 166 | visibility: visible; | |
| 167 | } | |
| 168 | ||
| 169 | 100% {
| |
| 170 | -webkit-transform: translate3d(-100%, 0, 0); | |
| 171 | transform: translate3d(-100%, 0, 0); | |
| 172 | } | |
| 173 | } | |
| 174 | ||
| 175 | .ticker-wrap {
| |
| 176 | ||
| 177 | position: fixed; | |
| 178 | bottom: 0; | |
| 179 | top:0px; | |
| 180 | width: 100%; | |
| 181 | overflow: hidden; | |
| 182 | height: 4rem; | |
| 183 | background-color: rgba(#000, 0.9); | |
| 184 | padding-left: 100%; | |
| 185 | box-sizing: content-box; | |
| 186 | ||
| 187 | .ticker {
| |
| 188 | ||
| 189 | display: inline-block; | |
| 190 | height: 4rem; | |
| 191 | line-height: 4rem; | |
| 192 | white-space: nowrap; | |
| 193 | padding-right: 100%; | |
| 194 | box-sizing: content-box; | |
| 195 | ||
| 196 | -webkit-animation-iteration-count: infinite; | |
| 197 | animation-iteration-count: infinite; | |
| 198 | -webkit-animation-timing-function: linear; | |
| 199 | animation-timing-function: linear; | |
| 200 | -webkit-animation-name: ticker; | |
| 201 | animation-name: ticker; | |
| 202 | -webkit-animation-duration: $duration; | |
| 203 | animation-duration: $duration; | |
| 204 | ||
| 205 | &__item {
| |
| 206 | ||
| 207 | display: inline-block; | |
| 208 | ||
| 209 | padding: 0 2rem; | |
| 210 | font-size: 2rem; | |
| 211 | color: white; | |
| 212 | ||
| 213 | } | |
| 214 | ||
| 215 | } | |
| 216 | ||
| 217 | } | |
| 218 | ||
| 219 | body { padding-bottom: 6rem; }
| |
| 220 | h1,h2,p {padding: 0 5%;}
| |
| 221 | ||
| 222 | #game.filtersOn .thing-icon{filter:drop-shadow(3px 3px 1px rgba(0,0,0,0.5));} |
