From 7a99bd2dda6b50b2c2a64cddc0fd0ff1b7508ae0 Mon Sep 17 00:00:00 2001 From: Neshura Date: Sun, 18 Dec 2022 23:19:21 +0100 Subject: [PATCH] Final changes for now --- components/styles/themedropdown.tsx | 12 ++++-------- public/data/themes.json | 18 +++++++++++++++++- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/components/styles/themedropdown.tsx b/components/styles/themedropdown.tsx index 2274199..0d20cd9 100644 --- a/components/styles/themedropdown.tsx +++ b/components/styles/themedropdown.tsx @@ -12,16 +12,14 @@ interface ActivePropType { export const ThemeDropDown = styled.div` margin-left: 1%; min-width: 180px; - color: ${({ theme }) => theme.colors.primary} - display: flex; - flex-direction: column; + color: ${({ theme }) => theme.colors.primary}; ` export const ThemeDropDownButton = styled.button` width: 160px; border: 2px solid; 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}; padding: 2px 6px; @@ -30,7 +28,7 @@ export const ThemeDropDownButton = styled.button` theme.colors.text ? theme.colors.text : theme.colors.primary : theme.colors.secondary : ({ theme }) => theme.colors.primary}; - transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background; + transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color; transition-timing-function: ease; transition-duration: 0.15s; transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" }, 0s; @@ -52,8 +50,6 @@ export const ThemeDropDownButton = styled.button` export const ThemeDropDownOptions = styled.div` position: absolute; color: ${({ theme }) => theme.colors.primary}; - - background-color: ${({ theme }) => theme.colors.background}; background-image: ${({ theme }) => theme.backgroundImage ? "linear-gradient(" + theme.colors.background + "," + theme.colors.background + @@ -70,7 +66,7 @@ export const ThemeDropDownOptions = styled.div` border-radius: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; z-index: 1; - overflow: hidden; + overflow: ${ props => props.show ? "scroll" : "hidden" }; max-height: ${ props => props.show ? "20%" : "0%" }; visibility: ${ props => props.show ? "visible" : "hidden" }; diff --git a/public/data/themes.json b/public/data/themes.json index e84c807..18b4933 100644 --- a/public/data/themes.json +++ b/public/data/themes.json @@ -49,7 +49,7 @@ } }, { - "themeName": "Norrsken", + "themeName": "Nordlys", "themeId": 4, "backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg", "invertButtons": true, @@ -63,6 +63,22 @@ "loading": "#0063C7", "offline": "#ff0000" } + }, + { + "themeName": "dev", + "themeId": 5, + "backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg", + "invertButtons": true, + "colors": { + "background": "#0000", + "backgroundAlt": "#0000", + "primary": "#ccc", + "secondary": "#00C7C7", + "text": "#000", + "online": "#00ff00", + "loading": "#0063C7", + "offline": "#ff0000" + } } ] } \ No newline at end of file