mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2025-12-16 05:19:43 +01:00
Enhance text readability and error handling: Add readability fixes CSS for improved contrast across UI elements. Update text colors in various components for better visibility. Enhance FTP error handling with user-friendly messages and improved path validation in both frontend and backend. Update HTML templates to provide clearer instructions and examples for FTP path input.
This commit is contained in:
Master3395
@@ -6,6 +6,7 @@ html {
|
||||
font-size: 16px; /* Base font size for better readability */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -22,7 +23,7 @@ body {
|
||||
|
||||
/* Override any light text that might be hard to read */
|
||||
.text-muted, .text-secondary, .text-light {
|
||||
color: #64748b !important; /* Darker gray instead of light gray */
|
||||
color: #2f3640 !important; /* Dark text for better readability on white backgrounds */
|
||||
}
|
||||
|
||||
/* Fix small font sizes that are hard to read */
|
||||
@@ -294,7 +295,6 @@ p {
|
||||
/* Make tables horizontally scrollable */
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.table {
|
||||
@@ -502,14 +502,14 @@ p {
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #64748b !important;
|
||||
color: #2f3640 !important; /* Dark text for better readability */
|
||||
}
|
||||
|
||||
/* Fix any light text on light backgrounds */
|
||||
.bg-light .text-muted,
|
||||
.bg-white .text-muted,
|
||||
.panel .text-muted {
|
||||
color: #64748b !important;
|
||||
color: #2f3640 !important; /* Dark text for better readability */
|
||||
}
|
||||
|
||||
/* Ensure proper spacing for touch targets */
|
||||
@@ -518,6 +518,43 @@ a, button, input, select, textarea {
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
/* Additional text readability improvements */
|
||||
/* Fix any green text issues */
|
||||
.ng-binding {
|
||||
color: #2f3640 !important; /* Normal dark text instead of green */
|
||||
}
|
||||
|
||||
/* Ensure all text elements have proper contrast */
|
||||
span, div, p, label, td, th {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Fix specific text color issues */
|
||||
.text-success {
|
||||
color: #059669 !important; /* Darker green for better readability */
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #0284c7 !important; /* Darker blue for better readability */
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: #d97706 !important; /* Darker orange for better readability */
|
||||
}
|
||||
|
||||
/* Override Bootstrap's muted text */
|
||||
.text-muted {
|
||||
color: #2f3640 !important; /* Dark text instead of grey */
|
||||
}
|
||||
|
||||
/* Fix any remaining light text on light backgrounds */
|
||||
.bg-white .text-light,
|
||||
.bg-light .text-light,
|
||||
.panel .text-light,
|
||||
.card .text-light {
|
||||
color: #2f3640 !important;
|
||||
}
|
||||
|
||||
/* Fix for small clickable elements */
|
||||
.glyph-icon, .icon {
|
||||
min-width: 44px;
|
||||
|
||||
265
static/baseTemplate/assets/readability-fixes.css
Normal file
265
static/baseTemplate/assets/readability-fixes.css
Normal file
@@ -0,0 +1,265 @@
|
||||
/* CyberPanel Readability & Design Fixes */
|
||||
/* This file fixes the core design issues with grey text and color inconsistencies */
|
||||
|
||||
/* Override CSS Variables for Better Text Contrast */
|
||||
:root {
|
||||
/* Ensure all text uses proper dark colors for readability */
|
||||
--text-primary: #2f3640;
|
||||
--text-secondary: #2f3640; /* Changed from grey to dark for better readability */
|
||||
--text-heading: #1e293b;
|
||||
}
|
||||
|
||||
/* Dark theme also uses proper contrast */
|
||||
[data-theme="dark"] {
|
||||
--text-primary: #e4e4e7;
|
||||
--text-secondary: #e4e4e7; /* Changed from grey to light for better readability */
|
||||
--text-heading: #f3f4f6;
|
||||
}
|
||||
|
||||
/* Fix Green Text Issues */
|
||||
/* Override Angular binding colors that might be green */
|
||||
.ng-binding {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
/* Specific fix for uptime display */
|
||||
#sidebar .server-info .info-line span,
|
||||
#sidebar .server-info .info-line .ng-binding,
|
||||
.server-info .ng-binding {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
/* Fix Grey Text on White Background */
|
||||
/* Override all muted and secondary text classes */
|
||||
.text-muted,
|
||||
.text-secondary,
|
||||
.text-light,
|
||||
small,
|
||||
.small,
|
||||
.text-small {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
/* Fix specific Bootstrap classes */
|
||||
.text-muted {
|
||||
color: #2f3640 !important; /* Dark text for better readability */
|
||||
}
|
||||
|
||||
/* Fix text on white/light backgrounds */
|
||||
.bg-white .text-muted,
|
||||
.bg-light .text-muted,
|
||||
.panel .text-muted,
|
||||
.card .text-muted,
|
||||
.content-box .text-muted {
|
||||
color: #2f3640 !important;
|
||||
}
|
||||
|
||||
/* Fix menu items and navigation */
|
||||
#sidebar .menu-item,
|
||||
#sidebar .menu-item span,
|
||||
#sidebar .menu-item i,
|
||||
.sidebar .menu-item,
|
||||
.sidebar .menu-item span,
|
||||
.sidebar .menu-item i {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
#sidebar .menu-item:hover,
|
||||
.sidebar .menu-item:hover {
|
||||
color: var(--accent-color) !important;
|
||||
}
|
||||
|
||||
#sidebar .menu-item.active,
|
||||
.sidebar .menu-item.active {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Fix server info and details */
|
||||
.server-info,
|
||||
.server-info *,
|
||||
.server-details,
|
||||
.server-details *,
|
||||
.info-line,
|
||||
.info-line span,
|
||||
.info-line strong,
|
||||
.tagline,
|
||||
.brand {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* Fix form elements */
|
||||
label,
|
||||
.control-label,
|
||||
.form-label {
|
||||
color: var(--text-primary) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Fix table text */
|
||||
.table th,
|
||||
.table td {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.table th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Fix alert text */
|
||||
.alert {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
color: #059669 !important; /* Darker green for better readability */
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: #0284c7 !important; /* Darker blue for better readability */
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
color: #d97706 !important; /* Darker orange for better readability */
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: #dc2626 !important; /* Darker red for better readability */
|
||||
}
|
||||
|
||||
/* Fix breadcrumb text */
|
||||
.breadcrumb-item {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* Fix modal text */
|
||||
.modal-content {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: var(--text-heading) !important;
|
||||
}
|
||||
|
||||
/* Fix button text */
|
||||
.btn {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Fix any remaining light text issues */
|
||||
.bg-light .text-light,
|
||||
.bg-white .text-light,
|
||||
.panel .text-light,
|
||||
.card .text-light {
|
||||
color: #2f3640 !important;
|
||||
}
|
||||
|
||||
/* Ensure proper contrast for all text elements */
|
||||
span, div, p, label, td, th, a, li {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Fix specific color classes */
|
||||
.text-success {
|
||||
color: #059669 !important; /* Darker green for better readability */
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #0284c7 !important; /* Darker blue for better readability */
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: #d97706 !important; /* Darker orange for better readability */
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: #dc2626 !important; /* Darker red for better readability */
|
||||
}
|
||||
|
||||
/* Fix any Angular-specific styling */
|
||||
[ng-controller] {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[ng-show],
|
||||
[ng-hide],
|
||||
[ng-if] {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Ensure all content areas have proper text color */
|
||||
.content-box,
|
||||
.panel,
|
||||
.card,
|
||||
.main-content,
|
||||
.page-content {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* Fix any remaining Bootstrap classes */
|
||||
.text-dark {
|
||||
color: #2f3640 !important;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* Mobile-specific fixes */
|
||||
@media (max-width: 768px) {
|
||||
/* Ensure mobile text is also readable */
|
||||
body,
|
||||
.container,
|
||||
.container-fluid {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
/* Fix mobile menu text */
|
||||
.mobile-menu .menu-item,
|
||||
.mobile-menu .menu-item span {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
body,
|
||||
.content-box,
|
||||
.panel,
|
||||
.card {
|
||||
color: #000000 !important;
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
.text-muted,
|
||||
.text-secondary {
|
||||
color: #000000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #000000;
|
||||
--text-heading: #000000;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #ffffff;
|
||||
--text-heading: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user