mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-06-13 11:31:22 +00:00
Move css into theme folder
This commit is contained in:
Nicola Benaglia
parent
efd3624e92
commit
f440d5bd3f
260
src/styles/App-styles.ts
Normal file
260
src/styles/App-styles.ts
Normal file
@ -0,0 +1,260 @@
|
||||
import { Typography, Box, TextField, InputLabel } from '@mui/material';
|
||||
import { styled } from '@mui/system';
|
||||
|
||||
export const AppContainer = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
radius: '15px',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
overflow: 'hidden',
|
||||
}));
|
||||
|
||||
export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
}));
|
||||
|
||||
export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
}));
|
||||
|
||||
export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
width: '60px',
|
||||
height: '100%',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
}));
|
||||
|
||||
export const AuthenticatedContainerInnerTop = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
width: '100%px',
|
||||
height: '60px',
|
||||
padding: '20px',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
}));
|
||||
|
||||
export const TextP = styled(Typography)(({ theme }) => ({
|
||||
fontSize: '13px',
|
||||
fontWeight: 600,
|
||||
fontFamily: 'Inter',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
}));
|
||||
|
||||
export const TextItalic = styled('span')(({ theme }) => ({
|
||||
fontSize: '13px',
|
||||
fontWeight: 600,
|
||||
fontFamily: 'Inter',
|
||||
fontStyle: 'italic',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
}));
|
||||
|
||||
export const TextSpan = styled('span')(({ theme }) => ({
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: 800,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
}));
|
||||
|
||||
export const AddressBox = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
border: `1px solid ${
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(255, 255, 255, 0.5)'
|
||||
: 'rgba(0, 0, 0, 0.3)'
|
||||
}`,
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
width: 'auto',
|
||||
height: '25px',
|
||||
padding: '5px 15px',
|
||||
gap: '5px',
|
||||
borderRadius: '100px',
|
||||
fontFamily: 'Inter',
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
lineHeight: '14.52px',
|
||||
textAlign: 'left',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s',
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(41, 41, 43, 1)'
|
||||
: 'rgba(240, 240, 240, 1)',
|
||||
color: theme.palette.mode === 'dark' ? '#fff' : '#000',
|
||||
|
||||
'svg path': {
|
||||
fill: theme.palette.mode === 'dark' ? '#fff' : '#000',
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
export const CustomButton = styled(Box)(({ theme }) => ({
|
||||
boxSizing: 'border-box',
|
||||
padding: '15px 20px',
|
||||
gap: '10px',
|
||||
|
||||
border: `0.5px solid ${
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(255, 255, 255, 0.5)'
|
||||
: 'rgba(0, 0, 0, 0.3)'
|
||||
}`,
|
||||
filter: 'drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3))',
|
||||
borderRadius: '5px',
|
||||
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
|
||||
width: 'fit-content',
|
||||
minWidth: '160px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s',
|
||||
|
||||
fontWeight: 600,
|
||||
fontFamily: 'Inter',
|
||||
textAlign: 'center',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(41, 41, 43, 1)'
|
||||
: 'rgba(230, 230, 230, 1)',
|
||||
color: '#fff',
|
||||
|
||||
'svg path': {
|
||||
fill: '#fff',
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
interface CustomButtonProps {
|
||||
bgColor?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export const CustomButtonAccept = styled(Box)<CustomButtonProps>(
|
||||
({ bgColor, color, theme }) => ({
|
||||
boxSizing: 'border-box',
|
||||
padding: '15px 20px',
|
||||
gap: '10px',
|
||||
border: `0.5px solid ${
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(255, 255, 255, 0.5)'
|
||||
: 'rgba(0, 0, 0, 0.3)'
|
||||
}`,
|
||||
filter: 'drop-shadow(1px 4px 10.5px rgba(0,0,0,0.3))',
|
||||
borderRadius: 5,
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
width: 'fit-content',
|
||||
transition: 'all 0.2s',
|
||||
minWidth: 160,
|
||||
cursor: 'pointer',
|
||||
fontWeight: 600,
|
||||
fontFamily: 'Inter',
|
||||
textAlign: 'center',
|
||||
opacity: 0.7,
|
||||
|
||||
// Color and backgroundColor with fallbacks
|
||||
backgroundColor:
|
||||
bgColor || (theme.palette.mode === 'dark' ? '#1d1d1d' : '#f5f5f5'),
|
||||
color: color || (theme.palette.mode === 'dark' ? '#fff' : '#000'),
|
||||
|
||||
'&:hover': {
|
||||
opacity: 1,
|
||||
backgroundColor:
|
||||
bgColor ||
|
||||
(theme.palette.mode === 'dark'
|
||||
? 'rgba(41, 41, 43, 1)'
|
||||
: 'rgba(230, 230, 230, 1)'),
|
||||
color: color || '#fff',
|
||||
svg: {
|
||||
path: {
|
||||
fill: color || '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
export const CustomInput = styled(TextField)(({ theme }) => ({
|
||||
width: '183px', // Adjust the width as needed
|
||||
borderRadius: '5px',
|
||||
// backgroundColor: "rgba(30, 30, 32, 1)",
|
||||
outline: 'none',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
input: {
|
||||
fontSize: 10,
|
||||
fontFamily: 'Inter',
|
||||
fontWeight: 400,
|
||||
color: 'white',
|
||||
'&::placeholder': {
|
||||
fontSize: 16,
|
||||
color: 'rgba(255, 255, 255, 0.2)',
|
||||
},
|
||||
outline: 'none',
|
||||
padding: '10px',
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': {
|
||||
border: '0.5px solid rgba(255, 255, 255, 0.5)',
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
border: '0.5px solid rgba(255, 255, 255, 0.5)',
|
||||
},
|
||||
'&.Mui-focused fieldset': {
|
||||
border: '0.5px solid rgba(255, 255, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
'& .MuiInput-underline:before': {
|
||||
borderBottom: 'none',
|
||||
},
|
||||
'& .MuiInput-underline:hover:not(.Mui-disabled):before': {
|
||||
borderBottom: 'none',
|
||||
},
|
||||
'& .MuiInput-underline:after': {
|
||||
borderBottom: 'none',
|
||||
},
|
||||
}));
|
||||
|
||||
export const CustomLabel = styled(InputLabel)(({ theme }) => ({
|
||||
fontWeight: 400,
|
||||
fontFamily: 'Inter',
|
||||
fontSize: '10px',
|
||||
lineHeight: '12px',
|
||||
color:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'rgba(255, 255, 255, 0.5)'
|
||||
: 'rgba(0, 0, 0, 0.5)',
|
||||
}));
|
||||
@ -1,29 +0,0 @@
|
||||
import { createContext, useContext, useState, useMemo } from 'react';
|
||||
import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
|
||||
import { darkTheme, lightTheme } from './theme';
|
||||
|
||||
const ThemeContext = createContext({
|
||||
themeMode: 'light',
|
||||
toggleTheme: () => {},
|
||||
});
|
||||
|
||||
export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const [themeMode, setThemeMode] = useState('light');
|
||||
|
||||
const theme = useMemo(
|
||||
() => (themeMode === 'light' ? lightTheme : darkTheme),
|
||||
[themeMode]
|
||||
);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setThemeMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ themeMode, toggleTheme }}>
|
||||
<MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useThemeContext = () => useContext(ThemeContext);
|
||||
@ -1,77 +0,0 @@
|
||||
import { useThemeContext } from "./ThemeContext";
|
||||
import { styled, Switch } from "@mui/material";
|
||||
|
||||
const ThemeSwitch = styled(Switch)(({ theme }) => ({
|
||||
width: 62,
|
||||
height: 34,
|
||||
padding: 7,
|
||||
"& .MuiSwitch-switchBase": {
|
||||
margin: 1,
|
||||
padding: 0,
|
||||
transform: "translateX(6px)",
|
||||
"&.Mui-checked": {
|
||||
color: "#fff",
|
||||
transform: "translateX(22px)",
|
||||
"& .MuiSwitch-thumb:before": {
|
||||
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
|
||||
"#fff"
|
||||
)}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
|
||||
},
|
||||
"& + .MuiSwitch-track": {
|
||||
opacity: 1,
|
||||
backgroundColor: "#aab4be",
|
||||
...theme.applyStyles("dark", {
|
||||
backgroundColor: "#8796A5",
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
"& .MuiSwitch-thumb": {
|
||||
backgroundColor: "#001e3c",
|
||||
width: 32,
|
||||
height: 32,
|
||||
"&::before": {
|
||||
content: "''",
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
left: 0,
|
||||
top: 0,
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center",
|
||||
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
|
||||
"#fff"
|
||||
)}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
|
||||
},
|
||||
...theme.applyStyles("dark", {
|
||||
backgroundColor: "#003892",
|
||||
}),
|
||||
},
|
||||
"& .MuiSwitch-track": {
|
||||
opacity: 1,
|
||||
backgroundColor: "#aab4be",
|
||||
borderRadius: 20 / 2,
|
||||
...theme.applyStyles("dark", {
|
||||
backgroundColor: "#8796A5",
|
||||
}),
|
||||
},
|
||||
}));
|
||||
|
||||
const ThemeSelector = ({ style }) => {
|
||||
const { themeMode, toggleTheme } = useThemeContext();
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: "1px",
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
<ThemeSwitch checked={themeMode === "dark"} onChange={toggleTheme} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemeSelector;
|
||||
137
src/styles/index.css
Normal file
137
src/styles/index.css
Normal file
@ -0,0 +1,137 @@
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./styles/fonts/Inter-SemiBold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./styles/fonts/Inter-ExtraBold.ttf') format('truetype');
|
||||
font-weight: 800;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./styles/fonts/Inter-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./styles/fonts/Inter-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:root {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
box-sizing: border-box !important;
|
||||
word-break: break-word;
|
||||
--color-instance: #1e1e20;
|
||||
--color-instance-popover-bg: #222222;
|
||||
--Mail-Background: rgba(49, 51, 56, 1);
|
||||
--new-message-text: black;
|
||||
--bg-primary: rgba(31, 32, 35, 1);
|
||||
--bg-2: #27282c;
|
||||
--bg-3: rgba(0, 0, 0, 0.1);
|
||||
--unread: #4297e2;
|
||||
--danger: #b14646;
|
||||
--apps-circle: #1f2023;
|
||||
--green: #5eb049;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: opacity 0.5s ease; /* Optional: adds a fade effect */
|
||||
}
|
||||
|
||||
.image-container .hover-image {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.image-container:hover .hover-image {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-container:hover .base-image {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-track:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #444444;
|
||||
border-radius: 8px;
|
||||
background-clip: content-box;
|
||||
border: 4px solid transparent;
|
||||
transition: 0.3s background-color;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #363636;
|
||||
}
|
||||
|
||||
@property --var1 {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
|
||||
.scrollable-container {
|
||||
transition: --var1 0.4s;
|
||||
}
|
||||
|
||||
.scrollable-container:hover {
|
||||
--var1: #444444;
|
||||
}
|
||||
|
||||
.scrollable-container::-webkit-scrollbar-thumb {
|
||||
background-color: var(--var1);
|
||||
border-radius: 8px;
|
||||
background-clip: content-box;
|
||||
border: 4px solid transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Mobile-specific scrollbar styles */
|
||||
@media only screen and (max-width: 600px) {
|
||||
::-webkit-scrollbar {
|
||||
width: 8px; /* Narrower scrollbar width on mobile */
|
||||
height: 6px; /* Narrower scrollbar height on mobile */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px; /* Adjust the radius for a narrower thumb */
|
||||
border: 2px solid transparent; /* Narrower thumb border */
|
||||
}
|
||||
}
|
||||
|
||||
.group-list::-webkit-scrollbar-thumb:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
overscroll-behavior: none !important;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
}
|
||||
@ -91,7 +91,7 @@ const lightTheme = createTheme({
|
||||
light: '#f9f9fd',
|
||||
},
|
||||
secondary: {
|
||||
main: '#1EAAF1',
|
||||
main: '#c2deec',
|
||||
},
|
||||
background: {
|
||||
default: '#fafafa',
|
||||
@ -108,7 +108,7 @@ const lightTheme = createTheme({
|
||||
styleOverrides: {
|
||||
root: {
|
||||
boxShadow:
|
||||
'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;',
|
||||
'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(230, 200, 200, 0.06) 0px 1px 2px 0px;',
|
||||
borderRadius: '8px',
|
||||
transition: 'all 0.3s ease-in-out',
|
||||
'&:hover': {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user