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 & {
color: ${({ theme }) => theme.colors.secondary};
border-color: ${({ theme }) => theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ?
theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
}
${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
color: ${({ theme }) => theme.colors.secondary};
border-color: ${({ theme }) => theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ?
theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
}
`;
@ -146,14 +144,12 @@ export const OnlineStatus = styled.p<OnlinePropType>`
${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
border-color: ${({ theme }) => theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ?
theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
}
${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
border-color: ${({ theme }) => theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ?
theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : 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>`
color: ${props => props.active ?
({ theme }) => theme.invertButtons ?
theme.colors.text ? theme.colors.text : theme.colors.secondary : theme.colors.secondary :
({ theme }) => theme.colors.primary};
color: ${props => ({ theme }) => props.active ?
theme.colors.text ?
theme.colors.text : theme.colors.secondary :
theme.colors.primary};
background-color: ${props => props.active ?
({ theme }) => theme.invertButtons ?
theme.colors.secondary : theme.colors.background :
({ theme }) => theme.colors.background};
background-color: ${props => ({ theme }) => theme.colors.background};
padding: 2px 6px;
border: 2px solid;
@ -43,12 +40,6 @@ export const NavLink = styled(Link) <ActivePropType>`
transition: all 0.1s ease;
&:hover {
color: ${({ theme }) => theme.invertButtons ?
theme.colors.text ? theme.colors.text : theme.colors.primary :
theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ?
theme.colors.secondary :
theme.colors.background};
color: ${({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary};
}
`

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

@ -87,13 +87,8 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
color: ${props => ({ theme }) => {
let ret: string;
if (props.active) {
if (theme.invertButtons) {
ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
}
else {
ret = theme.colors.secondary;
}
}
else {
ret = theme.colors.primary;
}
@ -102,16 +97,11 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
background-color: ${props => ({ theme }) => {
let ret: string;
if (props.active) {
if (theme.invertButtons) {
ret = theme.colors.secondary;
}
else {
ret = theme.colors.background;
}
}
else {
ret = theme.colors.background;
}
return ret;
}};
@ -120,13 +110,8 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
border-color: ${props => ({ theme }) => {
let ret: string;
if (props.active) {
if (theme.invertButtons) {
ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
}
else {
ret = theme.colors.secondary;
}
}
else {
ret = theme.colors.primary;
}
@ -135,36 +120,15 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
&:hover {
color: ${({ theme }) => {
let ret: string;
if (theme.invertButtons) {
ret = theme.colors.text ? theme.colors.text : theme.colors.primary;
}
else {
ret = theme.colors.secondary;
}
return ret;
return theme.colors.secondary
}};
background-color: ${({ theme }) => {
let ret: string;
if (theme.invertButtons) {
ret = theme.colors.secondary;
}
else {
ret = theme.colors.background;
}
return ret;
return theme.colors.background
}};
border-color: ${({ theme }) => {
let ret: string;
if (theme.invertButtons) {
ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
}
else {
ret = theme.colors.secondary;
}
return ret;
return theme.colors.secondary;
}};
}
`
@ -220,29 +184,15 @@ export const NavIndicator = styled(Link) <ActivePropType>`
aspect-ratio: 1;
width: 10px;
border: 1px solid;
border-color: ${ props => ({ theme }) => props.active ?
theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
theme.colors.primary
};
border-color: ${ props => ({ theme }) => props.active ? theme.colors.primary : theme.colors.primary};
background-color: ${props => ({ theme }) => props.active ?
theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
theme.colors.background
};
background-color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.background};
&:hover {
border-color: ${ props => ({ theme }) =>
theme.invertButtons ? theme.colors.secondary : theme.colors.primary
};
border-color: ${({ theme }) => theme.colors.primary};
color: ${({ theme }) => theme.invertButtons ?
theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
theme.colors.primary
};
color: ${({ theme }) => theme.colors.primary};
background-color: ${({ theme }) => theme.invertButtons ?
theme.colors.secondary :
theme.colors.primary
};
background-color: ${({ theme }) => 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-radius: 5px;
background-color: ${ props => props.focus ?
({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background :
({ theme }) => theme.colors.background :
({ theme }) => theme.colors.background};
padding: 2px 6px;
cursor: pointer;
color: ${props => props.focus ? ({ theme }) => theme.invertButtons ?
theme.colors.text ? theme.colors.text : theme.colors.primary : theme.colors.secondary :
color: ${props => props.focus ?
({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary :
({ theme }) => theme.colors.primary};
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;
&:focus,:hover {
color: ${({ theme }) => theme.invertButtons ?
theme.colors.text ? theme.colors.text : theme.colors.primary :
theme.colors.secondary};
color: ${({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ?
theme.colors.secondary :
theme.colors.background};
background-color: ${({ theme }) => theme.colors.background};
}
border-bottom-left-radius: ${ props => props.show ? "0" : "" };

3
public/data/themes.json
View file

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

1
styled.d.ts vendored
View file

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