opera neon theme

Tags: opera, modern, fluent, neumorphism, flat design, computer, webcore

Description:

become a walking advertisement for a six year old browser that was never made for daily use. at least it still has flash support

NOTABLE FEATURES >>>

* custom background and pre-main content gif

* silly effect when you hover over profile icons

* custom omnibox styled search bar (if you don't wanna shill google just look for the ".search-wrapper::before" attribute and change the google.com to your search engine of choice)

* contacts sidebar with simple icons that i took from the first svg icon website i found

enjoy layout-ing

Preview:

click on the image for a larger preview

Code:

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

<style>
/* stuff you can probably get away with changing */

main::before {
  width: 100%;
  height: 400px;
  display: block;
  content: "";
  background-image: url(https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/operaneon/banner.gif); /* pre-content image banner thing */
  background-repeat: no-repeat;
  background-position: center 36%;
  background-size: cover;
  border-radius: 15px;
}

body {
  width: 100%;
  height: 100%;
  background: url(https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/operaneon/background.jpg) black fixed top; /* background image!! */
  background-size: 100% 100%;
}



/* general stuff */

@font-face {
  font-family: Roboto;
  src: url(https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap);
}

:root {
  --gray: transparent;
  --logo-blue: transparent;
  --darker-blue: transparent;
  --lighter-blue: transparent;
  --even-lighter-blue: transparent;
  --lightest-blue: transparent;
  --dark-orange: transparent;
  --light-orange: transparent;
  --even-lighter-orange: transparent;
}

h1, h3, h4, p, b, i, a, li, td, form, .right, .logout-btn, .section, nav .links a, .links li::after, .profile .friends .person p, footer p, .profile .url-info p, .count {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 12px;
  color: white !important;
  text-shadow: 1px 1px 3px black;
}
.profile h1, h3, h3 a, h4 {
  font-size: 22px;
}

.container {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 10% 0 10%;
  background-color: rgba(0,0,0,0.4);
}

nav .top .left .logo {
  filter: drop-shadow(1px 1px 1px black);
}
nav .links {
  text-align: center;
}

main {
  background-color: transparent;
}
main .left {
  width: 360px !important;
  padding-top: 12px;
}

.table-section {
  margin: 0 0 24px 0 !important;
}
.mood, .url-info {
  margin: 24px 0 24px 0 !important;
}

.profile-info, .comments-table, .comments-table td, .comment-replies {
  border: none;
}
.comment-replies, .comments-table td:not(:first-child) a:not(:first-of-type) button {
  margin-left: 24px;
}
.comment-reply:not(:first-child) {
  border-top: none;
}

footer, .copyright {
  margin-bottom: 0;
  padding-bottom: 8px;
}

label, form button, .profile .contact .heading h4, .contact .inner a, .blurbs .heading, .right h4, .report a {
  padding: 0;
  border: 0;
  font-size: 0;
}



/* search bar styling */

.search-wrapper::before {
  content: url(https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=24);
  margin-right: 8px;
}
@media (max-width: 800px) {
  .search-wrapper::before {
    display: none;
  }
}

.search-wrapper {
  width: 100%;
}

input {
  width: 80%;
  padding: 8px 0 8px 0;
  vertical-align: bottom;
  border: none;
  border-bottom: solid 1px rgba(255,255,255,0.5);
  background-color: transparent;
  color: white;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  caret-color: #0BE874;
}
input:focus {
  outline: none;
}



/* pulse anim on pfp and contacts */

@keyframes pulseOn {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 1.15, 1.15);
    transform: scale3d(1.15, 1.15, 1.15);
    filter: brightness(1.2);
  }
  to {
    -webkit-transform: scale3d(1.025, 1.025, 1.025);
    transform: scale3d(1.025, 1.025, 1.025);
  }
}
@keyframes pulseOff {
  from {
    -webkit-transform: scale3d(1.025, 1.025, 1.025);
    transform: scale3d(1.025, 1.025, 1.025);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.profile-pic img, .person a img, .pfp-fallback, .comments-table td:first-child img:not(.icon) {
  border-radius: 100%;
  animation: pulseOff 0.2s forwards;
}
.profile-pic img:hover, .person a img:hover, .pfp-fallback:hover, .comments-table td:first-child img:not(.icon):hover {
  animation: pulseOn 0.2s forwards;
}

.person {
  margin-right: 10px;
}



/* friends & comments */

.friends-grid {
  text-align: center;
}

.friends-grid .person:nth-child(1), .friends-grid .person:nth-child(2), .friends-grid .person:nth-child(3), .friends-grid .person:nth-child(6), .friends-grid .person:nth-child(7), .friends-grid .person:nth-child(8) {
  width: 31%;
}
.friends-grid .person:nth-child(4), .friends-grid .person:nth-child(5) {
  width: 35%;
}

.comments-table td {
  border-spacing: 24px !important;
}



/* contacts. credits to asscastle for the base of this section */

@keyframes hoverOn {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: scale3d(1.15, 1.15, 1.15);
    transform: scale3d(1.15, 1.15, 1.15);
  }
}
@keyframes hoverOff {
  from {
    -webkit-transform: scale3d(1.15, 1.15, 1.15);
    transform: scale3d(1.15, 1.15, 1.15);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.profile .contact {
  position: fixed;
  left: 0;
  top: 0;
  width: 30px;
}

.f-row, .f-col {
  display: block !important;
}

.contact .inner img {
  display: none;
}

.contact .inner a {
  display: block;
  text-align: center;
  animation: hoverOff 0.2s forwards;
}
.contact .inner a:hover {
  animation: hoverOn 0.2s forwards;
}

.contact .inner .f-row .f-col {
  padding: 16px;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) {
  margin-top: -24px !important;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before {
  display: block;
  content: url(https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/operaneon/icons/plus.svg);
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before {
  display: block;
  content: url(https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/operaneon/icons/bookmark.svg);
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a::before {
  display: block;
  content: url(https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/operaneon/icons/chat.svg);
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a::before {
  display: block;
  content: url(https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/operaneon/icons/download.svg);
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a::before {
  display: block;
  content: url(https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/operaneon/icons/mail.svg);
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a::before {
  display: block;
  content: url(https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/operaneon/icons/cross.svg);
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a::before {
  display: block;
  content: url(https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/operaneon/icons/people.svg);
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a::before {
  display: block;
  content: url(https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/operaneon/icons/flag.svg);
}



/* report button */

.report {
  padding: 0;
}

.report a img, .online img {
  display: none;
}

.report a {
  display: block;
  text-align: center;
  animation: hoverOff 0.2s forwards;
}
.report a:hover {
  animation: hoverOn 0.2s both;
}
.report a::before {
  display: block;
  content: url(https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/operaneon/icons/flag.svg);
}
</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 0 of 0 comments ( View all | Add Comment )