mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-13 08:06:24 +08:00
Qi
04172c5b04
Co-authored-by: Alex Yang <himself65@outlook.com>
(cherry picked from commit 75a2bbdfac)
83 lines
1.8 KiB
TypeScript
83 lines
1.8 KiB
TypeScript
import { globalStyle, style } from '@vanilla-extract/css';
|
|
|
|
export const settingHeader = style({
|
|
height: '68px',
|
|
borderBottom: '1px solid var(--affine-border-color)',
|
|
marginBottom: '24px',
|
|
});
|
|
|
|
globalStyle(`${settingHeader} .title`, {
|
|
fontSize: 'var(--affine-font-base)',
|
|
fontWeight: 600,
|
|
lineHeight: '24px',
|
|
marginBottom: '4px',
|
|
});
|
|
|
|
globalStyle(`${settingHeader} .subtitle`, {
|
|
fontSize: 'var(--affine-font-xs)',
|
|
lineHeight: '16px',
|
|
color: 'var(--affine-text-secondary-color)',
|
|
});
|
|
|
|
export const wrapper = style({
|
|
borderBottom: '1px solid var(--affine-border-color)',
|
|
paddingBottom: '24px',
|
|
marginBottom: '24px',
|
|
selectors: {
|
|
'&:last-of-type': {
|
|
borderBottom: 'none',
|
|
paddingBottom: '0',
|
|
marginBottom: '0',
|
|
},
|
|
},
|
|
});
|
|
|
|
globalStyle(`${wrapper} .title`, {
|
|
fontSize: 'var(--affine-font-sm)',
|
|
fontWeight: 600,
|
|
lineHeight: '18px',
|
|
color: 'var(--affine-text-secondary-color)',
|
|
marginBottom: '16px',
|
|
});
|
|
|
|
export const settingRow = style({
|
|
marginBottom: '25px',
|
|
color: 'var(--affine-text-primary-color)',
|
|
borderRadius: '8px',
|
|
selectors: {
|
|
'&.two-col': {
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
'&:last-of-type': {
|
|
marginBottom: '0',
|
|
},
|
|
},
|
|
});
|
|
|
|
globalStyle(`${settingRow} .left-col`, {
|
|
flex: 1,
|
|
maxWidth: '100%',
|
|
});
|
|
globalStyle(`${settingRow}.two-col .left-col`, {
|
|
flexShrink: 0,
|
|
maxWidth: '80%',
|
|
});
|
|
globalStyle(`${settingRow} .name`, {
|
|
marginBottom: '2px',
|
|
fontSize: 'var(--affine-font-sm)',
|
|
fontWeight: 600,
|
|
});
|
|
globalStyle(`${settingRow} .desc`, {
|
|
fontSize: 'var(--affine-font-xs)',
|
|
color: 'var(--affine-text-secondary-color)',
|
|
});
|
|
globalStyle(`${settingRow} .right-col`, {
|
|
width: '250px',
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
paddingLeft: '15px',
|
|
flexShrink: 0,
|
|
});
|