BootstrapBlazor.Extensions/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css at d5fbd5376eac251670f9c938a5e76f5ac8099614 · BootstrapBlazor/BootstrapBlazor.Extensions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
@import './dockview.css';

.bb-dockview {
    --bb-dockview-padding: .25rem;
    --bb-dockview-tab-line-height: 21px;
    --bb-dockview-tab-padding: 0 8px;
    --bb-dockview-control-icon-width: 12px;
    --bb-dockview-control-icon-color: var(--bs-body-color);
    --bb-dockview-control-icon-lock-color: #b5b5c3;
    --bb-dockview-control-dropdown-padding-y: .25rem;
    --bb-dockview-control-dropdown-item-padding-x: 0;
    --bb-dockview-control-dropdown-item-padding-y: 3px;
    --bb-dockview-aside-width: calc(1.5em + .25rem);
    --dv-tabs-and-actions-container-font-size: 13px;
    --dv-tabs-and-actions-container-height: 35px;
    --dv-active-sash-color: #bcbcbc;
    width: 100%;
    height: 100%;
    border: var(--bs-border-width) solid var(--bs-border-color);
    position: relative;
}

    .bb-dockview > div {
        --dv-tabs-and-actions-container-height: 30px;
        --bb-dockview-tab-line-height: 30px;
        --bb-dockview-tab-padding: 0 3px;
        --dv-tabs-and-actions-container-font-size: 12px;
    }

    .bb-dockview .dv-resize-container {
        border: 1px solid var(--bs-border-color);
    }

    .bb-dockview .bb-dockview-panel {
        height: 100%;
        width: 100%;
    }

    .bb-dockview .dv-groupview > .dv-content-container, .dv-render-overlay {
        padding: var(--bb-dockview-padding);
    }

    .bb-dockview .bb-dockview-item-title-icon {
        cursor: pointer;
    }

    .bb-dockview .bb-dockview-item-title {
        position: relative;
        display: flex;
        align-items: center;
    }

    .bb-dockview .dv-tab .dv-default-tab {
        padding: var(--bb-dockview-tab-padding);
    }

        .bb-dockview .dv-tab .dv-default-tab .dv-default-tab-content {
            padding: var(--bb-dockview-tab-padding);
            line-height: var(--bb-dockview-tab-line-height);
        }

        .bb-dockview .dv-tab .dv-default-tab .bb-dockview-control-icon {
            display: flex;
        }

    .bb-dockview .dv-tab.inactive-tab .dv-default-tab .dv-default-tab-action {
        visibility: visible;
    }

    .bb-dockview .dv-tab:focus::after {
        outline-offset: 0;
    }

    .bb-dockview.dockview-theme-light {
        --dv-separator-border: var(--bs-border-color);
        --dv-background-color: var(--bs-body-bg);
        --dv-floating-box-shadow: var(--bs-box-shadow);
        --dv-tab-divider-color: var(--bs-border-color);
    }

    .bb-dockview.dockview-theme-dark {
        --bb-dockview-control-icon-color: #dee2e6;
    }

    .bb-dockview.dockview-theme-vs {
        --bb-dockview-control-icon-color: #dee2e6;
    }

    .bb-dockview.dockview-theme-abyss {
        --bb-dockview-control-icon-color: #dee2e6;
    }

    .bb-dockview.dockview-theme-dracula {
        --bb-dockview-control-icon-color: #dee2e6;
    }

    .bb-dockview .dv-tabs-and-actions-container .dv-tabs-container {
        overflow: hidden;
    }

    .bb-dockview .dv-tabs-and-actions-container:has(.bb-lock) .void-container {
        cursor: default;
    }

    .bb-dockview .dv-tabs-and-actions-container:has(.bb-lock) .drop-target > .drop-target-dropzone > .drop-target-selection {
        background-color: var(--dv-tabs-and-actions-container-background-color);
    }

    .bb-dockview .dv-right-actions-container {
        display: flex;
        align-items: center;
        margin-right: .5rem;
    }

        .bb-dockview .dv-right-actions-container > div {
            cursor: pointer;
        }

            .bb-dockview .dv-right-actions-container > div:not(:first-child) {
                margin-left: .5rem;
            }

        .bb-dockview .dv-tab-on > .dv-default-tab-content + .dv-default-tab-action,
        .bb-dockview .dv-tabs-and-actions-container:has(.dv-tab-on) > .dv-right-actions-container > .bb-dockview-control-icon-close,
        .bb-dockview .dv-right-actions-container:not(.bb-show-pin) .bb-dockview-control-icon-pin,
        .bb-dockview .dv-right-actions-container:not(.bb-show-pin) .bb-dockview-control-icon-pushpin,
        .bb-dockview .dv-right-actions-container:not(.bb-pin) .bb-dockview-control-icon-pin,
        .bb-dockview .dv-right-actions-container.bb-pin .bb-dockview-control-icon-pushpin,
        .bb-dockview .dv-right-actions-container:not(.bb-show-lock) .bb-dockview-control-icon-lock,
        .bb-dockview .dv-right-actions-container:not(.bb-show-lock) .bb-dockview-control-icon-unlock,
        .bb-dockview .dv-right-actions-container:not(.bb-lock) .bb-dockview-control-icon-lock,
        .bb-dockview .dv-right-actions-container.bb-lock .bb-dockview-control-icon-unlock,
        .bb-dockview .dv-right-actions-container:not(.bb-show-float) .bb-dockview-control-icon-float,
        .bb-dockview .dv-right-actions-container:not(.bb-show-float) .bb-dockview-control-icon-dock,
        .bb-dockview .dv-right-actions-container:not(.bb-float) .bb-dockview-control-icon-dock,
        .bb-dockview .dv-right-actions-container:not(.bb-float) .bb-dockview-control-icon-down,
        .bb-dockview .dv-right-actions-container:not(:has(.dv-tab)) .bb-dockview-control-icon-dropdown,
        .bb-dockview .dv-right-actions-container .bb-dockview-control-icon-dropdown li:not(:has(.dv-tab)),
        .bb-dockview .dv-right-actions-container.bb-float .bb-dockview-control-icon-float,
        .bb-dockview .dv-right-actions-container:not(.bb-show-maximize) .bb-dockview-control-icon-full,
        .bb-dockview .dv-right-actions-container:not(.bb-show-maximize) .bb-dockview-control-icon-restore,
        .bb-dockview .dv-right-actions-container:not(.bb-maximize) .bb-dockview-control-icon-restore,
        .bb-dockview .dv-right-actions-container.bb-maximize .bb-dockview-control-icon-full {
            display: none;
        }

        .bb-dockview .dv-tabs-and-actions-container:has(.bb-lock) .dv-default-tab-content + .dv-default-tab-action svg > *,
        .bb-dockview .dv-right-actions-container.bb-lock .bb-dockview-control-icon-close > svg > *,
        .bb-dockview .dv-right-actions-container.bb-lock .bb-dockview-control-icon-float > svg > *,
        .bb-dockview .dv-right-actions-container.bb-lock .bb-dockview-control-icon-dock > svg > *,
        .bb-dockview .dv-right-actions-container.bb-lock .bb-dockview-control-icon-pin > svg > *,
        .bb-dockview .dv-right-actions-container.bb-lock .bb-dockview-control-icon-pushpin > svg > *,
        .bb-dockview .dv-groupview:has(.dv-resize-container) > .dv-tabs-and-actions-container > .dv-right-actions-container .bb-dockview-control-icon-pin > svg > *,
        .bb-dockview .dv-groupview:has(.dv-resize-container) > .dv-tabs-and-actions-container > .dv-right-actions-container .bb-dockview-control-icon-float > svg > *,
        .bb-dockview .dv-tabs-and-actions-container:has(.bb-show-pin):has(.dv-right-actions-container:not(.bb-pin)) + .dv-content-container .bb-dockview .bb-dockview-control-icon-pin > svg > *,
        .bb-dockview .dv-tabs-and-actions-container:has(.bb-show-pin):has(.dv-right-actions-container:not(.bb-pin)) + .dv-content-container .bb-dockview .bb-dockview-control-icon-float > svg > *,
        .bb-dockview .dv-tabs-and-actions-container:has(.bb-show-float.bb-float) + .dv-content-container .bb-dockview .bb-dockview-control-icon-pin > svg > *,
        .bb-dockview .dv-tabs-and-actions-container:has(.bb-show-float.bb-float) + .dv-content-container .bb-dockview .bb-dockview-control-icon-float > svg > * {
            stroke: var(--bb-dockview-control-icon-lock-color);
        }

    .bb-dockview .bb-dockview-control-icon > svg {
        width: var(--bb-dockview-control-icon-width);
        height: var(--bb-dockview-control-icon-width);
    }

        .bb-dockview .bb-dockview-control-icon > svg > * {
            stroke: var(--bb-dockview-control-icon-color);
        }

    .bb-dockview .bb-up .bb-dockview-control-icon-down > svg {
        transform: rotate(180deg);
    }

    .bb-dockview .bb-dockview-control-icon-down > svg {
        transition: transform .3s linear;
    }

    .bb-dockview .bb-dockview-control-icon-dropdown .dropdown-menu {
        --bs-dropdown-padding-y: var(--bb-dockview-control-dropdown-padding-y);
        --bs-dropdown-item-padding-x: var(--bb-dockview-control-dropdown-item-padding-x);
        --bs-dropdown-item-padding-y: var(--bb-dockview-control-dropdown-item-padding-y);
    }

