对移动端的UI进行了重构
This commit is contained in:
+85
-30
@@ -1,4 +1,4 @@
|
||||
@import 'highlight.js/styles/atom-one-dark.css';
|
||||
@import 'highlight.js/styles/atom-one-dark.css';
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -26,6 +26,7 @@
|
||||
--input: 35 15% 85%;
|
||||
--ring: 223 21% 30%;
|
||||
--radius: 0.75rem;
|
||||
--code-bg: 220 16% 21%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -57,6 +58,7 @@
|
||||
--border: 220 8% 28%;
|
||||
--input: 220 8% 28%;
|
||||
--ring: 210 16% 78%;
|
||||
--code-bg: 220 16% 20%;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -76,7 +78,8 @@
|
||||
|
||||
@layer components {
|
||||
.ui-card {
|
||||
@apply rounded-2xl border border-border/70 bg-card/95 shadow-sm backdrop-blur-sm;
|
||||
@apply rounded-xl border border-border/65 bg-card shadow-sm backdrop-blur-sm;
|
||||
background-color: hsl(var(--card) / 0.92);
|
||||
}
|
||||
|
||||
.ui-input {
|
||||
@@ -88,23 +91,23 @@
|
||||
}
|
||||
|
||||
.ui-btn {
|
||||
@apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-all active:scale-[0.98];
|
||||
@apply inline-flex items-center justify-center gap-2 rounded-xl border border-transparent px-4 py-2 text-sm font-semibold transition-all active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-55 disabled:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/25;
|
||||
}
|
||||
|
||||
.ui-btn-primary {
|
||||
@apply ui-btn bg-primary text-primary-foreground hover:opacity-90 shadow-sm;
|
||||
@apply ui-btn border-primary/20 bg-primary text-primary-foreground shadow-sm hover:opacity-90;
|
||||
}
|
||||
|
||||
.ui-btn-secondary {
|
||||
@apply ui-btn bg-secondary text-secondary-foreground hover:bg-secondary/80;
|
||||
@apply ui-btn border-border/70 bg-secondary/85 text-secondary-foreground hover:bg-secondary;
|
||||
}
|
||||
|
||||
.ui-btn-danger {
|
||||
@apply ui-btn bg-destructive text-destructive-foreground hover:opacity-90;
|
||||
@apply ui-btn border-destructive/25 bg-destructive text-destructive-foreground hover:opacity-90;
|
||||
}
|
||||
|
||||
.ui-icon-btn {
|
||||
@apply inline-flex h-9 w-9 items-center justify-center rounded-lg border border-transparent text-muted-foreground transition-colors hover:border-border hover:bg-muted/60 hover:text-foreground;
|
||||
@apply inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border/40 bg-background/30 text-muted-foreground transition-colors active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-55 disabled:active:scale-100 hover:border-border hover:bg-muted/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/25;
|
||||
}
|
||||
|
||||
.ui-kbd {
|
||||
@@ -159,11 +162,72 @@
|
||||
.ProseMirror {
|
||||
outline: none;
|
||||
min-height: 300px;
|
||||
padding-bottom: 50px;
|
||||
padding-bottom: 56px;
|
||||
font-size: 1.05rem;
|
||||
line-height: var(--editor-line-height, 1.5);
|
||||
/* Use CSS variable with fallback */
|
||||
/* Reduced from 1.75 */
|
||||
letter-spacing: 0.003em;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ProseMirror {
|
||||
font-size: 1rem;
|
||||
line-height: max(1.55, var(--editor-line-height, 1.5));
|
||||
}
|
||||
}
|
||||
|
||||
.ProseMirror > * + * {
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
.ProseMirror h1,
|
||||
.ProseMirror h2,
|
||||
.ProseMirror h3 {
|
||||
color: hsl(var(--foreground));
|
||||
font-weight: 750;
|
||||
line-height: 1.28;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.ProseMirror h1 {
|
||||
margin-top: 1.2em;
|
||||
font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.15rem);
|
||||
}
|
||||
|
||||
.ProseMirror h2 {
|
||||
margin-top: 1.05em;
|
||||
font-size: clamp(1.35rem, 1.18rem + 0.8vw, 1.7rem);
|
||||
}
|
||||
|
||||
.ProseMirror h3 {
|
||||
margin-top: 0.9em;
|
||||
font-size: clamp(1.12rem, 1.02rem + 0.45vw, 1.3rem);
|
||||
}
|
||||
|
||||
.ProseMirror p {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.ProseMirror ul,
|
||||
.ProseMirror ol {
|
||||
margin: 0.5em 0;
|
||||
padding-left: 1.2em;
|
||||
}
|
||||
|
||||
.ProseMirror li {
|
||||
margin: 0.22em 0;
|
||||
}
|
||||
|
||||
.ProseMirror a {
|
||||
color: hsl(var(--primary));
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.ProseMirror hr {
|
||||
margin: 1.1em 0;
|
||||
border: 0;
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.ProseMirror p.is-editor-empty:first-child::before {
|
||||
@@ -176,20 +240,15 @@
|
||||
|
||||
.ProseMirror blockquote {
|
||||
border-left: 3px solid hsl(var(--primary));
|
||||
/* Make border color slightly more visible (primary) */
|
||||
padding-left: 1rem;
|
||||
padding-left: 0.95rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
font-family: "Georgia", "Cambria", "Times New Roman", serif !important;
|
||||
/* Force serif font */
|
||||
font-style: italic;
|
||||
margin: 1rem 0;
|
||||
margin: 0.95rem 0;
|
||||
background: hsl(var(--muted) / 0.3);
|
||||
/* Subtle background */
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.45rem;
|
||||
padding-bottom: 0.45rem;
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
/* Rounded right corners */
|
||||
/* Rounded right corners */
|
||||
}
|
||||
|
||||
.ProseMirror code {
|
||||
@@ -217,19 +276,16 @@
|
||||
/* Table Styles - Ensure content is compact */
|
||||
.ProseMirror table p {
|
||||
margin: 0;
|
||||
/* Remove paragraph margin inside tables */
|
||||
line-height: var(--table-line-height, 1.2);
|
||||
/* Use CSS variable with fallback */
|
||||
/* Tighter line height for table content */
|
||||
}
|
||||
|
||||
.ProseMirror table {
|
||||
border-collapse: collapse;
|
||||
margin: 1em 0;
|
||||
/* Add some vertical space around the table itself */
|
||||
overflow: hidden;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.ProseMirror td,
|
||||
@@ -240,7 +296,6 @@
|
||||
box-sizing: border-box;
|
||||
min-width: 1em;
|
||||
padding: 2px 4px;
|
||||
/* Further reduced padding */
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
@@ -249,13 +304,12 @@
|
||||
background-color: hsl(var(--muted));
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
/* Make header borders visible by using a contrasting color if bg matches border */
|
||||
border-color: hsl(var(--foreground) / 0.1);
|
||||
}
|
||||
|
||||
/* AI Content Style */
|
||||
.ai-content {
|
||||
font-family: "KaiTi", "STKaiti", "楷体", "Georgia", serif;
|
||||
font-family: "KaiTi", "STKaiti", "Kaiti SC", "Noto Serif SC", "Georgia", serif;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
color: hsl(var(--foreground));
|
||||
@@ -265,7 +319,6 @@
|
||||
/* Specific fix for dark mode if needed, but opacity trick usually works */
|
||||
.dark .ProseMirror th {
|
||||
border-color: hsl(var(--background));
|
||||
/* Use background color for borders in dark mode header to show separation */
|
||||
}
|
||||
|
||||
/* Task List Styles */
|
||||
@@ -279,7 +332,6 @@ ul[data-type="taskList"],
|
||||
.ProseMirror li[data-type="taskItem"] div,
|
||||
.ProseMirror li[data-type="taskItem"] label {
|
||||
line-height: normal !important;
|
||||
/* Force tight line height for checkbox items */
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
@@ -289,12 +341,15 @@ ul[data-type="taskList"],
|
||||
|
||||
/* Override Highlight.js background for a softer look */
|
||||
.ProseMirror pre {
|
||||
background: #2b313a !important;
|
||||
/* Slightly lifted code block background for comfortable reading */
|
||||
background: hsl(var(--code-bg)) !important;
|
||||
border: 1px solid hsl(var(--border) / 0.5);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.65rem 0.75rem;
|
||||
margin: 0.95rem 0;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
background: transparent !important;
|
||||
/* Let pre handle the background */
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user