Goth

Dark Goth Theme
Code

<style>
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=IM+Fell+English+SC&display=swap");
@keyframes dark-pulse{
	0%{
		opacity:0.85;
		filter:contrast(110%) brightness(90%);
	}
	50%{
		opacity:1;
		filter:contrast(130%) brightness(105%);
	}
	100%{
		opacity:0.85;
		filter:contrast(110%) brightness(90%);
	}
}
@keyframes slow-float{
	0%{
		transform:translateY(0px);
	}
	50%{
		transform:translateY(-3px);
	}
	100%{
		transform:translateY(0px);
	}
}
[data-skin-page]{
	--skin-palette-accent:#4a0e17;
	--skin-palette-accent-text:#d8d8d8;
	--skin-palette-backdrop:#050505;
	--skin-palette-chrome:#0a0a0a;
	--skin-palette-chrome-text:#b3b3b3;
	--skin-palette-link:#8c1d2c;
	--skin-palette-link-hover:#e0364f;
	--skin-palette-muted:#4a4a4a;
	--skin-palette-page:#050505;
	--skin-palette-page-text:#c0c0c0;
	--skin-palette-surface:#0f0f0f;
	--skin-palette-surface-text:#d1d1d1;
	background:#000000 url("https://images.unsplash.com/photo-1518709268805-4e9042af9f23?q=80&w=1000&auto=format&fit=crop") center / cover fixed;
}
[data-skin-part="shell"],
[data-skin-root],
[data-skin-root] *{
	font-family:"Cinzel", "IM Fell English SC", serif;
}
[data-skin-root]{
	background:rgba(10, 10, 12, 0.92);
	border:2px solid #2a2a2a;
	border-radius:6px;
	box-shadow:0 0 30px rgba(0, 0, 0, 0.95), inset 0 0 15px rgba(74, 14, 23, 0.3);
	color:#b8b8b8;
	text-shadow:0 0 4px #000000, 0 0 10px rgba(140, 29, 44, 0.4);
}
[data-skin-part="navigation"]{
	background:#080808 !important;
	border:1px solid #222;
	border-radius:4px;
}
[data-skin-part="navigation-top"]{
	background:transparent !important;
}
[data-skin-part="navigation-links"]{
	background:rgba(0, 0, 0, 0.8) !important;
}
[data-skin-part="name"]{
	color:#a81c31;
	font-family:"IM Fell English SC", serif;
	font-size:1.8rem;
	letter-spacing:2px;
	text-shadow:0 0 10px rgba(168, 28, 49, 0.6), 0 0 20px #000;
}
[data-skin-root] a{
	color:#8c1d2c;
	transition:color 0.3s ease, text-shadow 0.3s ease;
}
[data-skin-root] a:hover{
	color:#e0364f;
	text-shadow:0 0 8px rgba(224, 54, 79, 0.8);
}
[data-skin-root] .panel,
[data-skin-part="notice"],
[data-skin-part="vibe"],
[data-skin-part="url"],
[data-skin-part="links"],
[data-skin-part="interests"]{
	background:#0a0a0c !important;
	border:1px solid #262626 !important;
	border-radius:4px !important;
	box-shadow:inset 0 0 8px rgba(0,0,0,0.8);
}
[data-skin-part="about"],
[data-skin-part="notice"]{
	animation:slow-float 4s infinite ease-in-out;
	background:rgba(15, 12, 14, 0.95) !important;
	border:1px solid #4a0e17 !important;
	border-radius:4px;
	box-shadow:0 0 15px rgba(0, 0, 0, 0.8);
	padding:20px;
}
[data-skin-part="notice"]{
	animation:dark-pulse 3s infinite ease-in-out;
	background:#12080a !important;
	border:1px double #8c1d2c !important;
	color:#d1d1d1;
	text-align:center;
}
[data-skin-part="notice"] h3{
	color:#a81c31;
	filter:drop-shadow(0 0 6px #000);
	letter-spacing:1px;
}
[data-skin-root] .panel__heading{
	background:#11090b !important;
	border-bottom:1px solid #4a0e17;
	border-radius:4px 4px 0 0;
	color:#8c1d2c;
	font-weight:700;
	letter-spacing:1.5px;
	text-align:center;
	text-transform:uppercase;
}
[data-skin-root] .panel__body,
[data-skin-part="wall"] .post-card,
[data-skin-part="wall"] .composer{
	background:#0d0d0f;
	border-color:#1a1a1a;
	color:#a0a0a0;
}
[data-skin-part="interests"] td{
	background:rgba(0, 0, 0, 0.4) !important;
	border:1px solid #1f1f1f;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder,
[data-skin-root] img{
	border:1px solid #333;
	border-radius:4px;
	filter:grayscale(40%) contrast(110%);
	transition:filter 0.3s ease;
}
[data-skin-part="photo"] img:hover{
	filter:grayscale(0%) contrast(100%);
}
[data-skin-part="actions"]{
	background:rgba(5, 5, 5, 0.9) !important;
}
[data-skin-part="actions"] .profile-actions__cell{
	background:rgba(15, 15, 15, 0.8);
	border-color:#2a2a2a;
}
[data-skin-part="actions"] .profile-action{
	color:#a81c31;
	text-shadow:0 0 5px rgba(168, 28, 49, 0.5);
}
[data-skin-part="footer"]{
	background:#0a0a0a !important;
	border-top:1px solid #222;
	border-radius:4px;
	color:#555555;
}
</style>
Comments

No comments yet.