Skip to content

Commit 8e257c4

Browse files
ArgoZhangArgoZhang
committed
style: 调整样式
1 parent b07e7d6 commit 8e257c4

1 file changed

Lines changed: 60 additions & 60 deletions

File tree

‎src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css‎

Lines changed: 60 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
--bb-dockview-control-dropdown-padding-y: .25rem;
1111
--bb-dockview-control-dropdown-item-padding-x: 0;
1212
--bb-dockview-control-dropdown-item-padding-y: 3px;
13+
--bb-dockview-aside-width: calc(1.5em + .25rem);
1314
--dv-tabs-and-actions-container-font-size: 13px;
1415
--dv-tabs-and-actions-container-height: 35px;
1516
--dv-active-sash-color: #bcbcbc;
@@ -194,81 +195,80 @@
194195

195196

196197
.bb-dockview > div:has(> .bb-dockview-aside-left > div) {
197-
padding-left: calc(1.5em + .25rem);
198+
padding-left: var(--bb-dockview-aside-width);
198199
}
200+
199201
.bb-dockview > div:has(> .bb-dockview-aside-right > div) {
200-
padding-right: calc(1.5em + .25rem);
202+
padding-right: var(--bb-dockview-aside-width);
201203
}
202-
.bb-dockview .bb-dockview-aside {
203-
position: absolute;
204-
height: 100%;
205-
top: 0;
206-
}
207204

208-
.bb-dockview .bb-dockview-aside-left {
209-
left: 0
210-
}
211-
.bb-dockview .bb-dockview-aside-right {
212-
right:0
213-
}
205+
.bb-dockview .bb-dockview-aside {
206+
position: absolute;
207+
height: 100%;
208+
top: 0;
209+
width: var(--bb-dockview-aside-width);
210+
display: flex;
211+
align-items: flex-start;
212+
justify-content: center;
213+
}
214214

215-
.bb-dockview .bb-dockview-aside > .bb-dockview-aside-button {
216-
position: relative;
217-
padding: .25rem .125rem;
218-
margin-bottom: 10px;
219-
cursor: pointer;
220-
user-select: none;
221-
writing-mode: vertical-lr;
222-
text-orientation: sideways;
223-
color: var(--dv-inactivegroup-visiblepanel-tab-color);
224-
}
215+
.bb-dockview .bb-dockview-aside-left {
216+
left: 0
217+
}
225218

226-
.bb-dockview .bb-dockview-aside > .bb-dockview-aside-button:hover,
227-
.bb-dockview .bb-dockview-aside > .bb-dockview-aside-button.active {
228-
color: var(--dv-activegroup-visiblepanel-tab-color);
229-
}
219+
.bb-dockview .bb-dockview-aside-right {
220+
right: 0
221+
}
230222

231-
.bb-dockview .bb-dockview-aside > .bb-dockview-aside-button:hover::after,
232-
.bb-dockview .bb-dockview-aside > .bb-dockview-aside-button.active::after {
233-
content: '';
234-
position: absolute;
235-
top: 0;
236-
width: 3px;
237-
height: 100%;
238-
background-color: var(--bb-ribbon-menu-bg);
239-
}
223+
.bb-dockview .bb-dockview-aside > .bb-dockview-aside-button {
224+
position: relative;
225+
margin-inline: .25rem;
226+
padding-inline: .5rem;
227+
cursor: pointer;
228+
user-select: none;
229+
writing-mode: vertical-lr;
230+
text-orientation: sideways;
231+
color: var(--dv-inactivegroup-visiblepanel-tab-color);
232+
border-radius: 5px;
233+
}
240234

241-
.bb-dockview .bb-dockview-aside-right > .bb-dockview-aside-button:hover::after,
242-
.bb-dockview .bb-dockview-aside-right > .bb-dockview-aside-button.active::after {
243-
right: 0;
235+
.bb-dockview .bb-dockview-aside > .bb-dockview-aside-button:hover,
236+
.bb-dockview .bb-dockview-aside > .bb-dockview-aside-button.active {
237+
color: var(--dv-activegroup-visiblepanel-tab-color);
238+
background-color: var(--dv-icon-hover-background-color);
244239
}
245240

246-
.bb-dockview .dv-resize-container-drawer {
247-
height: 100% !important;
248-
}
241+
.bb-dockview .bb-dockview-aside-right > .bb-dockview-aside-button:hover::after,
242+
.bb-dockview .bb-dockview-aside-right > .bb-dockview-aside-button.active::after {
243+
right: 0;
244+
}
249245

250-
.bb-dockview .dv-resize-container-drawer:not(.active) {
251-
z-index: -1 !important;
252-
}
246+
.bb-dockview .dv-resize-container-drawer {
247+
height: 100% !important;
248+
}
253249

254-
.bb-dockview .dv-resize-container.dv-resize-container-drawer.bb-resize-container-right {
255-
box-shadow: -8px 8px 8px 0px rgba(83, 89, 93, 0.5);
250+
.bb-dockview .dv-resize-container-drawer:not(.active) {
251+
z-index: -1 !important;
256252
}
257253

258-
.bb-dockview .dv-resize-container.dv-resize-container-drawer.bb-resize-container-right > div:not(.dv-resize-handle-left):not(.dv-groupview-floating),
259-
.bb-dockview .dv-resize-container.dv-resize-container-drawer.bb-resize-container-left > div:not(.dv-resize-handle-right):not(.dv-groupview-floating),
260-
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-float,
261-
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-dock,
262-
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-down,
263-
.bb-dockview .dv-resize-container:not(.dv-resize-container-drawer) > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-pin,
264-
.bb-dockview .dv-resize-container:not(.dv-resize-container-drawer) > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-pushpin {
265-
display: none;
266-
}
254+
.bb-dockview .dv-resize-container.dv-resize-container-drawer.bb-resize-container-right {
255+
box-shadow: -8px 8px 8px 0px rgba(83, 89, 93, 0.5);
256+
}
267257

268-
.bb-dockview .dv-tabs-and-actions-container:has(.dropdown-item) .dv-scrollbar-horizontal {
258+
.bb-dockview .dv-resize-container.dv-resize-container-drawer.bb-resize-container-right > div:not(.dv-resize-handle-left):not(.dv-groupview-floating),
259+
.bb-dockview .dv-resize-container.dv-resize-container-drawer.bb-resize-container-left > div:not(.dv-resize-handle-right):not(.dv-groupview-floating),
260+
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-float,
261+
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-dock,
262+
.bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-down,
263+
.bb-dockview .dv-resize-container:not(.dv-resize-container-drawer) > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-pin,
264+
.bb-dockview .dv-resize-container:not(.dv-resize-container-drawer) > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-pushpin {
269265
display: none;
270266
}
271267

272-
.bb-dockview .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
273-
visibility: visible;
274-
}
268+
.bb-dockview .dv-tabs-and-actions-container:has(.dropdown-item) .dv-scrollbar-horizontal {
269+
display: none;
270+
}
271+
272+
.bb-dockview .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
273+
visibility: visible;
274+
}

0 commit comments

Comments
 (0)