$barHeight: 56px; /* drowdown and select default bgcolor */ $drowBgColor: #f2f2f2; /* drowdown and select hover bgcolor */ $drowHoverBgColor: #e2e2e2; .nav{ list-style: none; width: 95%; height: $barHeight; margin: 0 auto; position: relative; .tab{ font-family: 'Segoe'; line-height: $barHeight; a{ font-size: 18px; color: #b8c7ce; text-decoration: none; } } .firstTab{ margin: 0 20px; } .logo{ margin-top: 2px; max-width: 128px; } } .tab a:hover, .tab a.high{ color: white; border-bottom: 1px solid #fff; } .feedback{ position: fixed; right: 26%; line-height: $barHeight; font-size: 16px; color: #fff; a{ color: #fff; text-decoration: none; margin-left: 10px; } img{ width: 20px; margin-right: 8px; } .version{ margin-left: 16px; } } /* refresh button */ .fresh{ border: none; color: #fff; font-size: 16px; padding: 0; } .fresh:hover{ color: #fff; } .link li{ float: left; } .dropdown{ margin-right: 10px; /* make dropdown content box position in blue bar bottom */ padding-bottom: 14px; } .interval{ position: fixed; right: 6%; top: 12px; font-size: 16px; color: #fff; .ant-select-selection{ background-color: transparent; border: none; color: #fff; outline: none; font-size: 16px; } .ant-select-arrow{ color: #fff; } .ant-btn-ghost[disabled]{ background-color: transparent; color: #fff; } } /* set select bgcolor */ .ant-select-dropdown-menu{ background-color: $drowBgColor; } .ant-select-dropdown-menu-item:hover{ background-color: $drowHoverBgColor; } .ant-select-dropdown-menu-item-active{ background-color: transparent; } /* set dropdown bgcolor */ .ant-dropdown{ .ant-dropdown-menu{ padding: 0; background-color: $drowBgColor; border-radius: 0; .ant-dropdown-menu-item{ font-size: 16px; } .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu:hover{ background-color: $drowHoverBgColor; } } } .ant-dropdown-menu-sub{ padding: 0; background-color: $drowBgColor; border-radius: 0; .ant-dropdown-menu-item:hover{ background-color: $drowHoverBgColor; } } /* nav style*/ .little{ width: 90%; .menu{ margin-left: 33px; .more{ color: #fff; font-size: 24px; margin-top: 16px; } .more:hover{ cursor: pointer; } } .logo{ text-align: right; } } .menuModal{ width: 198px; }