Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages Activity Actions

removed 'invertButton' from themes

Browse source
This commit is contained in:
Neshura 2023-03-16 22:19:17 +01:00
parent 6c1d383c69
commit 691a0ed881
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
6 changed files with 27 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/styles/content.tsx
View file

@ -95,15 +95,13 @@ export const PageCard = styled.div`
${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & { ${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
color: ${({ theme }) => theme.colors.secondary}; color: ${({ theme }) => theme.colors.secondary};
border-color: ${({ theme }) => theme.colors.secondary}; border-color: ${({ theme }) => theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ? background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
} }
${CardLink}:focus,${CardLink}:active,${CardLink}:hover & { ${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
color: ${({ theme }) => theme.colors.secondary}; color: ${({ theme }) => theme.colors.secondary};
border-color: ${({ theme }) => theme.colors.secondary}; border-color: ${({ theme }) => theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ? background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
} }
`; `;
@ -146,14 +144,12 @@ export const OnlineStatus = styled.p<OnlinePropType>`
${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & { ${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
border-color: ${({ theme }) => theme.colors.secondary}; border-color: ${({ theme }) => theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ? background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
} }
${CardLink}:focus,${CardLink}:active,${CardLink}:hover & { ${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
border-color: ${({ theme }) => theme.colors.secondary}; border-color: ${({ theme }) => theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ? background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
} }
`; `;

21
components/styles/navbar/desktop.tsx
View file

@ -24,15 +24,12 @@ export const NavBar = styled.nav`
` `
export const NavLink = styled(Link) <ActivePropType>` export const NavLink = styled(Link) <ActivePropType>`
color: ${props => props.active ? color: ${props => ({ theme }) => props.active ?
({ theme }) => theme.invertButtons ? theme.colors.text ?
theme.colors.text ? theme.colors.text : theme.colors.secondary : theme.colors.secondary : theme.colors.text : theme.colors.secondary :
({ theme }) => theme.colors.primary}; theme.colors.primary};
background-color: ${props => props.active ? background-color: ${props => ({ theme }) => theme.colors.background};
({ theme }) => theme.invertButtons ?
theme.colors.secondary : theme.colors.background :
({ theme }) => theme.colors.background};
padding: 2px 6px; padding: 2px 6px;
border: 2px solid; border: 2px solid;
@ -43,12 +40,6 @@ export const NavLink = styled(Link) <ActivePropType>`
transition: all 0.1s ease; transition: all 0.1s ease;
&:hover { &:hover {
color: ${({ theme }) => theme.invertButtons ? color: ${({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary};
theme.colors.text ? theme.colors.text : theme.colors.primary :
theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ?
theme.colors.secondary :
theme.colors.background};
} }
` `

66
components/styles/navbar/mobile.tsx
View file

@ -87,13 +87,8 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
color: ${props => ({ theme }) => { color: ${props => ({ theme }) => {
let ret: string; let ret: string;
if (props.active) { if (props.active) {
if (theme.invertButtons) {
ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
}
else {
ret = theme.colors.secondary; ret = theme.colors.secondary;
} }
}
else { else {
ret = theme.colors.primary; ret = theme.colors.primary;
} }
@ -102,16 +97,11 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
background-color: ${props => ({ theme }) => { background-color: ${props => ({ theme }) => {
let ret: string; let ret: string;
if (props.active) { if (props.active) {
if (theme.invertButtons) {
ret = theme.colors.secondary; ret = theme.colors.secondary;
} }
else { else {
ret = theme.colors.background; ret = theme.colors.background;
} }
}
else {
ret = theme.colors.background;
}
return ret; return ret;
}}; }};
@ -120,13 +110,8 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
border-color: ${props => ({ theme }) => { border-color: ${props => ({ theme }) => {
let ret: string; let ret: string;
if (props.active) { if (props.active) {
if (theme.invertButtons) {
ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
}
else {
ret = theme.colors.secondary; ret = theme.colors.secondary;
} }
}
else { else {
ret = theme.colors.primary; ret = theme.colors.primary;
} }
@ -135,36 +120,15 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
&:hover { &:hover {
color: ${({ theme }) => { color: ${({ theme }) => {
let ret: string; return theme.colors.secondary
if (theme.invertButtons) {
ret = theme.colors.text ? theme.colors.text : theme.colors.primary;
}
else {
ret = theme.colors.secondary;
}
return ret;
}}; }};
background-color: ${({ theme }) => { background-color: ${({ theme }) => {
let ret: string; return theme.colors.background
if (theme.invertButtons) {
ret = theme.colors.secondary;
}
else {
ret = theme.colors.background;
}
return ret;
}}; }};
border-color: ${({ theme }) => { border-color: ${({ theme }) => {
let ret: string; return theme.colors.secondary;
if (theme.invertButtons) {
ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
}
else {
ret = theme.colors.secondary;
}
return ret;
}}; }};
} }
` `
@ -220,29 +184,15 @@ export const NavIndicator = styled(Link) <ActivePropType>`
aspect-ratio: 1; aspect-ratio: 1;
width: 10px; width: 10px;
border: 1px solid; border: 1px solid;
border-color: ${ props => ({ theme }) => props.active ? border-color: ${ props => ({ theme }) => props.active ? theme.colors.primary : theme.colors.primary};
theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
theme.colors.primary
};
background-color: ${props => ({ theme }) => props.active ? background-color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.background};
theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
theme.colors.background
};
&:hover { &:hover {
border-color: ${ props => ({ theme }) => border-color: ${({ theme }) => theme.colors.primary};
theme.invertButtons ? theme.colors.secondary : theme.colors.primary
};
color: ${({ theme }) => theme.invertButtons ? color: ${({ theme }) => theme.colors.primary};
theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
theme.colors.primary
};
background-color: ${({ theme }) => theme.invertButtons ? background-color: ${({ theme }) => theme.colors.primary};
theme.colors.secondary :
theme.colors.primary
};
} }
` `

14
components/styles/themedropdown/desktop.tsx
View file

@ -20,12 +20,12 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
border: 2px solid; border: 2px solid;
border-radius: 5px; border-radius: 5px;
background-color: ${ props => props.focus ? background-color: ${ props => props.focus ?
({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background : ({ theme }) => theme.colors.background :
({ theme }) => theme.colors.background}; ({ theme }) => theme.colors.background};
padding: 2px 6px; padding: 2px 6px;
cursor: pointer; cursor: pointer;
color: ${props => props.focus ? ({ theme }) => theme.invertButtons ? color: ${props => props.focus ?
theme.colors.text ? theme.colors.text : theme.colors.primary : theme.colors.secondary : ({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary :
({ theme }) => theme.colors.primary}; ({ theme }) => theme.colors.primary};
transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color; transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color;
@ -34,13 +34,9 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" }, 0s; transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" }, 0s;
&:focus,:hover { &:focus,:hover {
color: ${({ theme }) => theme.invertButtons ? color: ${({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary};
theme.colors.text ? theme.colors.text : theme.colors.primary :
theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ? background-color: ${({ theme }) => theme.colors.background};
theme.colors.secondary :
theme.colors.background};
} }
border-bottom-left-radius: ${ props => props.show ? "0" : "" }; border-bottom-left-radius: ${ props => props.show ? "0" : "" };

3
public/data/themes.json
View file

@ -53,13 +53,11 @@
"themeId": 4, "themeId": 4,
"backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg", "backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
"backgroundOffset": "60%", "backgroundOffset": "60%",
"invertButtons": true,
"colors": { "colors": {
"background": "#0008", "background": "#0008",
"backgroundAlt": "#000d", "backgroundAlt": "#000d",
"primary": "#ccc", "primary": "#ccc",
"secondary": "#00C7C7", "secondary": "#00C7C7",
"text": "#000",
"online": "#00ff00", "online": "#00ff00",
"loading": "#0063C7", "loading": "#0063C7",
"offline": "#ff0000" "offline": "#ff0000"
@ -69,7 +67,6 @@
"themeName": "dev", "themeName": "dev",
"themeId": 5, "themeId": 5,
"backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg", "backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
"invertButtons": true,
"colors": { "colors": {
"background": "#0000", "background": "#0000",
"backgroundAlt": "#0000", "backgroundAlt": "#0000",

1
styled.d.ts vendored
View file

@ -6,7 +6,6 @@ declare module 'styled-components' {
themeId: number, themeId: number,
backgroundImage?: string, backgroundImage?: string,
backgroundOffset?: string, backgroundOffset?: string,
invertButtons?: boolean,
colors: { colors: {
background: string, background: string,
backgroundAlt?: string, backgroundAlt?: string,