hexo-theme-wang/source/css/sidebar.styl

a hexo theme minimalism

.sidebar-container {
    position: fixed;
    top: 10%;
    z-index: 100;
    min-width: 300px; // 修正属性名 weight -> width

    // 实现平滑过渡效果
    transition: all 0.4s ease;
}

@media (max-width: 1624px) {
    .sidebar-container {
        display: none;
    }
}

.sidebar-left {
    left: 5%;
    right: 80%;
    text-align: center;

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .sidebar-bg {
        background: rgba(15, 15, 25, 0.2) // 轻微增加不透明度
        backdrop-filter: blur(15px)
        -webkit-backdrop-filter: blur(15px)
        border: 1px solid rgba(255, 255, 255, 0.12)
        border-radius: 16px // 墛大圆角
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) // 增强阴影效果
        text-align: center
        margin-bottom: 1.8rem
        padding: 1.2rem 1rem // 增加内边距
        transition: transform 0.3s ease, box-shadow 0.3s ease

        &:hover {
            transform: translateY(-5px)
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35)
        }
    }

    .avatar {
        margin: 0 auto 1rem
        transition: transform 0.3s ease

        &:hover {
            transform: scale(1.05)
        }
    }

    .icon {
        width: 32px
        opacity: 0.8
        transition: opacity 0.3s ease, transform 0.3s ease

        &:hover {
            opacity: 1
            transform: translateY(-3px)
        }
    }
}

.sidebar-right {
    right: 5%;
    left: 80%;

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    ol {
        list-style-type: none;
        padding: 0;
        margin-left: 16px;
    }

    .sidebar-bg {
        background: rgba(15, 15, 25, 0.2)
        backdrop-filter: blur(15px)
        -webkit-backdrop-filter: blur(15px)
        border: 1px solid rgba(255, 255, 255, 0.12)
        border-radius: 16px
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)
        margin-bottom: 1.8rem
        padding: 1.2rem 1rem
        transition: transform 0.3s ease, box-shadow 0.3s ease

        &:hover {
            transform: translateY(-5px)
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35)
        }

        a {
            color: #00ffff
            text-decoration: none
            transition: color 0.3s ease, text-shadow 0.3s ease

            &:hover {
                color: #7fffff
                text-shadow: 0 0 8px rgba(0, 255, 255, 0.5)
            }

            span {
                color: #00ffff
                margin-left: 5px
                transition: color 0.3s ease
            }
        }
    }

    .avatar {
        margin-right: auto;
        margin-left: auto;
    }

    #clock {
        text-align: center;
        margin:auto;
        font-size: 2em;
        color: #646464;
        font-family: 'Arial', sans-serif;
        z-index : 1000;
    }
    #date {
        text-align: center;
        margin:auto;
        font-size: 2.5em;
        color: #777777;
        font-family: 'Arial', sans-serif;
        z-index : 1000;
        margin-bottom: 32px;
    }

    .icon {
        width: 32px;
    }

    // 优化目录样式
    .toc {
        padding-left: 0.5rem
        overflow: auto
        max-height: 75vh  // Limit height to 75% of viewport height

        .toc-item {
            margin: 0.6rem 0
            transition: transform 0.2s ease

            &:hover {
                transform: translateX(3px)
            }
        }

        .toc-link {
            color: rgba(255, 255, 255, 0.7)
            text-decoration: none
            display: inline-block
            padding: 0.2rem 0
            transition: color 0.3s ease

            &:hover {
                color: rgba(0, 255, 255, 0.9)
            }
        }

        .toc-number {
            margin-right: 0.5rem
            color: rgba(0, 255, 255, 0.6)
        }

        .toc-child {
            padding-left: 1rem
            list-style-type: none
            border-left: 1px solid rgba(0, 255, 255, 0.15)
            margin: 0.5rem 0 0.5rem 0.5rem
        }
    }

    .card-tags {
        margin-top: 10px
        display: flex
        flex-wrap: wrap
        justify-content: center

        .tag {
            display: inline-block
            padding: 0.3rem 0.8rem
            margin: 0.3rem
            background: rgba(0, 255, 255, 0.1)
            border: 1px solid rgba(0, 255, 255, 0.2)
            border-radius: 20px
            font-size: 0.85em
            color: #00ffff
            text-decoration: none
            transition: all 0.3s ease

            &:hover {
                background: rgba(0, 255, 255, 0.2)
                transform: translateY(-3px)
                box-shadow: 0 3px 10px rgba(0, 255, 255, 0.2)
            }
        }
    }
}