Colorist Profile CSS

/* Custom CSS for Colorist */
/** v 3.0.1 **/

/** [ NOTES ]
*** - built and tested in FireFox 91 on Ubuntu
*** - arranged with mobile-readiness and smooth resizing in mind
*** - blue: rgb(50, 50, 190), purple: rgb(150, 50, 190), pink: rgb(190, 50, 50)
*** - if you want to add a block of bold text to your 'About Me' (like a header)
*** - - add a line of text at the top of your 'About Me' surrounded in [u][/u] tags
*** - and as such please avoid using the [u][/u] tag for any other text as it will
*** - - appear huge
*** - as always, please message me if something doesn't look right or if you'd like
*** - - something changed <3
*** - END OF LINE **/
/** -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  - **/

/* Custom Font */
/** latin **/
@font-face {
  font-family: "Petit Formal Script";
  src: url(https://fonts.gstatic.com/s/petitformalscript/v8/B50TF6xQr2TXJBnGOFME6u5OR83oRP5qkH7gPg.woff2) format("woff2");
}

/* Universal Selector */
* { box-sizing: border-box; }

/* General & All-Purpose Styling */
html, body { position: initial; }

#menu p, #avatarCollection, .bottom-halfDivider, #aboutMe h3 { display: none; }

body {
  margin: 0;
  background: linear-gradient(to bottom right, rgb(50, 50, 190), rgb(150, 50, 190) 50%, rgb(190, 50, 50)) no-repeat fixed;
}

@keyframes slidein {
  from { margin: -100% auto auto; opacity: 0; }
  to { margin: 5% auto; opacity: 1; }
}

/* Page Wrappers */
/** Outermost Wrapper **/
#page-content {
  width: 700px;
  margin: -100% auto auto;
  opacity: 0;
  padding: 0;
  border: 0;
  animation: slidein 2s ease 0.5s normal 1;
  animation-fill-mode: both;
}

/** Secondary Wrapper **/
#profileWrapper {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 auto;
}

/** Innermost Wrapper **/
#profileContainer {
  width: 100%;
  height: 100%;
  background: transparent;
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  margin: 0 auto;
  border-top: 0;
  border-bottom: 0;
  transition: all 0.3s linear;
}

/** Navbar **/
#menu {
  height: max-content;
  background: #111;
  font-family: Petit Formal Script;
  padding: 0;
  margin: 0 auto;
}

#menuNormal {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  padding: 5px 0;
}

#menuNormal li a {
  font-size: 12px;
  text-transform: lowercase;
  color: #AAA !important;
  font-weight: normal;
  transition: all 0.3s linear;
}

#menuNormal li a:hover {
  text-decoration: none !important;
  color: #CCC !important;
  text-shadow: 0 0 1px;
}

/** Top Half Container: Avatar, Bio, Actions **/
#top-halfContainer {
  height: fit-content;
  margin: 0;
  flex-flow: column;
  overflow: hidden;
}

/** Right Half: User Card (Actions) and 'About Me'... I moved it on the left c: **/
#rightHalf {
  order: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  flex-flow: row;
}

/** User Card (Actions) **/
#user-cardContainer {
  background: transparent;
  width: 100%;
  margin: 0% -100% 0% 0%;
  border: 0;
  border-radius: 0;
  height: 100%;
}

#user-card {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  flex-flow: column;
  background: transparent;
}

/** The area around your Username "Header" **/
#leftCard {
  width: 100%;
  background: #111;
}

/** Username "Header" **/
#leftCard p {
  color: #CCC !important;
  width: 100%;
  font: 62px Petit Formal Script;
  text-align: center;
  margin: 0;
  padding: 60px 0 0px;
}

/** Make the first letter purple **/
/** You can change this to any colour like #XXXXXX, rgb(xxx, xxx, xxx), or hsl(xxx, xxx, xxx) **/
#leftCard p:first-letter {
  color: rgb(150, 0, 190) !important;
}

