diff --git a/Barracuda-theme/design-v255.css b/Barracuda-theme/design-v255.css new file mode 100644 index 0000000..32fd7b6 --- /dev/null +++ b/Barracuda-theme/design-v255.css @@ -0,0 +1,41 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: Barracuda-theme */ + +:root { + --barracuda-bg-primary: #0d0e12; + --barracuda-bg-secondary: #1a1c21; + --barracuda-bg-sidebar: #0d0e12; + --barracuda-text-primary: #ffffff; + --barracuda-text-secondary: #babac0; + --barracuda-accent: #6495ED; + --barracuda-border: #393E46; + --barracuda-hover: #26272f; +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --bg-primary: var(--barracuda-bg-primary); + --bg-secondary: var(--barracuda-bg-secondary); + --bg-sidebar: var(--barracuda-bg-sidebar); + --text-primary: var(--barracuda-text-primary); + --text-secondary: var(--barracuda-text-secondary); + --accent-color: var(--barracuda-accent); + --border-color: var(--barracuda-border); + --bg-hover: var(--barracuda-hover); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --bg-primary: var(--barracuda-bg-primary); + --bg-secondary: var(--barracuda-bg-secondary); + --bg-sidebar: var(--barracuda-bg-sidebar); + --text-primary: var(--barracuda-text-primary); + --text-secondary: var(--barracuda-text-secondary); + --accent-color: var(--barracuda-accent); + --border-color: var(--barracuda-border); + --bg-hover: var(--barracuda-hover); +} diff --git a/Barracuda-theme/design.css b/Barracuda-theme/design.css index 0b5b151..e2ecf6a 100644 --- a/Barracuda-theme/design.css +++ b/Barracuda-theme/design.css @@ -1,58 +1,93 @@ /* - Name: Barracuda Dark v1 - Version: 1.0 + Name: Barracuda Dark v2.0 + Version: 2.0 Author: Barracuda1337 - Tested on CyberPanel 2.3 build 2 + Tested on CyberPanel 2.5.5-dev Served with APACHE-2.0 license - CyberPanel repo: https://github.com/usmannasir/cyberpanel/ + - Updated for CyberPanel 2.5.5-dev theme system compatibility */ +/* CSS Variables for CyberPanel 2.5.5-dev compatibility */ +:root { + --barracuda-bg-primary: #0d0e12; + --barracuda-bg-secondary: #1a1c21; + --barracuda-bg-sidebar: #0d0e12; + --barracuda-text-primary: #ffffff; + --barracuda-text-secondary: #babac0; + --barracuda-accent: #6495ED; + --barracuda-border: #393E46; + --barracuda-hover: #26272f; +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --bg-primary: var(--barracuda-bg-primary); + --bg-secondary: var(--barracuda-bg-secondary); + --bg-sidebar: var(--barracuda-bg-sidebar); + --text-primary: var(--barracuda-text-primary); + --text-secondary: var(--barracuda-text-secondary); + --accent-color: var(--barracuda-accent); + --border-color: var(--barracuda-border); + --bg-hover: var(--barracuda-hover); +} + +[data-theme="dark"] { + --bg-primary: var(--barracuda-bg-primary); + --bg-secondary: var(--barracuda-bg-secondary); + --bg-sidebar: var(--barracuda-bg-sidebar); + --text-primary: var(--barracuda-text-primary); + --text-secondary: var(--barracuda-text-secondary); + --accent-color: var(--barracuda-accent); + --border-color: var(--barracuda-border); + --bg-hover: var(--barracuda-hover); +} + body::-webkit-scrollbar { - background-color:#0d0e12 ; - width:16px + background-color: var(--barracuda-bg-primary); + width: 16px; } body::-webkit-scrollbar-track { - background-color:#0d0e12 + background-color: var(--barracuda-bg-primary); } body::-webkit-scrollbar-track:hover { - background-color:#0d0e12 + background-color: var(--barracuda-bg-primary); } body::-webkit-scrollbar-thumb { - background-color:#babac0; - border-radius:16px; - border:5px solid #0d0e12 + background-color: var(--barracuda-text-secondary); + border-radius: 16px; + border: 5px solid var(--barracuda-bg-primary); } body::-webkit-scrollbar-thumb:hover { - background-color:#a0a0a5; - border:4px solid #0d0e12 + background-color: #a0a0a5; + border: 4px solid var(--barracuda-bg-primary); } -body::-webkit-scrollbar-button {display:none} +body::-webkit-scrollbar-button {display: none;} .row-title, label, .current-pack{ - color: #fff !important; + color: var(--barracuda-text-primary) !important; } .content-box { - background-color: #1a1c21 !important; - border: 1px solid #393E46 !important; + background-color: var(--barracuda-bg-secondary) !important; + border: 1px solid var(--barracuda-border) !important; } .table { - border: 1px solid #393E46; - background: #1a1c21; + border: 1px solid var(--barracuda-border); + background: var(--barracuda-bg-secondary); } #page-title p { - color: #fff !important; + color: var(--barracuda-text-primary) !important; } #page-sidebar li a.sf-with-ul:after { - color: #babac0 !important; + color: var(--barracuda-text-secondary) !important; } .content-box-wrapper .panel-body { - - background-color: #1a1c21; + background-color: var(--barracuda-bg-secondary); margin-top: 10px; text-align: center; border-radius: 50px; @@ -60,12 +95,13 @@ label, .current-pack{ } .content-box-wrapper .panel-body a { - color: #fff !important; + color: var(--barracuda-text-primary) !important; } .btn-primary { border: none; border-radius: 50px !important; + background-color: var(--barracuda-accent) !important; } a:focus, @@ -74,29 +110,28 @@ a:hover { } h2 { - color: #fff !important; + color: var(--barracuda-text-primary) !important; font-weight: bolder !important; } body { - background-color: #1a1c21 !important; - color: #fff !important; - + background-color: var(--barracuda-bg-secondary) !important; + color: var(--barracuda-text-primary) !important; } #sidebar-menu-item-server-ip-address>span { - color: #fff !important; + color: var(--barracuda-text-primary) !important; font-weight: 400 !important; } #page-sidebar ul li a .glyph-icon { - color: #fff !important; + color: var(--barracuda-text-primary) !important; } .panel { - background-color: #0d0e12 !important; + background-color: var(--barracuda-bg-primary) !important; border-radius: 10px; - border: 1px solid #393E46; + border: 1px solid var(--barracuda-border); } textarea { @@ -109,15 +144,15 @@ div.tile-content-wrapper { a.tile-box.tile-box-shortcut.btn-primary { border-radius: 10px; - background-color: #6495ED; + background-color: var(--barracuda-accent) !important; } #page-header { - border-bottom: 1px solid #393E46; + border-bottom: 1px solid var(--barracuda-border); position: fixed; width: 100%; z-index: 999; - background-color: white !important; + background-color: var(--barracuda-bg-primary) !important; } #page-sidebar::-webkit-scrollbar { @@ -125,19 +160,18 @@ a.tile-box.tile-box-shortcut.btn-primary { } #page-sidebar { - border-right: 1px solid #393E46; - + border-right: 1px solid var(--barracuda-border); padding-top: 72px; position: fixed; overflow-y: scroll; height: 100% !important; -ms-overflow-style: none; scrollbar-width: none; + background-color: var(--barracuda-bg-sidebar) !important; } #page-content { - background-color: #1a1c21 !important; - + background-color: var(--barracuda-bg-secondary) !important; padding-right: 15px; padding-left: 15px; margin-right: auto; @@ -181,12 +215,12 @@ h6 { } #sidebar-menu { - background: #0d0e12; + background: var(--barracuda-bg-sidebar); padding: 5px 0px; } #page-header { - background: #0d0e12 !important; + background: var(--barracuda-bg-sidebar) !important; } .logo-bg { @@ -237,7 +271,7 @@ h6 { #page-sidebar ul>li>a:hover { border-color: transparent; - background-color: #26272f !important; + background-color: var(--barracuda-hover) !important; border-radius: 50px; text-decoration: none; transition: none; @@ -254,9 +288,9 @@ h6 { a.sfActive { border-radius: 50px !important; border: 1px solid; - border-color: #babac0 !important; + border-color: var(--barracuda-text-secondary) !important; border-right-width: 0px !important; - background-color: #26272f !important; + background-color: var(--barracuda-hover) !important; text-decoration: none !important; } @@ -277,7 +311,7 @@ a.sfActive span { #sidebar-menu>li>a>span, .sidebar-submenu ul li a>span { - color: #ffffff; + color: var(--barracuda-text-primary); font-size: 12px; margin-left: 10px; font-weight: 300; diff --git a/CF-Inspired-V2-Cyberpanel-Theme/design-v255.css b/CF-Inspired-V2-Cyberpanel-Theme/design-v255.css new file mode 100644 index 0000000..8773b64 --- /dev/null +++ b/CF-Inspired-V2-Cyberpanel-Theme/design-v255.css @@ -0,0 +1,43 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: CF-Inspired-V2-Cyberpanel-Theme */ + +:root { + --cf-primary: #022352; + --cf-secondary: #6495ED; + --cf-accent: #6495ED; + --cf-hover: #ECF4FF; + --cf-border: #dfe8f1; + --cf-text: #121212; + --cf-bg: #ffffff; + --cf-sidebar-bg: #f8f9fa; +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --accent-color: var(--cf-accent); + --accent-hover: #5a7fd8; + --bg-primary: var(--cf-bg); + --bg-secondary: var(--cf-bg); + --bg-sidebar: var(--cf-sidebar-bg); + --text-primary: var(--cf-text); + --text-secondary: #64748b; + --border-color: var(--cf-border); + --bg-hover: var(--cf-hover); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --accent-color: var(--cf-accent); + --accent-hover: #5a7fd8; + --bg-primary: #0f0f23; + --bg-secondary: #1a1a3e; + --bg-sidebar: #16162e; + --text-primary: #e4e4e7; + --text-secondary: #9ca3af; + --border-color: #2a2a5e; + --bg-hover: #252550; +} diff --git a/CF-Inspired-V2-Cyberpanel-Theme/design.css b/CF-Inspired-V2-Cyberpanel-Theme/design.css index 26eba4c..1e1f952 100644 --- a/CF-Inspired-V2-Cyberpanel-Theme/design.css +++ b/CF-Inspired-V2-Cyberpanel-Theme/design.css @@ -1,17 +1,55 @@ /* - Name: CF INSPIRED WHITE v2 - Version: 1.1 + Name: CF INSPIRED WHITE v2.1 + Version: 2.1 Author: DazEB based on CypherPotato - Tested on CyberPanel 2.3 build 2 + Tested on CyberPanel 2.5.5-dev Served with APACHE-2.0 license - CyberPanel repo: https://github.com/usmannasir/cyberpanel/ + - Updated for CyberPanel 2.5.5-dev theme system compatibility /usr/local/CyberCP/public/static/emailMarketing <-admin icons here /usr/local/CyberCP/public/static/images/icons <- main icons here /usr/local/CyberCP/public/static/baseTemplate/assets/image-resources <- admin logo goes here */ +/* CSS Variables for CyberPanel 2.5.5-dev compatibility */ +:root { + --cf-primary: #022352; + --cf-secondary: #6495ED; + --cf-accent: #6495ED; + --cf-hover: #ECF4FF; + --cf-border: #dfe8f1; + --cf-text: #121212; + --cf-bg: #ffffff; + --cf-sidebar-bg: #f8f9fa; +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --accent-color: var(--cf-accent); + --accent-hover: #5a7fd8; + --bg-primary: var(--cf-bg); + --bg-secondary: var(--cf-bg); + --bg-sidebar: var(--cf-sidebar-bg); + --text-primary: var(--cf-text); + --text-secondary: #64748b; + --border-color: var(--cf-border); + --bg-hover: var(--cf-hover); +} + +[data-theme="dark"] { + --accent-color: var(--cf-accent); + --accent-hover: #5a7fd8; + --bg-primary: #0f0f23; + --bg-secondary: #1a1a3e; + --bg-sidebar: #16162e; + --text-primary: #e4e4e7; + --text-secondary: #9ca3af; + --border-color: #2a2a5e; + --bg-hover: #252550; +} + #page-sidebar ul li a .glyph-icon { - color: #022352 !important; + color: var(--cf-primary) !important; } .panel { @@ -28,14 +66,14 @@ div.tile-content-wrapper { a.tile-box.tile-box-shortcut.btn-primary { border-radius: 10px; - background-color: #6495ED; + background-color: var(--cf-accent) !important; } #page-header { position: fixed; width: 100%; z-index: 999; - background-color: white !important; + background-color: var(--cf-bg) !important; } #page-sidebar::-webkit-scrollbar { @@ -45,11 +83,12 @@ a.tile-box.tile-box-shortcut.btn-primary { #page-sidebar { padding-top: 72px; position: fixed; - border-right: 1px solid #dfe8f1; + border-right: 1px solid var(--cf-border); overflow-y: scroll; height: 100% !important; -ms-overflow-style: none; scrollbar-width: none; + background-color: var(--cf-sidebar-bg) !important; } #page-content { @@ -142,7 +181,7 @@ h1, h2, h3, h4, h5, h6 { #page-sidebar ul>li>a:hover { border-color: transparent; - background-color: #ECF4FF !important; + background-color: var(--cf-hover) !important; border-bottom-left-radius: 50px; border-top-left-radius: 50px; text-decoration: underline; @@ -159,9 +198,9 @@ h1, h2, h3, h4, h5, h6 { a.sfActive { border: 1px solid; - border-color: rgb(185,214,255) !important; + border-color: var(--cf-hover) !important; border-right-width: 0px !important; - background-color: rgb(236, 244, 255) !important; + background-color: var(--cf-hover) !important; border-bottom-left-radius: 50px !important; border-top-left-radius: 50px !important; text-decoration: underline !important; @@ -173,7 +212,7 @@ a.sfActive span { } #sidebar-menu>li>a>span, .sidebar-submenu ul li a>span { - color: rgb(18, 18, 18); + color: var(--cf-text); font-size: 13px; margin-left: 10px; font-weight: 300; @@ -197,7 +236,7 @@ a.sfActive span { #sidebar-menu-item-server-ip-address { padding-bottom: 48px !important; - border-bottom: 1px solid #dfe8f1 !important; + border-bottom: 1px solid var(--cf-border) !important; } #sidebar-menu-item-server-ip-address:hover { border-bottom-left-radius: 0px !important; @@ -205,7 +244,7 @@ a.sfActive span { background-color: transparent !important; } #sidebar-menu-item-server-ip-address>span { - color: rgb(0, 43, 103) !important; + color: var(--cf-primary) !important; font-weight: 400 !important; } diff --git a/CyberSpace-Dark-By-Interpryce/design-v255.css b/CyberSpace-Dark-By-Interpryce/design-v255.css new file mode 100644 index 0000000..91f39fa --- /dev/null +++ b/CyberSpace-Dark-By-Interpryce/design-v255.css @@ -0,0 +1,73 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: CyberSpace-Dark-By-Interpryce */ + +:root { + --color-white: #ffffff; + --color-white-85: #ffffffd9; + --color-white-50: #ffffff80; + --color-white-20: #ffffff33; + --color-black: #000000; + --color-black-90: #000000e6; + --color-black-55: #0000008c; + --color-black-40: #00000066; + --color-black-25: #00000040; + --color-primary: #00a1a9; + --color-secondary: #059b82; + --color-blue: #1aabe1; + --color-blue-2: #00a0c5; + --color-blue-3: #3da6ff; + --color-blue-dark: #031521; + --color-bg-blue: #002a43de; + --color-bg-blue-35: #1d49a759; + --color-red: #f02769; + --color-red-2: #910000ba; + --color-grey: #484848; + --color-grey-2: #838383; + --color-green: #1ed760; + --color-green-2: #004b1a; + --color-border: #89baed36; + --color-border-2: #90e1ff33; + --cyberspace-primary: #00a1a9; + --cyberspace-secondary: #059b82; + --cyberspace-accent: #1aabe1; + --cyberspace-hover: #00a0c5; + --cyberspace-text: #ffffff; + --cyberspace-bg: #031521; + --cyberspace-panel: #00000066; + --cyberspace-sidebar: #0000008c; + --cyberspace-border: #89baed36; + --cyberspace-shadow: rgba(0, 0, 0, 0.4); + --cyberspace-gradient: linear-gradient(0deg, rgba(0, 95, 95, 0.41) 0%, rgba(1, 1, 24, 0.80) 100%); +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --primary-color: var(--cyberspace-primary); + --secondary-color: var(--cyberspace-secondary); + --accent-color: var(--cyberspace-accent); + --hover-color: var(--cyberspace-hover); + --text-color: var(--cyberspace-text); + --background-color: var(--cyberspace-bg); + --panel-background: var(--cyberspace-panel); + --sidebar-background: var(--cyberspace-sidebar); + --border-color: var(--cyberspace-border); + --shadow-color: var(--cyberspace-shadow); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --primary-color: var(--cyberspace-primary); + --secondary-color: var(--cyberspace-secondary); + --accent-color: var(--cyberspace-accent); + --hover-color: var(--cyberspace-hover); + --text-color: var(--cyberspace-text); + --background-color: var(--cyberspace-bg); + --panel-background: var(--cyberspace-panel); + --sidebar-background: var(--cyberspace-sidebar); + --border-color: var(--cyberspace-border); + --shadow-color: var(--cyberspace-shadow); +} diff --git a/CyberSpace-Dark-By-Interpryce/design.css b/CyberSpace-Dark-By-Interpryce/design.css index 33c33f1..b98e1e3 100644 --- a/CyberSpace-Dark-By-Interpryce/design.css +++ b/CyberSpace-Dark-By-Interpryce/design.css @@ -38,6 +38,46 @@ --color-green-2: #004b1a; --color-border: #89baed36; --color-border-2: #90e1ff33; + + /* CyberPanel 2.5.5-dev theme variables */ + --cyberspace-primary: #00a1a9; + --cyberspace-secondary: #059b82; + --cyberspace-accent: #1aabe1; + --cyberspace-hover: #00a0c5; + --cyberspace-text: #ffffff; + --cyberspace-bg: #031521; + --cyberspace-panel: #00000066; + --cyberspace-sidebar: #0000008c; + --cyberspace-border: #89baed36; + --cyberspace-shadow: rgba(0, 0, 0, 0.4); + --cyberspace-gradient: linear-gradient(0deg, rgba(0, 95, 95, 0.41) 0%, rgba(1, 1, 24, 0.80) 100%); +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --primary-color: var(--cyberspace-primary); + --secondary-color: var(--cyberspace-secondary); + --accent-color: var(--cyberspace-accent); + --hover-color: var(--cyberspace-hover); + --text-color: var(--cyberspace-text); + --background-color: var(--cyberspace-bg); + --panel-background: var(--cyberspace-panel); + --sidebar-background: var(--cyberspace-sidebar); + --border-color: var(--cyberspace-border); + --shadow-color: var(--cyberspace-shadow); +} + +[data-theme="dark"] { + --primary-color: var(--cyberspace-primary); + --secondary-color: var(--cyberspace-secondary); + --accent-color: var(--cyberspace-accent); + --hover-color: var(--cyberspace-hover); + --text-color: var(--cyberspace-text); + --background-color: var(--cyberspace-bg); + --panel-background: var(--cyberspace-panel); + --sidebar-background: var(--cyberspace-sidebar); + --border-color: var(--cyberspace-border); + --shadow-color: var(--cyberspace-shadow); } /*------------------------------------------------------------------------------ diff --git a/Cyberpanel-Gaussian-Style/design-v255.css b/Cyberpanel-Gaussian-Style/design-v255.css new file mode 100644 index 0000000..7e6d5f8 --- /dev/null +++ b/Cyberpanel-Gaussian-Style/design-v255.css @@ -0,0 +1,34 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: Cyberpanel-Gaussian-Style */ + +:root { + --gaussian-bg-image: url(https://live.staticflickr.com/65535/51705970602_9f5ec7b9a8_k.jpg); + --gaussian-text: #ffffff; + --gaussian-bg-overlay: rgba(0, 0, 0, 0.24); + --gaussian-border: rgba(255, 255, 255, 0.14); + --gaussian-accent: #32ab13; + --gaussian-warning: #ffc107; + --gaussian-danger: #f02769; +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --bg-primary: var(--gaussian-bg-image); + --text-primary: var(--gaussian-text); + --text-secondary: rgba(255, 255, 255, 0.8); + --accent-color: var(--gaussian-accent); + --border-color: var(--gaussian-border); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --bg-primary: var(--gaussian-bg-image); + --text-primary: var(--gaussian-text); + --text-secondary: rgba(255, 255, 255, 0.8); + --accent-color: var(--gaussian-accent); + --border-color: var(--gaussian-border); +} diff --git a/Cyberpanel-Gaussian-Style/design.css b/Cyberpanel-Gaussian-Style/design.css index 2b7f34b..ed4ee6c 100644 --- a/Cyberpanel-Gaussian-Style/design.css +++ b/Cyberpanel-Gaussian-Style/design.css @@ -1,16 +1,61 @@ +/* + Name: CyberPanel Gaussian Style v2.0 + Version: 2.0 + Author: Original Author + Tested on CyberPanel 2.5.5-dev + Served with APACHE-2.0 license + - CyberPanel repo: https://github.com/usmannasir/cyberpanel/ + - Updated for CyberPanel 2.5.5-dev theme system compatibility +*/ + +/* CSS Variables for CyberPanel 2.5.5-dev compatibility */ +:root { + --gaussian-bg-image: url(https://live.staticflickr.com/65535/51705970602_9f5ec7b9a8_k.jpg); + --gaussian-text: #ffffff; + --gaussian-bg-overlay: rgba(0, 0, 0, 0.24); + --gaussian-border: rgba(255, 255, 255, 0.14); + --gaussian-accent: #32ab13; + --gaussian-warning: #ffc107; + --gaussian-danger: #f02769; +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --bg-primary: var(--gaussian-bg-image); + --text-primary: var(--gaussian-text); + --text-secondary: rgba(255, 255, 255, 0.8); + --accent-color: var(--gaussian-accent); + --border-color: var(--gaussian-border); +} + +[data-theme="dark"] { + --bg-primary: var(--gaussian-bg-image); + --text-primary: var(--gaussian-text); + --text-secondary: rgba(255, 255, 255, 0.8); + --accent-color: var(--gaussian-accent); + --border-color: var(--gaussian-border); +} + body { - background-image: url(https://live.staticflickr.com/65535/51705970602_9f5ec7b9a8_k.jpg); + background-image: var(--gaussian-bg-image); background-size: 100% 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; transition: background .2s; - color:#fff; + color: var(--gaussian-text); } -a, a:hover, a:focus { text-decoration: none; color:#fff} -a { color: #fff; } -a:hover { color: #dee4e7; } +a, a:hover, a:focus { + text-decoration: none; + color: var(--gaussian-text); +} +a { + color: var(--gaussian-text); +} +a:hover { + color: #dee4e7; +} .table-responsive .col-lg-9 { padding: 2px 0 0 15px; @@ -20,7 +65,7 @@ a:hover { color: #dee4e7; } } .content-box-header h2 { - color: #fff!important; + color: var(--gaussian-text) !important; font-size: 1.4em; } @@ -33,16 +78,16 @@ a:hover { color: #dee4e7; } } .form-group .alert-success p { - color: #32ab13!important; + color: var(--gaussian-accent) !important; } .col-sm-12 .alert p { - color: #32ab13!important; + color: var(--gaussian-accent) !important; } #page-header .badge { - color: #fff; - background-color: #ffc107; + color: var(--gaussian-text); + background-color: var(--gaussian-warning); font-size: 0.95em; padding-right: 0.6em; padding-left: 0.6em; @@ -50,7 +95,7 @@ a:hover { color: #dee4e7; } } .panel p { - color: #fff; + color: var(--gaussian-text); padding: 0 15px; } @@ -60,37 +105,37 @@ a:hover { color: #dee4e7; } .col-sm-4 .table th, .col-sm-8 .table th { - color: #fff; + color: var(--gaussian-text); } .form-group .col-sm-8 .table { - color: #fff; - background-color: rgb(255 255 255 / 24%); - border-color: rgb(255 255 255 / 14%); + color: var(--gaussian-text); + background-color: var(--gaussian-bg-overlay); + border-color: var(--gaussian-border); margin: 40px 0 !important; } .form-group .col-sm-4 .table { - color: #fff; - background-color: rgb(255 255 255 / 24%); - border-color: rgb(255 255 255 / 14%); + color: var(--gaussian-text); + background-color: var(--gaussian-bg-overlay); + border-color: var(--gaussian-border); margin: 20px 0 !important; } .example-box-wrapper .dbDetails button:hover { - color: #fff; + color: var(--gaussian-text); background-color: rgb(255 255 255 / 2%); border-color: rgb(255 255 255 / 0.54); } .example-box-wrapper .dbDetails button { - color: #fff; + color: var(--gaussian-text); background-color: rgb(255 255 255 / 14%); border-color: rgb(255 255 255 / 0.24); } .example-box-wrapper .dbDetails span { - color: #fff; + color: var(--gaussian-text); font-weight: 500; } diff --git a/DO-Inpired-flat-black/design-v255.css b/DO-Inpired-flat-black/design-v255.css new file mode 100644 index 0000000..68cebe8 --- /dev/null +++ b/DO-Inpired-flat-black/design-v255.css @@ -0,0 +1,51 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: DO-Inpired-flat-black */ + +:root { + --theme-color-0: #111; + --theme-color-1: #000; + --theme-color-2: #222; + --theme-color-3: #333; + --do-black-primary: #000000; + --do-black-secondary: #222222; + --do-black-accent: #111111; + --do-black-hover: #333333; + --do-black-text: #ffffff; + --do-black-bg: #ffffff; + --do-black-panel: #ffffff; + --do-black-sidebar: #000000; + --do-black-border: rgba(0, 0, 0, 0.2); + --do-black-shadow: rgba(0, 0, 0, 0.1); +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --primary-color: var(--do-black-primary); + --secondary-color: var(--do-black-secondary); + --accent-color: var(--do-black-accent); + --hover-color: var(--do-black-hover); + --text-color: var(--do-black-text); + --background-color: var(--do-black-bg); + --panel-background: var(--do-black-panel); + --sidebar-background: var(--do-black-sidebar); + --border-color: var(--do-black-border); + --shadow-color: var(--do-black-shadow); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --primary-color: var(--do-black-primary); + --secondary-color: var(--do-black-secondary); + --accent-color: var(--do-black-accent); + --hover-color: var(--do-black-hover); + --text-color: var(--do-black-text); + --background-color: var(--do-black-bg); + --panel-background: var(--do-black-panel); + --sidebar-background: var(--do-black-sidebar); + --border-color: var(--do-black-border); + --shadow-color: var(--do-black-shadow); +} diff --git a/DO-Inpired-flat-black/design.css b/DO-Inpired-flat-black/design.css index b546daa..8a8de16 100644 --- a/DO-Inpired-flat-black/design.css +++ b/DO-Inpired-flat-black/design.css @@ -14,6 +14,45 @@ --theme-color-1: #000; --theme-color-2: #222; --theme-color-3: #333; + + /* CyberPanel 2.5.5-dev theme variables */ + --do-black-primary: #000000; + --do-black-secondary: #222222; + --do-black-accent: #111111; + --do-black-hover: #333333; + --do-black-text: #ffffff; + --do-black-bg: #ffffff; + --do-black-panel: #ffffff; + --do-black-sidebar: #000000; + --do-black-border: rgba(0, 0, 0, 0.2); + --do-black-shadow: rgba(0, 0, 0, 0.1); +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --primary-color: var(--do-black-primary); + --secondary-color: var(--do-black-secondary); + --accent-color: var(--do-black-accent); + --hover-color: var(--do-black-hover); + --text-color: var(--do-black-text); + --background-color: var(--do-black-bg); + --panel-background: var(--do-black-panel); + --sidebar-background: var(--do-black-sidebar); + --border-color: var(--do-black-border); + --shadow-color: var(--do-black-shadow); +} + +[data-theme="dark"] { + --primary-color: var(--do-black-primary); + --secondary-color: var(--do-black-secondary); + --accent-color: var(--do-black-accent); + --hover-color: var(--do-black-hover); + --text-color: var(--do-black-text); + --background-color: var(--do-black-bg); + --panel-background: var(--do-black-panel); + --sidebar-background: var(--do-black-sidebar); + --border-color: var(--do-black-border); + --shadow-color: var(--do-black-shadow); } textarea { diff --git a/DO-Inpired-flat-blue/design-v255.css b/DO-Inpired-flat-blue/design-v255.css new file mode 100644 index 0000000..7e73671 --- /dev/null +++ b/DO-Inpired-flat-blue/design-v255.css @@ -0,0 +1,51 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: DO-Inpired-flat-blue */ + +:root { + --theme-color-0: #4040c5; + --theme-color-1: #303092; + --theme-color-2: #202062; + --theme-color-3: #101052; + --do-blue-primary: #303092; + --do-blue-secondary: #202062; + --do-blue-accent: #4040c5; + --do-blue-hover: #101052; + --do-blue-text: #ffffff; + --do-blue-bg: #ffffff; + --do-blue-panel: #ffffff; + --do-blue-sidebar: #303092; + --do-blue-border: rgba(0, 0, 0, 0.2); + --do-blue-shadow: rgba(0, 0, 0, 0.1); +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --primary-color: var(--do-blue-primary); + --secondary-color: var(--do-blue-secondary); + --accent-color: var(--do-blue-accent); + --hover-color: var(--do-blue-hover); + --text-color: var(--do-blue-text); + --background-color: var(--do-blue-bg); + --panel-background: var(--do-blue-panel); + --sidebar-background: var(--do-blue-sidebar); + --border-color: var(--do-blue-border); + --shadow-color: var(--do-blue-shadow); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --primary-color: var(--do-blue-primary); + --secondary-color: var(--do-blue-secondary); + --accent-color: var(--do-blue-accent); + --hover-color: var(--do-blue-hover); + --text-color: var(--do-blue-text); + --background-color: var(--do-blue-bg); + --panel-background: var(--do-blue-panel); + --sidebar-background: var(--do-blue-sidebar); + --border-color: var(--do-blue-border); + --shadow-color: var(--do-blue-shadow); +} diff --git a/DO-Inpired-flat-blue/design.css b/DO-Inpired-flat-blue/design.css index da0910e..e958ec2 100644 --- a/DO-Inpired-flat-blue/design.css +++ b/DO-Inpired-flat-blue/design.css @@ -14,6 +14,45 @@ --theme-color-1: #303092; --theme-color-2: #202062; --theme-color-3: #101052; + + /* CyberPanel 2.5.5-dev theme variables */ + --do-blue-primary: #303092; + --do-blue-secondary: #202062; + --do-blue-accent: #4040c5; + --do-blue-hover: #101052; + --do-blue-text: #ffffff; + --do-blue-bg: #ffffff; + --do-blue-panel: #ffffff; + --do-blue-sidebar: #303092; + --do-blue-border: rgba(0, 0, 0, 0.2); + --do-blue-shadow: rgba(0, 0, 0, 0.1); +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --primary-color: var(--do-blue-primary); + --secondary-color: var(--do-blue-secondary); + --accent-color: var(--do-blue-accent); + --hover-color: var(--do-blue-hover); + --text-color: var(--do-blue-text); + --background-color: var(--do-blue-bg); + --panel-background: var(--do-blue-panel); + --sidebar-background: var(--do-blue-sidebar); + --border-color: var(--do-blue-border); + --shadow-color: var(--do-blue-shadow); +} + +[data-theme="dark"] { + --primary-color: var(--do-blue-primary); + --secondary-color: var(--do-blue-secondary); + --accent-color: var(--do-blue-accent); + --hover-color: var(--do-blue-hover); + --text-color: var(--do-blue-text); + --background-color: var(--do-blue-bg); + --panel-background: var(--do-blue-panel); + --sidebar-background: var(--do-blue-sidebar); + --border-color: var(--do-blue-border); + --shadow-color: var(--do-blue-shadow); } textarea { diff --git a/HMM-Theme/design-v255.css b/HMM-Theme/design-v255.css new file mode 100644 index 0000000..6f10252 --- /dev/null +++ b/HMM-Theme/design-v255.css @@ -0,0 +1,51 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: HMM-Theme */ + +:root { + --theme-color-0: #1679ab; + --theme-color-1: #050c9c; + --theme-color-2: #111111; + --theme-color-3: #101052; + --hmm-primary: #050c9c; + --hmm-secondary: #111111; + --hmm-accent: #1679ab; + --hmm-hover: #101052; + --hmm-text: #292929; + --hmm-bg: #fff7fc; + --hmm-panel: #ffffff; + --hmm-sidebar: #ffffff; + --hmm-border: #cecece; + --hmm-shadow: rgba(0, 0, 0, 0.1); +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --primary-color: var(--hmm-primary); + --secondary-color: var(--hmm-secondary); + --accent-color: var(--hmm-accent); + --hover-color: var(--hmm-hover); + --text-color: var(--hmm-text); + --background-color: var(--hmm-bg); + --panel-background: var(--hmm-panel); + --sidebar-background: var(--hmm-sidebar); + --border-color: var(--hmm-border); + --shadow-color: var(--hmm-shadow); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --primary-color: var(--hmm-primary); + --secondary-color: var(--hmm-secondary); + --accent-color: var(--hmm-accent); + --hover-color: var(--hmm-hover); + --text-color: var(--hmm-text); + --background-color: var(--hmm-bg); + --panel-background: var(--hmm-panel); + --sidebar-background: var(--hmm-sidebar); + --border-color: var(--hmm-border); + --shadow-color: var(--hmm-shadow); +} diff --git a/HMM-Theme/design.css b/HMM-Theme/design.css index 8307396..17d21a0 100644 --- a/HMM-Theme/design.css +++ b/HMM-Theme/design.css @@ -19,6 +19,45 @@ scroll-behaviour: smooth !important; --theme-color-1: #050c9c; --theme-color-2: #111111; --theme-color-3: #101052; + +/* CyberPanel 2.5.5-dev theme variables */ +--hmm-primary: #050c9c; +--hmm-secondary: #111111; +--hmm-accent: #1679ab; +--hmm-hover: #101052; +--hmm-text: #292929; +--hmm-bg: #fff7fc; +--hmm-panel: #ffffff; +--hmm-sidebar: #ffffff; +--hmm-border: #cecece; +--hmm-shadow: rgba(0, 0, 0, 0.1); +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --primary-color: var(--hmm-primary); + --secondary-color: var(--hmm-secondary); + --accent-color: var(--hmm-accent); + --hover-color: var(--hmm-hover); + --text-color: var(--hmm-text); + --background-color: var(--hmm-bg); + --panel-background: var(--hmm-panel); + --sidebar-background: var(--hmm-sidebar); + --border-color: var(--hmm-border); + --shadow-color: var(--hmm-shadow); +} + +[data-theme="dark"] { + --primary-color: var(--hmm-primary); + --secondary-color: var(--hmm-secondary); + --accent-color: var(--hmm-accent); + --hover-color: var(--hmm-hover); + --text-color: var(--hmm-text); + --background-color: var(--hmm-bg); + --panel-background: var(--hmm-panel); + --sidebar-background: var(--hmm-sidebar); + --border-color: var(--hmm-border); + --shadow-color: var(--hmm-shadow); } ::-webkit-scrollbar { width: 6px; diff --git a/README.md b/README.md index af13c81..d77d633 100644 --- a/README.md +++ b/README.md @@ -23,3 +23,43 @@ Remove everything from the `Design` text area. Try clearing cache on your web browser. ### CyberPanel by [usmannasir](https://github.com/usmannasir) + +## CyberPanel v2.5.5-dev (v2.4.8+ shell) + +The panel shell changed in v2.4.8: flat sidebar (`#sidebar`), `cyberpanel-ui.css`, and `data-theme` light/dark toggle. + +| File | Use | +|------|-----| +| `design.css` | Legacy CyberPanel (< 2.4.8) only. Targets `#page-sidebar` / `#sidebar-menu`. | +| `design-v255.css` | **Use this on v2.5.5-dev.** Paste into **Design > Main Dashboard CSS**. | + +### Install on v2.5.5-dev + +1. Open the theme folder. +2. Copy all of `design-v255.css`. +3. CyberPanel > **Design** > paste into the text area > **Save**. +4. Hard refresh (`Ctrl+Shift+R`) and use the header **moon/sun** button to switch themes. + +### Repository layout + +Themes live in `newstargeted.com/cyberPanel-repos/cyberpanel-themes` (fork of [master3395/CyberPanel-Themes](https://github.com/master3395/CyberPanel-Themes)). + + +### VJ themes (synced from upstream) + +| Folder | CyberPanel version | +|--------|-------------------| +| `VJ-Theme-*-v2` | **2.4.8+ / 2.5.5-dev** (unified login + dashboard + dark toggle) | +| `legacy-VJ-Theme-*` | **Before 2.4.8** (old `#page-sidebar` DOM only) | + +Upstream source: [usmannasir/CyberPanel-Themes](https://github.com/usmannasir/CyberPanel-Themes). This fork adds `design-v255.css` for every theme that supports the new shell. + +### Regenerate `design-v255.css` + +After editing `design.css`, run: + +```bash +python3 scripts/generate-design-v255.py +``` + +Legacy-only themes without shell variables (for example `l-dark-theme`) keep a hand-maintained `design-v255.css` approximation. diff --git a/Ragnarock/design-v255.css b/Ragnarock/design-v255.css new file mode 100644 index 0000000..98b4794 --- /dev/null +++ b/Ragnarock/design-v255.css @@ -0,0 +1,56 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: Ragnarock */ + +:root { + --primary: #003049; + --secondary: #f77f00; + --accent: #d62828; + --background: #eae2b7; + --background-light: #f6efca; + --highlight: #fdc85e; + --text-muted: #8da0aa; + --border-light: #d3cb87f2; + --white: #ffffff; + --ragnarock-primary: #003049; + --ragnarock-secondary: #f77f00; + --ragnarock-accent: #d62828; + --ragnarock-hover: #fdc85e; + --ragnarock-text: #003049; + --ragnarock-bg: #eae2b7; + --ragnarock-panel: #f6efca; + --ragnarock-sidebar: #003049; + --ragnarock-border: #d3cb87f2; + --ragnarock-shadow: rgba(17, 17, 26, 0.1); +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --primary-color: var(--ragnarock-primary); + --secondary-color: var(--ragnarock-secondary); + --accent-color: var(--ragnarock-accent); + --hover-color: var(--ragnarock-hover); + --text-color: var(--ragnarock-text); + --background-color: var(--ragnarock-bg); + --panel-background: var(--ragnarock-panel); + --sidebar-background: var(--ragnarock-sidebar); + --border-color: var(--ragnarock-border); + --shadow-color: var(--ragnarock-shadow); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --primary-color: var(--ragnarock-primary); + --secondary-color: var(--ragnarock-secondary); + --accent-color: var(--ragnarock-accent); + --hover-color: var(--ragnarock-hover); + --text-color: var(--ragnarock-text); + --background-color: var(--ragnarock-bg); + --panel-background: var(--ragnarock-panel); + --sidebar-background: var(--ragnarock-sidebar); + --border-color: var(--ragnarock-border); + --shadow-color: var(--ragnarock-shadow); +} diff --git a/Ragnarock/design.css b/Ragnarock/design.css index 124cfad..8a45d19 100644 --- a/Ragnarock/design.css +++ b/Ragnarock/design.css @@ -9,6 +9,45 @@ --text-muted: #8da0aa; --border-light: #d3cb87f2; --white: #ffffff; + + /* CyberPanel 2.5.5-dev theme variables */ + --ragnarock-primary: #003049; + --ragnarock-secondary: #f77f00; + --ragnarock-accent: #d62828; + --ragnarock-hover: #fdc85e; + --ragnarock-text: #003049; + --ragnarock-bg: #eae2b7; + --ragnarock-panel: #f6efca; + --ragnarock-sidebar: #003049; + --ragnarock-border: #d3cb87f2; + --ragnarock-shadow: rgba(17, 17, 26, 0.1); +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --primary-color: var(--ragnarock-primary); + --secondary-color: var(--ragnarock-secondary); + --accent-color: var(--ragnarock-accent); + --hover-color: var(--ragnarock-hover); + --text-color: var(--ragnarock-text); + --background-color: var(--ragnarock-bg); + --panel-background: var(--ragnarock-panel); + --sidebar-background: var(--ragnarock-sidebar); + --border-color: var(--ragnarock-border); + --shadow-color: var(--ragnarock-shadow); +} + +[data-theme="dark"] { + --primary-color: var(--ragnarock-primary); + --secondary-color: var(--ragnarock-secondary); + --accent-color: var(--ragnarock-accent); + --hover-color: var(--ragnarock-hover); + --text-color: var(--ragnarock-text); + --background-color: var(--ragnarock-bg); + --panel-background: var(--ragnarock-panel); + --sidebar-background: var(--ragnarock-sidebar); + --border-color: var(--ragnarock-border); + --shadow-color: var(--ragnarock-shadow); } /* Header and Base Styles */ diff --git a/VJ-Theme-Blue-v2/design-v255.css b/VJ-Theme-Blue-v2/design-v255.css new file mode 100644 index 0000000..22c21bd --- /dev/null +++ b/VJ-Theme-Blue-v2/design-v255.css @@ -0,0 +1,45 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: VJ-Theme-Blue-v2 */ + +:root { + --vj-main: #3f3e7d; + --vj-light: #4979b1; + --vj-grad: linear-gradient(135deg, #4979b1 0%, #3f3e7d 100%); + --bg-primary: #f0f4ff !important; + --bg-secondary: #ffffff !important; + --bg-sidebar: #fcfdff !important; + --bg-sidebar-item: #ffffff !important; + --text-primary: #0b003c !important; + --accent-color: var(--vj-main) !important; + --accent-hover: var(--vj-light) !important; + --border-color: rgba(63, 62, 125, 0.15) !important; + --shadow-color: rgba(63, 62, 125, 0.1) !important; + --ai-banner-bg: var(--vj-grad) !important; + --bg-hover: rgba(63, 62, 125, 0.08) !important; + --active-shadow: rgba(63, 62, 125, 0.4) !important; + --text-inverse: #ffffff !important; +} + +html[data-theme="dark"], +[data-theme="dark"] { + --vj-dark-bg: #10121a; + --vj-card-bg: #1c1e29; + --vj-accent: #89aed6; + --vj-text: #e4e6ee; + --vj-border: #2a2c3d; + --bg-primary: var(--vj-dark-bg) !important; + --bg-secondary: var(--vj-card-bg) !important; + --bg-sidebar: #141620 !important; + --bg-sidebar-item: #202330 !important; + --text-primary: var(--vj-text) !important; + --text-secondary: #8a90a0 !important; + --accent-color: #4979b1 !important; + --border-color: var(--vj-border) !important; + --shadow-color: rgba(0, 0, 0, 0.5) !important; + --ai-banner-bg: linear-gradient(135deg, #2b4a70 0%, #1c1e29 100%) !important; + --bg-hover: rgba(255, 255, 255, 0.06) !important; +} diff --git a/VJ-Theme-Dark-v2/design-v255.css b/VJ-Theme-Dark-v2/design-v255.css new file mode 100644 index 0000000..ff04118 --- /dev/null +++ b/VJ-Theme-Dark-v2/design-v255.css @@ -0,0 +1,47 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: VJ-Theme-Dark-v2 */ + +:root { + --vj-main: #323232; + --vj-light: #5a5a5a; + --vj-grad: linear-gradient(135deg, #5a5a5a 0%, #525252 100%); + --bg-primary: #1c1c1c !important; + --bg-secondary: #2c2c2c !important; + --bg-sidebar: #222222 !important; + --bg-sidebar-item: #2c2c2c !important; + --bg-hover: rgba(255, 255, 255, 0.12) !important; + --text-primary: #e2e2e2 !important; + --text-secondary: #aaaaaa !important; + --text-heading: #ffffff !important; + --accent-color: #a0a0a0 !important; + --accent-hover: #ffffff !important; + --border-color: rgba(255, 255, 255, 0.1) !important; + --shadow-color: rgba(0, 0, 0, 0.4) !important; + --ai-banner-bg: var(--vj-grad) !important; + --active-shadow: rgba(0, 0, 0, 0.5) !important; + --text-inverse: #ffffff !important; +} + +html[data-theme="dark"], +[data-theme="dark"] { + --vj-dark-bg: #000000; + --vj-card-bg: #0f0f0f; + --vj-accent: #d4d4d4; + --vj-text: #ffffff; + --vj-border: #333333; + --bg-primary: var(--vj-dark-bg) !important; + --bg-secondary: var(--vj-card-bg) !important; + --bg-sidebar: #050505 !important; + --bg-sidebar-item: #141414 !important; + --text-primary: var(--vj-text) !important; + --text-secondary: #888888 !important; + --accent-color: #cccccc !important; + --border-color: rgba(255, 255, 255, 0.08) !important; + --shadow-color: rgba(0, 0, 0, 0.8) !important; + --ai-banner-bg: linear-gradient(135deg, #222222 0%, #000000 100%) !important; + --bg-hover: rgba(255, 255, 255, 0.08) !important; +} diff --git a/VJ-Theme-Green-v2/design-v255.css b/VJ-Theme-Green-v2/design-v255.css new file mode 100644 index 0000000..9ecf06f --- /dev/null +++ b/VJ-Theme-Green-v2/design-v255.css @@ -0,0 +1,45 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: VJ-Theme-Green-v2 */ + +:root { + --vj-main: #3e7d58; + --vj-light: #52b149; + --vj-grad: linear-gradient(135deg, #52b149 0%, #3e7d58 100%); + --bg-primary: #f0fff4 !important; + --bg-secondary: #ffffff !important; + --bg-sidebar: #fafffc !important; + --bg-sidebar-item: #ffffff !important; + --text-primary: #003c39 !important; + --accent-color: var(--vj-main) !important; + --accent-hover: var(--vj-light) !important; + --border-color: rgba(62, 125, 88, 0.15) !important; + --shadow-color: rgba(62, 125, 88, 0.1) !important; + --ai-banner-bg: var(--vj-grad) !important; + --bg-hover: rgba(62, 125, 88, 0.08) !important; + --active-shadow: rgba(62, 125, 88, 0.4) !important; + --text-inverse: #ffffff !important; +} + +html[data-theme="dark"], +[data-theme="dark"] { + --vj-dark-bg: #101a14; + --vj-card-bg: #1b2620; + --vj-accent: #89d6a3; + --vj-text: #e4eee9; + --vj-border: #2a3d31; + --bg-primary: var(--vj-dark-bg) !important; + --bg-secondary: var(--vj-card-bg) !important; + --bg-sidebar: #131f18 !important; + --bg-sidebar-item: #1f2e25 !important; + --text-primary: var(--vj-text) !important; + --text-secondary: #8aa092 !important; + --accent-color: #52b149 !important; + --border-color: var(--vj-border) !important; + --shadow-color: rgba(0, 0, 0, 0.5) !important; + --ai-banner-bg: linear-gradient(135deg, #2b553e 0%, #1b2620 100%) !important; + --bg-hover: rgba(255, 255, 255, 0.06) !important; +} diff --git a/VJ-Theme-Purple-v2/design-v255.css b/VJ-Theme-Purple-v2/design-v255.css new file mode 100644 index 0000000..0f8643c --- /dev/null +++ b/VJ-Theme-Purple-v2/design-v255.css @@ -0,0 +1,45 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: VJ-Theme-Purple-v2 */ + +:root { + --vj-main: #7d3e6f; + --vj-light: #b14949; + --vj-grad: linear-gradient(135deg, #b14949 0%, #7d3e6f 100%); + --bg-primary: #f0f0ff !important; + --bg-secondary: #ffffff !important; + --bg-sidebar: #fdfafd !important; + --bg-sidebar-item: #ffffff !important; + --text-primary: #3c002f !important; + --accent-color: var(--vj-main) !important; + --accent-hover: var(--vj-light) !important; + --border-color: rgba(125, 62, 111, 0.15) !important; + --shadow-color: rgba(125, 62, 111, 0.1) !important; + --ai-banner-bg: var(--vj-grad) !important; + --bg-hover: rgba(125, 62, 111, 0.08) !important; + --active-shadow: rgba(125, 62, 111, 0.4) !important; + --text-inverse: #ffffff !important; +} + +html[data-theme="dark"], +[data-theme="dark"] { + --vj-dark-bg: #150d14; + --vj-card-bg: #241822; + --vj-accent: #d689bd; + --vj-text: #eee4eb; + --vj-border: #3d2638; + --bg-primary: var(--vj-dark-bg) !important; + --bg-secondary: var(--vj-card-bg) !important; + --bg-sidebar: #1a0f18 !important; + --bg-sidebar-item: #2a1b27 !important; + --text-primary: var(--vj-text) !important; + --text-secondary: #a08a99 !important; + --accent-color: #b14949 !important; + --border-color: var(--vj-border) !important; + --shadow-color: rgba(0, 0, 0, 0.5) !important; + --ai-banner-bg: linear-gradient(135deg, #4a2b42 0%, #241822 100%) !important; + --bg-hover: rgba(255, 255, 255, 0.06) !important; +} diff --git a/blue-green-theme/design-v255.css b/blue-green-theme/design-v255.css new file mode 100644 index 0000000..1489f61 --- /dev/null +++ b/blue-green-theme/design-v255.css @@ -0,0 +1,33 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: blue-green-theme */ + +:root { + --blue-green-primary: #11998e; + --blue-green-secondary: #38ef7d; + --blue-green-accent: #38ef7d; + --blue-green-hover: #32d16a; + --blue-green-text: #ffffff; + --blue-green-bg: #f8f9fa; +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --accent-color: var(--blue-green-primary); + --accent-hover: var(--blue-green-hover); + --bg-primary: var(--blue-green-bg); + --text-primary: #2f3640; + --text-secondary: #64748b; +} + +html[data-theme="dark"], +[data-theme="dark"] { + --accent-color: var(--blue-green-secondary); + --accent-hover: var(--blue-green-hover); + --bg-primary: #0f0f23; + --text-primary: #e4e4e7; + --text-secondary: #9ca3af; +} diff --git a/blue-green-theme/design.css b/blue-green-theme/design.css index 8b6f714..4e16a1f 100644 --- a/blue-green-theme/design.css +++ b/blue-green-theme/design.css @@ -1,14 +1,51 @@ +/* + Name: Blue Green Theme v2.0 + Version: 2.0 + Author: Original Author + Tested on CyberPanel 2.5.5-dev + Served with APACHE-2.0 license + - CyberPanel repo: https://github.com/usmannasir/cyberpanel/ + - Updated for CyberPanel 2.5.5-dev theme system compatibility +*/ + +/* CSS Variables for CyberPanel 2.5.5-dev compatibility */ +:root { + --blue-green-primary: #11998e; + --blue-green-secondary: #38ef7d; + --blue-green-accent: #38ef7d; + --blue-green-hover: #32d16a; + --blue-green-text: #ffffff; + --blue-green-bg: #f8f9fa; +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --accent-color: var(--blue-green-primary); + --accent-hover: var(--blue-green-hover); + --bg-primary: var(--blue-green-bg); + --text-primary: #2f3640; + --text-secondary: #64748b; +} + +[data-theme="dark"] { + --accent-color: var(--blue-green-secondary); + --accent-hover: var(--blue-green-hover); + --bg-primary: #0f0f23; + --text-primary: #e4e4e7; + --text-secondary: #9ca3af; +} + .bg-gradient-9 { -background: #11998e; /* fallback for old browsers */ -background: -webkit-linear-gradient(to right, #38ef7d, #11998e); /* Chrome 10-25, Safari 5.1-6 */ -background: linear-gradient(to right, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + background: var(--blue-green-primary); /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, var(--blue-green-secondary), var(--blue-green-primary)); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, var(--blue-green-secondary), var(--blue-green-primary)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #page-sidebar a:hover { -color: #38ef7d; + color: var(--blue-green-secondary); } -.bsdatepicker td span:hover,.bsdatepicker td.active,.bsdatepicker td.day.active:hover,.bsdatepicker th.next:hover,.bsdatepicker th.prev:hover,.btn-primary.active,.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,.daterangepicker .calendar th.next:hover,.daterangepicker .calendar th.prev:hover,.daterangepicker td.active,.daterangepicker td.available.active:hover,.hover-primary:hover,.label-primary[href]:focus,.label-primary[href]:hover,.open .dropdown-toggle.btn-primary,.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover,.ui-accordion-header.ui-accordion-header-active.ui-state-hover,.ui-datepicker .ui-datepicker-next.ui-state-hover,.ui-datepicker .ui-datepicker-prev.ui-state-hover,.ui-datepicker td a:hover,.ui-dialog-buttonset button:hover,.ui-rangeSlider-bar:active,.ui-rangeSlider-bar:hover,.ui-slider-handle.ui-state-active,.ui-slider-handle.ui-state-hover{color:#fff;border-color: #38ef7d;background-color: #38ef7d;} -.btn-primary{border-color: #11998e;background-color: #11998e;} +.bsdatepicker td span:hover,.bsdatepicker td.active,.bsdatepicker td.day.active:hover,.bsdatepicker th.next:hover,.bsdatepicker th.prev:hover,.btn-primary.active,.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,.daterangepicker .calendar th.next:hover,.daterangepicker .calendar th.prev:hover,.daterangepicker td.active,.daterangepicker td.available.active:hover,.hover-primary:hover,.label-primary[href]:focus,.label-primary[href]:hover,.open .dropdown-toggle.btn-primary,.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover,.ui-accordion-header.ui-accordion-header-active.ui-state-hover,.ui-datepicker .ui-datepicker-next.ui-state-hover,.ui-datepicker .ui-datepicker-prev.ui-state-hover,.ui-datepicker td a:hover,.ui-dialog-buttonset button:hover,.ui-rangeSlider-bar:active,.ui-rangeSlider-bar:hover,.ui-slider-handle.ui-state-active,.ui-slider-handle.ui-state-hover{color:var(--blue-green-text);border-color: var(--blue-green-secondary);background-color: var(--blue-green-secondary);} +.btn-primary{border-color: var(--blue-green-primary);background-color: var(--blue-green-primary);} -.btn-blue-alt.active, .btn-blue-alt.disabled, .btn-blue-alt.disabled.active, .btn-blue-alt.disabled:active, .btn-blue-alt.disabled:focus, .btn-blue-alt.disabled:hover, .btn-blue-alt:active, .btn-blue-alt:focus, .btn-blue-alt:hover, .btn-blue-alt[disabled], .btn-blue-alt[disabled].active, .btn-blue-alt[disabled]:active, .btn-blue-alt[disabled]:focus, .btn-blue-alt[disabled]:hover, .label-blue-alt[href]:focus, .label-blue-alt[href]:hover, .open .dropdown-toggle.btn-blue-alt {color:#fff;background:#11998e;border-color: #11998e;} +.btn-blue-alt.active, .btn-blue-alt.disabled, .btn-blue-alt.disabled.active, .btn-blue-alt.disabled:active, .btn-blue-alt.disabled:focus, .btn-blue-alt.disabled:hover, .btn-blue-alt:active, .btn-blue-alt:focus, .btn-blue-alt:hover, .btn-blue-alt[disabled], .btn-blue-alt[disabled].active, .btn-blue-alt[disabled]:active, .btn-blue-alt[disabled]:focus, .btn-blue-alt[disabled]:hover, .label-blue-alt[href]:focus, .label-blue-alt[href]:hover, .open .dropdown-toggle.btn-blue-alt {color:var(--blue-green-text);background:var(--blue-green-primary);border-color: var(--blue-green-primary);} -.badge-blue-alt, .bg-blue-alt, .btn-blue-alt, .hover-blue-alt:hover, .label-blue-alt {color:#fff;background:#38ef7d;border-color: #38ef7d;} +.badge-blue-alt, .bg-blue-alt, .btn-blue-alt, .hover-blue-alt:hover, .label-blue-alt {color:var(--blue-green-text);background:var(--blue-green-secondary);border-color: var(--blue-green-secondary);} diff --git a/dark-theme/design-v255.css b/dark-theme/design-v255.css new file mode 100644 index 0000000..2a0ce71 --- /dev/null +++ b/dark-theme/design-v255.css @@ -0,0 +1,69 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: dark-theme */ + +:root { + --background-color-first: #151516; + --background-color-second: #18191a; + --background-color-third: #202124; + --background-color-fourth: #737373; + --hover-text-color: #d7d7d9; + --hover-background-color: #202124; + --hover-border-color: #40464d; + --border-color-first: #212327; + --border-color-second: transparent; + --link-color-first: #d7d7d9; + --shadow-color-first: rgba(0,0,0,0.3); + --text-color-first: #bbb; + --sidebar-header-text-color: var(--body-text-color); + --sidebar-header-background: transparent; + --sidebar-header-border-color:var(--border-color-first); + --background-color-badge: #9126266b; + --text-color-badge: #c4c4c4; + --loading-background:var(--background-color-second); + --resources-text-color:#67696a; + --resources-background:transparent; + --resources-circle-background:var(--background-color-second); + --resources-circle-border:var(--background-color-third); + --resources-shadow:var(--shadow-color-first); + --body-text-color:var(--text-color-first); + --body-background:var(--background-color-first); + --link-color:var(--link-color-first); + --link-hover-color:var(--link-color-first); + --button-color:var(--link-color-first); + --button-hover-color:var(--link-color-first); + --header-background:var(--background-color-first); + --header-border-color:var(--border-color-first); + --sidebar-overview-color:var(--link-color-first); + --sidebar-overview-background:var(--background-color-first); + --sidebar-overview-border-color:var(--border-color-second); + --sidebar-color:var(--link-color-first); + --sidebar-background:var(--background-color-first); + --sidebar-border-color:var(--border-color-second); + --sidebar-submenu-color:var(--link-color-first); + --sidebar-submenu-background:var(--background-color-first); + --sidebar-submenu-border-color:var(--border-color-second); + --sidebar-hover-text-color:var(--hover-text-color); + --sidebar-hover-background:var(--hover-background-color); + --sidebar-hover-border-color:var(--hover-border-color); + --sidebar-icon-color:var(--link-color-first); + --sidebar-divider:unset; + --content-text-color: #d9d9d9; + --content-background: var(--background-color-second); + --content-border-color: transparent; + --dashboard-box-shortcut-color:#d0d0d0; + --dashboard-box-shortcut-background: transparent; + --dashboard-box-shortcut-background-border:#2d2e2e; + --form-control-text-color: var(--body-text-color); + --form-control-background: var(--background-color-third); + --form-control-disabled-background: var(--background-color-third); + --form-control-border-color:#40464d; + --form-line-color:#dfe8f142; + --form-control-shadow:var(--border-color-first); + --form-control-focus-border-color: #306da2; + --form-control-focus-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px rgba(112, 116, 119, 0.6); +} + diff --git a/l-dark-theme/design-v255.css b/l-dark-theme/design-v255.css new file mode 100644 index 0000000..110559f --- /dev/null +++ b/l-dark-theme/design-v255.css @@ -0,0 +1,35 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets #page-sidebar (pre-2.4.8). + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: l-dark-theme (approximation for v2.5.5-dev shell) */ + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --accent-color: #07df07; + --accent-hover: #05b805; + --bg-primary: #141414; + --bg-secondary: #222222; + --bg-sidebar: #000000; + --bg-hover: #323232; + --border-color: #383d42; + --text-primary: #ffffff; + --text-secondary: #e9e9ff; +} + +html[data-theme="dark"], +[data-theme="dark"] { + --accent-color: #07df07; + --accent-hover: #05b805; + --bg-primary: #0a0a0a; + --bg-secondary: #141414; + --bg-sidebar: #000000; + --bg-sidebar-item: #1a1a1a; + --bg-hover: #323232; + --bg-muted: #1c1c1c; + --border-color: #383d42; + --text-primary: #ffffff; + --text-secondary: #c0c0c0; + --text-heading: #ffffff; +} diff --git a/legacy-VJ-Theme-Dark/design-v255.css b/legacy-VJ-Theme-Dark/design-v255.css new file mode 100644 index 0000000..22da910 --- /dev/null +++ b/legacy-VJ-Theme-Dark/design-v255.css @@ -0,0 +1,60 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: legacy-VJ-Theme-Dark */ + +:root { + --bt-background-color: -webkit-linear-gradient(-45deg, #2d2d2d 0%, #323232 30%); + --bt-background-color-2: -webkit-linear-gradient(311deg, #2d2d2d 0%, #323232 30%); + --first-color: #e0e0e0; + --second-color: #3c3c3c; + --icon-color: #fbfbfb; + --third-color: #ededed; + --c100-color: #bcbcbc; + --panel-text-color: #fbfbfb; + --m-background-color: #1c1c1c; + --btn-primary-background: #3c3c3c; + --m1-box-shadow: rgb(0 0 0 / 15%) 0px 4px 12px; + --vj-dark-primary: #e0e0e0; + --vj-dark-secondary: #3c3c3c; + --vj-dark-accent: #2d2d2d; + --vj-dark-hover: #ededed; + --vj-dark-text: #fbfbfb; + --vj-dark-bg: #1c1c1c; + --vj-dark-panel: #2c2c2c; + --vj-dark-sidebar: #292929; + --vj-dark-border: #4a4a4a6e; + --vj-dark-shadow: rgba(0, 0, 0, 0.15); + --vj-dark-gradient: linear-gradient(-45deg, #2d2d2d 0%, #323232 30%); + --vj-dark-gradient-2: linear-gradient(311deg, #2d2d2d 0%, #323232 30%); +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --primary-color: var(--vj-dark-primary); + --secondary-color: var(--vj-dark-secondary); + --accent-color: var(--vj-dark-accent); + --hover-color: var(--vj-dark-hover); + --text-color: var(--vj-dark-text); + --background-color: var(--vj-dark-bg); + --panel-background: var(--vj-dark-panel); + --sidebar-background: var(--vj-dark-sidebar); + --border-color: var(--vj-dark-border); + --shadow-color: var(--vj-dark-shadow); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --primary-color: var(--vj-dark-primary); + --secondary-color: var(--vj-dark-secondary); + --accent-color: var(--vj-dark-accent); + --hover-color: var(--vj-dark-hover); + --text-color: var(--vj-dark-text); + --background-color: var(--vj-dark-bg); + --panel-background: var(--vj-dark-panel); + --sidebar-background: var(--vj-dark-sidebar); + --border-color: var(--vj-dark-border); + --shadow-color: var(--vj-dark-shadow); +} diff --git a/legacy-VJ-Theme-Dark/design.css b/legacy-VJ-Theme-Dark/design.css index 28f309b..e6ff330 100644 --- a/legacy-VJ-Theme-Dark/design.css +++ b/legacy-VJ-Theme-Dark/design.css @@ -16,11 +16,51 @@ --third-color: #ededed; --c100-color: #bcbcbc; --panel-text-color: #fbfbfb; ---m-background-color: #1c1c1c; ---btn-primary-background: #3c3c3c; ---m1-box-shadow: rgb(0 0 0 / 15%) 0px 4px 12px; + --m-background-color: #1c1c1c; + --btn-primary-background: #3c3c3c; + --m1-box-shadow: rgb(0 0 0 / 15%) 0px 4px 12px; + + /* CyberPanel 2.5.5-dev theme variables */ + --vj-dark-primary: #e0e0e0; + --vj-dark-secondary: #3c3c3c; + --vj-dark-accent: #2d2d2d; + --vj-dark-hover: #ededed; + --vj-dark-text: #fbfbfb; + --vj-dark-bg: #1c1c1c; + --vj-dark-panel: #2c2c2c; + --vj-dark-sidebar: #292929; + --vj-dark-border: #4a4a4a6e; + --vj-dark-shadow: rgba(0, 0, 0, 0.15); + --vj-dark-gradient: linear-gradient(-45deg, #2d2d2d 0%, #323232 30%); + --vj-dark-gradient-2: linear-gradient(311deg, #2d2d2d 0%, #323232 30%); +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --primary-color: var(--vj-dark-primary); + --secondary-color: var(--vj-dark-secondary); + --accent-color: var(--vj-dark-accent); + --hover-color: var(--vj-dark-hover); + --text-color: var(--vj-dark-text); + --background-color: var(--vj-dark-bg); + --panel-background: var(--vj-dark-panel); + --sidebar-background: var(--vj-dark-sidebar); + --border-color: var(--vj-dark-border); + --shadow-color: var(--vj-dark-shadow); +} - } +[data-theme="dark"] { + --primary-color: var(--vj-dark-primary); + --secondary-color: var(--vj-dark-secondary); + --accent-color: var(--vj-dark-accent); + --hover-color: var(--vj-dark-hover); + --text-color: var(--vj-dark-text); + --background-color: var(--vj-dark-bg); + --panel-background: var(--vj-dark-panel); + --sidebar-background: var(--vj-dark-sidebar); + --border-color: var(--vj-dark-border); + --shadow-color: var(--vj-dark-shadow); +} /*page back*/ diff --git a/legacy-VJ-Theme-Green/design-v255.css b/legacy-VJ-Theme-Green/design-v255.css new file mode 100644 index 0000000..aedba06 --- /dev/null +++ b/legacy-VJ-Theme-Green/design-v255.css @@ -0,0 +1,57 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: legacy-VJ-Theme-Green */ + +:root { + --bt-background-color: -webkit-linear-gradient(-45deg, #52b149 0%, #457d3e 30%); + --bt-background-color-2: -webkit-linear-gradient(311deg, #52b149 0%, #457d3e 30%); + --first-color: #3e7d58; + --second-color: #3e7d586e; + --icon-color: #003c39; + --third-color: #43965c; + --c100-color: #3e7d4845; + --panel-text-color: #46a076; + --vj-green-primary: #3e7d58; + --vj-green-secondary: #43965c; + --vj-green-accent: #52b149; + --vj-green-hover: #46a076; + --vj-green-text: #003c39; + --vj-green-bg: #ffffff; + --vj-green-panel: #ffffff; + --vj-green-sidebar: #ffffff; + --vj-green-border: #3e7d586e; + --vj-green-shadow: rgba(62, 69, 125, 0.15); + --vj-green-gradient: linear-gradient(-45deg, #52b149 0%, #457d3e 30%); + --vj-green-gradient-2: linear-gradient(311deg, #52b149 0%, #457d3e 30%); +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --primary-color: var(--vj-green-primary); + --secondary-color: var(--vj-green-secondary); + --accent-color: var(--vj-green-accent); + --hover-color: var(--vj-green-hover); + --text-color: var(--vj-green-text); + --background-color: var(--vj-green-bg); + --panel-background: var(--vj-green-panel); + --sidebar-background: var(--vj-green-sidebar); + --border-color: var(--vj-green-border); + --shadow-color: var(--vj-green-shadow); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --primary-color: var(--vj-green-primary); + --secondary-color: var(--vj-green-secondary); + --accent-color: var(--vj-green-accent); + --hover-color: var(--vj-green-hover); + --text-color: var(--vj-green-text); + --background-color: var(--vj-green-bg); + --panel-background: var(--vj-green-panel); + --sidebar-background: var(--vj-green-sidebar); + --border-color: var(--vj-green-border); + --shadow-color: var(--vj-green-shadow); +} diff --git a/legacy-VJ-Theme-Green/design.css b/legacy-VJ-Theme-Green/design.css index 590e97d..5c386dd 100644 --- a/legacy-VJ-Theme-Green/design.css +++ b/legacy-VJ-Theme-Green/design.css @@ -16,8 +16,48 @@ --third-color: #43965c; --c100-color: #3e7d4845; --panel-text-color: #46a076; - - } + + /* CyberPanel 2.5.5-dev theme variables */ + --vj-green-primary: #3e7d58; + --vj-green-secondary: #43965c; + --vj-green-accent: #52b149; + --vj-green-hover: #46a076; + --vj-green-text: #003c39; + --vj-green-bg: #ffffff; + --vj-green-panel: #ffffff; + --vj-green-sidebar: #ffffff; + --vj-green-border: #3e7d586e; + --vj-green-shadow: rgba(62, 69, 125, 0.15); + --vj-green-gradient: linear-gradient(-45deg, #52b149 0%, #457d3e 30%); + --vj-green-gradient-2: linear-gradient(311deg, #52b149 0%, #457d3e 30%); +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --primary-color: var(--vj-green-primary); + --secondary-color: var(--vj-green-secondary); + --accent-color: var(--vj-green-accent); + --hover-color: var(--vj-green-hover); + --text-color: var(--vj-green-text); + --background-color: var(--vj-green-bg); + --panel-background: var(--vj-green-panel); + --sidebar-background: var(--vj-green-sidebar); + --border-color: var(--vj-green-border); + --shadow-color: var(--vj-green-shadow); +} + +[data-theme="dark"] { + --primary-color: var(--vj-green-primary); + --secondary-color: var(--vj-green-secondary); + --accent-color: var(--vj-green-accent); + --hover-color: var(--vj-green-hover); + --text-color: var(--vj-green-text); + --background-color: var(--vj-green-bg); + --panel-background: var(--vj-green-panel); + --sidebar-background: var(--vj-green-sidebar); + --border-color: var(--vj-green-border); + --shadow-color: var(--vj-green-shadow); +} diff --git a/legacy-VJ-Theme-Purple/design-v255.css b/legacy-VJ-Theme-Purple/design-v255.css new file mode 100644 index 0000000..ae89a4d --- /dev/null +++ b/legacy-VJ-Theme-Purple/design-v255.css @@ -0,0 +1,57 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: legacy-VJ-Theme-Purple */ + +:root { + --bt-background-color: -webkit-linear-gradient(-45deg, #b14949 0%, #7d3e6f 30%); + --bt-background-color-2: -webkit-linear-gradient(311deg, #b14949 0%, #7d3e6f 30%); + --first-color: #7d3e6f; + --second-color: #7d3e6f6e; + --icon-color: #3c002f; + --third-color: #96435d; + --c100-color: #7d3e6f45; + --panel-text-color: #a04655; + --vj-purple-primary: #7d3e6f; + --vj-purple-secondary: #96435d; + --vj-purple-accent: #b14949; + --vj-purple-hover: #a04655; + --vj-purple-text: #3c002f; + --vj-purple-bg: #ffffff; + --vj-purple-panel: #ffffff; + --vj-purple-sidebar: #ffffff; + --vj-purple-border: #7d3e6f6e; + --vj-purple-shadow: rgba(62, 69, 125, 0.15); + --vj-purple-gradient: linear-gradient(-45deg, #b14949 0%, #7d3e6f 30%); + --vj-purple-gradient-2: linear-gradient(311deg, #b14949 0%, #7d3e6f 30%); +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --primary-color: var(--vj-purple-primary); + --secondary-color: var(--vj-purple-secondary); + --accent-color: var(--vj-purple-accent); + --hover-color: var(--vj-purple-hover); + --text-color: var(--vj-purple-text); + --background-color: var(--vj-purple-bg); + --panel-background: var(--vj-purple-panel); + --sidebar-background: var(--vj-purple-sidebar); + --border-color: var(--vj-purple-border); + --shadow-color: var(--vj-purple-shadow); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --primary-color: var(--vj-purple-primary); + --secondary-color: var(--vj-purple-secondary); + --accent-color: var(--vj-purple-accent); + --hover-color: var(--vj-purple-hover); + --text-color: var(--vj-purple-text); + --background-color: var(--vj-purple-bg); + --panel-background: var(--vj-purple-panel); + --sidebar-background: var(--vj-purple-sidebar); + --border-color: var(--vj-purple-border); + --shadow-color: var(--vj-purple-shadow); +} diff --git a/legacy-VJ-Theme-Purple/design.css b/legacy-VJ-Theme-Purple/design.css index e127eb1..252b90a 100644 --- a/legacy-VJ-Theme-Purple/design.css +++ b/legacy-VJ-Theme-Purple/design.css @@ -16,8 +16,48 @@ --third-color: #96435d; --c100-color: #7d3e6f45; --panel-text-color: #a04655; - - } + + /* CyberPanel 2.5.5-dev theme variables */ + --vj-purple-primary: #7d3e6f; + --vj-purple-secondary: #96435d; + --vj-purple-accent: #b14949; + --vj-purple-hover: #a04655; + --vj-purple-text: #3c002f; + --vj-purple-bg: #ffffff; + --vj-purple-panel: #ffffff; + --vj-purple-sidebar: #ffffff; + --vj-purple-border: #7d3e6f6e; + --vj-purple-shadow: rgba(62, 69, 125, 0.15); + --vj-purple-gradient: linear-gradient(-45deg, #b14949 0%, #7d3e6f 30%); + --vj-purple-gradient-2: linear-gradient(311deg, #b14949 0%, #7d3e6f 30%); +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --primary-color: var(--vj-purple-primary); + --secondary-color: var(--vj-purple-secondary); + --accent-color: var(--vj-purple-accent); + --hover-color: var(--vj-purple-hover); + --text-color: var(--vj-purple-text); + --background-color: var(--vj-purple-bg); + --panel-background: var(--vj-purple-panel); + --sidebar-background: var(--vj-purple-sidebar); + --border-color: var(--vj-purple-border); + --shadow-color: var(--vj-purple-shadow); +} + +[data-theme="dark"] { + --primary-color: var(--vj-purple-primary); + --secondary-color: var(--vj-purple-secondary); + --accent-color: var(--vj-purple-accent); + --hover-color: var(--vj-purple-hover); + --text-color: var(--vj-purple-text); + --background-color: var(--vj-purple-bg); + --panel-background: var(--vj-purple-panel); + --sidebar-background: var(--vj-purple-sidebar); + --border-color: var(--vj-purple-border); + --shadow-color: var(--vj-purple-shadow); +} diff --git a/legacy-VJ-Theme-blue/design-v255.css b/legacy-VJ-Theme-blue/design-v255.css new file mode 100644 index 0000000..91a9007 --- /dev/null +++ b/legacy-VJ-Theme-blue/design-v255.css @@ -0,0 +1,57 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: legacy-VJ-Theme-blue */ + +:root { + --bt-background-color: -webkit-linear-gradient(-45deg, #4979b1 0%, #3f3e7d 30%); + --bt-background-color-2: -webkit-linear-gradient(311deg, #4979b1 0%, #3f3e7d 30%); + --first-color: #423e7d; + --second-color: #4a3e7d6e; + --icon-color: #0b003c; + --third-color: #494396; + --c100-color: #473e7d45; + --panel-text-color: #5346a0; + --vj-blue-primary: #423e7d; + --vj-blue-secondary: #494396; + --vj-blue-accent: #4979b1; + --vj-blue-hover: #5346a0; + --vj-blue-text: #0b003c; + --vj-blue-bg: #ffffff; + --vj-blue-panel: #ffffff; + --vj-blue-sidebar: #ffffff; + --vj-blue-border: #4a3e7d6e; + --vj-blue-shadow: rgba(62, 69, 125, 0.15); + --vj-blue-gradient: linear-gradient(-45deg, #4979b1 0%, #3f3e7d 30%); + --vj-blue-gradient-2: linear-gradient(311deg, #4979b1 0%, #3f3e7d 30%); +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --primary-color: var(--vj-blue-primary); + --secondary-color: var(--vj-blue-secondary); + --accent-color: var(--vj-blue-accent); + --hover-color: var(--vj-blue-hover); + --text-color: var(--vj-blue-text); + --background-color: var(--vj-blue-bg); + --panel-background: var(--vj-blue-panel); + --sidebar-background: var(--vj-blue-sidebar); + --border-color: var(--vj-blue-border); + --shadow-color: var(--vj-blue-shadow); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --primary-color: var(--vj-blue-primary); + --secondary-color: var(--vj-blue-secondary); + --accent-color: var(--vj-blue-accent); + --hover-color: var(--vj-blue-hover); + --text-color: var(--vj-blue-text); + --background-color: var(--vj-blue-bg); + --panel-background: var(--vj-blue-panel); + --sidebar-background: var(--vj-blue-sidebar); + --border-color: var(--vj-blue-border); + --shadow-color: var(--vj-blue-shadow); +} diff --git a/legacy-VJ-Theme-blue/design.css b/legacy-VJ-Theme-blue/design.css index 4119db0..dad595a 100644 --- a/legacy-VJ-Theme-blue/design.css +++ b/legacy-VJ-Theme-blue/design.css @@ -14,8 +14,48 @@ --third-color: #494396; --c100-color: #473e7d45; --panel-text-color: #5346a0; - - } + + /* CyberPanel 2.5.5-dev theme variables */ + --vj-blue-primary: #423e7d; + --vj-blue-secondary: #494396; + --vj-blue-accent: #4979b1; + --vj-blue-hover: #5346a0; + --vj-blue-text: #0b003c; + --vj-blue-bg: #ffffff; + --vj-blue-panel: #ffffff; + --vj-blue-sidebar: #ffffff; + --vj-blue-border: #4a3e7d6e; + --vj-blue-shadow: rgba(62, 69, 125, 0.15); + --vj-blue-gradient: linear-gradient(-45deg, #4979b1 0%, #3f3e7d 30%); + --vj-blue-gradient-2: linear-gradient(311deg, #4979b1 0%, #3f3e7d 30%); +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --primary-color: var(--vj-blue-primary); + --secondary-color: var(--vj-blue-secondary); + --accent-color: var(--vj-blue-accent); + --hover-color: var(--vj-blue-hover); + --text-color: var(--vj-blue-text); + --background-color: var(--vj-blue-bg); + --panel-background: var(--vj-blue-panel); + --sidebar-background: var(--vj-blue-sidebar); + --border-color: var(--vj-blue-border); + --shadow-color: var(--vj-blue-shadow); +} + +[data-theme="dark"] { + --primary-color: var(--vj-blue-primary); + --secondary-color: var(--vj-blue-secondary); + --accent-color: var(--vj-blue-accent); + --hover-color: var(--vj-blue-hover); + --text-color: var(--vj-blue-text); + --background-color: var(--vj-blue-bg); + --panel-background: var(--vj-blue-panel); + --sidebar-background: var(--vj-blue-sidebar); + --border-color: var(--vj-blue-border); + --shadow-color: var(--vj-blue-shadow); +} diff --git a/red-orange-theme/design-v255.css b/red-orange-theme/design-v255.css new file mode 100644 index 0000000..a5833e6 --- /dev/null +++ b/red-orange-theme/design-v255.css @@ -0,0 +1,48 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: red-orange-theme */ + +:root { + --red-orange-primary: #f12711; + --red-orange-secondary: #f5af19; + --red-orange-accent: #f12711; + --red-orange-hover: #f5af19; + --red-orange-text: #ffffff; + --red-orange-bg: #ffffff; + --red-orange-panel: #ffffff; + --red-orange-sidebar: #ffffff; + --red-orange-border: #f5af19; + --red-orange-shadow: rgba(241, 39, 17, 0.1); + --red-orange-gradient: linear-gradient(to right, #f5af19, #f12711); +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --primary-color: var(--red-orange-primary); + --secondary-color: var(--red-orange-secondary); + --accent-color: var(--red-orange-accent); + --hover-color: var(--red-orange-hover); + --text-color: var(--red-orange-text); + --background-color: var(--red-orange-bg); + --panel-background: var(--red-orange-panel); + --sidebar-background: var(--red-orange-sidebar); + --border-color: var(--red-orange-border); + --shadow-color: var(--red-orange-shadow); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --primary-color: var(--red-orange-primary); + --secondary-color: var(--red-orange-secondary); + --accent-color: var(--red-orange-accent); + --hover-color: var(--red-orange-hover); + --text-color: var(--red-orange-text); + --background-color: var(--red-orange-bg); + --panel-background: var(--red-orange-panel); + --sidebar-background: var(--red-orange-sidebar); + --border-color: var(--red-orange-border); + --shadow-color: var(--red-orange-shadow); +} diff --git a/red-orange-theme/design.css b/red-orange-theme/design.css index ec6b1bc..ebb775a 100644 --- a/red-orange-theme/design.css +++ b/red-orange-theme/design.css @@ -1,3 +1,45 @@ +:root { + /* CyberPanel 2.5.5-dev theme variables */ + --red-orange-primary: #f12711; + --red-orange-secondary: #f5af19; + --red-orange-accent: #f12711; + --red-orange-hover: #f5af19; + --red-orange-text: #ffffff; + --red-orange-bg: #ffffff; + --red-orange-panel: #ffffff; + --red-orange-sidebar: #ffffff; + --red-orange-border: #f5af19; + --red-orange-shadow: rgba(241, 39, 17, 0.1); + --red-orange-gradient: linear-gradient(to right, #f5af19, #f12711); +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --primary-color: var(--red-orange-primary); + --secondary-color: var(--red-orange-secondary); + --accent-color: var(--red-orange-accent); + --hover-color: var(--red-orange-hover); + --text-color: var(--red-orange-text); + --background-color: var(--red-orange-bg); + --panel-background: var(--red-orange-panel); + --sidebar-background: var(--red-orange-sidebar); + --border-color: var(--red-orange-border); + --shadow-color: var(--red-orange-shadow); +} + +[data-theme="dark"] { + --primary-color: var(--red-orange-primary); + --secondary-color: var(--red-orange-secondary); + --accent-color: var(--red-orange-accent); + --hover-color: var(--red-orange-hover); + --text-color: var(--red-orange-text); + --background-color: var(--red-orange-bg); + --panel-background: var(--red-orange-panel); + --sidebar-background: var(--red-orange-sidebar); + --border-color: var(--red-orange-border); + --shadow-color: var(--red-orange-shadow); +} + .bg-gradient-9 { background: #f12711; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #f5af19, #f12711); /* Chrome 10-25, Safari 5.1-6 */ diff --git a/scripts/__pycache__/generate-design-v255.cpython-39.pyc b/scripts/__pycache__/generate-design-v255.cpython-39.pyc new file mode 100644 index 0000000..b64c4b4 Binary files /dev/null and b/scripts/__pycache__/generate-design-v255.cpython-39.pyc differ diff --git a/scripts/generate-design-v255.py b/scripts/generate-design-v255.py new file mode 100755 index 0000000..b64151f --- /dev/null +++ b/scripts/generate-design-v255.py @@ -0,0 +1,127 @@ +#!/usr/bin/env python3 +"""Generate design-v255.css for each theme folder from design.css.""" +from __future__ import annotations +import re, sys +from pathlib import Path + +REPO_ROOT = Path(__file__).resolve().parents[1] +HEADER = """/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +""" +LIGHT_SELECTORS = (':root:not([data-theme="dark"])', '[data-theme="light"]') +DARK_SELECTORS = ('html[data-theme="dark"]', '[data-theme="dark"]') +ROOT_SHELL_RE = re.compile(r"^\s*--(?:bg-|text-|accent-|border-|shadow-|ai-banner|active-shadow|text-inverse)", re.MULTILINE) + +def strip_comments(css): + out, i, n = [], 0, len(css) + while i < n: + if css[i:i+2] == '/*': + end = css.find('*/', i + 2) + i = n if end == -1 else end + 2 + continue + out.append(css[i]) + i += 1 + return ''.join(out) + +def extract_rule_blocks(css): + css = strip_comments(css) + blocks, i, length = [], 0, len(css) + while i < length: + if css[i:i+2] == '/*': + end = css.find('*/', i+2) + i = len(css) if end == -1 else end + 2 + continue + brace = css.find('{', i) + if brace == -1: break + selector = css[i:brace].strip() + if not selector or selector.startswith('@'): + i = brace + 1; depth = 1 + while i < length and depth: + if css[i] == '{': depth += 1 + elif css[i] == '}': depth -= 1 + i += 1 + continue + i = brace + 1; depth = 1; start = i + while i < length and depth: + if css[i] == '{': depth += 1 + elif css[i] == '}': depth -= 1 + i += 1 + blocks.append((selector, css[start:i-1])) + return blocks + +def normalize_selector(sel): + return re.sub(r'\s+', ' ', sel.strip()) + +def var_lines(body): + lines = [] + for line in body.splitlines(): + s = line.strip() + if s.startswith('--') and ':' in s: + lines.append(' ' + s.rstrip(';') + ';') + return lines + +def is_theme_alias_root(selector, body): + if normalize_selector(selector) != ':root': return False + for line in var_lines(body): + name = line.strip().split(':', 1)[0] + if name.startswith('--') and not re.match(r'--(?:bg-|text-|accent-)', name): + if re.match(r'--[a-z0-9]+-', name): return True + return bool(ROOT_SHELL_RE.search(body)) + +def build_pack(theme_name, css): + blocks = extract_rule_blocks(css) + alias_roots, light_lines, dark_lines, root_shell_lines = [], [], [], [] + for selector, body in blocks: + norm = normalize_selector(selector) + vars_only = var_lines(body) + if not vars_only: continue + if is_theme_alias_root(norm, body): + alias_roots.append(':root {\n' + '\n'.join(vars_only) + '\n}\n'); continue + if norm == ':root' and ROOT_SHELL_RE.search(body): + root_shell_lines = vars_only; continue + if any(s in norm for s in LIGHT_SELECTORS): + if any(v.strip().startswith('--bg-') or v.strip().startswith('--accent-') for v in vars_only): + light_lines = vars_only + continue + if any(s in norm for s in DARK_SELECTORS): + if any(v.strip().startswith('--bg-') or v.strip().startswith('--accent-') for v in vars_only): + dark_lines = vars_only + if not light_lines and not dark_lines and not root_shell_lines and not alias_roots: + return None + out = [HEADER, '/* Theme: %s */\n\n' % theme_name] + out.extend(alias_roots) + if alias_roots: out.append('\n') + if root_shell_lines and not light_lines: + out.append(':root {\n' + '\n'.join(root_shell_lines) + '\n}\n\n') + light_lines = root_shell_lines + if light_lines: + out.append(':root:not([data-theme="dark"]),\n[data-theme="light"] {\n' + '\n'.join(light_lines) + '\n}\n\n') + if dark_lines: + out.append('html[data-theme="dark"],\n[data-theme="dark"] {\n' + '\n'.join(dark_lines) + '\n}\n') + elif light_lines: + out.append('html[data-theme="dark"],\n[data-theme="dark"] {\n' + '\n'.join(light_lines) + '\n}\n') + return ''.join(out) + +def main(): + root = REPO_ROOT if len(sys.argv) < 2 else Path(sys.argv[1]) + generated, skipped = 0, [] + for path in sorted(root.iterdir()): + if not path.is_dir() or path.name.startswith('.'): continue + design = path / 'design.css' + if not design.is_file(): continue + pack = build_pack(path.name, design.read_text(encoding='utf-8', errors='replace')) + if pack is None: + skipped.append(path.name); continue + (path / 'design-v255.css').write_text(pack, encoding='utf-8') + generated += 1 + print('OK ', path.name) + if skipped: + print('SKIP:', ', '.join(skipped)) + print('Generated', generated, 'file(s)') + return 0 + +if __name__ == '__main__': + sys.exit(main()) diff --git a/soft-dark-theme/design-v255.css b/soft-dark-theme/design-v255.css new file mode 100644 index 0000000..e756b4a --- /dev/null +++ b/soft-dark-theme/design-v255.css @@ -0,0 +1,68 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: soft-dark-theme */ + +:root { + --background-color-first: #151516; + --background-color-second: #18191a; + --background-color-third: #202124; + --background-color-fourth: #737373; + --hover-text-color: #d7d7d9; + --hover-background-color: #3a4346; + --hover-border-color: #454a53; + --border-color-first: #454a53; + --border-color-second: transparent; + --link-color-first: #adb3b6; + --shadow-color-first: #454a53a1; + --text-color-first: #e0e4e6; + --sidebar-header-text-color: #dfe4e6; + --sidebar-header-background: #3a4346; + --sidebar-header-border-color: var(--border-color-first); + --background-color-badge: #9126266b; + --text-color-badge: #c4c4c4; + --loading-background: #22282b; + --resources-text-color: #adb3b6; + --resources-background: #282f32; + --resources-circle-background: #22282b; + --resources-circle-border: #282f32; + --resources-shadow: var(--shadow-color-first); + --body-text-color: var(--text-color-first); + --body-background: var(--background-color-first); + --link-color: var(--link-color-first); + --link-hover-color: var(--link-color-first); + --button-color: var(--link-color-first); + --button-hover-color: var(--link-color-first); + --header-background: #343c3f; + --header-border-color: var(--border-color-first); + --sidebar-overview-color: #dfe4e6; + --sidebar-overview-background: #2f373a; + --sidebar-overview-border-color: var(--border-color-second); + --sidebar-color: #dfe4e6; + --sidebar-background: #2f373a; + --sidebar-border-color: var(--border-color-second); + --sidebar-submenu-color: var(--sidebar-color); + --sidebar-submenu-background: var(--sidebar-background); + --sidebar-submenu-border-color: var(--border-color-second); + --sidebar-hover-text-color: var(--hover-text-color); + --sidebar-hover-background: var(--hover-background-color); + --sidebar-hover-border-color: var(--hover-border-color); + --sidebar-icon-color: #dfe4e6; + --sidebar-divider: unset; + --content-text-color: #adb3b6; + --content-background: #22282b; + --content-border-color: transparent; + --dashboard-box-shortcut-color: #bdc9cd; + --dashboard-box-shortcut-background: #282f32; + --dashboard-box-shortcut-background-border: #454a53; + --form-control-text-color: var(--body-text-color); + --form-control-background: var(--background-color-third); + --form-control-border-color: #40464d; + --form-line-color: #dfe8f142; + --form-control-shadow: var(--border-color-first); + --form-control-focus-border-color: #306da2; + --form-control-focus-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px rgba(112, 116, 119, 0.6); +} + diff --git a/true-dark-cyberpanel/design-v255.css b/true-dark-cyberpanel/design-v255.css new file mode 100644 index 0000000..b716fd8 --- /dev/null +++ b/true-dark-cyberpanel/design-v255.css @@ -0,0 +1,41 @@ +/* CyberPanel v2.5.5-dev theme pack — paste into Design > Main Dashboard CSS + Requires cyberpanel-ui.css (v2.4.8+ shell). Legacy design.css targets the old sidebar DOM only. + Toggle dark/light with the header moon/sun button (localStorage: cyberPanelTheme). +*/ + +/* Theme: true-dark-cyberpanel */ + +:root { + --true-dark-bg: #1a1a1a; + --true-dark-panel: #252525; + --true-dark-sidebar: #141414; + --true-dark-text: #ffffff; + --true-dark-accent: #45be46; + --true-dark-warning: #5600ff; + --true-dark-danger: #252525; + --true-dark-border: #414141; + --true-dark-primary: #032d45; + --true-dark-primary-hover: #101a4a; +} + +:root:not([data-theme="dark"]), +[data-theme="light"] { + --bg-primary: var(--true-dark-bg); + --bg-secondary: var(--true-dark-panel); + --bg-sidebar: var(--true-dark-sidebar); + --text-primary: var(--true-dark-text); + --text-secondary: #9ca3af; + --accent-color: var(--true-dark-accent); + --border-color: var(--true-dark-border); +} + +html[data-theme="dark"], +[data-theme="dark"] { + --bg-primary: var(--true-dark-bg); + --bg-secondary: var(--true-dark-panel); + --bg-sidebar: var(--true-dark-sidebar); + --text-primary: var(--true-dark-text); + --text-secondary: #9ca3af; + --accent-color: var(--true-dark-accent); + --border-color: var(--true-dark-border); +} diff --git a/true-dark-cyberpanel/design.css b/true-dark-cyberpanel/design.css index 02d6a3e..a960bd1 100644 --- a/true-dark-cyberpanel/design.css +++ b/true-dark-cyberpanel/design.css @@ -1,69 +1,107 @@ /* - -True Dark CyberPanel Theme - Copy this entire code into CyberPanel -> Design Menu > Editor -This is created by Ruhani Rabin https://www.ruhanirabin.com, https://rabin.blog -Kindly give the credit when you modify and apply ----- GPL 2.0 ---- - + Name: True Dark CyberPanel v2.0 + Version: 2.0 + Author: Ruhani Rabin (https://www.ruhanirabin.com, https://rabin.blog) + Tested on CyberPanel 2.5.5-dev + Served with GPL 2.0 license + - CyberPanel repo: https://github.com/usmannasir/cyberpanel/ + - Updated for CyberPanel 2.5.5-dev theme system compatibility */ +/* CSS Variables for CyberPanel 2.5.5-dev compatibility */ +:root { + --true-dark-bg: #1a1a1a; + --true-dark-panel: #252525; + --true-dark-sidebar: #141414; + --true-dark-text: #ffffff; + --true-dark-accent: #45be46; + --true-dark-warning: #5600ff; + --true-dark-danger: #252525; + --true-dark-border: #414141; + --true-dark-primary: #032d45; + --true-dark-primary-hover: #101a4a; +} + +/* Override CyberPanel 2.5.5-dev theme variables */ +[data-theme="light"] { + --bg-primary: var(--true-dark-bg); + --bg-secondary: var(--true-dark-panel); + --bg-sidebar: var(--true-dark-sidebar); + --text-primary: var(--true-dark-text); + --text-secondary: #9ca3af; + --accent-color: var(--true-dark-accent); + --border-color: var(--true-dark-border); +} + +[data-theme="dark"] { + --bg-primary: var(--true-dark-bg); + --bg-secondary: var(--true-dark-panel); + --bg-sidebar: var(--true-dark-sidebar); + --text-primary: var(--true-dark-text); + --text-secondary: #9ca3af; + --accent-color: var(--true-dark-accent); + --border-color: var(--true-dark-border); +} + .badge-yellow, .bg-yellow, .btn-yellow, .hover-yellow:hover, .label-yellow { - color: #fff; - background: #5600ff; + color: var(--true-dark-text); + background: var(--true-dark-warning); border-color: #deb200; } .badge-danger, .bg-danger, .bg-red, .bootstrap-switch-danger, .btn-danger, .checkbox-danger div[id^=uniform-] span.checked, .hover-danger:hover, .hover-red:hover, .label-danger, .progress-bar-danger, .radio-danger div[id^=uniform-] span.checked { - color: #fff; - border-color: #252525; - background: #252525; + color: var(--true-dark-text); + border-color: var(--true-dark-danger); + background: var(--true-dark-danger); } .badge, .bs-badge, .bs-label { - color: #fff; + color: var(--true-dark-text); text-align: center; white-space: nowrap; } .btn-primary:hover, .btn-primary:focus { - background: #101a4a; + background: var(--true-dark-primary-hover); border-color: #33ff86; } .btn-primary { - background: #032d45; + background: var(--true-dark-primary); border-color: #337ab7; } .c100 { - background-color: #252525; + background-color: var(--true-dark-panel); } -.c100>span { color: #252525; } +.c100>span { + color: var(--true-dark-panel); +} .ng-binding { display: inline; - color: #45be46; + color: var(--true-dark-accent); } .table .table { - background-color: #252525; + background-color: var(--true-dark-panel); } .modal-content { - background-color: #252525; + background-color: var(--true-dark-panel); } .bootstrap-timepicker-widget table td input, .chosen-container-multi, .chosen-container-single .chosen-search input, .dataTables_length select, .form-control, .input, .ui-toolbar input, .ui-toolbar select, div.dataTables_filter input { - background: #252525; + background: var(--true-dark-panel); color: #ddd; - border: 1px solid #252525; - -webkit-box-shadow: inset 1px 1px 3px #252525; - -moz-box-shadow: inset 1px 1px 3px #252525; - box-shadow: inset 1px 1px 3px #252525; + border: 1px solid var(--true-dark-panel); + -webkit-box-shadow: inset 1px 1px 3px var(--true-dark-panel); + -moz-box-shadow: inset 1px 1px 3px var(--true-dark-panel); + box-shadow: inset 1px 1px 3px var(--true-dark-panel); } .bootstrap-timepicker-widget table td input:focus, .chosen-container-active, .chosen-container-multi.chosen-container-active, .form-control:focus, .input:focus, .selector.focus, .ui-toolbar input:focus, .ui-toolbar select:focus, div.dataTables_filter input:focus { color: #ccc; - border-color: #45be46; + border-color: var(--true-dark-accent); } #header-logo, #page-sidebar.collapse, #theme-options { display: block; - background-color: #141414; + background-color: var(--true-dark-sidebar); } #header-logo .logo-content-big, .logo-content-small { @@ -83,33 +121,33 @@ background: linear-gradient(90deg, #141414, #1b1b1b, #222222, #282828, #303030, } #sidebar-menu { - background: #141414; + background: var(--true-dark-sidebar); } #page-sidebar ul li.header { color: #b4b2b2; } #page-content { - background: #1a1a1a; + background: var(--true-dark-bg); } #page-title h2 { color: #afb0b1; } .bg-default, .bg-white.dashboard-box .button-pane, .bg-white.tile-box .tile-footer, .border-default, .bordered-row .form-group, .btn-default, .button-pane, .chosen-container, .chosen-container .chosen-drop, .chosen-container-active.chosen-with-drop .chosen-single div, .chosen-container-multi .chosen-choices li.search-choice, .chosen-container-single .chosen-single div, .content-box, .content-box-header.bg-default, .content-box-header.bg-gray, .content-box-header.bg-white, .dashboard-buttons .btn, .daterangepicker .calendar-date, .dropdown-menu, .email-body, .fc-state-default, .fc-widget-content, .fc-widget-header, .img-thumbnail, .jvectormap-label, .jvectormap-zoomin, .jvectormap-zoomout, .list-group-item, .mail-toolbar, .mailbox-wrapper .nav-list li a, .minicolors-panel, .ms-container .ms-list, .ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .nav-tabs, .nav-tabs>li>a:focus, .nav-tabs>li>a:hover, .pagination>li>a, .pagination>li>span, .panel, .panel-box.bg-default, .panel-box.bg-gray, .panel-box.bg-white, .panel-content.bg-default, .panel-content.bg-gray, .panel-content.bg-white, .panel-footer, .panel-group .panel-footer+.panel-collapse .panel-body, .panel-group .panel-heading+.panel-collapse .panel-body, .panel-heading, .popover, .popover-title, .posts-list li, .selector i, .table-bordered, .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th, .tabs-navigation>ul, .tabs-navigation>ul li.ui-state-hover>a, .tabs-navigation>ul li>a, .thumb-pane, .thumbnail, .timeline-box .tl-item .popover, .timeline-box:before, .ui-accordion .ui-accordion-header, .ui-datepicker, .ui-datepicker .ui-datepicker-buttonpane button, .ui-datepicker-buttonpane, .ui-dialog, .ui-dialog .ui-dialog-titlebar, .ui-dialog-buttonpane, .ui-menu, .ui-spinner .ui-spinner-button, .ui-tabs-nav, div.selector, div[id^=uniform-] span { - border-color: #414141; + border-color: var(--true-dark-border); } .panel { margin-bottom: 20px; border-width: 1px; border-style: solid; border-radius: 4px; - background-color: #414141; + background-color: var(--true-dark-border); box-shadow: 0 1px 1px rgb(0 0 0 / 5%); } body { color: #eaecef; - background-color: #1a1a1a; + background-color: var(--true-dark-bg); } label { @@ -117,11 +155,11 @@ label { } .current-pack { - color: #45be46; + color: var(--true-dark-accent); } .table { - background: #252525; + background: var(--true-dark-panel); } #page-sidebar ul li a .glyph-icon {