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

EvenMoreRandomness	1789479233 USING (I customized it a bit) Report Comment
mokaaaMiu	1789398338 USINGG Report Comment
Vicksiee	1789272764 Using Report Comment
ChocoChipss	1789236540 Usinggg!!! <3 Report Comment
Ivy	1789221306 using!!!!! Report Comment
piechan/itsuki	1789074065 Using! Report Comment
radiomente	1789003172 using Report Comment
Soul	1788645526 using Report Comment
moldyelliot	1788617656 usingg Report Comment
sowrongitsxzane	1788478013 using, Report Comment
Nael	1788471691 using Report Comment
laila 🧟‍♂️	1788234219 using Report Comment
꒰ . 🪽 。𝖜𝖎𝖑𝖑𝖔𝖜𝖜 ◟ `` ˖	1787947440 using Report Comment
xXxMs.lOnELyxXx	1787936024 using Report Comment
𝄞⭑Beck｡`	1787848357 using Report Comment
NaraNom	1787719357 how do i change the text color?? Report Comment
WANNABEsk8r	1787686521 usin Report Comment
#leospace	1787572450 using! >_< Report Comment
akuchan	1787550627 usinng!! Report Comment
𝑹𝒂𝒗𝒆𝒏	1787549352 Using ! (Possibly you'll know if I do.) Report Comment