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:
ske087
2026-07-08 21:06:45 +03:00
parent 1f6217d347
commit 6034a62b08
7 changed files with 138 additions and 6 deletions
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>
+1 -1
View File
@@ -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

+1 -1
View File
@@ -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;
+1 -1
View File
@@ -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">