.dv-split-view-container .dv-sash-container .dv-sash:not(.disabled):hover {
    transition-delay: unset;
    transition-duration: .3s;
}

.ribbon-body.ribbon-body > div,
.bb-dockview .dv-split-view-container,
.bb-dockview .dv-split-view-container .dv-view-container .dv-view {
    overflow: initial;
}

    .bb-dockview .dv-split-view-container .dv-view-container > .dv-view > .dv-groupview:has(.dv-resize-container) {
        overflow: initial !important;
    }


.bb-dockview > div:has(> .bb-dockview-aside-left > div) {
    padding-left: var(--bb-dockview-aside-width);
}

.bb-dockview > div:has(> .bb-dockview-aside-right > div) {
    padding-right: var(--bb-dockview-aside-width);
}

.bb-dockview .bb-dockview-aside {
    position: absolute;
    height: 100%;
    top: 0;
    width: var(--bb-dockview-aside-width);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}

.bb-dockview .bb-dockview-aside-left {
    left: 0;
    border-right: 1px solid var(--bs-border-color);
}

.bb-dockview .bb-dockview-aside-right {
    right: 0;
    border-left: 1px solid var(--bs-border-color);
}

.bb-dockview .bb-dockview-aside > .bb-dockview-aside-button {
    position: relative;
    margin: .25rem 2px;
    padding-inline: .5rem;
    cursor: pointer;
    user-select: none;
    writing-mode: vertical-lr;
    text-orientation: sideways;
    color: var(--dv-inactivegroup-visiblepanel-tab-color);
    border-radius: 5px;
}

    .bb-dockview .bb-dockview-aside > .bb-dockview-aside-button:hover,
    .bb-dockview .bb-dockview-aside > .bb-dockview-aside-button.active {
        color: var(--dv-activegroup-visiblepanel-tab-color);
        background-color: var(--dv-icon-hover-background-color);
    }

