/* ===========================================
 .> 1.   定义主体section部分:划分区域为四分 
===============================================*/

#linker{     
     /* background-color: #faf3f3; */
     display: grid;  /* 把section盒子设为网格布局容器 */
     grid-template-rows:180px 88px auto 1fr ; /* 在设置行高不等的情况下,用分项设置法 */
}

/* =================================================
2. 指定区域
2-1. 180px不指定
2-2. 88px指定给 .fixed-nav
2-3. auto指定给 .custom-nav
===================================================*/
#linker .null-lines{
    grid-row: 1/2;
}


#linker .fixeder-nav{
    grid-row: 2/3;
}

#linker .custom-nav{
    grid-row: 3/4;
}

#linker .free-lines{
    grid-row: 4/5;
}

/* =============================================
.> 3. 固定链接盒fixed-nav
=================================================*/
#linker .fixeder-nav{
    overflow:hidden;
    transition: overflow 2s ease-out;
  }




#linker .fixeder-nav.active{
    overflow: initial;
    z-index: 9;
  }

#linker .fixeder-nav .nav-box .nav-ul.active {
   
    background-color: black;
 }


 


 
#linker .fixeder-nav .nav-box .nav-ul{
    align-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-inline-start: 8px;
    padding-inline-end: 45px;
    background-color: rgba(12, 12, 12, 0.3);
    /* backdrop-filter:blur(10%); */  /* 毛玻璃效果 */

    
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
    /* gap: 10px; */
    width: 100%;


    position: relative;
    flex-wrap: wrap;
    /* flex-direction: row; */
    /* align-content: space-between; */
  }



 #linker .fixeder-nav .nav-box .nav-ul li{
    height: 36px;
    line-height: 36px;
    flex-grow: 1;
    flex-shrink: 1;
    text-align: center;   /* 不让居中 */
}


/* =============================================
.> 媒体查询media,定义在不同屏幕宽度下的不同样式
================================================*/

 @media (min-width:1568px){

     #linker .fixeder-nav .nav-box .nav-ul li{
        width: 10%;
        flex-basis: 10%;              
     }

     #linker .custom-nav .customBoxOut{
        grid-template-columns:repeat(12, auto);
     }
 }
 
 @media (min-width:1256px) and (max-width:1567px){

     #linker .fixeder-nav .nav-box .nav-ul li{
        flex-basis: 11%;   
        width: calc(100%/9);      
     }

    #linker .custom-nav .customBoxOut{
        grid-template-columns:repeat(10, auto);
     }


}
    
    
@media (min-width:944px) and (max-width:1255px){
    #linker .fixeder-nav .nav-box .nav-ul li{
        flex-basis: 12%;
        width: calc(100%/8);
    }

    #linker .custom-nav .customBoxOut{
        grid-template-columns:repeat(8, auto);
     }
}

    
@media (min-width:632px) and (max-width:943px){
     #linker .fixeder-nav .nav-box .nav-ul li{
        flex-basis: 16%;
        width: calc(100%/7);  /* 这里必须设置宽度,不然会排列错乱 */            
    }

     #linker .custom-nav .customBoxOut{
        grid-template-columns:repeat(6, auto);
     }
}

 @media (min-width:300px) and (max-width:631px){
    #linker .fixeder-nav .nav-box .nav-ul li{
        flex-basis: 30%;
        width: calc(100%/6);
    }

     #linker .custom-nav .customBoxOut{
        grid-template-columns:repeat(4, auto);
     }
}

 @media (max-width:299px){
        #linker .fixeder-nav .nav-box .nav-ul li{
        flex-basis: 20%;
        width: calc(100%/3);
    }

     #linker .custom-nav .customBoxOut{
        grid-template-columns:repeat(2, auto);
     }

 }

 


/* ===========================================
>>>4. 网址链接标签a的处理
==============================================*/

    #linker .fixeder-nav .nav-box .nav-ul li a{
        height: 28px;
        width: 100%;
        margin: 4px;
        padding: 0 4px;
        line-height: 28px;
        color: #fff;
        display: flex;
        position: relative;
        border-radius: 5px;
        font-size: 14px;
        align-items: self-start;
     }

#linker .fixeder-nav .nav-box .nav-ul li a img {
    width: 20px;
    border-radius: 3px;
    align-self: center;
    margin: 0 8px 0 0;    
 }

#linker .fixeder-nav .nav-box .nav-ul li a span {
    display: inline-block;
    width: 50%;
    /* line-height: 28px; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align:start;
    
 }


/* ============================================
 => 5. 给ul同级的button和Span标签定位,在.nav-box下
 ============================================== */
 #linker .fixeder-nav .nav-box{
    position: relative;
 }



 #linker .fixeder-nav .nav-box button.control {
    width: 24px;
    height: 24px;
    border: 2px solid rgb(184, 197, 197); 
    border-radius: 50%;
    box-shadow:inset 0px 2px 6px 2px rgba(12, 12, 12, 0.8), 0px 2px 6px 2px rgba(12, 12, 12, 0.8);

    /* 盒子定位 */
    inset-inline-end: 15px; /* 等同于right */
    inset-block-start: 8px;  
    position: absolute;
}


#linker .fixeder-nav .nav-box span.redLable{
    border: 1px solid rgb(44, 43, 43);
    border-radius: 6px;
    color: rgb(168, 157, 157);
    margin: 8px;
    padding: 2px 4px;
    font-size: 12px;
 
    /* 盒子定位 */
    position: absolute;
    inset-block-start: 52px; /* 等同与top */
    inset-inline-end: 1px;    /* 等同于right */
 
}


/* =========================================================
.> 6 .添加快捷方式样式 #linker > div.custom-nav div.customBoxOut div.addBtn  a  span.siteAdd
============================================================== */
#linker .custom-nav{
    width: 100%; 
    margin-block-start: 58px; 

}

/* #linker .custom-nav .customBoxOut{ */
.customBoxOut{
    /* width: 100%; */
      
    /* display: grid;
    justify-content: center;
    align-content: center;
    row-gap: 20px;
    column-gap: 20px;

    /* position: relative; */

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px; /* 设置子元素间距 */
    justify-content: center;
    align-items: center;
    margin: 0 auto;

    
}

/* #linker .custom-nav .customBoxOut .addBtn{ */
.addBtn{
    width: 76px;
    height: 112px;
    /* transform: translateX(50%); */
    display: grid;

 }

 .aLink{
     
    display: flex;
    height: 76px;
    background-color: rgba(28, 83, 85, .5);
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    position: relative;

}

 .addClick {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    background-color: #c59090;
    border-radius: 8px;
  }

 
/* #linker .custom-nav .customBoxOut .aLink .menu { */
.menu {
     width: 20px; /* 建议稍微大一点，10px 太小容易点不准 */
    height: 20px;
    position: absolute;
    inset-block-start: 3px;
    inset-inline-end: 2px;

    display: flex; /* 用flex居中文字或图标更优雅 */
    align-items: center;
    justify-content: center;

    opacity: 0; /* 默认完全透明 */
    visibility: hidden;  /* 隐藏且不可点击 */
    transition: opacity 0.2s ease; /* 加个过渡动画,体验更好 */
    cursor: pointer;
    z-index:9;    
}


.addBtn:hover .menu {
    opacity: 1;
    visibility: visible;
}
 
.siteAdd{
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}