dark mode in cron page

This commit is contained in:
usmannasir
2025-08-06 02:51:20 +05:00
parent 8bd4068f92
commit df7a2732dd
2 changed files with 105 additions and 28 deletions

41
.idea/workspace.xml generated
View File

@@ -38,27 +38,27 @@
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent"><![CDATA[{
"keyToString": {
"ModuleVcsDetector.initialDetectionPerformed": "true",
"Notification.DisplayName-DoNotAsk-DatabaseConfigFileWatcher.found": "Database connection parameters found",
"Notification.DoNotAsk-DatabaseConfigFileWatcher.found": "true",
"RunOnceActivity.OpenDjangoStructureViewOnStart": "true",
"RunOnceActivity.ShowReadmeOnStart": "true",
"RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager": "true",
"RunOnceActivity.git.unshallow": "true",
"SHELLCHECK.PATH": "/Users/cyberpersons/Library/Application Support/JetBrains/PyCharm2025.1/plugins/Shell Script/shellcheck",
"git-widget-placeholder": "v2.4.3",
"last_opened_file_path": "/Users/cyberpersons/cyberpanel",
"node.js.detected.package.eslint": "true",
"node.js.detected.package.tslint": "true",
"node.js.selected.package.eslint": "(autodetect)",
"node.js.selected.package.tslint": "(autodetect)",
"nodejs_package_manager_path": "npm",
"settings.editor.selected.configurable": "preferences.pluginManager",
"vue.rearranger.settings.migration": "true"
<component name="PropertiesComponent">{
&quot;keyToString&quot;: {
&quot;ModuleVcsDetector.initialDetectionPerformed&quot;: &quot;true&quot;,
&quot;Notification.DisplayName-DoNotAsk-DatabaseConfigFileWatcher.found&quot;: &quot;Database connection parameters found&quot;,
&quot;Notification.DoNotAsk-DatabaseConfigFileWatcher.found&quot;: &quot;true&quot;,
&quot;RunOnceActivity.OpenDjangoStructureViewOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager&quot;: &quot;true&quot;,
&quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
&quot;SHELLCHECK.PATH&quot;: &quot;/Users/cyberpersons/Library/Application Support/JetBrains/PyCharm2025.1/plugins/Shell Script/shellcheck&quot;,
&quot;git-widget-placeholder&quot;: &quot;v2.4.3&quot;,
&quot;last_opened_file_path&quot;: &quot;/Users/cyberpersons/cyberpanel&quot;,
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
&quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
}
}]]></component>
}</component>
<component name="RunManager">
<configuration name="cyberpanel" type="Python.DjangoServer" factoryName="Django server">
<module name="cyberpanel" />
@@ -114,6 +114,7 @@
<workItem from="1753690170133" duration="11704000" />
<workItem from="1753711196398" duration="51975000" />
<workItem from="1754042060203" duration="66331000" />
<workItem from="1754429757112" duration="736000" />
</task>
<servers />
</component>

View File

@@ -8,8 +8,9 @@
<!-- Current language: {{ LANGUAGE_CODE }} -->
<style>
/* Ultra-Modern CyberPanel Design System */
/* Ultra-Modern CyberPanel Design System with Dark Mode Support */
:root {
/* Light mode colors */
--primary-color: #6366f1;
--primary-hover: #5558e3;
--primary-light: #eef2ff;
@@ -48,13 +49,46 @@
--transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Dark mode colors */
[data-theme="dark"] {
--primary-color: #818cf8;
--primary-hover: #6366f1;
--primary-light: #312e81;
--secondary-color: #a78bfa;
--accent-color: #f472b6;
--success-color: #34d399;
--danger-color: #f87171;
--warning-color: #fbbf24;
--info-color: #60a5fa;
--bg-gradient: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
--bg-gradient-alt: linear-gradient(135deg, #831843 0%, #be123c 100%);
--bg-gradient-success: linear-gradient(135deg, #064e3b 0%, #047857 100%);
--bg-light: #1e1e42;
--bg-card: #1a1a3e;
--bg-hover: #252550;
--border-color: #2a2a5e;
--border-light: #2a2a5e;
--text-primary: #e4e4e7;
--text-secondary: #9ca3af;
--text-muted: #6b7280;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.24);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.24);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -2px rgba(0,0,0,0.25);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.3), 0 10px 10px -5px rgba(0,0,0,0.24);
}
/* Container Styling */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
background: transparent;
transition: var(--transition-base);
}
/* Page Title Section */
@@ -67,6 +101,7 @@
box-shadow: var(--shadow-xl);
position: relative;
overflow: hidden;
transition: var(--transition-base);
}
#page-title::before {
@@ -114,6 +149,7 @@
border: 1px solid var(--border-color);
overflow: hidden;
position: relative;
transition: var(--transition-base);
}
.panel-body {
@@ -122,7 +158,7 @@
/* Content Box Header */
.title-hero {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
background: var(--bg-light);
padding: 25px 30px;
margin: 0;
font-size: 20px;
@@ -133,6 +169,7 @@
display: flex;
align-items: center;
gap: 15px;
transition: var(--transition-base);
}
/* Example Box Wrapper */
@@ -301,6 +338,7 @@
margin-top: 30px;
border: 1px solid var(--border-color);
display: none;
transition: var(--transition-base);
}
.form-horizontal {
@@ -333,7 +371,8 @@
padding: 12px 16px;
font-size: 15px;
transition: var(--transition-base);
background: white;
background: var(--bg-card);
color: var(--text-primary);
}
.form-control:focus {
@@ -347,7 +386,8 @@
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-color: var(--bg-card);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
@@ -361,7 +401,7 @@
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select.form-control {
color: var(--text-primary) !important;
background-color: white !important;
background-color: var(--bg-card) !important;
}
}
@@ -372,7 +412,7 @@
select.form-control:focus {
color: var(--text-primary);
background-color: white;
background-color: var(--bg-card);
}
/* Alerts */
@@ -425,6 +465,42 @@
font-size: 16px;
}
/* Dark mode specific adjustments */
[data-theme="dark"] body {
background: var(--bg-primary);
}
[data-theme="dark"] .btn-border {
border-color: var(--primary-color);
color: var(--primary-color);
}
[data-theme="dark"] .btn-border:hover {
background: var(--primary-color);
color: var(--bg-card);
}
[data-theme="dark"] code {
background: var(--bg-hover) !important;
color: var(--accent-color) !important;
}
[data-theme="dark"] #cronTable tbody tr:hover {
background: var(--bg-hover);
}
[data-theme="dark"] .alert-success {
background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
color: #34d399;
border: 1px solid #047857;
}
[data-theme="dark"] .alert-danger {
background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
color: #f87171;
border: 1px solid #991b1b;
}
/* Responsive */
@media (max-width: 768px) {
.container {
@@ -530,7 +606,7 @@
<td ng-bind="cron.month"></td>
<td ng-bind="cron.weekday"></td>
<td>
<code style="background: var(--bg-light); padding: 4px 8px; border-radius: 4px; font-size: 12px;" ng-bind="cron.command">
<code style="background: var(--bg-light); padding: 4px 8px; border-radius: 4px; font-size: 12px; color: var(--text-primary);" ng-bind="cron.command">
</code>
</td>
<td>