Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Neon Pink

Author: Def3ct
Category: Neon/Lo-Fi
Created: June 12, 2025
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
/* -- Reset & Base Styles -- */
body {
    background-color: #060d18 !important; /* Dark navy background */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzEiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMTAiIGZpbGw9IiMzYjA2MjAiIGZpbGwtb3BhY2l0eT0iMC41Ii8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMDYwZDE4Ii8+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzEpIi8+PC9zdmc+') !important;
    font-family: 'Segoe UI', 'Roboto', sans-serif !important;
    font-size: 12px !important;
    color: #ffe0f0 !important;
    line-height: 1.5 !important;
    text-shadow: 0 0 2px rgba(255, 0, 212, 0.3) !important;
}

main {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* -- Neon Module Containers -- */
.contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments {
    border: 1px solid rgba(255, 0, 212, 0.5) !important;
    border-radius: 4px !important;
    background: rgba(3, 10, 18, 0.9) !important; /* Dark background */
    box-shadow: 0 0 15px rgba(255, 0, 212, 0.2), inset 0 0 5px rgba(255, 0, 212, 0.1) !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    backdrop-filter: blur(5px) !important;
}

/* Add a neon effect to the border of containers */
.contact::before, .url-info::before, .table-section::before, 
.tunes::before, .blog-preview::before, .blurbs::before, 
.friends::before, #comments::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border: 1px solid rgba(255, 0, 212, 0.8) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 5px rgba(255, 0, 212, 0.5), inset 0 0 5px rgba(255, 0, 212, 0.2) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* -- Neon Headers -- */
.contact .heading, .url-info .heading, .table-section .heading, .tunes .heading, 
.blog-preview h4, .blurbs .heading, .friends .heading, #comments .heading {
    background: linear-gradient(to right, rgba(40, 0, 25, 0.95), rgba(60, 0, 45, 0.95)) !important; /* Dark pink gradient */
    color: #ff2bff !important;
    font-weight: bold !important;
    font-size: 13px !important;
    text-shadow: 0 0 5px rgba(255, 0, 212, 0.7) !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 0, 212, 0.3) !important;
    text-align: left !important;
    position: relative !important;
    overflow: hidden !important;
}

/* -- Header light scan effect -- */
.contact .heading::after, .url-info .heading::after, .table-section .heading::after, 
.tunes .heading::after, .blog-preview h4::after, .blurbs .heading::after, 
.friends .heading::after, #comments .heading::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(to right, transparent, rgba(255, 0, 212, 0.1), transparent) !important;
    animation: neon-scan 4s infinite ease-in-out !important;
    z-index: 1 !important;
}

@keyframes neon-scan {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* -- Window Content -- */
.contact .inner, .url-info p, .table-section .inner, .tunes .inner, 
.blog-preview, .blurbs .inner, .friends .inner, #comments .inner {
    padding: 12px !important;
    color: #ffd1f0 !important;
    background-color: rgba(2, 8, 15, 0.95) !important; /* Dark content area */
}

/* -- Neon Buttons -- */
.contact a, .profile-info a {
    display: block !important;
    position: relative !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 11px !important;
    line-height: 24px !important;
    font-weight: normal !important;
    color: #ff2bff !important;
    background: rgba(3, 12, 20, 0.9) !important; /* Dark button background */
    border: 1px solid rgba(255, 0, 212, 0.5) !important;
    border-radius: 3px !important;
    padding: 0 12px !important;
    margin: 0 auto 10px auto !important;
    width: 80% !important;
    text-shadow: 0 0 3px rgba(255, 0, 212, 0.7) !important;
    box-shadow: 0 0 5px rgba(255, 0, 212, 0.3), inset 0 0 3px rgba(255, 0, 212, 0.2) !important;
    transition: all 0.2s ease !important;
}

.contact a:hover, .profile-info a:hover {
    background: rgba(50, 0, 40, 0.9) !important; /* Darker hover state */
    color: #ff80ff !important;
    border-color: rgba(255, 0, 212, 0.8) !important;
    box-shadow: 0 0 10px rgba(255, 0, 212, 0.5), inset 0 0 5px rgba(255, 0, 212, 0.3) !important;
    text-shadow: 0 0 5px rgba(255, 0, 212, 1) !important;
}