/** Join Date, Last Post info etc... **/
#leftCard ul {
  display: inline-flex;
  width: 100%;
  margin: 0;
  padding: 0;
  align-items: baseline;
  justify-content: space-evenly;
}

#leftCard ul li {
  margin: 0;
  padding: 5px 0;
  font-size: 12px;
  color: #AAA;
  font-family: Petit Formal Script;
}

#leftCard ul li span {
  color: #CCC;
  font-family: Verdana;
  font-weight: normal;
}

#leftCard ul li a {
  color: #FFF;
  text-decoration: none;
  text-shadow: 0 0 2px;
}

/** User Actions: Add, Trade, Block etc... **/
#rightCard {
  width: 15%;
  height: 100%;
  margin: 0 auto auto 0;
  display: flex;
}

#buttons {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-shrink: unset !important;
  margin: 0% auto 0%;
  border-right: 1px solid #111;
}

#buttons li {
  border: 0;
  border-radius: 0;
  width: 100%;
  margin: 0;
  display: inline-flex;
  max-height: 100%;
  height: 20%;
  background: transparent;
}

#buttons li a {
  font-size: 0;
  padding: 18.1% 0;
  margin: 0;
  width: 100%;
  height: 100%;
  /*background: rgba(0, 0, 0, 0.5);*/
  transition: all 0.3s linear;
  display: block;
}

#buttons li:hover { background: transparent; }

#buttons li a:hover {
  background: transparent;
}

#buttons li a:after {
  font: 16px Verdana;
  margin: 0;
  color: #FFF;
}

#buttons li:nth-child(odd) a {
  /*background: rgba(190, 50, 50, 0.25);*/
  background: rgba(0, 0, 0, 0.5);
}

#buttons li:nth-child(even) a {
  /*background: rgba(150, 50, 190, 0.25);*/
  background: rgba(0, 0, 0, 0.3);
}

#buttons li:nth-child(3) a {
  /*background: rgba(50, 50, 190, 0.25);*/
  background: rgba(0, 0, 0, 0.1);
}

#buttons li:nth-child(1) a:after {
  content: "\1F589";
}

#buttons li:nth-child(2) a:after {
  content: "\2661";
}

#buttons li:nth-child(3) a:after {
  content: "\2253";
}

#buttons li:nth-child(4) a:after {
  content: "\00D7";
}

#buttons li:nth-child(5) a:after {
  content: "\2262";
}

#buttons li a:hover {
  background: rgba(0, 0, 0, 0.1);
}

/** 'About Me' Section **/
#aboutMe {
  background: rgba(0, 0, 0, 0.1);
  width: 55%;
  margin: 169px auto 0 15%;
  padding: 10px;
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.5);
}

#aboutMe p {
  font: 11px Verdana;
  color: #CCC;
}

#aboutMe u {
  width: 100%;
  display: inline-block;
  text-align: center;
  font: 20px Petit Formal Script;
  text-decoration: none;
  color: #FFF;
  padding: 5px 0;
}

/** Avatar **/
#leftHalf {
  order: 2;
  width: 30%;
  overflow: hidden;
  margin: -455px 0 0 auto;
  padding: 0;
  border-left: 1px solid #111;
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.5);
}

#leftHalf img {
  width: 100%;
  height: auto;
  display: flex;
  justify-self: center;
  margin: 0;
}

/** Bottom Half: Comments, Friends **/
#bottom-halfContainer {
  margin: 0;
  padding: 0;
  flex-flow: column;
  width: 100%;
}

/** Bottom Half Headers **/
.bottom-halfTitles {
  font: 18px Petit Formal Script;
  color: #FFF;
  margin: 0;
  padding: 10px 0;
  width: 100%;
  background: #111;
}

#comments .bottom-halfTitles:first-letter {
  color: rgb(50, 50, 190);
}

#friendsList .bottom-halfTitles:first-letter {
  color: rgb(190, 50, 50);
}

