38460-vm/frontend/src/styles.ts
2026-02-16 01:14:10 +00:00

106 lines
3.4 KiB
TypeScript

interface StyleObject {
aside: string
asideScrollbars: string
asideBrand: string
asideMenuItem: string
asideMenuItemActive: string
asideMenuDropdown: string
navBarItemLabel: string
navBarItemLabelHover: string
navBarItemLabelActiveColor: string
overlay: string
activeLinkColor: string;
bgLayoutColor: string;
iconsColor: string;
cardsColor: string;
focusRingColor: string;
corners: string;
cardsStyle: string;
linkColor: string;
websiteHeder: string;
borders: string;
shadow: string;
websiteSectionStyle: string;
textSecondary: string;
}
export const white: StyleObject = {
aside: 'bg-white dark:text-white border-r border-gray-200',
asideScrollbars: 'aside-scrollbars-light',
asideBrand: 'border-b border-gray-200',
asideMenuItem: 'text-gray-600 hover:bg-blue-50 hover:text-blue-700 dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800',
asideMenuItemActive: 'font-bold text-blue-700 bg-blue-50/50 dark:text-white',
asideMenuDropdown: 'bg-gray-50',
navBarItemLabel: 'text-gray-600',
navBarItemLabelHover: 'hover:text-blue-700',
navBarItemLabelActiveColor: 'text-blue-700',
overlay: 'from-white via-gray-100 to-white',
activeLinkColor: 'bg-blue-50/50',
bgLayoutColor: 'bg-gray-100/50',
iconsColor: 'text-blue-600',
cardsColor: 'bg-white',
focusRingColor: 'focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:outline-none border-gray-300 dark:focus:ring-blue-600 dark:focus:border-blue-600',
corners: 'rounded-lg',
cardsStyle: 'bg-white border border-gray-200 shadow-sm',
linkColor: 'text-blue-600',
websiteHeder: 'border-b border-gray-200',
borders: 'border-gray-200',
shadow: 'shadow-sm',
websiteSectionStyle: '',
textSecondary: 'text-gray-500',
}
export const dataGridStyles = {
'& .MuiDataGrid-cell': {
paddingX: 3,
borderBottom: '1px solid #f3f4f6',
},
'& .MuiDataGrid-columnHeader': {
paddingX: 3,
backgroundColor: '#f9fafb',
fontWeight: 'bold',
},
'& .MuiDataGrid-columnHeaderCheckbox': {
paddingX: 0,
},
'& .MuiDataGrid-columnHeaders': {
borderBottom: '2px solid #e5e7eb',
},
'& .MuiDataGrid-footerContainer': {
borderTop: '1px solid #e5e7eb',
},
'& .MuiDataGrid-root': {
border: '1px solid #e5e7eb',
borderRadius: '8px',
},
};
export const basic: StyleObject = {
aside: 'bg-slate-900',
asideScrollbars: 'aside-scrollbars-gray',
asideBrand: 'bg-slate-900 text-white border-b border-slate-800',
asideMenuItem: 'text-slate-400 hover:text-white hover:bg-slate-800/50',
asideMenuItemActive: 'font-bold text-white bg-blue-600/10',
asideMenuDropdown: 'bg-slate-800/40',
navBarItemLabel: 'text-slate-600',
navBarItemLabelHover: 'hover:text-blue-600',
navBarItemLabelActiveColor: 'text-blue-600',
overlay: 'from-slate-700 via-slate-900 to-slate-700',
activeLinkColor: 'bg-blue-600/10',
bgLayoutColor: 'bg-slate-50',
iconsColor: 'text-blue-600',
cardsColor: 'bg-white',
focusRingColor: 'focus:ring-2 focus:ring-blue-600/20 focus:border-blue-600 focus:outline-none dark:focus:ring-blue-600 border-gray-200 dark:focus:border-blue-600',
corners: 'rounded-lg',
cardsStyle: 'bg-white border border-slate-200 shadow-sm',
linkColor: 'text-blue-600',
websiteHeder: 'border-b border-slate-200',
borders: 'border-slate-200',
shadow: 'shadow-sm',
websiteSectionStyle: '',
textSecondary: 'text-slate-500',
}