Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Profile Theme by AlthIndor */
- /* Designed by Moonchu + Alth */
- :root {
- --border: #FFC000;
- --highlight: #FFE000;
- --links: #B380FF;
- --spritesheet: url('https://i.imgur.com/z1Luve9.png');
- --title1: 'Panel 1 Heading';
- --title2: 'Panel 2 Heading';
- --title3: 'Panel 3 Heading';
- --title4: 'Panel 4 Heading';
- --title5: 'Panel 5 Heading';
- --title6: 'Panel 6 Heading';
- }
- html, body {
- background: #101010;
- min-height: 860px;
- }
- body {position: relative;}
- body a, .panel h2, .media_panel {transition: all .5s ease-in-out;}
- body a {text-decoration: none !important;}
- ::selection {
- background: royalblue;
- color: #FFFFFF;
- }
- /* Sprite Sheet */
- #columns, #column_1 :is(.spoiler-title, .spoiler-control, .spoiler), #column_1 .spoiler-title::after, #column_2, #column_3::before {background: var(--spritesheet);}
- #column_1 :is(.spoiler-title, .spoiler-control), #column_1 .spoiler-title::after {background-position: 0 -1478px;}
- #column_1 .spoiler-control {background-position-x: -260px;}
- #column_1 .spoiler-title::after {background-position-x: right;}
- #column_1 .spoiler {background-position: 0 -1330px;}
- #column_2 {background-position: -355px -135px;}
- #column_3::before {background-position: -151px -990px;}
- #column_1 .spoiler-wrapper:nth-of-type(1) .spoiler {background-position-x: -394px;}
- #column_1 .spoiler-wrapper:nth-of-type(2) .spoiler {background-position-x: -522px;}
- #column_1 .spoiler-wrapper:nth-of-type(3) .spoiler {background-position-x: -637px;}
- #column_1 .spoiler-wrapper:nth-of-type(4) .spoiler {background-position-x: -753px;}
- #column_1 .spoiler-wrapper:nth-of-type(5) .spoiler {background-position-x: -880px;}
- #column_1 .spoiler-wrapper:nth-of-type(6) .spoiler {background-position-x: -995px;}
- #id_contact li *, #id_comments a, .media_panel h2 {mask: var(--spritesheet);}
- #id_contact li:nth-of-type(1) * {mask-position: 0 -1330px;}
- #id_contact li:nth-of-type(2) * {mask-position: -48px -1330px;}
- #id_contact li:nth-of-type(3) * {mask-position: -96px -1330px;}
- #id_comments a {mask-position: -142px -1330px;}
- .media_panel h2 {mask-position: -196px -1341px;}
- /* Fonts */
- @font-face {
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 300 800;
- src: url('https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2') format('woff2');
- }
- @font-face {
- font-family: 'Big Shoulders';
- font-style: normal;
- font-weight: 800;
- src: url('https://fonts.gstatic.com/s/bigshoulders/v4/qFdR35CPh40oITJ69S3GFqy5-BQAf4qnj7feObrH-dahg9U.woff2') format('woff2');
- }
- /* Wallpaper Animation */
- #panel-details, #panel-details div {
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- }
- #panel-details div {position: absolute;}
- #panel-details {
- background: url('https://i.imgur.com/Dak1jCa.jpeg') bottom right / cover;
- position: fixed;
- overflow: hidden;
- }
- @keyframes Twinkle {
- from {background-position-x: 0, right;}
- to {background-position-x: 440px, right;}
- }
- @keyframes Drift {
- from {background-position-x: 0;}
- to {background-position-x: -1000px;}
- }
- #panel-details .hd {
- background:
- url('https://i.imgur.com/XrF1bNC.png'),
- url('https://i.imgur.com/SSoMmQU.jpg') bottom right / cover;
- animation: Twinkle 10s linear infinite;
- mix-blend-mode: color-dodge;
- }
- #panel-details :is(.bd, .ft) {
- animation: Drift 60s linear infinite;
- mix-blend-mode: soft-light;
- opacity: .5;
- }
- #panel-details .bd {background: url('https://i.imgur.com/cUiXptz.jpeg');}
- #panel-details .ft {
- background: url('https://i.imgur.com/zvQXH7U.jpeg');
- animation-direction: reverse;
- }
- /* Unsupported Warning */
- #columns {display: none;}
- #footer {
- content: url('https://i.imgur.com/ieDBu4C.png');
- background: #FFFFFF40;
- box-shadow: 0 1px 3px #00000040;
- border-radius: 10px;
- padding: 20px;
- position: absolute;
- top: calc(50% - 200px);
- left: calc(50% - 200px);
- z-index: 1;
- }
- body {
- #columns {display: block;}
- #footer {display: none;}
- }
- /* Header */
- #viewer #gaia_header, #viewer #gaia_header :is(ul, li, a) {
- height: 30px !important;
- box-sizing: border-box;
- }
- #viewer #gaia_header {
- background: #FFFFFF40 !important;
- box-shadow: 0 1px 3px #00000040;
- }
- #gaia_header ul {
- display: flex !important;
- width: auto !important;
- min-width: 340px;
- font: 700 0/23px 'Open Sans', sans-serif !important;
- }
- #gaia_header #header_left {
- background: linear-gradient(-45deg, transparent 21px, rgb(16,16,16,.85) 21px) !important;
- padding: 0 29px 0 5px !important;
- }
- #header_left li.spacer {display: none !important;}
- #gaia_header #header_right {
- background: linear-gradient(45deg, transparent 21px, rgb(16,16,16,.85) 21px) !important;
- float: right;
- justify-content: right;
- padding: 0 5px 0 29px !important;
- }
- #gaia_header a, #gaia_header a::before {font-size: 11px !important;}
- #header_right a[href*='?mode=edit'], #header_right a[href*='report.php'] {font-size: 0 !important;}
- #header_right a[href*='?mode=edit']::before {content: 'edit my profile';}
- #header_right a[href*='report.php']::before {content: 'report profile';}
- #viewer #gaia_header a {
- display: inline-block !important;
- color: #FFFFFF !important;
- text-transform: uppercase;
- padding: 0 5px;
- border-top: 3px solid #FFFFFF00;
- }
- #viewer #gaia_header a:hover {
- color: var(--highlight) !important;
- border-color: var(--highlight);
- }
- #gaia_header img {
- mask: url('https://i.imgur.com/cGGVY2x.png');
- background: currentColor;
- width: 0;
- height: 15px;
- padding: 0 34px 0 0;
- margin-top: -1px;
- }
- /* Columns */
- #columns, #pictures_container, #texts_container {
- top: calc(50% - 330px);
- left: calc(50% - 550px);
- }
- #columns, #column_1 {
- width: 1100px;
- height: 660px;
- }
- #columns .column {
- font-size: 0;
- margin: 0;
- }
- #columns .column, #column_3::before {position: absolute;}
- #column_3 {display: contents;}
- #column_1 {
- contain: layout;
- top: 0;
- left: 0;
- }
- #column_2 {
- width: 390px;
- height: 390px;
- top: 135px;
- left: 355px;
- border-radius: 50%;
- clip-path: inset(0 49px 37px 49px);
- }
- #column_3::before {
- content: '';
- pointer-events: none;
- width: 798px;
- height: 208px;
- top: 330px;
- left: 151px;
- }
- /* Panels */
- .panel, .panel h2 {
- background: none;
- box-sizing: border-box;
- color: #FFFFFF;
- margin: 0;
- padding: 0;
- }
- .panel {
- font: 10px/1.6 'Open Sans', sans-serif;
- position: absolute;
- overflow: hidden;
- }
- .panel a {color: var(--links);}
- .panel a:hover {color: var(--highlight);}
- .panel img {max-width: unset !important;}
- #column_2 .panel {
- width: 100%;
- height: 100%;
- text-align: center;
- padding: 62px 74px;
- top: -500px;
- left: 0;
- overflow-y: scroll;
- scrollbar-width: none;
- .buttons {
- top: 45px;
- right: 75px;
- }
- transition: top 0s 86400s linear;
- }
- #column_1 h2, #column_2 h2 {display: none;}
- #column_2 img {max-width: 100% !important;}
- .bbcode-swapping-image {
- filter: invert(1);
- mix-blend-mode: screen;
- }
- /* Tab Buttons */
- #column_1 .custom_panel {display: contents;}
- #column_1 :is(div[id*='content'], .spoiler), #column_1 .spoiler-title::after {position: absolute;}
- #column_1 div[id*='content'] {
- display: grid;
- gap: 10px 0;
- grid-auto-flow: column;
- grid-template: repeat(3, 60px) / 250px 584px 250px;
- .spoiler-wrapper, .spoiler-control {
- border: none;
- padding: 0;
- }
- .spoiler-wrapper, .spoiler-title {position: relative;}
- .spoiler-control-show, .spoiler {display: block;}
- .spoiler-control-hide, span {display: none;}
- top: 195px;
- left: 8px;
- .spoiler-wrapper:nth-of-type(n+4) {
- grid-column: 3;
- text-align: right;
- }
- .spoiler-title, .spoiler-control, .spoiler-title::after {
- width: 100%;
- height: 100%;
- }
- .spoiler-title, .spoiler-title::after, .spoiler {transition: all 0s 86400s linear;}
- .spoiler-title {
- color: #202020;
- font: 800 20px/60px 'Big Shoulders', sans-serif;
- text-shadow: -1px 0 #D0D0D0, 0 -1px #D0D0D0, 1px 0 #D0D0D0, 0 1px #D0D0D0, -1px -1px #D0D0D0, 1px -1px #D0D0D0, 1px 1px #D0D0D0, -1px 1px #D0D0D0;
- text-transform: uppercase;
- border-radius: 10px;
- overflow: hidden;
- }
- .spoiler-control-show {
- opacity: 0;
- transition: opacity .5s ease-in-out, cursor 0s 86400s linear allow-discrete;
- }
- .spoiler-control-show:hover {opacity: 1;}
- .spoiler-title::after {
- padding: 0 20px;
- top: 0;
- left: 0;
- box-sizing: border-box;
- pointer-events: none;
- }
- .spoiler-wrapper:nth-of-type(1) .spoiler-title::after {content: var(--title1);}
- .spoiler-wrapper:nth-of-type(2) .spoiler-title::after {content: var(--title2);}
- .spoiler-wrapper:nth-of-type(3) .spoiler-title::after {content: var(--title3);}
- .spoiler-wrapper:nth-of-type(4) .spoiler-title::after {content: var(--title4);}
- .spoiler-wrapper:nth-of-type(5) .spoiler-title::after {content: var(--title5);}
- .spoiler-wrapper:nth-of-type(6) .spoiler-title::after {content: var(--title6);}
- .spoiler {
- width: 105px;
- height: 40px;
- }
- .spoiler-wrapper:nth-of-type(-n+3) .spoiler {left: 250px;}
- .spoiler-wrapper:nth-of-type(+n+4) .spoiler {right: 250px;}
- .spoiler-wrapper:nth-of-type(3n+1) .spoiler {
- width: 118px;
- height: 64px;
- top: 24px;
- }
- .spoiler-wrapper:nth-of-type(3n+2) .spoiler {top: 22px;}
- .spoiler-wrapper:nth-of-type(3n+3) .spoiler {top: -2px;}
- }
- /* Tab Functionality */
- #columns:has(#column_1 .spoiler-wrapper:focus-within) #column_2 .panel,
- #column_1:focus-within :is(.spoiler-title, .spoiler),
- #column_1:focus-within .spoiler-title::after {
- transition: none !important;
- }
- #column_1:focus-within .spoiler-control {transition: opacity .5s ease-in-out !important;}
- #columns:has(#column_1 .spoiler-wrapper:nth-of-type(1):focus-within) #column_2 .panel:nth-child(1),
- #columns:has(#column_1 .spoiler-wrapper:nth-of-type(2):focus-within) #column_2 .panel:nth-child(2),
- #columns:has(#column_1 .spoiler-wrapper:nth-of-type(3):focus-within) #column_2 .panel:nth-child(3),
- #columns:has(#column_1 .spoiler-wrapper:nth-of-type(4):focus-within) #column_2 .panel:nth-child(4),
- #columns:has(#column_1 .spoiler-wrapper:nth-of-type(5):focus-within) #column_2 .panel:nth-child(5),
- #columns:has(#column_1 .spoiler-wrapper:nth-of-type(6):focus-within) #column_2 .panel:nth-child(6) {
- transition: none;
- top: 0;
- }
- #column_1 .spoiler-wrapper:focus-within {
- .spoiler-title, .spoiler-title::after, .spoiler {transition: none;}
- .spoiler-title::after {background-position-x: -520px;}
- .spoiler {background-position-y: -1404px;}
- .spoiler-control {
- cursor: default;
- transition: opacity .5s ease-in-out;
- }
- .spoiler-title {
- color: #FFFFFF;
- text-shadow: -1px 0 #B380FF, 0 -1px #B380FF, 1px 0 #B380FF, 0 1px #B380FF, -1px -1px #B380FF, 1px -1px #B380FF, 1px 1px #B380FF, -1px 1px #B380FF;
- }
- }
- /* Avatar Panels */
- #id_details, #column_3 .custom_panel {
- display: grid;
- width: 256px;
- height: 122px;
- line-height: 1.3;
- padding: 13px;
- top: 416px;
- border-radius: 13px;
- h2 {
- font-size: 12px;
- line-height: 10px;
- padding-bottom: 4px;
- border-bottom: 2px solid #B380FF;
- }
- p:nth-of-type(1), a {
- width: 96px;
- height: 96px;
- border-radius: 3px;
- overflow: hidden;
- }
- p:nth-of-type(n+2), div[id*='content'] {
- align-self: end;
- margin-bottom: -3px;
- }
- }
- #id_details {
- grid-template: max-content 1fr repeat(2, max-content) / 106px 1fr;
- text-align: left;
- left: 148px;
- p:nth-of-type(1) {
- grid-area: 1/1/-1/2;
- margin: 0;
- }
- img {margin: -15px 0 0 -5px;}
- .forum_userstatus {display: none;}
- strong {display: block;}
- p:nth-of-type(n+2) {margin-top: 3px;}
- p:nth-of-type(n+5) {display: none;}
- }
- #column_3 .custom_panel {
- grid-template: max-content 1fr / 1fr 106px;
- right: 148px;
- div {
- grid-column: 1;
- margin-left: 10px;
- }
- .buttons {z-index: 1;}
- .clear {display: none;}
- a {
- background: url('https://a1cdn.gaiaonline.com/gaia/members/ava/29/1e/370232441fa1e29.png') -20px -15px;
- font-size: 0;
- position: absolute;
- top: 13px;
- right: 13px;
- }
- }
- #column_3 :is(.custom_panel, .custom_panel h2) {text-align: right;}
- /* Contact Buttons */
- #id_contact h2, #id_comments :is(h2, p, dl, #alerts_banner) {display: none;}
- #id_comments :is(#alert_container, div) {display: contents;}
- #id_contact {
- width: 91px;
- height: 77px;
- top: 59px;
- left: 336px;
- }
- #id_contact li {position: absolute;}
- #id_contact li *, #id_comments a {
- display: block;
- background: currentColor;
- color: #FFFFFF;
- font-size: 0;
- }
- #id_contact a:hover, #id_comments a:hover {color: var(--highlight);}
- #id_contact li:nth-of-type(1) {
- clip-path: polygon(20px 0, 38px 20px, 18px 38px, 0px 18px);
- bottom: 0;
- left: 0;
- * {
- width: 38px;
- height: 38px;
- }
- }
- #id_contact li:nth-of-type(2) {
- clip-path: polygon(22px 0, 38px 21px, 16px 37px, 0 16px);
- top: 18px;
- left: 26px;
- * {
- width: 38px;
- height: 37px;
- }
- }
- #id_contact li:nth-of-type(3) {
- clip-path: polygon(24px 0, 37px 23px, 13px 38px, 0 14px);
- top: 0;
- right: 0;
- * {
- width: 36px;
- height: 37px;
- }
- }
- #id_comments {
- clip-path: polygon(25px 0, 35px 25px, 10px 35px, 0 11px);
- top: 45px;
- left: 422px;
- a {
- width: 35px;
- height: 35px;
- }
- }
- /* Media */
- .media_panel h2, .media_panel iframe {position: absolute;}
- .media_panel {
- background: #FFFFFF;
- border: 2px solid #202020;
- border-radius: 50%;
- h2 {
- background: #202020;
- width: 22px;
- height: 18px;
- font-size: 0;
- top: 9px;
- left: 7px;
- }
- width: 40px;
- height: 40px !important;
- bottom: 139px;
- left: calc(50% - 20px);
- iframe {
- width: 300px;
- height: 200px;
- top: calc(50% - 100px);
- left: calc(50% - 150px);
- opacity: .001;
- }
- overflow: clip;
- overflow-clip-margin: 2px;
- }
- .media_panel:hover {background-color: #202020;}
- .media_panel:hover h2 {background: #FFFFFF;}
- /* Wish List */
- #id_wishlist {
- display: flex;
- flex-flow: row wrap;
- align-content: start;
- justify-content: center;
- gap: 10px;
- .premium_sparkle, .clear {display: none;}
- a {
- display: block;
- background: rgb(from var(--links) r g b / 25%);
- width: 30px;
- height: 30px;
- padding: 4px;
- position: relative;
- border: 1px solid #FFFFFF20;
- border-radius: 5px;
- }
- a:hover {
- background: var(--border);
- border-color: #FFFFFF;
- }
- .owner_checkmark {
- background: #FFFFFF;
- border: 1px solid #101010;
- border-radius: 3px;
- margin: 0;
- padding: 2px;
- bottom: -3px;
- right: -3px;
- }
- }
- /* Visitors */
- #id_footprints .item {
- display: flex;
- flex-flow: row nowrap;
- justify-content: center;
- }
- #id_footprints .item::before {
- content: ' ';
- white-space: pre;
- }
- #id_footprints .item::after {content: '.';}
- #id_footprints a {
- display: inline-block;
- max-width: calc(100% - 90px);
- order: -1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- /* Rotator Animation */
- @keyframes RotatorA {
- from {rotate: 0turn;}
- to {rotate: 1turn;}
- }
- #column_1 .custom_panel {
- b {
- background: url('https://i.imgur.com/GfQqEw4.png');
- width: 540px;
- height: 540px;
- position: fixed;
- top: 60px;
- left: 280px;
- animation: RotatorA 30s linear infinite;
- }
- b:nth-of-type(1) {animation-duration: 60s;}
- b:nth-of-type(3) {background-position-y: -1080px;}
- b:nth-of-type(2) {
- background-position-y: -540px;
- animation-direction: reverse;
- }
- }
- /* Misc */
- #column_2 .spoiler-wrapper {
- padding: 0;
- border-color: #FFFFFF;
- border-radius: 3px;
- }
- #column_2 .spoiler-revealed {padding: 5px;}
- #column_2 .spoiler-control {
- background: #D8D8D8;
- width: 100px;
- font: inherit;
- text-transform: uppercase;
- padding: 3px 0;
- border: 1px solid #00000080;
- border-radius: 5px;
- }
- #column_2 .spoiler-control-hide {margin-bottom: 10px;}
Advertisement
Add Comment
Please, Sign In to add comment