mustakshif/Asri

面包屑无法识别拖动块上移页面

Closed this issue · 11 comments

5kyfkr commented

如视频，用了最新的theme.css似乎识别不到拖动块上移页面，测试了现在3.0.11没问题，今晚新的theme.css用了不行

00-39-31.mp4
5kyfkr commented
00-53-12.mp4

还有大佬，最新theme.css弄进去后替换，顶部标签页不见了，替换回3.0.11的就没事

测试是以下改顶栏颜色的代码引起的，大佬有没办法帮忙改改我这个css适配下

#toolbar {
background-color: rgb(229,231,236) !important;
}
mustakshif commented

抱歉 刚才css 包含实验性样式忘记关了。再用最新文件替换一下

mustakshif commented

顶部标签页不见了

这个一般可以直接改 .layout-tab-bar 的 z-index，上次说过

#60 (comment)

5kyfkr commented

顶部标签页不见了

这个一般可以直接改 .layout-tab-bar 的 z-index，上次说过

#60 (comment)

用新的没问题了，刚才那个实验css那个加了层级也是不行
image

5kyfkr commented 
.protyle-breadcrumb {
height: 30px !important;
margin-top: 5px !important;
}

还有我一直用这个改面包屑高度改小点，刚才实验css用了会错位，现在的没问题了

  • 🎉1
5kyfkr commented

大佬有兴趣可以试试我现在用的魔改css和侧栏配色，用了一星期感觉不错，应该不会动了，加到css片段就行

/*顶栏高度和对齐*/
.toolbar {
height: 40px !important;
border-bottom: 0.5px solid rgba(0,0,0,0);
}
.layout-tab-bar {
position: relative;
top: 3.5px;
}
#AsriPluginsIconsDivider  {
top: 10px !important;
background-color: rgba(180,180,180,0) !important;
}

/*侧栏宽度*/
.dock--vertical  {
 width:38px !important;
}

/*面包屑高度*/
.protyle-breadcrumb {
height: 30px !important;
margin-top: 5px !important;
}


/*日间配色*/
:root[data-theme-mode=light] {
--b3-theme-on-background: rgb(20,20,20);/*0,0,0*/
--b3-theme-on-surface: rgb(100,106,112);/*60,60,60*/
--b3-theme-surface: rgb(229,231,236);/*228,228,228; 224, 232, 234*/
--b3-theme-background: rgb(242,243,247);/*255,255,255*/
--b3-toolbar-blur-background: rgb(47,54,61);
}
:root[data-theme-mode=light] .body--mobile {
--b3-theme-background: #f2f3f7;
}
:root[data-theme-mode=dark] {
--b3-theme-on-background: rgb(198, 198, 198);/*rgb(218, 218, 218)*/
--b3-theme-on-surface: rgb(180, 180, 180);/*171,178,191*/
--b3-theme-background: rgb(30, 30, 30);/*47,54,61*/
--b3-theme-surface: rgb(15, 15, 15);/*38,38,38*/
--b3-toolbar-blur-background: rgb(47,54,61);
}
:root[data-theme-mode=dark] .body--mobile {
--b3-theme-background: #1e1e1e;
--b3-theme-on-background: #dadada;
}

/*日间工具栏配色*/
:root[data-theme-mode=light]{
#toolbar {
background-color: rgb(229,231,236) !important;/*rgb(224,232,234)*/
}
.protyle-breadcrumb {
background-color: rgb(242,243,247) !important;
}
#dockLeft.dock.dock--vertical{
 background-color: rgb(229,231,236) !important;
}
#dockRight.dock.dock--vertical{
 background-color: rgb(229,231,236) !important;
}
.layout-tab-bar {
    z-index: 3;
}
body:not(.body--mobile, .body--window) .layout__dockl.layout--float::before {
    background-color: rgb(229,231,236);
}
.protyle-breadcrumb__text{
 font-size: 14px !important;
}
}
/*夜间工具栏配色*/
:root[data-theme-mode=dark]{
#toolbar {
background-color: rgb(0, 0, 0) !important;
}
.protyle-breadcrumb {
background-color: rgb(30,30,30) !important;
}
#dockLeft.dock.dock--vertical{
 background-color: rgb(0, 0, 0) !important;
}
#dockRight.dock.dock--vertical{
 background-color: rgb(0, 0, 0) !important;
}
.layout-tab-bar {
    z-index: 3;
}
body:not(.body--mobile, .body--window) .layout__dockl.layout--float::before {
    background-color: rgb(0, 0, 0);
}
.protyle-breadcrumb__text{
 font-size: 14px !important;
 color: rgb(180, 180, 180);
}
}
mustakshif commented
截屏2024-05-24 01 21 22

