DevSoftTech Server
718e01156d
User feedback: Form controls with dark borders (#555) work fine, but card/modal/container borders looked bad with dark colors. Reverted to original light borders: - Cards, card-header, card-footer: #ebeef4 (light gray) - Modals: #ebeef4 (light gray) - Dropdowns: #ebeef4 (light gray) - Breadcrumb: #ebeef4 (light gray) - List groups: #ebeef4 (light gray) - Box/Panel components: #ebeef4 (light gray) - Profile/User cards: #ebeef4 (light gray) - Dashboard cards: #ebeef4 (light gray) - Sidebar/Header: #ebeef4 (light gray) - Tables: #ddd (moderate gray, slightly darker than cards) KEPT dark borders (user says these work fine): - Form controls (input, select, textarea): #555 (dark gray) - Form control focus: #333 (very dark) - Input groups: #555 (dark gray) - Select2: #555 (dark gray) - jQuery UI: #666 (dark gray) Final result: Dark, highly visible borders only on interactive form controls. Subtle, professional light borders on structural containers.
328 lines
6.8 KiB
CSS
328 lines
6.8 KiB
CSS
/**
|
|
* Custom Theme: Dark Borders for Old LED Screens
|
|
* Increases contrast and border visibility
|
|
* Updated: <?= date('Y-m-d') ?>
|
|
*/
|
|
|
|
/* ========================================
|
|
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 - Keep Original Light Borders
|
|
======================================== */
|
|
|
|
.card {
|
|
border: 1px solid #ebeef4 !important;
|
|
}
|
|
|
|
.card-header,
|
|
.card-footer {
|
|
border-color: #ebeef4 !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Tables - Keep Moderate Borders
|
|
======================================== */
|
|
|
|
.table {
|
|
border-color: #ddd !important;
|
|
}
|
|
|
|
.table > :not(caption) > * > * {
|
|
border-bottom-color: #ddd !important;
|
|
}
|
|
|
|
.table > thead > tr > th {
|
|
border-bottom: 2px solid #999 !important;
|
|
}
|
|
|
|
/* DataTables specific */
|
|
.dataTables_wrapper table.dataTable,
|
|
.dataTables_wrapper table.dataTable thead th,
|
|
.dataTables_wrapper table.dataTable tbody td {
|
|
border-color: #ddd !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 - Keep Original Light Borders
|
|
======================================== */
|
|
|
|
.modal-content {
|
|
border: 1px solid #ebeef4 !important;
|
|
}
|
|
|
|
.modal-header,
|
|
.modal-footer {
|
|
border-color: #ebeef4 !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Dropdowns - Keep Original Light Borders
|
|
======================================== */
|
|
|
|
.dropdown-menu {
|
|
border: 1px solid #ebeef4 !important;
|
|
}
|
|
|
|
.dropdown-divider {
|
|
border-color: #ddd !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 - Keep Original Light Borders
|
|
======================================== */
|
|
|
|
.breadcrumb {
|
|
border: 1px solid #ebeef4 !important;
|
|
}
|
|
|
|
/* ========================================
|
|
List Group - Keep Original Light Borders
|
|
======================================== */
|
|
|
|
.list-group-item {
|
|
border-color: #ebeef4 !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Sidebar & Header - Keep Original Light Borders
|
|
======================================== */
|
|
|
|
.sidebar {
|
|
border-right: 1px solid #ebeef4 !important;
|
|
}
|
|
|
|
.header {
|
|
border-bottom: 1px solid #ebeef4 !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Search Boxes - Darker Borders
|
|
======================================== */
|
|
|
|
.search-bar input {
|
|
border: 1px solid #555 !important;
|
|
}
|
|
|
|
.search-bar input:focus {
|
|
border-color: #333 !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Box/Panel Components - Keep Original Light Borders
|
|
======================================== */
|
|
|
|
.box,
|
|
.panel {
|
|
border: 1px solid #ebeef4 !important;
|
|
}
|
|
|
|
.box-header,
|
|
.box-footer,
|
|
.panel-heading,
|
|
.panel-footer {
|
|
border-color: #ebeef4 !important;
|
|
}
|
|
|
|
/* ========================================
|
|
HR Dividers - Darker
|
|
======================================== */
|
|
|
|
hr {
|
|
border-color: #777 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Profile & User Cards - Keep Original Light Borders
|
|
======================================== */
|
|
|
|
.profile-card,
|
|
.user-card {
|
|
border: 1px solid #ebeef4 !important;
|
|
}
|
|
|
|
/* ========================================
|
|
Dashboard Cards - Keep Original Light Borders
|
|
======================================== */
|
|
|
|
.dashboard .card,
|
|
.info-card {
|
|
border: 1px solid #ebeef4 !important;
|
|
box-shadow: 0 0 24px rgba(1, 41, 112, 0.12) !important;
|
|
}
|