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 2110 comments ( View all | Add Comment )

suna ⋆౨ৎ˚⟡˖ ࣪	1756899863 Gunna try it out Report Comment
RapidFireZachu	1756852220 Usinggg Report Comment
Future Looped Mad Party	1756836047 usinggggg Report Comment
Hematite	1756807725 i will be using this thank you Report Comment
⋆༺♱𝕲𝖍𝖔𝖘𝖙•𝖂𝖎𝖗𝖊♱𓆪༻⋆	1756760937 using Report Comment
# @lyric	1756754379 using! Report Comment
N30?!	1756714396 using Report Comment
ALLEY 𖤐	1756712468 using :33 Report Comment
kasper	1756689308 using! Report Comment
Yy	1756622959 using ! Report Comment
melloncollie	1756607246 using Report Comment
katekae	1756595302 usinggg Report Comment
Dino_the_idiot	1756594349 Using!! :3c Report Comment
opalᯓ★	1756473820 gonna use! Report Comment
vampire.prince.xoxo	1756460463 using! Report Comment
dino	1756415308 ussing :b Report Comment
Gwen :D	1756378063 Usinggg :D Report Comment
aexe // blitzy!!	1756341008 using!!;3 Report Comment
Jay	1756290077 SO COOL!! Gonna try and use this! Report Comment
luci	1756209492 usnign Report Comment