From 836ee29b786fd3ab3958f0984e5b02e6a89976cf Mon Sep 17 00:00:00 2001 From: Tara Rostami <132676256+TaraRostami@users.noreply.github.com> Date: Wed, 28 Feb 2024 14:35:01 +0330 Subject: Optimize Dark Theme & Ultra Dark (#1889) --------- Co-authored-by: MHSanaei Co-authored-by: Alireza Ahmadi --- web/html/login.html | 203 +++++++++++++++++--------------- web/html/xui/common_sider.html | 20 +++- web/html/xui/component/themeSwitch.html | 30 +++-- web/html/xui/index.html | 22 +--- web/html/xui/xray.html | 6 +- 5 files changed, 152 insertions(+), 129 deletions(-) (limited to 'web/html') diff --git a/web/html/login.html b/web/html/login.html index fc38166b..7655c66f 100644 --- a/web/html/login.html +++ b/web/html/login.html @@ -49,6 +49,9 @@ border-radius: 2rem; padding: 3rem; transition: all 0.3s; + user-select:none; + -webkit-user-select:none; + -moz-user-select: none; } #login:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); @@ -68,10 +71,10 @@ z-index: 0; } .dark .under { - background-color: #0f2d32; + background-color: var(--dark-color-login-wave); } .dark #login { - background-color: #101113; + background-color: var(--dark-color-surface-100); } .dark h1 { color: rgba(255, 255, 255); @@ -199,7 +202,7 @@ z-index: -1; } .dark .waves-header { - background-color: #0a2227; + background-color: var(--dark-color-login-background); } .waves-inner-header { height: 50vh; @@ -219,7 +222,7 @@ animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .dark .parallax > use { - fill: #0f2d32; + fill: var(--dark-color-login-wave); } .parallax > use:nth-child(1) { animation-delay: -2s; @@ -373,98 +376,106 @@ } - - - -
-
- - - - - - - - - - - -
- - - - -

- - {{ i18n "pages.login.title" }} - Hello! - -

- - - - - - - - - - - - - - - - - - - - - -
- -
- - - - - - - - -    - - - - - - - - -   - - - - - - - - - - - - - - + + + +
+
+ + + + + + + + + + + +
+ + + + +

+ + {{ i18n "pages.login.hello" }} + {{ i18n "pages.login.title" }} + +

+ + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + +    + + + + + + + + +   + + + + + Ultra + + + + + + + + + + + + {{template "js" .}} {{template "component/themeSwitcher" .}} {{template "component/password" .}} diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html index 13d5bd49..78b833b9 100644 --- a/web/html/xui/common_sider.html +++ b/web/html/xui/common_sider.html @@ -15,10 +15,6 @@ {{ i18n "menu.xray"}} - - - - {{ i18n "menu.logout"}} @@ -31,7 +27,13 @@ - + + + + Ultra + - + + + + Ultra + function createThemeSwitcher() { const isDarkTheme = localStorage.getItem('dark-mode') === 'true'; + const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true'; + if (isUltra) { + document.documentElement.setAttribute('data-theme', 'ultra-dark'); + } const theme = isDarkTheme ? 'dark' : 'light'; - document.querySelector('body').setAttribute('class', theme) + document.querySelector('body').setAttribute('class', theme); return { isDarkTheme, + isUltra, get currentTheme() { return this.isDarkTheme ? 'dark' : 'light'; }, toggleTheme() { this.isDarkTheme = !this.isDarkTheme; localStorage.setItem('dark-mode', this.isDarkTheme); - document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light') + document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light'); document.getElementById('message').className = themeSwitcher.currentTheme; }, + toggleUltra() { + this.isUltra = !this.isUltra; + if (this.isUltra) { + document.documentElement.setAttribute('data-theme', 'ultra-dark'); + } else { + document.documentElement.removeAttribute('data-theme'); + } + localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString()); + } }; } - const themeSwitcher = createThemeSwitcher(); - Vue.component('theme-switch', { props: [], template: `{{template "component/themeSwitchTemplate"}}`, - data: () => ({ themeSwitcher }), + data: () => ({ + themeSwitcher + }), mounted() { - this.$message.config({getContainer: () => document.getElementById('message')}); + this.$message.config({ + getContainer: () => document.getElementById('message') + }); document.getElementById('message').className = themeSwitcher.currentTheme; } }); -{{end}} \ No newline at end of file +{{end}} diff --git a/web/html/xui/index.html b/web/html/xui/index.html index 90c45b85..fe867214 100644 --- a/web/html/xui/index.html +++ b/web/html/xui/index.html @@ -10,23 +10,11 @@ margin-inline: 0.3rem; } } - .ant-col-sm-24 { margin-top: 10px; } - .ant-card-dark h2 { - color: hsla(0, 0%, 100%, .65); - } - - .dark .ant-card-hoverable:hover, - .dark .ant-space-item > .ant-tabs:hover { - transform: scale(0.987); - outline-color: #40434d; - } - - .dark .ant-card-bordered { - outline: 2px solid var(--dark-color-background); + color: var(--dark-color-text-primary); } @@ -104,8 +92,8 @@ {{ i18n "pages.index.operationHours" }}: - Xray [[ formatSecond(status.appStats.uptime) ]] - OS [[ formatSecond(status.uptime) ]] + Xray: [[ formatSecond(status.appStats.uptime) ]] + OS: [[ formatSecond(status.uptime) ]] @@ -153,10 +141,10 @@ {{ i18n "usage"}}: - RAM [[ sizeFormat(status.appStats.mem) ]] + RAM: [[ sizeFormat(status.appStats.mem) ]] - Threads [[ status.appStats.threads ]] + Threads: [[ status.appStats.threads ]] diff --git a/web/html/xui/xray.html b/web/html/xui/xray.html index 5afa77c8..35f5cad7 100644 --- a/web/html/xui/xray.html +++ b/web/html/xui/xray.html @@ -74,8 +74,8 @@ - - + + {{ i18n "pages.xray.save" }} {{ i18n "pages.xray.restart" }} @@ -89,7 +89,7 @@ - +