Assistant

s so every gif keeps its own shape) */ .em-gifwall { margin: 0 0 28px; padding: 9px 0; overflow: hidden; background: rgba(0, 0, 0, .62); border-block: 3px dashed var(--pink); } .em-gifwall .em-slide { animation-duration: 30s; } .em-gifwall img { display: block !important; flex: none; width: auto !important; height: 58px !important; max-width: none !important; margin: 0 14px 0 0 !important; } /* footer */ .em-foot { margin-top: 12px; text-align: center; font: 20px/1.3 var(--f-ui); letter-spacing: 2px; color: var(--mute); } .em-barcode { width: 220px; height: 38px; margin: 10px auto 6px; background: repeating-linear-gradient(90deg, var(--paper) 0 2px, transparent 2px 5px, var(--paper) 5px 6px, transparent 6px 10px, var(--paper) 10px 14px, transparent 14px 16px, var(--paper) 16px 17px, transparent 17px 21px); } /* ---------- responsive (container queries: it adapts to the width the site gives the bio box) ---------- */ @container (max-width: 820px) { .em-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .em-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; align-items: center; } .em-side .em-polaroid { grid-column: 1; grid-row: 1; width: 100%; margin: 14px 0 30px; } .em-side .em-k-colors { grid-column: 2; grid-row: 1; } .em-side .em-k-icons { grid-column: 1 / -1; grid-row: 2; } .em-plate-wrap { margin: -10px 8px 0; } .em-title { font-size: 34px; } } @container (max-width: 480px) { .em-oc { grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; } .em-badge { font-size: 26px; } .em-title { font-size: 28px; } .em-eq, .em-deck .em-reel:last-child { display: none; } .em-ic { width: 54px; height: 54px; } .em-stick.b { width: 96px; } } @media (prefers-reduced-motion: reduce) { .em-slide, .em-stick, .em-banner::after, .em-eq i, .em-deck .em-reel { animation: none !important; } } /* ========================================================================== MISC HELPERS ========================================================================== */ .em-wrap { container-type: inline-size; } .em-set { display: flex; flex: none; align-items: center; } /* ========================================================================== INTERESTS TABS (General / Music / Movies / Television / Books / Heroes / Games) Built for the site's narrow interests cell (~200px) and fine at any width. Each tab is wrapped in .em-int, so paste each one into its own interests box. ========================================================================== */ .em-int { position: relative; margin: 22px 0 8px; padding: 22px 10px 12px; font: 14px/1.5 var(--f-type); color: var(--paper); text-align: left; overflow-wrap: anywhere; background: linear-gradient(180deg, rgba(31, 6, 41, .94), rgba(10, 0, 16, .97)); border: 2px solid var(--pink); box-shadow: 0 0 0 3px #000, 0 0 22px var(--glow), inset 0 0 36px rgba(255, 31, 143, .08); outline: 2px dashed rgba(255, 124, 207, .45); outline-offset: -6px; } .em-int, .em-int *, .em-int *::before, .em-int *::after { box-sizing: border-box; } .em-int p { margin: 0 0 10px; } .em-int-t { position: absolute; top: -15px; left: 8px; max-width: calc(100% - 16px); padding: 3px 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 17px/1.25 var(--f-mark); letter-spacing: 1px; color: #000; background: var(--pink); transform: rotate(-2deg); box-shadow: 3px 3px 0 #000; } /* chips */ .em-cs { display: flex; flex-wrap: wrap; gap: 6px; } .em-c { display: inline-block; padding: 2px 8px 0; font: 16px/1.3 var(--f-ui); letter-spacing: .5px; color: var(--pink-hi); background: rgba(255, 31, 143, .1); border: 2px solid var(--pink-lo); border-radius: 3px; transition: transform .15s, background .15s, color .15s; } .em-c:hover { color: #000; background: var(--pink); border-color: var(--pink); transform: translateY(-2px) rotate(-2deg); } .em-c.hot { color: #000; background: var(--pink); border-color: #000; box-shadow: 2px 2px 0 #000; } .em-c.hot::before { content: "\2665\00a0"; } /* franchise rows (movies, tv, games) */ .em-fr { margin: 0 0 13px; } .em-fk { display: inline-block; max-width: 100%; margin: 0 0 6px; padding: 2px 10px 0; font: 15px/1.3 var(--f-mark); letter-spacing: 1px; color: var(--paper); background: #000; border-left: 6px solid var(--pink); box-shadow: 3px 3px 0 var(--pink-lo); } .em-fr.hot .em-fk { color: #000; background: var(--pink); border-left-color: #000; box-shadow: 3px 3px 0 #000; } /* general: typed profile */ .em-kv { padding: 5px 0 4px; border-bottom: 1px dotted rgba(255, 124, 207, .45); } .em-kv b { display: block; font: 17px/1.25 var(--f-ui); font-weight: normal; letter-spacing: 1px; text-transform: uppercase; color: var(--pink); } .em-kv span { display: block; } .em-warn { margin: 14px 0 2px; padding: 8px 8px 5px; text-align: center; font: 17px/1.2 var(--f-mark); color: #000; background: repeating-linear-gradient(-45deg, var(--pink) 0 14px, var(--pink-hi) 14px 28px); border: 3px solid #000; box-shadow: 3px 3px 0 var(--pink-lo); transform: rotate(-1deg); } /* music: mixtape tracklist */ .em-tl { counter-reset: tr; } .em-sd { margin: 10px 0 3px; font: 17px/1 var(--f-mark); letter-spacing: 2px; color: var(--pink); } .em-sd:first-child { margin-top: 0; } .em-tr { counter-increment: tr; display: flex; align-items: baseline; gap: 8px; padding: 4px 3px 2px; font: 18px/1.2 var(--f-ui); letter-spacing: .5px; border-bottom: 1px dashed rgba(255, 124, 207, .35); transition: background .15s, padding-left .15s; } .em-tr::before { content: counter(tr, decimal-leading-zero); min-width: 22px; color: var(--pink); } .em-tr:hover { background: rgba(255, 31, 143, .18); padding-left: 10px; } .em-tr.hot { color: var(--pink-hi); } .em-tr.hot::after { content: "\2665"; margin-left: auto; color: var(--pink); } /* books: shelves of spines (rows of 4 at most, so they stay tidy in a narrow box) */ .em-lbl { margin: 14px 0 6px; font: 16px/1 var(--f-ui); letter-spacing: 3px; color: var(--mute); } .em-int-t + .em-lbl { margin-top: 0; } .em-shelf { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 5px; padding: 0 8px; margin: 0 0 6px; border-bottom: 10px solid var(--pink-lo); box-shadow: 0 6px 0 #000; } .em-sp { display: block; width: 32px; min-height: 140px; padding: 8px 0; white-space: nowrap; text-align: center; writing-mode: vertical-rl; font: 17px/30px var(--f-ui); letter-spacing: 1px; color: #000; background: var(--pink); border: 2px solid #000; border-bottom: 0; box-shadow: inset 4px 0 0 rgba(255, 255, 255, .28), inset -3px 0 0 rgba(0, 0, 0, .22); transition: transform .2s; } .em-sp:nth-child(3n+2) { background: var(--paper); } .em-sp:nth-child(3n) { color: var(--pink-hi); background: #000; border-color: var(--pink); } .em-sp:hover { transform: translateY(-12px) rotate(-2deg); } .em-sp.s { min-height: 100px; } .em-sp.m { min-height: 135px; } .em-sp.l { min-height: 170px; } .em-sp.xl { min-height: 215px; } /* heroes: id cards */ .em-hg { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 15px 10px; padding-top: 4px; counter-reset: hc; } .em-hc { counter-increment: hc; position: relative; padding: 24px 6px 9px; text-align: center; background: #050007; border: 2px solid var(--pink); box-shadow: 3px 3px 0 var(--pink-lo); transform: rotate(-1deg); transition: transform .2s; } .em-hc:nth-child(2n) { transform: rotate(1.2deg); } .em-hc:hover { transform: rotate(0) scale(1.05); z-index: 2; } .em-hc::before { content: "#" counter(hc, decimal-leading-zero); position: absolute; top: -2px; left: -2px; padding: 1px 8px 0; font: 16px/1.4 var(--f-ui); letter-spacing: 1px; color: #000; background: var(--pink); } .em-hc b { display: block; font: 19px/1.1 var(--f-mark); font-weight: normal; color: var(--paper); } .em-hc i { display: block; margin-top: 5px; font: 15px/1.1 var(--f-ui); font-style: normal; letter-spacing: 1px; color: var(--pink-hi); } .em-hc.hot { background: linear-gradient(160deg, var(--pink-lo), #12001a 72%); box-shadow: 3px 3px 0 var(--pink), 0 0 18px var(--glow); } /* ========================================================================== NATIVE SITE THEME - recolors FriendRewind's OWN bars and boxes (name + PFP, contact, interests, friends, photos/videos/blog, comments, nav, profile tunes, music bar) so they match the layout. Selectors are the ones FriendRewind lists in its custom-code tutorial. !important is on purpose: the site's styles (and the music player) load after yours. Want the plain site look back? Delete everything from this banner to the end. ========================================================================== */ /* ---- text the site paints black ---- */ body.profile-page .master-container, body.profile-page .master-container .col { color: var(--paper) !important; } body.profile-page .master-container :where(td, th, li, p, dt, dd, label):not(.em-wrap *, .em-int *) { color: var(--paper); } /* ---- links ---- */ body.profile-page a:not([class^="em-"]):not([class*=" em-"]) { color: var(--pink-hi); text-decoration-color: var(--pink); } body.profile-page a:not([class^="em-"]):not([class*=" em-"]):hover { color: #fff; text-shadow: 0 0 8px var(--pink); } /* ---- big headings (profile name etc.) ---- */ body.profile-page :is(h1, h2, h3, h4) { font-family: var(--f-mark) !important; font-weight: normal !important; letter-spacing: 1px; color: var(--pink) !important; text-shadow: 2px 2px 0 #000, 0 0 14px var(--glow); } /* ---- the colored title bar on every box ---- */ body.profile-page .heading { background: var(--pink) !important; color: #000 !important; border: 0 !important; border-bottom: 3px solid #000 !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; } body.profile-page .heading :is(h1, h2, h3, h4, h5, span, a, b, strong) { color: #000 !important; text-shadow: none !important; font-family: var(--f-mark) !important; font-weight: normal !important; letter-spacing: 1px; } body.profile-page .heading :is(h1, h2, h3, h4, h5) { margin: 0 !important; font-size: 17px !important; line-height: 1.35 !important; } body.profile-page .heading :is(h1, h2, h3, h4)::before { content: "\2665\00a0"; } body.profile-page .heading a { text-decoration: underline; } body.profile-page .blurbs .heading { background: repeating-linear-gradient(-45deg, var(--pink) 0 14px, var(--pink-hi) 14px 28px) !important; } /* ---- the boxes ---- */ body.profile-page :is(.contact, .general-about, .table-section, .url-info, .badges-widget, .friends, .blog-preview, .photos-preview, .videos-preview, .profile-playlist-widget, .section) { box-sizing: border-box !important; color: var(--paper) !important; background: linear-gradient(180deg, rgba(31, 6, 41, .94), rgba(10, 0, 16, .97)) !important; border: 2px solid var(--pink) !important; border-radius: 0 !important; box-shadow: 0 0 0 3px #000, 0 0 22px var(--glow), inset 0 0 36px rgba(255, 31, 143, .08) !important; } /* a box inside a box is never framed twice */ body.profile-page :is(.contact, .general-about, .table-section, .url-info, .badges-widget, .friends, .blog-preview, .photos-preview, .videos-preview, .profile-playlist-widget, .section, .blurbs) :is(.contact, .general-about, .table-section, .url-info, .badges-widget, .friends, .blog-preview, .photos-preview, .videos-preview, .profile-playlist-widget, .section, .inner) { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; } /* the bio box only carries the bar, so the profile inside keeps its own cards */ body.profile-page .blurbs { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ---- profile picture: polaroid ---- */ body.profile-page .profile-pic img { background: var(--paper) !important; border: 5px solid var(--paper) !important; border-radius: 0 !important; box-shadow: 0 0 0 3px #000, 6px 6px 0 3px var(--pink), 0 0 26px var(--glow) !important; transform: rotate(-2deg); transition: transform .2s; } body.profile-page .profile-pic img:hover { transform: rotate(0) scale(1.03); } /* ---- mood / online / bio line ---- */ body.profile-page :is(.mood, .last-login, .bio-text) { color: var(--paper) !important; } body.profile-page .online { color: var(--pink) !important; text-shadow: 0 0 8px var(--glow); } body.profile-page .offline { color: var(--mute) !important; } /* ---- contact box ---- */ body.profile-page .contact img { filter: drop-shadow(0 0 2px var(--pink-hi)) drop-shadow(0 0 5px var(--pink)); } body.profile-page .contact a:hover { color: #000 !important; background: var(--pink); text-shadow: none; } /* ---- interests / details table ---- */ body.profile-page .details-table { border-collapse: collapse !important; } body.profile-page .details-table td, body.profile-page .details-table th { background: transparent !important; color: var(--paper) !important; border-color: rgba(255, 124, 207, .35) !important; } body.profile-page .details-table td:first-child { background: rgba(163, 17, 92, .2) !important; color: var(--pink) !important; font: 16px/1.2 var(--f-ui) !important; letter-spacing: .5px; text-transform: uppercase; border-right: 2px solid var(--pink-lo) !important; } body.profile-page .interest-content { color: var(--paper) !important; padding-left: 4px !important; padding-right: 4px !important; } /* ---- profile tunes ---- */ body.profile-page .profile-playlist-widget :is(h3, h4) { margin: 0 !important; padding: 4px 10px 2px; font-size: 17px !important; color: #000 !important; text-shadow: none !important; background: var(--pink); border-bottom: 3px solid #000; } body.profile-page .profile-playlist-widget li { color: var(--paper) !important; border-bottom: 1px dashed rgba(255, 124, 207, .35) !important; background: transparent !important; } body.profile-page .profile-playlist-widget li.current { background: var(--pink) !important; color: #000 !important; } body.profile-page .profile-playlist-widget li.current * { color: #000 !important; } body.profile-page .profile-playlist-widget li.played { opacity: .6; } body.profile-page .profile-playlist-widget .song-info { color: var(--paper) !important; } body.profile-page .profile-playlist-widget .song-artist { color: var(--mute) !important; } body.profile-page .pp-equalizer span { background: var(--pink) !important; } body.profile-page .pp-drag { color: var(--mute) !important; } /* ---- photos / videos / blog ---- */ body.profile-page :is(.photos-preview, .videos-preview) img { border: 2px solid var(--pink) !important; border-radius: 0 !important; box-shadow: 3px 3px 0 #000 !important; } /* ---- friends ---- */ body.profile-page .friends-grid img, body.profile-page #top8-grid img { border: 2px solid var(--pink) !important; border-radius: 0 !important; box-shadow: 3px 3px 0 #000 !important; transition: transform .15s, box-shadow .15s; } body.profile-page .friends-grid img:hover, body.profile-page #top8-grid img:hover { transform: scale(1.08) rotate(-2deg); box-shadow: 3px 3px 0 var(--pink), 0 0 16px var(--glow) !important; } body.profile-page :is(.friends-grid, #top8-grid) a { color: var(--pink-hi) !important; font-family: var(--f-ui) !important; font-size: 16px; letter-spacing: .5px; } /* ---- comments ---- */ body.profile-page .comment-count-links, body.profile-page #comments :is(p, span) { color: var(--mute) !important; } body.profile-page .comments-table { border-collapse: separate !important; border-spacing: 0 8px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.profile-page .comments-table td { background: rgba(10, 0, 16, .92) !important; color: var(--paper) !important; border: 2px solid var(--pink-lo) !important; vertical-align: top; } body.profile-page .comments-table td:first-child { background: rgba(163, 17, 92, .3) !important; border-right: 0 !important; text-align: center; } body.profile-page .comments-table img { border: 2px solid var(--pink) !important; border-radius: 0 !important; } body.profile-page .cb-author-name { color: var(--pink) !important; font: 17px/1.2 var(--f-mark) !important; text-decoration: none; } body.profile-page .cb-content-cell { color: var(--paper) !important; } body.profile-page .comment-reply { color: var(--pink-hi) !important; font: 16px/1 var(--f-ui) !important; letter-spacing: 1px; text-transform: uppercase; } body.profile-page .cb-like-btn { color: var(--pink-hi) !important; background: transparent !important; border: 2px solid var(--pink-lo) !important; border-radius: 0 !important; font-family: var(--f-ui) !important; } body.profile-page .cb-like-btn:hover { color: #000 !important; background: var(--pink) !important; border-color: var(--pink) !important; } /* ---- badges ---- */ body.profile-page .badge-item { border-color: var(--pink-lo) !important; } body.profile-page .badge-label { color: var(--pink-hi) !important; } /* ---- top nav ---- */ body.profile-page nav { border-bottom: 3px solid var(--pink) !important; box-shadow: 0 4px 24px var(--glow); } body.profile-page nav .top { background: linear-gradient(180deg, var(--ink-3), var(--ink)) !important; border-bottom: 1px solid var(--pink-lo) !important; color: var(--paper) !important; } body.profile-page nav .top :is(input, select) { background: #000 !important; color: var(--pink-hi) !important; border: 2px solid var(--pink-lo) !important; border-radius: 0 !important; font-family: var(--f-ui) !important; } body.profile-page nav .links { background: #000 !important; border-color: var(--pink-lo) !important; } body.profile-page nav .links a { color: var(--pink-hi) !important; font: 18px/1.2 var(--f-ui) !important; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; } body.profile-page nav .links a:hover { color: #000 !important; background: var(--pink) !important; text-shadow: none !important; } /* ---- music bar (player styles load after yours, hence the !importants) ---- */ .music-bar { background: linear-gradient(180deg, var(--ink-3), var(--ink)) !important; border-top: 3px solid var(--pink) !important; box-shadow: 0 -6px 26px var(--glow) !important; color: var(--paper) !important; } .music-bar::before { display: none !important; } .music-bar :is(.bar-title, .bar-now-playing) { color: var(--pink-hi) !important; font-family: var(--f-ui) !important; letter-spacing: .5px; } .music-bar :is(.bar-time-display, .bar-time-total) { color: var(--mute) !important; font-family: var(--f-ui) !important; } .music-bar .bar-progress { background: #000 !important; border: 1px solid var(--pink-lo) !important; border-radius: 0 !important; } .music-bar .bar-progress-fill { background: linear-gradient(90deg, var(--pink-lo), var(--pink)) !important; box-shadow: 0 0 8px var(--glow) !important; border-radius: 0 !important; } .music-bar .bar-btn { color: var(--pink-hi) !important; background: transparent !important; border: 2px solid var(--pink) !important; border-radius: 0 !important; } .music-bar .bar-btn:hover { color: #000 !important; background: var(--pink) !important; } .music-bar .volume-slider { accent-color: var(--pink) !important; } /* OPTIONAL - more room: the interests boxes (and everything else) get about 100px wider. Remove the comment marks around the next line to use it. body.profile-page .master-container { max-width: 1120px !important; width: calc(100% - 24px) !important; } */