/* NexiaOTS - Self-hosted Discord widget (based on Dipped plugin) */
/* This CSS is meant ONLY for the <discord-widget> component */

discord-widget{
  display:block;
  width:250px;
  height:490px;
  box-sizing:border-box;
  border-radius:9px;
  overflow:hidden;
  font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
  --color:#d8b24a;
  --bgColor:#0b1623;
  --textColor:#e9f0fb;
  --buttonColor:var(--color);
  --buttonHoverColor:#caa23f;
  --statusColor:#8fbf7a;
}

/* layout */
discord-widget widget-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:54px;
  padding:0 12px;
  background:var(--color);
  color:#fff;
  box-sizing:border-box;
  border-radius:9px 9px 0 0;
}

discord-widget widget-logo{
  width:28px;
  height:28px;
  display:block;
  background: #fff;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.73 4.37A18.2 18.2 0 0 0 15.5 3a13.3 13.3 0 0 0-.63 1.3a17.3 17.3 0 0 0-5.74 0A13.3 13.3 0 0 0 8.5 3a18.2 18.2 0 0 0-4.23 1.37C1.7 8.15 1 11.8 1.28 15.4A18.4 18.4 0 0 0 6.2 18a13.7 13.7 0 0 0 1.06-1.73a11.9 11.9 0 0 1-1.67-.8c.14-.1.27-.22.4-.33a13.1 13.1 0 0 0 12.02 0c.13.11.26.23.4.33c-.54.33-1.1.6-1.67.8A13.7 13.7 0 0 0 17.8 18a18.4 18.4 0 0 0 4.92-2.6c.35-4.33-.6-7.95-2.99-11.03ZM8.5 14.4c-1 0-1.82-.93-1.82-2.08c0-1.16.8-2.09 1.82-2.09c1 0 1.83.93 1.83 2.09c0 1.15-.82 2.08-1.83 2.08Zm7 0c-1 0-1.82-.93-1.82-2.08c0-1.16.8-2.09 1.82-2.09c1 0 1.83.93 1.83 2.09c0 1.15-.82 2.08-1.83 2.08Z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.73 4.37A18.2 18.2 0 0 0 15.5 3a13.3 13.3 0 0 0-.63 1.3a17.3 17.3 0 0 0-5.74 0A13.3 13.3 0 0 0 8.5 3a18.2 18.2 0 0 0-4.23 1.37C1.7 8.15 1 11.8 1.28 15.4A18.4 18.4 0 0 0 6.2 18a13.7 13.7 0 0 0 1.06-1.73a11.9 11.9 0 0 1-1.67-.8c.14-.1.27-.22.4-.33a13.1 13.1 0 0 0 12.02 0c.13.11.26.23.4.33c-.54.33-1.1.6-1.67.8A13.7 13.7 0 0 0 17.8 18a18.4 18.4 0 0 0 4.92-2.6c.35-4.33-.6-7.95-2.99-11.03ZM8.5 14.4c-1 0-1.82-.93-1.82-2.08c0-1.16.8-2.09 1.82-2.09c1 0 1.83.93 1.83 2.09c0 1.15-.82 2.08-1.83 2.08Zm7 0c-1 0-1.82-.93-1.82-2.08c0-1.16.8-2.09 1.82-2.09c1 0 1.83.93 1.83 2.09c0 1.15-.82 2.08-1.83 2.08Z"/></svg>') center/contain no-repeat;
}

discord-widget widget-header-count{
  font-size:12px;
  font-weight:800;
  line-height:1.1;
  text-align:right;
  opacity:.95;
}

/* body list */
discord-widget widget-body{
  display:block;
  height:calc(100% - 54px - 56px);
  background:var(--bgColor);
  color:var(--textColor);
  overflow:auto;
  padding:10px 10px 12px;
  box-sizing:border-box;
}

discord-widget widget-member{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 6px;
  border-radius:8px;
}

discord-widget widget-member:hover{
  background: rgba(255,255,255,.05);
}

discord-widget widget-member-avatar{
  position:relative;
  width:34px;
  height:34px;
  flex:0 0 34px;
}

discord-widget widget-member-avatar img{
  width:34px;
  height:34px;
  border-radius:999px;
  display:block;
}

discord-widget .widget-member-status{
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:10px;
  height:10px;
  border-radius:999px;
  border:2px solid var(--bgColor);
  background:var(--statusColor);
}

discord-widget widget-member-name{
  font-weight:800;
  font-size:13px;
  flex:1;
}

discord-widget widget-member-status-text{
  font-size:11px;
  opacity:.8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:120px;
}

/* footer */
discord-widget widget-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  height:56px;
  padding:0 10px;
  box-sizing:border-box;
  background:var(--bgColor);
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--textColor);
  border-radius:0 0 9px 9px;
}

discord-widget widget-footer-info{
  font-size:12px;
  opacity:.9;
}

discord-widget widget-button-join{
  background:var(--buttonColor);
  color:#101827;
  font-weight:900;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  user-select:none;
  min-width:96px;
  text-align:center;
}

discord-widget widget-button-join:hover{
  filter:brightness(1.05);
  background:var(--buttonHoverColor);
}