mirror of
https://github.com/docmost/docmost.git
synced 2026-05-07 06:23:06 +08:00
fix history editor css
This commit is contained in:
@@ -1,8 +1,9 @@
|
|||||||
import '@/features/editor/styles/index.css';
|
import "@/features/editor/styles/index.css";
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from "react";
|
||||||
import { EditorContent, useEditor } from '@tiptap/react';
|
import { EditorContent, useEditor } from "@tiptap/react";
|
||||||
import { mainExtensions } from '@/features/editor/extensions/extensions';
|
import { mainExtensions } from "@/features/editor/extensions/extensions";
|
||||||
import { Title } from '@mantine/core';
|
import { Title } from "@mantine/core";
|
||||||
|
import classes from "./history.module.css";
|
||||||
|
|
||||||
export interface HistoryEditorProps {
|
export interface HistoryEditorProps {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -26,7 +27,9 @@ export function HistoryEditor({ title, content }: HistoryEditorProps) {
|
|||||||
<div>
|
<div>
|
||||||
<Title order={1}>{title}</Title>
|
<Title order={1}>{title}</Title>
|
||||||
|
|
||||||
{editor && <EditorContent editor={editor} />}
|
{editor && (
|
||||||
|
<EditorContent editor={editor} className={classes.historyEditor} />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,37 +1,49 @@
|
|||||||
.history {
|
.history {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: var(--mantine-spacing-md);
|
padding: var(--mantine-spacing-md);
|
||||||
color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
|
color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
|
||||||
|
|
||||||
@mixin hover {
|
@mixin hover {
|
||||||
background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-8));
|
background-color: light-dark(
|
||||||
}
|
var(--mantine-color-gray-2),
|
||||||
|
var(--mantine-color-dark-8)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.historyEditor {
|
||||||
|
:global(.ProseMirror) {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-8));
|
background-color: light-dark(
|
||||||
|
var(--mantine-color-gray-2),
|
||||||
|
var(--mantine-color-dark-8)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
max-height: rem(700px);
|
max-height: rem(700px);
|
||||||
width: rem(250px);
|
width: rem(250px);
|
||||||
padding: var(--mantine-spacing-sm);
|
padding: var(--mantine-spacing-sm);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-right: rem(1px) solid
|
border-right: rem(1px) solid
|
||||||
light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebarFlex {
|
.sidebarFlex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebarMain {
|
.sidebarMain {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebarRightSection {
|
.sidebarRightSection {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: rem(16px) rem(40px);
|
padding: rem(16px) rem(40px);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user