lib.css

/* Copyright (c) 2021 Navid Mafi <navidmafi2006@gmail.com>
 Licensed under the GPLv3 Licence.
See the LICENCE file in the repository root for full licence text.
*/

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.flex {
  display: flex;
}
.fl-10 {
  flex : 10%;
}
.fl-20 {
  flex : 20%;
}
.fl-30 {
  flex : 30%;
}
.fl-40 {
  flex : 40%;
}
.fl-50 {
  flex : 50%;
}
.fl-60 {
  flex : 60%;
}
.fl-70 {
  flex : 70%;
}
.fl-80 {
  flex : 80%;
}
.fl-90 {
  flex : 90%;
}
.fl-100 {
  flex : 100%;
}

.flex-horizontal {
  display: flex;
  flex-direction: row;
}
.flex-vertical {
  display: flex;
  flex-direction: column;
}
.nospacing {
  margin: 0;
  padding: 0;
}
.flex-both-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-items-center {
  display: flex;
  align-items: center;
}
.flex-justify-center {
  display: flex;
  justify-content: center;
}

.fw-300 {
  font-weight: 300;
}
.fw-400 {
  font-weight: 400;
}
.fw-700 {
  font-weight: 700;
}
.brad-5 {
  border-radius: 5px;
}
.brad-10 {
  border-radius: 10px;
}
.brad-15 {
  border-radius: 15px;
}
.brad-20 {
  border-radius: 20px;
}
.brad-30 {
  border-radius: 30px;
}
.brad-half {
  border-radius: 50%;
}

.noborder {
  border: none;
}
.nooutline {
  outline: none;
}
.py-05r {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-1r {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-2r {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-3r {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-5r {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.px-05r {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
.px-1r {
  padding-right: 1rem;
  padding-left: 1rem;
}
.px-2r {
  padding-right: 2rem;
  padding-left: 2rem;
}
.px-3r {
  padding-right: 3rem;
  padding-left: 3rem;
}

.px-5r {
  padding-right: 5rem;
  padding-left: 5rem;
}

.my-05r {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-1r {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-2r {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.my-3r {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-5r {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.mx-05r {
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}
.mx-1r {
  margin-right: 1rem;
  margin-left: 1rem;
}
.mx-2r {
  margin-right: 2rem;
  margin-left: 2rem;
}
.mx-3r {
  margin-right: 3rem;
  margin-left: 3rem;
}

.mx-5r {
  margin-right: 5rem;
  margin-left: 5rem;
}
.mx-auto {
	margin: 0 auto;
}
.my-auto {
  margin: auto 0;
}
.mxy-auto {
  margin: auto auto;
}
.fs-01r {
  font-size: 0.1rem;
}
.fs-02r {
  font-size: 0.2rem;
}
.fs-03r {
  font-size: 0.3rem;
}
.fs-04r {
  font-size: 0.4rem;
}
.fs-05r {
  font-size: 0.5rem;
}
.fs-06r {
  font-size: 0.6rem;
}
.fs-07r {
  font-size: 0.7rem;
}
.fs-08r {
  font-size: 0.8rem;
}
.fs-09r {
  font-size: 0.9rem;
}
.fs-10r {
  font-size: 1rem;
}
.fs-11r {
  font-size: 1.1rem;
}
.fs-12r {
  font-size: 1.2rem;
}
.fs-13r {
  font-size: 1.3rem;
}
.fs-14r {
  font-size: 1.4rem;
}
.fs-15r {
  font-size: 1.5rem;
}
.fs-17r {
  font-size: 1.7rem;
}
.fs-20r {
  font-size: 2rem;
}

.fs-25r {
  font-size: 2.5rem;
}
.fs-30r {
  font-size: 3rem;
}
.fs-35r {
  font-size: 3.5rem;
}
.fs-40r {
  font-size: 4rem;
}
.fs-45r {
  font-size: 4.5rem;
}
.fs-50r {
  font-size: 5rem;
}
.trans-100 {
  transition: 100ms;
}
.trans-200 {
  transition: 200ms;
}
.trans-300 {
  transition: 200ms;
}
.wd-10pr {
  width: 10%;
}
.wd-20pr {
  width: 20%;
}
.wd-30pr {
  width: 30%;
}
.wd-40pr {
  width: 40%;
}
.wd-50pr {
  width: 50%;
}
.wd-60pr {
  width: 60%;
}
.wd-70pr {
  width: 70%;
}
.wd-80pr {
  width: 80%;
}
.wd-90pr {
  width: 90%;
}
.wd-100pr {
  width: 100%;
}

.wd-max-100 {
  max-width: 100%;
}

.hg-10pr {
  height: 10%;
}
.hg-20pr {
  height: 20%;
}
.hg-30pr {
  height: 30%;
}
.hg-40pr {
  height: 40%;
}
.hg-50pr {
  height: 50%;
}
.hg-60pr {
  height: 60%;
}
.hg-70pr {
  height: 70%;
}
.hg-80pr {
  height: 80%;
}
.hg-90pr {
  height: 90%;
}
.hg-95pr {
  height: 95%;
}
.hg-100pr {
  height: 100%;
}

.hg-1r {
  height: 1rem;
}
.hg-2r {
  height: 2rem;
}
.hg-3r {
  height: 3rem;
}
.hg-5r {
  height: 5rem;
}
.hg-10v {
  height: 10vh;
}
.hg-20v {
  height: 20vh;
}
.hg-30v {
  height: 30vh;
}
.hg-40v {
  height: 40vh;
}
.hg-50v {
  height: 50vh;
}
.hg-60v {
  height: 60vh;
}
.hg-70v {
  height: 70vh;
}
.hg-80v {
  height: 80vh;
}
.hg-90v {
  height: 90vh;
}
.hg-100v {
  height: 100vh;
}

.hidden {
  display: none;
  opacity: 0;
}
.hidden-important {
  display: none!important;
  opacity: 0!important;
}
.block {
  display: block;
}
.fst-it {
  font-style: italic;
}
.td-ul {
  text-decoration: underline;
}
.td-lt {
  text-decoration: line-through;
}
.td-wv {
  text-decoration: wavy;
}
.td-none {
  text-decoration: none;
}
.td-ol {
  text-decoration: overline;
}


.vertical-middle {
  vertical-align: middle;
}

.of-yc {
  overflow-y: scroll;
}

.of-yh {
  overflow-y: hidden;
}

.of-xs {
  overflow-x: scroll;
}

.of-xh {
  overflow-x: hidden;
}

.of-xa {
  overflow-x: auto;
}

.of-ya {
  overflow-y: auto;
}

/*Based on discord branding colors*/
.tc-red {
  color: #ED4245;
}
.tc-yellow {
  color: #FEE75C;
}
.tc-white {
  color: #FFFFFF;
}
.tc-lime {
  color : #57F287;
}
.tc-purple {
  color: #5865F2;
}
.tc-pink {
  color : #EB459E;
}
.tc-black {
  color : #000000;
}

.bg-none {
  background-color: transparent;
}
.bg-red {
  background-color: #ED4245;
}
.bg-yellow {
  background-color: #FEE75C;
}
.bg-white {
  background-color: #FFFFFF;
}
.bg-lime {
  background-color : #57F287;
}
.bg-purple {
  background-color: #5865F2;
}
.bg-pink {
  background-color : #EB459E;
}
.bg-black {
  background-color : #000000;
}