Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- user-select: none;
- font-family: 'Poppins', sans-serif;
- }
- body{
- background: #18191A;
- overflow: hidden;
- }
- nav{
- position: absolute;
- top: 30%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- nav .drop-btn{
- width: 400px;
- background: #242526;
- border-radius: 5px;
- line-height: 55px;
- font-size: 20px;
- font-weight: 500;
- color: #b0b3b8;
- padding: 0 20px;
- }
- nav .drop-btn span{
- float: right;
- line-height: 50px;
- font-size: 28px;
- cursor: pointer;
- }
- nav .tooltip{
- position: absolute;
- right: 20px;
- bottom: -20px;
- height: 15px;
- width: 15px;
- background: #242526;;
- transform: rotate(45deg);
- display: none;
- }
- nav .tooltip.show{
- display: block;
- }
- nav .wrapper{
- position: absolute;
- top: 65px;
- display: flex;
- width: 400px;
- overflow: hidden;
- border-radius: 5px;
- background: #242526;
- display: none;
- transition: all 0.3s ease;
- }
- nav .wrapper.show{
- display: block;
- display: flex;
- }
- .wrapper ul{
- width: 400px;
- list-style: none;
- padding: 10px;
- transition: all 0.3s ease;
- }
- .wrapper ul li{
- line-height: 55px;
- }
- .wrapper ul li a{
- position: relative;
- color: #b0b3b8;
- font-size: 18px;
- font-weight: 500;
- padding: 0 10px;
- display: flex;
- border-radius: 8px;
- align-items: center;
- text-decoration: none;
- }
- .wrapper ul li:hover a{
- background: #3A3B3C;
- }
- ul li a .icon{
- height: 40px;
- width: 40px;
- margin-right: 13px;
- background: #ffffff1a;
- display: flex;
- justify-content: center;
- text-align: center;
- border-radius: 50%;
- }
- ul li a .icon span{
- line-height: 40px;
- font-size: 20px;
- color: #b0b3b8;
- }
- ul li a i{
- position: absolute;
- right: 10px;
- font-size: 25px;
- pointer-events: none;
- }
- .wrapper ul.setting-drop,
- .wrapper ul.help-drop{
- display: none;
- }
- .wrapper .arrow{
- padding-left: 10px;
- font-size: 20px;
- font-weight: 500;
- color: #b0b3b8;
- cursor: pointer;
- }
- .wrapper .arrow span{
- margin-right: 15px;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement