Yote's personal dark theme

Tags: dark theme, simple, spinning profile picture

Description:

Simple and easy dark theme with optional logo replacement in SpaceHey [WARNING: Please read the SpaceHey rules and change the logo to SpaceHey-like theme to respect the rules]

Preview:

click on the image for a larger preview

Code:

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

/* Please read the SpaceHey rules and change the logo to SpaceHey-like theme to respect the rules

Simple HTML code to replace SpaceHey logo

```<a class="SpaceHeyNewLogo" href="https://spacehey.com/home"><img class="SpaceHeyNewLogoIcon" src="/path/to/your/logo.png"/></a>```
 */

/* Adjusting position of the logo */
.SpaceHeyNewLogoIcon {
  position: absolute;
  top: 0%;
  width: 165px !important;
  margin-left: -335px;
  padding: 10px;
}
/* Hide existing logo */
.logo {
  display: none !important;
}

/* Make a little spinny profile picture */
img[alt="SynceYote's profile picture"].pfp-fallback {
    rotate: 0deg;
    -webkit-animation: spin 10s linear infinite;
    -moz-animation: spin 10s linear infinite;
    animation: spin 10s linear infinite;
    border-radius: 100%;
}
/* Spinning animation configuration */
@-webkit-keyframes spin{
    100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin{
    100%{-webkit-transform: rotate(360deg);}
}
@keyframes spin{
    100%{-webkit-transform: rotate(360deg);}
}

/* Dark theme code goes here */
body {
  background-color: #111;
}
main {
  background-color: #333;
  color: #ccc;
}
.heading {
  color: white !important;
  background-color: rgb(27, 27, 27) !important;
}
.profile .contact,
.profile .url-info,
.profile .table-section,
.setting-section,
.home-actions {
  width: 100%;
  border: 2px solid rgb(27, 27, 27) !important;
  margin: 10px 0 !important;
}
.contact, .url-info, .table-section, .details-table td {
  border: 2px solid rgb(27, 27, 27) !important;
}
footer {
  background-color: rgb(30, 30, 30) !important;
}
.details-table td {
  background-color: #1d1d1d !important;
}
.details-table {
  background-color: #161616 !important;
}


/* Online animation goes here */
.online {
    -webkit-animation: online 1s ease-in-out infinite !important;
    -moz-animation: online 1s ease-in-out infinite !important;
    animation: online 1s ease-in-out infinite !important;
}
/* Online animation configuration */
@-webkit-keyframes online {
    0% { color: white; }
    50% { color: #0c8c00; }
    100% { color: white; }
}
@-moz-keyframes online {
    0% { color: white; }
    50% { color: #0c8c00; }
    100% { color: white; }
}
@keyframes online {
    0% { color: white; }
    50% { color: #0c8c00; }
    100% { color: white; }
}

/* Stop green blinking icon */
.online img {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    animation: none !important;
}
/* Flashing red whenever go offline */
.ago {
    -webkit-animation: offline 1s ease-in-out infinite !important;
    -moz-animation: offline 1s ease-in-out infinite !important;
    animation: offline 1s ease-in-out infinite !important;
}
/* Offline animation configuration */
@-webkit-keyframes offline {
    0% { color: white; }
    50% { color: #d70000; }
    100% { color: white; }
}
@-moz-keyframes offline {
    0% { color: white; }
    50% { color: #d70000; }
    100% { color: white; }
}
@keyframes offline {
    0% { color: white; }
    50% { color: #d70000; }
    100% { color: white; }
}

/* Make all text white*/
p:not(.online), i, li {
  color: white !important;
}
/* Make all a tag a weird color*/
a {
  color: #6ba7ff !important;
}

/* Misc */
nav .top {
  background: #292929 !important;
}

nav .links {
  background: #242424 !important;
}

.links {
  margin-top: 10px;
}

.top {
  padding: 15px 10px 30px 10px !important;
}

/* What's new? 1.1 bug fixes */
/* Fixed logo appear on mobile devices */
/* Fixed all the common issue with replace logo and other areas */
/* This layout is now discontinued */

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