183 lines
No EOL
3.9 KiB
SCSS
183 lines
No EOL
3.9 KiB
SCSS
$window-drag-area-height: 37px;
|
|
$cover-hover-scale: 1.2;
|
|
$cover-aspect-ratio: 2 / 3;
|
|
$cover-max-width: 150px;
|
|
$cover-max-height: $cover-aspect-ratio * $cover-max-width;
|
|
$cover-hover-width: $cover-max-width * $cover-hover-scale;
|
|
$cover-hover-height: $cover-max-height * $cover-hover-scale;
|
|
$cover-vertical-padding: ($cover-hover-height - $cover-max-height) / 2;
|
|
$cover-horizontal-padding: ($cover-hover-width - $cover-max-width) / 2;
|
|
$cover-gap: 16px;
|
|
$hero-aspect-ratio: 8 / 3;
|
|
$hero-max-height: 40vh;
|
|
|
|
.depot {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
position: relative;
|
|
flex-direction: row;
|
|
|
|
.ant-drawer-content-wrapper {
|
|
height: calc(100% - 128px) !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.ant-result {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ant-spin-nested-loading,
|
|
.ant-spin-nested-loading > div {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.depot-filter {
|
|
position: relative;
|
|
z-index: 500;
|
|
width: 320px;
|
|
margin-top: 74px;
|
|
flex-shrink: 0;
|
|
padding: 16px;
|
|
overflow-y: scroll;
|
|
background-color: #141414;
|
|
|
|
.ant-form-item {
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
|
|
.depot-list {
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
padding-top: $window-drag-area-height * 2;
|
|
padding-left: $cover-horizontal-padding + $cover-gap;
|
|
padding-right: $cover-horizontal-padding + $cover-gap;
|
|
padding-bottom: $cover-vertical-padding + ($cover-gap * 2);
|
|
background: linear-gradient(0deg, #111 0%, #000 25%, #000 75%, #111 100%);
|
|
|
|
&-spinner > div > .ant-spin-container {
|
|
overflow-y: scroll;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.depot-list-items,
|
|
.depot-list-group-items {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax($cover-max-width, 1fr));
|
|
gap: $cover-gap;
|
|
}
|
|
|
|
.depot-game {
|
|
display: flex;
|
|
align-items: center;
|
|
aspect-ratio: 2 / 3;
|
|
|
|
&-cover {
|
|
transition: all .25s;
|
|
box-shadow: 0px 0px 0px 0px #000;
|
|
position: relative;
|
|
cursor: pointer;
|
|
flex-grow: 1;
|
|
|
|
&:hover {
|
|
transform: scale($cover-hover-scale);
|
|
box-shadow: 0px 0px 64px 32px #000;
|
|
z-index: 100;
|
|
}
|
|
}
|
|
|
|
&-add-btn,
|
|
&-add-btn.ant-btn.ant-btn-loading {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
opacity: 0;
|
|
transition: opacity .25s;
|
|
}
|
|
|
|
&-cover:hover &-add-btn {
|
|
opacity: 1;
|
|
}
|
|
|
|
&-default-cover {
|
|
aspect-ratio: $cover-aspect-ratio;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(to bottom, #555 0%, #333 100%);
|
|
font-size: 20px;
|
|
padding: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.depot-game-details {
|
|
z-index: 600 !important;
|
|
|
|
.ant-drawer-mask {
|
|
background: linear-gradient(45deg, #00000096, #3a3a3a8a);
|
|
backdrop-filter: blur(3px);
|
|
z-index: auto;
|
|
}
|
|
|
|
.ant-drawer-content {
|
|
background: #000;
|
|
}
|
|
|
|
.ant-drawer-header-no-title {
|
|
display: none;
|
|
}
|
|
|
|
.ant-drawer-content-wrapper {
|
|
height: calc(100% - 128px) !important;
|
|
width: $hero-aspect-ratio * $hero-max-height;
|
|
left: calc(50vw - 53.33vh);
|
|
right: auto;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ant-drawer-open .ant-drawer-content-wrapper {
|
|
box-shadow: 0 0 64px black;
|
|
}
|
|
|
|
.ant-drawer-body {
|
|
padding: 0;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
.game-hero {
|
|
position: relative;
|
|
aspect-ratio: $hero-aspect-ratio;
|
|
height: $hero-max-height;
|
|
}
|
|
|
|
&-background {
|
|
object-fit: cover;
|
|
max-height: 20vw;
|
|
}
|
|
|
|
.game-details-close-btn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
}
|
|
} |