@import "colors.less";
body,
html {
position: fixed;
overflow: hidden;
overscroll-behavior: none;
}
body {
margin: 0px;
width: 100vw;
height: 100vh;
background-color: @black;
}
.ui-container {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 20;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
> .right {
position: absolute;
right: 10px;
top: 94px;
}
&.mobile {
.uiTooltipInfo {
display: none !important;
}
}
&.hideMonetization .monetization {
display: none;
}
}
.mobile.ui-container > .right {
top: 10px;
right: 158px;
z-index: 2;
display: flex;
flex-direction: row-reverse;
}
* {
box-sizing: border-box;
font-family: bitty;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.canvas-container {
position: relative;
float: left;
&.visible {
opacity: 1;
transition: 1s;
}
canvas {
left: 0px;
top: 0px;
width: 100vw;
}
}
.disabled {
opacity: 0.4 !important;
pointer-events: none !important;
}
.hidden {
display: none !important;
}
[class^="ui"] {
input,
textarea {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.el {
height: 35px;
text-align: center;
padding: 0px 0px 0px 0px;
background-color: transparent;
}
.textbox {
border: none;
outline: none;
font-size: 16px;
}
div.textbox {
padding-top: 6px;
}
.btn {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: lighten(@black, 10%);
}
}
.spacer-h {
width: 100%;
}
&.modal {
.btnClose {
position: absolute;
background-color: @blackA;
color: @orangeA;
cursor: pointer;
height: 31px;
width: 31px;
text-align: center;
right: 0px;
top: 0px;
padding-top: 0px;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: lighten(@blackA, 10%);
}
}
}
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background-color: @blackB;
-webkit-border-radius: 0px;
border-radius: 0px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 0px;
background: @grayC;
}
:root {
scrollbar-color: @grayC @blackB !important;
scrollbar-width: thin !important;
--color-element-default: @white;
--color-element-arcane: @pinkA;
--color-element-frost: @blueA;
--color-element-fire: @redA;
--color-element-holy: @yellowA;
--color-element-poison: @tealB;
}
.q0 {
color: @qualityCommon;
}
.q1 {
color: @qualityMagic;
}
.q2 {
color: @qualityRare;
}
.q3 {
color: @qualityEpic;
}
.q4 {
color: @qualityLegendary;
}
.chat-style-white {
color: @white !important;
}
.chat-style-cyan {
color: @blueA !important;
}
.color-red {
color: @redB !important;
}
.color-redA {
color: @redA !important;
}
.color-blueA {
color: @blueA !important;
}
.color-blueB {
color: @blueB !important;
}
.color-greenB {
color: @greenB !important;
}
.color-yellowB {
color: @yellowB !important;
}
.color-green {
color: @greenA !important;
}
.color-brownC {
color: @brownC !important;
}
.color-brownD {
color: @brownD !important;
}
.color-grayA {
color: @white !important;
}
.color-grayB {
color: @grayB !important;
}
.color-grayC {
color: @grayC !important;
}
.color-grayD {
color: @grayD !important;
}
.color-pinkA {
color: @pinkA !important;
}
.color-pinkB {
color: @pinkB !important;
}
.color-purpleA {
color: @purpleA !important;
}
.color-tealB {
color: @tealB !important;
}
[class^="ui"] .renderItem {
width: 72px;
height: 72px;
float: left;
position: relative;
cursor: pointer;
box-sizing: border-box;
margin: 4px;
background-color: @blackD;
&.hover {
background-color: fade(@blueA, 10%);
}
&.dragging {
position: absolute;
opacity: 0.5;
pointer-events: none;
background-color: transparent;
.icon {
filter: brightness(100%)
drop-shadow(0px -4px 0px @blackD)
drop-shadow(0px 4px 0px @blackD)
drop-shadow(4px 0px 0px @blackD)
drop-shadow(-4px 0px 0px @blackD);
-moz-filter: brightness(100%)
drop-shadow(0px -4px 0px @blackD)
drop-shadow(0px 4px 0px @blackD)
drop-shadow(4px 0px 0px @blackD)
drop-shadow(-4px 0px 0px @blackD);
}
}
.quantity {
left: 6px;
bottom: 3px;
position: absolute;
color: @white;
filter: drop-shadow(0px -2px 0px @blackD)
drop-shadow(0px 2px 0px @blackD)
drop-shadow(2px 0px 0px @blackD)
drop-shadow(-2px 0px 0px @blackD);
-moz-filter: drop-shadow(0px -2px 0px @blackD)
drop-shadow(0px 2px 0px @blackD)
drop-shadow(2px 0px 0px @blackD)
drop-shadow(-2px 0px 0px @blackD);
}
.icon {
width: 64px;
height: 64px;
position: absolute;
left: 4px;
top: 4px;
image-rendering: optimizeSpeed;
image-rendering: pixelated;
image-rendering: crisp-edges;
transform-origin: 0 0;
}
&.eq {
.quantity {
color: @yellowA;
}
}
&.new {
.quantity {
color: @greenA;
}
}
&:hover {
.icon {
filter: brightness(160%);
-moz-filter: brightness(160%);
}
}
&.spriteSize8 {
.icon {
transform: scale(4);
-webkit-transform: scale(4);
margin: 16px;
}
}
&.spriteSize24 {
.icon {
transform: scale(4);
-webkit-transform: scale(4);
margin: -44px -16px;
}
}
}
.hasBorderShadow {
box-shadow: 0 -2px 0 @black, 0 2px 0 @black, 2px 0 0 @black, -2px 0 0 @black;
}