主控台收縮.css

/*==========主控台收縮==========*/
/*隱藏頁尾*/
footer.clearfix {
    width: 0px !important; 
    height: 0px !important; 
    overflow: hidden !important;
}
/*徽章調整*/
.award_bar {margin: 0 !important; padding: 0 !important;}
.dash-segment-award .segment-content 
{padding-top: 0 !important; padding-bottom: 0 !important;}
#dash-award .link_arrow {
    width: 100px !important;
    color: rgba(0,0,0,0) !important; 
    margin: 0 !important; 
    padding: 0 !important;
}
/*主控台下內距隱藏*/
#dashboard_holder 
{
    height: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/**主控台左側**/
/*調整原本背景*/
.dash-segment-profile .segment-content {background: none; padding: 0;}
/*調整頭像暱稱區與自介區背景*/
#dash-profile,
#dash-additional-info
{
    background: rgba(34,34,34,0.9); /*背景顏色，請依照你想要的色碼填入*/
    border-radius: 10px;
    padding: 10px !important;
}
#dash-profile {margin-left: 96px;}
.profile-pic {margin: -10px 0 0 -106px;}
#full_name, .profile-info {margin-left: 0px !important; margin-bottom: 10px;}
/*左側寬度*/
.dash-group-left {
    width: 86px !important; /*寬度*/
    top: 42px !important; /*上方距離*/
    left: 10px !important; /*左方距離*/
    position: fixed !important;
    z-index: 999;
}
/*漸變*/
.dash-segment-profile /*主控台左側-常態*/
{
    width: 86px !important; /*寬度*/
    height: 96px !important; /*高度*/
    opacity: 0.5 !important; /*透明度*/
    overflow: hidden !important; /*超出部分(隱藏)*/
    transition: width 0.1s ease-out 1s, height 1s ease-out, opacity 1s ease-out;
    /*漸變-寬度 總時間0.1秒 漸漸變慢 延遲1秒，高度 總時間1秒 漸漸變慢，透明度  總時間1秒 漸漸變慢*/
}
.dash-segment-profile:hover /*主控台左側-滑鼠移至*/
{
    width: 300px !important; /*寬度*/
    height: 350px !important; /*高度*/
    opacity: 1 !important; /*透明度*/
    transition: width 0.1s ease-in, height 1s ease-in 0.1s;
    /*漸變-寬度 總時間0.1秒 漸漸變快，高度 總時間1秒 漸漸變快 延遲0.1秒*/
}

/**主控台右側**/
/*左右收縮*/
.dash-group-right /*常態*/
{
    width: 335px !important; /*寬度*/
    top: 138px !important; /*上方距離*/
    left: -325px !important; /*左方距離*/
    transition: left 1s ease-out 0.5s; /*漸變-左方距離 總時間1秒 漸漸變慢 延遲0.5秒*/
    position: fixed !important; 
    z-index: 900;
}
.dash-group-right:hover /*滑鼠移至*/
{
    left: 10px !important; /*左方距離*/
    transition: left 1s ease-out; /*漸變-左方距離 總時間1秒 漸漸變快*/
}
.dash-segment-fans {clear: left !important;} /*清除左方浮動*/
.dash-stats-karma {width: auto !important;} /*卡馬區寬度調整*/
.dash-segment-stats .segment-content {border-radius: 10px 10px 0 0;} /*統計區圓角*/
.dash-segment-friends .segment-content {border-radius: 0;} /*朋友區圓角*/
.dash-segment-fans .segment-content {border-radius: 0 0 10px 10px;} /*粉絲區圓角*/
/*朋友區、粉絲區上外邊界清除*/
.dash-segment-friends .segment-content, 
.dash-segment-fans .segment-content {margin-top: 0px;}
/*統計區、朋友區、粉絲區、徽章區寬度*/
.dash-segment-stats .segment-content,
.dash-segment-friends .segment-content,
.dash-segment-fans .segment-content,
.dash-segment-award .segment-content
{
    width: 335px !important;
    padding: 10px;
}
/*漸變*/
#dash-stats /*統計區-常態*/
{
    height: 75px !important; /*高度*/
    overflow: hidden !important; /*超出部分(隱藏)*/
    transition: height 1s ease-out; /*漸變-高度 總時間1秒 漸漸變慢*/
}
#dash-stats:hover /*統計區-滑鼠移至*/
{
    height: 225px !important; /*高度*/
    transition: height 1s ease-in; /*漸變-高度 總時間1秒 漸漸變快*/
}
#dash-friends, #dash-fans /*朋友區、粉絲區-常態*/
{
    height: 20px !important; /*高度*/
    overflow: hidden !important; /*超出部分(隱藏)*/
    transition: height 1s ease-out; /*漸變-高度 總時間1秒 漸漸變慢*/
}
#dash-friends:hover, #dash-fans:hover /*朋友區、粉絲區-滑鼠移至*/
{
    height: 135px !important; /*高度*/
    transition: height 1s ease-in; /*漸變-高度 總時間1秒 漸漸變快*/
}