/** Friends List obvy **/
#friendsList {
  background: #111;
  margin: 0;
  padding: 0;
  width: 100%;
  order: 2;
  height: fit-content;
}

#view-allFriends {
  width: 50%;
  margin: 0 auto;
  padding: 5px 0;
  text-align: center;
  font: 8px Verdana;
  text-transform: lowercase;
  color: #CCC;
  transition: all 0.3s linear;
  letter-spacing: 0.1em;
}

#view-allFriends:hover { color: #FFF; }

#friendsList ul {
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
}

#friendsList ul li {
  margin: 0;
  border-radius: 0;
  width: calc(100% / 9);
  height: 100%;
  border-top: 0;
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
}

#friendsList ul li:nth-of-type(1) {
  border-left: 0;
  border-right: 0;
}

#friendsList ul li:last-of-type {
  border-left: 0;
  border-right: 0;
}


#friendsList ul li a {
  display: inline-flex;
  width: 100%;
  height: 100%;
  margin: 0;
  text-align: center;
}

#friendsList ul li a img {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
}

/** Comments List **/
#comments {
  height: 350px;
  width: 100%;
  order: 1;
  padding: 0;
  overflow: hidden;
  margin: 0;
}

#commentsList {
  width: 100%;
  margin: 0;
  padding: 0;
  white-space: pre;
  overflow-x: scroll;
  display: block;
  height: 100%;
}

.commentSection {
  height: 100%;
  padding: 0px;
  box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.5);
  display: inline-flex;
  width: 30%;
  margin: 0;
}

.reportComment {
  margin: auto auto 0 0;
  padding: 5px 0;
  transition: all 0.3s linear;
  font: 12px Verdana;
  padding: 5px;
  align-self: end;
  color: rgb(50, 50, 190);
}

.reportComment:hover {
  padding: 5px;
  font-size: 12px;
  margin: auto 0 0 auto;
  text-decoration: none;
}

.reportComment:after {
  color: #CCC;
  font-size: 10px;
  transition: all 0.3s linear;
  text-decoration: underline;
  opacity: 0;
}

.reportComment:hover:after {
  opacity: 1;
}

.commentsThumbs { display: none; }

.commentInfo {
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 5px 0;
  position: initial;
  font-size: 0;
  background: rgba(0, 0, 0, 0.5);
  order: 1;
  align-self: flex-start;
}

.commentInfo:after {
  content: close-quote;
  border-top: 7px solid rgba(0, 0, 0, 0.5);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin: 0 auto;
  float: left;
  position: relative;
  left: 45%;
  top: 12px;
}

.infoDate {
  width: 100%;
  font: 8px Verdana;
  margin: 0;
  color: #CCC;
  padding: 5px 0 0;
}

.infoUsername {
  width: 100%;
  margin: 0 auto;
  font: 14px Petit Formal Script;
  text-decoration: none;
  text-shadow: 0 0 2px;
  color: #CCC !important;
}

.commentsBubble {
  width: 100%;
  margin: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  white-space: normal;
  order: 2;
}

.commentsBubble:before {
  display: none;
}

.commentsBubble p {
  font: 11px Verdana;
  padding: 0 5px;
  text-indent: 5px;
  color: #CCC;
}

/** 'Add Comment' button **/
#comments button {
  background: #111;
  width: 100%;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 1px solid #111;
  border-bottom: 0;
  margin: 0;
  padding: 10px 0 25px;
  font: 14px Petit Formal Script;
  color: #FFF;
}

#comments button:before {
  content: "\291C";
  padding: 0 5px;
}

#comments button:after {
  content: "\27F6";
  font-size: 10px;
  padding: 0 5px;
}

#comments button:hover {
  background: rgba(0, 0, 0, 0.5);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-color: #111;
}

/** Comment Pagination **/
#profile-pagination {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  margin: 0;
  padding: 5px 0;
  justify-content: space-evenly;
}

