Template:Home/Sidebar/styles.css

/* ========= Sidebar ========= */
.gtw-sidebar{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

.gtw-panel{
  width:100%;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  padding:14px;
  text-align:center;
  margin:0;
}

.gtw-panel__title{
  font-weight:900;
  font-size:1.05rem;
  line-height:1.2;
  margin:0 0 6px 0;
}

.gtw-panel__desc{
  opacity:.85;
  line-height:1.35;
  margin:0 0 12px 0;
}

.gtw-actions{
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:center;
}

.gtw-panel-seperator{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:6px 0;
  opacity:.85;
  max-width:340px;
}

.gtw-panel-seperator__line{
  flex:1;
  height:1px;
  background:rgba(255,255,255,0.12);
}

.gtw-panel-seperator__label{
  font-weight:900;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

.gtw-button{
  position:relative;
  width:100%;
  max-width:340px;
  border-radius:14px;
  padding:10px 12px;
  background:rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.12);
}

.gtw-button > a{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  z-index:3;
  font-size:0;
  color:transparent;
  text-decoration:none;
}

.gtw-button:hover{
  background:rgba(0,0,0,0.26);
  border-color:rgba(255,255,255,0.18);
}

.gtw-button__inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-height:32px;
  padding-left:44px;
  padding-right:44px;
}

.gtw-button__icon img,
.gtw-button__icon-pixelated img,
.gtw-donate-note__icon img{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  line-height:0;
}

.gtw-button__icon-pixelated{
  image-rendering:pixelated;
}

.gtw-button__label{
  font-weight:900;
  line-height:1.15;
  text-align:center;
  white-space:normal;
  margin:0 auto;
}

.gtw-button--discord{
  background:rgba(88,101,242,0.95);
  border-color:rgba(88,101,242,0.65);
}

.gtw-button--discord:hover{
  background:rgba(88,101,242,0.80);
  border-color:rgba(88,101,242,0.85);
}

.gtw-button--site{
  background:rgba(90,167,255,0.95);
  border-color:rgba(90,167,255,0.65);
}

.gtw-button--site:hover{
  background:rgba(90,167,255,0.80);
  border-color:rgba(90,167,255,0.85);
}

.gtw-button--contribute{
  background:rgba(107,199,113,1);
  border-color:rgba(255,255,255,0.22);
}

.gtw-button--contribute:hover{
  background:rgba(107,199,113,0.80);
  border-color:rgba(255,255,255,0.26);
}

/* Donate note */
.gtw-donate-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  max-width:340px;
  margin-top:2px;
  opacity:.88;
  line-height:1.35;
  flex-wrap:wrap;
}

.gtw-donate-note__icon img{
  width:20px;
  height:20px;
}

.gtw-donate-note__text{
  font-size:.92rem;
}

.gtw-donate-note__code{
  display:inline-block;
  padding:2px 7px;
  margin:0 2px;
  border-radius:8px;
  background:rgba(255,255,255,0.08);
  border:1px dashed rgba(255,255,255,0.18);
  font-weight:900;
  letter-spacing:.08em;
}

.gtw-stats{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:center;
}

.gtw-stat{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:8px;
  width:calc(50% - 5px);
  min-width:160px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.12);
}

.gtw-stat__number{
  font-weight:900;
  font-size:1.05rem;
  line-height:1;
}

.gtw-stat__label{
  opacity:.82;
  font-weight:800;
  white-space:nowrap;
}