mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-02-09 03:37:45 +03:00
migration to scss
no .tsx changes were made, yet
This commit is contained in:
Nate
parent
f5395305eb
commit
50df38856d
21
src/renderer/src/_theme.scss
Normal file
21
src/renderer/src/_theme.scss
Normal file
@ -0,0 +1,21 @@
|
||||
$spacing-unit: 8px;
|
||||
|
||||
$color-background: #1c1c1c;
|
||||
$color-dark-background: #151515;
|
||||
$color-muted: #c0c1c7;
|
||||
$color-body: #8e919b;
|
||||
$color-border: rgba(255, 255, 255, 0.15);
|
||||
$color-success: #1c9749;
|
||||
$color-danger: #e11d48;
|
||||
$color-warning: #ffc107;
|
||||
|
||||
$opacity-disabled: 0.5;
|
||||
$opacity-active: 0.7;
|
||||
|
||||
$size-body: 14px;
|
||||
$size-small: 12px;
|
||||
|
||||
$z-index-toast: 5;
|
||||
$z-index-bottom-panel: 3;
|
||||
$z-index-title-bar: 4;
|
||||
$z-index-backdrop: 4;
|
||||
@ -1,134 +0,0 @@
|
||||
import {
|
||||
ComplexStyleRule,
|
||||
createContainer,
|
||||
globalStyle,
|
||||
style,
|
||||
} from "@vanilla-extract/css";
|
||||
import { SPACING_UNIT, vars } from "./theme.css";
|
||||
|
||||
export const appContainer = createContainer();
|
||||
|
||||
globalStyle("*", {
|
||||
boxSizing: "border-box",
|
||||
});
|
||||
|
||||
globalStyle("::-webkit-scrollbar", {
|
||||
width: "9px",
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
});
|
||||
|
||||
globalStyle("::-webkit-scrollbar-track", {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.03)",
|
||||
});
|
||||
|
||||
globalStyle("::-webkit-scrollbar-thumb", {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.08)",
|
||||
borderRadius: "24px",
|
||||
});
|
||||
|
||||
globalStyle("::-webkit-scrollbar-thumb:hover", {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.16)",
|
||||
});
|
||||
|
||||
globalStyle("html, body, #root, main", {
|
||||
height: "100%",
|
||||
});
|
||||
|
||||
globalStyle("body", {
|
||||
overflow: "hidden",
|
||||
userSelect: "none",
|
||||
fontFamily: "Noto Sans, sans-serif",
|
||||
fontSize: vars.size.body,
|
||||
color: vars.color.body,
|
||||
margin: "0",
|
||||
});
|
||||
|
||||
globalStyle("button", {
|
||||
padding: "0",
|
||||
backgroundColor: "transparent",
|
||||
border: "none",
|
||||
fontFamily: "inherit",
|
||||
});
|
||||
|
||||
globalStyle("h1, h2, h3, h4, h5, h6, p", {
|
||||
margin: 0,
|
||||
});
|
||||
|
||||
globalStyle("p", {
|
||||
lineHeight: "20px",
|
||||
});
|
||||
|
||||
globalStyle("#root, main", {
|
||||
display: "flex",
|
||||
});
|
||||
|
||||
globalStyle("#root", {
|
||||
flexDirection: "column",
|
||||
});
|
||||
|
||||
globalStyle("main", {
|
||||
overflow: "hidden",
|
||||
});
|
||||
|
||||
globalStyle(
|
||||
"input::-webkit-outer-spin-button, input::-webkit-inner-spin-button",
|
||||
{
|
||||
WebkitAppearance: "none",
|
||||
margin: "0",
|
||||
}
|
||||
);
|
||||
|
||||
globalStyle("label", {
|
||||
fontSize: vars.size.body,
|
||||
});
|
||||
|
||||
globalStyle("input[type=number]", {
|
||||
MozAppearance: "textfield",
|
||||
});
|
||||
|
||||
globalStyle("img", {
|
||||
WebkitUserDrag: "none",
|
||||
} as Record<string, string>);
|
||||
|
||||
globalStyle("progress[value]", {
|
||||
WebkitAppearance: "none",
|
||||
});
|
||||
|
||||
export const container = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
containerName: appContainer,
|
||||
containerType: "inline-size",
|
||||
});
|
||||
|
||||
export const content = style({
|
||||
overflowY: "auto",
|
||||
alignItems: "center",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
position: "relative",
|
||||
height: "100%",
|
||||
background: `linear-gradient(0deg, ${vars.color.darkBackground} 50%, ${vars.color.background} 100%)`,
|
||||
});
|
||||
|
||||
export const titleBar = style({
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "35px",
|
||||
minHeight: "35px",
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
alignItems: "center",
|
||||
padding: `0 ${SPACING_UNIT * 2}px`,
|
||||
WebkitAppRegion: "drag",
|
||||
zIndex: "4",
|
||||
borderBottom: `1px solid ${vars.color.border}`,
|
||||
} as ComplexStyleRule);
|
||||
|
||||
export const cloudText = style({
|
||||
background: "linear-gradient(270deg, #16B195 50%, #3E62C0 100%)",
|
||||
backgroundClip: "text",
|
||||
color: "transparent",
|
||||
});
|
||||
@ -1,4 +1,4 @@
|
||||
@use "./scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 9px;
|
||||
background-color: globals.$dark-background-color;
|
||||
background-color: $dark-background-color;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@ -32,11 +32,9 @@ main {
|
||||
body {
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
font-family:
|
||||
Noto Sans,
|
||||
sans-serif;
|
||||
font-size: globals.$body-font-size;
|
||||
color: globals.$body-color;
|
||||
font-family: "Noto Sans, sans-serif";
|
||||
font-size: 14px; // Assuming vars.size.body is 14px
|
||||
color: $body-color;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -81,7 +79,11 @@ input::-webkit-inner-spin-button {
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: globals.$body-font-size;
|
||||
font-size: 14px; // Assuming vars.size.body is 14px
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -92,45 +94,43 @@ progress[value] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
.app-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
container-name: globals.$app-container;
|
||||
container-type: inline-size;
|
||||
|
||||
&__content {
|
||||
overflow-y: auto;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
globals.$dark-background-color 50%,
|
||||
globals.$background-color 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
.app-container__content {
|
||||
overflow-y: auto;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
$dark-background-color 50%,
|
||||
$background-color 100%
|
||||
);
|
||||
}
|
||||
|
||||
.app-container__title-bar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
min-height: 35px;
|
||||
background-color: globals.$dark-background-color;
|
||||
background-color: $dark-background-color;
|
||||
align-items: center;
|
||||
padding: 0 calc(globals.$spacing-unit * 2);
|
||||
padding: 0 $spacing-unit * 2;
|
||||
-webkit-app-region: drag;
|
||||
z-index: 4;
|
||||
border-bottom: 1px solid globals.$border-color;
|
||||
|
||||
&__cloud-text {
|
||||
background: linear-gradient(270deg, #16b195 50%, #3e62c0 100%);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
z-index: $title-bar-z-index;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.app-container__cloud-text {
|
||||
background: linear-gradient(270deg, #16b195 50%, #3e62c0 100%);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
@ -275,10 +275,10 @@ export function App() {
|
||||
<main>
|
||||
<Sidebar />
|
||||
|
||||
<article className="container">
|
||||
<article className="app-container">
|
||||
<Header />
|
||||
|
||||
<section ref={contentRef} className="container__content">
|
||||
<section ref={contentRef} className="app-container__content">
|
||||
<Outlet />
|
||||
</section>
|
||||
</article>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.profile-avatar {
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: globals.$background-color;
|
||||
border: solid 1px globals.$border-color;
|
||||
background-color: $background-color;
|
||||
border: solid 1px $border-color;
|
||||
cursor: pointer;
|
||||
color: globals.$muted-color;
|
||||
color: $muted-color;
|
||||
position: relative;
|
||||
|
||||
&__image {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.backdrop {
|
||||
animation-name: backdrop-fade-in;
|
||||
@ -10,9 +10,9 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: globals.$backdrop-z-index;
|
||||
z-index: $backdrop-z-index;
|
||||
top: 0;
|
||||
padding: calc(globals.$spacing-unit * 3);
|
||||
padding: calc($spacing-unit * 3);
|
||||
backdrop-filter: blur(2px);
|
||||
transition: all ease 0.2s;
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
&--windows {
|
||||
padding-top: calc(#{globals.$spacing-unit * 3} + 35);
|
||||
padding-top: calc(#{$spacing-unit * 3} + 35);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.badge {
|
||||
color: globals.$muted-color;
|
||||
color: $muted-color;
|
||||
font-size: 10px;
|
||||
padding: calc(globals.$spacing-unit / 2) globals.$spacing-unit;
|
||||
border: solid 1px globals.$muted-color;
|
||||
padding: calc($spacing-unit / 2) $spacing-unit;
|
||||
border: solid 1px $muted-color;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.bottom-panel {
|
||||
width: 100%;
|
||||
border-top: solid 1px globals.$border-color;
|
||||
background-color: globals.$background-color;
|
||||
padding: calc(globals.$spacing-unit / 2) calc(globals.$spacing-unit * 2);
|
||||
border-top: solid 1px $border-color;
|
||||
background-color: $background-color;
|
||||
padding: calc($spacing-unit / 2) calc($spacing-unit * 2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all ease 0.2s;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: globals.$bottom-panel-z-index;
|
||||
z-index: $bottom-panel-z-index;
|
||||
|
||||
&__downloads-button {
|
||||
color: globals.$body-color;
|
||||
color: $body-color;
|
||||
border-bottom: solid 1px transparent;
|
||||
|
||||
&:hover {
|
||||
border-bottom: solid 1px globals.$body-color;
|
||||
border-bottom: solid 1px $body-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.button {
|
||||
padding: globals.$spacing-unit globals.$spacing-unit * 2;
|
||||
background-color: globals.$muted-color;
|
||||
padding: $spacing-unit $spacing-unit * 2;
|
||||
background-color: $muted-color;
|
||||
border-radius: 8px;
|
||||
border: solid 1px transparent;
|
||||
transition: all ease 0.2s;
|
||||
@ -11,14 +11,14 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: globals.$spacing-unit;
|
||||
gap: $spacing-unit;
|
||||
|
||||
&:active {
|
||||
opacity: globals.$active-opacity;
|
||||
opacity: $active-opacity;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: globals.$disabled-opacity;
|
||||
opacity: $disabled-opacity;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@ -28,14 +28,14 @@
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: globals.$muted-color;
|
||||
background-color: $muted-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--outline {
|
||||
background-color: transparent;
|
||||
border: solid 1px globals.$border-color;
|
||||
color: globals.$muted-color;
|
||||
border: solid 1px $border-color;
|
||||
color: $muted-color;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
@ -47,14 +47,14 @@
|
||||
}
|
||||
|
||||
&--dark {
|
||||
background-color: globals.$dark-background-color;
|
||||
color: globals.$muted-color;
|
||||
background-color: $dark-background-color;
|
||||
color: $muted-color;
|
||||
}
|
||||
|
||||
&--danger {
|
||||
border-color: transparent;
|
||||
background-color: globals.$danger-color;
|
||||
color: globals.$muted-color;
|
||||
background-color: $danger-color;
|
||||
color: $muted-color;
|
||||
|
||||
&:hover {
|
||||
background-color: #b3203f;
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.checkbox-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: globals.$spacing-unit;
|
||||
gap: $spacing-unit;
|
||||
cursor: pointer;
|
||||
|
||||
&__checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: globals.$dark-background-color;
|
||||
background-color: $dark-background-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
transition: all ease 0.2s;
|
||||
border: solid 1px globals.$border-color;
|
||||
border: solid 1px $border-color;
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.confirmation-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
gap: calc($spacing-unit * 2);
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
gap: calc($spacing-unit * 2);
|
||||
}
|
||||
&__description {
|
||||
font-size: 16px;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.dropdown-menu {
|
||||
&__content {
|
||||
background-color: globals.$dark-background-color;
|
||||
border: 1px solid globals.$border-color;
|
||||
background-color: $dark-background-color;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 6px;
|
||||
min-width: 200px;
|
||||
flex-direction: column;
|
||||
@ -20,13 +20,13 @@
|
||||
padding: 4px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: globals.$muted-color;
|
||||
color: $muted-color;
|
||||
}
|
||||
|
||||
&__separator {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: globals.$border-color;
|
||||
background-color: $border-color;
|
||||
}
|
||||
|
||||
&__item {
|
||||
@ -49,12 +49,12 @@
|
||||
}
|
||||
|
||||
&:not(&__item--disabled) &__item:hover {
|
||||
background-color: globals.$background-color;
|
||||
color: globals.$muted-color;
|
||||
background-color: $background-color;
|
||||
color: $muted-color;
|
||||
}
|
||||
|
||||
&__item:focus {
|
||||
background-color: globals.$background-color;
|
||||
background-color: $background-color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.game-card {
|
||||
width: 100%;
|
||||
@ -7,12 +7,12 @@
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.2s;
|
||||
border: solid 1px globals.$border-color;
|
||||
border: solid 1px $border-color;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
&:active {
|
||||
opacity: globals.$active-opacity;
|
||||
opacity: $active-opacity;
|
||||
}
|
||||
|
||||
&__backdrop {
|
||||
@ -37,10 +37,10 @@
|
||||
|
||||
&__content {
|
||||
color: #dadbe1;
|
||||
padding: globals.$spacing-unit calc(globals.$spacing-unit * 2);
|
||||
padding: $spacing-unit calc($spacing-unit * 2);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: globals.$spacing-unit;
|
||||
gap: $spacing-unit;
|
||||
flex-direction: column;
|
||||
transition: all ease 0.2s;
|
||||
transform: translateY(24px);
|
||||
@ -56,21 +56,21 @@
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: globals.$spacing-unit;
|
||||
gap: $spacing-unit;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&__specifics {
|
||||
display: flex;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
gap: calc($spacing-unit * 2);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__specifics-item {
|
||||
gap: globals.$spacing-unit;
|
||||
gap: $spacing-unit;
|
||||
display: flex;
|
||||
color: globals.$muted-color;
|
||||
color: $muted-color;
|
||||
font-size: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
@ -78,8 +78,8 @@
|
||||
&__title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: globals.$spacing-unit;
|
||||
color: globals.$muted-color;
|
||||
gap: $spacing-unit;
|
||||
color: $muted-color;
|
||||
}
|
||||
|
||||
&__shop-icon {
|
||||
@ -89,7 +89,7 @@
|
||||
}
|
||||
|
||||
&__no-download-label {
|
||||
color: globals.$body-color;
|
||||
color: $body-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
gap: calc($spacing-unit * 2);
|
||||
-webkit-app-region: drag;
|
||||
width: 100%;
|
||||
padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 3);
|
||||
color: globals.$muted-color;
|
||||
border-bottom: solid 1px globals.$border-color;
|
||||
background-color: globals.$dark-background-color;
|
||||
padding: calc($spacing-unit * 2) calc($spacing-unit * 3);
|
||||
color: $muted-color;
|
||||
border-bottom: solid 1px $border-color;
|
||||
background-color: $dark-background-color;
|
||||
|
||||
&--dragging-disabled {
|
||||
-webkit-app-region: no-drag;
|
||||
@ -21,13 +21,13 @@
|
||||
}
|
||||
|
||||
&__search {
|
||||
background-color: globals.$background-color;
|
||||
background-color: $background-color;
|
||||
display: inline-flex;
|
||||
transition: all ease 0.2s;
|
||||
width: 200px;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
border: solid 1px globals.$border-color;
|
||||
border: solid 1px $border-color;
|
||||
height: 40px;
|
||||
-webkit-app-region: no-drag;
|
||||
&:hover {
|
||||
@ -60,7 +60,7 @@
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
padding: globals.$spacing-unit;
|
||||
padding: $spacing-unit;
|
||||
|
||||
&:hover {
|
||||
color: #dadbe1;
|
||||
@ -70,13 +70,13 @@
|
||||
&__section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
gap: calc($spacing-unit * 2);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__back-button {
|
||||
color: globals.$body-color;
|
||||
color: $body-color;
|
||||
cursor: pointer;
|
||||
-webkit-app-region: no-drag;
|
||||
position: absolute;
|
||||
@ -108,6 +108,18 @@
|
||||
width: calc(100% - 28px);
|
||||
}
|
||||
}
|
||||
|
||||
&__new-version-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-unit;
|
||||
color: $body-color;
|
||||
font-size: $new-version-font-size;
|
||||
}
|
||||
|
||||
&__new-version-icon {
|
||||
color: $success-color;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.hero {
|
||||
width: 100%;
|
||||
@ -10,7 +10,7 @@
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 15px 0px #000000;
|
||||
cursor: pointer;
|
||||
border: solid 1px globals.$border-color;
|
||||
border: solid 1px $border-color;
|
||||
z-index: 1;
|
||||
|
||||
&__media {
|
||||
@ -22,9 +22,10 @@
|
||||
height: 100%;
|
||||
transition: all ease 0.2s;
|
||||
image-rendering: revert;
|
||||
}
|
||||
&:hover &__media {
|
||||
transform: scale(1.02);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
&__backdrop {
|
||||
@ -38,17 +39,17 @@
|
||||
|
||||
&__description {
|
||||
max-width: 700px;
|
||||
color: globals.$muted-color;
|
||||
color: $muted-color;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
margin-top: calc(globals.$spacing-unit * 2);
|
||||
margin-top: $spacing-unit * 2;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: calc(globals.$spacing-unit * 4) calc(globals.$spacing-unit * 3);
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
padding: $spacing-unit * 4 $spacing-unit * 3;
|
||||
gap: $spacing-unit * 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.link {
|
||||
text-decoration: none;
|
||||
color: #c0c1c7;
|
||||
color: $muted-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.modal {
|
||||
animation: scale-fade-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none
|
||||
running;
|
||||
background-color: globals.$background-color;
|
||||
background-color: $background-color;
|
||||
border-radius: 4px;
|
||||
min-width: 400px;
|
||||
max-width: 600px;
|
||||
color: globals.$body-color;
|
||||
color: $body-color;
|
||||
max-height: 100%;
|
||||
border: solid 1px globals.$border-color;
|
||||
border: solid 1px $border-color;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -27,14 +27,14 @@
|
||||
&__content {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: calc(globals.$spacing-unit * 3) calc(globals.$spacing-unit * 2);
|
||||
padding: calc($spacing-unit * 3) calc($spacing-unit * 2);
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
gap: globals.$spacing-unit;
|
||||
padding: calc(globals.$spacing-unit * 2);
|
||||
border-bottom: solid 1px globals.$border-color;
|
||||
gap: $spacing-unit;
|
||||
padding: calc($spacing-unit * 2);
|
||||
border-bottom: solid 1px $border-color;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
@ -50,7 +50,7 @@
|
||||
}
|
||||
|
||||
&__close-button-icon {
|
||||
color: globals.$body-color;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.select-field {
|
||||
display: inline-flex;
|
||||
@ -6,7 +6,7 @@
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
border: 1px solid globals.$border-color;
|
||||
border: 1px solid $border-color;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
&:hover {
|
||||
@ -18,15 +18,15 @@
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background-color: globals.$dark-background-color;
|
||||
background-color: $dark-background-color;
|
||||
}
|
||||
|
||||
&--dark {
|
||||
background-color: globals.$background-color;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
&__option {
|
||||
background-color: globals.$dark-background-color;
|
||||
background-color: $dark-background-color;
|
||||
border-right: 4px solid;
|
||||
border-color: transparent;
|
||||
border-radius: 8px;
|
||||
@ -36,14 +36,14 @@
|
||||
color: #dadbe1;
|
||||
cursor: default;
|
||||
font-family: inherit;
|
||||
font-size: globals.$body-font-size;
|
||||
font-size: $body-font-size;
|
||||
text-overflow: ellipsis;
|
||||
padding: globals.$spacing-unit;
|
||||
padding: $spacing-unit;
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin-bottom: globals.$spacing-unit;
|
||||
margin-bottom: $spacing-unit;
|
||||
display: block;
|
||||
color: globals.$body-color;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.sidebar-profile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: globals.$spacing-unit;
|
||||
padding: globals.$spacing-unit calc(globals.$spacing-unit * 2);
|
||||
gap: $spacing-unit;
|
||||
padding: $spacing-unit $spacing-unit * 2;
|
||||
|
||||
&__button {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.1s;
|
||||
color: globals.$muted-color;
|
||||
color: $muted-color;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
padding: globals.$spacing-unit globals.$spacing-unit;
|
||||
padding: $spacing-unit $spacing-unit;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
@ -24,7 +25,7 @@
|
||||
&__button-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(globals.$spacing-unit + globals.$spacing-unit / 2);
|
||||
gap: $spacing-unit + $spacing-unit / 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -38,7 +39,7 @@
|
||||
|
||||
&__button-title {
|
||||
font-weight: bold;
|
||||
font-size: globals.$body-font-size;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
@ -47,23 +48,24 @@
|
||||
}
|
||||
|
||||
&__friends-button {
|
||||
color: globals.$muted-color;
|
||||
color: $muted-color;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
height: 40px;
|
||||
background-color: globals.$background-color;
|
||||
background-color: $background-color;
|
||||
position: relative;
|
||||
transition: all ease 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&__friends-button-badge {
|
||||
background-color: globals.$success-color;
|
||||
background-color: $success-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.sidebar {
|
||||
background-color: globals.$dark-background-color;
|
||||
|
||||
@ -1,75 +1,75 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.text-field-container {
|
||||
flex: 1;
|
||||
gap: globals.$spacing-unit;
|
||||
gap: $spacing-unit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__text-field {
|
||||
display: inline-flex;
|
||||
transition: all ease 0.2s;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
border: solid 1px globals.$border-color;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
.text-field {
|
||||
display: inline-flex;
|
||||
transition: all ease 0.2s;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
border: solid 1px $border-color;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background-color: globals.$dark-background-color;
|
||||
}
|
||||
|
||||
&--dark {
|
||||
background-color: globals.$background-color;
|
||||
}
|
||||
|
||||
&--has-error {
|
||||
border-color: globals.$danger-color;
|
||||
}
|
||||
|
||||
&--focused {
|
||||
border-color: #dadbe1;
|
||||
}
|
||||
&--primary {
|
||||
background-color: $dark-background-color;
|
||||
}
|
||||
|
||||
&__text-field-input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
color: #dadbe1;
|
||||
cursor: default;
|
||||
font-family: inherit;
|
||||
text-overflow: ellipsis;
|
||||
padding: globals.$spacing-unit;
|
||||
|
||||
&:focus {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
&--read-only {
|
||||
text-overflow: inherit;
|
||||
}
|
||||
&--dark {
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
&__toggle-password-button {
|
||||
cursor: pointer;
|
||||
color: globals.$muted-color;
|
||||
padding: globals.$spacing-unit;
|
||||
&--has-error {
|
||||
border-color: $danger-color;
|
||||
}
|
||||
|
||||
&__text-field-wrapper {
|
||||
display: flex;
|
||||
gap: globals.$spacing-unit;
|
||||
&--focused {
|
||||
border-color: $search-border-color-focused;
|
||||
}
|
||||
|
||||
&__error-label {
|
||||
color: globals.$danger-color;
|
||||
&:not(&--focused):hover {
|
||||
border-color: $search-border-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.text-field__input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
color: $search-input-color;
|
||||
cursor: default;
|
||||
font-family: inherit;
|
||||
text-overflow: ellipsis;
|
||||
padding: $spacing-unit;
|
||||
|
||||
&:focus {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
&--read-only {
|
||||
text-overflow: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.text-field__toggle-password-button {
|
||||
cursor: pointer;
|
||||
color: $muted-color;
|
||||
padding: $spacing-unit;
|
||||
}
|
||||
|
||||
.text-field__wrapper {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
.text-field__error-label {
|
||||
color: $danger-color;
|
||||
}
|
||||
|
||||
@ -1,87 +1,87 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
$toast-height: 80px;
|
||||
@keyframes slideIn {
|
||||
0% {
|
||||
transform: translateY(96px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOut {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(96px);
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
animation-duration: 0.2s;
|
||||
animation-timing-function: ease-in-out;
|
||||
max-height: $toast-height;
|
||||
max-height: 80px;
|
||||
position: fixed;
|
||||
background-color: globals.$background-color;
|
||||
background-color: $background-color;
|
||||
border-radius: 4px;
|
||||
border: solid 1px globals.$border-color;
|
||||
right: calc(globals.$spacing-unit * 2);
|
||||
//bottom panel height + 16px
|
||||
bottom: calc(26px + #{globals.$spacing-unit * 2});
|
||||
border: solid 1px $border-color;
|
||||
right: $spacing-unit * 2;
|
||||
bottom: 42px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
z-index: globals.$toast-z-index;
|
||||
z-index: $toast-z-index;
|
||||
max-width: 500px;
|
||||
animation-name: slide-in;
|
||||
transform: translateY(0);
|
||||
|
||||
&--closing {
|
||||
animation-name: slide-out;
|
||||
transform: translateY(calc($toast-height + #{globals.$spacing-unit * 2}));
|
||||
animation-name: slideOut;
|
||||
transform: translateY(96px);
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 2);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__progress {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
&::-webkit-progress-bar {
|
||||
background-color: globals.$dark-background-color;
|
||||
}
|
||||
&::-webkit-progress-value {
|
||||
background-color: globals.$muted-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__close-button {
|
||||
color: globals.$body-color;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__success-icon {
|
||||
color: globals.$success-color;
|
||||
}
|
||||
|
||||
&__error-icon {
|
||||
color: globals.$danger-color;
|
||||
}
|
||||
|
||||
&__warning-icon {
|
||||
color: globals.$warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateY(calc($toast-height + #{globals.$spacing-unit * 2}));
|
||||
}
|
||||
|
||||
100% {
|
||||
&--opening {
|
||||
animation-name: slideIn;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-out {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
.toast__content {
|
||||
display: flex;
|
||||
gap: $spacing-unit * 2;
|
||||
padding: $spacing-unit * 2;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toast__progress {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: $dark-background-color;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(calc($toast-height + #{globals.$spacing-unit * 2}));
|
||||
&::-webkit-progress-value {
|
||||
background-color: $muted-color;
|
||||
}
|
||||
}
|
||||
|
||||
.toast__close-button {
|
||||
color: $body-color;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toast__success-icon {
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
.toast__error-icon {
|
||||
color: $danger-color;
|
||||
}
|
||||
|
||||
.toast__warning-icon {
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
@ -1,71 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
import { recipe } from "@vanilla-extract/recipes";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
|
||||
export const panel = style({
|
||||
width: "100%",
|
||||
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
|
||||
backgroundColor: vars.color.background,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "start",
|
||||
justifyContent: "space-between",
|
||||
borderBottom: `solid 1px ${vars.color.border}`,
|
||||
});
|
||||
|
||||
export const content = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
justifyContent: "center",
|
||||
});
|
||||
|
||||
export const actions = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const downloadDetailsRow = style({
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
display: "flex",
|
||||
color: vars.color.body,
|
||||
alignItems: "center",
|
||||
});
|
||||
|
||||
export const downloadsLink = style({
|
||||
color: vars.color.body,
|
||||
textDecoration: "underline",
|
||||
});
|
||||
|
||||
export const progressBar = recipe({
|
||||
base: {
|
||||
position: "absolute",
|
||||
bottom: "0",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "3px",
|
||||
transition: "all ease 0.2s",
|
||||
"::-webkit-progress-bar": {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
"::-webkit-progress-value": {
|
||||
backgroundColor: vars.color.muted,
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
disabled: {
|
||||
true: {
|
||||
opacity: vars.opacity.disabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const link = style({
|
||||
textAlign: "start",
|
||||
color: vars.color.body,
|
||||
":hover": {
|
||||
textDecoration: "underline",
|
||||
cursor: "pointer",
|
||||
},
|
||||
});
|
||||
66
src/renderer/src/pages/achievements/achievement-panel.scss
Normal file
66
src/renderer/src/pages/achievements/achievement-panel.scss
Normal file
@ -0,0 +1,66 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.achievement-panel {
|
||||
width: 100%;
|
||||
padding: #{$spacing-unit * 2} #{$spacing-unit * 3};
|
||||
background-color: $color-background;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
border-bottom: solid 1px $color-border;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__download-details-row {
|
||||
gap: $spacing-unit;
|
||||
display: flex;
|
||||
color: $color-body;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__downloads-link {
|
||||
color: $color-body;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&__progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
transition: all ease 0.2s;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: $color-muted;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: $opacity-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
text-align: start;
|
||||
color: $color-body;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,197 +0,0 @@
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
import { style } from "@vanilla-extract/css";
|
||||
import { recipe } from "@vanilla-extract/recipes";
|
||||
|
||||
export const HERO_HEIGHT = 150;
|
||||
const LOGO_HEIGHT = 100;
|
||||
const LOGO_MAX_WIDTH = 200;
|
||||
|
||||
export const wrapper = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
transition: "all ease 0.3s",
|
||||
});
|
||||
|
||||
export const hero = style({
|
||||
width: "100%",
|
||||
height: `${HERO_HEIGHT}px`,
|
||||
minHeight: `${HERO_HEIGHT}px`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
position: "relative",
|
||||
transition: "all ease 0.2s",
|
||||
});
|
||||
|
||||
export const heroContent = style({
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
});
|
||||
|
||||
export const gameLogo = style({
|
||||
width: LOGO_MAX_WIDTH,
|
||||
height: LOGO_HEIGHT,
|
||||
objectFit: "contain",
|
||||
transition: "all ease 0.2s",
|
||||
":hover": {
|
||||
transform: "scale(1.05)",
|
||||
},
|
||||
});
|
||||
|
||||
export const container = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "auto",
|
||||
zIndex: "1",
|
||||
});
|
||||
|
||||
export const tableHeader = recipe({
|
||||
base: {
|
||||
width: "100%",
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
transition: "all ease 0.2s",
|
||||
borderBottom: `solid 1px ${vars.color.border}`,
|
||||
position: "sticky",
|
||||
top: "0",
|
||||
zIndex: "1",
|
||||
},
|
||||
variants: {
|
||||
stuck: {
|
||||
true: {
|
||||
boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.8)",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const list = style({
|
||||
listStyle: "none",
|
||||
margin: "0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
width: "100%",
|
||||
backgroundColor: vars.color.background,
|
||||
});
|
||||
|
||||
export const listItem = style({
|
||||
transition: "all ease 0.1s",
|
||||
color: vars.color.muted,
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
borderRadius: "4px",
|
||||
padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
alignItems: "center",
|
||||
textAlign: "left",
|
||||
":hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
textDecoration: "none",
|
||||
},
|
||||
});
|
||||
|
||||
export const listItemImage = recipe({
|
||||
base: {
|
||||
width: "54px",
|
||||
height: "54px",
|
||||
borderRadius: "4px",
|
||||
objectFit: "cover",
|
||||
},
|
||||
variants: {
|
||||
unlocked: {
|
||||
false: {
|
||||
filter: "grayscale(100%)",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const achievementsProgressBar = style({
|
||||
width: "100%",
|
||||
height: "8px",
|
||||
transition: "all ease 0.2s",
|
||||
"::-webkit-progress-bar": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
borderRadius: "4px",
|
||||
},
|
||||
"::-webkit-progress-value": {
|
||||
backgroundColor: vars.color.muted,
|
||||
borderRadius: "4px",
|
||||
},
|
||||
});
|
||||
|
||||
export const heroLogoBackdrop = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "flex-end",
|
||||
});
|
||||
|
||||
export const heroImageSkeleton = style({
|
||||
height: "150px",
|
||||
});
|
||||
|
||||
export const heroPanelSkeleton = style({
|
||||
width: "100%",
|
||||
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: vars.color.background,
|
||||
height: "72px",
|
||||
borderBottom: `solid 1px ${vars.color.border}`,
|
||||
});
|
||||
|
||||
export const listItemSkeleton = style({
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
borderRadius: "4px",
|
||||
padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
export const profileAvatar = style({
|
||||
height: "54px",
|
||||
width: "54px",
|
||||
borderRadius: "4px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: vars.color.background,
|
||||
position: "relative",
|
||||
objectFit: "cover",
|
||||
});
|
||||
|
||||
export const profileAvatarSmall = style({
|
||||
height: "32px",
|
||||
width: "32px",
|
||||
borderRadius: "4px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: vars.color.background,
|
||||
position: "relative",
|
||||
objectFit: "cover",
|
||||
});
|
||||
|
||||
export const subscriptionRequiredButton = style({
|
||||
textDecoration: "none",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
gap: `${SPACING_UNIT / 2}px`,
|
||||
color: vars.color.body,
|
||||
cursor: "pointer",
|
||||
":hover": {
|
||||
textDecoration: "underline",
|
||||
},
|
||||
});
|
||||
192
src/renderer/src/pages/achievements/achievements.scss
Normal file
192
src/renderer/src/pages/achievements/achievements.scss
Normal file
@ -0,0 +1,192 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
$hero-height: 150px;
|
||||
$logo-height: 100px;
|
||||
$logo-max-width: 200px;
|
||||
|
||||
.achievements {
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
|
||||
&__hero {
|
||||
width: 100%;
|
||||
height: $hero-height;
|
||||
min-height: $hero-height;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
transition: all ease 0.2s;
|
||||
}
|
||||
|
||||
&__hero-content {
|
||||
padding: #{$spacing-unit * 2};
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__game-logo {
|
||||
width: $logo-max-width;
|
||||
height: $logo-height;
|
||||
object-fit: contain;
|
||||
transition: all ease 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
width: 100%;
|
||||
background-color: $dark-background-color;
|
||||
transition: all ease 0.2s;
|
||||
border-bottom: solid 1px $border-color;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
|
||||
&--stuck {
|
||||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: #{$spacing-unit * 2};
|
||||
padding: #{$spacing-unit * 2};
|
||||
width: 100%;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
&__list-item {
|
||||
transition: all ease 0.1s;
|
||||
color: $muted-color;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
padding: $spacing-unit;
|
||||
gap: #{$spacing-unit * 2};
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__list-item-image {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
|
||||
&--unlocked {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__achievements-progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
transition: all ease 0.2s;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: $muted-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__hero-logo-backdrop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__hero-image-skeleton {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
&__hero-panel-skeleton {
|
||||
width: 100%;
|
||||
padding: #{$spacing-unit * 2};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: $background-color;
|
||||
height: 72px;
|
||||
border-bottom: solid 1px $border-color;
|
||||
}
|
||||
|
||||
&__list-item-skeleton {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
padding: $spacing-unit;
|
||||
gap: #{$spacing-unit * 2};
|
||||
}
|
||||
|
||||
&__profile-avatar {
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $background-color;
|
||||
position: relative;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&__profile-avatar-small {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $background-color;
|
||||
position: relative;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&__subscription-required-button {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: #{$spacing-unit / 2};
|
||||
color: $body-color;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.catalogue {
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
gap: calc($spacing-unit * 2);
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
scroll-behavior: smooth;
|
||||
@ -13,10 +13,10 @@
|
||||
width: 270px;
|
||||
min-width: 270px;
|
||||
max-width: 270px;
|
||||
background-color: globals.$dark-background-color;
|
||||
background-color: $dark-background-color;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
border: 1px solid globals.$border-color;
|
||||
border: 1px solid $border-color;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.game-item {
|
||||
background-color: globals.$dark-background-color;
|
||||
background-color: $dark-background-color;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
@ -9,9 +9,9 @@
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border: 1px solid globals.$border-color;
|
||||
border: 1px solid $border-color;
|
||||
cursor: pointer;
|
||||
gap: calc(globals.$spacing-unit * 2);
|
||||
gap: calc($spacing-unit * 2);
|
||||
transition: all ease 0.2s;
|
||||
|
||||
&:hover {
|
||||
@ -22,7 +22,7 @@
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-right: 1px solid globals.$border-color;
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
|
||||
&__details {
|
||||
@ -30,11 +30,11 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
padding: calc(globals.$spacing-unit * 2) 0;
|
||||
padding: calc($spacing-unit * 2) 0;
|
||||
}
|
||||
|
||||
&__genres {
|
||||
color: globals.$body-color;
|
||||
color: $body-color;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
margin-bottom: 4px;
|
||||
@ -42,7 +42,7 @@
|
||||
|
||||
&__repackers {
|
||||
display: flex;
|
||||
gap: globals.$spacing-unit;
|
||||
gap: $spacing-unit;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT } from "../../theme.css";
|
||||
|
||||
export const deleteActionsButtonsCtn = style({
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
justifyContent: "end",
|
||||
alignItems: "center",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
11
src/renderer/src/pages/downloads/delete-game-modal.scss
Normal file
11
src/renderer/src/pages/downloads/delete-game-modal.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.delete-game-modal {
|
||||
&__actions-buttons-ctn {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
}
|
||||
@ -1,109 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
|
||||
export const downloadTitleWrapper = style({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: `${SPACING_UNIT}px`,
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const downloadTitle = style({
|
||||
fontWeight: "bold",
|
||||
cursor: "pointer",
|
||||
color: vars.color.body,
|
||||
textAlign: "left",
|
||||
fontSize: "16px",
|
||||
display: "block",
|
||||
":hover": {
|
||||
textDecoration: "underline",
|
||||
},
|
||||
});
|
||||
|
||||
export const downloads = style({
|
||||
width: "100%",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
margin: "0",
|
||||
padding: "0",
|
||||
marginTop: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const downloadCover = style({
|
||||
width: "280px",
|
||||
minWidth: "280px",
|
||||
height: "auto",
|
||||
borderRight: `solid 1px ${vars.color.border}`,
|
||||
position: "relative",
|
||||
zIndex: "1",
|
||||
});
|
||||
|
||||
export const downloadCoverContent = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
padding: `${SPACING_UNIT}px`,
|
||||
display: "flex",
|
||||
alignItems: "flex-end",
|
||||
justifyContent: "flex-end",
|
||||
});
|
||||
|
||||
export const downloadCoverBackdrop = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
background: "linear-gradient(0deg, rgba(0, 0, 0, 0.8) 5%, transparent 100%)",
|
||||
display: "flex",
|
||||
overflow: "hidden",
|
||||
zIndex: "1",
|
||||
});
|
||||
|
||||
export const downloadCoverImage = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
zIndex: "-1",
|
||||
});
|
||||
|
||||
export const download = style({
|
||||
width: "100%",
|
||||
backgroundColor: vars.color.background,
|
||||
display: "flex",
|
||||
borderRadius: "8px",
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
overflow: "hidden",
|
||||
boxShadow: "0px 0px 5px 0px #000000",
|
||||
transition: "all ease 0.2s",
|
||||
height: "140px",
|
||||
minHeight: "140px",
|
||||
maxHeight: "140px",
|
||||
});
|
||||
|
||||
export const downloadDetails = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flex: "1",
|
||||
justifyContent: "center",
|
||||
gap: `${SPACING_UNIT / 2}px`,
|
||||
fontSize: "14px",
|
||||
});
|
||||
|
||||
export const downloadRightContent = style({
|
||||
display: "flex",
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
flex: "1",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
background: "linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%)",
|
||||
});
|
||||
|
||||
export const downloadActions = style({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const downloadGroup = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
110
src/renderer/src/pages/downloads/download-group.scss
Normal file
110
src/renderer/src/pages/downloads/download-group.scss
Normal file
@ -0,0 +1,110 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.download-group {
|
||||
&__title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: $spacing-unit;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
color: $body-color;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__downloads {
|
||||
width: 100%;
|
||||
gap: #{$spacing-unit * 2};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: $spacing-unit;
|
||||
}
|
||||
|
||||
&__cover {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
height: auto;
|
||||
border-right: solid 1px $border-color;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__cover-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: $spacing-unit;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__cover-backdrop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 5%, transparent 100%);
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__cover-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&__download {
|
||||
width: 100%;
|
||||
background-color: $background-color;
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
border: solid 1px $border-color;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 5px 0px #000000;
|
||||
transition: all ease 0.2s;
|
||||
height: 140px;
|
||||
min-height: 140px;
|
||||
max-height: 140px;
|
||||
}
|
||||
|
||||
&__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
gap: #{$spacing-unit / 2};
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__right-content {
|
||||
display: flex;
|
||||
padding: #{$spacing-unit * 2};
|
||||
flex: 1;
|
||||
gap: $spacing-unit;
|
||||
background: linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: #{$spacing-unit * 2};
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT } from "../../theme.css";
|
||||
|
||||
export const downloadsContainer = style({
|
||||
display: "flex",
|
||||
padding: `${SPACING_UNIT * 3}px`,
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
});
|
||||
|
||||
export const downloadGroups = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT * 3}px`,
|
||||
flexDirection: "column",
|
||||
});
|
||||
|
||||
export const arrowIcon = style({
|
||||
width: "60px",
|
||||
height: "60px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.06)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginBottom: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
export const noDownloads = style({
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
37
src/renderer/src/pages/downloads/downloads.scss
Normal file
37
src/renderer/src/pages/downloads/downloads.scss
Normal file
@ -0,0 +1,37 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.downloads {
|
||||
&__container {
|
||||
display: flex;
|
||||
padding: #{$spacing-unit * 3};
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__groups {
|
||||
display: flex;
|
||||
gap: #{$spacing-unit * 3};
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__arrow-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: #{$spacing-unit * 2};
|
||||
}
|
||||
|
||||
&__no-downloads {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
}
|
||||
@ -1,18 +1,18 @@
|
||||
@use "../../scss/globals.scss";
|
||||
@import "../../scss/variables";
|
||||
|
||||
.editor-header {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
background-color: globals.$dark-background-color;
|
||||
background-color: $dark-background-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
padding: 0 calc(globals.$spacing-unit * 2);
|
||||
padding: 0 calc($spacing-unit * 2);
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.editor-header-title {
|
||||
font-size: 7px;
|
||||
font-weight: 500;
|
||||
color: globals.$body-color;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
|
||||
export const mappingMethods = style({
|
||||
display: "grid",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
gridTemplateColumns: "repeat(2, 1fr)",
|
||||
});
|
||||
|
||||
export const fileList = style({
|
||||
listStyle: "none",
|
||||
margin: "0",
|
||||
padding: "0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
marginTop: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
export const fileItem = style({
|
||||
flex: 1,
|
||||
color: vars.color.muted,
|
||||
textDecoration: "underline",
|
||||
display: "flex",
|
||||
cursor: "pointer",
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.cloud-sync-files-modal {
|
||||
&__mapping-methods {
|
||||
display: grid;
|
||||
gap: $spacing-unit;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
&__file-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-unit;
|
||||
margin-top: #{$spacing-unit * 2};
|
||||
}
|
||||
|
||||
&__file-item {
|
||||
flex: 1;
|
||||
color: $muted-color;
|
||||
text-decoration: underline;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
import { keyframes, style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
|
||||
export const rotate = keyframes({
|
||||
"0%": { transform: "rotate(0deg)" },
|
||||
"100%": {
|
||||
transform: "rotate(360deg)",
|
||||
},
|
||||
});
|
||||
|
||||
export const artifacts = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
flexDirection: "column",
|
||||
listStyle: "none",
|
||||
margin: "0",
|
||||
padding: "0",
|
||||
});
|
||||
|
||||
export const artifactButton = style({
|
||||
display: "flex",
|
||||
textAlign: "left",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
color: vars.color.body,
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
border: `1px solid ${vars.color.border}`,
|
||||
borderRadius: "4px",
|
||||
justifyContent: "space-between",
|
||||
});
|
||||
|
||||
export const syncIcon = style({
|
||||
animationName: rotate,
|
||||
animationDuration: "1s",
|
||||
animationIterationCount: "infinite",
|
||||
animationTimingFunction: "linear",
|
||||
});
|
||||
|
||||
export const progress = style({
|
||||
width: "100%",
|
||||
height: "5px",
|
||||
"::-webkit-progress-bar": {
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
},
|
||||
"::-webkit-progress-value": {
|
||||
backgroundColor: vars.color.muted,
|
||||
},
|
||||
});
|
||||
|
||||
export const manageFilesButton = style({
|
||||
margin: "0",
|
||||
padding: "0",
|
||||
alignSelf: "flex-start",
|
||||
fontSize: 14,
|
||||
cursor: "pointer",
|
||||
textDecoration: "underline",
|
||||
color: vars.color.body,
|
||||
":disabled": {
|
||||
cursor: "not-allowed",
|
||||
opacity: vars.opacity.disabled,
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,70 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.cloud-sync-modal {
|
||||
&__artifacts {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__artifact-button {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: $spacing-unit;
|
||||
color: $body-color;
|
||||
padding: #{$spacing-unit * 2};
|
||||
background-color: $dark-background-color;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 4px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__sync-icon {
|
||||
animation-name: rotate;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
&__progress {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: $dark-background-color;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: $muted-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__manage-files-button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-self: flex-start;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
color: $body-color;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: $disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
|
||||
export const descriptionHeader = style({
|
||||
width: "100%",
|
||||
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: vars.color.background,
|
||||
height: "72px",
|
||||
});
|
||||
|
||||
export const descriptionHeaderInfo = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
flexDirection: "column",
|
||||
});
|
||||
@ -0,0 +1,17 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.description-header {
|
||||
width: 100%;
|
||||
padding: #{$spacing-unit * 2};
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: $background-color;
|
||||
height: 72px;
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@ -1,131 +0,0 @@
|
||||
import { recipe } from "@vanilla-extract/recipes";
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
|
||||
export const gallerySliderContainer = style({
|
||||
padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
});
|
||||
|
||||
export const gallerySliderMedia = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "block",
|
||||
flexShrink: "0",
|
||||
flexGrow: "0",
|
||||
transition: "translate 0.3s ease-in-out",
|
||||
borderRadius: "4px",
|
||||
alignSelf: "center",
|
||||
});
|
||||
|
||||
export const gallerySliderAnimationContainer = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
"@media": {
|
||||
"(min-width: 1280px)": {
|
||||
width: "60%",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const gallerySliderPreview = style({
|
||||
width: "100%",
|
||||
padding: `${SPACING_UNIT}px 0`,
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
position: "relative",
|
||||
overflowX: "auto",
|
||||
overflowY: "hidden",
|
||||
gap: `${SPACING_UNIT / 2}px`,
|
||||
"@media": {
|
||||
"(min-width: 1280px)": {
|
||||
width: "60%",
|
||||
},
|
||||
},
|
||||
"::-webkit-scrollbar-thumb": {
|
||||
width: "20%",
|
||||
},
|
||||
"::-webkit-scrollbar": {
|
||||
height: "10px",
|
||||
},
|
||||
});
|
||||
|
||||
export const mediaPreviewButton = recipe({
|
||||
base: {
|
||||
cursor: "pointer",
|
||||
width: "20%",
|
||||
display: "block",
|
||||
flexShrink: "0",
|
||||
flexGrow: "0",
|
||||
opacity: "0.3",
|
||||
transition: "translate 0.3s ease-in-out, opacity 0.2s ease",
|
||||
borderRadius: "4px",
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
overflow: "hidden",
|
||||
":hover": {
|
||||
opacity: "0.8",
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
active: {
|
||||
true: {
|
||||
opacity: "1",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const mediaPreview = style({
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
});
|
||||
|
||||
export const gallerySliderButton = recipe({
|
||||
base: {
|
||||
position: "absolute",
|
||||
alignSelf: "center",
|
||||
cursor: "pointer",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.4)",
|
||||
transition: "all 0.2s ease-in-out",
|
||||
borderRadius: "50%",
|
||||
color: vars.color.muted,
|
||||
width: "48px",
|
||||
height: "48px",
|
||||
":hover": {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
||||
},
|
||||
":active": {
|
||||
transform: "scale(0.95)",
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
direction: {
|
||||
left: {
|
||||
left: "0",
|
||||
marginLeft: `${SPACING_UNIT}px`,
|
||||
transform: `translateX(${-(48 + SPACING_UNIT)}px)`,
|
||||
},
|
||||
right: {
|
||||
right: "0",
|
||||
marginRight: `${SPACING_UNIT}px`,
|
||||
transform: `translateX(${48 + SPACING_UNIT}px)`,
|
||||
},
|
||||
},
|
||||
visible: {
|
||||
true: {
|
||||
transform: "translateX(0)",
|
||||
opacity: "1",
|
||||
},
|
||||
false: {
|
||||
opacity: "0",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,126 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.gallery-slider {
|
||||
&__container {
|
||||
padding: #{$spacing-unit * 3} #{$spacing-unit * 2};
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__media {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
transition: translate 0.3s ease-in-out;
|
||||
border-radius: 4px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&__animation-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
width: 100%;
|
||||
padding: $spacing-unit 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
gap: #{$spacing-unit / 2};
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__media-preview-button {
|
||||
cursor: pointer;
|
||||
width: 20%;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
opacity: 0.3;
|
||||
transition:
|
||||
translate 0.3s ease-in-out,
|
||||
opacity 0.2s ease;
|
||||
border-radius: 4px;
|
||||
border: solid 1px $border-color;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&--active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__media-preview {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__button {
|
||||
position: absolute;
|
||||
align-self: center;
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
transition: all 0.2s ease-in-out;
|
||||
border-radius: 50%;
|
||||
color: $muted-color;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
&--left {
|
||||
left: 0;
|
||||
margin-left: $spacing-unit;
|
||||
transform: translateX(-#{48 + $spacing-unit}px);
|
||||
}
|
||||
|
||||
&--right {
|
||||
right: 0;
|
||||
margin-right: $spacing-unit;
|
||||
transform: translateX(#{48 + $spacing-unit}px);
|
||||
}
|
||||
|
||||
&--visible {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&--hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,234 +0,0 @@
|
||||
import { globalStyle, keyframes, style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
import { recipe } from "@vanilla-extract/recipes";
|
||||
|
||||
export const HERO_HEIGHT = 300;
|
||||
|
||||
export const slideIn = keyframes({
|
||||
"0%": { transform: `translateY(${40 + SPACING_UNIT * 2}px)`, opacity: "0px" },
|
||||
"100%": { transform: "translateY(0)", opacity: "1" },
|
||||
});
|
||||
|
||||
export const wrapper = recipe({
|
||||
base: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
transition: "all ease 0.3s",
|
||||
},
|
||||
variants: {
|
||||
blurredContent: {
|
||||
true: {
|
||||
filter: "blur(20px)",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const hero = style({
|
||||
width: "100%",
|
||||
height: `${HERO_HEIGHT}px`,
|
||||
minHeight: `${HERO_HEIGHT}px`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
position: "relative",
|
||||
transition: "all ease 0.2s",
|
||||
"@media": {
|
||||
"(min-width: 1250px)": {
|
||||
height: "350px",
|
||||
minHeight: "350px",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const heroContent = style({
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-end",
|
||||
});
|
||||
|
||||
export const heroLogoBackdrop = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
background: "linear-gradient(0deg, rgba(0, 0, 0, 0.3) 60%, transparent 100%)",
|
||||
position: "absolute",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
});
|
||||
|
||||
export const heroImage = style({
|
||||
width: "100%",
|
||||
height: `${HERO_HEIGHT}px`,
|
||||
minHeight: `${HERO_HEIGHT}px`,
|
||||
objectFit: "cover",
|
||||
objectPosition: "top",
|
||||
transition: "all ease 0.2s",
|
||||
position: "absolute",
|
||||
zIndex: "0",
|
||||
"@media": {
|
||||
"(min-width: 1250px)": {
|
||||
objectPosition: "center",
|
||||
height: "350px",
|
||||
minHeight: "350px",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const gameLogo = style({
|
||||
width: 300,
|
||||
alignSelf: "flex-end",
|
||||
});
|
||||
|
||||
export const heroImageSkeleton = style({
|
||||
height: "300px",
|
||||
"@media": {
|
||||
"(min-width: 1250px)": {
|
||||
height: "350px",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const container = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "auto",
|
||||
zIndex: "1",
|
||||
});
|
||||
|
||||
export const descriptionContainer = style({
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
flex: "1",
|
||||
background: `linear-gradient(0deg, ${vars.color.background} 50%, ${vars.color.darkBackground} 100%)`,
|
||||
});
|
||||
|
||||
export const descriptionContent = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
});
|
||||
|
||||
export const description = style({
|
||||
userSelect: "text",
|
||||
lineHeight: "22px",
|
||||
fontSize: "16px",
|
||||
padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
|
||||
"@media": {
|
||||
"(min-width: 1280px)": {
|
||||
width: "60%",
|
||||
},
|
||||
},
|
||||
width: "100%",
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
});
|
||||
|
||||
export const descriptionSkeleton = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
|
||||
width: "100%",
|
||||
"@media": {
|
||||
"(min-width: 1280px)": {
|
||||
width: "60%",
|
||||
lineHeight: "22px",
|
||||
},
|
||||
},
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
});
|
||||
|
||||
export const randomizerButton = style({
|
||||
animationName: slideIn,
|
||||
animationDuration: "0.2s",
|
||||
position: "fixed",
|
||||
bottom: `${SPACING_UNIT * 3}px`,
|
||||
/* Scroll bar + spacing */
|
||||
right: `${9 + SPACING_UNIT * 2}px`,
|
||||
boxShadow: "rgba(255, 255, 255, 0.1) 0px 0px 10px 1px",
|
||||
border: `solid 2px ${vars.color.border}`,
|
||||
zIndex: "1",
|
||||
backgroundColor: vars.color.background,
|
||||
":hover": {
|
||||
backgroundColor: vars.color.background,
|
||||
boxShadow: "rgba(255, 255, 255, 0.1) 0px 0px 15px 5px",
|
||||
opacity: "1",
|
||||
},
|
||||
":active": {
|
||||
transform: "scale(0.98)",
|
||||
},
|
||||
":disabled": {
|
||||
boxShadow: "none",
|
||||
transform: "none",
|
||||
opacity: "0.8",
|
||||
backgroundColor: vars.color.background,
|
||||
},
|
||||
});
|
||||
|
||||
export const heroPanelSkeleton = style({
|
||||
width: "100%",
|
||||
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: vars.color.background,
|
||||
height: "72px",
|
||||
borderBottom: `solid 1px ${vars.color.border}`,
|
||||
});
|
||||
|
||||
globalStyle(".bb_tag", {
|
||||
marginTop: `${SPACING_UNIT * 2}px`,
|
||||
marginBottom: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
globalStyle(`${description} img`, {
|
||||
borderRadius: "5px",
|
||||
marginTop: `${SPACING_UNIT}px`,
|
||||
marginBottom: `${SPACING_UNIT * 3}px`,
|
||||
display: "block",
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
objectFit: "cover",
|
||||
});
|
||||
|
||||
globalStyle(`${description} a`, {
|
||||
color: vars.color.body,
|
||||
});
|
||||
|
||||
export const cloudSyncButton = style({
|
||||
padding: `${SPACING_UNIT * 1.5}px ${SPACING_UNIT * 2}px`,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
||||
backdropFilter: "blur(20px)",
|
||||
borderRadius: "8px",
|
||||
transition: "all ease 0.2s",
|
||||
cursor: "pointer",
|
||||
minHeight: "40px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
color: vars.color.muted,
|
||||
fontSize: "14px",
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.8)",
|
||||
animation: `${slideIn} 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running`,
|
||||
animationDuration: "0.3s",
|
||||
":active": {
|
||||
opacity: "0.9",
|
||||
},
|
||||
":disabled": {
|
||||
opacity: vars.opacity.disabled,
|
||||
cursor: "not-allowed",
|
||||
},
|
||||
":hover": {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
});
|
||||
235
src/renderer/src/pages/game-details/game-details.scss
Normal file
235
src/renderer/src/pages/game-details/game-details.scss
Normal file
@ -0,0 +1,235 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
$hero-height: 300px;
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateY(#{40 + $spacing-unit * 2}px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.game-details {
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all ease 0.3s;
|
||||
|
||||
&--blurred-content {
|
||||
filter: blur(20px);
|
||||
}
|
||||
}
|
||||
|
||||
&__hero {
|
||||
width: 100%;
|
||||
height: $hero-height;
|
||||
min-height: $hero-height;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
transition: all ease 0.2s;
|
||||
|
||||
@media (min-width: 1250px) {
|
||||
height: 350px;
|
||||
min-height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
&__hero-content {
|
||||
padding: #{$spacing-unit * 2};
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&__hero-logo-backdrop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__hero-image {
|
||||
width: 100%;
|
||||
height: $hero-height;
|
||||
min-height: $hero-height;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
transition: all ease 0.2s;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
|
||||
@media (min-width: 1250px) {
|
||||
object-position: center;
|
||||
height: 350px;
|
||||
min-height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
&__game-logo {
|
||||
width: 300px;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
&__hero-image-skeleton {
|
||||
height: 300px;
|
||||
|
||||
@media (min-width: 1250px) {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__description-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
$background-color 50%,
|
||||
$dark-background-color 100%
|
||||
);
|
||||
}
|
||||
|
||||
&__description-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__description {
|
||||
user-select: text;
|
||||
line-height: 22px;
|
||||
font-size: 16px;
|
||||
padding: #{$spacing-unit * 3} #{$spacing-unit * 2};
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 5px;
|
||||
margin-top: $spacing-unit;
|
||||
margin-bottom: #{$spacing-unit * 3};
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__description-skeleton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-unit;
|
||||
padding: #{$spacing-unit * 3} #{$spacing-unit * 2};
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
width: 60%;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&__randomizer-button {
|
||||
animation-name: slide-in;
|
||||
animation-duration: 0.2s;
|
||||
position: fixed;
|
||||
bottom: #{$spacing-unit * 3};
|
||||
right: #{9 + $spacing-unit * 2}px;
|
||||
box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 10px 1px;
|
||||
border: solid 2px $border-color;
|
||||
z-index: 1;
|
||||
background-color: $background-color;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $background-color;
|
||||
box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 15px 5px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
opacity: 0.8;
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__hero-panel-skeleton {
|
||||
width: 100%;
|
||||
padding: #{$spacing-unit * 2};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: $background-color;
|
||||
height: 72px;
|
||||
border-bottom: solid 1px $border-color;
|
||||
}
|
||||
|
||||
&__cloud-sync-button {
|
||||
padding: #{$spacing-unit * 1.5} #{$spacing-unit * 2};
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 8px;
|
||||
transition: all ease 0.2s;
|
||||
cursor: pointer;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacing-unit;
|
||||
color: $muted-color;
|
||||
font-size: 14px;
|
||||
border: solid 1px $border-color;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
|
||||
animation: slide-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none
|
||||
running;
|
||||
animation-duration: 0.3s;
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: $disabled-opacity;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
|
||||
export const heroPanelAction = style({
|
||||
border: `solid 1px ${vars.color.muted}`,
|
||||
});
|
||||
|
||||
export const actions = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
export const separator = style({
|
||||
width: "1px",
|
||||
backgroundColor: vars.color.muted,
|
||||
opacity: "0.2",
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.hero-panel-actions {
|
||||
&__action {
|
||||
border: solid 1px $muted-color;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: #{$spacing-unit * 2};
|
||||
}
|
||||
|
||||
&__separator {
|
||||
width: 1px;
|
||||
background-color: $muted-color;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
import { recipe } from "@vanilla-extract/recipes";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
|
||||
export const panel = recipe({
|
||||
base: {
|
||||
width: "100%",
|
||||
height: "72px",
|
||||
minHeight: "72px",
|
||||
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
transition: "all ease 0.2s",
|
||||
borderBottom: `solid 1px ${vars.color.border}`,
|
||||
position: "sticky",
|
||||
overflow: "hidden",
|
||||
top: "0",
|
||||
zIndex: "2",
|
||||
},
|
||||
variants: {
|
||||
stuck: {
|
||||
true: {
|
||||
boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.8)",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const content = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const actions = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const downloadDetailsRow = style({
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
display: "flex",
|
||||
color: vars.color.body,
|
||||
alignItems: "center",
|
||||
});
|
||||
|
||||
export const downloadsLink = style({
|
||||
color: vars.color.body,
|
||||
textDecoration: "underline",
|
||||
});
|
||||
|
||||
export const progressBar = recipe({
|
||||
base: {
|
||||
position: "absolute",
|
||||
bottom: "0",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "3px",
|
||||
transition: "all ease 0.2s",
|
||||
"::-webkit-progress-bar": {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
"::-webkit-progress-value": {
|
||||
backgroundColor: vars.color.muted,
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
disabled: {
|
||||
true: {
|
||||
opacity: vars.opacity.disabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
66
src/renderer/src/pages/game-details/hero/hero-panel.scss
Normal file
66
src/renderer/src/pages/game-details/hero/hero-panel.scss
Normal file
@ -0,0 +1,66 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.hero-panel {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
min-height: 72px;
|
||||
padding: #{$spacing-unit * 2} #{$spacing-unit * 3};
|
||||
background-color: $dark-background-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: all ease 0.2s;
|
||||
border-bottom: solid 1px $border-color;
|
||||
position: sticky;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
&--stuck {
|
||||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__download-details-row {
|
||||
gap: $spacing-unit;
|
||||
display: flex;
|
||||
color: $body-color;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__downloads-link {
|
||||
color: $body-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&__progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
transition: all ease 0.2s;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: $muted-color;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: $disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
|
||||
export const container = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT * 3}px`,
|
||||
width: "100%",
|
||||
});
|
||||
|
||||
export const downloadsPathField = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const hintText = style({
|
||||
fontSize: "12px",
|
||||
color: vars.color.body,
|
||||
});
|
||||
|
||||
export const downloaders = style({
|
||||
display: "grid",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
gridTemplateColumns: "repeat(2, 1fr)",
|
||||
});
|
||||
|
||||
export const downloaderOption = style({
|
||||
position: "relative",
|
||||
":only-child": {
|
||||
gridColumn: "1 / -1",
|
||||
},
|
||||
});
|
||||
|
||||
export const downloaderIcon = style({
|
||||
position: "absolute",
|
||||
left: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
export const pathError = style({
|
||||
cursor: "pointer",
|
||||
":hover": {
|
||||
textDecoration: "underline",
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,47 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.download-settings-modal {
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: #{$spacing-unit * 3};
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__downloads-path-field {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__hint-text {
|
||||
font-size: 12px;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&__downloaders {
|
||||
display: grid;
|
||||
gap: $spacing-unit;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
&__downloader-option {
|
||||
position: relative;
|
||||
|
||||
&:only-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
&__downloader-icon {
|
||||
position: absolute;
|
||||
left: #{$spacing-unit * 2};
|
||||
}
|
||||
|
||||
&__path-error {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT } from "../../../theme.css";
|
||||
|
||||
export const optionsContainer = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
flexDirection: "column",
|
||||
});
|
||||
|
||||
export const gameOptionHeader = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const gameOptionHeaderDescription = style({
|
||||
fontWeight: "400",
|
||||
});
|
||||
|
||||
export const gameOptionRow = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
@ -0,0 +1,24 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.game-options-modal {
|
||||
&__options-container {
|
||||
display: flex;
|
||||
gap: #{$spacing-unit * 2};
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__game-option-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__game-option-header-description {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&__game-option-row {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT } from "../../../theme.css";
|
||||
|
||||
export const deleteActionsButtonsCtn = style({
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
justifyContent: "end",
|
||||
alignItems: "center",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.remove-from-library-modal {
|
||||
&__delete-actions-buttons-ctn {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
|
||||
export const repacks = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
flexDirection: "column",
|
||||
});
|
||||
|
||||
export const repackButton = style({
|
||||
display: "flex",
|
||||
textAlign: "left",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
color: vars.color.body,
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
@ -0,0 +1,19 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.repacks-modal {
|
||||
&__repacks {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__repack-button {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-unit;
|
||||
color: $body-color;
|
||||
padding: #{$spacing-unit * 2};
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
import { recipe } from "@vanilla-extract/recipes";
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
export const sidebarSectionButton = style({
|
||||
height: "72px",
|
||||
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: vars.color.background,
|
||||
color: vars.color.muted,
|
||||
width: "100%",
|
||||
cursor: "pointer",
|
||||
transition: "all ease 0.2s",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
fontSize: "14px",
|
||||
fontWeight: "bold",
|
||||
":hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.05)",
|
||||
},
|
||||
":active": {
|
||||
opacity: vars.opacity.active,
|
||||
},
|
||||
});
|
||||
|
||||
export const chevron = recipe({
|
||||
base: {
|
||||
transition: "transform ease 0.2s",
|
||||
},
|
||||
variants: {
|
||||
open: {
|
||||
true: {
|
||||
transform: "rotate(180deg)",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,34 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.sidebar-section {
|
||||
&__button {
|
||||
height: 72px;
|
||||
padding: #{$spacing-unit * 2};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: $background-color;
|
||||
color: $muted-color;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
gap: $spacing-unit;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: $active-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
&__chevron {
|
||||
transition: transform ease 0.2s;
|
||||
|
||||
&--open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,169 +0,0 @@
|
||||
import { globalStyle, style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
import { recipe } from "@vanilla-extract/recipes";
|
||||
|
||||
export const contentSidebar = style({
|
||||
borderLeft: `solid 1px ${vars.color.border}`,
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
"@media": {
|
||||
"(min-width: 1024px)": {
|
||||
maxWidth: "300px",
|
||||
width: "100%",
|
||||
},
|
||||
"(min-width: 1280px)": {
|
||||
width: "100%",
|
||||
maxWidth: "400px",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const requirementButtonContainer = style({
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
});
|
||||
|
||||
export const requirementButton = style({
|
||||
border: `solid 1px ${vars.color.border};`,
|
||||
borderLeft: "none",
|
||||
borderRight: "none",
|
||||
borderRadius: "0",
|
||||
width: "100%",
|
||||
});
|
||||
|
||||
export const requirementsDetails = style({
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
lineHeight: "22px",
|
||||
fontSize: "16px",
|
||||
});
|
||||
|
||||
export const requirementsDetailsSkeleton = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "8px",
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
fontSize: "16px",
|
||||
});
|
||||
|
||||
export const howLongToBeatCategoriesList = style({
|
||||
margin: "0",
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "16px",
|
||||
});
|
||||
|
||||
export const howLongToBeatCategory = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "4px",
|
||||
background:
|
||||
"linear-gradient(90deg, transparent 20%, rgb(255 255 255 / 2%) 100%)",
|
||||
borderRadius: "4px",
|
||||
padding: `8px 16px`,
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
});
|
||||
|
||||
export const howLongToBeatCategoryLabel = style({
|
||||
color: vars.color.muted,
|
||||
});
|
||||
|
||||
export const howLongToBeatCategorySkeleton = style({
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
borderRadius: "4px",
|
||||
height: "76px",
|
||||
});
|
||||
|
||||
export const statsSection = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
justifyContent: "space-between",
|
||||
transition: "max-height ease 0.5s",
|
||||
overflow: "hidden",
|
||||
"@media": {
|
||||
"(min-width: 1024px)": {
|
||||
flexDirection: "column",
|
||||
},
|
||||
"(min-width: 1280px)": {
|
||||
flexDirection: "row",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const statsCategoryTitle = style({
|
||||
fontSize: "14px",
|
||||
fontWeight: "bold",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const statsCategory = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT / 2}px`,
|
||||
});
|
||||
|
||||
globalStyle(`${requirementsDetails} a`, {
|
||||
display: "flex",
|
||||
color: vars.color.body,
|
||||
});
|
||||
|
||||
export const list = style({
|
||||
listStyle: "none",
|
||||
margin: "0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
export const listItem = style({
|
||||
display: "flex",
|
||||
cursor: "pointer",
|
||||
transition: "all ease 0.1s",
|
||||
color: vars.color.muted,
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
borderRadius: "4px",
|
||||
padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
alignItems: "center",
|
||||
textAlign: "left",
|
||||
":hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
textDecoration: "none",
|
||||
},
|
||||
});
|
||||
|
||||
export const listItemImage = recipe({
|
||||
base: {
|
||||
width: "54px",
|
||||
height: "54px",
|
||||
borderRadius: "4px",
|
||||
objectFit: "cover",
|
||||
},
|
||||
variants: {
|
||||
unlocked: {
|
||||
false: {
|
||||
filter: "grayscale(100%)",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const subscriptionRequiredButton = style({
|
||||
textDecoration: "none",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
gap: `${SPACING_UNIT / 2}px`,
|
||||
color: vars.color.warning,
|
||||
cursor: "pointer",
|
||||
":hover": {
|
||||
textDecoration: "underline",
|
||||
},
|
||||
});
|
||||
168
src/renderer/src/pages/game-details/sidebar/sidebar.scss
Normal file
168
src/renderer/src/pages/game-details/sidebar/sidebar.scss
Normal file
@ -0,0 +1,168 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.sidebar {
|
||||
&__content {
|
||||
border-left: solid 1px $border-color;
|
||||
background-color: $dark-background-color;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
&__requirement-button-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__requirement-button {
|
||||
border: solid 1px $border-color;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__requirements-details {
|
||||
padding: #{$spacing-unit * 2};
|
||||
line-height: 22px;
|
||||
font-size: 16px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__requirements-details-skeleton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: #{$spacing-unit * 2};
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&__how-long-to-beat-categories-list {
|
||||
margin: 0;
|
||||
padding: #{$spacing-unit * 2};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__how-long-to-beat-category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 20%,
|
||||
rgb(255 255 255 / 2%) 100%
|
||||
);
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
border: solid 1px $border-color;
|
||||
}
|
||||
|
||||
&__how-long-to-beat-category-label {
|
||||
color: $muted-color;
|
||||
}
|
||||
|
||||
&__how-long-to-beat-category-skeleton {
|
||||
border: solid 1px $border-color;
|
||||
border-radius: 4px;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
&__stats-section {
|
||||
display: flex;
|
||||
gap: #{$spacing-unit * 2};
|
||||
padding: #{$spacing-unit * 2};
|
||||
justify-content: space-between;
|
||||
transition: max-height ease 0.5s;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&__stats-category-title {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__stats-category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: #{$spacing-unit / 2};
|
||||
}
|
||||
|
||||
&__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: #{$spacing-unit * 2};
|
||||
padding: #{$spacing-unit * 2};
|
||||
}
|
||||
|
||||
&__list-item {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.1s;
|
||||
color: $muted-color;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
padding: $spacing-unit;
|
||||
gap: #{$spacing-unit * 2};
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__list-item-image {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
|
||||
&--unlocked {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__subscription-required-button {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: #{$spacing-unit / 2};
|
||||
color: $warning-color;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT } from "../../theme.css";
|
||||
|
||||
export const catalogueCategories = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const content = style({
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT * 3}px`,
|
||||
padding: `${SPACING_UNIT * 3}px`,
|
||||
flex: "1",
|
||||
});
|
||||
|
||||
export const cards = style({
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(2, 1fr)",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
transition: "all ease 0.2s",
|
||||
});
|
||||
24
src/renderer/src/pages/home/catalogue-home.scss
Normal file
24
src/renderer/src/pages/home/catalogue-home.scss
Normal file
@ -0,0 +1,24 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.catalogue-home {
|
||||
&__categories {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: #{$spacing-unit * 3};
|
||||
padding: #{$spacing-unit * 3};
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: #{$spacing-unit * 2};
|
||||
transition: all ease 0.2s;
|
||||
}
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
|
||||
export const homeHeader = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
});
|
||||
|
||||
export const content = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT * 3}px`,
|
||||
padding: `${SPACING_UNIT * 3}px`,
|
||||
flex: "1",
|
||||
overflowY: "auto",
|
||||
});
|
||||
|
||||
export const cards = style({
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(1, 1fr)",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
transition: "all ease 0.2s",
|
||||
"@media": {
|
||||
"(min-width: 768px)": {
|
||||
gridTemplateColumns: "repeat(2, 1fr)",
|
||||
},
|
||||
"(min-width: 1250px)": {
|
||||
gridTemplateColumns: "repeat(3, 1fr)",
|
||||
},
|
||||
"(min-width: 1600px)": {
|
||||
gridTemplateColumns: "repeat(4, 1fr)",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const cardSkeleton = style({
|
||||
width: "100%",
|
||||
height: "180px",
|
||||
boxShadow: "0px 0px 15px 0px #000000",
|
||||
overflow: "hidden",
|
||||
borderRadius: "4px",
|
||||
transition: "all ease 0.2s",
|
||||
zIndex: "1",
|
||||
":active": {
|
||||
opacity: vars.opacity.active,
|
||||
},
|
||||
});
|
||||
|
||||
export const noResults = style({
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
gap: "16px",
|
||||
gridColumn: "1 / -1",
|
||||
});
|
||||
|
||||
export const buttonsList = style({
|
||||
display: "flex",
|
||||
listStyle: "none",
|
||||
margin: "0",
|
||||
padding: "0",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const flameIcon = style({
|
||||
width: "30px",
|
||||
top: "-10px",
|
||||
left: "-5px",
|
||||
position: "absolute",
|
||||
});
|
||||
79
src/renderer/src/pages/home/home.scss
Normal file
79
src/renderer/src/pages/home/home.scss
Normal file
@ -0,0 +1,79 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.home {
|
||||
&__header {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: #{$spacing-unit * 3};
|
||||
padding: #{$spacing-unit * 3};
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: #{$spacing-unit * 2};
|
||||
transition: all ease 0.2s;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1250px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&__card-skeleton {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
box-shadow: 0px 0px 15px 0px #000000;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.2s;
|
||||
z-index: 1;
|
||||
|
||||
&:active {
|
||||
opacity: $active-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
&__no-results {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
&__buttons-list {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__flame-icon {
|
||||
width: 30px;
|
||||
top: -10px;
|
||||
left: -5px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
import { vars } from "../../../theme.css";
|
||||
import { globalStyle, style } from "@vanilla-extract/css";
|
||||
|
||||
export const profileAvatarEditContainer = style({
|
||||
alignSelf: "center",
|
||||
// width: "132px",
|
||||
// height: "132px",
|
||||
display: "flex",
|
||||
// borderRadius: "4px",
|
||||
color: vars.color.body,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: vars.color.background,
|
||||
position: "relative",
|
||||
cursor: "pointer",
|
||||
});
|
||||
|
||||
export const profileAvatarEditOverlay = style({
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.7)",
|
||||
color: vars.color.muted,
|
||||
zIndex: "1",
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
transition: "all ease 0.2s",
|
||||
alignItems: "center",
|
||||
borderRadius: "4px",
|
||||
opacity: "0",
|
||||
});
|
||||
|
||||
globalStyle(`${profileAvatarEditContainer}:hover ${profileAvatarEditOverlay}`, {
|
||||
opacity: "1",
|
||||
});
|
||||
@ -0,0 +1,34 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.edit-profile-modal {
|
||||
&__profile-avatar-edit-container {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
color: $body-color;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $background-color;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__profile-avatar-edit-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: $muted-color;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
transition: all ease 0.2s;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&__profile-avatar-edit-container:hover &__profile-avatar-edit-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { SPACING_UNIT } from "../../../theme.css";
|
||||
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
export const container = style({
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const lockIcon = style({
|
||||
width: "60px",
|
||||
height: "60px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.06)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginBottom: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
@ -0,0 +1,24 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.locked-profile {
|
||||
&__container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__lock-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: $spacing-unit * 2;
|
||||
}
|
||||
}
|
||||
@ -1,237 +0,0 @@
|
||||
import { vars, SPACING_UNIT } from "../../../theme.css";
|
||||
import { globalStyle, style } from "@vanilla-extract/css";
|
||||
|
||||
export const gameCover = style({
|
||||
transition: "all ease 0.2s",
|
||||
boxShadow: "0 8px 10px -2px rgba(0, 0, 0, 0.5)",
|
||||
width: "100%",
|
||||
position: "relative",
|
||||
":before": {
|
||||
content: "",
|
||||
top: "0",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "172%",
|
||||
position: "absolute",
|
||||
background:
|
||||
"linear-gradient(35deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 51.5%, rgba(255, 255, 255, 0.15) 54%, rgba(255, 255, 255, 0.15) 100%)",
|
||||
transition: "all ease 0.3s",
|
||||
transform: "translateY(-36%)",
|
||||
opacity: "0.5",
|
||||
},
|
||||
});
|
||||
|
||||
export const game = style({
|
||||
transition: "all ease 0.2s",
|
||||
":hover": {
|
||||
transform: "scale(1.05)",
|
||||
},
|
||||
});
|
||||
|
||||
globalStyle(`${gameCover}:hover::before`, {
|
||||
opacity: "1",
|
||||
transform: "translateY(-20%)",
|
||||
});
|
||||
|
||||
export const box = style({
|
||||
backgroundColor: vars.color.background,
|
||||
borderRadius: "4px",
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
export const sectionHeader = style({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
export const list = style({
|
||||
listStyle: "none",
|
||||
margin: "0",
|
||||
padding: "0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
export const friend = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
alignItems: "center",
|
||||
});
|
||||
|
||||
export const friendName = style({
|
||||
color: vars.color.muted,
|
||||
fontWeight: "bold",
|
||||
fontSize: vars.size.body,
|
||||
});
|
||||
|
||||
export const rightContent = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
flexDirection: "column",
|
||||
transition: "all ease 0.2s",
|
||||
"@media": {
|
||||
"(min-width: 1024px)": {
|
||||
maxWidth: "300px",
|
||||
width: "100%",
|
||||
},
|
||||
"(min-width: 1280px)": {
|
||||
width: "100%",
|
||||
maxWidth: "400px",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const listItem = style({
|
||||
display: "flex",
|
||||
cursor: "pointer",
|
||||
transition: "all ease 0.1s",
|
||||
color: vars.color.muted,
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
borderRadius: "4px",
|
||||
padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
alignItems: "center",
|
||||
":hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
textDecoration: "none",
|
||||
},
|
||||
});
|
||||
|
||||
export const statsListItem = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
transition: "all ease 0.1s",
|
||||
color: vars.color.muted,
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
borderRadius: "4px",
|
||||
padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
":hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
textDecoration: "none",
|
||||
},
|
||||
});
|
||||
|
||||
export const gamesGrid = style({
|
||||
listStyle: "none",
|
||||
margin: "0",
|
||||
padding: "0",
|
||||
display: "grid",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
gridTemplateColumns: "repeat(2, 1fr)",
|
||||
"@container": {
|
||||
[`app-container (min-width: 900px)`]: {
|
||||
gridTemplateColumns: "repeat(4, 1fr)",
|
||||
},
|
||||
[`app-container (min-width: 1300px)`]: {
|
||||
gridTemplateColumns: "repeat(5, 1fr)",
|
||||
},
|
||||
[`app-container (min-width: 2000px)`]: {
|
||||
gridTemplateColumns: "repeat(6, 1fr)",
|
||||
},
|
||||
[`app-container (min-width: 2600px)`]: {
|
||||
gridTemplateColumns: "repeat(8, 1fr)",
|
||||
},
|
||||
[`app-container (min-width: 3000px)`]: {
|
||||
gridTemplateColumns: "repeat(12, 1fr)",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const telescopeIcon = style({
|
||||
width: "60px",
|
||||
height: "60px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.06)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginBottom: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
export const noGames = style({
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const listItemImage = style({
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
borderRadius: "4px",
|
||||
objectFit: "cover",
|
||||
});
|
||||
|
||||
export const listItemDetails = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT / 2}px`,
|
||||
overflow: "hidden",
|
||||
});
|
||||
|
||||
export const listItemTitle = style({
|
||||
fontWeight: "bold",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
textOverflow: "ellipsis",
|
||||
});
|
||||
|
||||
export const listItemDescription = style({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const defaultAvatarWrapper = style({
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: vars.color.background,
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
borderRadius: "4px",
|
||||
});
|
||||
|
||||
export const achievementsProgressBar = style({
|
||||
width: "100%",
|
||||
height: "4px",
|
||||
transition: "all ease 0.2s",
|
||||
"::-webkit-progress-bar": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
borderRadius: "4px",
|
||||
},
|
||||
"::-webkit-progress-value": {
|
||||
backgroundColor: vars.color.muted,
|
||||
borderRadius: "4px",
|
||||
},
|
||||
});
|
||||
|
||||
export const link = style({
|
||||
textAlign: "start",
|
||||
color: vars.color.body,
|
||||
":hover": {
|
||||
textDecoration: "underline",
|
||||
cursor: "pointer",
|
||||
},
|
||||
});
|
||||
|
||||
export const gameCardStats = style({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
transition: "transform 0.5s ease-in-out",
|
||||
flexShrink: "0",
|
||||
flexGrow: "0",
|
||||
});
|
||||
@ -0,0 +1,253 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.profile-content {
|
||||
&__game-cover {
|
||||
transition: all ease 0.2s;
|
||||
box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 172%;
|
||||
position: absolute;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
rgba(0, 0, 0, 0.1) 0%,
|
||||
rgba(0, 0, 0, 0.07) 51.5%,
|
||||
rgba(255, 255, 255, 0.15) 54%,
|
||||
rgba(255, 255, 255, 0.15) 100%
|
||||
);
|
||||
transition: all ease 0.3s;
|
||||
transform: translateY(-36%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
}
|
||||
|
||||
&__game {
|
||||
transition: all ease 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
&__box {
|
||||
background-color: $background-color;
|
||||
border-radius: 4px;
|
||||
border: solid 1px $border-color;
|
||||
padding: #{$spacing-unit * 2};
|
||||
}
|
||||
|
||||
&__section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: #{$spacing-unit * 2};
|
||||
}
|
||||
|
||||
&__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: #{$spacing-unit * 2};
|
||||
}
|
||||
|
||||
&__friend {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__friend-name {
|
||||
color: $muted-color;
|
||||
font-weight: bold;
|
||||
font-size: $body-size;
|
||||
}
|
||||
|
||||
&__right-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: #{$spacing-unit * 2};
|
||||
flex-direction: column;
|
||||
transition: all ease 0.2s;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
&__list-item {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.1s;
|
||||
color: $muted-color;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
padding: $spacing-unit;
|
||||
gap: #{$spacing-unit * 2};
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__stats-list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all ease 0.1s;
|
||||
color: $muted-color;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
padding: $spacing-unit;
|
||||
gap: $spacing-unit;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__games-grid {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: #{$spacing-unit * 2};
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
@container (min-width: 900px) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
@container (min-width: 1300px) {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
@container (min-width: 2000px) {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
@container (min-width: 2600px) {
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
|
||||
@container (min-width: 3000px) {
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&__telescope-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: #{$spacing-unit * 2};
|
||||
}
|
||||
|
||||
&__no-games {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__list-item-image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&__list-item-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-unit / 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__list-item-title {
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__list-item-description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__default-avatar-wrapper {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $background-color;
|
||||
border: solid 1px $border-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&__achievements-progress-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
transition: all ease 0.2s;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: $muted-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
text-align: start;
|
||||
color: $body-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&__game-card-stats {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
@ -1,90 +0,0 @@
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
export const profileContentBox = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
position: "relative",
|
||||
});
|
||||
|
||||
export const profileAvatarButton = style({
|
||||
width: "96px",
|
||||
minWidth: "96px",
|
||||
height: "96px",
|
||||
borderRadius: "4px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: vars.color.background,
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
boxShadow: "0px 0px 5px 0px rgba(0, 0, 0, 0.7)",
|
||||
cursor: "pointer",
|
||||
transition: "all ease 0.3s",
|
||||
color: vars.color.muted,
|
||||
position: "relative",
|
||||
":hover": {
|
||||
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.7)",
|
||||
},
|
||||
});
|
||||
|
||||
export const profileAvatar = style({
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
objectFit: "cover",
|
||||
overflow: "hidden",
|
||||
});
|
||||
|
||||
export const profileInformation = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
alignItems: "flex-start",
|
||||
color: "#c0c1c7",
|
||||
zIndex: 1,
|
||||
overflow: "hidden",
|
||||
});
|
||||
|
||||
export const profileDisplayName = style({
|
||||
fontWeight: "bold",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
textShadow: "0 0 5px rgb(0 0 0 / 40%)",
|
||||
});
|
||||
|
||||
export const heroPanel = style({
|
||||
width: "100%",
|
||||
height: "72px",
|
||||
minHeight: "72px",
|
||||
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
justifyContent: "space-between",
|
||||
backdropFilter: `blur(15px)`,
|
||||
borderTop: `solid 1px rgba(255, 255, 255, 0.1)`,
|
||||
boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.5)",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
||||
});
|
||||
|
||||
export const userInformation = style({
|
||||
display: "flex",
|
||||
padding: `${SPACING_UNIT * 7}px ${SPACING_UNIT * 3}px`,
|
||||
alignItems: "center",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
|
||||
export const currentGameWrapper = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT / 2}px`,
|
||||
});
|
||||
|
||||
export const currentGameDetails = style({
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
alignItems: "center",
|
||||
});
|
||||
@ -0,0 +1,92 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.profile-hero {
|
||||
&__content-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__avatar-button {
|
||||
width: 96px;
|
||||
min-width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $background-color;
|
||||
border: solid 1px $border-color;
|
||||
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.7);
|
||||
cursor: pointer;
|
||||
transition: all ease 0.3s;
|
||||
color: $muted-color;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-unit;
|
||||
align-items: flex-start;
|
||||
color: $muted-color;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__display-name {
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
text-shadow: 0 0 5px rgb(0 0 0 / 40%);
|
||||
}
|
||||
|
||||
&__hero-panel {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
min-height: 72px;
|
||||
padding: #{$spacing-unit * 2} #{$spacing-unit * 3};
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
justify-content: space-between;
|
||||
backdrop-filter: blur(15px);
|
||||
border-top: solid 1px rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
&__user-information {
|
||||
display: flex;
|
||||
padding: #{$spacing-unit * 7} #{$spacing-unit * 3};
|
||||
align-items: center;
|
||||
gap: #{$spacing-unit * 2};
|
||||
}
|
||||
|
||||
&__current-game-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: #{$spacing-unit / 2};
|
||||
}
|
||||
|
||||
&__current-game-details {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $spacing-unit;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import { SPACING_UNIT } from "../../theme.css";
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
export const wrapper = style({
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT * 3}px`,
|
||||
});
|
||||
10
src/renderer/src/pages/profile/profile.scss
Normal file
10
src/renderer/src/pages/profile/profile.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.profile {
|
||||
&__wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: #{$spacing-unit * 3};
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
export const reportButton = style({
|
||||
alignSelf: "flex-end",
|
||||
color: vars.color.muted,
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
display: "flex",
|
||||
cursor: "pointer",
|
||||
alignItems: "center",
|
||||
fontSize: "12px",
|
||||
});
|
||||
@ -0,0 +1,13 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.report-profile {
|
||||
&__report-button {
|
||||
align-self: flex-end;
|
||||
color: $muted-color;
|
||||
gap: $spacing-unit;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
import { vars } from "../../../theme.css";
|
||||
|
||||
export const uploadBackgroundImageButton = style({
|
||||
position: "absolute",
|
||||
top: 16,
|
||||
right: 16,
|
||||
borderColor: vars.color.body,
|
||||
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.8)",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.1)",
|
||||
backdropFilter: "blur(20px)",
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.upload-background-image-button {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
border-color: $body-color;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
|
||||
export const form = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT * 3}px`,
|
||||
});
|
||||
|
||||
export const blockedUser = style({
|
||||
display: "flex",
|
||||
minWidth: "240px",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
border: `1px solid ${vars.color.border}`,
|
||||
borderRadius: "4px",
|
||||
padding: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const unblockButton = style({
|
||||
color: vars.color.muted,
|
||||
cursor: "pointer",
|
||||
transition: "all ease 0.2s",
|
||||
":hover": {
|
||||
opacity: "0.7",
|
||||
},
|
||||
});
|
||||
|
||||
export const blockedUsersList = style({
|
||||
padding: "0",
|
||||
margin: "0",
|
||||
listStyle: "none",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
40
src/renderer/src/pages/settings/settings-account.scss
Normal file
40
src/renderer/src/pages/settings/settings-account.scss
Normal file
@ -0,0 +1,40 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.settings-account {
|
||||
&__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: #{$spacing-unit * 3};
|
||||
}
|
||||
|
||||
&__blocked-user {
|
||||
display: flex;
|
||||
min-width: 240px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: $dark-background-color;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 4px;
|
||||
padding: $spacing-unit;
|
||||
}
|
||||
|
||||
&__unblock-button {
|
||||
color: $muted-color;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
&__blocked-users-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
}
|
||||
@ -1,58 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
import { recipe } from "@vanilla-extract/recipes";
|
||||
|
||||
export const downloadSources = style({
|
||||
padding: "0",
|
||||
margin: "0",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
});
|
||||
|
||||
export const downloadSourceItem = recipe({
|
||||
base: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: vars.color.darkBackground,
|
||||
borderRadius: "8px",
|
||||
padding: `${SPACING_UNIT * 2}px`,
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
transition: "all ease 0.2s",
|
||||
},
|
||||
variants: {
|
||||
isSyncing: {
|
||||
true: {
|
||||
opacity: vars.opacity.disabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const downloadSourceItemHeader = style({
|
||||
marginBottom: `${SPACING_UNIT}px`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const downloadSourcesHeader = style({
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
});
|
||||
|
||||
export const navigateToCatalogueButton = style({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
color: vars.color.muted,
|
||||
textDecoration: "underline",
|
||||
cursor: "pointer",
|
||||
|
||||
":disabled": {
|
||||
cursor: "default",
|
||||
textDecoration: "none",
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,53 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.settings-download-sources {
|
||||
&__download-sources {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
gap: #{$spacing-unit * 2};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__download-source-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $dark-background-color;
|
||||
border-radius: 8px;
|
||||
padding: #{$spacing-unit * 2};
|
||||
gap: $spacing-unit;
|
||||
border: solid 1px $border-color;
|
||||
transition: all ease 0.2s;
|
||||
|
||||
&--is-syncing {
|
||||
opacity: $disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
&__download-source-item-header {
|
||||
margin-bottom: $spacing-unit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__download-sources-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__navigate-to-catalogue-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-unit;
|
||||
color: $muted-color;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT } from "../../theme.css";
|
||||
|
||||
export const form = style({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const description = style({
|
||||
marginBottom: `${SPACING_UNIT * 2}px`,
|
||||
});
|
||||
13
src/renderer/src/pages/settings/settings-real-debrid.scss
Normal file
13
src/renderer/src/pages/settings/settings-real-debrid.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.settings-real-debrid {
|
||||
&__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: #{$spacing-unit * 2};
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
import { SPACING_UNIT, vars } from "../../theme.css";
|
||||
|
||||
export const container = style({
|
||||
padding: "24px",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
});
|
||||
|
||||
export const content = style({
|
||||
backgroundColor: vars.color.background,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
padding: `${SPACING_UNIT * 3}px`,
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
boxShadow: "0px 0px 15px 0px #000000",
|
||||
borderRadius: "8px",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
});
|
||||
|
||||
export const settingsCategories = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
});
|
||||
27
src/renderer/src/pages/settings/settings.scss
Normal file
27
src/renderer/src/pages/settings/settings.scss
Normal file
@ -0,0 +1,27 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.settings {
|
||||
&__container {
|
||||
padding: 24px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__content {
|
||||
background-color: $background-color;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: #{$spacing-unit * 3};
|
||||
border: solid 1px $border-color;
|
||||
box-shadow: 0px 0px 15px 0px #000000;
|
||||
border-radius: 8px;
|
||||
gap: #{$spacing-unit * 2};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__categories {
|
||||
display: flex;
|
||||
gap: $spacing-unit;
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
import { CheckCircleIcon, XCircleIcon } from "@primer/octicons-react";
|
||||
import * as styles from "./user-friend-modal.css";
|
||||
import { SPACING_UNIT } from "@renderer/theme.css";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Avatar } from "@renderer/components";
|
||||
import "./user-friend-modal.scss";
|
||||
import "@renderer/theme.scss";
|
||||
|
||||
export type UserFriendItemProps = {
|
||||
userId: string;
|
||||
@ -45,7 +45,7 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
|
||||
if (type === "SENT") {
|
||||
return (
|
||||
<button
|
||||
className={styles.cancelRequestButton}
|
||||
className="cancel-request-button"
|
||||
onClick={() => props.onClickCancelRequest(userId)}
|
||||
title={t("cancel_request")}
|
||||
>
|
||||
|
||||
@ -1,79 +0,0 @@
|
||||
import { SPACING_UNIT, vars } from "../../../theme.css";
|
||||
import { style } from "@vanilla-extract/css";
|
||||
|
||||
export const friendListDisplayName = style({
|
||||
fontWeight: "bold",
|
||||
fontSize: vars.size.body,
|
||||
textAlign: "left",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
});
|
||||
|
||||
export const friendListContainer = style({
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT * 3}px`,
|
||||
alignItems: "center",
|
||||
borderRadius: "4px",
|
||||
border: `solid 1px ${vars.color.border}`,
|
||||
width: "100%",
|
||||
height: "54px",
|
||||
minHeight: "54px",
|
||||
transition: "all ease 0.2s",
|
||||
position: "relative",
|
||||
":hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
},
|
||||
});
|
||||
|
||||
export const friendListButton = style({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
position: "absolute",
|
||||
cursor: "pointer",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
flexDirection: "row",
|
||||
color: vars.color.body,
|
||||
gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
|
||||
padding: `0 ${SPACING_UNIT}px`,
|
||||
});
|
||||
|
||||
export const friendRequestItem = style({
|
||||
color: vars.color.body,
|
||||
":hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
},
|
||||
});
|
||||
|
||||
export const acceptRequestButton = style({
|
||||
cursor: "pointer",
|
||||
color: vars.color.body,
|
||||
width: "28px",
|
||||
height: "28px",
|
||||
":hover": {
|
||||
color: vars.color.success,
|
||||
},
|
||||
});
|
||||
|
||||
export const cancelRequestButton = style({
|
||||
cursor: "pointer",
|
||||
color: vars.color.body,
|
||||
width: "28px",
|
||||
height: "28px",
|
||||
":hover": {
|
||||
color: vars.color.danger,
|
||||
},
|
||||
});
|
||||
|
||||
export const friendCodeButton = style({
|
||||
color: vars.color.body,
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT / 2}px`,
|
||||
alignItems: "center",
|
||||
transition: "all ease 0.2s",
|
||||
":hover": {
|
||||
color: vars.color.muted,
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,85 @@
|
||||
@import "../../scss/variables";
|
||||
|
||||
.user-friend-modal {
|
||||
&__friend-list-display-name {
|
||||
font-weight: bold;
|
||||
font-size: $body-size;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__friend-list-container {
|
||||
display: flex;
|
||||
gap: #{$spacing-unit * 3};
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
border: solid 1px $border-color;
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
min-height: 54px;
|
||||
transition: all ease 0.2s;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&__friend-list-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
color: $body-color;
|
||||
gap: #{$spacing-unit + $spacing-unit / 2};
|
||||
padding: 0 $spacing-unit;
|
||||
}
|
||||
|
||||
&__friend-request-item {
|
||||
color: $body-color;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&__accept-request-button {
|
||||
cursor: pointer;
|
||||
color: $body-color;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
&:hover {
|
||||
color: $success-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__cancel-request-button {
|
||||
cursor: pointer;
|
||||
color: $body-color;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
&:hover {
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__friend-code-button {
|
||||
color: $body-color;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: $spacing-unit / 2;
|
||||
align-items: center;
|
||||
transition: all ease 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $muted-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,11 @@
|
||||
import { Button, Modal } from "@renderer/components";
|
||||
import { SPACING_UNIT } from "@renderer/theme.css";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { UserFriendModalAddFriend } from "./user-friend-modal-add-friend";
|
||||
import { useToast, useUserDetails } from "@renderer/hooks";
|
||||
import { UserFriendModalList } from "./user-friend-modal-list";
|
||||
import { CopyIcon } from "@primer/octicons-react";
|
||||
import * as styles from "./user-friend-modal.css";
|
||||
import "./user-friend-modal.scss";
|
||||
|
||||
export enum UserFriendModalTab {
|
||||
FriendsList,
|
||||
@ -64,33 +63,20 @@ export const UserFriendModal = ({
|
||||
|
||||
return (
|
||||
<Modal visible={visible} title={t("friends")} onClose={onClose}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "500px",
|
||||
flexDirection: "column",
|
||||
gap: `${SPACING_UNIT * 2}px`,
|
||||
}}
|
||||
>
|
||||
<div className="user-friend-modal__container">
|
||||
{isMe && (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: `${SPACING_UNIT}px`,
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div className="user-friend-modal__friend-code">
|
||||
<p>{t("your_friend_code")}</p>
|
||||
<button
|
||||
className={styles.friendCodeButton}
|
||||
className="user-friend-modal__friend-code-button"
|
||||
onClick={copyToClipboard}
|
||||
>
|
||||
<h3>{userDetails.id}</h3>
|
||||
<CopyIcon />
|
||||
</button>
|
||||
</div>
|
||||
<section style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
|
||||
<section className="user-friend-modal__tabs">
|
||||
{tabs.map((tab, index) => {
|
||||
return (
|
||||
<Button
|
||||
|
||||
@ -20,6 +20,18 @@ $title-bar-z-index: 4;
|
||||
$backdrop-z-index: 4;
|
||||
$modal-z-index: 5;
|
||||
|
||||
$search-width: 200px;
|
||||
$search-width-focused: 250px;
|
||||
$search-border-color-focused: #dadbe1;
|
||||
$search-border-color-hover: rgba(255, 255, 255, 0.5);
|
||||
$search-input-color: #dadbe1;
|
||||
$action-button-hover-color: #dadbe1;
|
||||
$back-button-width: 16px;
|
||||
$back-button-height: 16px;
|
||||
$title-transform: translateX(28px);
|
||||
$title-width: calc(100% - 28px);
|
||||
$new-version-font-size: 12px;
|
||||
|
||||
$body-font-size: 14px;
|
||||
$small-font-size: 12px;
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
import { createGlobalTheme } from "@vanilla-extract/css";
|
||||
|
||||
export const SPACING_UNIT = 8;
|
||||
|
||||
export const vars = createGlobalTheme(":root", {
|
||||
color: {
|
||||
background: "#1c1c1c",
|
||||
darkBackground: "#151515",
|
||||
muted: "#c0c1c7",
|
||||
body: "#8e919b",
|
||||
border: "rgba(255, 255, 255, 0.15)",
|
||||
success: "#1c9749",
|
||||
danger: "#e11d48",
|
||||
warning: "#ffc107",
|
||||
},
|
||||
opacity: {
|
||||
disabled: "0.5",
|
||||
active: "0.7",
|
||||
},
|
||||
size: {
|
||||
body: "14px",
|
||||
small: "12px",
|
||||
},
|
||||
zIndex: {
|
||||
toast: "5",
|
||||
bottomPanel: "3",
|
||||
titleBar: "4",
|
||||
backdrop: "4",
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user