luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(electron): adjust app-tabs-header styles (#7947)

Browse Source 
fix AF-1171
This commit is contained in:
pengx17
2024-08-22 13:10:27 +00:00
parent 3b727ef40a
commit 5e555b3807
1 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts
View File

@@ -52,7 +52,7 @@ export const tabs = style({
}); });
export const pinSeparator = style({ export const pinSeparator = style({
background: cssVar('iconSecondary'), background: cssVarV2('tab/divider/divider'),
width: 1, width: 1,
height: 16, height: 16,
flexShrink: 0, flexShrink: 0,
@@ -60,7 +60,7 @@ export const pinSeparator = style({
}); });
export const splitViewSeparator = style({ export const splitViewSeparator = style({
background: cssVar('borderColor'), background: cssVarV2('tab/divider/divider'),
width: 1, width: 1,
height: '100%', height: '100%',
flexShrink: 0, flexShrink: 0,
@@ -81,11 +81,11 @@ export const tab = style({
minWidth: 32, minWidth: 32,
maxWidth: 200, maxWidth: 200,
overflow: 'clip', overflow: 'clip',
background: cssVar('backgroundSecondaryColor'), background: cssVarV2('tab/tabBackground/default'),
display: 'flex', display: 'flex',
justifyContent: 'flex-start', justifyContent: 'flex-start',
alignItems: 'center', alignItems: 'center',
color: cssVar('textSecondaryColor'), color: cssVarV2('tab/fontColor/default'),
userSelect: 'none', userSelect: 'none',
borderRadius: 4, borderRadius: 4,
position: 'relative', position: 'relative',
@@ -95,8 +95,7 @@ export const tab = style({
marginRight: 8, marginRight: 8,
}, },
'&[data-active="true"]': { '&[data-active="true"]': {
background: cssVar('backgroundPrimaryColor'), boxShadow: cssVar('buttonShadow'),
boxShadow: cssVar('shadow1'),
}, },
'&[data-pinned="true"]': { '&[data-pinned="true"]': {
flexShrink: 0, flexShrink: 0,
@@ -116,6 +115,11 @@ export const splitViewLabel = style({
fontWeight: 500, fontWeight: 500,
alignItems: 'center', alignItems: 'center',
cursor: 'default', cursor: 'default',
selectors: {
'&[data-active="true"]': {
background: cssVarV2('tab/tabBackground/active'),
},
},
}); });
export const tabCloseButtonWrapper = style({ export const tabCloseButtonWrapper = style({
@@ -135,17 +139,17 @@ export const tabCloseButtonWrapper = style({
[`${tab}:is([data-active=true], :hover) &:not(:empty)`]: { [`${tab}:is([data-active=true], :hover) &:not(:empty)`]: {
width: 40, width: 40,
}, },
[`${tab}[data-active=true] &`]: { [`${splitViewLabel}:last-of-type[data-active=true] + &`]: {
background: `linear-gradient(270deg, ${cssVar('backgroundPrimaryColor')} 52.86%, rgba(255, 255, 255, 0.00) 100%)`, background: `linear-gradient(270deg, ${cssVarV2('tab/tabBackground/active')} 52.86%, rgba(255, 255, 255, 0.00) 100%)`,
}, },
[`${tab}[data-active=false] &`]: { [`${splitViewLabel}:last-of-type[data-active=false] + &`]: {
background: `linear-gradient(270deg, ${cssVar('backgroundSecondaryColor')} 65.71%, rgba(244, 244, 245, 0.00) 100%)`, background: `linear-gradient(270deg, ${cssVarV2('tab/tabBackground/default')} 65.71%, rgba(244, 244, 245, 0.00) 100%)`,
}, },
}, },
}); });
export const tabIcon = style({ export const tabIcon = style({
color: cssVar('iconSecondary'), color: cssVarV2('tab/iconColor/default'),
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@@ -160,11 +164,12 @@ export const labelIcon = style([
flexShrink: 0, flexShrink: 0,
selectors: { selectors: {
[`${splitViewLabel}[data-active=true] &`]: { [`${splitViewLabel}[data-active=true] &`]: {
color: cssVar('primaryColor'), color: cssVarV2('tab/iconColor/active'),
},
[`${splitViewLabel}[data-active=false]:hover &`]: {
color: cssVar('iconColor'),
}, },
[`${splitViewLabel}[data-active=false]:hover &, ${tab}:has(${tabCloseButtonWrapper}:hover) ${splitViewLabel}:last-of-type &`]:
{
color: cssVarV2('tab/iconColor/hover'),
},
}, },
}, },
]); ]);
@@ -177,7 +182,7 @@ export const tabCloseButton = style([
height: 16, height: 16,
borderRadius: 2, borderRadius: 2,
display: 'none', display: 'none',
color: cssVar('iconColor'), color: cssVarV2('tab/iconColor/default'),
selectors: { selectors: {
[`${tab}:is([data-active=true], :hover) &`]: { [`${tab}:is([data-active=true], :hover) &`]: {
display: 'flex', display: 'flex',
@@ -195,15 +200,16 @@ export const splitViewLabelText = style({
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
overflow: 'clip', overflow: 'clip',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
color: cssVar('textSecondaryColor'), color: cssVarV2('tab/fontColor/default'),
fontSize: cssVar('fontXs'), fontSize: cssVar('fontXs'),
paddingRight: 4, paddingRight: 4,
selectors: { selectors: {
[`${splitViewLabel}:hover &`]: { [`${splitViewLabel}:hover &, ${tab}:has(${tabCloseButtonWrapper}:hover) ${splitViewLabel}:last-of-type &`]:
color: cssVar('textPrimaryColor'), {
}, color: cssVarV2('tab/fontColor/hover'),
},
[`${splitViewLabel}[data-active="true"] &`]: { [`${splitViewLabel}[data-active="true"] &`]: {
color: cssVar('primaryColor'), color: cssVarV2('tab/fontColor/active'),
}, },
[`${splitViewLabel}:last-of-type &`]: { [`${splitViewLabel}:last-of-type &`]: {
textOverflow: 'clip', textOverflow: 'clip',