.contact a:active, .profile-info a:active {
    background: rgba(70, 0, 60, 0.9) !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5) !important;
}

.contact a:last-child { 
    margin-bottom: 0 !important; 
}

.contact a img { 
    display: none !important; 
}

/* -- Profile Info -- */
.profile-info {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.profile-info .heading {
    display: none !important;
}

.profile-info .inner {
    padding: 0 !important;
    background: none !important;
}

.profile-info a {
    margin-top: 10px !important;
}

/* -- Profile Picture & Bio -- */
.profile-pic img {
    border: 1px solid rgba(255, 0, 212, 0.5) !important;
    box-shadow: 0 0 15px rgba(255, 0, 212, 0.3) !important;
    border-radius: 2px !important;
}

.general-about {
    background: rgba(2, 8, 15, 0.9) !important; /* Dark bio section */
    border: 1px solid rgba(255, 0, 212, 0.3) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(255, 0, 212, 0.2) !important;
    padding: 10px !important;
    margin-bottom: 15px !important;
}

.general-about .details p {
    color: #ffd1f0 !important;
    text-shadow: 0 0 2px rgba(255, 0, 212, 0.3) !important;
}

/* -- Friends Grid -- */
.friends-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

.friends-grid .person {
    margin-bottom: 10px !important;
    text-align: center !important;
}

.friends-grid img {
    max-width: 75px !important;
    border: 1px solid rgba(255, 0, 212, 0.5) !important;
    box-shadow: 0 0 8px rgba(255, 0, 212, 0.3) !important;
    border-radius: 2px !important;
    background: rgba(2, 8, 15, 0.9) !important; /* Dark profile pic background */
    padding: 2px !important;
    transition: all 0.2s ease !important;
}

.friends-grid img:hover {
    box-shadow: 0 0 12px rgba(255, 0, 212, 0.5) !important;
}

.friends-grid a {
    color: #ff2bff !important;
    text-decoration: none !important;
    text-shadow: 0 0 2px rgba(255, 0, 212, 0.5) !important;
}

.friends-grid a:hover {
    color: #ff80ff !important;
    text-shadow: 0 0 5px rgba(255, 0, 212, 0.8) !important;
}

/* -- Neon Style Tables -- */
.details-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid rgba(255, 0, 212, 0.3) !important;
    background: rgba(2, 6, 12, 0.95) !important; /* Dark table background */
}

.details-table th {
    background: rgba(45, 0, 35, 0.95) !important; /* Dark pink header */
    color: #ff2bff !important;
    font-weight: bold !important;
    text-align: left !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 0, 212, 0.3) !important;
    text-shadow: 0 0 3px rgba(255, 0, 212, 0.5) !important;
}

.details-table td {
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 0, 212, 0.2) !important;
    vertical-align: top !important;
    color: #ffd1f0 !important;
}

.details-table tr:nth-child(odd) td {
    background-color: rgba(4, 12, 22, 0.95) !important; /* Dark odd rows */
}

.details-table tr:nth-child(even) td {
    background-color: rgba(2, 8, 15, 0.95) !important; /* Dark even rows */
}

/* -- View All Link -- */
.friends .more {
    font-size: 11px !important;
    color: #ff2bff !important;
    text-decoration: none !important;
    position: absolute !important;
    right: 12px !important;
    top: 8px !important;
    text-shadow: 0 0 3px rgba(255, 0, 212, 0.7) !important;
    z-index: 2 !important;
}

.friends .more:hover {
    color: #ff80ff !important;
    text-shadow: 0 0 5px rgba(255, 0, 212, 1) !important;
}

/* -- Links -- */
a {
    color: #ff2bff !important;
    text-decoration: none !important;
    text-shadow: 0 0 2px rgba(255, 0, 212, 0.3) !important;
    transition: all 0.2s ease !important;
}

a:hover {
    color: #ff80ff !important;
    text-shadow: 0 0 5px rgba(255, 0, 212, 0.7) !important;
}

