main page
This commit is contained in:
372
src/styles/global.css
Normal file
372
src/styles/global.css
Normal file
@@ -0,0 +1,372 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Color Classes */
|
||||
.bg-dark-grey { background-color: #616161; }
|
||||
.bg-light-grey { background-color: #f1f1f1; }
|
||||
.bg-white { background-color: #fff; }
|
||||
.bg-black { background-color: #000; }
|
||||
.bg-green { background-color: #4CAF50; }
|
||||
.bg-teal { background-color: #009688; }
|
||||
.bg-blue { background-color: #2196F3; }
|
||||
.bg-blue-grey { background-color: #607D8B; }
|
||||
.bg-red { background-color: #f44336; }
|
||||
.bg-yellow { background-color: #ffeb3b; }
|
||||
.bg-amber { background-color: #ffc107; }
|
||||
.bg-orange { background-color: #ff9800; }
|
||||
|
||||
.text-white { color: #fff; }
|
||||
.text-black { color: #000; }
|
||||
.text-grey { color: #9e9e9e; }
|
||||
.text-green { color: #4CAF50; }
|
||||
.text-red { color: #f44336; }
|
||||
|
||||
/* Layout */
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-top: 64px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000;
|
||||
z-index: 199;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 12px 16px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 16px 24px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: #4CAF50;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background: #616161;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-dark:hover {
|
||||
background: #4CAF50;
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
background: #4CAF50;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-teal {
|
||||
background: #009688;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.table-hover tbody tr:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 12px 16px;
|
||||
background: #616161;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #4CAF50;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
background: #616161;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.col {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.col-6 { width: 50%; }
|
||||
.col-12 { width: 100%; }
|
||||
|
||||
/* Utilities */
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
.text-small { font-size: 12px; }
|
||||
.text-large { font-size: 18px; }
|
||||
.text-xlarge { font-size: 24px; }
|
||||
|
||||
.mt-1 { margin-top: 8px; }
|
||||
.mt-2 { margin-top: 16px; }
|
||||
.mt-3 { margin-top: 24px; }
|
||||
.mb-1 { margin-bottom: 8px; }
|
||||
.mb-2 { margin-bottom: 16px; }
|
||||
.p-1 { padding: 8px; }
|
||||
.p-2 { padding: 16px; }
|
||||
|
||||
.hidden { display: none; }
|
||||
|
||||
/* Ticket Row */
|
||||
.ticket-row {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.ticket-id {
|
||||
background: #616161;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.ticket-time {
|
||||
font-size: 11px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.ticket-info {
|
||||
background: #f1f1f1;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Status Colors */
|
||||
.status-open { background: #4CAF50; color: #fff; }
|
||||
.status-occupied { background: #607D8B; color: #fff; }
|
||||
.status-assigned { background: #009688; color: #fff; }
|
||||
.status-awaiting { background: #ff9800; color: #fff; }
|
||||
.status-closed { background: #9e9e9e; color: #fff; }
|
||||
|
||||
/* Priority Colors */
|
||||
.priority-none { background: #2196F3; color: #fff; }
|
||||
.priority-low { background: #4CAF50; color: #fff; }
|
||||
.priority-medium { background: #ffc107; color: #000; }
|
||||
.priority-high { background: #ff9800; color: #fff; }
|
||||
.priority-critical { background: #f44336; color: #fff; }
|
||||
|
||||
/* Dropdown */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: #616161;
|
||||
min-width: 160px;
|
||||
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 8px 16px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: #4CAF50;
|
||||
}
|
||||
|
||||
/* Modal/Overlay */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.9);
|
||||
z-index: 200;
|
||||
overflow-y: auto;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.overlay-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 45px;
|
||||
font-size: 48px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Slider */
|
||||
.slider-container {
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: #d3d3d3;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.slider:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 10px;
|
||||
height: 25px;
|
||||
background: #4CAF50;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* File Upload */
|
||||
.drop-zone {
|
||||
background: #616161;
|
||||
border: 5px dashed #999;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drop-zone:hover {
|
||||
border-color: #4CAF50;
|
||||
}
|
||||
|
||||
/* Spinner */
|
||||
.spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.col-6 { width: 100%; }
|
||||
.navbar-nav { display: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user