diff --git a/pages/styles.css b/pages/styles.css index b23938a..e3070d1 100644 --- a/pages/styles.css +++ b/pages/styles.css @@ -478,3 +478,97 @@ body.fullscreen #tabContentAi .llm-result-container { max-height: 80vh; } +/* 全屏模式下让整体内容区域左右/上下都留白,且居中美观 */ +body.fullscreen { + background: #f8fbff; +} + +body.fullscreen .draggable-panel { + position: fixed !important; + left: 50% !important; + top: 50% !important; + transform: translate(-50%, -50%) !important; + width: 96vw !important; + max-width: 1200px !important; + height: 94vh !important; + max-height: 98vh !important; + min-width: 420px !important; + min-height: 340px !important; + box-shadow: 0 10px 40px #3070ed22; + border-radius: 24px; + background: #fff; + /* 下面这两行:确保内部内容不贴边 */ + padding: 30px 44px 24px 44px; + display: flex; + flex-direction: column; +} + +/* 让内容整体再居中一层 */ +body.fullscreen .container { + flex: 1 1 0; + display: flex; + flex-direction: column; + min-height: 0; + height: 0; + /* 新增内边距,内容远离外壳边界 */ + padding-left: 24px; + padding-right: 24px; +} + +/* 搜索栏、Tab按钮等内容更有呼吸感 */ +.search-bar { + margin-bottom: 18px; +} +.tab-bar { + margin-bottom: 12px; +} +.tab-btn { + border-radius: 12px 12px 0 0; + margin: 0 3px; +} + +#tabContentAi .llm-result-container, +#tabContentEs { + margin-top: 8px; + margin-bottom: 8px; +} + +/* 让按钮等不贴右上角 */ +.open-tab-btn { + margin-left: 16px !important; +} +.user-menu { + top: 18px !important; + right: 22px !important; +} + +/* 保证消息内容整体有圆角和阴影 */ +.llm-result-container, +#results { + border-radius: 10px; + box-shadow: 0 2px 8px #cdd2fa2c; + border: 1px solid #e2e9f4; + background: #f8fbff; + padding: 16px 20px; +} + +/* 防止消息内容贴左边 */ +.llm-result-content { + padding-left: 4px; + padding-right: 4px; +} + +body.fullscreen .container { + height: 100%; + min-height: 0; + flex: 1 1 0; + display: flex; + flex-direction: column; +} +body.fullscreen #tabContentAi.tab-content.active { + flex: 1 1 0; + min-height: 0; + display: flex !important; + flex-direction: column; + height: 100%; +}