mirror of
https://github.com/hydralauncher/hydra.git
synced 2025-01-23 13:34:54 +03:00
refactor: remove css-in-ts styles from all pages
This commit is contained in:
Hachi-R
parent
28a2f1dda5
commit
52f7647c79
@ -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`,
|
|
||||||
});
|
|
||||||
@ -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`,
|
|
||||||
});
|
|
||||||
@ -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`,
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
});
|
|
||||||
@ -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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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)",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
});
|
|
||||||
@ -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,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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`,
|
|
||||||
});
|
|
||||||
@ -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`,
|
|
||||||
});
|
|
||||||
@ -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`,
|
|
||||||
});
|
|
||||||
@ -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)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
});
|
|
||||||
@ -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`,
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
});
|
|
||||||
@ -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`,
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
});
|
|
||||||
@ -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)",
|
|
||||||
});
|
|
||||||
@ -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`,
|
|
||||||
});
|
|
||||||
@ -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",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -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`,
|
|
||||||
});
|
|
||||||
@ -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`,
|
|
||||||
});
|
|
||||||
@ -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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user