mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 04:18:54 +00:00
fix(core): replace most --affine with cssVar (#5728)
using a [babel plugin](https://gist.github.com/pengx17/49e24ae8a5a609bdaff122ee8c679d1c) to transform all var(--affine-xxx) to cssVar Some issues: - tried ast-grep but it seems to be not easy to add imports conditionally - current work does not work well with ts with types because babel will strip them out
This commit is contained in:
Peng Xiao
@@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const viewport = style({
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const errorLayout = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
@@ -8,34 +7,28 @@ export const errorLayout = style({
|
||||
width: '100%',
|
||||
gap: '20px',
|
||||
});
|
||||
|
||||
export const errorDetailStyle = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
maxWidth: '420px',
|
||||
});
|
||||
|
||||
export const errorTitle = style({
|
||||
fontSize: '32px',
|
||||
lineHeight: '44px',
|
||||
fontWeight: 700,
|
||||
});
|
||||
|
||||
export const errorImage = style({
|
||||
height: '178px',
|
||||
maxWidth: '400px',
|
||||
flexGrow: 1,
|
||||
backgroundSize: 'cover',
|
||||
});
|
||||
|
||||
export const errorDescription = style({
|
||||
marginTop: '24px',
|
||||
});
|
||||
|
||||
export const errorFooter = style({
|
||||
marginTop: '24px',
|
||||
});
|
||||
|
||||
export const errorDivider = style({
|
||||
width: '20px',
|
||||
height: '100%',
|
||||
|
||||
@@ -1,29 +1,26 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const authModalContent = style({
|
||||
marginTop: '30px',
|
||||
});
|
||||
|
||||
export const captchaWrapper = style({
|
||||
margin: 'auto',
|
||||
marginBottom: '4px',
|
||||
textAlign: 'center',
|
||||
});
|
||||
|
||||
export const authMessage = style({
|
||||
marginTop: '30px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: cssVar('fontXs'),
|
||||
lineHeight: 1.5,
|
||||
});
|
||||
globalStyle(`${authMessage} a`, {
|
||||
color: 'var(--affine-link-color)',
|
||||
color: cssVar('linkColor'),
|
||||
});
|
||||
globalStyle(`${authMessage} .link`, {
|
||||
cursor: 'pointer',
|
||||
color: 'var(--affine-link-color)',
|
||||
color: cssVar('linkColor'),
|
||||
});
|
||||
|
||||
export const forgetPasswordButtonRow = style({
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
@@ -32,24 +29,21 @@ export const forgetPasswordButtonRow = style({
|
||||
export const sendMagicLinkButtonRow = style({
|
||||
marginBottom: '30px',
|
||||
});
|
||||
|
||||
export const linkButton = style({
|
||||
color: 'var(--affine-link-color)',
|
||||
color: cssVar('linkColor'),
|
||||
background: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
lineHeight: '22px',
|
||||
userSelect: 'none',
|
||||
});
|
||||
|
||||
export const forgetPasswordButton = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
});
|
||||
|
||||
export const resendWrapper = style({
|
||||
height: 77,
|
||||
display: 'flex',
|
||||
@@ -58,16 +52,15 @@ export const resendWrapper = style({
|
||||
alignItems: 'center',
|
||||
marginTop: 30,
|
||||
});
|
||||
|
||||
export const sentRow = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
gap: '8px',
|
||||
lineHeight: '22px',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
});
|
||||
export const sentMessage = style({
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
fontWeight: 600,
|
||||
});
|
||||
export const resendCountdown = style({
|
||||
@@ -77,31 +70,29 @@ export const resendCountdown = style({
|
||||
export const resendCountdownInButton = style({
|
||||
width: 40,
|
||||
textAlign: 'center',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
marginLeft: 16,
|
||||
color: 'var(--affine-blue)',
|
||||
color: cssVar('blue'),
|
||||
fontWeight: 400,
|
||||
});
|
||||
|
||||
export const accessMessage = style({
|
||||
textAlign: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 500,
|
||||
marginTop: 65,
|
||||
marginBottom: 40,
|
||||
});
|
||||
|
||||
export const userPlanButton = style({
|
||||
display: 'flex',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
height: 20,
|
||||
fontWeight: 500,
|
||||
cursor: 'pointer',
|
||||
color: 'var(--affine-pure-white)',
|
||||
backgroundColor: 'var(--affine-brand-color)',
|
||||
color: cssVar('pureWhite'),
|
||||
backgroundColor: cssVar('brandColor'),
|
||||
padding: '0 4px',
|
||||
borderRadius: 4,
|
||||
justifyContent: 'center',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const loadingContainer = style({
|
||||
display: 'flex',
|
||||
width: '100vw',
|
||||
@@ -7,22 +7,19 @@ export const loadingContainer = style({
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const subscriptionLayout = style({
|
||||
margin: '10% auto',
|
||||
maxWidth: '536px',
|
||||
});
|
||||
|
||||
export const subscriptionBox = style({
|
||||
padding: '48px 52px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const subscriptionTips = style({
|
||||
margin: '20px 0',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: '12px',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: '400',
|
||||
|
||||
@@ -1,41 +1,34 @@
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const header = style({
|
||||
position: 'relative',
|
||||
marginTop: '44px',
|
||||
});
|
||||
|
||||
export const content = style({
|
||||
padding: '0 40px',
|
||||
fontSize: '18px',
|
||||
lineHeight: '26px',
|
||||
});
|
||||
|
||||
globalStyle(`${content} p`, {
|
||||
marginTop: '12px',
|
||||
marginBottom: '16px',
|
||||
});
|
||||
|
||||
export const contentTitle = style({
|
||||
fontSize: '20px',
|
||||
lineHeight: '28px',
|
||||
fontWeight: 600,
|
||||
paddingBottom: '16px',
|
||||
});
|
||||
|
||||
export const buttonGroup = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
gap: '20px',
|
||||
margin: '24px 0',
|
||||
});
|
||||
|
||||
export const radioGroup = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
});
|
||||
|
||||
export const radio = style({
|
||||
cursor: 'pointer',
|
||||
appearance: 'auto',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const hoveredLanguageItem = style({
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
});
|
||||
|
||||
@@ -1,35 +1,29 @@
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const block = style({});
|
||||
globalStyle(`${block} h1`, {
|
||||
fontSize: '40px',
|
||||
fontWeight: '600',
|
||||
lineHeight: '48px',
|
||||
});
|
||||
|
||||
globalStyle(`${block} h2`, {
|
||||
fontSize: '20px',
|
||||
fontWeight: '600',
|
||||
lineHeight: '28px',
|
||||
});
|
||||
|
||||
globalStyle(`${block} h3`, {
|
||||
fontSize: '18px',
|
||||
fontWeight: '600',
|
||||
lineHeight: '26px',
|
||||
});
|
||||
|
||||
globalStyle(`${block} p`, {
|
||||
fontSize: '15px',
|
||||
fontWeight: 400,
|
||||
lineHeight: '23px',
|
||||
});
|
||||
|
||||
globalStyle(`${block} b`, {
|
||||
// TODO: 500's effect not matching the design, use 600 for now
|
||||
fontWeight: '600',
|
||||
});
|
||||
|
||||
globalStyle(`${block} ol`, {
|
||||
counterReset: 'section',
|
||||
listStyleType: 'none',
|
||||
@@ -79,7 +73,6 @@ globalStyle(`${block} img.illustration`, {
|
||||
borderRadius: '5px',
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const link = style({
|
||||
color: '#1E67AF',
|
||||
});
|
||||
@@ -109,7 +102,6 @@ export const pageLinkLabel = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const quote = style({
|
||||
paddingLeft: '17px',
|
||||
position: 'relative',
|
||||
@@ -126,7 +118,6 @@ export const quote = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const hr = style({
|
||||
height: '1px',
|
||||
backgroundColor: '#E3E2E4',
|
||||
|
||||
@@ -1,28 +1,24 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { createVar, style } from '@vanilla-extract/css';
|
||||
|
||||
import { onboardingVars } from '../style.css';
|
||||
|
||||
export const paperWidthVar = createVar();
|
||||
export const paperHeightVar = createVar();
|
||||
|
||||
export const paper = style({
|
||||
vars: {
|
||||
[paperWidthVar]: onboardingVars.paper.w,
|
||||
[paperHeightVar]: onboardingVars.paper.h,
|
||||
},
|
||||
|
||||
width: paperWidthVar,
|
||||
height: paperHeightVar,
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
export const segment = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: onboardingVars.paper.bg,
|
||||
position: 'absolute',
|
||||
top: `calc(var(--segments-up) / var(--segments) * 100%)`,
|
||||
|
||||
// add a thin line behind to hide the gap between segments
|
||||
'::before': {
|
||||
content: '""',
|
||||
@@ -32,7 +28,6 @@ export const segment = style({
|
||||
height: '2px',
|
||||
background: onboardingVars.paper.bg,
|
||||
},
|
||||
|
||||
selectors: {
|
||||
['&[data-root="true"]::before']: {
|
||||
content: 'none',
|
||||
@@ -43,7 +38,6 @@ export const segment = style({
|
||||
['&[data-direction="down"]::before']: {
|
||||
top: -1,
|
||||
},
|
||||
|
||||
['&[data-root="true"]']: {
|
||||
height: `calc(1 / var(--segments) * 100%)`,
|
||||
},
|
||||
@@ -66,19 +60,16 @@ export const segment = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const contentWrapper = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
position: 'absolute',
|
||||
});
|
||||
|
||||
export const content = style({
|
||||
padding: '16px',
|
||||
overflow: 'hidden',
|
||||
fontFamily: 'var(--affine-font-family)',
|
||||
|
||||
fontFamily: cssVar('fontFamily'),
|
||||
selectors: {
|
||||
[`${contentWrapper} > &`]: {
|
||||
position: 'absolute',
|
||||
@@ -88,20 +79,17 @@ export const content = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const articleWrapper = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const article = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px',
|
||||
color: onboardingVars.paper.textColor,
|
||||
});
|
||||
|
||||
export const title = style({
|
||||
fontSize: '18px',
|
||||
fontWeight: 600,
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
import { paperLocation } from '../style.css';
|
||||
|
||||
const moveInAnim = keyframes({
|
||||
'0%': {
|
||||
transform: `translateZ(var(--fromZ)) translateX(var(--fromX)) translateY(var(--fromY)) rotateX(var(--fromRotateX)) rotateY(var(--fromRotateY)) rotateZ(var(--fromRotateZ))`,
|
||||
@@ -10,7 +9,6 @@ const moveInAnim = keyframes({
|
||||
transform: `translateZ(var(--toZ)) translateX(0) translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(var(--toRotateZ))`,
|
||||
},
|
||||
});
|
||||
|
||||
export const moveIn = style([
|
||||
paperLocation,
|
||||
{
|
||||
|
||||
@@ -1,22 +1,21 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
import { onboardingVars } from '../style.css';
|
||||
|
||||
export const edgelessSwitchWindow = style({
|
||||
vars: { '--bg-size': '10px' },
|
||||
vars: {
|
||||
'--bg-size': '10px',
|
||||
},
|
||||
borderRadius: onboardingVars.paper.r,
|
||||
backgroundColor: onboardingVars.paper.bg,
|
||||
position: 'relative',
|
||||
transition: `width ${onboardingVars.window.transition.size}, height ${onboardingVars.window.transition.size}, border-radius ${onboardingVars.window.transition.size}`,
|
||||
overflow: 'hidden',
|
||||
boxShadow: onboardingVars.web.windowShadow,
|
||||
|
||||
fontFamily: 'var(--affine-font-family)',
|
||||
fontFamily: cssVar('fontFamily'),
|
||||
color: onboardingVars.paper.textColor,
|
||||
|
||||
maxWidth: 'calc(100vw - 48px)',
|
||||
maxHeight: 'calc(100vh - 48px)',
|
||||
|
||||
selectors: {
|
||||
'&[data-mode="edgeless"]': {
|
||||
width: onboardingVars.edgeless.w,
|
||||
@@ -35,7 +34,6 @@ export const edgelessSwitchWindow = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const orbit = style({
|
||||
width: '200%',
|
||||
height: '100%',
|
||||
@@ -55,7 +53,6 @@ export const orbitItem = style({
|
||||
flexGrow: 0,
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const doc = style({
|
||||
selectors: {
|
||||
// grid background
|
||||
@@ -63,13 +60,11 @@ export const doc = style({
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
|
||||
backgroundImage: onboardingVars.canvas.bgImage,
|
||||
backgroundRepeat: 'repeat',
|
||||
backgroundSize: 'calc(24px * var(--scale)) calc(24px * var(--scale))',
|
||||
backgroundPositionX: 'calc(var(--offset-x) * var(--scale))',
|
||||
backgroundPositionY: 'calc(var(--offset-y) * var(--scale))',
|
||||
|
||||
opacity: 0,
|
||||
pointerEvents: 'none',
|
||||
transition: 'opacity 0.3s ease',
|
||||
@@ -79,7 +74,6 @@ export const doc = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const wellDone = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -89,7 +83,6 @@ export const wellDone = style({
|
||||
textAlign: 'center',
|
||||
userSelect: 'none',
|
||||
});
|
||||
|
||||
const wellDoneSlideIn = keyframes({
|
||||
from: {
|
||||
transform: 'translateX(100px)',
|
||||
@@ -106,13 +99,20 @@ export const wellDoneEnterAnim = style({
|
||||
'[data-mode="well-done"] &': {
|
||||
animation: `${wellDoneSlideIn} 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) forwards`,
|
||||
},
|
||||
'&:nth-child(1)': { animationDelay: '0.1s' },
|
||||
'&:nth-child(2)': { animationDelay: '0.15s' },
|
||||
'&:nth-child(3)': { animationDelay: '0.2s' },
|
||||
'&:nth-child(4)': { animationDelay: '0.25s' },
|
||||
'&:nth-child(1)': {
|
||||
animationDelay: '0.1s',
|
||||
},
|
||||
'&:nth-child(2)': {
|
||||
animationDelay: '0.15s',
|
||||
},
|
||||
'&:nth-child(3)': {
|
||||
animationDelay: '0.2s',
|
||||
},
|
||||
'&:nth-child(4)': {
|
||||
animationDelay: '0.25s',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const wellDoneTitle = style({
|
||||
fontSize: 28,
|
||||
lineHeight: '36px',
|
||||
@@ -123,21 +123,18 @@ export const wellDoneContent = style({
|
||||
lineHeight: '24px',
|
||||
fontWeight: '400',
|
||||
});
|
||||
|
||||
export const toolbar = style({
|
||||
position: 'absolute',
|
||||
bottom: '20px',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%) translateY(200px)',
|
||||
transition: 'transform 0.3s ease',
|
||||
|
||||
selectors: {
|
||||
[`${edgelessSwitchWindow}[data-mode="edgeless"] &`]: {
|
||||
transform: 'translateX(-50%) translateY(0px)',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const canvas = style({
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
@@ -148,7 +145,6 @@ export const canvas = style({
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start',
|
||||
overflowY: 'visible',
|
||||
|
||||
selectors: {
|
||||
'[data-scroll="true"] &': {
|
||||
overflowY: 'auto',
|
||||
@@ -165,14 +161,12 @@ export const canvas = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const page = style({
|
||||
width: '800px',
|
||||
minHeight: onboardingVars.article.h,
|
||||
paddingTop: '150px',
|
||||
paddingBottom: '150px',
|
||||
});
|
||||
|
||||
export const noDragWrapper = style({
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
@@ -181,7 +175,6 @@ export const noDragWrapper = style({
|
||||
globalStyle(`${noDragWrapper} > *`, {
|
||||
pointerEvents: 'auto',
|
||||
});
|
||||
|
||||
export const header = style({
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
|
||||
@@ -1,22 +1,32 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
import { onboardingVars, paperLocation } from '../style.css';
|
||||
|
||||
const unfolding = onboardingVars.unfolding;
|
||||
|
||||
const shadowIn = keyframes({
|
||||
from: { boxShadow: `0px 0px 0px rgba(0, 0, 0, 0)` },
|
||||
to: { boxShadow: `0px 0px 4px rgba(66, 65, 73, 0.14)` },
|
||||
from: {
|
||||
boxShadow: `0px 0px 0px rgba(0, 0, 0, 0)`,
|
||||
},
|
||||
to: {
|
||||
boxShadow: `0px 0px 4px rgba(66, 65, 73, 0.14)`,
|
||||
},
|
||||
});
|
||||
const borderIn = keyframes({
|
||||
from: { opacity: 0 },
|
||||
to: { opacity: 1 },
|
||||
from: {
|
||||
opacity: 0,
|
||||
},
|
||||
to: {
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
const fadeOut = keyframes({
|
||||
from: { opacity: 1 },
|
||||
to: { opacity: 0 },
|
||||
from: {
|
||||
opacity: 1,
|
||||
},
|
||||
to: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
export const unfoldingWrapper = style([
|
||||
paperLocation,
|
||||
{
|
||||
@@ -27,29 +37,23 @@ export const unfoldingWrapper = style([
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
|
||||
transform:
|
||||
'rotate(var(--toRotateZ)) translateY(var(--hover-offset-y)) scale(var(--hover-scale))',
|
||||
cursor: 'pointer',
|
||||
|
||||
backgroundColor: onboardingVars.paper.bg,
|
||||
borderRadius: onboardingVars.paper.r,
|
||||
width: onboardingVars.paper.w,
|
||||
height: onboardingVars.paper.h,
|
||||
|
||||
// animate in
|
||||
boxShadow: `0px 0px 0px rgba(0, 0, 0, 0)`,
|
||||
animation: `${shadowIn} 0.5s ease forwards`,
|
||||
|
||||
transition: `all 0.23s ease, width ${unfolding.sizeTransition}, height ${unfolding.sizeTransition}, transform ${unfolding.transformTransition}`,
|
||||
|
||||
':hover': {
|
||||
vars: {
|
||||
'--hover-offset-y': '-10px',
|
||||
'--hover-scale': '1.03',
|
||||
},
|
||||
},
|
||||
|
||||
'::before': {
|
||||
// hack border
|
||||
content: '""',
|
||||
@@ -60,7 +64,6 @@ export const unfoldingWrapper = style([
|
||||
animation: `${borderIn} 0.5s ease forwards`,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
selectors: {
|
||||
'&[data-fold="false"]': {
|
||||
vars: {
|
||||
@@ -77,15 +80,12 @@ export const unfoldingWrapper = style([
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const unfoldingContent = style({
|
||||
width: onboardingVars.paper.w,
|
||||
height: onboardingVars.paper.h,
|
||||
|
||||
padding: '16px',
|
||||
overflow: 'hidden',
|
||||
fontFamily: 'var(--affine-font-family)',
|
||||
|
||||
fontFamily: cssVar('fontFamily'),
|
||||
selectors: {
|
||||
'&.leave': {
|
||||
animation: `${fadeOut} 0.1s ease forwards`,
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
// in case that we need to support dark mode later
|
||||
export const onboardingVars = {
|
||||
window: {
|
||||
bg: 'white',
|
||||
shadow: 'var(--affine-shadow-1)',
|
||||
shadow: cssVar('shadow1'),
|
||||
transition: {
|
||||
size: '0.3s ease',
|
||||
},
|
||||
@@ -27,7 +28,6 @@ export const onboardingVars = {
|
||||
windowShadow:
|
||||
'1px 18px 39px 0px rgba(0, 0, 0, 0.15), 5px 71px 71px 0px rgba(0, 0, 0, 0.09), 12px 160px 96px 0px rgba(0, 0, 0, 0.05), 20px 284px 114px 0px rgba(0, 0, 0, 0.01), 32px 443px 124px 0px rgba(0, 0, 0, 0.00)',
|
||||
},
|
||||
|
||||
article: {
|
||||
w: '1200px',
|
||||
h: '800px',
|
||||
@@ -43,39 +43,36 @@ export const onboardingVars = {
|
||||
h: '600px',
|
||||
r: '12px',
|
||||
},
|
||||
|
||||
canvas: {
|
||||
width: 3500,
|
||||
height: 3500,
|
||||
pageBlockWidth: 800,
|
||||
bgImage: 'radial-gradient(#e6e6e6 1px, #fff 1px)',
|
||||
},
|
||||
|
||||
toolbar: {
|
||||
bg: 'white',
|
||||
borderColor: '#E3E2E4',
|
||||
},
|
||||
|
||||
block: {
|
||||
transition: '0.5s ease',
|
||||
},
|
||||
|
||||
animateIn: {
|
||||
tooltipShowUpDelay: '5s',
|
||||
nextButtonShowUpDelay: '20s',
|
||||
},
|
||||
};
|
||||
|
||||
export const perspective = style({
|
||||
perspective: '10000px',
|
||||
transformStyle: 'preserve-3d',
|
||||
});
|
||||
|
||||
export const fadeIn = keyframes({
|
||||
from: { opacity: 0 },
|
||||
to: { opacity: 1 },
|
||||
from: {
|
||||
opacity: 0,
|
||||
},
|
||||
to: {
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
export const onboarding = style([
|
||||
perspective,
|
||||
{
|
||||
@@ -85,7 +82,6 @@ export const onboarding = style([
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative',
|
||||
|
||||
selectors: {
|
||||
// hack background color for web
|
||||
'&::after': {
|
||||
@@ -108,12 +104,10 @@ export const onboarding = style([
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
globalStyle(`${onboarding} *`, {
|
||||
perspective: '10000px',
|
||||
transformStyle: 'preserve-3d',
|
||||
});
|
||||
|
||||
export const offsetOrigin = style({
|
||||
width: 0,
|
||||
height: 0,
|
||||
@@ -122,13 +116,11 @@ export const offsetOrigin = style({
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const paperLocation = style({
|
||||
position: 'absolute',
|
||||
left: `calc(var(--offset-x) - ${onboardingVars.paper.w} / 2)`,
|
||||
top: `calc(var(--offset-y) - ${onboardingVars.paper.h} / 2)`,
|
||||
});
|
||||
|
||||
export const tipsWrapper = style({
|
||||
position: 'absolute',
|
||||
width: `calc(${onboardingVars.article.w} - 48px)`,
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { createVar, globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
const headerHeight = createVar('header-height');
|
||||
const footerHeight = createVar('footer-height');
|
||||
const historyListWidth = createVar('history-list-width');
|
||||
|
||||
export const root = style({
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
@@ -13,7 +12,6 @@ export const root = style({
|
||||
[historyListWidth]: '240px',
|
||||
},
|
||||
});
|
||||
|
||||
export const modalContent = style({
|
||||
display: 'flex',
|
||||
height: `calc(100% - ${footerHeight})`,
|
||||
@@ -26,7 +24,6 @@ export const modalContent = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const previewWrapper = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -35,9 +32,8 @@ export const previewWrapper = style({
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: `calc(100% - ${historyListWidth})`,
|
||||
backgroundColor: 'var(--affine-background-secondary-color)',
|
||||
backgroundColor: cssVar('backgroundSecondaryColor'),
|
||||
});
|
||||
|
||||
export const previewContainer = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -48,12 +44,11 @@ export const previewContainer = style({
|
||||
borderTopLeftRadius: 8,
|
||||
borderTopRightRadius: 8,
|
||||
overflow: 'hidden',
|
||||
boxShadow: 'var(--affine-shadow-3)',
|
||||
boxShadow: cssVar('shadow3'),
|
||||
height: 'calc(100% - 40px)',
|
||||
width: `calc(100% - 80px)`,
|
||||
backgroundColor: 'var(--affine-background-secondary-color)',
|
||||
backgroundColor: cssVar('backgroundSecondaryColor'),
|
||||
});
|
||||
|
||||
export const previewContainerStack1 = style([
|
||||
previewContainer,
|
||||
{
|
||||
@@ -62,7 +57,6 @@ export const previewContainerStack1 = style([
|
||||
width: `calc(100% - 96px)`,
|
||||
},
|
||||
]);
|
||||
|
||||
export const previewContainerStack2 = style([
|
||||
previewContainer,
|
||||
{
|
||||
@@ -71,42 +65,38 @@ export const previewContainerStack2 = style([
|
||||
width: `calc(100% - 112px)`,
|
||||
},
|
||||
]);
|
||||
|
||||
export const previewHeader = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: headerHeight,
|
||||
borderBottom: '1px solid var(--affine-border-color)',
|
||||
backgroundColor: 'var(--affine-background-primary-color)',
|
||||
borderBottom: `1px solid ${cssVar('borderColor')}`,
|
||||
backgroundColor: cssVar('backgroundPrimaryColor'),
|
||||
padding: '0 12px',
|
||||
flexShrink: 0,
|
||||
gap: 12,
|
||||
});
|
||||
|
||||
export const previewHeaderTitle = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 600,
|
||||
maxWidth: 400, // better responsiveness
|
||||
maxWidth: 400,
|
||||
// better responsiveness
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
export const previewHeaderTimestamp = style({
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
backgroundColor: 'var(--affine-background-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
backgroundColor: cssVar('backgroundSecondaryColor'),
|
||||
padding: '0 10px',
|
||||
borderRadius: 4,
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
});
|
||||
|
||||
export const editor = style({
|
||||
height: '100%',
|
||||
flexGrow: 1,
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const rowWrapper = style({
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
@@ -116,7 +106,7 @@ export const rowWrapper = style({
|
||||
content: '""',
|
||||
width: 1,
|
||||
height: '100%',
|
||||
backgroundColor: 'var(--affine-border-color)',
|
||||
backgroundColor: cssVar('borderColor'),
|
||||
position: 'absolute',
|
||||
left: 16,
|
||||
top: 0,
|
||||
@@ -136,61 +126,53 @@ export const rowWrapper = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const loadingContainer = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
backgroundColor: 'var(--affine-background-primary-color)',
|
||||
backgroundColor: cssVar('backgroundPrimaryColor'),
|
||||
});
|
||||
|
||||
export const historyList = style({
|
||||
overflow: 'hidden',
|
||||
height: '100%',
|
||||
width: historyListWidth,
|
||||
flexShrink: 0,
|
||||
borderLeft: '1px solid var(--affine-border-color)',
|
||||
borderLeft: `1px solid ${cssVar('borderColor')}`,
|
||||
});
|
||||
|
||||
export const historyListScrollable = style({
|
||||
height: `calc(100% - ${headerHeight})`,
|
||||
});
|
||||
|
||||
export const historyListScrollableInner = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
});
|
||||
|
||||
export const historyListHeader = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: 52,
|
||||
borderBottom: '1px solid var(--affine-border-color)',
|
||||
borderBottom: `1px solid ${cssVar('borderColor')}`,
|
||||
fontWeight: 'bold',
|
||||
flexShrink: 0,
|
||||
padding: '0 12px',
|
||||
});
|
||||
|
||||
export const historyItemGroup = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
});
|
||||
|
||||
export const historyItemGroupTitle = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0 12px 0 4px',
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
gap: 4,
|
||||
backgroundColor: 'var(--affine-background-primary-color)',
|
||||
backgroundColor: cssVar('backgroundPrimaryColor'),
|
||||
height: 28,
|
||||
':hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
});
|
||||
|
||||
export const historyItem = style([
|
||||
rowWrapper,
|
||||
{
|
||||
@@ -201,16 +183,16 @@ export const historyItem = style([
|
||||
cursor: 'pointer',
|
||||
selectors: {
|
||||
'&:hover, &[data-active=true]': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
// draw circle
|
||||
'&::after': {
|
||||
content: '""',
|
||||
width: 7,
|
||||
height: 7,
|
||||
backgroundColor: 'var(--affine-background-secondary-color)',
|
||||
backgroundColor: cssVar('backgroundSecondaryColor'),
|
||||
borderRadius: '50%',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
position: 'absolute',
|
||||
left: 16,
|
||||
top: '50%',
|
||||
@@ -218,51 +200,50 @@ export const historyItem = style([
|
||||
transform: 'translate(-50%, -50%)',
|
||||
},
|
||||
'&[data-active=true]::after': {
|
||||
backgroundColor: 'var(--affine-primary-color)',
|
||||
borderColor: 'var(--affine-black-30)',
|
||||
backgroundColor: cssVar('primaryColor'),
|
||||
borderColor: cssVar('black30'),
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const historyItemGap = style([rowWrapper, { height: 16 }]);
|
||||
|
||||
export const historyItemGap = style([
|
||||
rowWrapper,
|
||||
{
|
||||
height: 16,
|
||||
},
|
||||
]);
|
||||
export const historyItemLoadMore = style([
|
||||
historyItem,
|
||||
{
|
||||
cursor: 'pointer',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
flexShrink: 0,
|
||||
borderRadius: 0,
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
globalStyle(`${historyItem} button`, {
|
||||
color: 'inherit',
|
||||
});
|
||||
|
||||
export const historyFooter = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: 68,
|
||||
borderTop: '1px solid var(--affine-border-color)',
|
||||
borderTop: `1px solid ${cssVar('borderColor')}`,
|
||||
padding: '0 24px',
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
});
|
||||
|
||||
export const spacer = style({
|
||||
flexGrow: 1,
|
||||
});
|
||||
|
||||
export const emptyHistoryPrompt = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -273,19 +254,16 @@ export const emptyHistoryPrompt = style({
|
||||
zIndex: 1,
|
||||
gap: 20,
|
||||
});
|
||||
|
||||
export const emptyHistoryPromptTitle = style({
|
||||
fontWeight: 600,
|
||||
fontSize: 'var(--affine-font-h-5)',
|
||||
fontSize: cssVar('fontH5'),
|
||||
});
|
||||
|
||||
export const emptyHistoryPromptDescription = style({
|
||||
width: 320,
|
||||
textAlign: 'center',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
});
|
||||
|
||||
export const collapsedIcon = style({
|
||||
transition: 'transform 0.2s ease-in-out',
|
||||
selectors: {
|
||||
@@ -294,7 +272,6 @@ export const collapsedIcon = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const collapsedIconContainer = style({
|
||||
fontSize: 24,
|
||||
display: 'flex',
|
||||
@@ -309,29 +286,25 @@ export const collapsedIconContainer = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const planPromptWrapper = style({
|
||||
padding: '4px 12px',
|
||||
});
|
||||
|
||||
export const planPrompt = style({
|
||||
gap: 6,
|
||||
borderRadius: 8,
|
||||
flexDirection: 'column',
|
||||
padding: 10,
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
backgroundColor: 'var(--affine-background-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
backgroundColor: cssVar('backgroundSecondaryColor'),
|
||||
});
|
||||
|
||||
export const planPromptTitle = style({
|
||||
fontWeight: 600,
|
||||
marginBottom: 14,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
});
|
||||
|
||||
export const planPromptUpdateButton = style({
|
||||
textDecoration: 'underline',
|
||||
cursor: 'pointer',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const paymentDisableModalContent = style({
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
});
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
export const profileInputWrapper = style({
|
||||
marginLeft: '20px',
|
||||
});
|
||||
globalStyle(`${profileInputWrapper} label`, {
|
||||
display: 'block',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
marginBottom: '4px',
|
||||
});
|
||||
|
||||
export const avatarWrapper = style({
|
||||
width: '56px',
|
||||
height: '56px',
|
||||
@@ -36,10 +36,9 @@ globalStyle(`${avatarWrapper} .camera-icon-wrapper`, {
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(60, 61, 63, 0.5)',
|
||||
zIndex: '1',
|
||||
color: 'var(--affine-white)',
|
||||
fontSize: 'var(--affine-font-h-4)',
|
||||
color: cssVar('white'),
|
||||
fontSize: cssVar('fontH4'),
|
||||
});
|
||||
|
||||
export const button = style({
|
||||
padding: '4px 12px',
|
||||
});
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const link = style({
|
||||
height: '18px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 600,
|
||||
marginBottom: '12px',
|
||||
selectors: {
|
||||
@@ -14,13 +14,11 @@ export const link = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
globalStyle(`${link} .icon`, {
|
||||
color: 'var(--affine-icon-color)',
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
color: cssVar('iconColor'),
|
||||
fontSize: cssVar('fontBase'),
|
||||
marginLeft: '5px',
|
||||
});
|
||||
|
||||
export const communityWrapper = style({
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '15% 15% 15% 15% 15% 15%',
|
||||
@@ -28,8 +26,8 @@ export const communityWrapper = style({
|
||||
});
|
||||
export const communityItem = style({
|
||||
borderRadius: '8px',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
color: cssVar('textPrimaryColor'),
|
||||
cursor: 'pointer',
|
||||
padding: '6px 8px',
|
||||
});
|
||||
@@ -40,30 +38,27 @@ globalStyle(`${communityItem} svg`, {
|
||||
margin: '0 auto 2px',
|
||||
});
|
||||
globalStyle(`${communityItem} p`, {
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
textAlign: 'center',
|
||||
});
|
||||
|
||||
export const checkUpdateDesc = style({
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: cssVar('fontXs'),
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
selectors: {
|
||||
'&.active': {
|
||||
color: 'var(--affine-text-emphasis-color)',
|
||||
color: cssVar('textEmphasisColor'),
|
||||
},
|
||||
'&.error': {
|
||||
color: 'var(--affine-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
globalStyle(`${checkUpdateDesc} svg`, {
|
||||
marginRight: '4px',
|
||||
});
|
||||
|
||||
export const appImageRow = style({
|
||||
flexDirection: 'row-reverse',
|
||||
selectors: {
|
||||
@@ -72,7 +67,6 @@ export const appImageRow = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
globalStyle(`${appImageRow} .right-col`, {
|
||||
paddingLeft: '0',
|
||||
paddingRight: '20px',
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const settingWrapper = style({
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const subscription = style({});
|
||||
|
||||
export const history = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -11,61 +10,50 @@ export const history = style({
|
||||
export const historyContent = style({
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const planCard = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '12px',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
borderRadius: '8px',
|
||||
});
|
||||
|
||||
export const currentPlan = style({
|
||||
flex: '1 0 0',
|
||||
});
|
||||
|
||||
export const planAction = style({
|
||||
marginTop: '8px',
|
||||
});
|
||||
|
||||
export const planPrice = style({
|
||||
fontSize: 'var(--affine-font-h-6)',
|
||||
fontSize: cssVar('fontH6'),
|
||||
fontWeight: 600,
|
||||
});
|
||||
|
||||
export const billingFrequency = style({
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
});
|
||||
|
||||
export const paymentMethod = style({
|
||||
marginTop: '24px',
|
||||
});
|
||||
|
||||
globalStyle('.dangerous-setting .name', {
|
||||
color: 'var(--affine-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
});
|
||||
|
||||
export const noInvoice = style({
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: cssVar('fontXs'),
|
||||
});
|
||||
|
||||
export const currentPlanName = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 500,
|
||||
color: 'var(--affine-text-emphasis-color)',
|
||||
color: cssVar('textEmphasisColor'),
|
||||
cursor: 'pointer',
|
||||
});
|
||||
export const button = style({
|
||||
padding: '4px 12px',
|
||||
});
|
||||
|
||||
export const subscriptionSettingSkeleton = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '24px',
|
||||
});
|
||||
|
||||
export const billingHistorySkeleton = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const plansLayoutRoot = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '24px',
|
||||
});
|
||||
|
||||
export const scrollArea = style({
|
||||
marginLeft: 'calc(-1 * var(--setting-modal-gap-x))',
|
||||
paddingLeft: 'var(--setting-modal-gap-x)',
|
||||
@@ -13,12 +12,10 @@ export const scrollArea = style({
|
||||
overflowX: 'auto',
|
||||
scrollSnapType: 'x mandatory',
|
||||
paddingBottom: '21px',
|
||||
|
||||
/** Avoid box-shadow clipping */
|
||||
paddingTop: '21px',
|
||||
marginTop: '-21px',
|
||||
});
|
||||
|
||||
export const scrollBar = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -27,25 +24,22 @@ export const scrollBar = style({
|
||||
height: '9px',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const scrollThumb = style({
|
||||
background: 'var(--affine-icon-secondary)',
|
||||
background: cssVar('iconSecondary'),
|
||||
opacity: 0.6,
|
||||
overflow: 'hidden',
|
||||
height: '4px',
|
||||
borderRadius: '4px',
|
||||
|
||||
vars: {
|
||||
'--radix-scroll-area-thumb-height': '4px',
|
||||
},
|
||||
});
|
||||
|
||||
export const allPlansLink = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
color: 'var(--affine-link-color)',
|
||||
color: cssVar('linkColor'),
|
||||
background: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
});
|
||||
|
||||
@@ -1,23 +1,21 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const plansWrapper = style({
|
||||
display: 'flex',
|
||||
gap: '16px',
|
||||
});
|
||||
|
||||
export const planItemCard = style({
|
||||
width: '258px',
|
||||
height: '426px',
|
||||
flexShrink: '0',
|
||||
borderRadius: '16px',
|
||||
backgroundColor: 'var(--affine-background-primary-color)',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
backgroundColor: cssVar('backgroundPrimaryColor'),
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
padding: '20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '20px',
|
||||
});
|
||||
|
||||
export const planItemHeader = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const wrapper = style({
|
||||
width: '100%',
|
||||
});
|
||||
export const recurringRadioGroup = style({
|
||||
width: '256px',
|
||||
});
|
||||
|
||||
export const radioButtonDiscount = style({
|
||||
marginLeft: '4px',
|
||||
color: 'var(--affine-brand-color)',
|
||||
color: cssVar('brandColor'),
|
||||
fontWeight: 400,
|
||||
});
|
||||
export const radioButtonText = style({
|
||||
@@ -19,23 +18,20 @@ export const radioButtonText = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const planCardsWrapper = style({
|
||||
paddingRight: 'calc(var(--setting-modal-gap-x) + 30px)',
|
||||
display: 'flex',
|
||||
gap: '16px',
|
||||
width: 'fit-content',
|
||||
});
|
||||
|
||||
export const planCard = style({
|
||||
backgroundColor: 'var(--affine-background-primary-color)',
|
||||
backgroundColor: cssVar('backgroundPrimaryColor'),
|
||||
minHeight: '426px',
|
||||
minWidth: '258px',
|
||||
borderRadius: '16px',
|
||||
padding: '20px',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
position: 'relative',
|
||||
|
||||
selectors: {
|
||||
'&::before': {
|
||||
content: '',
|
||||
@@ -45,47 +41,43 @@ export const planCard = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const proPlanCard = style([
|
||||
planCard,
|
||||
{
|
||||
borderWidth: '1px',
|
||||
borderColor: 'var(--affine-brand-color)',
|
||||
boxShadow: 'var(--affine-shadow-2)',
|
||||
borderColor: cssVar('brandColor'),
|
||||
boxShadow: cssVar('shadow2'),
|
||||
position: 'relative',
|
||||
'::after': {
|
||||
content: '',
|
||||
position: 'absolute',
|
||||
inset: '-1px',
|
||||
borderRadius: 'inherit',
|
||||
boxShadow: '0px 0px 0px 2px var(--affine-brand-color)',
|
||||
boxShadow: `0px 0px 0px 2px ${cssVar('brandColor')}`,
|
||||
opacity: 0.3,
|
||||
zIndex: 1,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const proPlanTitle = style({
|
||||
backgroundColor: 'var(--affine-brand-color)',
|
||||
color: 'var(--affine-white)',
|
||||
backgroundColor: cssVar('brandColor'),
|
||||
color: cssVar('white'),
|
||||
padding: '0px 6px',
|
||||
borderRadius: '4px',
|
||||
height: '24px',
|
||||
display: 'inline-block',
|
||||
});
|
||||
|
||||
export const discountLabel = style({
|
||||
color: 'var(--affine-text-emphasis-color)',
|
||||
color: cssVar('textEmphasisColor'),
|
||||
marginLeft: '8px',
|
||||
lineHeight: '20px',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 500,
|
||||
borderRadius: '4px',
|
||||
display: 'inline-block',
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
export const planTitle = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -93,36 +85,30 @@ export const planTitle = style({
|
||||
gap: '10px',
|
||||
fontWeight: 600,
|
||||
});
|
||||
|
||||
export const planPriceWrapper = style({
|
||||
minHeight: '28px',
|
||||
lineHeight: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
});
|
||||
|
||||
export const planPrice = style({
|
||||
fontSize: 'var(--affine-font-h-5)',
|
||||
fontSize: cssVar('fontH5'),
|
||||
marginRight: '8px',
|
||||
});
|
||||
|
||||
export const planPriceDesc = style({
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: cssVar('fontSm'),
|
||||
});
|
||||
|
||||
export const planAction = style({
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const planBenefits = style({
|
||||
marginTop: '20px',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
});
|
||||
|
||||
export const planBenefit = style({
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
@@ -130,52 +116,44 @@ export const planBenefit = style({
|
||||
alignItems: 'normal',
|
||||
fontSize: '12px',
|
||||
});
|
||||
|
||||
export const planBenefitIcon = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: '20px',
|
||||
});
|
||||
|
||||
export const planBenefitText = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const downgradeContentWrapper = style({
|
||||
padding: '12px 0 20px 0px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px',
|
||||
});
|
||||
|
||||
export const downgradeContent = style({
|
||||
fontSize: '15px',
|
||||
lineHeight: '24px',
|
||||
fontWeight: 400,
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
});
|
||||
|
||||
export const downgradeCaption = style({
|
||||
fontSize: '14px',
|
||||
lineHeight: '22px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
});
|
||||
|
||||
export const downgradeFooter = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
gap: '20px',
|
||||
paddingTop: '20px',
|
||||
});
|
||||
|
||||
export const textEmphasis = style({
|
||||
color: 'var(--affine-text-emphasis-color)',
|
||||
color: cssVar('textEmphasisColor'),
|
||||
});
|
||||
|
||||
export const errorTip = style({
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: '12px',
|
||||
lineHeight: '20px',
|
||||
});
|
||||
|
||||
@@ -1,19 +1,18 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const shortcutRow = style({
|
||||
height: '32px',
|
||||
marginBottom: '12px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
selectors: {
|
||||
'&:last-of-type': {
|
||||
marginBottom: '0',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const shortcutKeyContainer = style({
|
||||
display: 'flex',
|
||||
});
|
||||
@@ -25,8 +24,8 @@ export const shortcutKey = style({
|
||||
justifyContent: 'center',
|
||||
padding: '0 6px',
|
||||
borderRadius: '4px',
|
||||
background: 'var(--affine-background-tertiary-color)',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
background: cssVar('backgroundTertiaryColor'),
|
||||
fontSize: cssVar('fontXs'),
|
||||
selectors: {
|
||||
'&:not(:last-of-type)': {
|
||||
marginRight: '2px',
|
||||
|
||||
@@ -1,27 +1,25 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const settingSlideBar = style({
|
||||
width: '25%',
|
||||
maxWidth: '242px',
|
||||
background: 'var(--affine-background-secondary-color)',
|
||||
background: cssVar('backgroundSecondaryColor'),
|
||||
padding: '20px 0px',
|
||||
height: '100%',
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
});
|
||||
|
||||
export const sidebarTitle = style({
|
||||
fontSize: 'var(--affine-font-h-6)',
|
||||
fontSize: cssVar('fontH6'),
|
||||
fontWeight: '600',
|
||||
lineHeight: 'var(--affine-line-height)',
|
||||
lineHeight: cssVar('lineHeight'),
|
||||
padding: '0px 16px 0px 24px',
|
||||
});
|
||||
|
||||
export const sidebarSubtitle = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
lineHeight: 'var(--affine-line-height)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
lineHeight: cssVar('lineHeight'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
padding: '0px 16px 0px 24px',
|
||||
marginTop: '20px',
|
||||
marginBottom: '4px',
|
||||
@@ -29,7 +27,6 @@ export const sidebarSubtitle = style({
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const sidebarItemsWrapper = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -41,7 +38,6 @@ export const sidebarItemsWrapper = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const sidebarSelectItem = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -49,20 +45,19 @@ export const sidebarSelectItem = style({
|
||||
padding: '0px 8px',
|
||||
height: '30px',
|
||||
flexShrink: 0,
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
':hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
selectors: {
|
||||
'&.active': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const sidebarSelectSubItem = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -70,18 +65,17 @@ export const sidebarSelectSubItem = style({
|
||||
padding: '0px 8px 0px 32px',
|
||||
height: '30px',
|
||||
flexShrink: 0,
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
selectors: {
|
||||
'&.active, &:hover': {
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
globalStyle(`${settingSlideBar} .icon`, {
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
@@ -107,13 +101,13 @@ export const currentWorkspaceLabel = style({
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: 'var(--affine-blue)',
|
||||
background: cssVar('blue'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const sidebarFooter = style({ padding: '0 16px' });
|
||||
|
||||
export const sidebarFooter = style({
|
||||
padding: '0 16px',
|
||||
});
|
||||
export const accountButton = style({
|
||||
padding: '4px 8px',
|
||||
borderRadius: '8px',
|
||||
@@ -124,15 +118,14 @@ export const accountButton = style({
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
':hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
selectors: {
|
||||
'&.active': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
globalStyle(`${accountButton} .avatar`, {
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
@@ -143,12 +136,11 @@ globalStyle(`${accountButton} .avatar`, {
|
||||
alignItems: 'center',
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
globalStyle(`${accountButton} .avatar.not-sign`, {
|
||||
color: 'var(--affine-icon-secondary)',
|
||||
background: 'var(--affine-white)',
|
||||
color: cssVar('iconSecondary'),
|
||||
background: cssVar('white'),
|
||||
paddingBottom: '2px',
|
||||
border: '1px solid var(--affine-icon-secondary)',
|
||||
border: `1px solid ${cssVar('iconSecondary')}`,
|
||||
});
|
||||
globalStyle(`${accountButton} .content`, {
|
||||
flexGrow: '1',
|
||||
@@ -163,7 +155,7 @@ globalStyle(`${accountButton} .name-container`, {
|
||||
height: '22px',
|
||||
});
|
||||
globalStyle(`${accountButton} .name`, {
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 600,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
@@ -171,8 +163,8 @@ globalStyle(`${accountButton} .name`, {
|
||||
height: '22px',
|
||||
});
|
||||
globalStyle(`${accountButton} .email`, {
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
|
||||
@@ -1,50 +1,42 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const wrapper = style({
|
||||
flexGrow: '1',
|
||||
height: '100%',
|
||||
|
||||
// margin: '0 auto',
|
||||
padding: '40px 15px 20px 15px',
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto',
|
||||
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
|
||||
'::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
});
|
||||
|
||||
export const centerContainer = style({
|
||||
width: '100%',
|
||||
maxWidth: '560px',
|
||||
});
|
||||
|
||||
export const content = style({
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
marginBottom: '24px',
|
||||
minHeight: 'calc(100% - 48px)',
|
||||
});
|
||||
|
||||
export const suggestionLink = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
color: cssVar('textPrimaryColor'),
|
||||
display: 'flex',
|
||||
alignItems: 'start',
|
||||
lineHeight: '22px',
|
||||
gap: '12px',
|
||||
});
|
||||
|
||||
export const suggestionLinkIcon = style({
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
marginRight: '12px',
|
||||
display: 'flex',
|
||||
margin: '3px 0',
|
||||
});
|
||||
|
||||
export const footer = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
height: 100,
|
||||
display: 'flex',
|
||||
|
||||
@@ -1,25 +1,22 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const promptRoot = style({
|
||||
position: 'absolute',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
export const promptTitle = style({
|
||||
fontSize: 'var(--affine-font-h-4)',
|
||||
fontSize: cssVar('fontH4'),
|
||||
fontWeight: '600',
|
||||
marginBottom: 48,
|
||||
});
|
||||
|
||||
export const promptArt = style({
|
||||
marginBottom: 68,
|
||||
});
|
||||
|
||||
export const promptWarning = style({
|
||||
backgroundColor: 'var(--affine-background-tertiary-color)',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
backgroundColor: cssVar('backgroundTertiaryColor'),
|
||||
fontSize: cssVar('fontXs'),
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
@@ -27,17 +24,14 @@ export const promptWarning = style({
|
||||
padding: 10,
|
||||
borderRadius: 8,
|
||||
});
|
||||
|
||||
export const promptWarningTitle = style({
|
||||
color: 'var(--affine-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
fontWeight: 600,
|
||||
});
|
||||
|
||||
export const spacer = style({
|
||||
flexGrow: 1,
|
||||
minHeight: 12,
|
||||
});
|
||||
|
||||
export const promptDisclaimer = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -45,19 +39,16 @@ export const promptDisclaimer = style({
|
||||
marginBottom: 32,
|
||||
gap: 4,
|
||||
});
|
||||
|
||||
export const promptDisclaimerConfirm = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
});
|
||||
|
||||
export const switchRow = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 32,
|
||||
});
|
||||
|
||||
export const switchDisabled = style({
|
||||
opacity: 0.5,
|
||||
pointerEvents: 'none',
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const modalWrapper = style({
|
||||
position: 'relative',
|
||||
padding: '0px',
|
||||
width: '560px',
|
||||
background: 'var(--affine-background-overlay-panel-color)',
|
||||
background: cssVar('backgroundOverlayPanelColor'),
|
||||
borderRadius: '12px',
|
||||
});
|
||||
|
||||
export const modalHeader = style({
|
||||
margin: '44px 0px 12px 0px',
|
||||
width: '560px',
|
||||
@@ -15,15 +14,13 @@ export const modalHeader = style({
|
||||
fontSize: '20px;',
|
||||
textAlign: 'center',
|
||||
});
|
||||
|
||||
export const inputContent = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
margin: '24px 0',
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
});
|
||||
|
||||
export const workspaceName = style({
|
||||
fontWeight: '600',
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const profileWrapper = style({
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
@@ -11,7 +11,6 @@ export const profileHandlerWrapper = style({
|
||||
alignItems: 'center',
|
||||
marginLeft: '20px',
|
||||
});
|
||||
|
||||
export const labelWrapper = style({
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
@@ -20,7 +19,6 @@ export const labelWrapper = style({
|
||||
gap: '10px',
|
||||
flexWrap: 'wrap',
|
||||
});
|
||||
|
||||
export const avatarWrapper = style({
|
||||
width: '56px',
|
||||
height: '56px',
|
||||
@@ -51,10 +49,9 @@ globalStyle(`${avatarWrapper} .camera-icon-wrapper`, {
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(60, 61, 63, 0.5)',
|
||||
zIndex: '1',
|
||||
color: 'var(--affine-white)',
|
||||
color: cssVar('white'),
|
||||
fontSize: '24px',
|
||||
});
|
||||
|
||||
export const urlButton = style({
|
||||
width: 'calc(100% - 64px - 15px)',
|
||||
justifyContent: 'left',
|
||||
@@ -65,10 +62,9 @@ globalStyle(`${urlButton} span`, {
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'var(--affine-placeholder-color)',
|
||||
color: cssVar('placeholderColor'),
|
||||
fontWeight: '500',
|
||||
});
|
||||
|
||||
export const fakeWrapper = style({
|
||||
position: 'relative',
|
||||
opacity: 0.4,
|
||||
@@ -85,23 +81,21 @@ export const fakeWrapper = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const membersFallback = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
color: 'var(--affine-primary-color)',
|
||||
color: cssVar('primaryColor'),
|
||||
});
|
||||
export const membersPanel = style({
|
||||
padding: '4px',
|
||||
borderRadius: '12px',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
});
|
||||
|
||||
export const memberList = style({});
|
||||
export const memberListItem = style({
|
||||
padding: '0 4px 0 16px',
|
||||
@@ -111,7 +105,7 @@ export const memberListItem = style({
|
||||
alignItems: 'center',
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
borderRadius: '8px',
|
||||
},
|
||||
'&:not(:last-of-type)': {
|
||||
@@ -133,39 +127,37 @@ export const roleOrStatus = style({
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
selectors: {
|
||||
'&.pending': {
|
||||
color: 'var(--affine-primary-color)',
|
||||
color: cssVar('primaryColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
export const memberName = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
color: cssVar('textPrimaryColor'),
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
lineHeight: '22px',
|
||||
});
|
||||
export const memberEmail = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
lineHeight: '20px',
|
||||
});
|
||||
export const iconButton = style({});
|
||||
|
||||
globalStyle(`${memberListItem}:hover ${iconButton}`, {
|
||||
opacity: 1,
|
||||
pointerEvents: 'all',
|
||||
});
|
||||
|
||||
export const label = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
marginBottom: '5px',
|
||||
});
|
||||
export const workspaceLabel = style({
|
||||
@@ -176,28 +168,25 @@ export const workspaceLabel = style({
|
||||
alignItems: 'center',
|
||||
borderRadius: '6px',
|
||||
padding: '2px 10px',
|
||||
border: '1px solid var(--affine-white-30)',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
border: `1px solid ${cssVar('white30')}`,
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textPrimaryColor'),
|
||||
lineHeight: '20px',
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
export const goUpgrade = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-emphasis-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textEmphasisColor'),
|
||||
cursor: 'pointer',
|
||||
marginLeft: '4px',
|
||||
display: 'inline',
|
||||
});
|
||||
|
||||
export const goUpgradeWrapper = style({
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const arrowRight = style({
|
||||
fontSize: '16px',
|
||||
color: 'var(--affine-text-emphasis-color)',
|
||||
color: cssVar('textEmphasisColor'),
|
||||
cursor: 'pointer',
|
||||
});
|
||||
|
||||
@@ -1,42 +1,37 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const headerStyle = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 600,
|
||||
lineHeight: '22px',
|
||||
padding: '0 4px',
|
||||
gap: '4px',
|
||||
});
|
||||
|
||||
export const menuStyle = style({
|
||||
width: '410px',
|
||||
height: 'auto',
|
||||
padding: '12px',
|
||||
transform: 'translateX(-10px)',
|
||||
});
|
||||
|
||||
export const menuItemStyle = style({
|
||||
padding: '4px',
|
||||
transition: 'all 0.3s',
|
||||
});
|
||||
|
||||
export const descriptionStyle = style({
|
||||
wordWrap: 'break-word',
|
||||
// wordBreak: 'break-all',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
lineHeight: '20px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
textAlign: 'left',
|
||||
padding: '0 6px',
|
||||
});
|
||||
|
||||
export const buttonStyle = style({
|
||||
marginTop: '18px',
|
||||
// todo: new color scheme should be used
|
||||
});
|
||||
|
||||
export const actionsStyle = style({
|
||||
display: 'flex',
|
||||
gap: '9px',
|
||||
@@ -44,41 +39,35 @@ export const actionsStyle = style({
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start',
|
||||
});
|
||||
|
||||
export const containerStyle = style({
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
gap: '8px',
|
||||
});
|
||||
|
||||
export const indicatorContainerStyle = style({
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
export const inputButtonRowStyle = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginTop: '16px',
|
||||
});
|
||||
|
||||
export const titleContainerStyle = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 500,
|
||||
lineHeight: '22px',
|
||||
padding: '0 4px',
|
||||
});
|
||||
|
||||
export const subTitleStyle = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 500,
|
||||
lineHeight: '22px',
|
||||
});
|
||||
|
||||
export const columnContainerStyle = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -86,7 +75,6 @@ export const columnContainerStyle = style({
|
||||
width: '100%',
|
||||
gap: '8px',
|
||||
});
|
||||
|
||||
export const rowContainerStyle = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
@@ -95,7 +83,6 @@ export const rowContainerStyle = style({
|
||||
gap: '12px',
|
||||
padding: '4px',
|
||||
});
|
||||
|
||||
export const radioButtonGroup = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
@@ -103,30 +90,26 @@ export const radioButtonGroup = style({
|
||||
minWidth: '154px',
|
||||
maxWidth: '250px',
|
||||
});
|
||||
|
||||
export const radioButton = style({
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
selectors: {
|
||||
'&[data-state="checked"]': {
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const disableSharePage = style({
|
||||
color: 'var(--affine-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
});
|
||||
|
||||
export const localSharePage = style({
|
||||
padding: '12px 8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: 'var(--affine-background-secondary-color)',
|
||||
backgroundColor: cssVar('backgroundSecondaryColor'),
|
||||
minHeight: '84px',
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
export const cloudSvgContainer = style({
|
||||
width: '146px',
|
||||
display: 'flex',
|
||||
@@ -138,26 +121,24 @@ export const cloudSvgContainer = style({
|
||||
});
|
||||
export const shareIconStyle = style({
|
||||
fontSize: '16px',
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const shareLinkStyle = style({
|
||||
padding: '4px',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 500,
|
||||
lineHeight: '20px',
|
||||
transform: 'translateX(-4px)',
|
||||
gap: '4px',
|
||||
});
|
||||
globalStyle(`${shareLinkStyle} > span`, {
|
||||
color: 'var(--affine-link-color)',
|
||||
color: cssVar('linkColor'),
|
||||
});
|
||||
globalStyle(`${shareLinkStyle} > div > svg`, {
|
||||
color: 'var(--affine-link-color)',
|
||||
color: cssVar('linkColor'),
|
||||
});
|
||||
|
||||
export const journalShareButton = style({
|
||||
height: 32,
|
||||
padding: '0px 8px',
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const docEditorRoot = style({
|
||||
display: 'block',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
});
|
||||
|
||||
// brings styles of .affine-doc-viewport from blocksuite
|
||||
@@ -16,9 +15,10 @@ export const affineDocViewport = style({
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto',
|
||||
userSelect: 'none',
|
||||
containerName: 'viewport', // todo: find out what this does in bs
|
||||
containerName: 'viewport',
|
||||
// todo: find out what this does in bs
|
||||
containerType: 'inline-size',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
'@media': {
|
||||
print: {
|
||||
display: 'none',
|
||||
@@ -26,12 +26,10 @@ export const affineDocViewport = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const docContainer = style({
|
||||
display: 'block',
|
||||
paddingBottom: 64,
|
||||
});
|
||||
|
||||
const titleTagBasic = style({
|
||||
fontSize: cssVar('fontH4'),
|
||||
fontWeight: 600,
|
||||
@@ -51,7 +49,6 @@ export const titleTodayTag = style([
|
||||
color: cssVar('brandColor'),
|
||||
},
|
||||
]);
|
||||
|
||||
export const pageReferenceIcon = style({
|
||||
verticalAlign: 'middle',
|
||||
fontSize: '1.1em',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const title = style({
|
||||
fontWeight: 500,
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
});
|
||||
|
||||
@@ -1,24 +1,22 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const pageListEmptyStyle = style({
|
||||
height: 'calc(100% - 52px)',
|
||||
});
|
||||
|
||||
export const emptyDescButton = style({
|
||||
cursor: 'pointer',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
background: 'var(--affine-background-code-block)',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
background: cssVar('backgroundCodeBlock'),
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
borderRadius: '4px',
|
||||
padding: '0 6px',
|
||||
boxSizing: 'border-box',
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const emptyDescKbd = style([
|
||||
emptyDescButton,
|
||||
{
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const iconWrapper = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
selectors: {
|
||||
'&:visited': {
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const iconWrapper = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
selectors: {
|
||||
'&:visited': {
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -19,7 +19,6 @@ export const rightItemContainer = style({
|
||||
gap: '8px',
|
||||
padding: '0 8px',
|
||||
});
|
||||
|
||||
export const presentButton = style({
|
||||
gap: '4px',
|
||||
});
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const filterContainerStyle = style({
|
||||
padding: '0 16px',
|
||||
display: 'flex',
|
||||
|
||||
@@ -1,16 +1,22 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { baseTheme } from '@toeverything/theme';
|
||||
import { keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
const fadeInAnimation = keyframes({
|
||||
from: { opacity: 0 },
|
||||
to: { opacity: 1 },
|
||||
from: {
|
||||
opacity: 0,
|
||||
},
|
||||
to: {
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const fadeOutAnimation = keyframes({
|
||||
from: { opacity: 1 },
|
||||
to: { opacity: 0 },
|
||||
from: {
|
||||
opacity: 1,
|
||||
},
|
||||
to: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
export const imagePreviewBackgroundStyle = style({
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
@@ -20,28 +26,24 @@ export const imagePreviewBackgroundStyle = style({
|
||||
zIndex: baseTheme.zIndexModal,
|
||||
background: 'rgba(0, 0, 0, 0.75)',
|
||||
});
|
||||
|
||||
export const imagePreviewModalStyle = style({
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
});
|
||||
|
||||
export const loaded = style({
|
||||
opacity: 0,
|
||||
animationName: fadeInAnimation,
|
||||
animationDuration: '0.25s',
|
||||
animationFillMode: 'forwards',
|
||||
});
|
||||
|
||||
export const unloaded = style({
|
||||
opacity: 1,
|
||||
animationName: fadeOutAnimation,
|
||||
animationDuration: '0.25s',
|
||||
animationFillMode: 'forwards',
|
||||
});
|
||||
|
||||
export const imagePreviewModalCloseButtonStyle = style({
|
||||
position: 'absolute',
|
||||
display: 'flex',
|
||||
@@ -53,19 +55,18 @@ export const imagePreviewModalCloseButtonStyle = style({
|
||||
borderRadius: '10px',
|
||||
top: '0.5rem',
|
||||
right: '0.5rem',
|
||||
background: 'var(--affine-white)',
|
||||
background: cssVar('white'),
|
||||
border: 'none',
|
||||
padding: '0.5rem',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
transition: 'background 0.2s ease-in-out',
|
||||
zIndex: 1,
|
||||
marginTop: '38px',
|
||||
marginRight: '38px',
|
||||
});
|
||||
|
||||
export const imagePreviewModalGoStyle = style({
|
||||
color: 'var(--affine-white)',
|
||||
color: cssVar('white'),
|
||||
position: 'absolute',
|
||||
fontSize: '60px',
|
||||
lineHeight: '60px',
|
||||
@@ -74,7 +75,6 @@ export const imagePreviewModalGoStyle = style({
|
||||
padding: '0 15px',
|
||||
cursor: 'pointer',
|
||||
});
|
||||
|
||||
export const imageNavigationControlStyle = style({
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
@@ -82,7 +82,6 @@ export const imageNavigationControlStyle = style({
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const imagePreviewModalContainerStyle = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -94,15 +93,13 @@ export const imagePreviewModalContainerStyle = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const imagePreviewModalCenterStyle = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const imagePreviewModalCaptionStyle = style({
|
||||
color: 'var(--affine-white)',
|
||||
color: cssVar('white'),
|
||||
marginTop: '24px',
|
||||
'@media': {
|
||||
'screen and (max-width: 768px)': {
|
||||
@@ -110,19 +107,17 @@ export const imagePreviewModalCaptionStyle = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const imagePreviewActionBarStyle = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'var(--affine-white)',
|
||||
backgroundColor: cssVar('white'),
|
||||
borderRadius: '8px',
|
||||
boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)',
|
||||
maxWidth: 'max-content',
|
||||
minHeight: '44px',
|
||||
maxHeight: '44px',
|
||||
});
|
||||
|
||||
export const groupStyle = style({
|
||||
padding: '10px 0',
|
||||
boxSizing: 'border-box',
|
||||
@@ -131,22 +126,18 @@ export const groupStyle = style({
|
||||
justifyContent: 'center',
|
||||
borderLeft: '1px solid #E3E2E4',
|
||||
});
|
||||
|
||||
export const buttonStyle = style({
|
||||
margin: '10px 6px',
|
||||
});
|
||||
|
||||
export const scaleIndicatorButtonStyle = style({
|
||||
minHeight: '100%',
|
||||
maxWidth: 'max-content',
|
||||
fontSize: '12px',
|
||||
padding: '5px 5px',
|
||||
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
});
|
||||
|
||||
export const imageBottomContainerStyle = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -155,15 +146,13 @@ export const imageBottomContainerStyle = style({
|
||||
bottom: '28px',
|
||||
zIndex: baseTheme.zIndexModal + 1,
|
||||
});
|
||||
|
||||
export const captionStyle = style({
|
||||
maxWidth: '686px',
|
||||
color: 'var(--affine-white)',
|
||||
color: cssVar('white'),
|
||||
background: 'rgba(0,0,0,0.75)',
|
||||
padding: '10px',
|
||||
marginBottom: '21px',
|
||||
});
|
||||
|
||||
export const suspenseFallbackStyle = style({
|
||||
opacity: 0,
|
||||
transition: 'opacity 2s ease-in-out',
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const editor = style({
|
||||
flex: 1,
|
||||
overflow: 'auto',
|
||||
@@ -15,13 +14,11 @@ export const editor = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
globalStyle(`${editor} .affine-doc-viewport`, {
|
||||
paddingBottom: '150px',
|
||||
paddingLeft: '20px',
|
||||
scrollbarGutter: 'stable',
|
||||
});
|
||||
|
||||
globalStyle('.is-public-page page-meta-tags', {
|
||||
display: 'none',
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const collectionListHeader = style({
|
||||
height: 100,
|
||||
alignItems: 'center',
|
||||
@@ -7,23 +7,21 @@ export const collectionListHeader = style({
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
});
|
||||
|
||||
export const collectionListHeaderTitle = style({
|
||||
fontSize: 'var(--affine-font-h-5)',
|
||||
fontSize: cssVar('fontH5'),
|
||||
fontWeight: 500,
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
});
|
||||
|
||||
export const newCollectionButton = style({
|
||||
padding: '6px 10px',
|
||||
borderRadius: '8px',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 600,
|
||||
height: '32px',
|
||||
});
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
display: 'flex',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
height: '54px', // 42 + 12
|
||||
color: cssVar('textPrimaryColor'),
|
||||
height: '54px',
|
||||
// 42 + 12
|
||||
flexShrink: 0,
|
||||
width: '100%',
|
||||
alignItems: 'stretch',
|
||||
transition: 'background-color 0.2s, opacity 0.2s',
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
overflow: 'hidden',
|
||||
cursor: 'default',
|
||||
@@ -20,7 +21,6 @@ export const root = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const dragOverlay = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -40,12 +40,11 @@ export const dragPageItemOverlay = style({
|
||||
borderRadius: '10px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: 'var(--affine-hover-color-filled)',
|
||||
boxShadow: 'var(--affine-menu-shadow)',
|
||||
background: cssVar('hoverColorFilled'),
|
||||
boxShadow: cssVar('menuShadow'),
|
||||
maxWidth: '360px',
|
||||
minWidth: '260px',
|
||||
});
|
||||
|
||||
export const dndCell = style({
|
||||
position: 'relative',
|
||||
marginLeft: -8,
|
||||
@@ -53,7 +52,6 @@ export const dndCell = style({
|
||||
outline: 'none',
|
||||
paddingLeft: 8,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true] ${dndCell}:before`, {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
@@ -63,21 +61,18 @@ globalStyle(`[data-draggable=true] ${dndCell}:before`, {
|
||||
width: 4,
|
||||
height: 4,
|
||||
transition: 'height 0.2s, opacity 0.2s',
|
||||
backgroundColor: 'var(--affine-placeholder-color)',
|
||||
backgroundColor: cssVar('placeholderColor'),
|
||||
borderRadius: '2px',
|
||||
opacity: 0,
|
||||
willChange: 'height, opacity',
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true] ${dndCell}:hover:before`, {
|
||||
height: 12,
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}`, {
|
||||
opacity: 0.5,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, {
|
||||
height: 32,
|
||||
width: 2,
|
||||
@@ -88,25 +83,21 @@ globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, {
|
||||
globalStyle(`${root} > :first-child`, {
|
||||
paddingLeft: '16px',
|
||||
});
|
||||
|
||||
globalStyle(`${root} > :last-child`, {
|
||||
paddingRight: '8px',
|
||||
});
|
||||
|
||||
export const titleIconsWrapper = style({
|
||||
padding: '0 5px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
});
|
||||
|
||||
export const selectionCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexShrink: 0,
|
||||
fontSize: 'var(--affine-font-h-3)',
|
||||
fontSize: cssVar('fontH3'),
|
||||
});
|
||||
|
||||
export const titleCell = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -116,62 +107,55 @@ export const titleCell = style({
|
||||
flex: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
export const titleCellMain = style({
|
||||
overflow: 'hidden',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 600,
|
||||
whiteSpace: 'nowrap',
|
||||
flex: 1,
|
||||
textOverflow: 'ellipsis',
|
||||
alignSelf: 'stretch',
|
||||
});
|
||||
|
||||
export const titleCellPreview = style({
|
||||
overflow: 'hidden',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: cssVar('fontXs'),
|
||||
flex: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
alignSelf: 'stretch',
|
||||
});
|
||||
|
||||
export const iconCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-h-3)',
|
||||
color: 'var(--affine-icon-color)',
|
||||
fontSize: cssVar('fontH3'),
|
||||
color: cssVar('iconColor'),
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
export const tagsCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
padding: '0 8px',
|
||||
height: '60px',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const dateCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
flexShrink: 0,
|
||||
flexWrap: 'nowrap',
|
||||
padding: '0 8px',
|
||||
});
|
||||
|
||||
export const actionsCellWrapper = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
export const operationsCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
const slideDownAndFade = keyframes({
|
||||
'0%': {
|
||||
opacity: 0,
|
||||
@@ -10,7 +10,6 @@ const slideDownAndFade = keyframes({
|
||||
transform: 'scale(1) translateY(0)',
|
||||
},
|
||||
});
|
||||
|
||||
const slideUpAndFade = keyframes({
|
||||
'0%': {
|
||||
opacity: 1,
|
||||
@@ -21,20 +20,18 @@ const slideUpAndFade = keyframes({
|
||||
transform: 'scale(0.95) translateY(20px)',
|
||||
},
|
||||
});
|
||||
|
||||
export const root = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: '10px',
|
||||
padding: '4px',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
boxShadow: 'var(--affine-menu-shadow)',
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
boxShadow: cssVar('menuShadow'),
|
||||
gap: 4,
|
||||
minWidth: 'max-content',
|
||||
width: 'fit-content',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
});
|
||||
|
||||
export const popoverContent = style({
|
||||
willChange: 'transform opacity',
|
||||
selectors: {
|
||||
@@ -46,13 +43,11 @@ export const popoverContent = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const separator = style({
|
||||
width: '1px',
|
||||
height: '24px',
|
||||
background: 'var(--affine-divider-color)',
|
||||
background: cssVar('dividerColor'),
|
||||
});
|
||||
|
||||
export const item = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -61,33 +56,30 @@ export const item = style({
|
||||
height: '32px',
|
||||
padding: '0 6px',
|
||||
});
|
||||
|
||||
export const button = style([
|
||||
item,
|
||||
{
|
||||
borderRadius: '8px',
|
||||
':hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const danger = style({
|
||||
color: 'inherit',
|
||||
':hover': {
|
||||
background: 'var(--affine-background-error-color)',
|
||||
color: 'var(--affine-error-color)',
|
||||
background: cssVar('backgroundErrorColor'),
|
||||
color: cssVar('errorColor'),
|
||||
},
|
||||
});
|
||||
|
||||
export const buttonIcon = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 20,
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
selectors: {
|
||||
[`${danger}:hover &`]: {
|
||||
color: 'var(--affine-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const floatingToolbar = style({
|
||||
position: 'absolute',
|
||||
bottom: 26,
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const headerCell = style({
|
||||
padding: '0 8px',
|
||||
userSelect: 'none',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
selectors: {
|
||||
'&[data-sorting], &:hover': {
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
},
|
||||
'&[data-sortable]': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
'&:not(:last-child)': {
|
||||
borderRight: '1px solid var(--affine-hover-color-filled)',
|
||||
borderRight: `1px solid ${cssVar('hoverColorFilled')}`,
|
||||
},
|
||||
},
|
||||
display: 'flex',
|
||||
@@ -22,9 +22,8 @@ export const headerCell = style({
|
||||
position: 'relative',
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
export const headerCellSortIcon = style({
|
||||
display: 'inline-flex',
|
||||
fontSize: 14,
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const menuContent = style({
|
||||
backgroundColor: 'var(--affine-background-overlay-panel-color)',
|
||||
backgroundColor: cssVar('backgroundOverlayPanelColor'),
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const docListHeader = style({
|
||||
height: 100,
|
||||
alignItems: 'center',
|
||||
@@ -7,63 +7,56 @@ export const docListHeader = style({
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
});
|
||||
|
||||
export const docListHeaderTitle = style({
|
||||
fontSize: 'var(--affine-font-h-5)',
|
||||
fontSize: cssVar('fontH5'),
|
||||
fontWeight: 500,
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
height: '28px',
|
||||
});
|
||||
|
||||
export const titleIcon = style({
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const titleCollectionName = style({
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
});
|
||||
|
||||
export const addPageButton = style({
|
||||
padding: '6px 10px',
|
||||
borderRadius: '8px',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 600,
|
||||
height: '32px',
|
||||
});
|
||||
|
||||
export const tagSticky = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '1px 8px',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
fontSize: cssVar('fontXs'),
|
||||
borderRadius: '10px',
|
||||
columnGap: '4px',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
maxWidth: '30vw',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
height: '22px',
|
||||
lineHeight: '1.67em',
|
||||
});
|
||||
|
||||
export const tagIndicator = style({
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
export const tagLabel = style({
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
display: 'flex',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
height: '54px', // 42 + 12
|
||||
color: cssVar('textPrimaryColor'),
|
||||
height: '54px',
|
||||
// 42 + 12
|
||||
flexShrink: 0,
|
||||
width: '100%',
|
||||
alignItems: 'stretch',
|
||||
transition: 'background-color 0.2s, opacity 0.2s',
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
overflow: 'hidden',
|
||||
cursor: 'default',
|
||||
@@ -20,7 +21,6 @@ export const root = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const dragOverlay = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -40,12 +40,11 @@ export const dragPageItemOverlay = style({
|
||||
borderRadius: '10px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: 'var(--affine-hover-color-filled)',
|
||||
boxShadow: 'var(--affine-menu-shadow)',
|
||||
background: cssVar('hoverColorFilled'),
|
||||
boxShadow: cssVar('menuShadow'),
|
||||
maxWidth: '360px',
|
||||
minWidth: '260px',
|
||||
});
|
||||
|
||||
export const dndCell = style({
|
||||
position: 'relative',
|
||||
marginLeft: -8,
|
||||
@@ -53,7 +52,6 @@ export const dndCell = style({
|
||||
outline: 'none',
|
||||
paddingLeft: 8,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true] ${dndCell}:before`, {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
@@ -63,21 +61,18 @@ globalStyle(`[data-draggable=true] ${dndCell}:before`, {
|
||||
width: 4,
|
||||
height: 4,
|
||||
transition: 'height 0.2s, opacity 0.2s',
|
||||
backgroundColor: 'var(--affine-placeholder-color)',
|
||||
backgroundColor: cssVar('placeholderColor'),
|
||||
borderRadius: '2px',
|
||||
opacity: 0,
|
||||
willChange: 'height, opacity',
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true] ${dndCell}:hover:before`, {
|
||||
height: 12,
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}`, {
|
||||
opacity: 0.5,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, {
|
||||
height: 32,
|
||||
width: 2,
|
||||
@@ -88,25 +83,21 @@ globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, {
|
||||
globalStyle(`${root} > :first-child`, {
|
||||
paddingLeft: '16px',
|
||||
});
|
||||
|
||||
globalStyle(`${root} > :last-child`, {
|
||||
paddingRight: '8px',
|
||||
});
|
||||
|
||||
export const titleIconsWrapper = style({
|
||||
padding: '0 5px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
});
|
||||
|
||||
export const selectionCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexShrink: 0,
|
||||
fontSize: 'var(--affine-font-h-3)',
|
||||
fontSize: cssVar('fontH3'),
|
||||
});
|
||||
|
||||
export const titleCell = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -116,62 +107,55 @@ export const titleCell = style({
|
||||
flex: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
export const titleCellMain = style({
|
||||
overflow: 'hidden',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 600,
|
||||
whiteSpace: 'nowrap',
|
||||
flex: 1,
|
||||
textOverflow: 'ellipsis',
|
||||
alignSelf: 'stretch',
|
||||
});
|
||||
|
||||
export const titleCellPreview = style({
|
||||
overflow: 'hidden',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: cssVar('fontXs'),
|
||||
flex: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
alignSelf: 'stretch',
|
||||
});
|
||||
|
||||
export const iconCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-h-3)',
|
||||
color: 'var(--affine-icon-color)',
|
||||
fontSize: cssVar('fontH3'),
|
||||
color: cssVar('iconColor'),
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
export const tagsCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
padding: '0 8px',
|
||||
height: '60px',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const dateCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
flexShrink: 0,
|
||||
flexWrap: 'nowrap',
|
||||
padding: '0 8px',
|
||||
});
|
||||
|
||||
export const actionsCellWrapper = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
export const operationsCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const newPageButtonLabel = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { createVar, style } from '@vanilla-extract/css';
|
||||
|
||||
export const hoverMaxWidth = createVar();
|
||||
|
||||
export const root = style({
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
minHeight: '32px',
|
||||
});
|
||||
|
||||
export const tagsContainer = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const tagsScrollContainer = style([
|
||||
tagsContainer,
|
||||
{
|
||||
@@ -23,7 +20,6 @@ export const tagsScrollContainer = style([
|
||||
gap: '8px',
|
||||
},
|
||||
]);
|
||||
|
||||
export const tagsListContainer = style([
|
||||
tagsContainer,
|
||||
{
|
||||
@@ -33,7 +29,6 @@ export const tagsListContainer = style([
|
||||
gap: '4px',
|
||||
},
|
||||
]);
|
||||
|
||||
export const innerContainer = style({
|
||||
display: 'flex',
|
||||
columnGap: '8px',
|
||||
@@ -58,15 +53,15 @@ export const innerBackdrop = style({
|
||||
height: '100%',
|
||||
opacity: 0,
|
||||
transition: 'all 0.2s',
|
||||
background:
|
||||
'linear-gradient(90deg, transparent 0%, var(--affine-hover-color-filled) 40%)',
|
||||
background: `linear-gradient(90deg, transparent 0%, ${cssVar(
|
||||
'hoverColorFilled'
|
||||
)} 40%)`,
|
||||
selectors: {
|
||||
[`${root}:hover &`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const tag = style({
|
||||
height: '20px',
|
||||
display: 'flex',
|
||||
@@ -77,33 +72,30 @@ export const tag = style({
|
||||
minWidth: 'max-content',
|
||||
},
|
||||
});
|
||||
|
||||
export const tagInnerWrapper = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 8px',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
});
|
||||
|
||||
export const tagSticky = style([
|
||||
tagInnerWrapper,
|
||||
{
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
borderRadius: '10px',
|
||||
columnGap: '4px',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
maxWidth: '128px',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
]);
|
||||
|
||||
export const tagListItem = style([
|
||||
tag,
|
||||
{
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
padding: '4px 12px',
|
||||
columnGap: '8px',
|
||||
textOverflow: 'ellipsis',
|
||||
@@ -111,21 +103,18 @@ export const tagListItem = style([
|
||||
height: '30px',
|
||||
},
|
||||
]);
|
||||
|
||||
export const showMoreTag = style({
|
||||
fontSize: 'var(--affine-font-h-5)',
|
||||
fontSize: cssVar('fontH5'),
|
||||
right: 0,
|
||||
position: 'sticky',
|
||||
display: 'inline-flex',
|
||||
});
|
||||
|
||||
export const tagIndicator = style({
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
export const tagLabel = style({
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const menuItemStyle = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
});
|
||||
export const variableSelectTitleStyle = style({
|
||||
margin: '7px 16px',
|
||||
fontWeight: 500,
|
||||
lineHeight: '20px',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
});
|
||||
export const variableSelectDividerStyle = style({
|
||||
marginTop: '2px',
|
||||
@@ -16,20 +16,19 @@ export const variableSelectDividerStyle = style({
|
||||
marginLeft: '12px',
|
||||
marginRight: '8px',
|
||||
height: '1px',
|
||||
background: 'var(--affine-border-color)',
|
||||
background: cssVar('borderColor'),
|
||||
});
|
||||
export const menuItemTextStyle = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
});
|
||||
export const filterItemStyle = style({
|
||||
display: 'flex',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
borderRadius: '8px',
|
||||
background: 'var(--affine-white)',
|
||||
background: cssVar('white'),
|
||||
padding: '4px 8px',
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const filterItemCloseStyle = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -38,31 +37,31 @@ export const filterItemCloseStyle = style({
|
||||
marginLeft: '4px',
|
||||
});
|
||||
export const inputStyle = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
padding: '2px 4px',
|
||||
transition: 'all 0.15s ease-in-out',
|
||||
':hover': {
|
||||
cursor: 'pointer',
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
borderRadius: '4px',
|
||||
},
|
||||
});
|
||||
export const switchStyle = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
padding: '2px 4px',
|
||||
transition: 'all 0.15s ease-in-out',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
':hover': {
|
||||
cursor: 'pointer',
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
borderRadius: '4px',
|
||||
},
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
export const filterTypeStyle = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '2px 4px',
|
||||
@@ -70,15 +69,15 @@ export const filterTypeStyle = style({
|
||||
marginRight: '6px',
|
||||
':hover': {
|
||||
cursor: 'pointer',
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
borderRadius: '4px',
|
||||
},
|
||||
});
|
||||
export const filterTypeIconStyle = style({
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
marginRight: '6px',
|
||||
padding: '1px 0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
});
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const content = style({
|
||||
fontSize: 12,
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
borderRadius: 8,
|
||||
padding: '3px 4px',
|
||||
cursor: 'pointer',
|
||||
overflow: 'hidden',
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
});
|
||||
export const text = style({
|
||||
@@ -34,7 +34,7 @@ export const selectOption = style({
|
||||
padding: '0 12px',
|
||||
cursor: 'pointer',
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
});
|
||||
export const optionLabel = style({
|
||||
@@ -46,6 +46,6 @@ export const optionLabel = style({
|
||||
export const done = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
color: 'var(--affine-primary-color)',
|
||||
color: cssVar('primaryColor'),
|
||||
marginLeft: 8,
|
||||
});
|
||||
|
||||
@@ -1,37 +1,31 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { createContainer, style } from '@vanilla-extract/css';
|
||||
|
||||
import * as itemStyles from './docs/page-list-item.css';
|
||||
|
||||
export const listRootContainer = createContainer('list-root-container');
|
||||
|
||||
export const pageListScrollContainer = style({
|
||||
width: '100%',
|
||||
flex: 1,
|
||||
});
|
||||
|
||||
export const root = style({
|
||||
width: '100%',
|
||||
maxWidth: '100%',
|
||||
containerName: listRootContainer,
|
||||
containerType: 'inline-size',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
});
|
||||
|
||||
export const groupsContainer = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
rowGap: '16px',
|
||||
});
|
||||
|
||||
export const heading = style({});
|
||||
|
||||
export const colWrapper = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexShrink: 0,
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const hideInSmallContainer = style({
|
||||
'@container': {
|
||||
[`${listRootContainer} (max-width: 800px)`]: {
|
||||
@@ -43,7 +37,6 @@ export const hideInSmallContainer = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const favoriteCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -56,7 +49,6 @@ export const favoriteCell = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const clearLinkStyle = style({
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const moveToTrashStyle = style({
|
||||
padding: '4px 12px',
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-background-error-color)',
|
||||
color: 'var(--affine-error-color)',
|
||||
backgroundColor: cssVar('backgroundErrorColor'),
|
||||
color: cssVar('errorColor'),
|
||||
},
|
||||
});
|
||||
|
||||
globalStyle(`${moveToTrashStyle}:hover svg`, {
|
||||
color: 'var(--affine-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
});
|
||||
|
||||
export const transitionStyle = style({
|
||||
transition: 'all 0.3s',
|
||||
});
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 6,
|
||||
});
|
||||
|
||||
const slideDown = keyframes({
|
||||
'0%': {
|
||||
opacity: 0,
|
||||
@@ -16,7 +15,6 @@ const slideDown = keyframes({
|
||||
height: 'var(--radix-collapsible-content-height)',
|
||||
},
|
||||
});
|
||||
|
||||
const slideUp = keyframes({
|
||||
'0%': {
|
||||
opacity: 1,
|
||||
@@ -27,7 +25,6 @@ const slideUp = keyframes({
|
||||
height: '0px',
|
||||
},
|
||||
});
|
||||
|
||||
export const collapsibleContent = style({
|
||||
overflow: 'hidden',
|
||||
selectors: {
|
||||
@@ -39,64 +36,56 @@ export const collapsibleContent = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const collapsibleContentInner = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 4,
|
||||
});
|
||||
|
||||
export const header = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '0px 16px 0px 6px',
|
||||
gap: 4,
|
||||
height: '28px',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
':hover': {
|
||||
background: 'var(--affine-hover-color-filled)',
|
||||
background: cssVar('hoverColorFilled'),
|
||||
},
|
||||
userSelect: 'none',
|
||||
});
|
||||
|
||||
export const spacer = style({
|
||||
flex: 1,
|
||||
});
|
||||
|
||||
export const headerCollapseIcon = style({
|
||||
cursor: 'pointer',
|
||||
});
|
||||
|
||||
export const headerLabel = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
});
|
||||
|
||||
export const headerCount = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
color: 'var(--affine-text-disable-color)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
color: cssVar('textDisableColor'),
|
||||
});
|
||||
|
||||
export const selectAllButton = style({
|
||||
display: 'flex',
|
||||
opacity: 0,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
height: '20px',
|
||||
borderRadius: 4,
|
||||
padding: '0 8px',
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
[`${header}:hover &`]: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const collapsedIcon = style({
|
||||
opacity: 0,
|
||||
transition: 'transform 0.2s ease-in-out',
|
||||
@@ -109,7 +98,6 @@ export const collapsedIcon = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const collapsedIconContainer = style({
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
@@ -128,7 +116,7 @@ export const collapsedIconContainer = style({
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&:hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const headerTitleCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
});
|
||||
|
||||
export const tableHeader = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -15,15 +14,13 @@ export const tableHeader = style({
|
||||
zIndex: 1,
|
||||
top: 0,
|
||||
left: 0,
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
transition: 'box-shadow 0.2s ease-in-out',
|
||||
transform: 'translateY(-0.5px)', // fix sticky look through issue
|
||||
});
|
||||
|
||||
globalStyle(`[data-has-scroll-top=true] ${tableHeader}`, {
|
||||
boxShadow: '0 1px var(--affine-border-color)',
|
||||
boxShadow: `0 1px ${cssVar('borderColor')}`,
|
||||
});
|
||||
|
||||
export const headerTitleSelectionIconWrapper = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const tagListHeader = style({
|
||||
height: 100,
|
||||
alignItems: 'center',
|
||||
@@ -7,23 +7,21 @@ export const tagListHeader = style({
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
});
|
||||
|
||||
export const tagListHeaderTitle = style({
|
||||
fontSize: 'var(--affine-font-h-5)',
|
||||
fontSize: cssVar('fontH5'),
|
||||
fontWeight: 500,
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
});
|
||||
|
||||
export const newTagButton = style({
|
||||
padding: '6px 10px',
|
||||
borderRadius: '8px',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 600,
|
||||
height: '32px',
|
||||
});
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
display: 'flex',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
height: '54px', // 42 + 12
|
||||
color: cssVar('textPrimaryColor'),
|
||||
height: '54px',
|
||||
// 42 + 12
|
||||
flexShrink: 0,
|
||||
width: '100%',
|
||||
alignItems: 'stretch',
|
||||
transition: 'background-color 0.2s, opacity 0.2s',
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
overflow: 'hidden',
|
||||
cursor: 'default',
|
||||
@@ -20,7 +21,6 @@ export const root = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const dragOverlay = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -40,12 +40,11 @@ export const dragPageItemOverlay = style({
|
||||
borderRadius: '10px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: 'var(--affine-hover-color-filled)',
|
||||
boxShadow: 'var(--affine-menu-shadow)',
|
||||
background: cssVar('hoverColorFilled'),
|
||||
boxShadow: cssVar('menuShadow'),
|
||||
maxWidth: '360px',
|
||||
minWidth: '260px',
|
||||
});
|
||||
|
||||
export const dndCell = style({
|
||||
position: 'relative',
|
||||
marginLeft: -8,
|
||||
@@ -53,7 +52,6 @@ export const dndCell = style({
|
||||
outline: 'none',
|
||||
paddingLeft: 8,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true] ${dndCell}:before`, {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
@@ -63,21 +61,18 @@ globalStyle(`[data-draggable=true] ${dndCell}:before`, {
|
||||
width: 4,
|
||||
height: 4,
|
||||
transition: 'height 0.2s, opacity 0.2s',
|
||||
backgroundColor: 'var(--affine-placeholder-color)',
|
||||
backgroundColor: cssVar('placeholderColor'),
|
||||
borderRadius: '2px',
|
||||
opacity: 0,
|
||||
willChange: 'height, opacity',
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true] ${dndCell}:hover:before`, {
|
||||
height: 12,
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}`, {
|
||||
opacity: 0.5,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, {
|
||||
height: 32,
|
||||
width: 2,
|
||||
@@ -88,25 +83,21 @@ globalStyle(`[data-draggable=true][data-dragging=true] ${dndCell}:before`, {
|
||||
globalStyle(`${root} > :first-child`, {
|
||||
paddingLeft: '16px',
|
||||
});
|
||||
|
||||
globalStyle(`${root} > :last-child`, {
|
||||
paddingRight: '8px',
|
||||
});
|
||||
|
||||
export const titleIconsWrapper = style({
|
||||
padding: '0 5px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
});
|
||||
|
||||
export const selectionCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexShrink: 0,
|
||||
fontSize: 'var(--affine-font-h-3)',
|
||||
fontSize: cssVar('fontH3'),
|
||||
});
|
||||
|
||||
export const titleCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
@@ -115,62 +106,55 @@ export const titleCell = style({
|
||||
flex: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
export const titleCellMain = style({
|
||||
overflow: 'hidden',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 600,
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
alignSelf: 'stretch',
|
||||
paddingRight: '4px',
|
||||
});
|
||||
|
||||
export const titleCellPreview = style({
|
||||
overflow: 'hidden',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: cssVar('fontBase'),
|
||||
flex: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
alignSelf: 'stretch',
|
||||
});
|
||||
|
||||
export const iconCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-h-3)',
|
||||
color: 'var(--affine-icon-color)',
|
||||
fontSize: cssVar('fontH3'),
|
||||
color: cssVar('iconColor'),
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
export const tagsCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
padding: '0 8px',
|
||||
height: '60px',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const dateCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
flexShrink: 0,
|
||||
flexWrap: 'nowrap',
|
||||
padding: '0 8px',
|
||||
});
|
||||
|
||||
export const actionsCellWrapper = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
export const operationsCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -178,7 +162,6 @@ export const operationsCell = style({
|
||||
columnGap: '6px',
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
export const tagIndicator = style({
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const view = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -8,7 +8,6 @@ export const view = style({
|
||||
fontWeight: 600,
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
export const option = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -17,7 +16,7 @@ export const option = style({
|
||||
cursor: 'pointer',
|
||||
borderRadius: 4,
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
opacity: 0,
|
||||
selectors: {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const menuTitleStyle = style({
|
||||
marginLeft: '12px',
|
||||
marginTop: '10px',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
});
|
||||
export const menuDividerStyle = style({
|
||||
marginTop: '2px',
|
||||
@@ -12,7 +12,7 @@ export const menuDividerStyle = style({
|
||||
marginLeft: '12px',
|
||||
marginRight: '8px',
|
||||
height: '1px',
|
||||
background: 'var(--affine-border-color)',
|
||||
background: cssVar('borderColor'),
|
||||
});
|
||||
export const viewMenu = style({});
|
||||
export const viewOption = style({
|
||||
@@ -25,7 +25,7 @@ export const viewOption = style({
|
||||
height: 24,
|
||||
opacity: 0,
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
selectors: {
|
||||
[`${viewMenu}:hover &`]: {
|
||||
@@ -36,7 +36,7 @@ export const viewOption = style({
|
||||
export const filterMenuTrigger = style({
|
||||
padding: '6px 8px',
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
selectors: {
|
||||
[`&[data-is-hidden="true"]`]: {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const divider = style({
|
||||
marginTop: '2px',
|
||||
marginBottom: '2px',
|
||||
marginLeft: '12px',
|
||||
marginRight: '8px',
|
||||
height: '1px',
|
||||
background: 'var(--affine-border-color)',
|
||||
background: cssVar('borderColor'),
|
||||
});
|
||||
|
||||
@@ -1,24 +1,21 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const footer = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
paddingTop: 20,
|
||||
gap: 20,
|
||||
});
|
||||
|
||||
export const createTips = style({
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: 12,
|
||||
lineHeight: '20px',
|
||||
});
|
||||
|
||||
export const label = style({
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: 14,
|
||||
lineHeight: '22px',
|
||||
});
|
||||
|
||||
export const content = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
@@ -1,26 +1,23 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const ellipsis = style({
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
export const pagesBottomLeft = style({
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const pagesBottom = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '20px 24px',
|
||||
borderTop: '1px solid var(--affine-border-color)',
|
||||
borderTop: `1px solid ${cssVar('borderColor')}`,
|
||||
flexWrap: 'wrap',
|
||||
gap: '12px',
|
||||
});
|
||||
|
||||
export const pagesTabContent = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
@@ -28,7 +25,6 @@ export const pagesTabContent = style({
|
||||
alignItems: 'center',
|
||||
padding: '16px 16px 8px 16px',
|
||||
});
|
||||
|
||||
export const pagesTab = style({
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
@@ -36,45 +32,39 @@ export const pagesTab = style({
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const pagesList = style({
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const bottomLeft = style({
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const rulesBottom = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '20px 24px',
|
||||
borderTop: '1px solid var(--affine-border-color)',
|
||||
borderTop: `1px solid ${cssVar('borderColor')}`,
|
||||
flexWrap: 'wrap',
|
||||
gap: '12px',
|
||||
});
|
||||
|
||||
export const includeListTitle = style({
|
||||
fontSize: 14,
|
||||
fontWeight: 400,
|
||||
lineHeight: '22px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
padding: '4px 16px',
|
||||
borderTop: '1px solid var(--affine-border-color)',
|
||||
borderTop: `1px solid ${cssVar('borderColor')}`,
|
||||
});
|
||||
|
||||
export const rulesContainerRight = style({
|
||||
flex: 2,
|
||||
flexDirection: 'column',
|
||||
borderLeft: '1px solid var(--affine-border-color)',
|
||||
borderLeft: `1px solid ${cssVar('borderColor')}`,
|
||||
overflowX: 'hidden',
|
||||
overflowY: 'auto',
|
||||
});
|
||||
|
||||
export const includeAddButton = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -84,14 +74,14 @@ export const includeAddButton = style({
|
||||
lineHeight: '22px',
|
||||
width: 'max-content',
|
||||
});
|
||||
|
||||
export const includeItemTitle = style({ overflow: 'hidden', fontWeight: 600 });
|
||||
|
||||
export const includeItemTitle = style({
|
||||
overflow: 'hidden',
|
||||
fontWeight: 600,
|
||||
});
|
||||
export const includeItemContentIs = style({
|
||||
padding: '0 8px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
});
|
||||
|
||||
export const includeItemContent = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -100,20 +90,18 @@ export const includeItemContent = style({
|
||||
lineHeight: '20px',
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const includeItem = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: 'max-content',
|
||||
backgroundColor: 'var(--affine-background-primary-color)',
|
||||
backgroundColor: cssVar('backgroundPrimaryColor'),
|
||||
overflow: 'hidden',
|
||||
gap: 16,
|
||||
whiteSpace: 'nowrap',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
borderRadius: 8,
|
||||
padding: '4px 8px 4px',
|
||||
});
|
||||
|
||||
export const includeTitle = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -121,7 +109,6 @@ export const includeTitle = style({
|
||||
fontSize: 14,
|
||||
lineHeight: '22px',
|
||||
});
|
||||
|
||||
export const rulesContainerLeftContentInclude = style({
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
@@ -129,7 +116,6 @@ export const rulesContainerLeftContentInclude = style({
|
||||
gap: 8,
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
export const rulesContainerLeftContent = style({
|
||||
padding: '12px 16px 16px',
|
||||
display: 'flex',
|
||||
@@ -137,7 +123,6 @@ export const rulesContainerLeftContent = style({
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const rulesContainerLeftTab = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
@@ -145,84 +130,75 @@ export const rulesContainerLeftTab = style({
|
||||
alignItems: 'center',
|
||||
padding: '16px 16px 8px 16px',
|
||||
});
|
||||
|
||||
export const rulesContainerLeft = style({
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const rulesContainer = style({
|
||||
display: 'flex',
|
||||
overflow: 'hidden',
|
||||
flex: 1,
|
||||
});
|
||||
|
||||
export const collectionEditContainer = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
export const confirmButton = style({
|
||||
marginLeft: 20,
|
||||
});
|
||||
|
||||
export const resultPages = style({
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const pageList = style({
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const previewCountTipsHighlight = style({
|
||||
color: 'var(--affine-primary-color)',
|
||||
color: cssVar('primaryColor'),
|
||||
});
|
||||
|
||||
export const previewCountTips = style({
|
||||
fontSize: 12,
|
||||
lineHeight: '20px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
});
|
||||
export const selectedCountTips = style({
|
||||
fontSize: 12,
|
||||
lineHeight: '20px',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
});
|
||||
|
||||
export const rulesTitleHighlight = style({
|
||||
color: 'var(--affine-primary-color)',
|
||||
color: cssVar('primaryColor'),
|
||||
fontStyle: 'italic',
|
||||
fontWeight: 800,
|
||||
});
|
||||
|
||||
export const tabButton = style({ height: 28 });
|
||||
export const tabButton = style({
|
||||
height: 28,
|
||||
});
|
||||
export const icon = style({
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
});
|
||||
export const button = style({
|
||||
userSelect: 'none',
|
||||
borderRadius: 4,
|
||||
cursor: 'pointer',
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
});
|
||||
export const bottomButton = style({
|
||||
padding: '4px 12px',
|
||||
borderRadius: 8,
|
||||
});
|
||||
|
||||
export const previewActive = style({
|
||||
backgroundColor: 'var(--affine-hover-color-filled)',
|
||||
backgroundColor: cssVar('hoverColorFilled'),
|
||||
});
|
||||
export const rulesTitle = style({
|
||||
padding: '20px 24px',
|
||||
userSelect: 'none',
|
||||
fontSize: 20,
|
||||
lineHeight: '24px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
borderBottom: '1px solid var(--affine-border-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
borderBottom: `1px solid ${cssVar('borderColor')}`,
|
||||
});
|
||||
|
||||
@@ -1,32 +1,28 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const highlightContainer = style({
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
});
|
||||
|
||||
export const highlightText = style({
|
||||
whiteSpace: 'pre',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
});
|
||||
|
||||
export const highlightKeyword = style({
|
||||
color: 'var(--affine-primary-color)',
|
||||
color: cssVar('primaryColor'),
|
||||
whiteSpace: 'pre',
|
||||
overflow: 'visible',
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
||||
export const labelTitle = style({
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
lineHeight: '24px',
|
||||
fontWeight: 400,
|
||||
textAlign: 'justify',
|
||||
});
|
||||
|
||||
export const labelContent = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
lineHeight: '20px',
|
||||
fontWeight: 400,
|
||||
textAlign: 'justify',
|
||||
|
||||
@@ -1,24 +1,21 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({});
|
||||
|
||||
export const commandsContainer = style({
|
||||
height: 'calc(100% - 65px)',
|
||||
padding: '8px 6px 18px 6px',
|
||||
});
|
||||
|
||||
export const searchInput = style({
|
||||
height: 66,
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
fontSize: 'var(--affine-font-h-5)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
fontSize: cssVar('fontH5'),
|
||||
padding: '21px 24px',
|
||||
marginBottom: '8px',
|
||||
width: '100%',
|
||||
borderBottom: '1px solid var(--affine-border-color)',
|
||||
borderBottom: `1px solid ${cssVar('borderColor')}`,
|
||||
flexShrink: 0,
|
||||
|
||||
'::placeholder': {
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
},
|
||||
selectors: {
|
||||
'&.inEditor': {
|
||||
@@ -27,94 +24,82 @@ export const searchInput = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const pageTitleWrapper = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '18px 24px 0 24px',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const pageTitle = style({
|
||||
padding: '2px 6px',
|
||||
borderRadius: 4,
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
lineHeight: '20px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
maxWidth: '100%',
|
||||
backgroundColor: 'var(--affine-background-secondary-color)',
|
||||
backgroundColor: cssVar('backgroundSecondaryColor'),
|
||||
});
|
||||
|
||||
export const panelContainer = style({
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
});
|
||||
|
||||
export const itemIcon = style({
|
||||
fontSize: 20,
|
||||
marginRight: 16,
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
color: 'var(--affine-icon-secondary)',
|
||||
color: cssVar('iconSecondary'),
|
||||
});
|
||||
|
||||
export const itemLabel = style({
|
||||
fontSize: 14,
|
||||
lineHeight: '1.5',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
export const timestamp = style({
|
||||
display: 'flex',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
minWidth: 120,
|
||||
flexDirection: 'row-reverse',
|
||||
});
|
||||
|
||||
export const keybinding = style({
|
||||
display: 'flex',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
columnGap: 2,
|
||||
});
|
||||
|
||||
export const keybindingFragment = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '0 4px',
|
||||
borderRadius: 4,
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
backgroundColor: 'var(--affine-background-tertiary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
backgroundColor: cssVar('backgroundTertiaryColor'),
|
||||
width: 24,
|
||||
height: 20,
|
||||
});
|
||||
|
||||
globalStyle(`${root} [cmdk-root]`, {
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
globalStyle(`${root} [cmdk-group-heading]`, {
|
||||
padding: '8px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 600,
|
||||
lineHeight: '1.67',
|
||||
});
|
||||
|
||||
globalStyle(`${root} [cmdk-group][hidden]`, {
|
||||
display: 'none',
|
||||
});
|
||||
|
||||
globalStyle(`${root} [cmdk-list]`, {
|
||||
maxHeight: 400,
|
||||
minHeight: 120,
|
||||
@@ -125,29 +110,23 @@ globalStyle(`${root} [cmdk-list]`, {
|
||||
scrollbarGutter: 'stable',
|
||||
scrollPaddingBlock: '12px',
|
||||
});
|
||||
|
||||
globalStyle(`${root} [cmdk-list]:not([data-opening])`, {
|
||||
transition: 'height .1s ease',
|
||||
});
|
||||
|
||||
globalStyle(`${root} [cmdk-list]::-webkit-scrollbar`, {
|
||||
width: 6,
|
||||
height: 6,
|
||||
});
|
||||
|
||||
globalStyle(`${root} [cmdk-list]::-webkit-scrollbar-thumb`, {
|
||||
borderRadius: 4,
|
||||
backgroundClip: 'padding-box',
|
||||
});
|
||||
|
||||
globalStyle(`${root} [cmdk-list]:hover::-webkit-scrollbar-thumb`, {
|
||||
backgroundColor: 'var(--affine-divider-color)',
|
||||
backgroundColor: cssVar('dividerColor'),
|
||||
});
|
||||
|
||||
globalStyle(`${root} [cmdk-list]:hover::-webkit-scrollbar-thumb:hover`, {
|
||||
backgroundColor: 'var(--affine-icon-color)',
|
||||
backgroundColor: cssVar('iconColor'),
|
||||
});
|
||||
|
||||
globalStyle(`${root} [cmdk-item]`, {
|
||||
display: 'flex',
|
||||
minHeight: 44,
|
||||
@@ -157,35 +136,32 @@ globalStyle(`${root} [cmdk-item]`, {
|
||||
borderRadius: 4,
|
||||
userSelect: 'none',
|
||||
});
|
||||
|
||||
globalStyle(`${root} [cmdk-item][data-selected=true]`, {
|
||||
background: 'var(--affine-background-secondary-color)',
|
||||
background: cssVar('backgroundSecondaryColor'),
|
||||
});
|
||||
globalStyle(`${root} [cmdk-item][data-selected=true][data-is-danger=true]`, {
|
||||
background: 'var(--affine-background-error-color)',
|
||||
color: 'var(--affine-error-color)',
|
||||
background: cssVar('backgroundErrorColor'),
|
||||
color: cssVar('errorColor'),
|
||||
});
|
||||
|
||||
globalStyle(`${root} [cmdk-item][data-selected=true] ${itemIcon}`, {
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
});
|
||||
globalStyle(
|
||||
`${root} [cmdk-item][data-selected=true][data-is-danger=true] ${itemIcon}`,
|
||||
{
|
||||
color: 'var(--affine-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
}
|
||||
);
|
||||
globalStyle(
|
||||
`${root} [cmdk-item][data-selected=true][data-is-danger=true] ${itemLabel}`,
|
||||
{
|
||||
color: 'var(--affine-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
}
|
||||
);
|
||||
|
||||
export const resultGroupHeader = style({
|
||||
padding: '8px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 600,
|
||||
lineHeight: '1.67',
|
||||
});
|
||||
|
||||
@@ -1,37 +1,45 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
const contentShow = keyframes({
|
||||
from: { opacity: 0, transform: 'translateY(-2%) scale(0.96)' },
|
||||
to: { opacity: 1, transform: 'translateY(0) scale(1)' },
|
||||
from: {
|
||||
opacity: 0,
|
||||
transform: 'translateY(-2%) scale(0.96)',
|
||||
},
|
||||
to: {
|
||||
opacity: 1,
|
||||
transform: 'translateY(0) scale(1)',
|
||||
},
|
||||
});
|
||||
|
||||
const contentHide = keyframes({
|
||||
to: { opacity: 0, transform: 'translateY(-2%) scale(0.96)' },
|
||||
from: { opacity: 1, transform: 'translateY(0) scale(1)' },
|
||||
to: {
|
||||
opacity: 0,
|
||||
transform: 'translateY(-2%) scale(0.96)',
|
||||
},
|
||||
from: {
|
||||
opacity: 1,
|
||||
transform: 'translateY(0) scale(1)',
|
||||
},
|
||||
});
|
||||
|
||||
export const modalOverlay = style({
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
backgroundColor: 'transparent',
|
||||
zIndex: 'var(--affine-z-index-modal)',
|
||||
zIndex: cssVar('zIndexModal'),
|
||||
});
|
||||
|
||||
export const modalContentWrapper = style({
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'center',
|
||||
zIndex: 'var(--affine-z-index-modal)',
|
||||
zIndex: cssVar('zIndexModal'),
|
||||
padding: '13vh 16px 16px',
|
||||
});
|
||||
|
||||
export const modalContent = style({
|
||||
width: 640,
|
||||
// height: 530,
|
||||
backgroundColor: 'var(--affine-background-overlay-panel-color)',
|
||||
boxShadow: 'var(--affine-cmd-shadow)',
|
||||
backgroundColor: cssVar('backgroundOverlayPanelColor'),
|
||||
boxShadow: cssVar('cmdShadow'),
|
||||
borderRadius: '12px',
|
||||
maxWidth: 'calc(100vw - 50px)',
|
||||
minWidth: 480,
|
||||
@@ -39,9 +47,8 @@ export const modalContent = style({
|
||||
// :focus-visible will set outline
|
||||
outline: 'none',
|
||||
position: 'relative',
|
||||
zIndex: 'var(--affine-z-index-modal)',
|
||||
zIndex: cssVar('zIndexModal'),
|
||||
willChange: 'transform, opacity',
|
||||
|
||||
selectors: {
|
||||
'&[data-state=entered], &[data-state=entering]': {
|
||||
animation: `${contentShow} 120ms cubic-bezier(0.42, 0, 0.58, 1)`,
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const notFoundContainer = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
padding: '0 8px',
|
||||
marginBottom: 8,
|
||||
});
|
||||
|
||||
export const notFoundItem = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -14,27 +13,24 @@ export const notFoundItem = style({
|
||||
padding: '0 12px',
|
||||
gap: 16,
|
||||
});
|
||||
|
||||
export const notFoundIcon = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: 20,
|
||||
color: 'var(--affine-icon-secondary)',
|
||||
color: cssVar('iconSecondary'),
|
||||
padding: '12px 0',
|
||||
});
|
||||
|
||||
export const notFoundTitle = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontWeight: '600',
|
||||
lineHeight: '20px',
|
||||
textAlign: 'justify',
|
||||
padding: '8px',
|
||||
});
|
||||
|
||||
export const notFoundText = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
color: cssVar('textPrimaryColor'),
|
||||
lineHeight: '22px',
|
||||
fontWeight: '400',
|
||||
});
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const headerMenuTrigger = style({
|
||||
selectors: {
|
||||
'&[data-state=open], &:hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const group = style({
|
||||
display: 'flex',
|
||||
gap: '16px',
|
||||
@@ -15,20 +15,20 @@ export const deleteHintContainer = style({
|
||||
flexShrink: 0,
|
||||
bottom: '0',
|
||||
gap: '16px',
|
||||
backgroundColor: 'var(--affine-background-primary-color)',
|
||||
borderTop: '1px solid var(--affine-border-color)',
|
||||
backgroundColor: cssVar('backgroundPrimaryColor'),
|
||||
borderTop: `1px solid ${cssVar('borderColor')}`,
|
||||
});
|
||||
export const deleteHintText = style({
|
||||
fontSize: '15px',
|
||||
fontWeight: '500',
|
||||
lineHeight: '24px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
overflow: 'hidden',
|
||||
});
|
||||
export const buttonContainer = style({
|
||||
color: 'var(--affine-pure-white)',
|
||||
color: cssVar('pureWhite'),
|
||||
padding: '8px 18px',
|
||||
fontSize: '20px',
|
||||
height: '36px',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const filterTab = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 600,
|
||||
textTransform: 'capitalize',
|
||||
minWidth: '91px',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
export const wrapper = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -28,7 +28,6 @@ export const title = style({
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true] ${title}:before`, {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
@@ -38,46 +37,42 @@ globalStyle(`[data-draggable=true] ${title}:before`, {
|
||||
width: 4,
|
||||
height: 4,
|
||||
transition: 'height 0.2s, opacity 0.2s',
|
||||
backgroundColor: 'var(--affine-placeholder-color)',
|
||||
backgroundColor: cssVar('placeholderColor'),
|
||||
borderRadius: '2px',
|
||||
opacity: 0,
|
||||
willChange: 'height, opacity',
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true] ${title}:hover:before`, {
|
||||
height: 12,
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true][data-dragging=true] ${title}`, {
|
||||
opacity: 0.5,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true][data-dragging=true] ${title}:before`, {
|
||||
height: 32,
|
||||
width: 2,
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
export const more = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 2,
|
||||
fontSize: 16,
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
});
|
||||
export const deleteFolder = style({
|
||||
':hover': {
|
||||
color: 'var(--affine-error-color)',
|
||||
backgroundColor: 'var(--affine-background-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
backgroundColor: cssVar('backgroundErrorColor'),
|
||||
},
|
||||
});
|
||||
globalStyle(`${deleteFolder}:hover svg`, {
|
||||
color: 'var(--affine-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
});
|
||||
export const menuDividerStyle = style({
|
||||
marginTop: '2px',
|
||||
@@ -85,9 +80,8 @@ export const menuDividerStyle = style({
|
||||
marginLeft: '12px',
|
||||
marginRight: '8px',
|
||||
height: '1px',
|
||||
background: 'var(--affine-border-color)',
|
||||
background: cssVar('borderColor'),
|
||||
});
|
||||
|
||||
const slideDown = keyframes({
|
||||
'0%': {
|
||||
height: '0px',
|
||||
@@ -96,7 +90,6 @@ const slideDown = keyframes({
|
||||
height: 'var(--radix-collapsible-content-height)',
|
||||
},
|
||||
});
|
||||
|
||||
const slideUp = keyframes({
|
||||
'0%': {
|
||||
height: 'var(--radix-collapsible-content-height)',
|
||||
@@ -105,7 +98,6 @@ const slideUp = keyframes({
|
||||
height: '0px',
|
||||
},
|
||||
});
|
||||
|
||||
export const collapsibleContent = style({
|
||||
overflow: 'hidden',
|
||||
marginTop: '4px',
|
||||
@@ -118,7 +110,6 @@ export const collapsibleContent = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const emptyCollectionWrapper = style({
|
||||
padding: '9px 0',
|
||||
display: 'flex',
|
||||
@@ -126,14 +117,12 @@ export const emptyCollectionWrapper = style({
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
});
|
||||
|
||||
export const emptyCollectionContent = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
});
|
||||
|
||||
export const emptyCollectionIconWrapper = style({
|
||||
width: 36,
|
||||
height: 36,
|
||||
@@ -141,22 +130,19 @@ export const emptyCollectionIconWrapper = style({
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
});
|
||||
|
||||
export const emptyCollectionIcon = style({
|
||||
fontSize: 20,
|
||||
color: 'var(--affine-icon-secondary)',
|
||||
color: cssVar('iconSecondary'),
|
||||
});
|
||||
|
||||
export const emptyCollectionMessage = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
textAlign: 'center',
|
||||
color: 'var(--affine-black-30)',
|
||||
color: cssVar('black30'),
|
||||
});
|
||||
|
||||
export const emptyCollectionNewButton = style({
|
||||
padding: '0 8px',
|
||||
height: '30px',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
export const label = style({
|
||||
selectors: {
|
||||
'&[data-untitled="true"]': {
|
||||
@@ -7,7 +7,6 @@ export const label = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const favItemWrapper = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -21,7 +20,6 @@ export const favItemWrapper = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const slideDown = keyframes({
|
||||
'0%': {
|
||||
height: '0px',
|
||||
@@ -30,7 +28,6 @@ const slideDown = keyframes({
|
||||
height: 'var(--radix-collapsible-content-height)',
|
||||
},
|
||||
});
|
||||
|
||||
const slideUp = keyframes({
|
||||
'0%': {
|
||||
height: 'var(--radix-collapsible-content-height)',
|
||||
@@ -39,7 +36,6 @@ const slideUp = keyframes({
|
||||
height: '0px',
|
||||
},
|
||||
});
|
||||
|
||||
export const collapsibleContent = style({
|
||||
overflow: 'hidden',
|
||||
marginTop: '4px',
|
||||
@@ -52,14 +48,11 @@ export const collapsibleContent = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const collapsibleContentInner = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
});
|
||||
|
||||
export const favItem = style({});
|
||||
|
||||
globalStyle(`[data-draggable=true] ${favItem}:before`, {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
@@ -69,81 +62,70 @@ globalStyle(`[data-draggable=true] ${favItem}:before`, {
|
||||
width: 4,
|
||||
height: 4,
|
||||
transition: 'height 0.2s, opacity 0.2s',
|
||||
backgroundColor: 'var(--affine-placeholder-color)',
|
||||
backgroundColor: cssVar('placeholderColor'),
|
||||
borderRadius: '2px',
|
||||
opacity: 0,
|
||||
willChange: 'height, opacity',
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true] ${favItem}:hover:before`, {
|
||||
height: 12,
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true][data-dragging=true] ${favItem}`, {
|
||||
opacity: 0.5,
|
||||
});
|
||||
|
||||
globalStyle(`[data-draggable=true][data-dragging=true] ${favItem}:before`, {
|
||||
height: 32,
|
||||
width: 2,
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
export const dragPageItemOverlay = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: 'var(--affine-hover-color-filled)',
|
||||
boxShadow: 'var(--affine-menu-shadow)',
|
||||
background: cssVar('hoverColorFilled'),
|
||||
boxShadow: cssVar('menuShadow'),
|
||||
minHeight: '30px',
|
||||
maxWidth: '360px',
|
||||
width: '100%',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
gap: '8px',
|
||||
padding: '4px',
|
||||
borderRadius: '4px',
|
||||
cursor: 'grabbing',
|
||||
});
|
||||
|
||||
globalStyle(`${dragPageItemOverlay} svg`, {
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
});
|
||||
|
||||
globalStyle(`${dragPageItemOverlay} span`, {
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const favoriteList = style({
|
||||
selectors: {
|
||||
'&[data-over="true"]': {
|
||||
background: 'var(--affine-hover-color-filled)',
|
||||
background: cssVar('hoverColorFilled'),
|
||||
borderRadius: '4px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const favoritePostfixItem = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const menuItem = style({
|
||||
gap: '8px',
|
||||
});
|
||||
|
||||
globalStyle(`${menuItem} svg`, {
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
});
|
||||
globalStyle(`${menuItem}.danger:hover svg`, {
|
||||
color: 'var(--affine-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
});
|
||||
|
||||
export const emptyFavouritesContent = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -151,7 +133,6 @@ export const emptyFavouritesContent = style({
|
||||
gap: 6,
|
||||
padding: '9px 20px 25px 21px',
|
||||
});
|
||||
|
||||
export const emptyFavouritesIconWrapper = style({
|
||||
width: 36,
|
||||
height: 36,
|
||||
@@ -159,16 +140,14 @@ export const emptyFavouritesIconWrapper = style({
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
});
|
||||
|
||||
export const emptyFavouritesIcon = style({
|
||||
fontSize: 20,
|
||||
color: 'var(--affine-icon-secondary)',
|
||||
color: cssVar('iconSecondary'),
|
||||
});
|
||||
|
||||
export const emptyFavouritesMessage = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
textAlign: 'center',
|
||||
color: 'var(--affine-black-30)',
|
||||
color: cssVar('black30'),
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const ItemContainer = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -10,13 +10,12 @@ export const ItemContainer = style({
|
||||
borderRadius: '8px',
|
||||
transition: 'background-color 0.2s',
|
||||
fontSize: '24px',
|
||||
color: 'var(--affine-icon-secondary)',
|
||||
color: cssVar('iconSecondary'),
|
||||
});
|
||||
|
||||
export const ItemText = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
lineHeight: '22px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontWeight: 400,
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const workspaceListWrapper = style({
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
});
|
||||
|
||||
export const signInWrapper = style({
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
@@ -14,44 +13,39 @@ export const signInWrapper = style({
|
||||
justifyContent: 'flex-start',
|
||||
borderRadius: '8px',
|
||||
});
|
||||
|
||||
export const iconContainer = style({
|
||||
width: '28px',
|
||||
padding: '2px 4px 4px',
|
||||
borderRadius: '14px',
|
||||
background: 'var(--affine-white)',
|
||||
background: cssVar('white'),
|
||||
display: 'flex',
|
||||
border: '1px solid var(--affine-icon-secondary)',
|
||||
color: 'var(--affine-icon-secondary)',
|
||||
border: `1px solid ${cssVar('iconSecondary')}`,
|
||||
color: cssVar('iconSecondary'),
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '20px',
|
||||
});
|
||||
|
||||
export const signInTextContainer = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
});
|
||||
|
||||
export const signInTextPrimary = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 600,
|
||||
lineHeight: '22px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
export const signInTextSecondary = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 400,
|
||||
lineHeight: '20px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
export const menuItem = style({
|
||||
borderRadius: '8px',
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const userAccountContainer = style({
|
||||
display: 'flex',
|
||||
padding: '4px 0px 4px 12px',
|
||||
@@ -9,14 +9,13 @@ export const userAccountContainer = style({
|
||||
width: '100%',
|
||||
});
|
||||
export const userEmail = style({
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 400,
|
||||
lineHeight: '22px',
|
||||
textOverflow: 'ellipsis',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
});
|
||||
|
||||
export const leftContainer = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const workspaceListsWrapper = style({
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
@@ -12,17 +12,15 @@ export const workspaceListWrapper = style({
|
||||
flexDirection: 'column',
|
||||
gap: '4px',
|
||||
});
|
||||
|
||||
export const workspaceType = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0px 12px',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
lineHeight: '20px',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
});
|
||||
|
||||
export const scrollbar = style({
|
||||
transform: 'translateX(8px)',
|
||||
width: '4px',
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const iconWrapper = style({
|
||||
position: 'absolute',
|
||||
top: '16px',
|
||||
left: '16px',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
selectors: {
|
||||
'&:visited': {
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,33 +1,35 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
export const layout = style({
|
||||
margin: '80px auto',
|
||||
maxWidth: '536px',
|
||||
});
|
||||
|
||||
export const upgradeBox = style({
|
||||
padding: '48px 52px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const upgradeTips = style({
|
||||
margin: '20px 0',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
fontSize: '12px',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: '400',
|
||||
lineHeight: '20px',
|
||||
textAlign: 'center',
|
||||
});
|
||||
|
||||
const rotate = keyframes({
|
||||
'0%': { transform: 'rotate(0deg)' },
|
||||
'50%': { transform: 'rotate(180deg)' },
|
||||
'100%': { transform: 'rotate(360deg)' },
|
||||
'0%': {
|
||||
transform: 'rotate(0deg)',
|
||||
},
|
||||
'50%': {
|
||||
transform: 'rotate(180deg)',
|
||||
},
|
||||
'100%': {
|
||||
transform: 'rotate(360deg)',
|
||||
},
|
||||
});
|
||||
|
||||
export const loadingIcon = style({
|
||||
animation: `${rotate} 1.2s infinite linear`,
|
||||
});
|
||||
|
||||
@@ -1,19 +1,17 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
height: '100vh',
|
||||
width: '100vw',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
export const affineLogo = style({
|
||||
color: 'inherit',
|
||||
});
|
||||
|
||||
export const topNav = style({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
@@ -24,34 +22,29 @@ export const topNav = style({
|
||||
justifyContent: 'space-between',
|
||||
padding: '16px 120px',
|
||||
});
|
||||
|
||||
export const topNavLinks = style({
|
||||
display: 'flex',
|
||||
columnGap: 4,
|
||||
});
|
||||
|
||||
export const topNavLink = style({
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 500,
|
||||
textDecoration: 'none',
|
||||
padding: '4px 18px',
|
||||
});
|
||||
|
||||
export const tryAgainLink = style({
|
||||
color: 'var(--affine-link-color)',
|
||||
color: cssVar('linkColor'),
|
||||
fontWeight: 500,
|
||||
textDecoration: 'none',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
});
|
||||
|
||||
export const centerContent = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
marginTop: 40,
|
||||
});
|
||||
|
||||
export const prompt = style({
|
||||
marginTop: 20,
|
||||
marginBottom: 12,
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
export const leftContentText = style({
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
fontWeight: 400,
|
||||
lineHeight: '1.6',
|
||||
maxWidth: '548px',
|
||||
});
|
||||
|
||||
export const mail = style({
|
||||
color: 'var(--affine-link-color)',
|
||||
color: cssVar('linkColor'),
|
||||
textDecoration: 'none',
|
||||
':visited': {
|
||||
color: 'var(--affine-link-color)',
|
||||
color: cssVar('linkColor'),
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,19 +1,17 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexFlow: 'column',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
});
|
||||
|
||||
export const scrollContainer = style({
|
||||
flex: 1,
|
||||
width: '100%',
|
||||
paddingBottom: '32px',
|
||||
});
|
||||
|
||||
export const headerCreateNewButton = style({
|
||||
transition: 'opacity 0.1s ease-in-out',
|
||||
});
|
||||
@@ -24,12 +22,10 @@ export const headerCreateNewCollectionIconButton = style({
|
||||
height: '28px',
|
||||
borderRadius: '8px',
|
||||
});
|
||||
|
||||
export const headerCreateNewButtonHidden = style({
|
||||
opacity: 0,
|
||||
pointerEvents: 'none',
|
||||
});
|
||||
|
||||
export const headerRightWindows = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const placeholderButton = style({
|
||||
padding: '8px 18px',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
borderRadius: 8,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -12,7 +12,7 @@ export const placeholderButton = style({
|
||||
fontSize: 15,
|
||||
lineHeight: '24px',
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
});
|
||||
export const button = style({
|
||||
@@ -20,6 +20,6 @@ export const button = style({
|
||||
borderRadius: 4,
|
||||
cursor: 'pointer',
|
||||
':hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { ComplexStyleRule } from '@vanilla-extract/css';
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const header = style({
|
||||
@@ -7,11 +7,14 @@ export const header = style({
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
flexShrink: 0,
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
borderBottom: '1px solid var(--affine-border-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
borderBottom: `1px solid ${cssVar('borderColor')}`,
|
||||
selectors: {
|
||||
'&[data-sidebar-floating="false"]': {
|
||||
WebkitAppRegion: 'drag',
|
||||
['WebkitAppRegion' as string]: 'drag',
|
||||
},
|
||||
'&:has([data-popper-placement])': {
|
||||
['WebkitAppRegion' as string]: 'no-drag',
|
||||
},
|
||||
},
|
||||
'@media': {
|
||||
@@ -19,11 +22,7 @@ export const header = style({
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
':has([data-popper-placement])': {
|
||||
WebkitAppRegion: 'no-drag',
|
||||
},
|
||||
} as ComplexStyleRule);
|
||||
|
||||
});
|
||||
export const mainHeader = style([
|
||||
header,
|
||||
{
|
||||
@@ -31,7 +30,6 @@ export const mainHeader = style([
|
||||
gap: 12,
|
||||
},
|
||||
]);
|
||||
|
||||
export const sidebarHeader = style([
|
||||
header,
|
||||
{
|
||||
@@ -39,18 +37,15 @@ export const sidebarHeader = style([
|
||||
gap: '12px',
|
||||
},
|
||||
]);
|
||||
|
||||
export const mainHeaderRight = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
});
|
||||
|
||||
export const spacer = style({
|
||||
flexGrow: 1,
|
||||
minWidth: 12,
|
||||
});
|
||||
|
||||
export const standaloneExtensionSwitcherWrapper = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -59,7 +54,6 @@ export const standaloneExtensionSwitcherWrapper = style({
|
||||
height: '52px',
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
export const journalWeekPicker = style({
|
||||
minWidth: 100,
|
||||
flexGrow: 1,
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const mainContainer = style({
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
@@ -15,14 +14,13 @@ export const mainContainer = style({
|
||||
flexDirection: 'column',
|
||||
minWidth: 0,
|
||||
overflow: 'hidden',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
selectors: {
|
||||
[`${root}[data-client-border=true] &`]: {
|
||||
borderRadius: '4px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const editorContainer = style({
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
@@ -31,7 +29,6 @@ export const editorContainer = style({
|
||||
overflow: 'hidden',
|
||||
zIndex: 0,
|
||||
});
|
||||
|
||||
export const sidebarContainer = style({
|
||||
display: 'flex',
|
||||
flexShrink: 0,
|
||||
@@ -41,14 +38,13 @@ export const sidebarContainer = style({
|
||||
paddingLeft: 9,
|
||||
},
|
||||
[`${root}[data-client-border=false] &`]: {
|
||||
borderLeft: '1px solid var(--affine-border-color)',
|
||||
borderLeft: `1px solid ${cssVar('borderColor')}`,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const sidebarContainerInner = style({
|
||||
display: 'flex',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
height: '100%',
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { createVar, style } from '@vanilla-extract/css';
|
||||
|
||||
export const activeIdx = createVar();
|
||||
|
||||
export const switchRoot = style({
|
||||
vars: {
|
||||
[activeIdx]: '0',
|
||||
@@ -13,30 +12,27 @@ export const switchRoot = style({
|
||||
borderRadius: '12px',
|
||||
padding: '4px',
|
||||
position: 'relative',
|
||||
background: 'var(--affine-background-secondary-color)',
|
||||
|
||||
background: cssVar('backgroundSecondaryColor'),
|
||||
'::after': {
|
||||
content: '""',
|
||||
display: 'block',
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
boxShadow: 'var(--affine-shadow-1)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
boxShadow: cssVar('shadow1'),
|
||||
borderRadius: '8px',
|
||||
position: 'absolute',
|
||||
transform: `translateX(calc(${activeIdx} * 32px))`,
|
||||
transition: 'all .15s',
|
||||
},
|
||||
});
|
||||
|
||||
export const button = style({
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '8px',
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
|
||||
selectors: {
|
||||
'&[data-active=true]': {
|
||||
pointerEvents: 'none',
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
const interactive = style({
|
||||
position: 'relative',
|
||||
cursor: 'pointer',
|
||||
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
'&::before': {
|
||||
content: '""',
|
||||
@@ -14,7 +13,7 @@ const interactive = style({
|
||||
inset: 0,
|
||||
opacity: 0,
|
||||
borderRadius: 'inherit',
|
||||
boxShadow: '0 0 0 3px var(--affine-primary-color)',
|
||||
boxShadow: `0 0 0 3px ${cssVar('primaryColor')}`,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&::after': {
|
||||
@@ -22,22 +21,20 @@ const interactive = style({
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
borderRadius: 'inherit',
|
||||
boxShadow: '0 0 0 0px var(--affine-primary-color)',
|
||||
boxShadow: `0 0 0 0px ${cssVar('primaryColor')}`,
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&:focus-visible::before': {
|
||||
opacity: 0.2,
|
||||
},
|
||||
'&:focus-visible::after': {
|
||||
boxShadow: '0 0 0 1px var(--affine-primary-color)',
|
||||
boxShadow: `0 0 0 1px ${cssVar('primaryColor')}`,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const calendar = style({
|
||||
padding: '16px',
|
||||
});
|
||||
|
||||
export const journalPanel = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
@@ -45,7 +42,6 @@ export const journalPanel = style({
|
||||
flexDirection: 'column',
|
||||
alignItems: 'stretch',
|
||||
});
|
||||
|
||||
export const dailyCount = style({
|
||||
height: 0,
|
||||
flexGrow: 1,
|
||||
@@ -53,7 +49,6 @@ export const dailyCount = style({
|
||||
flexDirection: 'column',
|
||||
gap: 8,
|
||||
});
|
||||
|
||||
export const dailyCountHeader = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -61,7 +56,6 @@ export const dailyCountHeader = style({
|
||||
padding: '0 16px',
|
||||
gap: 8,
|
||||
});
|
||||
|
||||
export const dailyCountNav = style([
|
||||
interactive,
|
||||
{
|
||||
@@ -76,18 +70,16 @@ export const dailyCountNav = style([
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
transition: 'all .3s',
|
||||
|
||||
selectors: {
|
||||
'&[aria-selected="true"]': {
|
||||
backgroundColor: 'var(--affine-background-tertiary-color)',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
backgroundColor: cssVar('backgroundTertiaryColor'),
|
||||
color: cssVar('textPrimaryColor'),
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const dailyCountContainer = style({
|
||||
height: 0,
|
||||
flexGrow: 1,
|
||||
@@ -115,10 +107,9 @@ export const dailyCountEmpty = style({
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
|
||||
lineHeight: '24px',
|
||||
fontSize: 15,
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
textAlign: 'center',
|
||||
padding: '0 70px',
|
||||
fontWeight: 400,
|
||||
@@ -135,10 +126,9 @@ export const pageItem = style([
|
||||
padding: '0 4px',
|
||||
gap: 8,
|
||||
height: 30,
|
||||
|
||||
selectors: {
|
||||
'&[aria-selected="true"]': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -146,7 +136,7 @@ export const pageItem = style([
|
||||
export const pageItemIcon = style({
|
||||
width: 20,
|
||||
height: 20,
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
});
|
||||
export const pageItemLabel = style({
|
||||
width: 0,
|
||||
@@ -155,13 +145,13 @@ export const pageItemLabel = style({
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
fontWeight: 500,
|
||||
fontSize: 'var(--affine-font-size-sm)',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
color: cssVar('textPrimaryColor'),
|
||||
textAlign: 'left',
|
||||
selectors: {
|
||||
'[aria-selected="true"] &': {
|
||||
// TODO: wait for design
|
||||
color: 'var(--affine-primary-color)',
|
||||
color: cssVar('primaryColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -179,11 +169,11 @@ export const journalConflictWrapper = style({
|
||||
export const journalConflictMoreTrigger = style([
|
||||
interactive,
|
||||
{
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
height: 30,
|
||||
borderRadius: 4,
|
||||
padding: '0px 8px',
|
||||
fontSize: 'var(--affine-font-size-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
@@ -195,8 +185,8 @@ globalStyle(
|
||||
`.${journalPanel}[data-is-journal="false"] .react-datepicker__day[aria-selected="true"]`,
|
||||
{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
fontWeight: 500,
|
||||
border: '1px solid var(--affine-primary-color)',
|
||||
border: `1px solid ${cssVar('primaryColor')}`,
|
||||
}
|
||||
);
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
|
||||
@@ -1,24 +1,22 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const pageListEmptyStyle = style({
|
||||
height: 'calc(100% - 52px)',
|
||||
});
|
||||
|
||||
export const emptyDescButton = style({
|
||||
cursor: 'pointer',
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
background: 'var(--affine-background-code-block)',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
background: cssVar('backgroundCodeBlock'),
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
borderRadius: '4px',
|
||||
padding: '0 6px',
|
||||
boxSizing: 'border-box',
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const emptyDescKbd = style([
|
||||
emptyDescButton,
|
||||
{
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export { root } from './all-page/all-page.css';
|
||||
|
||||
export const trashTitle = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -9,8 +8,7 @@ export const trashTitle = style({
|
||||
padding: '0 8px',
|
||||
fontWeight: 600,
|
||||
});
|
||||
|
||||
export const trashIcon = style({
|
||||
color: 'var(--affine-icon-color)',
|
||||
fontSize: 'var(--affine-font-h-5)',
|
||||
color: cssVar('iconColor'),
|
||||
fontSize: cssVar('fontH5'),
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user