Guild Ranks

by roomyrooms

HTML

<div id='guild_editor_container'>
  
  <div id='guild_editor_scroll'>
      
      <span class='guild_editor_section_text'>
        Members
      </span>
      <br>
      <div class='guild_rank_name'>1.<input type='text' class='guild_rank_name_input' placeholder='Leader'></div>
      <div class='guild_rank_permissions'>
         
        <div class='guild_rank_permission'>
          <input type='checkbox' class='guild_rank_permission_box'>
          <div class='guild_rank_permission_desc'>Change Rank Permissions</div>
        </div>
        <div class='guild_rank_permission'>
          <input type='checkbox' class='guild_rank_permission_box'>
          <div class='guild_rank_permission_desc'>Promote Members</div>
        </div>
        <div class='guild_rank_permission'>
          <input type='checkbox' class='guild_rank_permission_box'>
          <div class='guild_rank_permission_desc'>Demote Members</div>
        </div>
        <div class='guild_rank_permission'>
          <input type='checkbox' class='guild_rank_permission_box'>
          <div class='guild_rank_permission_desc'>Kick Members</div>
        </div>
        <div class='guild_rank_permission'>
          <input type='checkbox' class='guild_rank_permission_box'>
          <div class='guild_rank_permission_desc'>Add Members</div>
        </div>
        <div class='guild_rank_permission'>
          <input type='checkbox' class='guild_rank_permission_box'>
          <div class='guild_rank_permission_desc'>Demote Members</div>
        </div>

      </div>
        
  </div>  
      
</div>

CSS

#guild_editor_container {
  width: 60%;
  font-family: Constantia;
}

#guild_editor_scroll {
  min-height: 300px;
  border: 10px solid;
  border-image: url(https://i.gyazo.com/34a29fe2749b507b0ab6e8358baaf798.png) 10 round;
  background: #191919;
  border-radius: 5px;
  padding-left: 2px;
}

.guild_editor_section_pretext {
  color: #ddd;
  font-size: 16px;
  text-shadow: 1px 1px #333;
}

.guild_editor_section_text {
  color: #ddd;
  text-shadow: 1px 1px #333;
}

.guild_rank_name {
  font-size: 16px;
  color: #eee;
  text-shadow: 1px 1px #333;
  text-decoration: underline;
  padding-left: 8px;
}
.guild_rank_name_input {
  background: none;
  outline: none;
  border: none;
  color: #eee;
  text-shadow: 1px 1px #333;
  text-decoration: underline;
  font-family: Constantia;
  user-select: text;
}
.guild_rank_name_input:hover {
  background-color: #444;
  border: 1px solid #555;
  border-radius: 5px;
  margin: 0px;
  margin-left: -1px;
}
.guild_rank_name_input:focus {
  background-color: #333;
  border: 1px solid #555;
  border-radius: 5px;
  margin: 0px;
  margin-left: -1px;
}
.guild_rank_name_input::placeholder {
  font-size: 16px;
  color: #eee;
  text-shadow: 1px 1px #333;
  text-decoration: underline;
}

.guild_rank_permissions {
  width: 95%;
  margin-left: 5px;
}

.guild_rank_permission {
  display: inline-block;
  min-width: 15%;
  background-color: #333;
  padding-left: 4px;
  padding-right: 4px;
  margin-top: 3px;
  border: 1px solid #555;
  border-radius: 5px;
}

.guild_rank_permission_box {
  margin: 0px;
  width: 14px;
  height: 14px;
  float: left;
  margin-top: 3px;
  margin-right: 3px;
  cursor: pointer;
}

.guild_rank_permission_desc {
  font-size: 15px;
  margin-left: -2px;
  margin-top: -2px;
  text-align: left;
  text-decoration: underline;
  padding: 2px;
  display: inline-block;
  cursor: pointer;
  color: #ddd;
}
.guild_rank_permission_desc:hover {
  text-decoration: none;
  color: #fff;
}