Guild Members

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_member_row'>
        <div class='guild_member_bar_rank'>Leader</div>
        <div class='guild_member_bar'>
          Jeremy Michaels
        </div>
      </div>
      <div class='guild_member_row'>
        <div class='guild_member_bar_rank offline'>Leader</div>
        <div class='guild_member_bar offline'>Jeremy Michaels</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_editor_section_input {
  margin-left: 6px;
  margin-bottom: 6px;
  min-height: 14px;
  resize: vertical;
  width: 95%;
  outline: none;
  background-color: #bbb;
  border-width: 2px;
  border-style: outset;
  border-color: #999;
  transition: border-color .2s ease-in-out;
  border-radius: 5px;
}

.guild_editor_section_input:focus {
  border-color: #ffbe00;
}

.guild_editor_large_input {
  color: #000;
}

#guild_rank_container {
  width: 50%;
}



.guild_member_bar_rank {
  display: inline-block;
  width: 15%;
  outline: none;
  padding: 0px 7px 2px 4px;
  background-color: #bbb;
  border-width: 2px;
  border-style: outset;
  border-color: #999;
  transition: border-color 0.2s ease-in-out;
  border-radius: 5px;
  text-align: center;
  user-select: none;
}
.guild_member_bar_rank.offline {
  background-color: #888;
}

.guild_member_bar {
  display: inline-block;
  width: 75%;
  outline: none;
  padding: 0px 7px 2px 4px;
  background-color: #bbb;
  border-width: 2px;
  border-style: outset;
  border-color: #999;
  transition: border-color 0.2s ease-in-out;
  border-radius: 5px;
  user-select: none;
}
.guild_member_bar.offline {
  background-color: #888;
}

.guild_member_bar_button {
  width: 32px;
  height: 16px;
  vertical-align: bottom;
  outline: none;
  background-color: #999;
  border-width: 2px;
  border-style: outset;
  border-color: #777;
  transition: border-color .2s ease-in-out;
  border-radius: 5px;
}