是这样的吗

mustakshif commented

如果我用你的主题，我会倾向于给面包屑左上和右上加一点圆角，看起来平滑一些

5kyfkr commented

如果我用你的主题，我会倾向于给面包屑左上和右上加一点圆角，看起来平滑一些

是这样滴，我也想过，但不会加哈哈，大佬看看能帮忙写个那就完美了。
我觉得四周工具栏有颜色可以让页面内容区域更明显，对比了才工具栏加点颜色

mustakshif commented 
/*顶栏高度和对齐*/
.toolbar {
    height: 40px !important;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0);
}

.layout-tab-bar {
    position: relative;
    top: 3.5px;
}

#AsriPluginsIconsDivider {
    top: 10px !important;
    background-color: rgba(180, 180, 180, 0) !important;
}

/*侧栏宽度*/
.dock--vertical {
    width: 38px !important;
}

/*面包屑高度*/
.protyle-breadcrumb {
    height: 30px !important;
}

/*日间配色*/
:root[data-theme-mode=light] {
    --b3-theme-on-background: rgb(20, 20, 20);
    /*0,0,0*/
    --b3-theme-on-surface: rgb(100, 106, 112);
    /*60,60,60*/
    --b3-theme-surface: rgb(229, 231, 236);
    /*228,228,228; 224, 232, 234*/
    --b3-theme-background: rgb(242, 243, 247);
    /*255,255,255*/
    --b3-toolbar-blur-background: rgb(47, 54, 61);
}

:root[data-theme-mode=light] .body--mobile {
    --b3-theme-background: #f2f3f7;
}

:root[data-theme-mode=dark] {
    --b3-theme-on-background: rgb(198, 198, 198);
    /*rgb(218, 218, 218)*/
    --b3-theme-on-surface: rgb(180, 180, 180);
    /*171,178,191*/
    --b3-theme-background: rgb(30, 30, 30);
    /*47,54,61*/
    --b3-theme-surface: rgb(15, 15, 15);
    /*38,38,38*/
    --b3-toolbar-blur-background: rgb(47, 54, 61);
}

:root[data-theme-mode=dark] .body--mobile {
    --b3-theme-background: #1e1e1e;
    --b3-theme-on-background: #dadada;
}

/*日间工具栏配色*/
:root[data-theme-mode=light] {
    #toolbar {
        background-color: rgb(229, 231, 236) !important;
        /*rgb(224,232,234)*/
    }

    #dockLeft.dock.dock--vertical {
        background-color: rgb(229, 231, 236) !important;
    }

    #dockRight.dock.dock--vertical {
        background-color: rgb(229, 231, 236) !important;
    }

    .layout-tab-bar {
        z-index: 3;
    }

    body:not(.body--mobile, .body--window) .layout__dockl.layout--float::before {
        background-color: rgb(229, 231, 236);
    }

    .protyle-breadcrumb__text {
        font-size: 14px !important;
    }
}

/*夜间工具栏配色*/
:root[data-theme-mode=dark] {
    #toolbar {
        background-color: rgb(0, 0, 0) !important;
    }

    #dockLeft.dock.dock--vertical {
        background-color: rgb(0, 0, 0) !important;
    }

    #dockRight.dock.dock--vertical {
        background-color: rgb(0, 0, 0) !important;
    }

    .layout-tab-bar {
        z-index: 3;
    }

    body:not(.body--mobile, .body--window) .layout__dockl.layout--float::before {
        background-color: rgb(0, 0, 0);
    }

    .protyle-breadcrumb__text {
        font-size: 14px !important;
        color: rgb(180, 180, 180);
    }
}

.fn__flex-column[data-type=wnd]>.fn__flex:first-child {
    height: 48px;
}

