@charset "UTF-8";
/*
 * @Author: alan.cheng alan.cheng@ilinke.com
 * @Date: 2022-11-21 14:29:19
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-07-06 15:34:36
 * @FilePath: /webapp/static/styles/topbar.scss
 * @Description: 網站 Topbar
 */
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 1050;
  backdrop-filter: blur(44px);
  background-color: #141A20;
}
#topbar .content {
  width: calc(100% - 80px);
  margin: 0 auto;
  height: 80px;
  display: flex;
  align-items: center;
}
#topbar .content .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
#topbar .content .logo img {
  width: 130px;
}
#topbar .content ul.nav {
  display: inline-flex;
  flex: 1;
  padding: 0 20px;
  margin: 0;
}
#topbar .content ul.nav li a {
  display: inline-flex;
  align-items: center;
  color: #B7B7B7;
  padding: 0 20px;
  font-size: 18px;
  height: 80px;
}
#topbar .content ul.nav li:hover a {
  color: #FFF;
}
#topbar .content ul.nav li.active a {
  color: #FFF;
}
#topbar .content .ipbelong {
  color: #b7b7b7;
  font-size: 14px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 必须的属性 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出内容 */
  text-overflow: ellipsis; /* 超出显示省略号 */
}
#topbar .content .van-search {
  background-color: transparent;
}
#topbar .content .van-search .van-search__content {
  background-color: transparent;
  border: 1px solid #9D9EA0;
}
#topbar .content .van-search .van-search__content input {
  color: #FFF;
}
#topbar .content .mobile-search-icon {
  display: none;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 16px;
  color: #FFF;
  font-size: 20px;
  margin: 0 0 0 auto;
}
#topbar .content .login-action-bar {
  font-size: 16px;
  color: #FFF;
  height: 100%;
  display: inline-flex;
  align-items: center;
}
#topbar .content .member-info {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
}
#topbar .content .member-info .avatar {
  position: relative;
  background-color: transparent;
  color: #9D9EA0;
  font-size: 44px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  #topbar .content .member-info .avatar:hover {
    border: 2px solid #FFF;
  }
}
#topbar .content .member-info.mobile {
  display: none;
}
@media (max-width: 1023px) {
  #topbar .ipbelong {
    display: none;
  }
}
@media (max-width: 767px) {
  #topbar {
    height: 50px;
  }
  #topbar .content {
    width: calc(100% - 40px);
    height: 50px;
  }
  #topbar .content .logo {
    font-size: 18px;
  }
  #topbar .content ul.nav {
    display: none;
  }
  #topbar .content .ipbelong {
    display: none;
  }
  #topbar .content .van-search {
    display: none;
  }
  #topbar .content .mobile-search-icon {
    display: inline-flex;
  }
  #topbar .content .login-action-bar {
    font-size: 14px;
    justify-content: flex-end;
  }
  #topbar .content .member-info {
    display: none;
  }
  #topbar .content .member-info.mobile {
    padding: 0;
    display: inline-flex;
  }
  #topbar .content .member-info.mobile .avatar {
    font-size: 30px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
  }
  #topbar .content .van-popover__wrapper {
    display: none;
  }
  #topbar .content .mobile-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.van-popover.topbar-member-dropdown-container {
  background-color: rgba(9, 16, 25, 0.7);
  border: 1px solid #707070;
  border-radius: 10px;
  width: 300px;
  transform-origin: 100% 0;
}
.van-popover.topbar-member-dropdown-container .van-popover__arrow {
  left: calc(100% - 58px);
  border-bottom-color: rgba(9, 16, 25, 0.7);
}
.van-popover.topbar-member-dropdown-container .van-popover__content {
  background-color: transparent;
}

.member-dropdown-content {
  display: none;
  flex-direction: column;
}
.member-dropdown-content .member-dropdown-info {
  padding: 20px;
  display: flex;
}
.member-dropdown-content .member-dropdown-info .avatar {
  width: 70px;
  min-width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: transparent;
  color: #9D9EA0;
  font-size: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.member-dropdown-content .member-dropdown-info .meta-info {
  flex: 1;
  margin: 0 0 0 20px;
}
.member-dropdown-content .member-dropdown-info .meta-info .meta-name {
  line-height: 1.4em;
  font-size: 20px;
  color: #e3e3e3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
}
.member-dropdown-content .member-dropdown-info .meta-info .meta-orig {
  line-height: 1.4em;
  font-size: 14px;
  color: #848586;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 2px 0 0;
}
.member-dropdown-content .member-dropdown-info .meta-info .meta-setting {
  line-height: 1.4em;
  font-size: 13px;
  color: #c4c4c4;
  text-decoration: underline;
  margin: 10px 0 0;
}
.member-dropdown-content .logout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  border-top: 1px solid #707070;
  background-color: rgba(112, 112, 112, 0.1);
  font-size: 15px;
  font-weight: bold;
  padding: 0 24px;
  color: #FFF;
  cursor: pointer;
}
.member-dropdown-content.show {
  display: flex;
}