.bb-dockview .bb-dockview-aside-right > .bb-dockview-aside-button:hover::after,
.bb-dockview .bb-dockview-aside-right > .bb-dockview-aside-button.active::after {
    right: 0;
}

.bb-dockview .dv-resize-container-drawer {
    height: 100% !important;
}

    .bb-dockview .dv-resize-container-drawer:not(.active),
    .bb-dockview .dv-render-overlay-float-drawer:not(.active) {
        z-index: -1 !important;
    }

.bb-dockview .dv-resize-container.dv-resize-container-drawer.bb-resize-container-right {
    box-shadow: -8px 8px 8px 0px rgba(83, 89, 93, 0.5);
}

    .bb-dockview .dv-resize-container.dv-resize-container-drawer.bb-resize-container-right > div:not(.dv-resize-handle-left):not(.dv-groupview-floating),
    .bb-dockview .dv-resize-container.dv-resize-container-drawer.bb-resize-container-left > div:not(.dv-resize-handle-right):not(.dv-groupview-floating),
    .bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-float,
    .bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-dock,
    .bb-dockview .dv-resize-container.dv-resize-container-drawer > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-down,
    .bb-dockview .dv-resize-container:not(.dv-resize-container-drawer) > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-pin,
    .bb-dockview .dv-resize-container:not(.dv-resize-container-drawer) > .dv-groupview-floating > .dv-tabs-and-actions-container .bb-dockview-control-icon-pushpin {
        display: none;
    }

.bb-dockview .dv-tabs-and-actions-container:has(.dropdown-item) .dv-scrollbar-horizontal {
    display: none;
}

.bb-dockview .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
    visibility: visible;
}

.bb-dockview .bb-overflowHidden {
    overflow: hidden;
}