康奈尔笔记样式

Innis 2021-8-2 1537

此样式是在@Hardy的指导下完成的,特此致谢~~~


.node[mystyle~='康奈尔']:not(.node-foldup) {
    > .node-btn {
     opacity: 0;
        
        &:hover {
         opacity: 1;
            transition: all 0.3s;
        }
    }
    > .node-head {
     > .node-text, > .node-text:focus {
         text-align: center;
            background-color: var(--info) !important;
            font-size: 24px;
            color: #fff;
            margin-left: 14px;
            margin-right: 0px;
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            
        }
    }
    > .node-child {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid var(--table-border);
        padding-left: 0px;
        
     > .node:first-child {
            flex-shrink: 0;
            min-width: 150px;
         flex-basis: 25%;
            border-right: 1px solid var(--table-border);
            
            > .node-btn {
             display: none;
            }
        }
        
        > .node {
             
            
            > .node-head {
             > .node-text {
                 margin-left: 0px;
                    padding-left: 25px;
                    color: var(--info);
                    font-weight: 800;
                }
            }
            
            > .node-child { 
             border: none !important;
                padding-left: 0px;
            }
        }
        
        > .node:nth-child(2) {
         flex-grow: 1;
         max-width:75%;
        }
        
        > .node:last-child {
         flex-basis: 100%;
            border-top: 1px solid var(--table-border);
            
            > .node-btn {
             display: none;
            }
        }
    }
}


效果图:



快速回复
最新回复 (9)
  • gm 2021-8-2
    0 2
    具体怎么用的?
  • zhiyulife 2021-8-3
    0 3

    应用样式的时候发现一点问题,笔记内容如果过长,就会发生以下问题


  • Innis 2021-8-3
    0 4
    zhiyulife 应用样式的时候发现一点问题,笔记内容如果过长,就会发生以下问题
    谢谢反馈,已经修正了,你再试试看 (*^_^*)
  • zhiyulife 2021-8-4
    0 5
    Innis[社区志愿者] 谢谢反馈,已经修正了,你再试试看 (*^_^*)
    已修复,感谢
  • Biomaker 2021-8-17
    0 6
    我直接将代码粘贴在自定义样式中,但是实际使用没有出现图片中的效果
  • sheen 2021-8-18
    0 7
    Biomaker 我直接将代码粘贴在自定义样式中,但是实际使用没有出现图片中的效果

    排查后,是跟其他的自定义样式起冲突了。

  • Biomaker 2021-8-18
    0 8
    发现这与其他人分享的自定义样式有冲突
  • sheen 2021-8-19
    1 9
    /*修复了客户端显示太长的问题*/
    .node[mystyle~='康奈尔']:not(.node-foldup) {
        > .node-btn {
         opacity: 0;
             
            &:hover {
             opacity: 1;
                transition: all 0.3s;
            }
        }
        > .node-head {
         > .node-text, > .node-text:focus {
             text-align: center;
                background-color: var(--info) !important;
                font-size: 24px;
                color: #fff;
                margin-left: 14px;
                margin-right: 0px;
                border-top-right-radius: 5px;
                border-top-left-radius: 5px;
             	  padding-left: 20px;/*修复客户端BUG*/
                 
            }
        }
        > .node-child {
            display: flex;
            flex-wrap: wrap;
            border: 1px solid var(--table-border);
            padding-left: 0px;
             
         > .node:first-child {
                flex-shrink: 0;
                min-width: 150px;
             flex-basis: 25%;
                border-right: 1px solid var(--table-border);
                 
                > .node-btn {
                 display: none;
                }
            }
             
            > .node {
                  
                 
                > .node-head {
                 > .node-text {
                     margin-left: 0px;
                        padding-left: 25px;
                        color: var(--info);
                        font-weight: 800;
                    }
                }
                 
                > .node-child { 
                 border: none !important;
                    padding-left: 0px;
                }
            }
             
            > .node:nth-child(2) {
             flex-grow: 1;
             max-width:75%;
            }
             
            > .node:last-child {
             flex-basis: 100%;
                border-top: 1px solid var(--table-border);
                 
                > .node-btn {
                 display: none;
                }
            }
        }
    }

    这个可以用于客户端,网页就不清楚了

  • Jasleen 1月前
    0 10
    这个在v2还能用嘛
返回