Minimal Black

Tags: black, simple, dark, layouts, minimal, template, clean

Description:

A minimal black layout based on my Minimal White layout, which in turn is based Bela's pink layout

My Minimal White layout
https://layouts.spacehey.com/layout?id=26820

Bela's original Pink layout
https://layouts.spacehey.com/layout?id=344

Feel free to modify and redistribute, but please credit Bela and me by adding links back to the original themes if you publish your own version.

Feel free to suggest changes or voice your opinions, and remember that it's against spacehey rules to hide the spacehey logo, search bar, or logout buttons in the navigation.

Changes from bela's version:

More CSS variables
Almost completely monochromatic

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by temporary (https://layouts.spacehey.com/layout?id=26887) -->

<!-- Based on Pink layout created by Bela (https://layouts.spacehey.com/layout?id=344) -->
<!-- Modified by @temporary -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Gotu&display=swap');
</style>
<style>
:root {
    --headers: white;
    --text: #bbb;
    --text_accent: #bbb;
    --names: #bbb;
    --links: #bbb;
    --hover: white;
    --borders: 1px solid #333 !important;
    --border_normal: 1px solid #333 !important;
    --border_none: none !important;
    --border_accent: #333;
    --font-family: 'Gotu', sans-serif;
    --curve: 0px;
    --simple_bg: black;
    --bg_transparent: transparent;
    --dropshadow: #0f0f0f;
}

main .left {
    padding-right: 20px;
}

.url-info {display: none !important;} /* to hide the url */
.blurbs .heading{display: none !important;} /* to hide the blurbs heading */

 /* headings*/
h3, h4, h5, .url-info b {
    color: var(--headers) !important;
}

 /* color of links */
a {
    color: var(--links) !important;
}

 /* color of links on hover */
a:hover {
    color: var(--hover) !important;
}

/* color of text */
p, h2 {
    color: var(--text) !important;
}

/* color of names, and friends counter */
h1, .friends a p {
    color: var(--names) !important;
}

 /* color of names on hover */
h1, .friends a:hover p {
    color: var(--hover) !important;
}

/* color of search */
nav label {
    color: var(--links) !important;
}

/* aboutme & want2meet headings */
.section h4 {
    color: var(--headers) !important;
    text-align: center;
}

/* line in between comment replies*/
.comment-reply:not(:first-child) {
    border-top: 3px double var(--border_accent);
}

/* Count of Friends comments on profile*/
.count {
    color:var(--text_accent);
}

/* text decoration */
a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    text-decoration: underline;
    text-decoration-style: wavy;
}

.logout-btn:hover, .logout-btn:active {
    text-decoration: underline;
    text-decoration-style: wavy;
}

nav .top a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
}

nav .links a {
    text-shadow: none !important;
}

nav .links a:hover {
    text-decoration: underline;
    text-decoration-style: wavy;
}

/* font family */

h2, h3, h4, h5, a, p, nav label, .section {
    font-family: var(--font-family) !important;
    font-size: 12px!important;
}

/* padding and margin */

.icon {
    border: none !important;
}

.blurbs {
    margin-top: 10px !important;
    margin-bottom: 30px !important
}

.friends {
    margin-top: -10px !important;
    margin-bottom: 30px !important
}

.profile-info {
    border-radius: var(--curve) !important;
}

.comment-replies {
    border: 5px dotted var(--border_normal);
}

.comments-table {
    border-radius: var(--curve) !important;
    border: none !important;
}

.table-section {
    padding-bottom: 7px !important;
    margin-top: 30px!important
}

#comments {
    margin-top: 5px !important;
    padding-bottom: 5px !important
}

.details p:last-child {
    color: var(--links) !important;
    filter: brightness(95%);
}

.mood {
    margin-top: 20px;
}

/* background image */
body {
    background-color: var(--simple_bg) !important;
    background-repeat: repeat;
    background-size: 120px;
}

/* navigation */

/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */

nav {
    background: var(--simple_bg);
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--simple_bg);
    margin-bottom: 30px;
    border: var(--border_none);
}

nav .top {
    background: rgba(0, 0, 0, 0.0);
}

nav .top a {
    color: var(--links) !important;
}

nav .links {
    background: transparent!important;
    text-align: center;
    text-shadow: none !important;
}

/* nav logo */
nav img.logo {
    filter: brightness(0) saturate(100%) invert(76%) sepia(42%) saturate(0%) hue-rotate(305deg) brightness(104%) contrast(80%);
    !important;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    color: var(--headers);
}

