Initial commit
This commit is contained in:
@@ -0,0 +1,993 @@
|
||||
/**
|
||||
* Appointment Calendar Styles
|
||||
* Supports week and month views with dark mode
|
||||
*/
|
||||
|
||||
/* ===== Day View ===== */
|
||||
.calendar-day-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.calendar-day-view-header {
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.calendar-day-header-single {
|
||||
background: var(--bs-body-bg);
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 2px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.calendar-day-header-single.today {
|
||||
background: rgba(13, 110, 253, 0.08);
|
||||
border-bottom-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.calendar-day-header-single .day-header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.calendar-day-header-single .day-name-long {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.calendar-day-header-single .day-number-large {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--bs-body-color);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.calendar-day-header-single.today .day-number-large {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.calendar-day-header-single .day-month-year {
|
||||
font-size: 1rem;
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.calendar-day-header-single .day-event-count {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.calendar-day-header-single .day-header-events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.calendar-day-grid {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bs-border-color);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.calendar-day-time-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(50px, 70px) 1fr;
|
||||
gap: 1px;
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.calendar-day-time-row.has-events {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.calendar-day-time-cell {
|
||||
background: var(--bs-body-bg);
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.calendar-day-time-cell:hover {
|
||||
background: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
/* Day view event cards — wider with more detail */
|
||||
.calendar-event-day {
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.calendar-event-day .event-location {
|
||||
font-size: 0.688rem;
|
||||
opacity: 0.85;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
/* Clickable day numbers in month and week views */
|
||||
.day-drill {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-month-cell .cell-date.day-drill:hover {
|
||||
color: var(--bs-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.calendar-day-header .day-number.day-drill:hover {
|
||||
color: var(--bs-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ===== Week View ===== */
|
||||
.calendar-week-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 600px;
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Smooth container transitions */
|
||||
#calendarContainer {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.calendar-week-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(50px, 70px) repeat(7, minmax(0, 1fr));
|
||||
gap: 1px;
|
||||
background: var(--bs-border-color);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-bottom: none;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
/* Spacer in week header that aligns with the time-label column below */
|
||||
.calendar-week-header-spacer {
|
||||
background: var(--bs-light);
|
||||
border-bottom: 2px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.calendar-day-header {
|
||||
background: var(--bs-body-bg);
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.calendar-day-header.today {
|
||||
background: rgba(13, 110, 253, 0.1);
|
||||
border-bottom-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.calendar-day-header .day-header-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.calendar-day-header .day-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-secondary);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.calendar-day-header .day-number {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--bs-body-color);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.calendar-day-header.today .day-number {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.calendar-day-header .day-header-events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calendar-week-grid {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bs-border-color);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.calendar-time-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(50px, 70px) repeat(7, minmax(0, 1fr));
|
||||
gap: 1px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.time-label {
|
||||
background: var(--bs-light);
|
||||
padding: 0.5rem 0.25rem;
|
||||
text-align: right;
|
||||
font-size: 0.75rem;
|
||||
color: var(--bs-secondary);
|
||||
font-weight: 500;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calendar-time-cell {
|
||||
background: var(--bs-body-bg);
|
||||
padding: 0.25rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.calendar-time-cell:hover {
|
||||
background: var(--bs-light);
|
||||
}
|
||||
|
||||
/* ===== Month View ===== */
|
||||
.calendar-month-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calendar-month-header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 1px;
|
||||
background: var(--bs-border-color);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-bottom: none;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.calendar-day-name {
|
||||
background: var(--bs-light);
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: var(--bs-secondary);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.calendar-month-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
background: var(--bs-border-color);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.calendar-week-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.calendar-month-cell {
|
||||
background: var(--bs-body-bg);
|
||||
min-height: 100px;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calendar-month-cell.other-month {
|
||||
background: var(--bs-light);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.calendar-month-cell.other-month .cell-date {
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.calendar-month-cell.today {
|
||||
background: rgba(13, 110, 253, 0.05);
|
||||
border: 2px solid var(--bs-primary);
|
||||
}
|
||||
|
||||
.calendar-month-cell:hover {
|
||||
background: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.calendar-month-cell .cell-date {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: var(--bs-body-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.calendar-month-cell.today .cell-date {
|
||||
color: var(--bs-primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.cell-events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
/* ===== Event Cards ===== */
|
||||
.calendar-event {
|
||||
background: var(--bs-primary);
|
||||
color: white;
|
||||
padding: 0.375rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.2;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.calendar-event:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* All-day event modifier - black border */
|
||||
.all-day-event {
|
||||
border: 2px solid #000;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .all-day-event {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* Week view header events (compact style) */
|
||||
.calendar-event-header {
|
||||
background: var(--bs-primary);
|
||||
color: white;
|
||||
padding: 0.25rem 0.375rem;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 0.688rem;
|
||||
line-height: 1.2;
|
||||
transition: transform 0.2s;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-event-header:hover {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.calendar-event-header .event-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-event .event-time {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.calendar-event .event-title {
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.calendar-event .event-customer {
|
||||
font-size: 0.688rem;
|
||||
opacity: 0.9;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Event color classes - Appointments (all 20 colors) */
|
||||
.calendar-event-purple,
|
||||
.calendar-event-month.calendar-event-purple,
|
||||
.calendar-event-header.calendar-event-purple {
|
||||
background: #6f42c1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-green,
|
||||
.calendar-event-month.calendar-event-green,
|
||||
.calendar-event-header.calendar-event-green {
|
||||
background: #198754;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-blue,
|
||||
.calendar-event-month.calendar-event-blue,
|
||||
.calendar-event-header.calendar-event-blue {
|
||||
background: #0d6efd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-orange,
|
||||
.calendar-event-month.calendar-event-orange,
|
||||
.calendar-event-header.calendar-event-orange {
|
||||
background: #fd7e14;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-red,
|
||||
.calendar-event-month.calendar-event-red,
|
||||
.calendar-event-header.calendar-event-red {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-yellow,
|
||||
.calendar-event-month.calendar-event-yellow,
|
||||
.calendar-event-header.calendar-event-yellow {
|
||||
background: #ffc107;
|
||||
color: #000 !important; /* Dark text for better contrast on yellow */
|
||||
}
|
||||
|
||||
.calendar-event-pink,
|
||||
.calendar-event-month.calendar-event-pink,
|
||||
.calendar-event-header.calendar-event-pink {
|
||||
background: #d63384;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-cyan,
|
||||
.calendar-event-month.calendar-event-cyan,
|
||||
.calendar-event-header.calendar-event-cyan {
|
||||
background: #0dcaf0;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.calendar-event-teal,
|
||||
.calendar-event-month.calendar-event-teal,
|
||||
.calendar-event-header.calendar-event-teal {
|
||||
background: #20c997;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-indigo,
|
||||
.calendar-event-month.calendar-event-indigo,
|
||||
.calendar-event-header.calendar-event-indigo {
|
||||
background: #6610f2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-lime,
|
||||
.calendar-event-month.calendar-event-lime,
|
||||
.calendar-event-header.calendar-event-lime {
|
||||
background: #84cc16;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.calendar-event-brown,
|
||||
.calendar-event-month.calendar-event-brown,
|
||||
.calendar-event-header.calendar-event-brown {
|
||||
background: #795548;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-gray,
|
||||
.calendar-event-month.calendar-event-gray,
|
||||
.calendar-event-header.calendar-event-gray {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Bootstrap utility color variants */
|
||||
.calendar-event-success,
|
||||
.calendar-event-month.calendar-event-success,
|
||||
.calendar-event-header.calendar-event-success {
|
||||
background: #198754;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-danger,
|
||||
.calendar-event-month.calendar-event-danger,
|
||||
.calendar-event-header.calendar-event-danger {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-warning,
|
||||
.calendar-event-month.calendar-event-warning,
|
||||
.calendar-event-header.calendar-event-warning {
|
||||
background: #ffc107;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.calendar-event-info,
|
||||
.calendar-event-month.calendar-event-info,
|
||||
.calendar-event-header.calendar-event-info {
|
||||
background: #0dcaf0;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.calendar-event-primary,
|
||||
.calendar-event-month.calendar-event-primary,
|
||||
.calendar-event-header.calendar-event-primary {
|
||||
background: #0d6efd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-secondary,
|
||||
.calendar-event-month.calendar-event-secondary,
|
||||
.calendar-event-header.calendar-event-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar-event-dark,
|
||||
.calendar-event-month.calendar-event-dark,
|
||||
.calendar-event-header.calendar-event-dark {
|
||||
background: #212529;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Month view event compact style */
|
||||
.calendar-event-month {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.375rem;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 2px;
|
||||
cursor: pointer;
|
||||
font-size: 0.688rem;
|
||||
color: white;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.calendar-event-month:hover {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.calendar-event-month .event-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.calendar-event-month .event-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.event-more {
|
||||
font-size: 0.688rem;
|
||||
color: var(--bs-secondary);
|
||||
font-weight: 500;
|
||||
padding: 0.125rem 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.event-more:hover {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
/* ===== Responsive Design ===== */
|
||||
|
||||
/* Large Desktop - Show everything with plenty of space */
|
||||
@media (min-width: 1400px) {
|
||||
.calendar-month-cell {
|
||||
min-height: 130px;
|
||||
}
|
||||
|
||||
.calendar-time-cell {
|
||||
min-height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Standard Desktop - Default styles work well */
|
||||
@media (min-width: 992px) and (max-width: 1399px) {
|
||||
.calendar-month-cell {
|
||||
min-height: 110px;
|
||||
}
|
||||
|
||||
.calendar-day-header .day-number {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet - Start compacting */
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.calendar-month-cell {
|
||||
min-height: 90px;
|
||||
}
|
||||
|
||||
.calendar-time-cell {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.calendar-day-header .day-number {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.calendar-day-header .day-name {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.calendar-event {
|
||||
font-size: 0.688rem;
|
||||
padding: 0.25rem 0.375rem;
|
||||
}
|
||||
|
||||
.calendar-event .event-customer {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
.time-label {
|
||||
font-size: 0.688rem;
|
||||
padding: 0.375rem 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile - Compact view with horizontal scroll */
|
||||
@media (max-width: 767px) {
|
||||
.calendar-week-view,
|
||||
.calendar-month-view {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.calendar-week-header,
|
||||
.calendar-month-header,
|
||||
.calendar-week-row {
|
||||
min-width: 650px;
|
||||
}
|
||||
|
||||
.calendar-time-row {
|
||||
min-width: 650px;
|
||||
}
|
||||
|
||||
.calendar-week-header {
|
||||
grid-template-columns: 45px repeat(7, minmax(80px, 1fr));
|
||||
}
|
||||
|
||||
.calendar-time-row {
|
||||
grid-template-columns: 45px repeat(7, minmax(80px, 1fr));
|
||||
}
|
||||
|
||||
.calendar-month-cell {
|
||||
min-height: 75px;
|
||||
padding: 0.375rem;
|
||||
}
|
||||
|
||||
.calendar-time-cell {
|
||||
min-height: 45px;
|
||||
}
|
||||
|
||||
.calendar-day-header {
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
|
||||
.calendar-day-header .day-number {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.calendar-day-header .day-name {
|
||||
font-size: 0.688rem;
|
||||
}
|
||||
|
||||
.calendar-event {
|
||||
font-size: 0.625rem;
|
||||
padding: 0.25rem 0.375rem;
|
||||
}
|
||||
|
||||
.calendar-event .event-customer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.calendar-event-header {
|
||||
font-size: 0.625rem;
|
||||
padding: 0.1875rem 0.25rem;
|
||||
}
|
||||
|
||||
.time-label {
|
||||
font-size: 0.625rem;
|
||||
padding: 0.25rem 0.125rem;
|
||||
}
|
||||
|
||||
.calendar-month-cell .cell-date {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Dark Mode Support ===== */
|
||||
[data-bs-theme="dark"] .calendar-day-header-single.today {
|
||||
background: rgba(13, 110, 253, 0.15);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .calendar-day-time-cell {
|
||||
background: var(--bs-body-bg);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .calendar-day-header.today {
|
||||
background: rgba(13, 110, 253, 0.2);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .calendar-month-cell.today {
|
||||
background: rgba(13, 110, 253, 0.1);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .calendar-month-cell.other-month {
|
||||
background: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .time-label {
|
||||
background: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .calendar-week-header-spacer {
|
||||
background: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .calendar-day-name {
|
||||
background: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
/* ===== Loading State ===== */
|
||||
#calendarContainer .spinner-border {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
/* ===== Print Styles ===== */
|
||||
@media print {
|
||||
.calendar-time-cell:hover,
|
||||
.calendar-month-cell:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.calendar-event:hover,
|
||||
.calendar-event-month:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Schedule Sidebar ===== */
|
||||
.schedule-sidebar {
|
||||
width: 210px;
|
||||
flex-shrink: 0;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.schedule-sidebar.sidebar-collapsed {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.schedule-sidebar-header {
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.schedule-sidebar-body {
|
||||
max-height: calc(100vh - 280px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Sidebar job cards */
|
||||
.sj-card {
|
||||
background: var(--bs-body-bg);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.4rem 0.5rem;
|
||||
margin-bottom: 0.4rem;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: box-shadow 0.15s, opacity 0.15s;
|
||||
}
|
||||
|
||||
.sj-card:hover {
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
.sj-card.sj-dragging {
|
||||
opacity: 0.5;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.sj-number {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.sj-customer {
|
||||
font-size: 0.72rem;
|
||||
color: var(--bs-secondary-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sj-status {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.sj-due {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
/* Sidebar drop zone highlight */
|
||||
.sidebar-drag-over .card {
|
||||
border-color: var(--bs-primary) !important;
|
||||
box-shadow: 0 0 0 2px rgba(13,110,253,.25);
|
||||
}
|
||||
|
||||
/* ===== Drag-over highlight for calendar cells ===== */
|
||||
.calendar-drag-over {
|
||||
background: rgba(13, 110, 253, 0.08) !important;
|
||||
outline: 2px dashed var(--bs-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* ===== Dragging job event on calendar ===== */
|
||||
.event-dragging {
|
||||
opacity: 0.4;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Ensure calendar takes full remaining width */
|
||||
.min-width-0 {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ===== Collapsed sidebar — center the chevron button ===== */
|
||||
.schedule-sidebar.sidebar-collapsed .schedule-sidebar-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.schedule-sidebar.sidebar-collapsed .schedule-sidebar-header > div {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===== Job hover preview card ===== */
|
||||
.sjp-card {
|
||||
background: var(--bs-body-bg);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,.18);
|
||||
overflow: hidden;
|
||||
width: 260px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.sjp-status-bar {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #fff;
|
||||
padding: 0.2rem 0.6rem;
|
||||
}
|
||||
|
||||
.sjp-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0.6rem 0.1rem 0.5rem;
|
||||
}
|
||||
|
||||
.sjp-job {
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.sjp-customer {
|
||||
font-size: 0.78rem;
|
||||
color: var(--bs-secondary-color);
|
||||
padding: 0 0.6rem 0.3rem 0.6rem;
|
||||
}
|
||||
|
||||
.sjp-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
color: var(--bs-secondary-color);
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 0.15rem;
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
|
||||
.sjp-overdue {
|
||||
color: #dc3545 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sjp-notes {
|
||||
font-size: 0.72rem;
|
||||
color: var(--bs-secondary-color);
|
||||
font-style: italic;
|
||||
margin: 0.25rem 0.6rem;
|
||||
border-top: 1px solid var(--bs-border-color);
|
||||
padding-top: 0.25rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sjp-items {
|
||||
border-top: 1px solid var(--bs-border-color);
|
||||
margin-top: 0.3rem;
|
||||
padding: 0.3rem 0.6rem 0.4rem;
|
||||
}
|
||||
|
||||
.sjp-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--bs-body-color);
|
||||
padding: 0.05rem 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sjp-item-desc {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sjp-qty {
|
||||
font-weight: 700;
|
||||
color: var(--bs-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sjp-color-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--bs-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sjp-color {
|
||||
font-size: 0.68rem;
|
||||
color: var(--bs-secondary-color);
|
||||
font-style: italic;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sjp-more {
|
||||
color: var(--bs-secondary-color);
|
||||
font-style: italic;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
/* Catalog Pages - Dark Mode Support */
|
||||
|
||||
/* Stats Cards */
|
||||
.catalog-stats-card {
|
||||
border: none !important;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.catalog-stats-icon {
|
||||
border-radius: 50%;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.catalog-stats-icon.blue {
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.catalog-stats-icon.green {
|
||||
background-color: rgba(34, 197, 94, 0.1);
|
||||
}
|
||||
|
||||
.catalog-stats-icon.yellow {
|
||||
background-color: rgba(234, 179, 8, 0.1);
|
||||
}
|
||||
|
||||
.catalog-stats-icon.pink {
|
||||
background-color: rgba(236, 72, 153, 0.1);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .catalog-stats-icon.blue {
|
||||
background-color: rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .catalog-stats-icon.green {
|
||||
background-color: rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .catalog-stats-icon.yellow {
|
||||
background-color: rgba(234, 179, 8, 0.2);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .catalog-stats-icon.pink {
|
||||
background-color: rgba(236, 72, 153, 0.2);
|
||||
}
|
||||
|
||||
/* Text colors that adapt to theme */
|
||||
.catalog-text-muted {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .catalog-text-muted {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.catalog-text-secondary {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .catalog-text-secondary {
|
||||
color: #e9ecef;
|
||||
}
|
||||
|
||||
/* Empty state icons */
|
||||
.catalog-empty-icon {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .catalog-empty-icon {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* Category Tree Styles */
|
||||
.catalog-tree .category-header {
|
||||
background: var(--bs-light);
|
||||
border-left: 3px solid var(--bs-primary);
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .catalog-tree .category-header {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.catalog-tree .category-header:hover {
|
||||
background: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .catalog-tree .category-header:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.catalog-tree .category-header.collapsed {
|
||||
border-left-color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.catalog-tree .subcategory {
|
||||
margin-left: 20px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.catalog-tree .item-row {
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.catalog-tree .item-row:hover {
|
||||
background: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
.catalog-tree .item-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.catalog-tree .no-items {
|
||||
padding: 16px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Item row link color */
|
||||
.catalog-item-link {
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.catalog-item-link:hover {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
/* Search box styling */
|
||||
.catalog-search-icon {
|
||||
background-color: var(--bs-body-bg) !important;
|
||||
border-right: 0 !important;
|
||||
}
|
||||
|
||||
.catalog-search-input {
|
||||
border-left: 0 !important;
|
||||
border-right: 0 !important;
|
||||
}
|
||||
|
||||
.catalog-card-header {
|
||||
background-color: var(--bs-body-bg) !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
/* Price text */
|
||||
.catalog-price {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .catalog-price {
|
||||
color: #e9ecef;
|
||||
}
|
||||
|
||||
/* Alert permanent (for filter info) */
|
||||
.alert-permanent {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
/* Company Settings - Data Lookups Tab Styling */
|
||||
/* Ensures proper visibility in both light and dark themes */
|
||||
|
||||
/* Custom color classes for appointment type badges */
|
||||
.bg-purple {
|
||||
background-color: #6f42c1 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.bg-pink {
|
||||
background-color: #d63384 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.bg-cyan {
|
||||
background-color: #0dcaf0 !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.bg-teal {
|
||||
background-color: #20c997 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.bg-indigo {
|
||||
background-color: #6610f2 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.bg-lime {
|
||||
background-color: #84cc16 !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.bg-brown {
|
||||
background-color: #795548 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
background-color: #6c757d !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.bg-orange {
|
||||
background-color: #fd7e14 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.bg-yellow {
|
||||
background-color: #ffc107 !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #198754 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
background-color: #0d6efd !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.bg-red {
|
||||
background-color: #dc3545 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* ── Main settings tabs ─────────────────────────────────────────────────── */
|
||||
#settingsTabs .nav-link {
|
||||
color: var(--bs-secondary-color);
|
||||
font-weight: 500;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
|
||||
#settingsTabs .nav-link:hover:not(.active) {
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border-bottom-color: var(--bs-border-color);
|
||||
}
|
||||
|
||||
#settingsTabs .nav-link.active {
|
||||
color: var(--bs-primary);
|
||||
font-weight: 700;
|
||||
background-color: var(--bs-body-bg);
|
||||
border-bottom: 3px solid var(--bs-primary);
|
||||
}
|
||||
|
||||
/* ── PDF Templates inner tabs (card-header-tabs) ────────────────────────── */
|
||||
#pdfTemplateTabs .nav-link {
|
||||
color: var(--bs-secondary-color);
|
||||
font-weight: 500;
|
||||
transition: color 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
|
||||
#pdfTemplateTabs .nav-link:hover:not(.active) {
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
#pdfTemplateTabs .nav-link.active {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
background-color: var(--bs-primary);
|
||||
border-color: var(--bs-primary) var(--bs-primary) var(--bs-card-bg, var(--bs-body-bg));
|
||||
}
|
||||
|
||||
/* ── Sub-tab navigation pills */
|
||||
#lookupSubTabs .nav-link {
|
||||
color: var(--bs-body-color);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--bs-border-color);
|
||||
margin-right: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#lookupSubTabs .nav-link:hover {
|
||||
background-color: var(--bs-secondary-bg);
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
#lookupSubTabs .nav-link.active {
|
||||
color: #fff;
|
||||
background-color: var(--bs-primary);
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
/* Lookup tables */
|
||||
.lookup-table-wrapper {
|
||||
background-color: var(--bs-body-bg);
|
||||
}
|
||||
|
||||
.lookup-table thead {
|
||||
background-color: var(--bs-secondary-bg);
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.lookup-table tbody tr:hover {
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
/* System-defined badge */
|
||||
.badge.bg-secondary {
|
||||
background-color: var(--bs-secondary) !important;
|
||||
}
|
||||
|
||||
/* Color badge previews in table */
|
||||
.color-badge-preview {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Grip handle for drag-and-drop (future feature) */
|
||||
.bi-grip-vertical {
|
||||
color: var(--bs-secondary);
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.bi-grip-vertical:hover {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
/* Action buttons */
|
||||
.btn-action {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.lookup-loading {
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.lookup-empty-state {
|
||||
color: var(--bs-secondary);
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
/* Usage count */
|
||||
.usage-count {
|
||||
color: var(--bs-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Icon styling */
|
||||
.lookup-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Sortable.js drag-and-drop states */
|
||||
.sortable-ghost {
|
||||
opacity: 0.4;
|
||||
background-color: var(--bs-primary-bg-subtle) !important;
|
||||
}
|
||||
|
||||
.sortable-drag {
|
||||
opacity: 1;
|
||||
cursor: grabbing !important;
|
||||
}
|
||||
|
||||
.sortable-chosen {
|
||||
background-color: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
/* Make grip handle more visible on hover */
|
||||
.bi-grip-vertical {
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
tr:hover .bi-grip-vertical {
|
||||
color: var(--bs-primary) !important;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
#lookupSubTabs .nav-link {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.lookup-table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
/* Job Photos Styles */
|
||||
.photo-card {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4/3;
|
||||
background: var(--bs-secondary-bg);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.photo-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.photo-thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.photo-card:hover .photo-thumbnail {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.photo-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||||
padding: 1rem;
|
||||
color: white;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.photo-card:hover .photo-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.photo-type-badge {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.photo-card:hover .photo-type-badge {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.photo-caption {
|
||||
margin: 0.5rem 0 0 0;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.drop-zone {
|
||||
border: 2px dashed var(--bs-border-color);
|
||||
border-radius: 0.5rem;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background: var(--bs-body-bg);
|
||||
}
|
||||
|
||||
.drop-zone:hover, .drop-zone.drag-over {
|
||||
border-color: var(--bs-primary);
|
||||
background: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
#viewPhotoImage {
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#photoDetails {
|
||||
text-align: left;
|
||||
background: var(--bs-secondary-bg);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
[data-bs-theme="dark"] .photo-card {
|
||||
background: #2d3748;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .drop-zone {
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .drop-zone:hover,
|
||||
[data-bs-theme="dark"] .drop-zone.drag-over {
|
||||
border-color: var(--bs-primary);
|
||||
background: #2d3748;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.photo-overlay {
|
||||
opacity: 1;
|
||||
padding: 0.5rem;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
|
||||
}
|
||||
|
||||
.photo-type-badge {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.photo-caption {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
/* Mobile Card View Styles - Hidden on Desktop (≥992px) */
|
||||
.mobile-card-view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Compact Stats Card for Mobile */
|
||||
.mobile-stats-compact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
/* Hide desktop table view on mobile */
|
||||
.table-responsive {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Show mobile card view */
|
||||
.mobile-card-view {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
/* Hide large stats cards on mobile */
|
||||
.stats-cards-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Show compact stats card on mobile */
|
||||
.mobile-stats-compact {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mobile-stats-compact .card {
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mobile-stats-compact .stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.mobile-stats-compact .stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile-stats-compact .stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--bs-emphasis-color);
|
||||
line-height: 1;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mobile-stats-compact .stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--bs-secondary-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mobile-stats-compact .stat-icon {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Card List */
|
||||
.mobile-card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Individual Mobile Card */
|
||||
.mobile-data-card {
|
||||
background: var(--bs-body-bg);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.mobile-data-card:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Mobile Card Header */
|
||||
.mobile-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--bs-tertiary-bg);
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.mobile-card-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-card-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mobile-card-title h6 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--bs-emphasis-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mobile-card-title small {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
color: var(--bs-secondary-color);
|
||||
margin-top: 0.25rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Mobile Card Body */
|
||||
.mobile-card-body {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.mobile-card-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.mobile-card-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.mobile-card-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--bs-secondary-color);
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-card-value {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--bs-body-color);
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Mobile Card Footer */
|
||||
.mobile-card-footer {
|
||||
padding: 1rem;
|
||||
background: var(--bs-tertiary-bg);
|
||||
border-top: 1px solid var(--bs-border-color);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mobile-card-footer .btn {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
padding: 0.625rem 1rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.mobile-card-footer .btn-sm {
|
||||
min-height: 44px;
|
||||
padding: 0.625rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Badge overrides in mobile cards */
|
||||
.mobile-card-value .badge {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
/* Icon spacing in mobile cards */
|
||||
.mobile-card-value i {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
/* Empty state in mobile */
|
||||
.mobile-card-view .text-center {
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
.mobile-card-view .text-center i {
|
||||
font-size: 3rem;
|
||||
color: var(--bs-secondary-color);
|
||||
opacity: 0.5;
|
||||
}
|
||||
@@ -0,0 +1,600 @@
|
||||
/* Equipment Status Colors */
|
||||
.equipment-status-operational {
|
||||
background-color: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.equipment-status-needs-maintenance {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.equipment-status-under-maintenance {
|
||||
background-color: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.equipment-status-out-of-service {
|
||||
background-color: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.equipment-status-retired {
|
||||
background-color: #e5e7eb;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
/* Maintenance Status Colors */
|
||||
.maintenance-status-scheduled {
|
||||
background-color: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.maintenance-status-in-progress {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.maintenance-status-completed {
|
||||
background-color: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.maintenance-status-overdue {
|
||||
background-color: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.maintenance-status-cancelled {
|
||||
background-color: #e5e7eb;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
/* Maintenance Priority Colors */
|
||||
.maintenance-priority-low {
|
||||
background-color: #e5e7eb;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.maintenance-priority-normal {
|
||||
background-color: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.maintenance-priority-high {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.maintenance-priority-critical {
|
||||
background-color: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
/* File Upload Styles */
|
||||
.file-upload-zone {
|
||||
border: 2px dashed var(--bs-border-color);
|
||||
border-radius: 0.5rem;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-upload-zone:hover {
|
||||
border-color: #4f46e5;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.file-upload-zone.dragover {
|
||||
border-color: #4f46e5;
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
|
||||
/* Timeline Styles */
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 17px;
|
||||
top: 40px;
|
||||
bottom: -20px;
|
||||
width: 2px;
|
||||
background-color: var(--bs-border-color);
|
||||
}
|
||||
|
||||
.timeline-item:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Alert Permanent */
|
||||
.alert-permanent {
|
||||
/* Prevents auto-dismiss */
|
||||
}
|
||||
|
||||
/* Custom Badge Styles */
|
||||
.badge {
|
||||
font-weight: 500;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
background-color: var(--bs-body-bg);
|
||||
color: var(--bs-body-color);
|
||||
padding: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Responsive Table */
|
||||
@media (max-width: 768px) {
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Form Styles */
|
||||
.form-control,
|
||||
.form-select {
|
||||
border: 1.5px solid #9ca3af;
|
||||
}
|
||||
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
border-color: #4f46e5;
|
||||
border-width: 1.5px;
|
||||
box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.25);
|
||||
}
|
||||
|
||||
/* Equipment Card Styles */
|
||||
.equipment-card {
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.equipment-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Maintenance Badge Glow */
|
||||
.badge-glow-critical {
|
||||
animation: glow-critical 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes glow-critical {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 5px rgba(220, 38, 38, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(220, 38, 38, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Sortable Column Styles */
|
||||
th.sortable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
th.sortable:hover {
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
th.sortable a {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
margin: -0.5rem;
|
||||
}
|
||||
|
||||
th.sortable a:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
th.sortable i {
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
th.sortable:hover i {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Pagination Styles */
|
||||
.pagination {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pagination .page-link {
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-body-bg);
|
||||
border-color: var(--bs-border-color);
|
||||
}
|
||||
|
||||
.pagination .page-item.active .page-link {
|
||||
background-color: var(--bs-primary);
|
||||
border-color: var(--bs-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pagination .page-item.disabled .page-link {
|
||||
color: var(--bs-secondary-color);
|
||||
pointer-events: none;
|
||||
background-color: var(--bs-body-bg);
|
||||
border-color: var(--bs-border-color);
|
||||
}
|
||||
|
||||
.pagination .page-link:hover {
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border-color: var(--bs-border-color);
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.form-select-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness - Stats Cards (deprecated - now using compact card) */
|
||||
|
||||
/* Mobile Touch Optimization */
|
||||
@media (max-width: 768px) {
|
||||
/* Touch Target Sizes - Minimum 44px */
|
||||
.btn, .btn-sm {
|
||||
min-height: 44px;
|
||||
padding: 0.625rem 1rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
min-width: 44px;
|
||||
padding: 0.625rem;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
min-height: 44px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.pagination .page-link {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Modal Optimization */
|
||||
.modal-dialog {
|
||||
margin: 0.5rem;
|
||||
max-width: calc(100% - 1rem);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 0.75rem 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.modal-footer .btn {
|
||||
flex: 1 1 auto;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
/* Form Layout Optimization */
|
||||
.row.g-3 > [class*="col-md-"] {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.row.g-3 > .col-6 {
|
||||
width: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Tab Selector for Settings Pages */
|
||||
#mobileTabSelector {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
border: 2px solid var(--bs-border-color);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background-color: var(--bs-body-bg);
|
||||
color: var(--bs-body-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#mobileTabSelector:focus {
|
||||
border-color: var(--bs-primary);
|
||||
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
/* Ensure tab content has proper spacing on mobile */
|
||||
.tab-content {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.tab-content .card {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Validation - Hide empty validation summary */
|
||||
.validation-summary-valid {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ===== Dark Mode Overrides ===== */
|
||||
|
||||
/* Equipment status badges */
|
||||
[data-bs-theme="dark"] .equipment-status-operational {
|
||||
background-color: rgba(34, 197, 94, 0.2);
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .equipment-status-needs-maintenance {
|
||||
background-color: rgba(251, 191, 36, 0.2);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .equipment-status-under-maintenance {
|
||||
background-color: rgba(96, 165, 250, 0.2);
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .equipment-status-out-of-service {
|
||||
background-color: rgba(248, 113, 113, 0.2);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .equipment-status-retired {
|
||||
background-color: rgba(156, 163, 175, 0.15);
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* Maintenance status badges */
|
||||
[data-bs-theme="dark"] .maintenance-status-scheduled {
|
||||
background-color: rgba(96, 165, 250, 0.2);
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .maintenance-status-in-progress {
|
||||
background-color: rgba(251, 191, 36, 0.2);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .maintenance-status-completed {
|
||||
background-color: rgba(34, 197, 94, 0.2);
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .maintenance-status-overdue {
|
||||
background-color: rgba(248, 113, 113, 0.2);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .maintenance-status-cancelled {
|
||||
background-color: rgba(156, 163, 175, 0.15);
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* Maintenance priority badges */
|
||||
[data-bs-theme="dark"] .maintenance-priority-low {
|
||||
background-color: rgba(156, 163, 175, 0.15);
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .maintenance-priority-normal {
|
||||
background-color: rgba(96, 165, 250, 0.2);
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .maintenance-priority-high {
|
||||
background-color: rgba(251, 191, 36, 0.2);
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .maintenance-priority-critical {
|
||||
background-color: rgba(248, 113, 113, 0.2);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* bg-warning text-dark and bg-info text-dark badges:
|
||||
In dark mode Bootstrap changes --bs-dark to a light gray,
|
||||
which gives poor contrast on yellow/cyan backgrounds.
|
||||
Force dark text so contrast is maintained. */
|
||||
[data-bs-theme="dark"] .bg-warning {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bg-info {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Tom Select — dark mode fixes
|
||||
Tom Select's Bootstrap 5 theme hardcodes color:#343a40 which
|
||||
is near-invisible on Bootstrap's dark body background. Using
|
||||
html prefix for maximum specificity; all colours hard-coded to
|
||||
avoid CSS variable resolution issues.
|
||||
============================================================ */
|
||||
|
||||
/* Control box */
|
||||
html[data-bs-theme="dark"] .ts-control {
|
||||
color: #dee2e6 !important;
|
||||
background-color: #212529 !important;
|
||||
border-color: #495057 !important;
|
||||
}
|
||||
html[data-bs-theme="dark"] .ts-control input {
|
||||
color: #dee2e6 !important;
|
||||
}
|
||||
html[data-bs-theme="dark"] .ts-control input::placeholder {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
/* Selected item text */
|
||||
html[data-bs-theme="dark"] .ts-control .item {
|
||||
color: #dee2e6 !important;
|
||||
}
|
||||
|
||||
/* Dropdown panel */
|
||||
html[data-bs-theme="dark"] .ts-dropdown {
|
||||
color: #dee2e6 !important;
|
||||
background-color: #2b3035 !important;
|
||||
border-color: #495057 !important;
|
||||
}
|
||||
|
||||
/* Every option row — override cascaded #343a40 from Tom Select theme */
|
||||
html[data-bs-theme="dark"] .ts-dropdown .option,
|
||||
html[data-bs-theme="dark"] .ts-dropdown .no-results,
|
||||
html[data-bs-theme="dark"] .ts-dropdown .optgroup-header,
|
||||
html[data-bs-theme="dark"] .ts-dropdown .create {
|
||||
color: #dee2e6 !important;
|
||||
background-color: #2b3035 !important;
|
||||
}
|
||||
|
||||
/* Highlighted (hover/keyboard) option */
|
||||
html[data-bs-theme="dark"] .ts-dropdown .option.active,
|
||||
html[data-bs-theme="dark"] .ts-dropdown .active {
|
||||
background-color: #0d6efd !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* Multi-select chips */
|
||||
html[data-bs-theme="dark"] .ts-wrapper.multi .ts-control > div {
|
||||
background: #343a40 !important;
|
||||
color: #dee2e6 !important;
|
||||
border-color: #495057 !important;
|
||||
}
|
||||
|
||||
/* Dropdown caret arrow — swap dark SVG for a light one */
|
||||
html[data-bs-theme="dark"] .ts-wrapper:not(.form-control, .form-select).single .ts-control {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-position: right .75rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 12px;
|
||||
}
|
||||
|
||||
/* Search field inside open dropdown */
|
||||
html[data-bs-theme="dark"] .ts-dropdown .dropdown-input {
|
||||
color: #dee2e6 !important;
|
||||
background: #212529 !important;
|
||||
border-color: #495057 !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Item wizard (Quotes/Create, Jobs/Create, Jobs/Edit) — dark mode
|
||||
The inline styles in these views hardcode #fff/#fafafa/#dee2e6.
|
||||
============================================================ */
|
||||
[data-bs-theme="dark"] .item-type-card {
|
||||
background: var(--bs-secondary-bg) !important;
|
||||
border-color: var(--bs-border-color) !important;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .item-type-card:hover {
|
||||
border-color: #86b7fe !important;
|
||||
background: rgba(13, 110, 253, 0.15) !important;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .item-type-card.selected {
|
||||
border-color: #0d6efd !important;
|
||||
background: rgba(13, 110, 253, 0.2) !important;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .quote-item-card {
|
||||
background: var(--bs-secondary-bg) !important;
|
||||
border-color: var(--bs-border-color) !important;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .coat-row {
|
||||
border-color: var(--bs-border-color) !important;
|
||||
background: var(--bs-body-bg);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .wizard-step-dot {
|
||||
background: var(--bs-secondary-bg) !important;
|
||||
border-color: var(--bs-border-color) !important;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .wizard-step-line {
|
||||
background: var(--bs-border-color) !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Tag chip input widget
|
||||
============================================================ */
|
||||
|
||||
/* Chips area sits below the input — input height never changes */
|
||||
.tag-chips-area {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* Remove × inside each chip */
|
||||
.tag-chip .tag-remove {
|
||||
color: inherit;
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tag-chip .tag-remove:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Clickable tag links in Index grids — hover darkens slightly */
|
||||
a.tag-index-badge:hover {
|
||||
filter: brightness(0.88);
|
||||
text-decoration: none;
|
||||
}
|
||||
Reference in New Issue
Block a user