/* 编辑区圆角 */
:root[data-theme-mode=light] .layout-tab-container {
    background-color: #e5e5e5;
}
:root[data-theme-mode=dark] .layout-tab-container {
    background-color: #000;
}
.protyle-breadcrumb {
    background-color: transparent;
}
.protyle {
    border-radius: 12px 12px 0 0;
}

稍微改了下，可以实现圆角了。不过没广泛测试过

  • 👍1
5kyfkr commented 
/*顶栏高度和对齐*/
.toolbar {
    height: 40px !important;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0);
}

.layout-tab-bar {
    position: relative;
    top: 3.5px;
}

#AsriPluginsIconsDivider {
    top: 10px !important;
    background-color: rgba(180, 180, 180, 0) !important;
}

/*侧栏宽度*/
.dock--vertical {
    width: 38px !important;
}

/*面包屑高度*/
.protyle-breadcrumb {
    height: 30px !important;
}

/*日间配色*/
:root[data-theme-mode=light] {
    --b3-theme-on-background: rgb(20, 20, 20);
    /*0,0,0*/
    --b3-theme-on-surface: rgb(100, 106, 112);
    /*60,60,60*/
    --b3-theme-surface: rgb(229, 231, 236);
    /*228,228,228; 224, 232, 234*/
    --b3-theme-background: rgb(242, 243, 247);
    /*255,255,255*/
    --b3-toolbar-blur-background: rgb(47, 54, 61);
}

:root[data-theme-mode=light] .body--mobile {
    --b3-theme-background: #f2f3f7;
}

:root[data-theme-mode=dark] {
    --b3-theme-on-background: rgb(198, 198, 198);
    /*rgb(218, 218, 218)*/
    --b3-theme-on-surface: rgb(180, 180, 180);
    /*171,178,191*/
    --b3-theme-background: rgb(30, 30, 30);
    /*47,54,61*/
    --b3-theme-surface: rgb(15, 15, 15);
    /*38,38,38*/
    --b3-toolbar-blur-background: rgb(47, 54, 61);
}

:root[data-theme-mode=dark] .body--mobile {
    --b3-theme-background: #1e1e1e;
    --b3-theme-on-background: #dadada;
}

/*日间工具栏配色*/
:root[data-theme-mode=light] {
    #toolbar {
        background-color: rgb(229, 231, 236) !important;
        /*rgb(224,232,234)*/
    }

    #dockLeft.dock.dock--vertical {
        background-color: rgb(229, 231, 236) !important;
    }

    #dockRight.dock.dock--vertical {
        background-color: rgb(229, 231, 236) !important;
    }

    .layout-tab-bar {
        z-index: 3;
    }

    body:not(.body--mobile, .body--window) .layout__dockl.layout--float::before {
        background-color: rgb(229, 231, 236);
    }

    .protyle-breadcrumb__text {
        font-size: 14px !important;
    }
}

/*夜间工具栏配色*/
:root[data-theme-mode=dark] {
    #toolbar {
        background-color: rgb(0, 0, 0) !important;
    }

    #dockLeft.dock.dock--vertical {
        background-color: rgb(0, 0, 0) !important;
    }

    #dockRight.dock.dock--vertical {
        background-color: rgb(0, 0, 0) !important;
    }

    .layout-tab-bar {
        z-index: 3;
    }

    body:not(.body--mobile, .body--window) .layout__dockl.layout--float::before {
        background-color: rgb(0, 0, 0);
    }

    .protyle-breadcrumb__text {
        font-size: 14px !important;
        color: rgb(180, 180, 180);
    }
}

.fn__flex-column[data-type=wnd]>.fn__flex:first-child {
    height: 48px;
}

/* 编辑区圆角 */
:root[data-theme-mode=light] .layout-tab-container {
    background-color: #e5e5e5;
}
:root[data-theme-mode=dark] .layout-tab-container {
    background-color: #000;
}
.protyle-breadcrumb {
    background-color: transparent;
}
.protyle {
    border-radius: 12px 12px 0 0;
}

稍微改了下，可以实现圆角了。不过没广泛测试过

没问题，能用，巨佬出手就是不一样

  • 🎉1