431 lines
18 KiB
SCSS
431 lines
18 KiB
SCSS
@use "react-big-calendar/lib/sass/styles" as rbc;
|
|
|
|
:root {
|
|
--table-stripe-bg: #f4f4f4; /* Light mode table stripe */
|
|
--menu-divider-color: #74695c; /* Light mode menu divider */
|
|
--menu-submenu-text: rgba(255, 255, 255, 0.65); /* Light mode submenu text */
|
|
--kanban-column-bg: #ddd; /* Light mode kanban column */
|
|
--alert-color: blue; /* Light mode alert */
|
|
--completion-soon-color: rgba(255, 140, 0, 0.8); /* Light mode completion soon */
|
|
--completion-past-color: rgba(255, 0, 0, 0.8); /* Light mode completion past */
|
|
--job-line-manual-color: tomato; /* Light mode job line manual */
|
|
--muted-button-color: lightgray; /* Light mode muted button */
|
|
--muted-button-hover-color: darkgrey; /* Light mode muted button hover */
|
|
--table-border-color: #ddd; /* Light mode table border */
|
|
--table-hover-bg: #f5f5f5; /* Light mode table hover */
|
|
--popover-bg: #fff; /* Light mode popover background */
|
|
--error-text: red; /* Light mode error message */
|
|
--no-jobs-text: #888; /* Light mode no jobs message */
|
|
--message-yours-bg: #eee; /* Light mode yours message background */
|
|
--message-mine-bg-start: #00d0ea; /* Light mode mine message gradient start */
|
|
--message-mine-bg-end: #0085d1; /* Light mode mine message gradient end */
|
|
--message-mine-text: white; /* Light mode mine message text */
|
|
--message-mine-tail-bg: white; /* Light mode mine/yours message tail */
|
|
--system-message-bg: #f5f5f5; /* Light mode system message background */
|
|
--system-message-text: #555; /* Light mode system message text */
|
|
--system-label-text: #888; /* Light mode system label/date text */
|
|
--message-icon-color: whitesmoke; /* Light mode message icon */
|
|
--eula-card-bg: lightgray; /* Light mode eula card background */
|
|
--notification-bg: #fff; /* Light mode notification background */
|
|
--notification-text: rgba(0, 0, 0, 0.85); /* Light mode notification text */
|
|
--notification-border: #d9d9d9; /* Light mode notification border */
|
|
--notification-header-bg: #fafafa; /* Light mode notification header background */
|
|
--notification-header-border: #f0f0f0; /* Light mode notification header border */
|
|
--notification-header-text: rgba(0, 0, 0, 0.85); /* Light mode notification header text */
|
|
--notification-toggle-icon: #1677ff; /* Light mode notification toggle icon */
|
|
--notification-switch-bg: #1677ff; /* Light mode notification switch background */
|
|
--notification-btn-link: #1677ff; /* Light mode notification link button */
|
|
--notification-btn-link-hover: #69b1ff; /* Light mode notification link button hover */
|
|
--notification-btn-link-disabled: rgba(0, 0, 0, 0.25); /* Light mode notification link button disabled */
|
|
--notification-btn-link-active: #0958d9; /* Light mode notification link button active */
|
|
--notification-read-bg: #fff; /* Light mode notification read background */
|
|
--notification-read-text: rgba(0, 0, 0, 0.65); /* Light mode notification read text */
|
|
--notification-unread-bg: #f5f5f5; /* Light mode notification unread background */
|
|
--notification-unread-text: rgba(0, 0, 0, 0.85); /* Light mode notification unread text */
|
|
--notification-item-hover-bg: #fafafa; /* Light mode notification item hover background */
|
|
--notification-ro-number: #1677ff; /* Light mode notification RO number */
|
|
--notification-relative-time: rgba(0, 0, 0, 0.45); /* Light mode notification relative time */
|
|
--alert-bg: #fff1f0; /* Light mode alert background */
|
|
--alert-text: rgba(0, 0, 0, 0.85); /* Light mode alert text */
|
|
--alert-border: #ffa39e; /* Light mode alert border */
|
|
--alert-message: #ff4d4f; /* Light mode alert message */
|
|
--share-badge-bg: #cccccc; /* Light mode share badge background */
|
|
--column-header-bg: #d0d0d0; /* Light mode column header background */
|
|
--footer-bg: #d0d0d0; /* Light mode footer background */
|
|
--tech-icon-color: orangered; /* Light mode tech icon color */
|
|
--clone-border-color: #1890ff; /* Light mode clone border color */
|
|
--event-arrived-bg: rgba(4, 141, 4, 0.4); /* Light mode arrived event background */
|
|
--event-block-bg: tomato; /* Light mode block event background */
|
|
--event-selected-bg: slategrey; /* Light mode selected event background */
|
|
--task-bg: #fff; /* Light mode task center background */
|
|
--task-text: rgba(0, 0, 0, 0.85); /* Light mode task text */
|
|
--task-border: #d9d9d9; /* Light mode task border */
|
|
--task-header-bg: #fafafa; /* Light mode task header background */
|
|
--task-header-border: #f0f0f0; /* Light mode task header border */
|
|
--task-section-bg: #f5f5f5; /* Light mode task section background */
|
|
--task-section-border: #e8e8e8; /* Light mode task section border */
|
|
--task-row-hover-bg: #f5f5f5; /* Light mode task row hover background */
|
|
--task-row-border: #f0f0f0; /* Light mode task row border */
|
|
--task-ro-number: #1677ff; /* Light mode task RO number */
|
|
--task-due-text: rgba(0, 0, 0, 0.45); /* Light mode task due text */
|
|
--task-button-bg: #1677ff; /* Light mode task button background */
|
|
--task-button-hover-bg: #4096ff; /* Light mode task button hover background */
|
|
--task-button-disabled-bg: #d9d9d9; /* Light mode task button disabled background */
|
|
--task-button-text: white; /* Light mode task button text */
|
|
--task-message-text: rgba(0, 0, 0, 0.45); /* Light mode task message text */
|
|
--mask-bg: rgba(0, 0, 0, 0.05); /* Light mode mask background */
|
|
--board-text-color: #393939; /* Light mode board text color */
|
|
--section-bg: #e3e3e3; /* Light mode section background */
|
|
--detail-text-color: #4d4d4d; /* Light mode detail text color */
|
|
--card-selected-bg: rgba(128, 128, 128, 0.2); /* Light mode selected card background */
|
|
--card-stripe-even-bg: #f0f2f5; /* Light mode even card background */
|
|
--card-stripe-odd-bg: #ffffff; /* Light mode odd card background */
|
|
--bar-border-color: #f0f2f5; /* Light mode bar border and background */
|
|
--tag-wrapper-bg: #f0f2f5; /* Light mode tag wrapper background */
|
|
--tag-wrapper-text: #000; /* Light mode tag wrapper text */
|
|
--preview-bg: lightgray; /* Light mode preview background */
|
|
--preview-border-color: #2196F3; /* Light mode preview border color */
|
|
--event-bg-fallback: #c4c4c4; /* Light mode event background fallback */
|
|
--card-bg-fallback: #ffffff; /* Light mode card background fallback */
|
|
--card-text-fallback: black; /* Light mode card text fallback */
|
|
--table-row-even-bg: rgb(236, 236, 236); /* Light mode table row even background */
|
|
--status-row-bg-fallback: #ffffff; /* Light mode status row fallback background */
|
|
--reset-link-color: #0000ff; /* Light mode reset link color */
|
|
--error-header-text: tomato; /* Light mode error header text */
|
|
--tooltip-bg: white; /* Light mode tooltip background */
|
|
--tooltip-border: gray; /* Light mode tooltip border */
|
|
--tooltip-text-fallback: black; /* Light mode tooltip text fallback */
|
|
--teams-button-bg: #6264A7; /* Light mode Teams button background */
|
|
--teams-button-border: #6264A7; /* Light mode Teams button border */
|
|
--teams-button-text: #FFFFFF; /* Light mode Teams button text and icon */
|
|
--content-bg: #fff; /* Light mode content background */
|
|
--legend-bg-fallback: #ffffff; /* Light mode legend background fallback */
|
|
--tech-content-bg: #fff; /* Light mode tech content background */
|
|
--today-bg: #ffffff; /* Light mode today background */
|
|
--today-text: #000000; /* Light mode today text */
|
|
--off-range-bg: #f8f8f8; /* Light mode off-range background */
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--table-stripe-bg: #2a2a2a; /* Dark mode table stripe */
|
|
--menu-divider-color: #5c5c5c; /* Dark mode menu divider */
|
|
--menu-submenu-text: rgba(255, 255, 255, 0.85); /* Dark mode submenu text */
|
|
--kanban-column-bg: #333333; /* Dark mode kanban column */
|
|
--alert-color: #4da8ff; /* Dark mode alert */
|
|
--completion-soon-color: #ff8c1a; /* Dark mode completion soon */
|
|
--completion-past-color: #ff4d4f; /* Dark mode completion past */
|
|
--job-line-manual-color: #ff6347; /* Dark mode job line manual */
|
|
--muted-button-color: #666666; /* Dark mode muted button */
|
|
--muted-button-hover-color: #999999; /* Dark mode muted button hover */
|
|
--table-border-color: #5c5c5c; /* Dark mode table border */
|
|
--table-hover-bg: #2a2a2a; /* Dark mode table hover */
|
|
--popover-bg: #2a2a2a; /* Dark mode popover background */
|
|
--error-text: #ff4d4f; /* Dark mode error message */
|
|
--no-jobs-text: #999999; /* Dark mode no jobs message */
|
|
--message-yours-bg: #2a2a2a; /* Dark mode yours message background */
|
|
--message-mine-bg-start: #4da8ff; /* Dark mode mine message gradient start */
|
|
--message-mine-bg-end: #326ade; /* Dark mode mine message gradient end */
|
|
--message-mine-text: #ffffff; /* Dark mode mine message text */
|
|
--message-mine-tail-bg: #1f1f1f; /* Dark mode mine/yours message tail */
|
|
--system-message-bg: #333333; /* Dark mode system message background */
|
|
--system-message-text: #cccccc; /* Dark mode system message text */
|
|
--system-label-text: #999999; /* Dark mode system label/date text */
|
|
--message-icon-color: #cccccc; /* Dark mode message icon */
|
|
--eula-card-bg: #2a2a2a; /* Dark mode eula card background */
|
|
--notification-bg: #2a2a2a; /* Dark mode notification background */
|
|
--notification-text: rgba(255, 255, 255, 0.85); /* Dark mode notification text */
|
|
--notification-border: #5c5c5c; /* Dark mode notification border */
|
|
--notification-header-bg: #333333; /* Dark mode notification header background */
|
|
--notification-header-border: #444444; /* Dark mode notification header border */
|
|
--notification-header-text: rgba(255, 255, 255, 0.85); /* Dark mode notification header text */
|
|
--notification-toggle-icon: #4da8ff; /* Dark mode notification toggle icon */
|
|
--notification-switch-bg: #4da8ff; /* Dark mode notification switch background */
|
|
--notification-btn-link: #4da8ff; /* Dark mode notification link button */
|
|
--notification-btn-link-hover: #80c1ff; /* Dark mode notification link button hover */
|
|
--notification-btn-link-disabled: rgba(255, 255, 255, 0.25); /* Dark mode notification link button disabled */
|
|
--notification-btn-link-active: #2681ff; /* Dark mode notification link button active */
|
|
--notification-read-bg: #2a2a2a; /* Dark mode notification read background */
|
|
--notification-read-text: rgba(255, 255, 255, 0.65); /* Dark mode notification read text */
|
|
--notification-unread-bg: #333333; /* Dark mode notification unread background */
|
|
--notification-unread-text: rgba(255, 255, 255, 0.85); /* Dark mode notification unread text */
|
|
--notification-item-hover-bg: #3a3a3a; /* Dark mode notification item hover background */
|
|
--notification-ro-number: #4da8ff; /* Dark mode notification RO number */
|
|
--notification-relative-time: rgba(255, 255, 255, 0.45); /* Dark mode notification relative time */
|
|
--alert-bg: #3a1a1a; /* Dark mode alert background */
|
|
--alert-text: rgba(255, 255, 255, 0.85); /* Dark mode alert text */
|
|
--alert-border: #ff6666; /* Dark mode alert border */
|
|
--alert-message: #ff6666; /* Dark mode alert message */
|
|
--share-badge-bg: #666666; /* Dark mode share badge background */
|
|
--column-header-bg: #333333; /* Dark mode column header background */
|
|
--footer-bg: #333333; /* Dark mode footer background */
|
|
--tech-icon-color: #ff4500; /* Dark mode tech icon color */
|
|
--clone-border-color: #4da8ff; /* Dark mode clone border color */
|
|
--event-arrived-bg: rgba(4, 141, 4, 0.6); /* Dark mode arrived event background */
|
|
--event-block-bg: tomato; /* Dark mode block event background */
|
|
--event-selected-bg: #4a5e6e; /* Dark mode selected event background */
|
|
--task-bg: #2a2a2a; /* Dark mode task center background */
|
|
--task-text: rgba(255, 255, 255, 0.85); /* Dark mode task text */
|
|
--task-border: #5c5c5c; /* Dark mode task border */
|
|
--task-header-bg: #333333; /* Dark mode task header background */
|
|
--task-header-border: #444444; /* Dark mode task header border */
|
|
--task-section-bg: #333333; /* Dark mode task section background */
|
|
--task-section-border: #444444; /* Dark mode task section border */
|
|
--task-row-hover-bg: #3a3a3a; /* Dark mode task row hover background */
|
|
--task-row-border: #444444; /* Dark mode task row border */
|
|
--task-ro-number: #4da8ff; /* Dark mode task RO number */
|
|
--task-due-text: rgba(255, 255, 255, 0.45); /* Dark mode task due text */
|
|
--task-button-bg: #4da8ff; /* Dark mode task button background */
|
|
--task-button-hover-bg: #80c1ff; /* Dark mode task button hover background */
|
|
--task-button-disabled-bg: #666666; /* Dark mode task button disabled background */
|
|
--task-button-text: #ffffff; /* Dark mode task button text */
|
|
--task-message-text: rgba(255, 255, 255, 0.45); /* Dark mode task message text */
|
|
--mask-bg: rgba(255, 255, 255, 0.05); /* Dark mode mask background */
|
|
--board-text-color: #cccccc; /* Dark mode board text color */
|
|
--section-bg: #333333; /* Dark mode section background */
|
|
--detail-text-color: #bbbbbb; /* Dark mode detail text color */
|
|
--card-selected-bg: rgba(255, 255, 255, 0.1); /* Dark mode selected card background */
|
|
--card-stripe-even-bg: #2a2a2a; /* Dark mode even card background */
|
|
--card-stripe-odd-bg: #1f1f1f; /* Dark mode odd card background */
|
|
--bar-border-color: #2a2a2a; /* Dark mode bar border and background */
|
|
--tag-wrapper-bg: #2a2a2a; /* Dark mode tag wrapper background */
|
|
--tag-wrapper-text: #cccccc; /* Dark mode tag wrapper text */
|
|
--preview-bg: #2a2a2a; /* Dark mode preview background */
|
|
--preview-border-color: #4da8ff; /* Dark mode preview border color */
|
|
--event-bg-fallback: #262626; /* Dark mode event background fallback */
|
|
--card-bg-fallback: #2a2a2a; /* Dark mode card background fallback */
|
|
--card-text-fallback: #cccccc; /* Dark mode card text fallback */
|
|
--table-row-even-bg: #2a2a2a; /* Dark mode table row even background */
|
|
--status-row-bg-fallback: #1f1f1f; /* Dark mode status row fallback background */
|
|
--reset-link-color: #4da8ff; /* Dark mode reset link color */
|
|
--error-header-text: #ff6347; /* Dark mode error header text */
|
|
--tooltip-bg: #2a2a2a; /* Dark mode tooltip background */
|
|
--tooltip-border: #5c5c5c; /* Dark mode tooltip border */
|
|
--tooltip-text-fallback: #cccccc; /* Dark mode tooltip text fallback */
|
|
--teams-button-bg: #7b7dc4; /* Dark mode Teams button background */
|
|
--teams-button-border: #7b7dc4; /* Dark mode Teams button border */
|
|
--teams-button-text: #ffffff; /* Dark mode Teams button text and icon */
|
|
--content-bg: #2a2a2a; /* Dark mode content background */
|
|
--legend-bg-fallback: #2a2a2a; /* Dark mode legend background fallback */
|
|
--tech-content-bg: #2a2a2a; /* Dark mode tech content background */
|
|
--today-bg: #4a5e6e; /* Dark mode today background */
|
|
--today-text: #ffffff; /* Dark mode today text */
|
|
--off-range-bg: #333333; /* Dark mode off-range background */
|
|
--svg-background: #FFF; /* Dark mode SVG background */
|
|
}
|
|
|
|
.ant-menu-item-divider {
|
|
border-bottom: 1px solid var(--menu-divider-color) !important;
|
|
}
|
|
|
|
// Note: Monitor this in dark mode to ensure text visibility
|
|
.ant-menu-submenu-title {
|
|
color: var(--menu-submenu-text) !important;
|
|
}
|
|
|
|
.imex-table-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
|
|
&__search {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.imex-flex-row {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
|
|
&__grow {
|
|
flex: 1;
|
|
}
|
|
|
|
&__margin {
|
|
margin: 0.2rem 0.2rem;
|
|
}
|
|
|
|
&__margin-large {
|
|
margin: 0.5rem 0.5rem;
|
|
}
|
|
|
|
&__flex-space-around {
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
|
|
.ellipses {
|
|
display: inline-block;
|
|
text-overflow: ellipsis;
|
|
width: calc(95%);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tight-antd-rows {
|
|
.ant-row {
|
|
margin: 0rem;
|
|
line-height: 1rem;
|
|
}
|
|
}
|
|
|
|
// Scrollbar styles (uncomment if needed, updated for dark mode)
|
|
// ::-webkit-scrollbar-track {
|
|
// -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
// border-radius: 0.2rem;
|
|
// background-color: var(--table-stripe-bg);
|
|
// }
|
|
|
|
// ::-webkit-scrollbar {
|
|
// width: 0.25rem;
|
|
// max-height: 0.25rem;
|
|
// background-color: var(--table-stripe-bg);
|
|
// }
|
|
|
|
// ::-webkit-scrollbar-thumb {
|
|
// border-radius: 0.2rem;
|
|
// -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
|
// background-color: var(--alert-color);
|
|
// }
|
|
|
|
.ant-input-number-input,
|
|
.ant-input-number,
|
|
.ant-picker-input,
|
|
.ant-picker,
|
|
.ant-select {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.production-alert {
|
|
animation: alertBlinker 1s linear infinite;
|
|
color: var(--alert-color);
|
|
}
|
|
|
|
@keyframes alertBlinker {
|
|
50% {
|
|
color: var(--completion-past-color);
|
|
opacity: 100;
|
|
}
|
|
}
|
|
|
|
.blue {
|
|
color: var(--alert-color);
|
|
}
|
|
|
|
.production-completion-soon {
|
|
color: var(--completion-soon-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.production-completion-past {
|
|
color: var(--completion-past-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.react-resizable {
|
|
position: relative;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.react-resizable-handle {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 100%;
|
|
bottom: 0;
|
|
right: -5px;
|
|
cursor: col-resize;
|
|
z-index: 1;
|
|
}
|
|
|
|
.production-list-min-height {
|
|
min-height: 19px;
|
|
}
|
|
|
|
#noticeable-widget {
|
|
iframe {
|
|
z-index: 2 !important;
|
|
}
|
|
}
|
|
|
|
.react-kanban-column {
|
|
background-color: var(--kanban-column-bg) !important;
|
|
}
|
|
|
|
.production-list-table {
|
|
td.ant-table-column-sort {
|
|
background: unset;
|
|
}
|
|
}
|
|
|
|
.ReactGridGallery_tile-icon-bar {
|
|
div {
|
|
svg {
|
|
fill: var(--alert-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.job-line-manual {
|
|
color: var(--job-line-manual-color);
|
|
font-style: italic;
|
|
}
|
|
|
|
.ant-table-tbody > tr.ant-table-row:nth-child(2n) > td {
|
|
background-color: var(--table-stripe-bg);
|
|
}
|
|
|
|
.rowWithColor > td {
|
|
background-color: var(--bgColor) !important;
|
|
}
|
|
|
|
.muted-button {
|
|
color: var(--muted-button-color);
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.muted-button:hover {
|
|
color: var(--muted-button-hover-color);
|
|
}
|
|
|
|
.notification-alert-unordered-list {
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
.notification-alert-unordered-list-item {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.content-container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
// Override react-big-calendar styles for dark mode only
|
|
[data-theme="dark"] {
|
|
.car-svg {
|
|
background-color: var(--svg-background);
|
|
}
|
|
|
|
.rbc-today {
|
|
background-color: var(--today-bg);
|
|
color: var(--today-text);
|
|
}
|
|
|
|
.rbc-off-range {
|
|
background-color: var(--off-range-bg);
|
|
}
|
|
|
|
.rbc-day-bg.rbc-today {
|
|
background-color: var(--today-bg);
|
|
}
|
|
}
|
|
|
|
//.rbc-time-header-gutter {
|
|
// padding: 0;
|
|
//}
|