/*============= color the search bar and button ===================*/

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: var(--border_normal);
    color: lightgray !important;
    border-radius: 0px !important;
}

button {
    border-radius: 0px !important;
    border: 0px solid var(--border_normal) !important;
    font-family: var(--font-family) !important;
    background-color: var(--bg_transparent) !important;
    color: var(--text) !important;
}

/*============= online icon  ===================*/

.online {
    content: url(https://dl.glitter-graphics.com/pub/272/272679lz7b9hcea1.gif);
    filter: saturate(0%) !important;
}

.f-col img {
    content: url(https://cdn-icons-png.flaticon.com/64/868/868604.png);
    filter: opacity(30%) !important;
}

/*============= profile name ===================*/

h1 {
    padding-left: 20px !important;
    font-family: 'Gotu', sans-serif;
    font-size: 25px !important;
    margin-top: -10px!important;
    color: var(--links)!important;
}

/*============= box shadows ===================*/

.mood, .blog-preview, .contact {
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

.table-section, .blurbs, .friends {
    margin-bottom: 30px !important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

.friends {
    margin-top: 10px!important;
}

.profile-info {
    background: var(--simple_bg);
    border: var(--border_normal) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

.profile-info .inner {
    font-weight: bold;
    text-align: center;
}

.contact {
    background: var(--simple_bg);
    padding: 20px;
    margin-bottom: 40px !important;
}

main {
    background-image: url('');
    background: var(--bg_transparent);
    padding: 6px 0px;
}

.profile-pic img {
    outline: none !important;
    border: none !important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

.friends-grid img {
    outline: none !important;
    filter: opacity(80%) saturate(0%) !important;
    border-radius: var(--curve) !important;
}

td {
    background-color: var(--bg_transparent) !important;
}

hr {
    border-top: 1px solid var(--border_normal);
}

.heading, .url-info, .blurbs, .friends, .table, .table-section, footer {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--border_normal) !important;
}

.friends, .blurbs {
    background: var(--simple_bg);
}

.mood, .contact, .blog-preview {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--border_normal) !important;
}

.mood, .blog-preview {
    text-align: center;
    background: var(--simple_bg);
    border: var(--border_normal) !important;
}

.table-section {
    border: var(--border_normal) !important;
    background-color: var(--simple_bg) !important;
    border-radius: var(--curve) !important;
}

.heading {
    background: var(--bg_transparent) !important;
    padding-bottom: 4px !important;
    background-size: 100%100%!important;
    text-align: center;
    border: none!important;
}

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: var(--border_normal) !important;
    outline: none !important;
    border: none!important;
}

.comments-table td {
    background-image: url('') !important;
    background-size: cover;
    border: var(--border_normal);
}

.comments-table td:first-child img {
    /* you can clip images at https://bennettfeely.com/clippy and add the code here */
}

footer {
    color: var(--text);
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: var(--simple_bg);
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) var(--dropshadow);
}

</style>
<style>
/* Force scrollbars onto browser window */

/* Scrollbar styles */

::-webkit-scrollbar {
    width: 5px;
    height: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 3px;
    border: 1px solid var(--border_normal);
}

::-webkit-scrollbar-thumb {
    background: var(--headers);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border_accent) !important;
}

</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 96 comments ( View all | Add Comment )

wastedchemicals	1737676435 using Report Comment
Tony	1737524305 Using Report Comment
kyo	1737372618 usingg Report Comment
saphi	1737202188 using Report Comment
cah	1736889290 using Report Comment
𓆩♡𓆪	1736786084 using Report Comment
Mutedream	1735857598 using Report Comment
alina	1735060780 using Report Comment
linn binn	1733022528 using ty!! Report Comment
m4na_samaa	1732529943 usingf Report Comment
3lviᚱa۶ৎ	1729506611 Using Report Comment
doll.	1727758746 gorge ! ,, using for sure . ♡ Report Comment
W4Ikr	1727705873 Using Report Comment
✦ ⟬zie⟭ ✧	1726347245 using Report Comment
୨ৎㅤㅤ Tomm 🥁 .ᐟ	1725245503 Ussingg Report Comment
𝕵𝖆𝖈𝕶	1724216227 using Report Comment
﹒ꕀ . rynie ! ୧	1721970056 using Report Comment
Charles Eyler	1720445471 Using Report Comment
yoshiwara𓆩𓆪	1720279481 using <3 thx Report Comment
mnhrchan_	1720080937 using Report Comment