Add platform icons and fix dark mode contrast on HTTPS config page
- Portal: replace placeholder brand icon with Icon_platform.png in topbar - NetworkView: replace placeholder sidebar logo with Icon_networkView.png - DigiServer: fix https_config.html dark mode contrast (hardcoded light colors replaced with body.dark-mode CSS overrides and CSS variables)
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@@ -102,7 +102,7 @@ export default function Sidebar() {
|
|||||||
<aside className="sidebar">
|
<aside className="sidebar">
|
||||||
<div className="sidebar-header">
|
<div className="sidebar-header">
|
||||||
<Link to="/" className="sidebar-logo">
|
<Link to="/" className="sidebar-logo">
|
||||||
<span className="logo-icon">⬛</span>
|
<img src={`${import.meta.env.BASE_URL}Icon_networkView.png`} alt="NetworkView" className="logo-icon" />
|
||||||
<span className="logo-text">NetworkView</span>
|
<span className="logo-text">NetworkView</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -91,7 +91,7 @@ a:hover { text-decoration: underline; }
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-icon { font-size: 20px; }
|
.logo-icon { height: 28px; width: auto; vertical-align: middle; }
|
||||||
.logo-text { color: var(--accent); }
|
.logo-text { color: var(--accent); }
|
||||||
|
|
||||||
.sidebar-search { padding: 10px 12px; position: relative; }
|
.sidebar-search { padding: 10px 12px; position: relative; }
|
||||||
|
|||||||
@@ -45,7 +45,7 @@
|
|||||||
<div class="status-disabled">
|
<div class="status-disabled">
|
||||||
<span class="status-badge-inactive">⚠️ HTTPS DISABLED</span>
|
<span class="status-badge-inactive">⚠️ HTTPS DISABLED</span>
|
||||||
{% if is_https_active %}
|
{% if is_https_active %}
|
||||||
<p style="color: #156b2e; background: #d1f0e0; padding: 10px; border-radius: 4px; margin: 10px 0;">
|
<p class="https-note-active">
|
||||||
✅ <strong>Note:</strong> You are currently accessing this page via HTTPS, but the configuration shows as disabled.
|
✅ <strong>Note:</strong> You are currently accessing this page via HTTPS, but the configuration shows as disabled.
|
||||||
This configuration will be automatically updated. Please refresh the page.
|
This configuration will be automatically updated. Please refresh the page.
|
||||||
</p>
|
</p>
|
||||||
@@ -244,7 +244,7 @@
|
|||||||
<div class="status-disabled">
|
<div class="status-disabled">
|
||||||
<p>⚠️ <strong>Nginx configuration not accessible</strong></p>
|
<p>⚠️ <strong>Nginx configuration not accessible</strong></p>
|
||||||
<p>Error: {{ nginx_status.error|default('Unknown error') }}</p>
|
<p>Error: {{ nginx_status.error|default('Unknown error') }}</p>
|
||||||
<p style="font-size: 12px; color: #666;">Path checked: {{ nginx_status.path }}</p>
|
<p style="font-size: 12px; color: var(--text-secondary);">Path checked: {{ nginx_status.path }}</p>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
@@ -635,6 +635,138 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Dark mode overrides ── */
|
||||||
|
.https-note-active {
|
||||||
|
color: #156b2e;
|
||||||
|
background: #d1f0e0;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .https-note-active {
|
||||||
|
color: #6ee7a0;
|
||||||
|
background: rgba(40, 167, 69, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .status-detection {
|
||||||
|
background: rgba(102, 126, 234, 0.1);
|
||||||
|
border-left-color: #7c8ef7;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .badge-success {
|
||||||
|
background: rgba(40, 167, 69, 0.2);
|
||||||
|
color: #6ee7a0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .badge-warning {
|
||||||
|
background: rgba(255, 193, 7, 0.15);
|
||||||
|
color: #fcd34d;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .status-enabled {
|
||||||
|
background: linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(40, 167, 69, 0.1) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .status-disabled {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 193, 7, 0.08) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .status-badge-inactive {
|
||||||
|
color: #1a202c;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .status-details code {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .info-text {
|
||||||
|
background: rgba(102, 126, 234, 0.1);
|
||||||
|
border-left-color: #7c8ef7;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .form-group label {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .form-hint {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .form-input {
|
||||||
|
background: var(--card-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .form-input:focus {
|
||||||
|
border-color: #7c8ef7;
|
||||||
|
box-shadow: 0 0 0 3px rgba(124, 142, 247, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .toggle-text {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .preview-section {
|
||||||
|
background: rgba(102, 126, 234, 0.08);
|
||||||
|
border-color: #7c8ef7;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .preview-section h3 {
|
||||||
|
color: #a5b4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .access-points li {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border-left-color: #7c8ef7;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .access-points code {
|
||||||
|
background: rgba(102, 126, 234, 0.15);
|
||||||
|
color: #a5b4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .form-actions {
|
||||||
|
border-top-color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .info-card {
|
||||||
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .info-card h2,
|
||||||
|
body.dark-mode .info-section h3 {
|
||||||
|
color: #a5b4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .info-section li {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .nginx-status-card {
|
||||||
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
|
||||||
|
border-left-color: #7c8ef7;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .nginx-status-card h2 {
|
||||||
|
color: #a5b4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .status-item {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border-left-color: #7c8ef7;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .status-item strong {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-mode .status-item code {
|
||||||
|
background: rgba(102, 126, 234, 0.15);
|
||||||
|
color: #a5b4fc;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -62,7 +62,7 @@ code { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.85em; }
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-icon { font-size: 1.4rem; color: var(--accent-blue); }
|
.brand-icon { height: 2rem; width: auto; vertical-align: middle; }
|
||||||
|
|
||||||
.topbar-nav {
|
.topbar-nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
{% if current_user.is_authenticated %}
|
{% if current_user.is_authenticated %}
|
||||||
<header class="topbar">
|
<header class="topbar">
|
||||||
<div class="topbar-brand">
|
<div class="topbar-brand">
|
||||||
<span class="brand-icon">⬡</span>
|
<img src="{{ url_for('static', filename='Icon_platform.png') }}" alt="Platform Icon" class="brand-icon" />
|
||||||
<span class="brand-name">Enterprise Digital Platform</span>
|
<span class="brand-name">Enterprise Digital Platform</span>
|
||||||
</div>
|
</div>
|
||||||
<nav class="topbar-nav">
|
<nav class="topbar-nav">
|
||||||
|
|||||||
Reference in New Issue
Block a user