Welcome! Share code as fast as possible.
- Use the language picker to change the language manually.
- The previous link will get modified. You can then share this new link with others.
- Visit
https://code-dump.vercel.app/<extension>
- For example, to create a link which for a JavaScript code you will visit
https://code-dump.vercel.app/js
Any link generated does not have an expiry.
GitHub
/* ---===+++ [ | CUSTOM FONT IMPORTS HERE | ] +++===--- */
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Unicase:300,400,500,600,700&display=swap');
/* ---===+++ [ | HEADER IMAGE CUSTOMIZATION STARTS HERE | ] +++===--- */
$bg-image:none;
$bg-position:top center;
$bg-size:cover;
$header-height:200px;
/* ---===+++ [ | FONT CUSTOMIZATION STARTS HERE | ] +++===--- */
/* --- Body Font - Main Font for the Layout - Can Control Weights of other Elements --- */
$main-font:'Raleway', serif;
$main-font-size: 11pt;
$main-font-weight: 400;
$italic-font-weight: 500;
$bold-font-weight: 600;
$sidebar-font: 'Cormorant Unicase', serif;
$sidebar-font-size: 13pt;
$sidebar-username-size: 18pt;
/* --- Button Font - Main Font for All Buttons --- */
$btn-font: 'Cormorant Unicase', serif;
$btn-font-size: 11pt;
$btn-font-weight: 500;
/* --- Body Header Font --- */
$header-font: 'Cormorant Unicase', serif;
$header-font-weight: 500;
$header-transform: none;
$sub-header-transform: none;
/* ---===+++ [ | COLOR CUSTOMIZATION STARTS HERE | ] +++===--- */
/* There are a lot of entries for color customization because I wanted to cover the bases for those who prefer multi-color layouts.
I have left in descriptions of what defaults match other defaults in hopes that helps with any confusion if you prefer simpler layouts. */
/* --- Body Background Color --- */
$bg-color: #272526;
/* --- Top Icon On Sidebar - You can find the code for the icon of your choice at https://fontawesome.com/icons --- */
$sidebar-top-icon: "\f186";
/* --- Sidebar Nav Link Color - Default is slightly lighter than Primary --- */
$sidenav-link: #899DA8;
/* --- Dark Accents - Sidebar, Top Bar, Dark BGs, etc. - Default is Dark Grey --- */
$sidebar-accent: #333233;
/* --- Dark Accents - Dark BGS --- */
$dark-accent: #111;
/* --- Navbar Accent --- */
$nav-accent: #111;
/* --- Navbar Button Accent --- */
$nav-button: #333233;
/* --- Content Background - Default is Off Black --- */
$content-bg: #272526;
/* --- Lightest Accent - button & badge text, etc. - Default is White */
$lightest: #fff;
/* --- Body Text Color - Default is Off White --- */
$text-color: #FCFBF6;
/* --- Italic Text Color - Default is same as muted --- */
$italic-accent: #95929C;
/* --- Bold Text Color - Default is slighty lighter than Primary --- */
$bold-accent: #899DA8;
/* --- Header Color - Default is Text Color --- */
$header-color: #FCFBF6;
/* --- Header Two Alt - Default is slightly lighter than Primary Accent --- */
$h2-alt: #899DA8;
/* --- Primary Accent color - Default is Muted Blue --- */
$primary-accent: #6F8089;
/* --- Default Accents - Default is Dark Grey --- */
$default-accent: #333233;
/* --- Lighter/Faded Accent - Faded Cards, badges, etc. --- */
$bg-faded: #333233;
$bg-light: #5E5C60;
/* --- Muted Accent --- */
$text-muted: #95929C;
/* --- Button Text - Default is White --- */
$btn-text: #fff;
/* --- Secondary Accent - Default is a Muted Lavender --- */
$secondary-accent: #7B6D80;
/* --- Info Accent - Default is a Muted Blue --- */
$info: #85B1B5;
/* --- Success Accent - Default is a Muted Green --- */
$success: #6F867D;
/* --- Warning Accent - Default is a Muted Yellow --- */
$warning: #C4907A;
/* --- Danger Accent - Default is a Muted Red --- */
$danger: #7B535F;
/* --- Character Gallery Button Accent - Default is Primary Accent --- */
$char-btn-accent: #6F8089;
$char-btn-accent-hover: #333233;
$char-btn-text:#fff;
$char-btn-text-hover:#fff;
/* --- Default Card Color - Default Matches BG Color --- */
$card-bg: #272526;
/* --- Danger Alert / Warning Card --- */
$alert-danger-bg: #59434A;
$alert-danger-color: #B69EA9;
/* ---===+++ [ | LAYOUT ADJUSTMENTS BELOW | ] +++===--- */
/* =========================
TOP TOYHOUSE BAR
========================= */
/* whole bar */
#header,
.navbar,
.navbar-default,
.navbar-inverse,
nav.navbar {
background: #000000 !important;
border: none !important;
box-shadow: none !important;
min-height: 38px !important;
}
/* all top bar links/text */
#header a,
#header .navbar-brand,
#header .nav-link,
#header .navbar-nav > li > a,
.navbar a,
.navbar-brand,
.navbar-nav > li > a {
color: #fff !important;
font-family: 'Cormorant Unicase', serif !important;
font-weight: 300 !important;
font-size: 13px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
background: transparent !important;
}
/* hover */
#header a:hover,
#header .navbar-brand:hover,
#header .navbar-nav > li > a:hover,
.navbar a:hover,
.navbar-brand:hover,
.navbar-nav > li > a:hover {
color: #fff !important;
background: transparent !important;
opacity: 0.85;
}
/* icons in top bar */
#header i,
#header .fa,
#header .fi,
.navbar i,
.navbar .fa,
.navbar .fi {
color: #fff !important;
font-size: 0.95em !important;
}
/* dropdown menu */
#header .dropdown-menu,
.navbar .dropdown-menu {
background: #000 !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 0 !important;
}
#header .dropdown-menu a,
.navbar .dropdown-menu a {
color: #fff !important;
font-family: 'Cormorant Unicase', serif !important;
font-weight: 300 !important;
letter-spacing: 0.08em !important;
}
#header .dropdown-menu a:hover,
.navbar .dropdown-menu a:hover {
background: rgba(255,255,255,0.06) !important;
color: #fff !important;
}
/* username on right */
#header .navbar-right a,
#header .navbar-right .dropdown-toggle,
.navbar-right a,
.navbar-right .dropdown-toggle {
color: #fff !important;
}
/* remove blue/orange hover line effects if present */
#header .nav > li > a:focus,
#header .nav > li > a:hover,
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background: transparent !important;
}
/* optional: make bar a bit slimmer */
#header .container,
#header .container-fluid,
.navbar .container,
.navbar .container-fluid {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
/* =========================
SIDE BAR
========================= */
/* sidebar background */
.col-lg-3.profile-sidebar,
.profile-sidebar > ul,
#sidebar,
#sidebar > ul,
.sidebar,
.sidebar > ul {
background: #000000 !important; /* change this */
}
.profile-sidebar li.user-name,
#sidebar li.user-name,
.sidebar li.user-name {
display: block !important;
padding: 20px !important;
margin: 0 0 10px 0 !important;
background: transparent !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
text-align: center !important;
}
/* =========================
REMOVE UNWANTED SECTIONS
========================= */
.profile-sidebar li.header,
.profile-sidebar li.character-folder.subheader,
.profile-sidebar li.character-name,
.profile-sidebar .subnavigation-header,
.profile-sidebar .subnavigation-header + ul,
#sidebar li.header,
#sidebar li.character-folder.subheader,
#sidebar li.character-name,
#sidebar .subnavigation-header,
#sidebar .subnavigation-header + ul,
.sidebar li.header,
.sidebar li.character-folder.subheader,
.sidebar li.character-name,
.sidebar .subnavigation-header,
.sidebar .subnavigation-header + ul {
display: none !important;
}
/* =========================
LINKS
========================= */
.profile-sidebar a,
#sidebar a,
.sidebar a {
display: block !important;
padding: 10px 14px !important;
font-family: 'Cormorant Unicase', serif !important;
font-size: 13px !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: #2f6aaa !important;
text-decoration: none !important;
}
.profile-sidebar a:hover,
#sidebar a:hover,
.sidebar a:hover {
color: #ffffff !important;
background: rgba(255,255,255,0.05) !important;
}
/* icons */
.profile-sidebar i,
#sidebar i,
.sidebar i {
color: #2f6aaa !important;
}
/* clean items */
.profile-sidebar li,
#sidebar li,
.sidebar li {
background: transparent !important;
border-color: rgba(255,255,255,0.08) !important;
}
/* remove default panels */
.profile-sidebar .card,
.profile-sidebar .card-block,
.profile-sidebar .card-body {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* remove dividers */
.profile-sidebar hr {
display: none !important;
}
/* remove admin divider specifically */
.profile-sidebar .sidebar-divider-admin,
#sidebar .sidebar-divider-admin,
.sidebar .sidebar-divider-admin {
display: none !important;
}
/* remove any bottom borders */
.profile-sidebar ul,
#sidebar ul,
.sidebar ul {
border: none !important;
}
/* remove toyhouse footer bar */
footer,
#footer,
.footer,
.site-footer {
display: none !important;
}
/* --- Character Page Profile Header - This is displayed by default! To turn it off, switch it from 'display' to 'none' --- */
$profile-header-display:display;
/* --- Character Gallery - This is displayed by default! To turn it off, switch it from 'display' to 'none' --- */
$gallery-display:display;
/* --- World Profile Header : Icon & Title Display - This is turned off on default! To turn it back on, just set it to display --- */
$no-world-profile-header: none !important;
/* ---===+++ [ | CSS IMPORT | ] +++===--- */
@import '0/12840/VLq7pN/night-mode';
/* ---===+++ [ | ADDITIONAL CUSTOM CSS CAN BE ENTERED BELOW THIS LINE | ] +++===--- */
/* REMOVE FOOTER */
footer,
#footer,
.footer {
display: none !important;
}
/* REMOVE PAGE BACKGROUND BOX */
#main .container,
#main .container-fluid {
background: transparent !important;
background-color: transparent !important;
}
/* remove leftover pale panels */
.card,
.card-body,
.bg-light,
.bg-faded {
background: transparent !important;
}
/* ===== WORLDS PAGE RESTYLE ===== */
#main a[href*="/~world/"] img {
border-radius: 12px !important;
}
#main a[href*="/~world/"] {
text-decoration: none !important;
}
#main .badge {
background: #4da3ff !important;
color: #000 !important;
border-radius: 6px !important;
}
select,
.custom-select,
.form-control {
background: rgba(10,10,10,0.7) !important;
color: #dbe9ff !important;
border: 1px solid #2a2a2a !important;
}
#main a[href*="/~world/"] img,
#main a[href*="/~world/"] + *,
#main a[href*="/~world/"] ~ * {
background: transparent !important;
}
/* CHARACTER DIRECTORY BUTTONS */
.char-folder-btn {
border: 1px solid rgba(103,185,255,0.45);
border-radius: 18px;
box-shadow: 0 .4rem 0 rgba(0,0,0,0.45);
overflow: hidden;
text-shadow: 0 0 .15rem #000;
background: rgba(10,10,10,0.6);
backdrop-filter: blur(4px);
}
.char-folder-bg {
position: absolute;
inset: 0;
z-index: 0;
opacity: .35;
filter: blur(.08rem);
background-size: cover;
background-position: center;
}
.char-folder-btn a {
position: relative;
z-index: 1;
min-height: 140px;
font-family: 'Cormorant Unicase', serif;
letter-spacing: .12em;
font-size: 18px;
color: #dbefff !important;
text-transform: uppercase;
}
.char-folder-btn a:hover {
color: #ffffff !important;
text-decoration: none !important;
}
/* CHARACTER DIRECTORY CLEANUP */
#main h1,
#main .folder-title,
#main .page-title {
display: none !important;
}
/* hide built-in folder/thumb area more safely */
#main .subfolders,
#main .folder-grid,
#main .folder-thumb,
#main .folder-card,
#main .character-folder,
#main .subcategory {
display: none !important;
}
/* style the top action buttons instead of hiding them */
#main .btn,
#main .btn-sm,
#main .btn-group .btn,
#main a[href*="view=unsorted"],
#main a[href*="view=all"] {
background: rgba(10,10,10,0.8) !important;
color: #dbefff !important;
border: 1px solid rgba(103,185,255,0.45) !important;
border-radius: 8px !important;
box-shadow: none !important;
text-decoration: none !important;
}
#main .btn:hover,
#main .btn-sm:hover,
#main .btn-group .btn:hover,
#main a[href*="view=unsorted"]:hover,
#main a[href*="view=all"]:hover {
background: rgba(20,25,35,0.95) !important;
color: #ffffff !important;
border-color: rgba(103,185,255,0.7) !important;
}
/* hide only built-in top character folder cards */
.gallery-item .characters-folder {
display: none !important;
}
.gallery-item {
display: none !important;
}
/* keep your custom directory buttons visible */
.char-folder-btn {
display: block !important;
}
.char-folder-btn a {
display: flex !important;
}
/* FIX WEIRD PINK/ORANGE HOVER */
a:hover {
color: #67b9ff !important;
}
.btn:hover,
a.btn:hover {
color: #67b9ff !important;
}
/* character names specifically */
.char-folder-btn a:hover,
#main a:hover {
color: #044af9 !important;
}