/* -- Scrollbars -- */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: rgba(2, 8, 15, 0.9) !important; /* Dark scrollbar track */
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 212, 0.5) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 5px rgba(255, 0, 212, 0.3) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 0, 212, 0.7) !important;
    box-shadow: 0 0 8px rgba(255, 0, 212, 0.5) !important;
}

/* -- Status Colors -- */
.online {
    color: #4affb8 !important;
    text-shadow: 0 0 5px rgba(74, 255, 184, 0.5) !important;
}

.offline {
    color: #ff5a7a !important;
    text-shadow: 0 0 5px rgba(255, 90, 122, 0.5) !important;
}

/* -- Comments Table -- */
.comments-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid rgba(255, 0, 212, 0.3) !important;
    background: rgba(2, 6, 12, 0.95) !important; /* Dark table background */
}

.comments-table td {
    padding: 10px !important;
    border: 1px solid rgba(255, 0, 212, 0.2) !important;
    background: rgba(3, 10, 18, 0.9) !important; /* Dark table cells */
}

.comments-table img {
    max-width: 75px !important;
    border: 1px solid rgba(255, 0, 212, 0.3) !important;
    box-shadow: 0 0 8px rgba(255, 0, 212, 0.2) !important;
    border-radius: 2px !important;
    background: rgba(2, 8, 15, 0.9) !important; /* Dark profile pic background */
    padding: 2px !important;
}

/* -- Footer -- */
#footer {
    border-top: 1px solid rgba(255, 0, 212, 0.3) !important;
    background: rgba(2, 8, 15, 0.9) !important; /* Dark footer */
    box-shadow: 0 0 10px rgba(255, 0, 212, 0.2) !important;
    padding: 10px !important;
    margin-top: 20px !important;
    text-shadow: 0 0 2px rgba(255, 0, 212, 0.3) !important;
}

/* -- Mood Section -- */
.mood {
    background: rgba(2, 8, 15, 0.9) !important; /* Dark mood section */
    border: 1px solid rgba(255, 0, 212, 0.3) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(255, 0, 212, 0.2) !important;
    padding: 10px !important;
    margin-bottom: 15px !important;
    color: #ffd1f0 !important;
}

.mood b {
    color: #ff2bff !important;
    text-shadow: 0 0 3px rgba(255, 0, 212, 0.5) !important;
}

/* -- Horizontal Divider Lines -- */
hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, rgba(255, 0, 212, 0.5), transparent) !important;
    margin: 15px 0 !important;
}

/* -- Additional Animations -- */
@keyframes pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

.contact::before, .url-info::before, .table-section::before, 
.tunes::before, .blog-preview::before, .blurbs::before, 
.friends::before, #comments::before {
    animation: pulse 3s infinite ease-in-out !important;
}

/* -- Profile Icons -- */
.online img, .offline img {
    filter: brightness(1.5) drop-shadow(0 0 3px rgba(255, 0, 212, 0.5)) !important;
}

/* -- Music Player Elements -- */
#profile-playlist, .playlist-controls {
    background: rgba(2, 8, 15, 0.9) !important; /* Dark music player */
    border: 1px solid rgba(255, 0, 212, 0.3) !important;
    border-radius: 4px !important;
    padding: 8px !important;
}

.progress-bar {
    background: rgba(20, 0, 20, 0.9) !important; /* Dark progress bar background */
    border: 1px solid rgba(255, 0, 212, 0.3) !important;
    border-radius: 2px !important;
    height: 6px !important;
}

