init tools repo
This commit is contained in:
308
asf-cloud-server/TBM_devbench/public/css/style.css
Normal file
308
asf-cloud-server/TBM_devbench/public/css/style.css
Normal file
@@ -0,0 +1,308 @@
|
||||
/* Custom styles for DevBench Manager */
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: bold;
|
||||
color: #ffffff !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.status-creating {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.log-output {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.connection-info {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.connection-info code {
|
||||
background-color: #e9ecef;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.brand-colors {
|
||||
background: linear-gradient(135deg, #f39c12 0%, #1a365d 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* NABD Solutions brand colors */
|
||||
.nabd-orange {
|
||||
color: #f39c12;
|
||||
}
|
||||
|
||||
.nabd-blue {
|
||||
color: #1a365d;
|
||||
}
|
||||
|
||||
.bg-nabd-gradient {
|
||||
background: linear-gradient(135deg, #f39c12 0%, #1a365d 100%);
|
||||
}
|
||||
|
||||
/* Dark blue theme overrides */
|
||||
.bg-primary {
|
||||
background-color: #1a365d !important;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #1a365d;
|
||||
border-color: #1a365d;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #2c5282;
|
||||
border-color: #2c5282;
|
||||
}
|
||||
|
||||
.btn-primary:focus {
|
||||
background-color: #2c5282;
|
||||
border-color: #2c5282;
|
||||
box-shadow: 0 0 0 0.2rem rgba(26, 54, 93, 0.25);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
color: #1a365d;
|
||||
border-color: #1a365d;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background-color: #1a365d;
|
||||
border-color: #1a365d;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #1a365d !important;
|
||||
}
|
||||
|
||||
.card-header.bg-primary {
|
||||
background-color: #1a365d !important;
|
||||
}
|
||||
|
||||
/* Password info styling */
|
||||
.connection-info small {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
padding: 3px 8px;
|
||||
background-color: #e8f4fd;
|
||||
border-radius: 3px;
|
||||
border-left: 3px solid #1a365d;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
DARK THEME
|
||||
============================================ */
|
||||
|
||||
/* Dark theme toggle button */
|
||||
.theme-toggle {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 1000;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #f39c12 0%, #1a365d 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Dark theme styles */
|
||||
body.dark-theme {
|
||||
background-color: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
body.dark-theme .navbar {
|
||||
background-color: #0d1b2a !important;
|
||||
}
|
||||
|
||||
body.dark-theme .card {
|
||||
background-color: #2d2d2d;
|
||||
border-color: #404040;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
body.dark-theme .card-header {
|
||||
background-color: #1a365d;
|
||||
border-color: #404040;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body.dark-theme .card-header.bg-info {
|
||||
background-color: #0c5460 !important;
|
||||
}
|
||||
|
||||
body.dark-theme .card-header.bg-warning {
|
||||
background-color: #856404 !important;
|
||||
}
|
||||
|
||||
body.dark-theme .table {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
body.dark-theme .table-striped tbody tr:nth-of-type(odd) {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
body.dark-theme .table-striped tbody tr:nth-of-type(even) {
|
||||
background-color: #2d2d2d;
|
||||
}
|
||||
|
||||
body.dark-theme .modal-content {
|
||||
background-color: #2d2d2d;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
body.dark-theme .modal-header {
|
||||
border-bottom-color: #404040;
|
||||
}
|
||||
|
||||
body.dark-theme .modal-footer {
|
||||
border-top-color: #404040;
|
||||
}
|
||||
|
||||
body.dark-theme .form-control {
|
||||
background-color: #1a1a1a;
|
||||
border-color: #404040;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
body.dark-theme .form-control:focus {
|
||||
background-color: #1a1a1a;
|
||||
border-color: #1a365d;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
body.dark-theme .connection-info {
|
||||
background-color: #1a1a1a;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
body.dark-theme .connection-info code {
|
||||
background-color: #0d1b2a;
|
||||
color: #f39c12;
|
||||
}
|
||||
|
||||
body.dark-theme .alert-info {
|
||||
background-color: #0c5460;
|
||||
border-color: #0c5460;
|
||||
color: #d1ecf1;
|
||||
}
|
||||
|
||||
body.dark-theme .alert-info .alert-link {
|
||||
color: #bee5eb;
|
||||
}
|
||||
|
||||
body.dark-theme .text-muted {
|
||||
color: #999999 !important;
|
||||
}
|
||||
|
||||
body.dark-theme .btn-secondary {
|
||||
background-color: #404040;
|
||||
border-color: #404040;
|
||||
}
|
||||
|
||||
body.dark-theme .btn-secondary:hover {
|
||||
background-color: #555555;
|
||||
border-color: #555555;
|
||||
}
|
||||
|
||||
body.dark-theme .btn-outline-primary {
|
||||
color: #f39c12;
|
||||
border-color: #f39c12;
|
||||
}
|
||||
|
||||
body.dark-theme .btn-outline-primary:hover {
|
||||
background-color: #f39c12;
|
||||
border-color: #f39c12;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
body.dark-theme .login-card {
|
||||
background-color: #2d2d2d;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
body.dark-theme .form-text {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
body.dark-theme .connection-info small {
|
||||
background-color: #0d1b2a;
|
||||
border-left-color: #f39c12;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
body.dark-theme .help-steps code {
|
||||
background-color: #0d1b2a;
|
||||
color: #f39c12;
|
||||
}
|
||||
|
||||
body.dark-theme .help-steps strong {
|
||||
color: #f39c12;
|
||||
}
|
||||
|
||||
body.dark-theme pre {
|
||||
background-color: #0d1b2a !important;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Smooth transitions for theme switching */
|
||||
body,
|
||||
.card,
|
||||
.modal-content,
|
||||
.form-control,
|
||||
.connection-info,
|
||||
.table {
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
Reference in New Issue
Block a user