pgadmin4/web/pgadmin/static/js/Theme/overrides/reactaspen.override.js

245 lines
7.5 KiB
JavaScript

/////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2025, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
export default function reactAspenOverride(theme) {
return {
'.drag-tree-node': {
position: 'absolute',
top: '-100px',
left: 0,
zIndex: 99999,
color: theme.otherVars.tree.textFg,
background: theme.otherVars.tree.inputBg,
padding: '0.25rem 0.75rem',
maxWidth: '30%',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
'.file-tree': {
color: theme.otherVars.tree.textFg + ' !important',
backgroundColor: theme.otherVars.tree.inputBg + ' !important',
fontFamily: theme.typography.fontFamily + ' !important',
fontSize: '0.815rem' + ' !important',
display: 'inline-block',
position: 'relative',
width: '100%',
'&, & *': {
boxSizing: 'border-box',
},
},
'.browser-tree': {
height: '100%',
},
'.file-tree>': {
div: {
position: 'absolute' + ' !important',
height: '100%' + ' !important',
top: '0px' + ' !important',
'>div': {
scrollbarGutter: 'auto',
overflow: 'overlay' + ' !important',
},
},
},
'.file-entry': {
font: 'inherit',
textAlign: 'left',
display: 'flex',
alignItems: 'center',
whiteSpace: 'nowrap',
padding: '2px 0',
paddingLeft: '2px',
cursor: 'default',
'&:before': {
content: '""',
background: theme.palette.grey[400],
position: 'absolute',
width: '1px',
height: '100%',
// set box-shadow to show tree indent guide.
boxShadow: `'-16px 0 0 0' + theme.palette.grey[400],
'-32px 0 0 0' + theme.palette.grey[400],
'-48px 0 0 0' + theme.palette.grey[400],
'-64px 0 0 0' + theme.palette.grey[400],
'-80px 0 0 0' + theme.palette.grey[400],
'-96px 0 0 0' + theme.palette.grey[400],
'-112px 0 0 0' + theme.palette.grey[400],
'-128px 0 0 0' + theme.palette.grey[400],
'-144px 0 0 0' + theme.palette.grey[400],
'-160px 0 0 0' + theme.palette.grey[400],
'-176px 0 0 0' + theme.palette.grey[400],
'-192px 0 0 0' + theme.palette.grey[400],
'-208px 0 0 0' + theme.palette.grey[400],
'-224px 0 0 0' + theme.palette.grey[400],
'-240px 0 0 0' + theme.palette.grey[400],
'-256px 0 0 0' + theme.palette.grey[400],
'-272px 0 0 0' + theme.palette.grey[400],
'-288px 0 0 0' + theme.palette.grey[400],
'-304px 0 0 0' + theme.palette.grey[400],
'-320px 0 0 0' + theme.palette.grey[400],
'-336px 0 0 0' + theme.palette.grey[400],
'-352px 0 0 0' + theme.palette.grey[400],
'-368px 0 0 0' + theme.palette.grey[400],
'-384px 0 0 0' + theme.palette.grey[400],
'-400px 0 0 0' + theme.palette.grey[400],
'-416px 0 0 0' + theme.palette.grey[400],
'-432px 0 0 0' + theme.palette.grey[400],
'-448px 0 0 0' + theme.palette.grey[400],
'-464px 0 0 0' + theme.palette.grey[400],
'-480px 0 0 0' + theme.palette.grey[400],
'-496px 0 0 0' + theme.palette.grey[400],
'-512px 0 0 0' + theme.palette.grey[400],
'-528px 0 0 0' + theme.palette.grey[400],
'-544px 0 0 0' + theme.palette.grey[400],
'-544px 0 0 0' + theme.palette.grey[400],
'-560px 0 0 0' + theme.palette.grey[400]`,
},
'&.big': {
fontFamily: 'monospace',
},
'&:hover, &.pseudo-active': {
color: theme.otherVars.tree.textHoverFg + ' !important',
backgroundColor: theme.otherVars.tree.bgHover + ' !important',
'span.file-label': {
'span.file-name': {
color: theme.otherVars.tree.textHoverFg,
},
'span.children-count': {
color: theme.otherVars.tree.textHoverFg
},
},
},
'&.active, &.prompt': {
color: theme.otherVars.tree.textHoverFg + ' !important',
backgroundColor: theme.otherVars.tree.bgSelected + ' !important',
borderColor: theme.otherVars.tree.bgSelected,
borderRight: '3px solid ' + theme.palette.primary.main + ' !important',
'span.file-label': {
'span.file-name': {
color: theme.otherVars.textHoverFg,
},
},
},
'span.file-label': {
display: 'flex',
gap: '2px',
alignItems: 'center',
padding: '0 2px 0 2px',
border: '1px solid transparent',
height: 'auto',
whiteSpace: 'normal',
cursor: 'pointer !important',
marginLeft: '2px',
'&:hover, &.pseudo-active': {
color: theme.otherVars.tree.fgHover,
},
},
'span.file-name': {
font: 'inherit',
flexGrow: 1,
userSelect: 'none',
cursor: 'pointer !important',
whiteSpace: 'nowrap',
'&:hover, &.pseudo-active': {
color: theme.otherVars.tree.fgHover,
},
},
'span.children-count': {
'&:hover, &.pseudo-active': {
color: theme.otherVars.tree.fgHover,
},
},
'div.file-tag': {
color: 'var(--tag-color)',
border: '1px solid color-mix(in srgb, var(--tag-color) 90%, #fff)',
padding: '0px 4px',
borderRadius: theme.shape.borderRadius,
backgroundColor: 'color-mix(in srgb, color-mix(in srgb, var(--tag-color) 10%, #fff) 50%, transparent);',
lineHeight: 1.2,
whiteSpace: 'nowrap'
},
i: {
display: 'inline-block',
font: 'normal normal normal 18px/1 "Font Awesome 5 Free"',
fontSize: '18px',
textAlign: 'center',
height: '21px !important',
width: '20px !important',
flexShrink: 0,
'&:before': {
height: 'inherit',
width: 'inherit',
display: 'inline-block',
},
'&.directory-toggle': {
'&:before': {
backgroundPosition: '6px center !important',
fontFamily: '"Font Awesome 5 Free"',
content: '"\\f054"',
borderStyle: 'none',
marginLeft: '5px',
fontWeight: 900,
right: '15px',
top: '3px',
fontSize: '0.6rem',
lineHeight: 2,
},
'&.open:before': {
backgroundPosition: '-14px center !important',
fontFamily: theme.typography.fontFamilyIcon,
content: '"\\f078"',
borderStyle: 'none',
marginLeft: '5px',
fontWeight: 900,
transform: 'none !important',
},
'&.loading:before': {
content: '""',
fontFamily: theme.typography.fontFamilyIcon,
borderStyle: 'none',
background: theme.otherVars.iconLoaderSmall + ' 0 0 no-repeat',
backgroundPosition: 'center !important',
},
},
},
'&.prompt.new .file-label, &.file .file-label': {
marginLeft: '18px',
},
// Set the tree depth CSS from depth
...Object.fromEntries(
new Array(50).fill(0).map((v, i) => {
return ['&.depth-' + i, { paddingLeft: 16 * (i - 1) + 'px' }];
})
),
},
};
}