Polaroids CSS

/*--- VARIABLE SETTINGS ---*/
$clipColor: #AAAAAA; /* Sets the colour of the paperclip */
$textHover: #FDB0BB; /* Sets the colour of the caption when hovered over */
$favHover:  #FDB0BB; /* Sets colour of the favourite button, remove for default */
$textFont: Consolas, 'Lucida Console', monospace; /* Sets the font of the caption, remove for TH default. To learn how to set fonts, check out this link https://www.w3schools.com/howto/howto_google_fonts.asp */

/*---------------------------
   Don't edit below here unless you have prior CSS knowledge. If the code breaks, just copy and paste a fresh one.
   Make sure to paste this in USER or FOLDER CSS, NOT CHARACTER. Probably works with other CSS, may require some tweaking.
   Polaroids (CSS Snippet) by sardiine
---------------------------*/

/*--- CENTER GALLERY ---*/
.user-characters-gallery.characters-gallery .gallery-row {justify-content: center;}

/*--- CHARACTER NAME ---*/
.thumb-caption .thumb-character-name .btn {
  text-transform: uppercase;
  letter-spacing: 2px!important;
  font-size: 14px!important;
  font-family: $textFont;
  line-height: 1;
  color: #757575;
}

/*--- CHARACTER NAME HOVER ---*/
a.character-name-badge:hover, a.character-name-badge:focus, a.character-name-badge:active,{
  color: $textHover!important;
  box-shadow: none;
}

/*--- CHARACTER THUMBNAIL ---*/
.gallery-thumb.character-thumb.gallery-item {
  margin-left: 10px;
  padding: 5px 5px 2px 5px;
  background: #fff;
  box-shadow: 2px 4px rgba(0, 0, 0, 0.2);
  border-top: 2px solid #eee;
  border-left: 2px solid #eee;
  transform: rotate(-1deg);
}
.gallery-thumb .thumb-image >.img-thumbnail img {
  border-radius:0;
}
.img-thumbnail >img {background:#F8F8F8;}
.character-thumb .thumb-image .img-thumbnail {
  padding:0px!important;
  border:0px!important;
}

/*--- PAPERCLIP ---*/
.gallery-thumb.character-thumb .thumb-image :before {
  content: "\f0c6";
  position: absolute;
  left: -12px;
  top: -27px;
  z-index: 100000;
  font-family: 'Font Awesome 6 Sharp';
  font-weight: 600;
  font-size: 31pt;
  transform: rotate(280deg);
  color: $clipColor;
}

/*--- CHARACTER THUMBNAIL HOVER ---*/
.gallery-thumb .thumb-image >a:hover{
  box-shadow: none!important;
  filter: grayscale(50%)!important;
  transition: .5s;
}

/*--- DISAPPEAR CHARACTER USERNAME AND STATS ---*/
.thumb-caption .btn {
  background-color: transparent!important;
  border-color: transparent!important;
  cursor: pointer!important;
  margin-top: 0!important;
  outline: none!important
}
.thumb-character-stat.images {display: none;}
.thumb-character-stat.comments {display: none;}
.thumb-character-stat.links {display: none;}
.thumb-character-stat.literatures {display: none;}
.thumb-character-stat.tabs {display: none;}
.thumb-character-stat.worlds {display: none;}
.thumb-character-edit {
  position: absolute;
  right: 3px;
  bottom: 10px;
  opacity: .4;
}
.thumb-character-edit:hover {opacity: 1;}

/*--- FAVOURITES BUTTON ---*/
.thumb-character-stat.favorites {
  border-radius: 100%;
  background-color: #fff;
  box-shadow: 1px 3px rgba(80, 80, 80, 0.3);
  padding: 5px 5px 2px;
  text-align: center;
  font-size: 10px;
  position: absolute;
  bottom: 26px;
  left: 3px;
}

.thumb-character-stat.favorites i:before {
  font-weight: 400;
  font-family: "Font Awesome 5 Pro";
  content: "\f004";
}
.thumb-character-stats .favorites.favorited i:before {font-weight: 800; color: $favHover;}
.thumb-character-stat.favorites i {
  margin: 0 !important;
  font-size: 12px;
}

span.th-favorite-count {display: none;}

/*--- CREDIT (this is optional, i just left it here so others could find the og code) ---*/
#content:after {
  content: 'polaroid css by sardiine';
  font-size: 10px;
  opacity: .6;
  right: 15px;
  bottom: 10px;
  position: absolute;
}