style: add css themes vars

This commit is contained in:
liujuping 2023-12-05 14:42:28 +08:00 committed by 林熠
parent 77aea1bfba
commit 398f069745
5 changed files with 28 additions and 14 deletions

View File

@ -50,7 +50,6 @@ sidebar_position: 9
- `--color-text-dark`: 文字颜色(dark) - `--color-text-dark`: 文字颜色(dark)
- `--color-text-light`: 文字颜色(light) - `--color-text-light`: 文字颜色(light)
- `--color-text-reverse`: 反色情况下,文字颜色 - `--color-text-reverse`: 反色情况下,文字颜色
- `--color-text-regular`: 文字颜色(regular)
- `--color-text-disabled`: 禁用态文字颜色 - `--color-text-disabled`: 禁用态文字颜色
#### 字段和边框颜色 #### 字段和边框颜色
@ -109,10 +108,20 @@ sidebar_position: 9
#### 其他变量 #### 其他变量
- `--workspace-sub-top-area-height`: 应用级二级 topArea 高度 - `--workspace-sub-top-area-height`: 应用级二级 topArea 高度
- `--top-area-height`: 顶部区域的高度
- `--workspace-sub-top-area-margin`: 应用级二级 topArea margin - `--workspace-sub-top-area-margin`: 应用级二级 topArea margin
- `--workspace-sub-top-area-padding`: 应用级二级 topArea padding - `--workspace-sub-top-area-padding`: 应用级二级 topArea padding
- `--workspace-left-area-width`: 应用级 leftArea width - `--workspace-left-area-width`: 应用级 leftArea width
- `--left-area-width`: leftArea width - `--left-area-width`: leftArea width
- `--simulator-top-distance`: simulator 距离容器顶部的距离
- `--simulator-bottom-distance`: simulator 距离容器底部的距离
- `--simulator-left-distance`: simulator 距离容器左边的距离
- `--simulator-right-distance`: simulator 距离容器右边的距离
- `--toolbar-padding`: toolbar 的 padding
- `--toolbar-height`: toolbar 的高度
- `--pane-title-height`: 面板标题高度
- `--pane-title-font-size`: 面板标题字体大小
- `--pane-title-padding`: 面板标题边距

View File

@ -73,10 +73,10 @@
} }
&-device-default { &-device-default {
top: 16px; top: var(--simulator-top-distance, 16px);
right: 16px; right: var(--simulator-right-distance, 16px);
bottom: 16px; bottom: var(--simulator-bottom-distance, 16px);
left: 16px; left: var(--simulator-left-distance, 16px);
width: auto; width: auto;
box-shadow: 0 1px 4px 0 var(--color-block-background-shallow, rgba(31, 50, 88, 0.125)); box-shadow: 0 1px 4px 0 var(--color-block-background-shallow, rgba(31, 50, 88, 0.125));
} }

View File

@ -27,7 +27,6 @@
--color-text-dark: darken(@dark-alpha-3, 10%); --color-text-dark: darken(@dark-alpha-3, 10%);
--color-text-light: lighten(@dark-alpha-3, 10%); --color-text-light: lighten(@dark-alpha-3, 10%);
--color-text-reverse: @white-alpha-2; --color-text-reverse: @white-alpha-2;
--color-text-regular: @normal-alpha-2;
--color-text-disabled: @gray-light; --color-text-disabled: @gray-light;
--color-field-label: @dark-alpha-4; --color-field-label: @dark-alpha-4;
@ -87,4 +86,5 @@
--color-function-error-light: lighten(@brand-danger, 10%); --color-function-error-light: lighten(@brand-danger, 10%);
--color-function-purple: rgb(144, 94, 190); --color-function-purple: rgb(144, 94, 190);
--color-function-brown: #7b605b; --color-function-brown: #7b605b;
--color-text-regular: @normal-alpha-2;
} }

View File

@ -66,16 +66,16 @@ body {
} }
} }
> .lc-panel-title { > .lc-panel-title {
height: 48px; height: var(--pane-title-height, 48px);
font-size: 16px; font-size: var(--pane-title-font-size, 16px);
padding: 0 15px; padding: var(--pane-title-padding, 0 15px);
color: var(--color-title, #0f1726); color: var(--color-title, #0f1726);
font-weight: bold; font-weight: bold;
} }
.lc-panel-body { .lc-panel-body {
position: absolute; position: absolute;
top: 48px; top: var(--pane-title-height, 48px);
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
@ -234,7 +234,7 @@ body {
.lc-pane-icon-close { .lc-pane-icon-close {
position: absolute; position: absolute;
right: 16px; right: 16px;
top: 14px; top: calc(var(--pane-title-height, 48px) / 2 - 10px);
height: auto; height: auto;
z-index: 2; z-index: 2;
.next-icon { .next-icon {
@ -247,7 +247,7 @@ body {
.lc-pane-icon-float { .lc-pane-icon-float {
position: absolute; position: absolute;
right: 38px; right: 38px;
top: 14px; top: calc(var(--pane-title-height, 48px) / 2 - 10px);
height: auto; height: auto;
z-index: 2; z-index: 2;
svg { svg {
@ -367,7 +367,7 @@ body {
display: flex; display: flex;
height: var(--toolbar-height); height: var(--toolbar-height);
background-color: var(--color-toolbar-background, var(--color-pane-background)); background-color: var(--color-toolbar-background, var(--color-pane-background));
padding: 8px 16px; padding: var(--toolbar-padding, 8px 16px);
.lc-toolbar-center { .lc-toolbar-center {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -457,7 +457,7 @@ body {
display: flex; display: flex;
height: var(--toolbar-height); height: var(--toolbar-height);
background-color: var(--color-toolbar-background, var(--color-pane-background)); background-color: var(--color-toolbar-background, var(--color-pane-background));
padding: 8px 16px; padding: var(--toolbar-padding, 8px 16px);
.lc-toolbar-center { .lc-toolbar-center {
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@ -15,6 +15,11 @@ export interface IPublicTypeWidgetBaseConfig {
props?: Record<string, any>; props?: Record<string, any>;
content?: any; content?: any;
contentProps?: Record<string, any>; contentProps?: Record<string, any>;
/**
*
*/
index?: number;
} }
export interface IPublicTypePanelDockConfig extends IPublicTypeWidgetBaseConfig { export interface IPublicTypePanelDockConfig extends IPublicTypeWidgetBaseConfig {