mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 04:18:54 +00:00
refactor(infra): directory structure (#4615)
This commit is contained in:
Joooye_34
154
packages/frontend/component/src/theme/fonts.css
Normal file
154
packages/frontend/component/src/theme/fonts.css
Normal file
@@ -0,0 +1,154 @@
|
||||
/*
|
||||
* Inter (Variable)
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/Inter-VariableFont_slnt,wght.ttf);
|
||||
}
|
||||
|
||||
/*
|
||||
* Source Code Pro (Variable)
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Source Code Pro';
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url(../fonts/source-code-pro/SourceCodePro-VariableFont_wght.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Code Pro';
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
src: url(../fonts/source-code-pro/SourceCodePro-Italic-VariableFont_wght.ttf);
|
||||
}
|
||||
|
||||
/*
|
||||
* Kalam
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Kalam';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/kalam/Kalam-Regular.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Kalam';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url(../fonts/kalam/Kalam-Light.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Kalam';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(../fonts/kalam/Kalam-Bold.ttf);
|
||||
}
|
||||
|
||||
/*
|
||||
* Source Serif 4
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Source Serif 4';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/source-serif-4/SourceSerif4-Regular.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Serif 4';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/source-serif-4/SourceSerif4-Italic.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Serif 4';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(../fonts/source-serif-4/SourceSerif4-Medium.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Serif 4';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(../fonts/source-serif-4/SourceSerif4-MediumItalic.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Serif 4';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(../fonts/source-serif-4/SourceSerif4-SemiBold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Serif 4';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url(../fonts/source-serif-4/SourceSerif4-SemiBoldItalic.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Serif 4';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(../fonts/source-serif-4/SourceSerif4-Bold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Serif 4';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(../fonts/source-serif-4/SourceSerif4-BoldItalic.ttf);
|
||||
}
|
||||
|
||||
/*
|
||||
* Space Mono
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Space Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/space-mono/SpaceMono-Regular.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Space Mono';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(../fonts/space-mono/SpaceMono-Italic.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Space Mono';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(../fonts/space-mono/SpaceMono-Bold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Space Mono';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url(../fonts/space-mono/SpaceMono-BoldItalic.ttf);
|
||||
}
|
||||
306
packages/frontend/component/src/theme/global.css
Normal file
306
packages/frontend/component/src/theme/global.css
Normal file
@@ -0,0 +1,306 @@
|
||||
@import 'react-datepicker/dist/react-datepicker.css';
|
||||
@import './fonts.css';
|
||||
|
||||
* {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
box-sizing: border-box;
|
||||
/*transition: all 0.1s;*/
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
hr,
|
||||
figure,
|
||||
table,
|
||||
caption,
|
||||
th,
|
||||
td,
|
||||
form,
|
||||
fieldset,
|
||||
legend,
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header,
|
||||
footer,
|
||||
section,
|
||||
article,
|
||||
aside,
|
||||
nav,
|
||||
hgroup,
|
||||
address,
|
||||
figure,
|
||||
figcaption,
|
||||
menu,
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
caption,
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
fieldset,
|
||||
img,
|
||||
iframe,
|
||||
abbr {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
i,
|
||||
cite,
|
||||
em,
|
||||
var,
|
||||
address,
|
||||
dfn {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[hidefocus],
|
||||
summary {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
small {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
sup,
|
||||
sub {
|
||||
font-size: 83%;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
label,
|
||||
summary {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
strong,
|
||||
b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
del,
|
||||
ins,
|
||||
u,
|
||||
s,
|
||||
a,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body,
|
||||
textarea,
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
keygen,
|
||||
legend {
|
||||
background-color: unset;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
font-size: var(--affine-font-base);
|
||||
font-family: var(--affine-font-family);
|
||||
}
|
||||
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
/*Solve the rounded corners of buttons on ios*/
|
||||
border-radius: 0;
|
||||
/*Solve the problem of rounded corners of the input box on ios*/
|
||||
outline: medium;
|
||||
/*Remove the default yellow border on mouse click*/
|
||||
background-color: transparent;
|
||||
caret-color: var(--affine-primary-color);
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px white inset;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type='number']::-webkit-inner-spin-button,
|
||||
input[type='number']::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
-ms-overflow-style: none;
|
||||
/* IE 10+ */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
/* Chrome Safari */
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.affine-doc-viewport::-webkit-scrollbar {
|
||||
width: 20px;
|
||||
/* Chrome Safari */
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.affine-doc-viewport::-webkit-scrollbar-thumb {
|
||||
border-radius: 12px;
|
||||
background-clip: padding-box;
|
||||
border-style: solid;
|
||||
border-width: 7px;
|
||||
border-color: transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.affine-doc-viewport:hover::-webkit-scrollbar-thumb {
|
||||
background-color: var(--affine-divider-color);
|
||||
}
|
||||
|
||||
.affine-doc-viewport:hover::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--affine-icon-color);
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.editor-wrapper {
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* issue: https://github.com/toeverything/AFFiNE/issues/2004 */
|
||||
.editor-wrapper.edgeless-mode {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.affine-default-page-block-title-container {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
transition: margin-top 0.2s;
|
||||
}
|
||||
|
||||
.affine-default-page-block-container {
|
||||
transition: max-width 0.2s;
|
||||
min-width: 550px;
|
||||
}
|
||||
|
||||
affine-block-hub {
|
||||
position: unset !important;
|
||||
}
|
||||
|
||||
.block-hub-menu-container {
|
||||
position: unset !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.affine-default-page-block-title-container {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.editor-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* issue: https://github.com/toeverything/AFFiNE/issues/2004 */
|
||||
.editor-wrapper.edgeless-mode {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
[role='button'] {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
#webpack-dev-server-client-overlay {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
22
packages/frontend/component/src/theme/theme.css.ts
Normal file
22
packages/frontend/component/src/theme/theme.css.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { darkCssVariables, lightCssVariables } from '@toeverything/theme';
|
||||
import { globalStyle } from '@vanilla-extract/css';
|
||||
|
||||
globalStyle('body', {
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
fontFamily: 'var(--affine-font-family)',
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
});
|
||||
|
||||
globalStyle('html', {
|
||||
vars: lightCssVariables,
|
||||
});
|
||||
|
||||
globalStyle('html[data-theme="dark"]', {
|
||||
vars: darkCssVariables,
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
globalStyle('.undefined', {
|
||||
border: '5px solid red !important',
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user