.progress {
    background: linear-gradient(to right, #d400aa, #ff2bff) !important; /* Pink gradient */
    border-radius: 2px !important;
    height: 100% !important;
    box-shadow: 0 0 5px rgba(255, 0, 212, 0.5) !important;
}

button.play, button.pause, button.next, button.prev {
    background: rgba(3, 12, 20, 0.9) !important; /* Dark buttons */
    border: 1px solid rgba(255, 0, 212, 0.5) !important;
    border-radius: 3px !important;
    color: #ff2bff !important;
    padding: 3px 8px !important;
    margin: 0 2px !important;
    text-shadow: 0 0 3px rgba(255, 0, 212, 0.7) !important;
    box-shadow: 0 0 5px rgba(255, 0, 212, 0.3) !important;
    transition: all 0.2s ease !important;
}

button.play:hover, button.pause:hover, button.next:hover, button.prev:hover {
    background: rgba(50, 0, 40, 0.9) !important; /* Dark hover state */
    color: #ff80ff !important;
    border-color: rgba(255, 0, 212, 0.8) !important;
    box-shadow: 0 0 10px rgba(255, 0, 212, 0.5) !important;
    text-shadow: 0 0 5px rgba(255, 0, 212, 1) !important;
}

.song-title {
    color: #ff2bff !important;
    text-shadow: 0 0 3px rgba(255, 0, 212, 0.5) !important;
}

.artist-name {
    color: #ffa0e0 !important;
}

/* -- Custom UI Interface Elements -- */
.neon-input {
    background: rgba(2, 8, 15, 0.9) !important; /* Dark input field */
    border: 1px solid rgba(255, 0, 212, 0.3) !important;
    border-radius: 3px !important;
    color: #ffd1f0 !important;
    padding: 5px 10px !important;
    box-shadow: 0 0 5px rgba(255, 0, 212, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.5) !important;
}

.neon-input:focus {
    border-color: rgba(255, 0, 212, 0.7) !important;
    box-shadow: 0 0 10px rgba(255, 0, 212, 0.4), inset 0 0 3px rgba(0, 0, 0, 0.5) !important;
    outline: none !important;
}

/* -- Header Navigation -- */
.nav-tabs {
    border-bottom: 1px solid rgba(255, 0, 212, 0.3) !important;
    background: rgba(2, 8, 15, 0.9) !important; /* Dark navigation */
}

.nav-tabs a {
    background: rgba(3, 12, 20, 0.9) !important; /* Dark tab */
    border: 1px solid rgba(255, 0, 212, 0.3) !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0 !important;
    color: #ff2bff !important;
    padding: 5px 15px !important;
    margin-right: 2px !important;
    text-shadow: 0 0 3px rgba(255, 0, 212, 0.5) !important;
}

.nav-tabs a:hover, .nav-tabs a.active {
    background: rgba(50, 0, 40, 0.9) !important; /* Dark active/hover tab */
    border-color: rgba(255, 0, 212, 0.5) !important;
    color: #ff80ff !important;
    text-shadow: 0 0 5px rgba(255, 0, 212, 0.8) !important;
}

/* -- Notification Badge -- */
.badge {
    background: rgba(255, 0, 212, 0.8) !important;
    color: #0a1220 !important;
    border-radius: 10px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    box-shadow: 0 0 5px rgba(255, 0, 212, 0.5) !important;
}

/* -- Blinking Cursor Effect -- */
.cursor-effect::after {
    content: '|' !important;
    animation: blink 1s infinite step-start !important;
    color: #ff2bff !important;
    text-shadow: 0 0 5px rgba(255, 0, 212, 0.8) !important;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* -- Matrix-style Code Background Effect -- */
.matrix-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -10 !important;
    background: #060d18 !important; /* Dark matrix background */
    opacity: 0.05 !important;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIGZpbGw9IiNmZjAwZDQiIGZpbGwtb3BhY2l0eT0iMC4yIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm4pIi8+PC9zdmc+') !important;
}

/* -- Holographic Effect for Profile Picture -- */
.profile-pic {
    position: relative !important;
    overflow: hidden !important;
}

.profile-pic::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(45deg, transparent, rgba(255, 0, 212, 0.1), transparent) !important;
    transform: rotate(30deg) !important;
    animation: holographic 3s infinite linear !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

@keyframes holographic {
    0% { transform: translateX(-50%) rotate(30deg); }
    100% { transform: translateX(50%) rotate(30deg); }
}

/* -- Main Content Area -- */
.master-container, main {
    background: transparent !important;
}

/* -- Global Elements -- */
.row, .col {
    background: transparent !important;
}

/* -- FriendRewind Top Nav -- */
.top-nav, .navbar, .nav {
    background: rgba(2, 8, 15, 0.9) !important; /* Dark navigation */
    border-color: rgba(255, 0, 212, 0.3) !important;
}

/* Make sure white backgrounds are eliminated */
.inner, .section, .content-block {
    background-color: rgba(2, 8, 15, 0.9) !important;
}</style>