BootstrapBlazor.Extensions/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css at 3fd0a591dabffd7b8a62149fb8d9abe113cd0418 · 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
287
288
289
290
291
292
293
294
295
296
@import './dockview.css';

[data-bs-theme='dark'] .bb-dockview {
    --dv-background-color: black;
    --dv-paneview-active-outline-color: dodgerblue;
    --dv-tabs-and-actions-container-font-size: 13px;
    --dv-tabs-and-actions-container-height: 35px;
    --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
    --dv-drag-over-border-color: white;
    --dv-tabs-container-scrollbar-color: #888;
    --dv-icon-hover-background-color: rgba(90, 93, 94, 0.31);
    --dv-floating-box-shadow: 8px 8px 8px 0px rgba(83, 89, 93, 0.5);
    --dv-group-view-background-color: #1e1e1e;
    --dv-tabs-and-actions-container-background-color: #252526;
    --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;
    --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;
    --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;
    --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;
    --dv-tab-divider-color: #1e1e1e;
    --dv-activegroup-visiblepanel-tab-color: white;
    --dv-activegroup-hiddenpanel-tab-color: #969696;
    --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;
    --dv-inactivegroup-hiddenpanel-tab-color: #626262;
    --dv-separator-border: rgb(68, 68, 68);
    --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);
    --dv-active-sash-color: #595959;
}

.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;
    --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 .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.bb-maximize {
        z-index: 99;
    }

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

.bb-dockview .dv-resize-container .dv-groupview .dv-tabs-and-actions-container {
    z-index: 12;
}

.bb-dockview .bb-dockview-btn-wrapper {
    cursor: pointer;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-100%);
    user-select: none;
}

    .bb-dockview .bb-dockview-btn-wrapper > div {
        width: 20px;
        padding: 2px 0;
        margin-bottom: 10px;
        position: relative;
        writing-mode: vertical-lr;
        text-orientation: sideways;
        color: var(--dv-inactivegroup-visiblepanel-tab-color);
    }

        .bb-dockview .bb-dockview-btn-wrapper > div:hover,
        .bb-dockview .bb-dockview-btn-wrapper > div.active {
            color: var(--dv-activegroup-visiblepanel-tab-color);
        }

            .bb-dockview .bb-dockview-btn-wrapper > div:hover::after,
            .bb-dockview .bb-dockview-btn-wrapper > div.active::after {
                content: '';
                position: absolute;
                left: -3px;
                top: 0;
                width: 3px;
                height: 100%;
                background-color: var(--bb-ribbon-menu-bg);
            }

        .bb-dockview .bb-dockview-btn-wrapper > div span {
            display: block;
            margin-bottom: -5px;
        }

.bb-dockview:has(>.bb-dockview-btn-wrapper>div) {
    margin-left: 23px;
    width: calc(100% - 23px);
}

.bb-dockview .dv-resize-container.dv-resize-container-drawer > 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-resize-container-drawer {
    height: 100% !important;
}

.bb-dockview .dv-tabs-and-actions-container:has(.dropdown-item) .dv-scrollbar-horizontal {
    display: none;
}
.bb-dockview .dv-scrollable {
    width: initial;
}
.bb-dockview .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
    visibility: visible;
}