Moderator menu testing

by enagu

HTML

<div id="container-chat-moderator-menu">
  <div id="chat-moderator-menu">
      <span class="close-button">x</span>
  <!--     <div>un-timeout</div> -->    
      <div class="mod-timeout">        
          <span>timeout</span>
          <div class="container-timeout-options">
            <div data-timeout="60" class="timout-time mod-option-selectable">
                1m
            </div>
            <div data-timeout="300" class="timout-time mod-option-selectable">
                5m
            </div>
            <div data-timeout="600" class="timout-time mod-option-selectable">
                10m
            </div>
            <div data-timeout="1800" class="timout-time mod-option-selectable">
                30m
            </div>
          </div>
      </div>
      <div data-unban="true" class="mod-option-selectable">un-ban</div>
      <div data-deletemessage="true" class="mod-option-selectable">delete message</div>
      <div data-ban="true" class="mod-option-selectable option-ban">ban</div>
  </div>
</div>

SCSS

html, body {
  background-color: black;
}

#container-chat-moderator-menu {
  z-index: 9999999;
    position: absolute;
    top: 18px;
    //right: 0; /* Horizontal position will be setter dinamically*/
    background-color: #18181b;
    padding: 0.2rem;
    /* border: 1px #fff solid; */
    text-align: center;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    color: #fff;
    border-radius: 3px;
    
    .close-button {
      position: absolute;
      top: 0;
      right: 0;
      font-size: small;
      font-weight: bolder;
      color: #f00;
      background-color: #0000007d;
      padding: 0 0.2rem;
      cursor: pointer;
    }

  .mod-timeout {
      display: flex;
      flex-direction: column;

      span {
        margin-right: 0.5rem;
      }

      .container-timeout-options {
       display: flex;
       flex-direction: row;

       .timout-time {
          margin-right: 0.5rem !important;
          border: 0 !important;
          padding: 0 0.2rem;
          border-radius: 3px;
          text-transform: none;
          
          &:hover {
            background-color: #a7bdf1e0;
            color: black;
          }
         }
       }
  }
  
  .mod-option-selectable {
      cursor: pointer;
  }
  
  .mod-option-selectable:hover {
      background-color: #1d4a71f7;
  }

  .option-ban.mod-option-selectable:hover {
    background-color: #7b1717;
  }
}

#chat-moderator-menu > div {
    border-bottom: 0.1rem solid #070708;
    padding: 0.2rem 0;
    border-radius: 3px;
}