From 12610b4b8b9bf5f97b3d4e908770ff0d0f63054c Mon Sep 17 00:00:00 2001 From: DevSoftTech Server Date: Fri, 5 Jun 2026 16:10:38 +0530 Subject: [PATCH] Add dark border theme for better visibility on old LED screens Created custom CSS file to enhance visibility on older displays: - Darker border colors for all form controls (#555 instead of light grays) - Enhanced contrast for inputs, selects, textareas - Darker card borders (#999) - Darker table and modal borders - Better visibility for buttons, dropdowns, alerts - Updated Select2, jQuery UI, and DataTables borders Files changed: - public/assets/css/custom-theme-dark-borders.css (NEW) * Comprehensive dark border overrides with !important flags * Covers all Bootstrap and custom components - app/Views/welcome_message.php * Included custom-theme-dark-borders.css after main style.css - app/Views/auth/login.php * Included custom-theme-dark-borders.css for login page - app/Views/storestock/_niceadmin_theme.php * Updated inline CSS border colors from light to dark * Changed #ebeef4, #dfe3ea, #e9edf5 to #555, #666, #888, #999 Theme now provides better contrast for old LED monitors with darker, more visible borders across all UI components. --- app/Views/auth/login.php | 1 + app/Views/storestock/_niceadmin_theme.php | 18 +- app/Views/welcome_message.php | 1 + .../assets/css/custom-theme-dark-borders.css | 327 ++++++++++++++++++ 4 files changed, 338 insertions(+), 9 deletions(-) create mode 100644 public/assets/css/custom-theme-dark-borders.css diff --git a/app/Views/auth/login.php b/app/Views/auth/login.php index f52497d..d89ced5 100644 --- a/app/Views/auth/login.php +++ b/app/Views/auth/login.php @@ -26,6 +26,7 @@ + diff --git a/app/Views/storestock/_niceadmin_theme.php b/app/Views/storestock/_niceadmin_theme.php index a80f6ed..73f94fa 100644 --- a/app/Views/storestock/_niceadmin_theme.php +++ b/app/Views/storestock/_niceadmin_theme.php @@ -14,7 +14,7 @@ .storestock-ui .box { background: #fff; - border: 1px solid #ebeef4; + border: 1px solid #999; border-radius: 12px; box-shadow: 0 0 24px rgba(1, 41, 112, 0.06); margin-bottom: 1rem; @@ -23,7 +23,7 @@ .storestock-ui .box-header, .storestock-ui .box-footer { padding: .85rem 1rem; - border-color: #ebeef4; + border-color: #999; } .storestock-ui .box-body { @@ -46,7 +46,7 @@ min-height: 94px; margin: .35rem; padding: .75rem; - border: 1px solid #ebeef4; + border: 1px solid #999; border-radius: 10px; background: #fff; color: #012970; @@ -88,12 +88,12 @@ .storestock-ui .form-control, .storestock-ui .input-sm { border-radius: 8px; - border-color: #dfe3ea; + border-color: #555; } .storestock-ui .input-group-addon { background: #f6f9ff; - border: 1px solid #dfe3ea; + border: 1px solid #555; border-right: 0; border-radius: 8px 0 0 8px; color: #4154f1; @@ -120,18 +120,18 @@ .storestock-ui .bg-gray { background: #f6f9ff; color: #012970; - border-bottom: 1px solid #ebeef4; + border-bottom: 1px solid #999; } .storestock-ui .modal-content { border-radius: 12px; - border: 1px solid #ebeef4; + border: 1px solid #666; box-shadow: 0 0 30px rgba(1, 41, 112, 0.15); } .storestock-ui .modal-header { background: #f6f9ff; - border-bottom: 1px solid #ebeef4; + border-bottom: 1px solid #888; } .storestock-ui .modal-title { @@ -140,7 +140,7 @@ } .storestock-ui .module-hero { - border: 1px solid #e9edf5; + border: 1px solid #999; background: linear-gradient(135deg, #f6f9ff 0%, #ffffff 85%); border-radius: 14px; padding: 1rem 1.1rem; diff --git a/app/Views/welcome_message.php b/app/Views/welcome_message.php index c2dea27..346623f 100644 --- a/app/Views/welcome_message.php +++ b/app/Views/welcome_message.php @@ -30,6 +30,7 @@ + diff --git a/public/assets/css/custom-theme-dark-borders.css b/public/assets/css/custom-theme-dark-borders.css new file mode 100644 index 0000000..3a82f69 --- /dev/null +++ b/public/assets/css/custom-theme-dark-borders.css @@ -0,0 +1,327 @@ +/** + * Custom Theme: Dark Borders for Old LED Screens + * Increases contrast and border visibility + * Updated: + */ + +/* ======================================== + Form Controls - Darker Borders + ======================================== */ + +/* Default form controls */ +.form-control, +.form-select, +textarea.form-control, +input[type="text"], +input[type="password"], +input[type="email"], +input[type="number"], +input[type="tel"], +input[type="url"], +input[type="search"], +input[type="date"], +input[type="datetime-local"], +input[type="time"], +select.form-control, +select.form-select { + border: 1px solid #555 !important; + border-color: #555 !important; +} + +/* Form controls on focus */ +.form-control:focus, +.form-select:focus, +textarea.form-control:focus, +input:focus, +select:focus { + border-color: #333 !important; + box-shadow: 0 0 0 0.15rem rgba(85, 85, 85, 0.25) !important; +} + +/* Disabled form controls */ +.form-control:disabled, +.form-select:disabled, +input:disabled, +select:disabled, +textarea:disabled { + border-color: #666 !important; + background-color: #f5f5f5 !important; +} + +/* ======================================== + Cards - Darker Borders + ======================================== */ + +.card { + border: 1px solid #999 !important; +} + +.card-header, +.card-footer { + border-color: #999 !important; +} + +/* ======================================== + Tables - Darker Borders + ======================================== */ + +.table { + border-color: #999 !important; +} + +.table > :not(caption) > * > * { + border-bottom-color: #aaa !important; +} + +.table > thead > tr > th { + border-bottom: 2px solid #777 !important; +} + +/* DataTables specific */ +.dataTables_wrapper table.dataTable, +.dataTables_wrapper table.dataTable thead th, +.dataTables_wrapper table.dataTable tbody td { + border-color: #999 !important; +} + +/* ======================================== + Buttons - Darker Borders + ======================================== */ + +.btn { + border-width: 1px !important; +} + +.btn-outline-primary, +.btn-outline-secondary, +.btn-outline-success, +.btn-outline-danger, +.btn-outline-warning, +.btn-outline-info { + border-width: 2px !important; +} + +/* ======================================== + Modals - Darker Borders + ======================================== */ + +.modal-content { + border: 1px solid #666 !important; +} + +.modal-header, +.modal-footer { + border-color: #888 !important; +} + +/* ======================================== + Dropdowns - Darker Borders + ======================================== */ + +.dropdown-menu { + border: 1px solid #666 !important; +} + +.dropdown-divider { + border-color: #888 !important; +} + +/* ======================================== + Alerts - Darker Borders + ======================================== */ + +.alert { + border-width: 1px !important; +} + +.alert-primary { + border-color: #4154f1 !important; +} + +.alert-secondary { + border-color: #6c757d !important; +} + +.alert-success { + border-color: #198754 !important; +} + +.alert-danger { + border-color: #dc3545 !important; +} + +.alert-warning { + border-color: #ffc107 !important; +} + +.alert-info { + border-color: #0dcaf0 !important; +} + +/* ======================================== + Nav Tabs - Darker Borders + ======================================== */ + +.nav-tabs { + border-bottom-color: #777 !important; +} + +.nav-tabs .nav-link { + border-color: #999 !important; +} + +.nav-tabs .nav-link.active { + border-color: #777 #777 #fff !important; +} + +/* ======================================== + Pagination - Darker Borders + ======================================== */ + +.pagination .page-link { + border-color: #777 !important; +} + +.pagination .page-item.active .page-link { + border-color: #4154f1 !important; +} + +/* ======================================== + Input Groups - Darker Borders + ======================================== */ + +.input-group-text { + border: 1px solid #555 !important; +} + +.input-group > .form-control, +.input-group > .form-select, +.input-group > .input-group-text { + border-color: #555 !important; +} + +/* ======================================== + Select2 - Darker Borders + ======================================== */ + +.select2-container--bootstrap4 .select2-selection { + border: 1px solid #555 !important; +} + +.select2-container--bootstrap4.select2-container--focus .select2-selection { + border-color: #333 !important; + box-shadow: 0 0 0 0.15rem rgba(85, 85, 85, 0.25) !important; +} + +.select2-dropdown { + border: 1px solid #666 !important; +} + +/* ======================================== + jQuery UI - Darker Borders + ======================================== */ + +.ui-widget, +.ui-widget-content { + border: 1px solid #666 !important; +} + +.ui-widget-header { + border: 1px solid #555 !important; +} + +.ui-state-default { + border: 1px solid #777 !important; +} + +/* ======================================== + Badge - Darker Borders + ======================================== */ + +.badge { + border: 1px solid rgba(0, 0, 0, 0.2) !important; +} + +/* ======================================== + Breadcrumb - Darker Borders + ======================================== */ + +.breadcrumb { + border: 1px solid #999 !important; +} + +/* ======================================== + List Group - Darker Borders + ======================================== */ + +.list-group-item { + border-color: #999 !important; +} + +/* ======================================== + Sidebar & Header - Darker Borders + ======================================== */ + +.sidebar { + border-right: 1px solid #777 !important; +} + +.header { + border-bottom: 1px solid #888 !important; +} + +/* ======================================== + Search Boxes - Darker Borders + ======================================== */ + +.search-bar input { + border: 1px solid #555 !important; +} + +.search-bar input:focus { + border-color: #333 !important; +} + +/* ======================================== + Box/Panel Components - Darker Borders + ======================================== */ + +.box, +.panel { + border: 1px solid #999 !important; +} + +.box-header, +.box-footer, +.panel-heading, +.panel-footer { + border-color: #999 !important; +} + +/* ======================================== + HR Dividers - Darker + ======================================== */ + +hr { + border-color: #777 !important; + opacity: 1 !important; +} + +/* ======================================== + Profile & User Cards - Darker Borders + ======================================== */ + +.profile-card, +.user-card { + border: 1px solid #999 !important; +} + +/* ======================================== + Dashboard Cards - Enhanced Visibility + ======================================== */ + +.dashboard .card, +.info-card { + border: 1px solid #999 !important; + box-shadow: 0 0 24px rgba(1, 41, 112, 0.12) !important; +}