Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*--- VARIABLE SETTINGS ---*/
- $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: 1px solid rgba(80, 80, 80, 0.4);
- transform: rotate(-1deg);
- }
- .gallery-thumb .thumb-image >.img-thumbnail img {
- border-radius:0;
- }
- .gallery-thumb.character-thumb .thumb-image :before {
- content: url(https://i.imgur.com/2NzAxxP.png);
- position: absolute;
- left: -15px;
- top: -20px;
- z-index: 100000;
- }
- .img-thumbnail >img {background:#F8F8F8;}
- .character-thumb .thumb-image .img-thumbnail {
- padding:0px!important;
- border:0px!important;
- }
- /*--- 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;
- 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;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement