Skip to content

Instantly share code, notes, and snippets.

@Core-commits
Created July 1, 2020 12:51
Show Gist options
  • Save Core-commits/3f764a564c4ba9afbed0fc548c4e767c to your computer and use it in GitHub Desktop.
Save Core-commits/3f764a564c4ba9afbed0fc548c4e767c to your computer and use it in GitHub Desktop.
Brick Hill CSS code
.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