174c6bcedf
- Added custom column values to task responses in the API for better task management flexibility. - Implemented custom column components in the frontend, including dropdowns and date pickers, to improve user interaction. - Updated TaskListV2 and TaskRow components to handle custom columns, ensuring proper rendering and functionality. - Introduced a new PeopleDropdown component for selecting team members in custom columns, enhancing usability. - Enhanced styling for custom column components to support both light and dark modes, improving visual consistency.
478 lines
12 KiB
CSS
478 lines
12 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
|
|
@import url("./styles/customOverrides.css");
|
|
@import url("./styles/task-management.css");
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
.app-loading-container {
|
|
transition: none !important;
|
|
}
|
|
|
|
.app-loading-container * {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Ensure loading spinner has proper contrast */
|
|
.app-loading-container .ant-spin {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Prevent background flash during load */
|
|
html,
|
|
body {
|
|
transition: background-color 0.3s ease;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html.dark,
|
|
html.dark body {
|
|
background-color: #181818;
|
|
color: #ffffff;
|
|
}
|
|
|
|
html.light,
|
|
html.light body {
|
|
background-color: #fafafa;
|
|
color: #181818;
|
|
}
|
|
|
|
/* Prevent content flash */
|
|
#root {
|
|
opacity: 0;
|
|
animation: fadeIn 0.3s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* antdesign override imports */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial, "Noto Sans",
|
|
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
|
|
}
|
|
|
|
/* helper classes */
|
|
.borderless-icon-btn {
|
|
border: none;
|
|
}
|
|
|
|
.blue-link {
|
|
color: #1890ff;
|
|
/* This is Ant Design's default link color */
|
|
}
|
|
|
|
.ps__rail-y {
|
|
opacity: 1 !important;
|
|
/* Always show the scrollbar */
|
|
right: 0px;
|
|
/* Position scrollbar to the right */
|
|
width: 8px !important;
|
|
/* Set a consistent scrollbar width */
|
|
}
|
|
|
|
.ps__thumb-y {
|
|
width: 8px !important;
|
|
/* Ensure the scrollbar thumb stays the same size */
|
|
background-color: #dbd6d6 !important;
|
|
/* Customize scrollbar color */
|
|
border-radius: 4px;
|
|
/* Rounded edges for the scrollbar */
|
|
}
|
|
|
|
.ps__rail-y:hover,
|
|
.ps__rail-y:focus {
|
|
background-color: transparent !important;
|
|
/* Prevent any changes on hover */
|
|
}
|
|
|
|
.ps__rail-y:hover .ps__thumb-y,
|
|
.ps__rail-y:focus .ps__thumb-y {
|
|
background-color: #c4c4c4 !important;
|
|
/* Keep the thumb color constant on hover */
|
|
width: 10px;
|
|
}
|
|
|
|
/* Customize website's scrollbar like Mac OS
|
|
Not supports in Firefox and IE */
|
|
|
|
/* total width */
|
|
*::-webkit-scrollbar {
|
|
background-color: transparent;
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
/* background of the scrollbar except button or resizer */
|
|
*::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* scrollbar itself */
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: rgba(204, 204, 204, 0.5);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background-color: #ababab;
|
|
}
|
|
|
|
/* set button(top and bottom of the scrollbar) */
|
|
*::-webkit-scrollbar-button {
|
|
display: none;
|
|
}
|
|
|
|
.ant-table-row:hover .action-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.action-buttons {
|
|
opacity: 0;
|
|
transition: opacity 0.1s ease-in-out;
|
|
}
|
|
tr:hover .action-buttons {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Custom column components z-index hierarchy */
|
|
.custom-column-cell {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.custom-column-cell.focused {
|
|
z-index: 10;
|
|
}
|
|
|
|
.custom-column-dropdown {
|
|
z-index: 1000;
|
|
}
|
|
|
|
.custom-selection-dropdown .ant-dropdown {
|
|
z-index: 1050 !important;
|
|
}
|
|
|
|
/* Ensure people dropdown has higher z-index */
|
|
.people-dropdown-portal {
|
|
z-index: 9999 !important;
|
|
}
|
|
|
|
/* Number input focused state */
|
|
.number-input-container.focused {
|
|
z-index: 20;
|
|
}
|
|
|
|
.number-input-container.focused input {
|
|
z-index: 21;
|
|
}
|
|
|
|
/* Custom column number input styles */
|
|
.custom-column-number-input {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 0 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.custom-column-number-input .ant-input-group {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
display: flex !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.custom-column-number-input .ant-input {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 0 !important;
|
|
padding: 2px 6px !important;
|
|
}
|
|
|
|
.custom-column-number-input.light-mode .ant-input {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
.custom-column-number-input.light-mode .ant-input::placeholder {
|
|
color: #9ca3af !important;
|
|
}
|
|
|
|
.custom-column-number-input.light-mode .ant-input:hover {
|
|
background-color: rgba(243, 244, 246, 0.5) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.custom-column-number-input.light-mode .ant-input:focus {
|
|
background-color: rgba(243, 244, 246, 0.8) !important;
|
|
border: none !important;
|
|
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5) !important;
|
|
}
|
|
|
|
.custom-column-number-input.dark-mode .ant-input {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
.custom-column-number-input.dark-mode .ant-input::placeholder {
|
|
color: #6b7280 !important;
|
|
}
|
|
|
|
.custom-column-number-input.dark-mode .ant-input:hover {
|
|
background-color: rgba(55, 65, 81, 0.3) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.custom-column-number-input.dark-mode .ant-input:focus {
|
|
background-color: rgba(55, 65, 81, 0.5) !important;
|
|
border: none !important;
|
|
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5) !important;
|
|
}
|
|
|
|
/* Addon styles for light mode */
|
|
.custom-column-number-input.light-mode .ant-input-group-addon {
|
|
background-color: #f3f4f6 !important;
|
|
border: 1px solid #e5e7eb !important;
|
|
color: #6b7280 !important;
|
|
padding: 2px 6px !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* Addon styles for dark mode */
|
|
.custom-column-number-input.dark-mode .ant-input-group-addon {
|
|
background-color: #374151 !important;
|
|
border: 1px solid #4b5563 !important;
|
|
color: #9ca3af !important;
|
|
padding: 2px 6px !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* Dark mode styles for Ant Design components in custom columns */
|
|
[data-theme="dark"] .ant-picker,
|
|
[data-theme="dark"] .ant-picker-input > input,
|
|
.theme-dark .ant-picker,
|
|
.theme-dark .ant-picker-input > input {
|
|
background-color: transparent !important;
|
|
border-color: transparent !important;
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-picker-input > input::placeholder,
|
|
.theme-dark .ant-picker-input > input::placeholder {
|
|
color: #6b7280 !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-picker:hover,
|
|
.theme-dark .ant-picker:hover {
|
|
border-color: transparent !important;
|
|
background-color: rgba(55, 65, 81, 0.3) !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-picker-focused,
|
|
[data-theme="dark"] .ant-picker:focus,
|
|
.theme-dark .ant-picker-focused,
|
|
.theme-dark .ant-picker:focus {
|
|
border-color: rgba(59, 130, 246, 0.5) !important;
|
|
background-color: rgba(55, 65, 81, 0.5) !important;
|
|
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5) !important;
|
|
}
|
|
|
|
/* Dark mode dropdown styles */
|
|
[data-theme="dark"] .ant-dropdown,
|
|
.theme-dark .ant-dropdown {
|
|
background-color: #1f1f1f !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-dropdown-menu,
|
|
.theme-dark .ant-dropdown-menu {
|
|
background-color: #1f1f1f !important;
|
|
border-color: #374151 !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-dropdown-menu-item,
|
|
.theme-dark .ant-dropdown-menu-item {
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-dropdown-menu-item:hover,
|
|
.theme-dark .ant-dropdown-menu-item:hover {
|
|
background-color: #374151 !important;
|
|
}
|
|
|
|
/* Dark mode date picker popup */
|
|
.dark-date-picker .ant-picker-panel,
|
|
.dark-date-picker .ant-picker-panel-container {
|
|
background-color: #1f1f1f !important;
|
|
border-color: #374151 !important;
|
|
}
|
|
|
|
.dark-date-picker .ant-picker-header {
|
|
background-color: #1f1f1f !important;
|
|
border-bottom-color: #374151 !important;
|
|
}
|
|
|
|
.dark-date-picker .ant-picker-header button {
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
.dark-date-picker .ant-picker-header button:hover {
|
|
color: #60a5fa !important;
|
|
}
|
|
|
|
.dark-date-picker .ant-picker-content {
|
|
background-color: #1f1f1f !important;
|
|
}
|
|
|
|
.dark-date-picker .ant-picker-cell {
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
.dark-date-picker .ant-picker-cell:hover .ant-picker-cell-inner {
|
|
background-color: #374151 !important;
|
|
}
|
|
|
|
.dark-date-picker .ant-picker-cell-selected .ant-picker-cell-inner {
|
|
background-color: #3b82f6 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.dark-date-picker .ant-picker-cell-today .ant-picker-cell-inner {
|
|
border-color: #60a5fa !important;
|
|
}
|
|
|
|
.dark-date-picker .ant-picker-footer {
|
|
background-color: #1f1f1f !important;
|
|
border-top-color: #374151 !important;
|
|
}
|
|
|
|
.dark-date-picker .ant-picker-footer .ant-btn {
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
.dark-date-picker .ant-picker-footer .ant-btn:hover {
|
|
color: #60a5fa !important;
|
|
}
|
|
|
|
/* Global dark mode styles for date picker popups */
|
|
[data-theme="dark"] .ant-picker-dropdown .ant-picker-panel-container,
|
|
.theme-dark .ant-picker-dropdown .ant-picker-panel-container {
|
|
background-color: #1f1f1f !important;
|
|
border-color: #374151 !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-picker-dropdown .ant-picker-header,
|
|
.theme-dark .ant-picker-dropdown .ant-picker-header {
|
|
background-color: #1f1f1f !important;
|
|
border-bottom-color: #374151 !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-picker-dropdown .ant-picker-header button,
|
|
.theme-dark .ant-picker-dropdown .ant-picker-header button {
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-picker-dropdown .ant-picker-header button:hover,
|
|
.theme-dark .ant-picker-dropdown .ant-picker-header button:hover {
|
|
color: #60a5fa !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-picker-dropdown .ant-picker-content,
|
|
.theme-dark .ant-picker-dropdown .ant-picker-content {
|
|
background-color: #1f1f1f !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-picker-dropdown .ant-picker-cell,
|
|
.theme-dark .ant-picker-dropdown .ant-picker-cell {
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-picker-dropdown .ant-picker-cell:hover .ant-picker-cell-inner,
|
|
.theme-dark .ant-picker-dropdown .ant-picker-cell:hover .ant-picker-cell-inner {
|
|
background-color: #374151 !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner,
|
|
.theme-dark .ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner {
|
|
background-color: #3b82f6 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
[data-theme="dark"] .ant-picker-dropdown .ant-picker-cell-today .ant-picker-cell-inner,
|
|
.theme-dark .ant-picker-dropdown .ant-picker-cell-today .ant-picker-cell-inner {
|
|
border-color: #60a5fa !important;
|
|
}
|
|
|
|
/* Custom column date picker styles */
|
|
.custom-column-date-picker.light-mode .ant-picker-input > input {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
.custom-column-date-picker.light-mode .ant-picker-input > input::placeholder {
|
|
color: #9ca3af !important;
|
|
}
|
|
|
|
.custom-column-date-picker.light-mode:hover {
|
|
background-color: rgba(243, 244, 246, 0.5) !important;
|
|
}
|
|
|
|
.custom-column-date-picker.light-mode:focus,
|
|
.custom-column-date-picker.light-mode.ant-picker-focused {
|
|
background-color: rgba(243, 244, 246, 0.8) !important;
|
|
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5) !important;
|
|
}
|
|
|
|
.custom-column-date-picker.dark-mode .ant-picker-input > input {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
.custom-column-date-picker.dark-mode .ant-picker-input > input::placeholder {
|
|
color: #6b7280 !important;
|
|
}
|
|
|
|
.custom-column-date-picker.dark-mode:hover {
|
|
background-color: rgba(55, 65, 81, 0.3) !important;
|
|
}
|
|
|
|
.custom-column-date-picker.dark-mode:focus,
|
|
.custom-column-date-picker.dark-mode.ant-picker-focused {
|
|
background-color: rgba(55, 65, 81, 0.5) !important;
|
|
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5) !important;
|
|
}
|
|
|
|
/* Custom column selection dropdown styles */
|
|
.custom-selection-dropdown [data-theme="dark"] .ant-dropdown-menu,
|
|
.custom-selection-dropdown .theme-dark .ant-dropdown-menu {
|
|
background-color: #1f1f1f !important;
|
|
border-color: #374151 !important;
|
|
}
|
|
|
|
.custom-selection-dropdown [data-theme="dark"] .ant-dropdown-menu-item,
|
|
.custom-selection-dropdown .theme-dark .ant-dropdown-menu-item {
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
.custom-selection-dropdown [data-theme="dark"] .ant-dropdown-menu-item:hover,
|
|
.custom-selection-dropdown .theme-dark .ant-dropdown-menu-item:hover {
|
|
background-color: #374151 !important;
|
|
}
|