fix(docs): fix layout - AI panel on right, remove black strips, clean toolbar
- Remove editor-header/footer from default view (caused blue bar) - Force light background (#f8f9fa) on all parent containers - Fix chat-panel to be true flex child with order:2 for right side - Simplify CSS with hardcoded colors instead of variables for reliability - Set chat panel width to 280px with proper flex properties - Hide header/footer by default, show only when content exists - Clean up responsive breakpoints
This commit is contained in:
parent
7b2cf282ae
commit
cc40ddb65f
2 changed files with 120 additions and 172 deletions
|
|
@ -1,6 +1,6 @@
|
|||
/* =============================================================================
|
||||
GB DOCS - Modern Document Editor Styles
|
||||
Theme-aware, A4 centered page, with AI chat panel
|
||||
Google Docs-like interface with AI chat panel
|
||||
============================================================================= */
|
||||
|
||||
/* =============================================================================
|
||||
|
|
@ -8,23 +8,8 @@
|
|||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* Page dimensions for A4-style document */
|
||||
--docs-page-width: 816px;
|
||||
--docs-page-min-height: 1056px;
|
||||
--docs-page-padding: 96px 72px;
|
||||
--docs-page-shadow: var(--sentient-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1));
|
||||
|
||||
/* Docs-specific colors - use sentient bridge variables with fallbacks */
|
||||
/* Document editors typically need light backgrounds for readability */
|
||||
--docs-bg: var(--sentient-bg-tertiary, #f5f5f5);
|
||||
--docs-surface: var(--sentient-surface-elevated, #ffffff);
|
||||
--docs-surface-hover: var(--sentient-surface-hover, #f0f0f0);
|
||||
--docs-text: var(--sentient-text-primary, #212121);
|
||||
--docs-text-secondary: var(--sentient-text-secondary, #666666);
|
||||
--docs-text-muted: var(--sentient-text-tertiary, #999999);
|
||||
--docs-border: var(--sentient-border, #e0e0e0);
|
||||
--docs-accent: var(--sentient-accent, #4285f4);
|
||||
--docs-accent-hover: var(--sentient-accent-hover, #3367d6);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -32,7 +17,7 @@
|
|||
}
|
||||
|
||||
/* =============================================================================
|
||||
MAIN LAYOUT
|
||||
MAIN LAYOUT - Full height, light background
|
||||
============================================================================= */
|
||||
|
||||
.docs-app {
|
||||
|
|
@ -40,76 +25,61 @@
|
|||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
background: var(--docs-bg, #f5f5f5);
|
||||
color: var(--docs-text);
|
||||
font-family: var(--sentient-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
|
||||
background: #f8f9fa !important;
|
||||
color: #202124;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Prevent parent scroll when docs app is active */
|
||||
/* Force light background everywhere */
|
||||
html:has(.docs-app),
|
||||
body:has(.docs-app) {
|
||||
overflow: hidden !important;
|
||||
background: var(--docs-bg, #f5f5f5) !important;
|
||||
}
|
||||
|
||||
body:has(.docs-app),
|
||||
#main-content:has(.docs-app),
|
||||
.app-main:has(.docs-app),
|
||||
[data-app="docs"],
|
||||
.suite-content-panel:has(.docs-app) {
|
||||
.suite-content-panel:has(.docs-app),
|
||||
[data-app="docs"] {
|
||||
overflow: hidden !important;
|
||||
background: var(--docs-bg, #f5f5f5) !important;
|
||||
background-color: var(--docs-bg, #f5f5f5) !important;
|
||||
background: #f8f9fa !important;
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
#main-content:has(.docs-app) {
|
||||
height: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Override any dark theme backgrounds when docs is active */
|
||||
body:has(.docs-app) #main-content,
|
||||
body:has(.docs-app) .app-main,
|
||||
body:has(.docs-app) .suite-content-panel {
|
||||
background: var(--docs-bg, #f5f5f5) !important;
|
||||
background-color: var(--docs-bg, #f5f5f5) !important;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
TOOLBAR
|
||||
TOOLBAR - Document name left, tools center, share right
|
||||
============================================================================= */
|
||||
|
||||
.docs-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
background: var(--docs-surface);
|
||||
border-bottom: 1px solid var(--docs-border);
|
||||
gap: 16px;
|
||||
padding: 0 12px;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #dadce0;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
flex-shrink: 0;
|
||||
min-height: 52px;
|
||||
}
|
||||
|
||||
.toolbar-left,
|
||||
.toolbar-center,
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
flex: 0 0 auto;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toolbar-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
overflow-x: auto;
|
||||
padding: 4px 0;
|
||||
padding: 4px 8px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.toolbar-center::-webkit-scrollbar {
|
||||
|
|
@ -117,39 +87,41 @@ body:has(.docs-app) .suite-content-panel {
|
|||
}
|
||||
|
||||
.toolbar-center::-webkit-scrollbar-thumb {
|
||||
background: var(--docs-border);
|
||||
background: #dadce0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
flex: 0 0 auto;
|
||||
gap: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.toolbar-divider {
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: var(--docs-border);
|
||||
margin: 0 8px;
|
||||
height: 20px;
|
||||
background: #dadce0;
|
||||
margin: 0 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.doc-name-input {
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--docs-text);
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--sentient-radius-sm, 4px);
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #202124;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
width: 200px;
|
||||
max-width: 200px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
|
@ -343,7 +315,7 @@ body:has(.docs-app) .suite-content-panel {
|
|||
}
|
||||
|
||||
/* =============================================================================
|
||||
MAIN CONTENT AREA
|
||||
MAIN CONTENT AREA - Canvas left, Chat panel right (SIDE BY SIDE)
|
||||
============================================================================= */
|
||||
|
||||
.docs-main {
|
||||
|
|
@ -351,10 +323,8 @@ body:has(.docs-app) .suite-content-panel {
|
|||
flex-direction: row;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
background: #f8f9fa !important;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
background: var(--docs-bg, #f5f5f5);
|
||||
background-color: var(--docs-bg, #f5f5f5) !important;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -366,38 +336,35 @@ body:has(.docs-app) .suite-content-panel {
|
|||
.docs-canvas {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 32px;
|
||||
overflow-x: auto;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
background: var(--docs-bg, #f5f5f5);
|
||||
background-color: var(--docs-bg, #f5f5f5) !important;
|
||||
background: #f8f9fa !important;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.editor-page {
|
||||
width: var(--docs-page-width);
|
||||
min-height: var(--docs-page-min-height);
|
||||
background: var(--docs-surface, #ffffff);
|
||||
background-color: var(--docs-surface, #ffffff) !important;
|
||||
box-shadow: var(--docs-page-shadow);
|
||||
border-radius: 2px;
|
||||
padding: var(--docs-page-padding);
|
||||
margin-bottom: 32px;
|
||||
width: 816px;
|
||||
min-width: 816px;
|
||||
min-height: 1056px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
border-radius: 0;
|
||||
padding: 72px 72px;
|
||||
margin-bottom: 24px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.editor-content {
|
||||
min-height: 100%;
|
||||
min-height: 800px;
|
||||
outline: none;
|
||||
font-family: "Times New Roman", Georgia, serif;
|
||||
font-size: 12pt;
|
||||
line-height: 1.5;
|
||||
color: var(--docs-text, #212121);
|
||||
font-family: "Arial", sans-serif;
|
||||
font-size: 11pt;
|
||||
line-height: 1.15;
|
||||
color: #202124;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -525,12 +492,12 @@ body:has(.docs-app) .suite-content-panel {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 16px;
|
||||
background: var(--docs-surface);
|
||||
border-top: 1px solid var(--docs-border);
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #dadce0;
|
||||
font-size: 12px;
|
||||
color: var(--docs-text-secondary);
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
color: #5f6368;
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -571,35 +538,31 @@ body:has(.docs-app) .suite-content-panel {
|
|||
}
|
||||
|
||||
/* =============================================================================
|
||||
CHAT PANEL
|
||||
CHAT PANEL - RIGHT SIDE (MUST BE FLEX CHILD OF docs-main)
|
||||
============================================================================= */
|
||||
|
||||
.chat-panel {
|
||||
width: 320px;
|
||||
min-width: 320px;
|
||||
max-width: 320px;
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
max-width: 280px;
|
||||
flex: 0 0 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--docs-surface, #ffffff);
|
||||
border-left: 1px solid var(--docs-border, #e0e0e0);
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
min-height: 0;
|
||||
background: #ffffff;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
height: 100%;
|
||||
transition:
|
||||
width 0.3s ease,
|
||||
min-width 0.3s ease,
|
||||
opacity 0.3s ease;
|
||||
overflow: hidden;
|
||||
order: 2; /* Ensure it's on the right */
|
||||
}
|
||||
|
||||
.chat-panel.collapsed {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
flex: 0 0 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border-left: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
|
|
@ -607,7 +570,8 @@ body:has(.docs-app) .suite-content-panel {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--docs-border);
|
||||
border-bottom: 1px solid #dadce0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-title {
|
||||
|
|
@ -617,14 +581,10 @@ body:has(.docs-app) .suite-content-panel {
|
|||
}
|
||||
|
||||
.chat-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--docs-accent),
|
||||
#8e44ad
|
||||
);
|
||||
background: linear-gradient(135deg, #1a73e8, #8e44ad);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -635,31 +595,30 @@ body:has(.docs-app) .suite-content-panel {
|
|||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--docs-text);
|
||||
color: #202124;
|
||||
}
|
||||
|
||||
.chat-status {
|
||||
font-size: 12px;
|
||||
color: var(--docs-text-muted);
|
||||
color: #5f6368;
|
||||
}
|
||||
|
||||
.chat-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--docs-text-muted);
|
||||
border-radius: var(--sentient-radius-sm, 4px);
|
||||
color: #5f6368;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.chat-close:hover {
|
||||
background: var(--docs-bg);
|
||||
color: var(--docs-text);
|
||||
background: #f1f3f4;
|
||||
color: #202124;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
|
|
@ -1063,26 +1022,19 @@ body:has(.docs-app) .suite-content-panel {
|
|||
@media (max-width: 1024px) {
|
||||
.chat-panel {
|
||||
position: fixed;
|
||||
top: var(--header-height, 40px);
|
||||
top: 100px;
|
||||
right: 0;
|
||||
bottom: 28px;
|
||||
width: 320px;
|
||||
min-width: 320px;
|
||||
max-width: 320px;
|
||||
bottom: 24px;
|
||||
width: 300px;
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
z-index: 100;
|
||||
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.chat-panel.collapsed {
|
||||
transform: translateX(100%);
|
||||
width: 320px;
|
||||
min-width: 320px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.docs-main {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1092,7 +1044,7 @@ body:has(.docs-app) .suite-content-panel {
|
|||
}
|
||||
|
||||
.doc-name-input {
|
||||
max-width: 150px;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.btn-primary span {
|
||||
|
|
@ -1111,11 +1063,13 @@ body:has(.docs-app) .suite-content-panel {
|
|||
}
|
||||
|
||||
.docs-canvas {
|
||||
padding: 16px 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.editor-page {
|
||||
padding: 48px 36px;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
padding: 24px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
|
|
@ -1411,24 +1365,30 @@ body:has(.docs-app) .suite-content-panel {
|
|||
|
||||
|
||||
/* =============================================================================
|
||||
HEADER & FOOTER
|
||||
HEADER & FOOTER - Hidden by default, no blue bar
|
||||
============================================================================= */
|
||||
|
||||
.editor-header,
|
||||
.editor-footer {
|
||||
min-height: 48px;
|
||||
padding: 12px 24px;
|
||||
font-size: 11px;
|
||||
color: var(--docs-text-secondary, #666666);
|
||||
border: 1px dashed transparent;
|
||||
transition: border-color 0.15s ease, background 0.15s ease;
|
||||
background: transparent;
|
||||
display: none; /* Hidden by default - show only when content added */
|
||||
min-height: 32px;
|
||||
padding: 8px 0;
|
||||
font-size: 10px;
|
||||
color: #9aa0a6;
|
||||
border: none;
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.editor-header:not(:empty),
|
||||
.editor-footer:not(:empty) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
border-bottom: 1px dashed var(--docs-border, #e0e0e0);
|
||||
margin-bottom: 24px;
|
||||
background: transparent;
|
||||
border-bottom: 1px dashed #e0e0e0;
|
||||
margin-bottom: 16px;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.editor-footer {
|
||||
|
|
|
|||
|
|
@ -489,12 +489,6 @@
|
|||
<div class="docs-main">
|
||||
<div class="docs-canvas">
|
||||
<div class="editor-page" id="editorPage">
|
||||
<div
|
||||
class="editor-header"
|
||||
id="editorHeader"
|
||||
contenteditable="true"
|
||||
data-placeholder="Click to add header"
|
||||
></div>
|
||||
<div
|
||||
class="editor-content"
|
||||
id="editorContent"
|
||||
|
|
@ -502,12 +496,6 @@
|
|||
spellcheck="true"
|
||||
data-placeholder="Start typing..."
|
||||
></div>
|
||||
<div
|
||||
class="editor-footer"
|
||||
id="editorFooter"
|
||||
contenteditable="true"
|
||||
data-placeholder="Click to add footer"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue