|
@@ -12,7 +12,10 @@
|
|
|
position: relative;
|
|
position: relative;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
height: @header-height;
|
|
height: @header-height;
|
|
|
- padding: 0;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ /* 右侧留 8px:与公共顶栏 AppTopBar(.app-topbar padding: 0 8px 0 0)对齐,
|
|
|
|
|
+ 否则传统壳右缘内边距被清零、智能壳保留 8px,窗口控制三个按钮在两种模式间横向跳动 */
|
|
|
|
|
+ padding: 0 8px 0 0;
|
|
|
margin-left: -1px;
|
|
margin-left: -1px;
|
|
|
line-height: @header-height;
|
|
line-height: @header-height;
|
|
|
color: @white;
|
|
color: @white;
|
|
@@ -211,7 +214,11 @@
|
|
|
&-action {
|
|
&-action {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
min-width: 180px;
|
|
min-width: 180px;
|
|
|
- padding-right: 12px;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ /* 与公共顶栏 AppTopBar 的 .app-topbar__actions(padding-right: 4px)对齐:
|
|
|
|
|
+ 两条规则落同一个元素,这里若保持 12px 会按样式块加载顺序覆盖 4px,
|
|
|
|
|
+ 导致没加载本文件的智能壳与加载后的按钮组距右缘差 8px */
|
|
|
|
|
+ padding-right: 4px;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
margin-left: auto;
|
|
margin-left: auto;
|
|
@@ -259,12 +266,21 @@
|
|
|
cursor: default;
|
|
cursor: default;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // 窗口控制按钮自己管 hover,取消 action 容器统一套上的圆角块
|
|
|
|
|
|
|
+ // 窗口控制按钮自己管 hover,取消 action 容器统一套上的圆角块。
|
|
|
|
|
+ // 这里同时把上面 > div / > span 和 span[role=img] 两条通配规则
|
|
|
|
|
+ // 泄漏进窗口控制的 line-height / font-size / 图标内边距一并还原,
|
|
|
|
|
+ // 保证按钮在(加载了本文件的)传统壳与(未加载的)智能壳下渲染完全一致。
|
|
|
> .window-controls-item {
|
|
> .window-controls-item {
|
|
|
height: auto;
|
|
height: auto;
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
border-radius: 0;
|
|
border-radius: 0;
|
|
|
cursor: default;
|
|
cursor: default;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ line-height: normal;
|
|
|
|
|
+
|
|
|
|
|
+ span[role='img'] {
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
span[role='img'] {
|
|
span[role='img'] {
|
|
@@ -463,8 +479,8 @@
|
|
|
|
|
|
|
|
.@{header-prefix-cls}-action {
|
|
.@{header-prefix-cls}-action {
|
|
|
/* 同上:模式切换开关的图标保持组件给的 13px,不吃这里的放大规则 */
|
|
/* 同上:模式切换开关的图标保持组件给的 13px,不吃这里的放大规则 */
|
|
|
- > div:not(.jeesite-workbench-switch),
|
|
|
|
|
- > span:not(.jeesite-workbench-switch) {
|
|
|
|
|
|
|
+ > div:not(.jeesite-workbench-switch):not(.window-controls-item),
|
|
|
|
|
+ > span:not(.jeesite-workbench-switch):not(.window-controls-item) {
|
|
|
color: @text-color-base;
|
|
color: @text-color-base;
|
|
|
|
|
|
|
|
.jeesite-icon {
|
|
.jeesite-icon {
|
|
@@ -540,8 +556,8 @@
|
|
|
|
|
|
|
|
.@{header-prefix-cls}-action {
|
|
.@{header-prefix-cls}-action {
|
|
|
/* 同上:模式切换开关的图标保持组件给的 13px,不吃这里的放大规则 */
|
|
/* 同上:模式切换开关的图标保持组件给的 13px,不吃这里的放大规则 */
|
|
|
- > div:not(.jeesite-workbench-switch),
|
|
|
|
|
- > span:not(.jeesite-workbench-switch) {
|
|
|
|
|
|
|
+ > div:not(.jeesite-workbench-switch):not(.window-controls-item),
|
|
|
|
|
+ > span:not(.jeesite-workbench-switch):not(.window-controls-item) {
|
|
|
.jeesite-icon {
|
|
.jeesite-icon {
|
|
|
padding: 0 10px;
|
|
padding: 0 10px;
|
|
|
font-size: 20px !important;
|
|
font-size: 20px !important;
|
|
@@ -586,8 +602,8 @@ html[data-theme='dark'] {
|
|
|
.@{header-prefix-cls} {
|
|
.@{header-prefix-cls} {
|
|
|
&--dark {
|
|
&--dark {
|
|
|
.@{header-prefix-cls}-action {
|
|
.@{header-prefix-cls}-action {
|
|
|
- > div:not(.jeesite-workbench-switch),
|
|
|
|
|
- > span:not(.jeesite-workbench-switch) {
|
|
|
|
|
|
|
+ > div:not(.jeesite-workbench-switch):not(.window-controls-item),
|
|
|
|
|
+ > span:not(.jeesite-workbench-switch):not(.window-controls-item) {
|
|
|
&:hover {
|
|
&:hover {
|
|
|
background-color: #262626;
|
|
background-color: #262626;
|
|
|
}
|
|
}
|