Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues2 Pull requests Releases11 Packages1 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
components/styles
content.tsx
navbar
desktop.tsxmobile.tsx
themedropdown
desktop.tsx

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};
}
`

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

@ -87,12 +87,7 @@ 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;
}
ret = theme.colors.secondary;
}
else {
ret = theme.colors.primary;
@ -102,12 +97,7 @@ 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;
}
ret = theme.colors.secondary;
}
else {
ret = theme.colors.background;
@ -120,12 +110,7 @@ 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;
}
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;
border-color: ${({ theme }) => {
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" : "" };