Glossy Dark

Tags: black, dark, gloss, glossy, skeuo, skeuomorphic, skeuomorphism, 2000s, nostalgia, 2010s

Description:

Inspired by YouTube's original mobile app from 2010, so mainly very early skeuomorphism.

Preview:

click on the image for a larger preview

Code:

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

<style>
body {
    background: #000;
    font-family: Arial, Verdana, sans-serif;
}
p {
    color: #fff;
}
a {
    color: #f00;
}
.left.col {
    background: linear-gradient(#535353 0%, #000 2%);
    border-radius: 5px 5px 0px 0px;
    border: 0px;    
    padding: 5px;
    color: #ffffff;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px;
    position: relative;
    right: 4px;
}
.left .heading {
    background: linear-gradient(#535353 0%, #000 60%) !important;
    box-shadow: inset 0px 0px 5px 1px #535353;
    border-radius: 5px 5px 0px 0px;
    border-bottom: 1px solid #808080;
    color: #ffffff;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px;
    padding: 3px !important;
}
.contact .heading {
    background: none !important;
    border: none !important;
    box-shadow: none;
    color: #ffffff;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px;
}
.profile .table-section {
    border-radius: 5px 5px 0px 0px;
    border: 1px solid #808080;
}
.details-table td {
    background: linear-gradient(#535353 0%, #000 60%) !important;
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 5px 1px #535353, #000 1px 1px 10px 2px;;
    border-radius: 10px 0px;
    border: 0px;
    padding-left: 5px !important;
    color: #ffffff !important;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px; 
}
.profile .contact {
    border-radius: 5px 5px 0px 0px;
    border: none;  
    background: linear-gradient(#535353 0%, #000 20%);
}
.right.col {
    background: linear-gradient(#535353 0%, #000 2%);
    border-radius: 5px 5px 0px 0px;
    border: 0px;
    padding: 5px;
    position: relative;
    left: 4px;
    margin-left: 5px;
    color: #ffffff;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px;
}
main {
    border: none;
    border-radius: 5px;
    padding: 10px 15px 10px 15px;
    background: black;
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 10px 2px #535353;
}
nav .top {
    margin-top: 10px;
    border-radius: 5px;
    background: linear-gradient(#535353 0%, #000 69%);
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 10px 2px #535353;
    border: 0px;
    padding: 4px;
}
nav .links {
    background: linear-gradient(#535353 0%, #222 60%) !important;
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 5px 1px #535353, #000 1px 1px 10px 2px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 0px;
    padding-left: 10px !important;
    color: #ffffff !important;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px;
    padding: 5px;
    position: relative;
    gap: 5px;
    justify-content: center;
}
nav .links a {
    text-shadow: 1px 1px 0px #000;
}
nav .links a:hover {
    color: #f00;
    text-decoration: none;
    text-shadow: 1px 1px 0px #000;
}
.top .right a {
    text-shadow: 1px 1px 0px #000;    
}
.logout-btn {
    text-shadow: 1px 1px 0px #000 !important;     
}
body &gt; div.container &gt; nav &gt; ul &gt; li.special {
    display: none;
}
body &gt; div.container &gt; nav &gt; ul &gt; li:nth-child(12) {
    display: none;
}
body &gt; div.container &gt; nav &gt; ul &gt; li:nth-child(3) {
    display: none;
}
body &gt; div.container &gt; nav &gt; ul &gt; li:nth-child(13) {
    border: none;
}
nav li {
    font-size: 0pt;
    padding-right: 5px;
    border-right: 2px ridge #555555;
}
.right .heading {
    background: linear-gradient(#535353 0%, #000 60%) !important;
    box-shadow: inset 0px 0px 0px 1px #808080, inset 0px 0px 5px 1px #535353, #000 1px 1px 10px 2px;;
    border-radius: 50px 0px;
    border: 0px;
    padding-left: 10px !important;
    color: #ffffff !important;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px;    
}
.comments-table {
    border: 0px;
}
.comments-table td {
    border: 0px;
    background: linear-gradient(#535353 0%, #000 20%) !important;
    border-radius: 5px 5px 0px 0px;
    border: 0px;
    padding: 5px;
    color: #ffffff;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px;
    top: -32px;
}
.url-info {
    border: none !important;
    background: linear-gradient(#535353 0%, #000 40%);
    border-radius: 5px 5px 0px 0px;
    border: 0px;
    padding: 5px;
    color: #ffffff;
    text-shadow: 2px 1px 0px #000;
    font-size: 13px;
    top: -32px;
}
.comments-table .pfp-fallback {
    border: 2px ridge #555555;
}
.person .pfp-fallback {
    border: 2px ridge #555555;    
}
.profile-pic .pfp-fallback {
    border: 2px ridge #555555;     
}
#comments &gt; div.inner &gt; table &gt; tbody &gt; tr &gt; td:nth-child(1) {
    background: none;
}
.comment-replies {
    border: none;
    border-top: 2px ridge #555555;
}
footer {
    background: none;
}
</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 2240 comments ( View all | Add Comment )

sanitysfall	1760800670 using!!!!!! Report Comment
MonochromeOS ✩₊˚.⋆	1760737105 using Report Comment
wrath	1760662201 using Report Comment
lucille or elyana	1760659910 going to use!! Report Comment
Lemon	1760601841 Using! Report Comment
・❥・Skylight :	1760596580 Already used it a few weeks ago but forgot to comment, awesome layout btw :D How do I change the colour of the red text though? Report Comment
kozukitty	1760503900 usinggggggg Report Comment
ĢƲτȘƲε ୧ ‧₊˚ 🥩🦴 ⋅	1760488824 Using. Report Comment
bivvie !	1760480346 using !!!! :p Report Comment
maufullhd.mp4	1760464444 using :-) Report Comment
ℜ𝔲𝔣𝔣𝔓𝔲𝔭	1760435257 gonna use cus this looks cool Report Comment
Frankie	1760419730 Thank you! this looks so cool Report Comment
𝑀𝐼𝐶𝐻𝐴𝐸𝐿 ★	1760418197 Using L: Report Comment
hope	1760391664 usinggg Report Comment
LIGHTKNIGHT-09	1760390384 Using! Report Comment
VinMori	1760348333 usinggg Report Comment
╰┈➤007n7	1760327866 Using!!!^^ Report Comment
BootlegFriend	1760326790 using!! v pretty Report Comment
sid :0	1760323486 using Report Comment
.Val<3 ✮	1760310907 using :p Report Comment