.page-item {
  display: inline-flex;
  margin: 0 2px;
  border-radius: 0;
  padding: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 0;
  transition: all 0.3s linear;
  font: 10px Verdana;
  padding: 5px;
  border: 1px solid #111 !important;
}

.page-item:hover {
  background: #111;
}

.first, .prev, .next, .last {
  background: #111 !important;
}

.disabled a {
  color: #AAA;
}

.active {
  background: rgba(0, 0, 0, 0.5) !important;
}

/** "Add Comment" modal **/

.jconfirm-box {
  border-radius: 0 !important;
  background: #111 !important;
}

.jconfirm-title-c {
  font: 24px Petit Formal Script;
  color: #CCC !important;
}

.jconfirm-content {

}

.jconfirm-content span {
  color: #AAA;
  font: 10px Verdana;
}

.charsLeft { color: #AAA !important; }

.jconfirm-box label {
  display: none;
}

.jconfirm-content {
  padding: 20px 0;
}

.jconfirm-content input {
  border-radius: 0;
  box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.5);
  border: 0;
  font: 12px Verdana;
  color: #CCC;
  background: linear-gradient(to right, rgb(50, 50, 190), rgb(150, 50, 190) 50%, rgb(190, 50, 50)) no-repeat fixed;
}

.btn-brown, .btn-default {
  border-radius: 0 !important;
  font: 14px Petit Formal Script !important;
  font-weight: normal !important;
  text-transform: capitalize !important;
  background: transparent !important;
  transition: all 0.3s linear !important;
}

.btn-brown {
  color: rgb(50, 50, 190);
}

.btn-default {
  color: rgb(190, 50, 50) !important;
}

.btn-brown:hover, .btn-default:hover {
  color: #FFF !important;
}

/* Mobile-Friendly Styling */
@media screen and (max-width:840px) {

  @keyframes fadein {
    from { opacity: 0; margin: -100% auto auto; }
    to { opacity: 1; margin: 0 auto; }
  }

  #page-content {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 100%;
    animation: fadein 2s ease 1s normal 1;
    animation-fill-mode: both;
  }

  #profileContainer {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 0;
  }

  #profileWrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    border: 0;
  }

  #menu ul {
    position: initial;
    width: 100%;
    margin: 0 auto;
  }

  #menu ul li {
    width: 100%;
    text-align: center;
    display: block;
    margin: 1% 0;
  }

  #menu ul li a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1% 0;
    transition: all 0.3s linear;
  }

  #menu ul li a:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.5);
  }

  #menuNormal li a:hover {
    background: transparent !important;
  }

  #menuNormal a {
  }

  #menuMobile, #menuToggle {
    display: none;
  }

  #top-halfContainer {
    width: 100%;
    height: 100vh;
    flex-flow: row;
  }

  #rightHalf {
    margin: 0 auto auto;
    flex-flow: column;
    width: 100%;
    height: 50%;
  }

  #user-cardContainer {
    margin: 0;
    width: 140%;
  }

  #aboutMe {
    margin: 0 auto 0 0;
    width: 100%;
  }

  #aboutMe p {}

  #leftHalf {
    z-index: 1;
    overflow: hidden;
    width: 40%;
    padding: 0;
    margin: auto auto 0 auto;
    justify-content: start;
    height: 56.6%;
  }

  #leftHalf img {
    width: auto;
  }

  #rightCard {
    width: 100%;
  }

  #buttons {
    flex-direction: row;
    padding: 0;
    border-bottom: 1px solid #111;
  }

  #buttons li {
    margin: 0;
    padding: 0;
    display: inline-flex;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    width: 20%;
  }

  #buttons li a {
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    margin: 0;
    padding: 10px 0;
  }

  #leftCard ul {
    width: 100%;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }

  #leftCard ul li {
    width: 50%;
    text-align: center;
    margin: 0;
  }

  .jconfirm-box { width: 95% !important; }
}
/* End Mobile Styling */