From a0a62db6ad3298bb705064bd46e658886b4aad43 Mon Sep 17 00:00:00 2001 From: twwu Date: Thu, 14 Nov 2024 14:36:30 +0800 Subject: [PATCH] refactor: Split linear-gradient and color --- web/app/styles/globals.css | 40 +++++++++++++++++--------------------- web/themes/dark.css | 5 ----- web/themes/light.css | 5 ----- web/themes/other-dark.css | 7 +++++++ web/themes/other-light.css | 7 +++++++ 5 files changed, 32 insertions(+), 32 deletions(-) create mode 100644 web/themes/other-dark.css create mode 100644 web/themes/other-light.css diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css index 06d2596a24..8b74c07afd 100644 --- a/web/app/styles/globals.css +++ b/web/app/styles/globals.css @@ -4,6 +4,8 @@ @import "../../themes/light.css"; @import "../../themes/dark.css"; +@import "../../themes/other-light.css"; +@import "../../themes/other-dark.css"; html[data-changing-theme] * { transition: none !important; @@ -20,30 +22,24 @@ html[data-changing-theme] * { --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient( - rgba(255, 255, 255, 1), - rgba(255, 255, 255, 0) - ); + --primary-glow: conic-gradient(from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg); + --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), + rgba(255, 255, 255, 0)); --tile-start-rgb: 239, 245, 249; --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); + --tile-border: conic-gradient(#00000080, + #00000040, + #00000030, + #00000020, + #00000010, + #00000010, + #00000080); --callout-rgb: 238, 240, 241; --callout-border-rgb: 172, 175, 176; @@ -680,4 +676,4 @@ button:focus-within { @import "../components/base/action-button/index.css"; @import "../components/base/modal/index.css"; -@tailwind utilities; +@tailwind utilities; \ No newline at end of file diff --git a/web/themes/dark.css b/web/themes/dark.css index a4ef4e001b..9ef62c53cb 100644 --- a/web/themes/dark.css +++ b/web/themes/dark.css @@ -685,15 +685,10 @@ html[data-theme="dark"] { --color-third-party-LangChain: #FFFFFF; --color-third-party-Langfuse: #FFFFFF; - --color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%); - --color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%); --color-third-party-Github: #FFFFFF; --color-third-party-Github-tertiary: #C8CEDA99; --color-third-party-Github-secondary: #D9D9DE; --color-third-party-model-bg-openai: #121212; --color-third-party-model-bg-anthropic: #1D1917; --color-third-party-model-bg-default: #0B0B0E; - --color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%); - --color-marketplace-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%); - --color-marketplace-plugin-empty: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #222225 100%); } \ No newline at end of file diff --git a/web/themes/light.css b/web/themes/light.css index 4f380e50e4..73d73ced37 100644 --- a/web/themes/light.css +++ b/web/themes/light.css @@ -685,15 +685,10 @@ html[data-theme="light"] { --color-third-party-LangChain: #1C3C3C; --color-third-party-Langfuse: #000000; - --color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%); - --color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%); --color-third-party-Github: #1B1F24; --color-third-party-Github-tertiary: #1B1F24; --color-third-party-Github-secondary: #1B1F24; --color-third-party-model-bg-openai: #E3E5E8; --color-third-party-model-bg-anthropic: #EEEDE7; --color-third-party-model-bg-default: #F9FAFB; - --color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%); - --color-marketplace-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%); - --color-marketplace-plugin-empty: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%); } \ No newline at end of file diff --git a/web/themes/other-dark.css b/web/themes/other-dark.css new file mode 100644 index 0000000000..4e48cdbb16 --- /dev/null +++ b/web/themes/other-dark.css @@ -0,0 +1,7 @@ +html[data-theme="dark"] { + --color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%); + --color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%); + --color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%); + --color-marketplace-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%); + --color-marketplace-plugin-empty: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #222225 100%); +} \ No newline at end of file diff --git a/web/themes/other-light.css b/web/themes/other-light.css new file mode 100644 index 0000000000..e99ba4dd0a --- /dev/null +++ b/web/themes/other-light.css @@ -0,0 +1,7 @@ +html[data-theme="light"] { + --color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%); + --color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%); + --color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%); + --color-marketplace-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%); + --color-marketplace-plugin-empty: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%); +} \ No newline at end of file