Created
July 1, 2020 12:51
-
-
Save Core-commits/3f764a564c4ba9afbed0fc548c4e767c to your computer and use it in GitHub Desktop.
Brick Hill CSS code
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.flex-container, | |
.fp { | |
display: flex | |
} | |
.flex-container.flex-column, | |
.fp.flex-column { | |
flex-direction: column | |
} | |
.flex-container .fc, | |
.flex-container .flex-child, | |
.fp .fc, | |
.fp .flex-child { | |
flex: 1 | |
} | |
.flex-container .fc.center-self, | |
.flex-container .flex-child.center-self, | |
.fp .fc.center-self, | |
.fp .flex-child.center-self { | |
align-self: center | |
} | |
.flex-container.content-center, | |
.fp.content-center { | |
justify-content: center | |
} | |
.flex-container .flex-card, | |
.fp .flex-card { | |
display: flex; | |
flex: 1 | |
} | |
.flex-container .flex-card.content, | |
.fp .flex-card.content { | |
flex: 1 | |
} | |
.overflow-auto { | |
overflow: auto | |
} | |
.block { | |
display: block | |
} | |
.text-right { | |
text-align: right | |
} | |
.text-left { | |
text-align: left | |
} | |
.circle { | |
border-radius: 50% | |
} | |
.unselectable { | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none | |
} | |
.ellipsis { | |
text-overflow: ellipsis; | |
overflow: hidden; | |
white-space: nowrap | |
} | |
li { | |
list-style: none | |
} | |
.no-right-rad, | |
div.no-right-rad, | |
label.no-right-rad { | |
border-top-right-radius: 0; | |
border-bottom-right-radius: 0 | |
} | |
.no-rad, | |
div.no-rad, | |
label.no-rad { | |
border-radius: 0 | |
} | |
.no-left-rad, | |
div.no-left-rad, | |
label.no-left-rad { | |
border-top-left-radius: 0; | |
border-bottom-left-radius: 0 | |
} | |
.absolute { | |
position: absolute | |
} | |
.absolute.right { | |
right: 0 | |
} | |
.absolute.left { | |
left: 0 | |
} | |
.absolute.top { | |
top: 0 | |
} | |
.absolute.bottom { | |
bottom: 0 | |
} | |
.f-right { | |
float: right | |
} | |
.f-left { | |
float: left | |
} | |
body, | |
html { | |
margin: 0; | |
padding: 0 | |
} | |
body { | |
position: relative; | |
min-height: 100vh | |
} | |
ol, | |
ul { | |
padding: 0; | |
margin: 0 | |
} | |
* { | |
box-sizing: border-box | |
} | |
a { | |
text-decoration: none; | |
color: inherit | |
} | |
button, | |
input, | |
option, | |
select, | |
textarea { | |
font-family: Montserrat, sans-serif; | |
font-weight: 500 | |
} | |
button { | |
font-weight: inherit | |
} | |
button:focus, | |
select:focus { | |
outline: none | |
} | |
@font-face { | |
font-family: montserrat; | |
font-weight: 500; | |
src: url(/fonts/montserrat_medium.woff2?f0f2716c5fe401d175b88715e7d28685) | |
} | |
@font-face { | |
font-family: montserrat; | |
font-weight: 600; | |
src: url(/fonts/montserrat_semibold.woff2?15c24f7109941777774ddd2c636c6a50) format("woff2"), url(/fonts/montserrat_semibold.ttf?31e34a4dc526ffb104e2d988f6f52516) format("ttf") | |
} | |
@font-face { | |
font-family: montserrat; | |
font-weight: 700; | |
src: url(/fonts/montserrat_bold.woff2?79982cd1f74c6fa7451bf9b37ead09ff) format("woff2"), url(/fonts/montserrat_bold.ttf?a8de8ffe262db7e277deb8f1c439c518) format("ttf") | |
} | |
body { | |
font-family: Montserrat, sans-serif; | |
font-weight: 500; | |
color: #000; | |
background-color: #ededed | |
} | |
nav { | |
width: 100%; | |
overflow: auto; | |
margin-bottom: 20px | |
} | |
nav div.primary { | |
overflow: auto; | |
background-color: #212121; | |
color: #fff; | |
font-size: 1.1em; | |
padding-top: 6px | |
} | |
nav div.primary ul li a:hover { | |
border-color: #a8a8a8 | |
} | |
nav div.secondary { | |
overflow: auto; | |
background-color: #3c3c3c; | |
color: #b4d2e3; | |
font-size: .9em; | |
padding-top: "0px" | |
} | |
nav div.secondary ul li a:hover { | |
border-color: #a8a8a8 | |
} | |
nav .info { | |
border-radius: 5px; | |
padding: 5px 10px; | |
background-color: #3d3d3d; | |
display: inline-block | |
} | |
nav .info div { | |
font-size: .8em; | |
padding: 0 10px | |
} | |
nav .info div, | |
nav .push-left, | |
nav .push-right { | |
display: inline-block | |
} | |
nav .push-left { | |
vertical-align: top | |
} | |
nav .push-right { | |
vertical-align: bottom | |
} | |
nav .username { | |
display: inline-block; | |
margin: 6px 0 0 28px; | |
cursor: pointer | |
} | |
@media handheld, | |
only screen and (max-width:767px) { | |
nav { | |
text-align: center | |
} | |
nav .grid { | |
padding-left: 10px | |
} | |
nav .username { | |
margin: 10px 0 | |
} | |
} | |
nav div ul { | |
overflow: auto; | |
list-style: none | |
} | |
nav div ul li { | |
display: inline-block; | |
padding: 0 1px | |
} | |
nav div ul li a { | |
display: inline-block; | |
padding: 8px 5px; | |
border-bottom: 2px solid transparent | |
} | |
.login-button { | |
border: 1px solid #10cb31; | |
color: #fff; | |
padding: 5px; | |
border-radius: 5px; | |
transition: background-color 50ms linear | |
} | |
.login-button:hover { | |
background-color: #10cb31 | |
} | |
.register-button { | |
border: 1px solid #00bcd4; | |
color: #fff; | |
padding: 5px; | |
border-radius: 5px; | |
transition: background-color 50ms linear | |
} | |
.register-button:hover { | |
background-color: #00bcd4 | |
} | |
.nav-notif, | |
.notif { | |
margin-top: -4px; | |
float: right; | |
background-color: #c60000; | |
padding: 2px 4px; | |
color: #fff; | |
font-size: .6em; | |
font-weight: 600; | |
border-radius: 5px | |
} | |
footer { | |
position: absolute; | |
bottom: 0; | |
width: 100%; | |
background-color: #212121; | |
text-align: center; | |
padding: 20px 0 | |
} | |
footer, | |
footer a { | |
color: #fff | |
} | |
.side-ad { | |
padding-top: 50px; | |
padding-left: 50px; | |
padding-right: 50px; | |
position: absolute | |
} | |
@media only screen and (max-width:1335px) { | |
.side-ad { | |
display: none | |
} | |
} | |
@media only screen and (max-width:1400px) { | |
.side-ad { | |
padding-left: 10px; | |
padding-right: 10px | |
} | |
} | |
@media only screen and (max-width:1500px) and (min-width:1400px) { | |
.side-ad { | |
padding-left: 25px; | |
padding-right: 25px | |
} | |
} | |
.card { | |
border-radius: 5px; | |
overflow: auto; | |
box-shadow: 0 2px 5px rgba(0, 0, 0, .2) | |
} | |
.card .top:not(.absolute) { | |
overflow: auto; | |
padding: 10px; | |
font-weight: 700; | |
color: #999; | |
background-color: #f8f8f8; | |
border-bottom: 1.5px solid; | |
border-color: #e8e8e8 | |
} | |
.card .top:not(.absolute).green { | |
color: #17c60a; | |
background-color: #e5fce2; | |
border-color: #17c60a | |
} | |
.card .top:not(.absolute).blue { | |
color: #419cd8; | |
background-color: #e8f7fe; | |
border-color: #419cd8 | |
} | |
.card .top:not(.absolute).red { | |
color: #fe5746; | |
background-color: #fedcde; | |
border-color: #fe5746 | |
} | |
.card .top:not(.absolute).orange { | |
color: #fc9700; | |
background-color: #feedaa; | |
border-color: #fc9700 | |
} | |
.card .content { | |
height: inherit; | |
overflow: auto; | |
padding: 10px; | |
background-color: #fff | |
} | |
.card .border { | |
border: 1px solid #dcdcdc | |
} | |
.card .name { | |
overflow: hidden; | |
color: #363636; | |
font-weight: 600; | |
display: inline-block | |
} | |
.card .creator { | |
overflow: hidden; | |
color: #6f6f74; | |
font-size: .9em | |
} | |
.card .thumbnail { | |
padding: 20px; | |
text-align: center; | |
background-color: #f9f9f9 | |
} | |
.card .thumbnail.no-padding { | |
padding: 0 | |
} | |
.card .thumbnail img { | |
height: 100%; | |
width: 100%; | |
display: block | |
} | |
.card .thumbnail.dark { | |
background-color: #4f4f4f | |
} | |
.card .footer { | |
border-top: 1px solid #ccc; | |
padding: 10px; | |
background-color: #f9f9f9 | |
} | |
.card .footer .playing { | |
text-align: right; | |
color: #c60100; | |
font-weight: 600 | |
} | |
.card:not(.no-margin) { | |
margin-bottom: 10px | |
} | |
.label { | |
font-size: .9em; | |
font-weight: 500; | |
color: #969696 | |
} | |
.label.dark { | |
color: #363636 | |
} | |
.label.dark-grey { | |
color: #727272 | |
} | |
.label.black { | |
color: #000 | |
} | |
.label.small { | |
font-size: .8em | |
} | |
.button, | |
button { | |
text-align: center; | |
padding: 10px 20px; | |
border-radius: 5px; | |
display: inline-block; | |
text-transform: uppercase; | |
color: #fff; | |
background-color: #d0d0d0; | |
border: 1px solid #adadad | |
} | |
.button.blue, | |
button.blue { | |
color: #fff; | |
background-color: #6fb6db; | |
border-color: #419dda | |
} | |
.button.green, | |
button.green { | |
color: #fff; | |
background-color: #7cdc83; | |
border-color: #66bf5b | |
} | |
.button.red, | |
button.red { | |
color: #fff; | |
background-color: #dc7c7c; | |
border-color: #da4141 | |
} | |
.button.orange, | |
button.orange { | |
color: #fff; | |
background-color: #f3b700; | |
border-color: #fc9700 | |
} | |
.button.hgreen, | |
button.hgreen { | |
color: #17c60a; | |
background-color: #e5fce2; | |
border-color: #17c60a | |
} | |
.button.hblue, | |
button.hblue { | |
color: #419cd8; | |
background-color: #e8f7fe; | |
border-color: #419cd8 | |
} | |
.button.hred, | |
button.hred { | |
color: #fe5746; | |
background-color: #fedcde; | |
border-color: #fe5746 | |
} | |
.button.horange, | |
button.horange { | |
color: #fc9700; | |
background-color: #feedaa; | |
border-color: #fc9700 | |
} | |
.button.bits, | |
button.bits { | |
color: #fff; | |
background-color: #f49b00; | |
border-color: #f49b00 | |
} | |
.button.bucks, | |
button.bucks { | |
color: #fff; | |
background-color: #009624; | |
border-color: #009624 | |
} | |
.button.free, | |
button.free { | |
color: #fff; | |
background-color: #6fb6db; | |
border-color: #419dda | |
} | |
.button:hover, | |
button:hover { | |
cursor: pointer | |
} | |
.button.no-cap, | |
button.no-cap { | |
text-transform: inherit | |
} | |
.button.flat, | |
button.flat { | |
border-color: transparent | |
} | |
.button.small, | |
button.small { | |
padding: 5px 10px | |
} | |
.button.purchase, | |
button.purchase { | |
font-size: 15px; | |
min-width: 100px | |
} | |
.button.tab-button, | |
button.tab-button { | |
font-weight: 600; | |
font-size: 17px | |
} | |
.button.tab-button.transparent, | |
button.tab-button.transparent { | |
background-color: transparent; | |
border-color: transparent; | |
color: #9e9e9e | |
} | |
.button.tab-button.transparent:hover, | |
button.tab-button.transparent:hover { | |
background-color: rgba(0, 0, 0, .1) | |
} | |
.tab-buttons { | |
margin-bottom: 10px | |
} | |
input, | |
textarea { | |
padding: 4px; | |
border-radius: 5px; | |
background-color: #fff; | |
border: 1px solid #d9d9d9 | |
} | |
input.rigid, | |
textarea.rigid { | |
border-radius: 2px; | |
padding: 10px; | |
background-color: #fafafa; | |
color: #797979; | |
border: 1px solid #ccc | |
} | |
input::-webkit-input-placeholder, | |
textarea::-webkit-input-placeholder { | |
font-weight: 600; | |
color: #d4d4d4 | |
} | |
input::-moz-placeholder, | |
textarea::-moz-placeholder { | |
font-weight: 600; | |
color: #d4d4d4 | |
} | |
input:-ms-input-placeholder, | |
textarea:-ms-input-placeholder { | |
font-weight: 600; | |
color: #d4d4d4 | |
} | |
input::-ms-input-placeholder, | |
textarea::-ms-input-placeholder { | |
font-weight: 600; | |
color: #d4d4d4 | |
} | |
input::placeholder, | |
textarea::placeholder { | |
font-weight: 600; | |
color: #d4d4d4 | |
} | |
input:focus, | |
textarea:focus { | |
outline: none | |
} | |
.input-group { | |
display: inline-flex; | |
margin-bottom: 4px; | |
overflow: auto; | |
border-radius: 5px; | |
border: 1px solid #d9d9d9 | |
} | |
.input-group.fill { | |
display: flex; | |
align-items: stretch | |
} | |
.input-group.fill .input-button { | |
flex: 0 | |
} | |
.input-group.fill .input, | |
.input-group.fill input, | |
.input-group.fill textarea { | |
flex: 1 | |
} | |
.input-group.rigid { | |
border-radius: 2px; | |
padding: 10px; | |
background-color: #fafafa; | |
color: #797979; | |
border: 1px solid #ccc | |
} | |
.input-group .input-button, | |
.input-group input, | |
.input-group textarea { | |
flex: 1; | |
border-radius: 0; | |
border: none | |
} | |
.input-group .input-button { | |
border-left: 1px solid #d9d9d9; | |
color: #cbcbcb; | |
background-color: #f8f8f8; | |
padding: 4px 15px; | |
font-size: 13.3px; | |
font-weight: 600 | |
} | |
.input-group .input-button:hover { | |
cursor: pointer | |
} | |
.width-100 { | |
display: block; | |
width: 100% | |
} | |
.select, | |
select { | |
background-color: #fff; | |
border-radius: 3px; | |
font-weight: 600; | |
padding: 8px; | |
color: #7f817f | |
} | |
.select option, | |
select option { | |
color: #7f817f | |
} | |
.select.small-padding, | |
select.small-padding { | |
padding: 0 8px | |
} | |
.bits-text { | |
color: #f49b00 | |
} | |
.bucks-text { | |
color: #009624 | |
} | |
.free-text { | |
color: #0f7bff | |
} | |
.offsale-text { | |
color: #515151 | |
} | |
.red-text { | |
color: #fe5746 | |
} | |
.blue-text { | |
color: #419cd8 | |
} | |
.green-text { | |
color: #10cb31 | |
} | |
.light-gray-text { | |
color: #9e9e9e | |
} | |
.gray-text { | |
color: #888 | |
} | |
.agray-text { | |
color: #6f6f74 | |
} | |
.dark-gray-text { | |
color: #727272 | |
} | |
.darkest-gray-text { | |
color: #565656 | |
} | |
.ablack-text { | |
color: #363636 | |
} | |
.select-color-text { | |
color: #7f817f | |
} | |
.black-text { | |
color: #000 | |
} | |
.favorite-text { | |
color: #fcc100 | |
} | |
.large-text { | |
font-size: 2em | |
} | |
.medium-text { | |
font-size: 1.5rem | |
} | |
.smedium-text { | |
font-size: 1.2rem | |
} | |
.normal-text { | |
font-size: 1rem | |
} | |
.small-text { | |
font-size: .9rem | |
} | |
.smaller-text { | |
font-size: .8rem | |
} | |
.bold { | |
font-weight: 600 | |
} | |
.very-bold { | |
font-weight: 700 | |
} | |
.cap-text { | |
text-transform: uppercase | |
} | |
.red-text { | |
color: red | |
} | |
.center-text, | |
.text-center { | |
text-align: center | |
} | |
.hover-cursor:hover { | |
cursor: pointer | |
} | |
.line, | |
hr { | |
border: 0; | |
height: 0; | |
border-top: 1px solid #eaeaea; | |
border-bottom: 1px solid #eaeaea | |
} | |
.alert { | |
margin-bottom: 10px; | |
border-radius: 5px; | |
text-align: center; | |
padding: 10px; | |
color: #fff | |
} | |
.alert.success { | |
background-color: #23d160 | |
} | |
.alert.error { | |
background-color: #ef263d | |
} | |
.alert.warning { | |
background-color: #ef9526 | |
} | |
.blockquote, | |
blockquote { | |
word-wrap: break-word; | |
padding: 3px 0 3px 3px; | |
border-left: 4px solid #eee; | |
margin-left: 0 | |
} | |
.blockquote.red, | |
blockquote.red { | |
border-color: #fd0303 | |
} | |
.blockquote.green, | |
blockquote.green { | |
border-color: #10cb31 | |
} | |
.blockquote.blue, | |
blockquote.blue { | |
border-color: #3292d3 | |
} | |
.blockquote.orange, | |
blockquote.orange { | |
border-color: #f3b700 | |
} | |
.tabs { | |
margin-bottom: 10px | |
} | |
.tabs .tab { | |
text-align: center; | |
color: #999; | |
border-radius: 5px 5px 0 0; | |
padding: 10px; | |
background-color: #f8f8f8; | |
border: 1px solid #dcdcdc; | |
font-size: 1.1rem | |
} | |
.tabs .tab.active { | |
background-color: #fff; | |
font-weight: 600; | |
border-bottom: 1px solid transparent | |
} | |
.tabs .tab:hover { | |
cursor: pointer | |
} | |
.tabs .tab-body { | |
min-width: 100%; | |
overflow: auto; | |
padding: 10px; | |
border: 1px solid #dcdcdc; | |
border-top: 0; | |
border-radius: 0 0 5px 5px; | |
background-color: #fff | |
} | |
.button-tabs .button-tab:not(.active), | |
.tabs .tab-body:not(.active) { | |
display: none | |
} | |
.vertical-tab { | |
border-radius: 5px; | |
list-style: none; | |
overflow: hidden | |
} | |
.vertical-tab .tab, | |
.vertical-tab li { | |
border-left: 4px solid transparent; | |
padding: 10px; | |
transition: background-color .1s linear | |
} | |
.vertical-tab .tab.active, | |
.vertical-tab li.active { | |
border-color: #fe5746; | |
background-color: #f8f8f8 | |
} | |
.vertical-tab .tab:hover, | |
.vertical-tab li:hover { | |
cursor: pointer; | |
border-color: #fe5746; | |
background-color: #f3f3f3 | |
} | |
.box { | |
border: 1px solid #ccc; | |
border-radius: 5px | |
} | |
.box.shaded { | |
background-color: #f9f9f9 | |
} | |
.box.img { | |
text-align: center | |
} | |
.box.game-img { | |
border: 0 transparent | |
} | |
.box.game-img img { | |
border-radius: 5px; | |
width: 100%; | |
display: block | |
} | |
.box.item-img { | |
padding: 50px; | |
text-align: center | |
} | |
.box.item-img img { | |
width: 100% | |
} | |
.box.item-img.special { | |
border: 5px solid #ffd52d | |
} | |
.box.item-img.owns { | |
border: 5px solid #4cb04c | |
} | |
.modal { | |
position: fixed; | |
z-index: 1000; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
overflow: auto; | |
background-color: rgba(0, 0, 0, .4) | |
} | |
.modal .close { | |
color: #aaa; | |
float: right; | |
font-size: 28px; | |
font-weight: 700; | |
margin-top: -10px | |
} | |
.modal .close:focus, | |
.modal .close:hover { | |
color: #000; | |
text-decoration: none; | |
cursor: pointer | |
} | |
.modal .modal-content { | |
background-color: #fefefe; | |
margin: 15% auto; | |
padding: 20px; | |
width: 20%; | |
min-width: 250px | |
} | |
.modal .modal-buttons { | |
display: flex; | |
justify-content: center; | |
margin-top: 20px | |
} | |
.modal .cancel-button { | |
background-color: #fff; | |
color: #000; | |
border: 1px solid #b8b8b8 | |
} | |
.hover-card:not(.thread-card) { | |
height: 128px | |
} | |
.hover-card { | |
transition: background-color .05s linear; | |
border-radius: 5px; | |
overflow: hidden | |
} | |
.hover-card:not(:last-of-type) { | |
margin-bottom: 5px; | |
margin-top: 5px | |
} | |
.hover-card:not(.np) { | |
padding: 5px | |
} | |
.hover-card.viewed { | |
background-color: #f9f9f9 | |
} | |
.hover-card:hover { | |
background-color: #f4f4f4 | |
} | |
.hover-card.clan .clan-logo { | |
height: 100%; | |
width: 10%; | |
margin-right: 1%; | |
float: left; | |
min-width: 114px | |
} | |
.hover-card.clan .clan-logo img { | |
height: 100%; | |
width: 100% | |
} | |
.hover-card.clan .clan-stats { | |
width: 86%; | |
float: left | |
} | |
.hover-card .clan-description { | |
overflow: hidden; | |
max-height: 200px; | |
display: -webkit-box; | |
-webkit-box-orient: vertical; | |
-webkit-line-clamp: 5; | |
text-overflow: -o-ellipsis-lastline | |
} | |
.hover-card .data-trade { | |
height: 100% | |
} | |
.more-popover { | |
position: absolute; | |
visibility: hidden; | |
z-index: 1000; | |
opacity: 0; | |
transition: visibility .2s, opacity .2s linear | |
} | |
.more-popover.active { | |
visibility: visible; | |
opacity: 1 | |
} | |
.more-popover li:not(:first-child):not(:last-child) * { | |
border-radius: 0 | |
} | |
.more-popover li:first-child * { | |
border-radius: 5px 5px 0 0 | |
} | |
.more-popover li:last-child * { | |
border-radius: 0 0 5px 5px | |
} | |
.more-popover li:only-child *, | |
.more-popover ul { | |
border-radius: 5px | |
} | |
.more-popover ul { | |
box-shadow: 0 2px 20px rgba(0, 0, 0, .3); | |
list-style-type: none; | |
top: -13px; | |
position: relative; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none | |
} | |
.more-popover li { | |
min-width: 125px | |
} | |
.more-popover li * { | |
color: #000; | |
background-color: #fff; | |
border-radius: 5px; | |
padding: 10px 0 10px 5px; | |
display: block; | |
transition: background-color .1s | |
} | |
.more-popover li :hover { | |
background-color: #f4f4f4 | |
} | |
.more-popover.user li * { | |
background-color: #636363; | |
color: #fff; | |
padding-right: 70px | |
} | |
.more-popover.user li :hover { | |
background-color: #585858 | |
} | |
dropdown { | |
display: none | |
} | |
#dropdown-v, | |
.dropdown { | |
position: absolute; | |
margin-right: 5px | |
} | |
.dropdown-content { | |
position: absolute; | |
z-index: 1000; | |
visibility: hidden; | |
opacity: 0; | |
transition: visibility .2s, opacity .2s linear | |
} | |
.dropdown-content.active { | |
display: block; | |
visibility: visible; | |
opacity: 1 | |
} | |
.dropdown-content.logout-dropdown li * { | |
color: #fff; | |
background-color: #636363 | |
} | |
.dropdown-content.logout-dropdown li :hover { | |
background-color: #585858 | |
} | |
.dropdown-content.logout-dropdown .dropdown-arrow { | |
border-bottom: 7px solid #636363 | |
} | |
.dropdown-content .dropdown-arrow { | |
z-index: 500; | |
left: 50%; | |
margin-left: -7px; | |
position: absolute; | |
top: -20px; | |
width: 0; | |
height: 0; | |
border-left: 7px solid transparent; | |
border-right: 7px solid transparent; | |
border-bottom: 7px solid #fff | |
} | |
.dropdown-content .user li * { | |
background-color: #636363; | |
color: #fff; | |
padding-right: 70px | |
} | |
.dropdown-content li :hover { | |
background-color: #f4f4f4 | |
} | |
.dropdown-content li { | |
cursor: pointer; | |
min-width: 125px | |
} | |
.dropdown-content li * { | |
color: #000; | |
background-color: #fff; | |
border-radius: 5px; | |
padding: 10px 0 10px 5px; | |
display: block; | |
transition: background-color .1s | |
} | |
.dropdown-content li:not(:first-child):not(:last-child) * { | |
border-radius: 0 | |
} | |
.dropdown-content li:first-child * { | |
border-radius: 5px 5px 0 0 | |
} | |
.dropdown-content li:last-child * { | |
border-radius: 0 0 5px 5px | |
} | |
.dropdown-content li:only-child * { | |
border-radius: 5px | |
} | |
.dropdown-content ul { | |
box-shadow: 0 2px 20px rgba(0, 0, 0, .3); | |
border-radius: 5px; | |
list-style-type: none; | |
top: -13px; | |
position: relative; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none | |
} | |
.pages { | |
text-align: center | |
} | |
.pages.red .page.active { | |
color: #fd0303 | |
} | |
.pages.green .page.active { | |
color: #10cb31 | |
} | |
.pages.blue .page.active { | |
color: #3292d3 | |
} | |
.pages.orange .page.active { | |
color: #f3b700 | |
} | |
.pages .page { | |
color: #a8a8a8; | |
padding: 5px; | |
font-weight: 600; | |
cursor: pointer | |
} | |
.pages .page:not(:last-child) { | |
padding-right: 5px | |
} | |
.pages .page.active { | |
color: #419cd8 | |
} | |
.fieldset { | |
border: 2px solid #999; | |
border-radius: 3px | |
} | |
.fieldset legend { | |
font-size: .9rem; | |
text-transform: capitalize; | |
color: #999; | |
font-weight: 600 | |
} | |
.fieldset.red { | |
border-color: #fe5746 | |
} | |
.fieldset.red legend { | |
color: #fe5746 | |
} | |
.fieldset.green { | |
border-color: #7cdc83 | |
} | |
.fieldset.green legend { | |
color: #7cdc83 | |
} | |
.m0 { | |
margin: 0!important | |
} | |
.m1 { | |
margin: 5px | |
} | |
.m2 { | |
margin: 10px | |
} | |
.m3 { | |
margin: 15px | |
} | |
.m4 { | |
margin: 20px | |
} | |
.m5 { | |
margin: 25px | |
} | |
.m6 { | |
margin: 30px | |
} | |
.ml0 { | |
margin-left: 0!important | |
} | |
.ml1 { | |
margin-left: 5px | |
} | |
.ml2 { | |
margin-left: 10px | |
} | |
.ml3 { | |
margin-left: 15px | |
} | |
.ml4 { | |
margin-left: 20px | |
} | |
.ml5 { | |
margin-left: 25px | |
} | |
.ml6 { | |
margin-left: 30px | |
} | |
.mr0 { | |
margin-right: 0!important | |
} | |
.mr1 { | |
margin-right: 5px | |
} | |
.mr2 { | |
margin-right: 10px | |
} | |
.mr3 { | |
margin-right: 15px | |
} | |
.mr4 { | |
margin-right: 20px | |
} | |
.mr5 { | |
margin-right: 25px | |
} | |
.mr6 { | |
margin-right: 30px | |
} | |
.mt0 { | |
margin-top: 0!important | |
} | |
.mt1 { | |
margin-top: 5px | |
} | |
.mt2 { | |
margin-top: 10px | |
} | |
.mt3 { | |
margin-top: 15px | |
} | |
.mt4 { | |
margin-top: 20px | |
} | |
.mt5 { | |
margin-top: 25px | |
} | |
.mt6 { | |
margin-top: 30px | |
} | |
.mb0 { | |
margin-bottom: 0!important | |
} | |
.mb1 { | |
margin-bottom: 5px | |
} | |
.mb2 { | |
margin-bottom: 10px | |
} | |
.mb3 { | |
margin-bottom: 15px | |
} | |
.mb4 { | |
margin-bottom: 20px | |
} | |
.mb5 { | |
margin-bottom: 25px | |
} | |
.mb6 { | |
margin-bottom: 30px | |
} | |
.p0 { | |
padding: 0!important | |
} | |
.p1 { | |
padding: 5px | |
} | |
.p2 { | |
padding: 10px | |
} | |
.p3 { | |
padding: 15px | |
} | |
.p4 { | |
padding: 20px | |
} | |
.p5 { | |
padding: 25px | |
} | |
.p6 { | |
padding: 30px | |
} | |
.pl0 { | |
padding-left: 0!important | |
} | |
.pl1 { | |
padding-left: 5px | |
} | |
.pl2 { | |
padding-left: 10px | |
} | |
.pl3 { | |
padding-left: 15px | |
} | |
.pl4 { | |
padding-left: 20px | |
} | |
.pl5 { | |
padding-left: 25px | |
} | |
.pl6 { | |
padding-left: 30px | |
} | |
.pr0 { | |
padding-right: 0!important | |
} | |
.pr1 { | |
padding-right: 5px | |
} | |
.pr2 { | |
padding-right: 10px | |
} | |
.pr3 { | |
padding-right: 15px | |
} | |
.pr4 { | |
padding-right: 20px | |
} | |
.pr5 { | |
padding-right: 25px | |
} | |
.pr6 { | |
padding-right: 30px | |
} | |
.pt0 { | |
padding-top: 0!important | |
} | |
.pt1 { | |
padding-top: 5px | |
} | |
.pt2 { | |
padding-top: 10px | |
} | |
.pt3 { | |
padding-top: 15px | |
} | |
.pt4 { | |
padding-top: 20px | |
} | |
.pt5 { | |
padding-top: 25px | |
} | |
.pt6 { | |
padding-top: 30px | |
} | |
.pb0 { | |
padding-bottom: 0!important | |
} | |
.pb1 { | |
padding-bottom: 5px | |
} | |
.pb2 { | |
padding-bottom: 10px | |
} | |
.pb3 { | |
padding-bottom: 15px | |
} | |
.pb4 { | |
padding-bottom: 20px | |
} | |
.pb5 { | |
padding-bottom: 25px | |
} | |
.pb6 { | |
padding-bottom: 30px | |
} | |
.search-user-card { | |
height: 100px | |
} | |
.search-user-card img { | |
height: 80px; | |
width: 80px; | |
float: left; | |
margin-right: 10px | |
} | |
.search-user-card .data .ellipsis { | |
white-space: normal; | |
word-wrap: break-word | |
} | |
.clan-img-holder { | |
border-radius: 5px; | |
background-color: #4f4f4f; | |
width: 225px; | |
height: 225px | |
} | |
.clan-img-holder img { | |
height: 100%; | |
width: 100% | |
} | |
.clan-edit-ranks table h5 { | |
margin-bottom: 0; | |
margin-top: 5px | |
} | |
.edit-member .clan-member { | |
position: relative; | |
padding-bottom: 0 | |
} | |
.clan-member { | |
display: inline-block; | |
padding: 12px; | |
text-align: center | |
} | |
.edit-member select { | |
width: 25%; | |
display: block; | |
min-width: 115px; | |
font-size: 14px | |
} | |
.clan-relation .clan-name { | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%); | |
margin-left: 5px; | |
max-width: 145px | |
} | |
.clan-relation .clan-form { | |
display: inline-block; | |
position: absolute; | |
top: 50%; | |
transform: translateY(-65%); | |
margin-left: 150px | |
} | |
.carousel { | |
overflow: hidden; | |
position: relative | |
} | |
.carousel ul li { | |
display: inline-block | |
} | |
.carousel-button { | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%); | |
border-radius: 3px; | |
padding: 5px; | |
transition: background-color .1s linear; | |
z-index: 999 | |
} | |
.carousel-button:hover { | |
background-color: rgba(0, 0, 0, .1) | |
} | |
.carousel-button.left { | |
border-left: 0; | |
left: 0 | |
} | |
.carousel-button.right { | |
border-right: 0; | |
right: 0 | |
} | |
.forum-links .inline { | |
display: inline-block | |
} | |
.forum-links a { | |
color: #888; | |
padding: 0 10px | |
} | |
.forum-links .inline .inline { | |
display: inline-block | |
} | |
.m0.thread-card { | |
padding: 10px; | |
border-radius: 0 | |
} | |
.divide { | |
width: 1px; | |
height: 100%; | |
background-color: #ccc; | |
padding: 10px 1px 10px 0 | |
} | |
.forum-tag { | |
position: relative; | |
background: #cbcbcb; | |
border-radius: 4px; | |
padding: 6px 8px; | |
color: #fff; | |
float: right | |
} | |
.forum-tag:after { | |
right: 100%; | |
top: 50%; | |
content: " "; | |
height: 0; | |
width: 0; | |
position: absolute; | |
border: 5px solid transparent; | |
border-right-color: #cbcbcb; | |
margin-top: -5px | |
} | |
.thread-label { | |
font-size: .6em; | |
color: #fff; | |
margin-right: 4px; | |
padding: 4px; | |
border-radius: 4px | |
} | |
.thread-label.blue { | |
background-color: #419cd8 | |
} | |
.thread-label.green { | |
background-color: #17c60a | |
} | |
.thread-label.red { | |
background-color: #fe5746 | |
} | |
.thread-label.orange { | |
background-color: #fc9700 | |
} | |
.thread { | |
padding-bottom: 10px; | |
border-bottom: 1px solid #cbcbcb | |
} | |
.thread, | |
.thread-row { | |
overflow: auto; | |
margin-bottom: 10px | |
} | |
.thread-row { | |
position: relative; | |
border-bottom: 2px solid #eaeaea | |
} | |
.thread-row .p { | |
word-wrap: break-word; | |
margin-bottom: 10px | |
} | |
.thread-row:last-child { | |
border-bottom: 0 | |
} | |
@media handheld, | |
only screen and (max-width:767px) { | |
.forum-links .content { | |
overflow-x: scroll | |
} | |
.forum-links { | |
display: block | |
} | |
} | |
.content .board div.stat { | |
text-align: center; | |
padding-top: 20px; | |
padding-right: 0 | |
} | |
.stat .title { | |
font-weight: 500; | |
font-size: .9em | |
} | |
.board-info a, | |
.stat .title { | |
color: #363636 | |
} | |
.card .topic div.stat { | |
padding-right: 0 | |
} | |
.board-info { | |
height: 60px | |
} | |
.forum-bar a { | |
color: #565656 | |
} | |
.forum-bar .fa-angle-double-right { | |
color: #bababa; | |
padding: 0 5px | |
} | |
.forum-options { | |
color: #9e9e9e; | |
margin-bottom: 10px | |
} | |
.admin-forum-options a, | |
.admin-forum-options button { | |
color: #9e9e9e; | |
display: inline-block; | |
text-decoration: none; | |
font-weight: 500; | |
font-size: 16px; | |
background-color: transparent; | |
border: none; | |
padding: 0 20px 0 0 | |
} | |
.admin-forum-options form { | |
display: inline-block | |
} | |
.report:hover { | |
color: #c60000; | |
cursor: pointer | |
} | |
.forum-reply:hover { | |
color: #419cd8 | |
} | |
.forum-quote:hover { | |
color: #10cb31 | |
} | |
.membership-top { | |
position: relative; | |
margin-top: -20px | |
} | |
.membership-top .membership-cubes { | |
width: 100%; | |
height: 200px | |
} | |
.membership-top .mem-bottom, | |
.membership-top .mem-top { | |
position: absolute; | |
left: 51px; | |
top: 22%; | |
color: #fff; | |
text-shadow: 0 0 1px #000; | |
font-size: 25px; | |
font-weight: 600; | |
max-width: 249px | |
} | |
.membership-top .mem-top-color { | |
color: #fca800; | |
text-shadow: 0 0 .5px #000 | |
} | |
.membership-top .mem-bottom { | |
top: calc(22% + 65px); | |
font-size: 14px; | |
max-width: 280px | |
} | |
.mem-cols { | |
white-space: nowrap; | |
margin-top: 20px; | |
overflow: hidden; | |
text-align: center | |
} | |
.mem-cols .col-1-3, | |
.mem-cols [class*=col-]:last-child { | |
padding-left: 10px; | |
padding-right: 10px | |
} | |
.mem-cols .col { | |
padding: 10px; | |
display: inline-block; | |
border: 1px solid #999; | |
height: 408px; | |
border-radius: 5px; | |
text-align: center; | |
position: relative; | |
transition: all .5s ease-in-out | |
} | |
.mem-cols .col.active { | |
width: calc(100% - 23px); | |
height: 500px | |
} | |
.mem-cols .col button { | |
position: absolute; | |
bottom: 10px; | |
left: calc(50% - 66.58px); | |
text-align: center | |
} | |
.mem-cols [class*=-membership] { | |
font-size: 17px; | |
font-weight: 600 | |
} | |
.mem-cols ul { | |
text-align: left; | |
margin-top: 10px | |
} | |
.mem-cols ul li { | |
color: #8d8d8d; | |
margin-top: 5px | |
} | |
.mem-cols ul li b { | |
color: #727272 | |
} | |
.mem-grad { | |
position: relative; | |
border: 1px solid transparent; | |
height: 150px | |
} | |
.mem-grad button { | |
position: absolute; | |
bottom: 5px; | |
left: 20px | |
} | |
.membership-info { | |
width: 100%; | |
box-sizing: border-box; | |
margin-top: 20px; | |
border: 1px solid #999; | |
border-radius: 3px; | |
position: absolute | |
} | |
.membership-image { | |
padding-right: 10px; | |
padding-left: 10px | |
} | |
.membership-image input[type=image] { | |
border: 0 | |
} | |
.membership-circle { | |
width: 100px; | |
height: 100px; | |
margin-left: 20px; | |
margin-top: 25px; | |
position: relative | |
} | |
.membership-circle img { | |
position: absolute; | |
width: 125%; | |
left: -12.5%; | |
top: -12.5% | |
} | |
.mem-bars { | |
position: absolute; | |
width: 100% | |
} | |
.mem-bars .mem-cols img { | |
max-width: 100% | |
} | |
.mem-bars.membership-fade-enter { | |
transform: translateX(-100%) | |
} | |
.mint-gradient { | |
background-image: linear-gradient(270deg, #e5f2f7, #fefefe) | |
} | |
.ace-gradient { | |
background-image: linear-gradient(270deg, #fededb, #fefefe) | |
} | |
.royal-gradient { | |
background-image: linear-gradient(270deg, #fdf1d8, #fefefe) | |
} | |
.mint-membership { | |
color: #7dbfdd | |
} | |
.ace-membership { | |
color: #fe5746 | |
} | |
.royal-membership { | |
color: #fdbc38 | |
} | |
.transition-wrapper { | |
overflow-x: hidden; | |
position: relative; | |
min-height: 456px | |
} | |
.membership-fade-enter-active, | |
.membership-fade-leave-active { | |
transition: all 1s | |
} | |
.membership-data.membership-fade-leave-active, | |
.membership-fade-enter { | |
transform: translateX(100%) | |
} | |
.membership-fade-leave-active { | |
transform: translateX(-100%) | |
} | |
.grid .col-3-12.set { | |
padding-left: 10px; | |
padding-right: 10px | |
} | |
.grid .col-3-12.set .thumbnail { | |
overflow: hidden | |
} | |
.grid .col-3-12.set .thumbnail img { | |
min-height: 155px; | |
max-height: 155px | |
} | |
.card .game-name { | |
height: 25px; | |
display: block | |
} | |
.shop-categories { | |
display: flex | |
} | |
.shop-categories .category { | |
flex: 1; | |
color: #888; | |
text-align: center | |
} | |
.shop-categories .category.active, | |
.shop-categories .category a:hover { | |
font-weight: 600; | |
color: #6f6f74; | |
cursor: pointer | |
} | |
.card .item-creator { | |
overflow: hidden; | |
color: #6f6f74; | |
font-size: .9em | |
} | |
.comment, | |
.item-page { | |
position: relative | |
} | |
.comment { | |
overflow: hidden | |
} | |
.comment .user-link { | |
position: relative | |
} | |
.comment img { | |
width: 100%; | |
max-width: 150px | |
} | |
.comment .comment-holder { | |
white-space: normal | |
} | |
.card .item-card-details, | |
.card .item-content { | |
font-weight: 500; | |
background-color: #f9f9f9; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
border-top: 1px solid #ccc; | |
padding: 10px; | |
max-height: 81px | |
} | |
.card .item-card-details .price, | |
.card .item-content .price { | |
overflow: hidden; | |
padding-top: 4px; | |
color: #515151 | |
} | |
@media handheld, | |
only screen and (max-width:767px) { | |
.shop-categories { | |
overflow-x: scroll | |
} | |
.shop-categories .category { | |
flex: none; | |
font-size: 14px; | |
display: inline-block; | |
padding-right: 15px; | |
padding-bottom: 10px | |
} | |
} | |
@media handheld, | |
only screen and (min-width:767px) { | |
.shop-bar { | |
height: 110px | |
} | |
.shop-bar .card { | |
height: 100px | |
} | |
} | |
.sellers .seller { | |
position: relative | |
} | |
.sellers .seller .owner img { | |
width: 100px; | |
display: inline-block | |
} | |
.sellers .price { | |
right: 0; | |
position: absolute; | |
top: 45%; | |
transform: translateY(-50%) | |
} | |
.sellers .price .serial { | |
font-size: .8em; | |
color: #6f6f74; | |
text-align: right | |
} | |
.sellers .seller:not(:last-child) { | |
padding-bottom: 5px; | |
margin-bottom: 10px; | |
border-bottom: 1px solid #eaeaea | |
} | |
.tabs .tab-holder .tab-body .recommended-item { | |
padding-left: 10px; | |
padding-right: 10px; | |
text-align: center | |
} | |
.file-img-box { | |
border: 1px solid #d9d9d9; | |
width: 156px; | |
height: 156px; | |
margin: auto auto 10px | |
} | |
.file-img-box img { | |
height: 100%; | |
width: 100%; | |
box-sizing: content-box | |
} | |
.upload-preview-box img { | |
height: 100%; | |
margin: auto; | |
box-sizing: content-box | |
} | |
.upload-preview-box { | |
position: relative; | |
border: 1px solid #d9d9d9; | |
border-radius: 5px; | |
text-align: center; | |
padding: 5px; | |
height: 256px; | |
width: 256px; | |
margin: auto | |
} | |
#upload-file-img, | |
#upload-file-model { | |
width: .1px; | |
height: .1px; | |
opacity: 0; | |
overflow: hidden; | |
position: absolute; | |
z-index: -1 | |
} | |
#upload-label { | |
cursor: pointer; | |
padding: 5px | |
} | |
.upload-label { | |
display: block; | |
margin-top: 5px; | |
text-align: left; | |
font-weight: 600 | |
} | |
.upload-submit { | |
float: left; | |
padding: 10px 20px; | |
margin-top: 10px; | |
cursor: pointer; | |
color: #fff | |
} | |
.upload-input { | |
margin-bottom: 10px; | |
display: block | |
} | |
.bucks-icon.bucks-take { | |
margin-left: 1.75px; | |
padding: 0 | |
} | |
.trade-items { | |
text-align: center | |
} | |
.tile-transition { | |
transition: all .5s ease-in-out; | |
max-height: 0 | |
} | |
.item-card-tile.small-tile { | |
margin-top: 2.5px; | |
height: 124px; | |
width: calc(25% - 15px); | |
border-radius: 3px; | |
box-sizing: border-box | |
} | |
.tile-holder { | |
margin-top: -5px; | |
margin-bottom: 11.5px; | |
text-align: center | |
} | |
.tile-holder.tile-transition { | |
overflow: hidden | |
} | |
.item-card-tile { | |
position: relative; | |
margin-top: 5px; | |
height: 164px; | |
width: calc(33.33% - 10px); | |
z-index: 1; | |
transition: all .2s ease-in-out, z-index .2s step-end, border 0s; | |
cursor: pointer | |
} | |
.item-card-tile:hover { | |
transition: all .2s ease-in-out, z-index 0s step-start, border 0s; | |
z-index: 5; | |
transform: scale(1.1) | |
} | |
.item-card-tile.selected .item-card-container { | |
border: 2px solid #4cb04c; | |
padding: 3px | |
} | |
.trade-serial { | |
margin: 0 | |
} | |
.item-card-data .bucks-icon { | |
transform: scale(.8); | |
margin-top: 1.75px; | |
margin-right: -2px; | |
padding: 0 | |
} | |
.item-card-data { | |
overflow: hidden; | |
margin-left: 3px; | |
max-height: 0; | |
opacity: 0; | |
transition: all .3s ease-in-out | |
} | |
.item-card-tile:hover .item-card-data { | |
max-height: 100px; | |
opacity: 1 | |
} | |
.item-card-container { | |
position: absolute; | |
text-align: left; | |
background-color: #fff; | |
border-radius: 3px; | |
box-shadow: 0 2px 5px rgba(0, 0, 0, .2); | |
padding: 5px; | |
width: 100%; | |
box-sizing: border-box | |
} | |
.item-card-image { | |
border-bottom: 1px solid #eaeaea | |
} | |
.item-card-image img { | |
width: 100% | |
} | |
.item-card-name { | |
margin: 3px | |
} | |
.trade-give-box { | |
top: 10px; | |
margin-left: 230px; | |
width: 100%; | |
max-width: calc(100% - 260px); | |
min-height: 100% | |
} | |
.trade-item-box { | |
border: 1px solid #ccc; | |
border-radius: 5px; | |
width: 100%; | |
min-height: 70%; | |
margin-top: 5px; | |
padding: 10px | |
} | |
.trade-item { | |
display: inline-block; | |
position: relative; | |
width: 125px; | |
height: 141px | |
} | |
.trade-item:not(:last-child):not(:nth-child(6n)) { | |
margin-right: 13.5px | |
} | |
.trade-item .serial { | |
top: 5px; | |
left: 5px; | |
color: #636363; | |
position: absolute | |
} | |
.trade-item img { | |
width: 110px; | |
border: 1px solid #ccc; | |
border-radius: 5px; | |
padding: 5px; | |
display: block | |
} | |
.trade-item .trade-name { | |
color: #636363; | |
font-size: 14px; | |
font-weight: 600 | |
} | |
.trade-ev { | |
font-weight: 600; | |
color: #636363; | |
font-size: 18px | |
} | |
.trade-bucks { | |
display: inline-block; | |
top: 32% | |
} | |
.trade-card { | |
float: left; | |
border-radius: 5px; | |
height: 60px; | |
width: 60px; | |
border: 2px solid #cdcdcd; | |
overflow: hidden; | |
margin-right: 10px; | |
margin-bottom: 10px | |
} | |
.trade-url { | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
display: block | |
} | |
.user-description-box.closed { | |
max-height: 100px; | |
white-space: normal; | |
overflow: hidden; | |
position: relative | |
} | |
.user-description-box:not(.closed) .user-desc { | |
padding-bottom: 24px | |
} | |
.toggle-user-desc { | |
white-space: normal; | |
word-break: break-word; | |
min-height: 100px | |
} | |
.toggle-user-desc:not(.open):after { | |
background-color: #fff; | |
color: grey; | |
position: absolute; | |
content: "..."; | |
text-align: right; | |
height: 24px; | |
padding-left: 5px; | |
bottom: -1px; | |
right: 0; | |
width: 100% | |
} | |
.read-more-desc { | |
position: absolute; | |
right: 0; | |
bottom: -5px; | |
padding: 0 5px 2px 0; | |
margin-bottom: 1px; | |
z-index: 1000; | |
background-color: #fff | |
} | |
.read-more-desc:hover { | |
cursor: pointer | |
} | |
.user-description-box { | |
position: relative | |
} | |
.friends-list li { | |
text-align: center; | |
padding: 0 2px | |
} | |
.friends-list li div { | |
width: 100% | |
} | |
.profile-card { | |
width: 128px; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
display: inline-block; | |
border-radius: 5px; | |
transition: background-color 50ms linear; | |
padding: 2px; | |
text-align: center | |
} | |
.profile-card:hover { | |
background-color: #ebebeb | |
} | |
.profile-card:not(.not-padded):not(:nth-child(3n)) { | |
margin-right: 5px | |
} | |
.profile-card:not(.crate) img { | |
height: 124px; | |
width: 124px | |
} | |
.profile-card.crate img { | |
width: 100%; | |
border: 1px solid #cbcbcb; | |
background-color: #fdfdfd; | |
border-radius: 5px; | |
padding: 5px | |
} | |
.profile-card.crate { | |
padding: 7px; | |
width: 100% | |
} | |
.profile-card.crate:not(:nth-child(5n)) { | |
margin-right: 1px | |
} | |
.friend-card { | |
width: 18.5%; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
display: inline-block; | |
border-radius: 5px; | |
transition: background-color 50ms linear; | |
padding: 2px; | |
text-align: center | |
} | |
.friend-card:hover { | |
background-color: #ebebeb | |
} | |
.friend-card img { | |
height: 150px; | |
width: 150px | |
} | |
.friend-card button { | |
margin-top: 5px; | |
margin-bottom: 5px | |
} | |
.trade-serial { | |
position: absolute; | |
margin: 4px; | |
border-radius: 4px; | |
opacity: .7; | |
padding: 2.5px; | |
background-color: #fff; | |
color: #767676; | |
font-size: 15px | |
} | |
.status-dot { | |
float: none; | |
display: inline-block; | |
margin-bottom: 3px; | |
background-color: #a2a2a2; | |
border-radius: 50%; | |
width: 10px; | |
height: 10px | |
} | |
.status-dot.online { | |
background-color: #00ab00 | |
} | |
.award-card { | |
height: 128px | |
} | |
.award-card img { | |
width: 128px; | |
float: left; | |
height: 100%; | |
margin-right: 10px | |
} | |
.crate-types { | |
border-right: 2px solid #ececec; | |
padding-right: 5px | |
} | |
.crate-types li { | |
cursor: pointer; | |
padding: 10px; | |
transition: background-color .1s linear | |
} | |
.crate-types li:first-child { | |
border-radius: 3px 3px 3px 0 | |
} | |
.crate-types li:last-child { | |
border-radius: 0 3px 3px 3px | |
} | |
.crate-types .active, | |
.crate-types :hover { | |
background-color: #f8f8f8; | |
border-left: 4px solid #fe5746 | |
} | |
.crate-types :hover { | |
background-color: #f3f3f3 | |
} | |
.set-list .set-slider, | |
.set-list .set-slider li, | |
.set-list .set-slider ul { | |
height: 100% | |
} | |
.set-list .set.active { | |
display: block | |
} | |
.set-list .set:not(.active) { | |
display: none | |
} | |
.set-list .set-title { | |
font-weight: 600; | |
font-size: 1.5rem | |
} | |
.set-list .set-stats { | |
text-align: center; | |
padding: 20px 20px 0 | |
} | |
.set-list .set-stats li { | |
width: 50%; | |
display: inline-block | |
} | |
.set-list .set-stats li div:first-child { | |
color: #797979 | |
} | |
.slider-button { | |
top: 175px; | |
position: absolute; | |
text-align: center; | |
color: #000; | |
z-index: 1000; | |
padding: 5px; | |
transition: background-color .1s linear | |
} | |
.slider-button:hover { | |
background-color: rgba(0, 0, 0, .24) | |
} | |
.slider-button.left { | |
border-radius: 0 3px 3px 0; | |
border-left: 0 | |
} | |
.slider-button.right { | |
border-radius: 3px 0 0 3px; | |
border-right: 0; | |
right: 0 | |
} | |
.status-time { | |
font-size: 14px | |
} | |
.status { | |
position: relative; | |
min-height: 80px | |
} | |
.status img { | |
width: 64px; | |
height: 64px; | |
float: left; | |
margin-right: 5px | |
} | |
.status .status-text { | |
white-space: normal; | |
word-break: break-word | |
} | |
.status .status-body { | |
margin-bottom: 15px | |
} | |
.register-checkbox { | |
border-radius: 3px; | |
padding: 3px; | |
margin: 0 | |
} | |
.register-checkbox, | |
select.register { | |
border: 1px solid #d9d9d9; | |
width: 100% | |
} | |
select.register { | |
-webkit-appearance: none | |
} | |
select.register.no-rad { | |
border-radius: 0; | |
border-left: 0; | |
border-right: 0 | |
} | |
.avatar-card { | |
width: 128px; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
display: inline-block; | |
border-radius: 5px; | |
padding: 2px; | |
text-align: center | |
} | |
.avatar-card.crate { | |
padding: 5px; | |
width: 125px | |
} | |
.avatar-card.crate .img-holder { | |
width: 100%; | |
border: 1px solid #cbcbcb; | |
border-radius: 5px; | |
padding: 10px | |
} | |
.avatar-card.crate img { | |
height: 95px; | |
background-color: #fdfdfd | |
} | |
.avatar-card.crate:not(:nth-child(5n)) { | |
margin-right: 1px | |
} | |
.loader { | |
position: absolute; | |
top: calc(50% - 50px); | |
left: calc(50% - 25px); | |
transform: translate(-50%, -50%); | |
border: 3px solid #f3f3f3; | |
border-top-color: #3498db; | |
border-radius: 50%; | |
width: 50px; | |
height: 50px; | |
-webkit-animation: spin 1.5s linear infinite; | |
animation: spin 1.5s linear infinite | |
} | |
@-webkit-keyframes spin { | |
0% { | |
transform: rotate(0deg) | |
} | |
to { | |
transform: rotate(1turn) | |
} | |
} | |
@keyframes spin { | |
0% { | |
transform: rotate(0deg) | |
} | |
to { | |
transform: rotate(1turn) | |
} | |
} | |
.outfit-overlay { | |
position: absolute; | |
left: 1px; | |
z-index: 10; | |
padding: 5px; | |
background-color: hsla(0, 0%, 100%, .87); | |
width: calc(100% - 5px); | |
height: calc(100% - 29px) | |
} | |
.outfit-overlay:not(.active) { | |
display: none | |
} | |
.outfit-overlay li { | |
font-size: 12px; | |
padding: 5px; | |
margin: 0 4px 5px; | |
border-radius: 5px; | |
transition: background-color .1s linear; | |
cursor: pointer | |
} | |
.outfit-overlay li:hover { | |
background-color: #419cd8 | |
} | |
.item-types { | |
margin-bottom: 10px | |
} | |
.item-types a { | |
font-size: 14.7px; | |
cursor: pointer | |
} | |
.item-types a.active { | |
font-weight: 600 | |
} | |
.item-types a:not(.active):hover { | |
text-decoration: underline | |
} | |
.settings input { | |
width: 100%; | |
box-sizing: border-box; | |
margin-bottom: 5px | |
} | |
.settings select { | |
min-width: 0; | |
height: 30px; | |
padding: 0 8px | |
} | |
.settings .tfa-qr-code svg { | |
width: 90%!important | |
} | |
.grid:after, | |
[class*=col-], | |
[class*=grid], | |
[class*=mobile-] { | |
box-sizing: border-box | |
} | |
[class*=col-] { | |
float: left; | |
min-height: 1px; | |
padding-right: 20px | |
} | |
[class*=col-]:last-child { | |
padding-right: 0 | |
} | |
[class*=col-].no-pad { | |
padding: 0 | |
} | |
.relative { | |
position: relative | |
} | |
.inline { | |
display: inline-block | |
} | |
.grid { | |
width: 100%; | |
max-width: 1140px; | |
min-width: 748px; | |
margin: 0 auto; | |
overflow: visible | |
} | |
.main-holder { | |
overflow: visible; | |
padding-bottom: 100px | |
} | |
.grid:after { | |
content: ""; | |
display: table; | |
clear: both | |
} | |
.grid-pad { | |
padding-top: 20px; | |
padding-left: 20px; | |
padding-right: 0 | |
} | |
.push-right { | |
float: right | |
} | |
.col-1-1 { | |
width: 100% | |
} | |
.col-2-3, | |
.col-8-12 { | |
width: 66.66% | |
} | |
.col-1-2, | |
.col-6-12 { | |
width: 50% | |
} | |
.col-1-3, | |
.col-4-12 { | |
width: 33.33% | |
} | |
.col-1-4, | |
.col-3-12 { | |
width: 25% | |
} | |
.col-1-5 { | |
width: 20% | |
} | |
.col-1-6, | |
.col-2-12 { | |
width: 16.667% | |
} | |
.col-1-7 { | |
width: 14.28% | |
} | |
.col-1-8 { | |
width: 12.5% | |
} | |
.col-1-9 { | |
width: 11.1% | |
} | |
.col-1-10 { | |
width: 10% | |
} | |
.col-1-11 { | |
width: 9.09% | |
} | |
.col-1-12 { | |
width: 8.33% | |
} | |
.col-11-12 { | |
width: 91.66% | |
} | |
.col-10-12 { | |
width: 83.333% | |
} | |
.col-9-12 { | |
width: 75% | |
} | |
.col-5-12 { | |
width: 41.66% | |
} | |
.col-7-12 { | |
width: 58.33% | |
} | |
.push-2-3, | |
.push-8-12 { | |
margin-left: 66.66% | |
} | |
.push-1-2, | |
.push-6-12 { | |
margin-left: 50% | |
} | |
.push-1-3, | |
.push-4-12 { | |
margin-left: 33.33% | |
} | |
.push-1-4, | |
.push-3-12 { | |
margin-left: 25% | |
} | |
.push-1-5 { | |
margin-left: 20% | |
} | |
.push-1-6, | |
.push-2-12 { | |
margin-left: 16.667% | |
} | |
.push-1-7 { | |
margin-left: 14.28% | |
} | |
.push-1-8 { | |
margin-left: 12.5% | |
} | |
.push-1-9 { | |
margin-left: 11.1% | |
} | |
.push-1-10 { | |
margin-left: 10% | |
} | |
.push-1-11 { | |
margin-left: 9.09% | |
} | |
.push-1-12 { | |
margin-left: 8.33% | |
} | |
.acc-1-2 { | |
width: 46%; | |
margin-right: 4%; | |
float: left | |
} | |
.main-holder>.col-10-12.push-1-12 { | |
padding-right: 0 | |
} | |
@media handheld, | |
only screen and (max-width:767px) { | |
.grid { | |
width: 100%; | |
min-width: 0; | |
margin-left: 0; | |
margin-right: 0; | |
padding-left: 20px; | |
padding-right: 10px | |
} | |
[class*=col-] { | |
width: auto; | |
float: none; | |
margin: 10px 0; | |
padding-left: 0; | |
padding-right: 10px | |
} | |
[class*=col-] [class*=col-]:not(.mobile-pad) { | |
padding-right: 0 | |
} | |
[class*=mobile-col-] { | |
float: left; | |
margin: 0 0 10px; | |
padding-left: 0; | |
padding-right: 10px; | |
padding-bottom: 0 | |
} | |
.mobile-col-1-1 { | |
width: 100% | |
} | |
.mobile-col-2-3, | |
.mobile-col-8-12 { | |
width: 66.66% | |
} | |
.mobile-col-1-2, | |
.mobile-col-6-12 { | |
width: 50% | |
} | |
.mobile-col-1-3, | |
.mobile-col-4-12 { | |
width: 33.33% | |
} | |
.mobile-col-1-4, | |
.mobile-col-3-12 { | |
width: 25% | |
} | |
.mobile-col-1-5 { | |
width: 20% | |
} | |
.mobile-col-1-6, | |
.mobile-col-2-12 { | |
width: 16.667% | |
} | |
.mobile-col-1-7 { | |
width: 14.28% | |
} | |
.mobile-col-1-8 { | |
width: 12.5% | |
} | |
.mobile-col-1-9 { | |
width: 11.1% | |
} | |
.mobile-col-1-10 { | |
width: 10% | |
} | |
.mobile-col-1-11 { | |
width: 9.09% | |
} | |
.mobile-col-1-12 { | |
width: 8.33% | |
} | |
.mobile-col-11-12 { | |
width: 91.66% | |
} | |
.mobile-col-10-12 { | |
width: 83.333% | |
} | |
.mobile-col-9-12 { | |
width: 75% | |
} | |
.mobile-col-5-12 { | |
width: 41.66% | |
} | |
.mobile-col-7-12 { | |
width: 58.33% | |
} | |
.hide-on-mobile { | |
display: none!important; | |
width: 0; | |
height: 0 | |
} | |
.tab-body, | |
.tabs .tab, | |
.tabs .tab.active { | |
border: 1px solid #dcdcdc; | |
border-radius: 5px | |
} | |
[class*=col-] .mobile-fill:first-child { | |
width: 98% | |
} | |
.mobile-fill { | |
width: 100% | |
} | |
[class*=col-] .mobile-half-fill { | |
width: 49.5% | |
} | |
[class*=col-] .mobile-half-fill:nth-child(2n) { | |
margin-left: .5% | |
} | |
[class*=col-] .mobile-half-fill:nth-child(odd) { | |
margin-right: .5% | |
} | |
.no-mobile { | |
display: none | |
} | |
} | |
.ace-icon, | |
.arrow-down, | |
.bits-icon, | |
.bucks-icon, | |
.friends-icon, | |
.icon, | |
.messages-icon, | |
.mint-icon, | |
.royal-icon, | |
.special-e-icon, | |
.special-icon { | |
vertical-align: top; | |
background-image: url(/images/all.svg?0ee4eddad885e31fec4c4aff1b0a5d18); | |
background-repeat: no-repeat; | |
background-size: auto auto; | |
display: inline-block | |
} | |
.mint-icon { | |
background-position: 0 0 | |
} | |
.ace-icon, | |
.mint-icon { | |
margin-left: 3px; | |
width: 24px; | |
height: 24px; | |
vertical-align: sub | |
} | |
.ace-icon { | |
background-position: -29px 0 | |
} | |
.royal-icon { | |
margin-left: 3px; | |
width: 24px; | |
height: 24px; | |
background-position: -58px 0; | |
vertical-align: sub | |
} | |
.bucks-icon { | |
background-position: 0 -29px | |
} | |
.bits-icon, | |
.bucks-icon { | |
padding-right: 3px; | |
width: 20px; | |
height: 20px | |
} | |
.bits-icon { | |
background-position: -25px -29px | |
} | |
.friends-icon { | |
background-position: -50px -29px | |
} | |
.friends-icon, | |
.messages-icon { | |
padding-right: 3px; | |
width: 20px; | |
height: 20px | |
} | |
.messages-icon { | |
background-position: -75px -29px | |
} | |
.arrow-down { | |
padding-right: 3px; | |
width: 17px; | |
height: 19px; | |
background-position: 0 -140px; | |
vertical-align: text-bottom; | |
margin-left: 10px | |
} | |
.special-icon { | |
background-position: 1px -75px | |
} | |
.special-e-icon, | |
.special-icon { | |
width: 60px; | |
height: 60px; | |
position: absolute; | |
top: 0; | |
right: 0 | |
} | |
.special-e-icon { | |
background-position: -64px -75px | |
} | |
.owned-check-tri { | |
position: absolute; | |
top: 0; | |
right: 0; | |
width: 0; | |
height: 0; | |
border-left: 50px solid transparent | |
} | |
.owned-check { | |
height: 2em; | |
font-size: 1em; | |
transform: translateY(-135%) translateX(-135%); | |
color: #fff; | |
text-align: center | |
} | |
.dropdown-arrow { | |
font-size: 20px; | |
color: #6f6f74; | |
cursor: pointer | |
} | |
.dropdown-arrow:hover { | |
font-weight: 600 | |
} | |
.item-more { | |
font-size: 20px; | |
color: #6f6f74 | |
} | |
.item-more:hover { | |
font-weight: 600 | |
} | |
.item-more-div { | |
position: absolute; | |
right: 0; | |
margin-right: 5px; | |
cursor: pointer | |
} | |
.owned-check-tri.special { | |
border-top: 50px solid #ffd52d | |
} | |
.owned-check-tri.owns { | |
border-top: 50px solid #4cb04c | |
} | |
.img-white { | |
-webkit-filter: brightness(0) invert(1); | |
filter: brightness(0) invert(1) | |
} | |
@font-face { | |
font-family: emote; | |
src: url(/fonts/emotes.ttf?d464f8422f1beb8418c58125421981d9), url(/fonts/emote.svg?0ee15858eaa22254a0b262c5c3b46797); | |
font-weight: 400; | |
font-style: normal | |
} | |
[class*=" emote-"]:before, | |
[class^=emote-]:before { | |
font-family: emote; | |
font-style: normal; | |
font-weight: 400; | |
display: inline-block; | |
text-decoration: inherit; | |
width: 1em; | |
margin-right: .2em; | |
text-align: center; | |
font-variant: normal; | |
text-transform: none; | |
line-height: 1em; | |
margin-left: .2em; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale | |
} | |
.emote-happy:before { | |
content: "\E800" | |
} | |
.emote-wink:before { | |
content: "\E801" | |
} | |
.emote-sad:before { | |
content: "\E802" | |
} | |
.emote-sleep:before { | |
content: "\E803" | |
} | |
.emote-thumbsup:before { | |
content: "\E804" | |
} | |
.emote-surprised:before { | |
content: "\E806" | |
} | |
.emote-tongue:before { | |
content: "\E807" | |
} | |
.emote-coffee:before { | |
content: "\E808" | |
} | |
.emote-sunglasses:before { | |
content: "\E809" | |
} | |
.emote-displeased:before { | |
content: "\E80A" | |
} | |
.emote-grin:before { | |
content: "\E80C" | |
} | |
.emote-angry:before { | |
content: "\E80D" | |
} | |
.emote-saint:before { | |
content: "\E80E" | |
} | |
.emote-cry:before { | |
content: "\E80F" | |
} | |
.emote-squint:before { | |
content: "\E811" | |
} | |
.emote-laugh:before { | |
content: "\E812" | |
} | |
.emote-wink2:before { | |
content: "\E813" | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment