Newb Here. How's My Custom CSS Looking?

User31

Craptains log, star date: day 14

Asylum.flarum.cloud Custom CSS/LESS file:

/* ((1)) CUSTOM OP TAG BEGIN */
article.CommentPost.Post.Post--by-start-user .Post-header h3:after {
    content: "\f305";
    /*ORIGINAL POSTER FA ICON*/
    border-radius: 100px;
    padding: 5px;
    margin-left: 10px;
    background: linear-gradient(130deg, white, black, white, black, white, black, white, black, white);
    color: black;
    font-size: 19px;
    font-weight: 600;
    font-family: "Font Awesome 5 Free", Garamond, serif;
    text-shadow: 0 0 5px white;
    /*SIMPLIFIED TEXT SHADOW*/
    background-size: 1800% 1800%;
    animation: rainbow 13s ease infinite;
    /*UNIFIED ANIMATION PROPERTY*/
}

@keyframes rainbow {
    0% {
        background-position: 0% 62%;
    }

    50% {
        background-position: 80% 19%;
    }

    100% {
        background-position: 0% 62%;
    }
}

article.CommentPost.Post.Post--by-start-user .Post-header:hover h3:after {
    content: "\f305 OP";
    /*DISPLAYS 'ORIGINAL POSTER' TEXT ON HOVER*/
}

/* ((1)) CUSTOM OP TAG END */




/* ((2)) CUSTOM MAIN PAGE BACKGROUND BEGIN */
body {
    background-image: url("https://asylum.flarum.cloud/assets/files/2024-08-10/1723247283-465702-compress-20240810-114658-8089.jpg?auto-compress&cs=tinysrgb&w=1260&h=750&dpr=2") !important;
    /*MAIN BACKGROUND IMAGE*/
    background-size: cover;
    /*COVERS ENTIRE VIEWPORT*/
    background-position: center center;
    /*CENTERS BACKGROUND IMAGE*/
    background-repeat: no-repeat;
    /*PREVENTS IMAGE REPETITION*/
    background-attachment: fixed;
    /*FIXES BACKGROUND DURING SCROLL*/
}

/* ((2)) CUSTOM MAIN PAGE BACKGROUND END */




/* ((3)) CUSTOM DISCUSSION PAGE BACKGROUND & TEXT BEGIN */
.DiscussionPage-list {
    color: white !important;
    /*DISCUSSION LIST TEXT COLOUR*/
    background: rgba(0, 0, 0, 0.6) !important;
    /*SEMI-TRANSPARENT BLACK BG*/
    margin: 0 15px !important;
    /*UNIFIED LEFT & RIGHT MARGIN*/
}

/* ((3)) CUSTOM DISCUSSION PAGE BACKGROUND & TEXT END */




/* ((4)) CUSTOM MOBILE DARK MODE FIX BEGIN */
body {
    --body-bg: rgba(0, 0, 0, 0.6);
    /*BACKGROUND BODY COLOR WHEN DARK MODE IS DISABLED*/
}

/*MEDIA QUERIES APPLY BACKGROUND COLOR BASED DARK MODE CONFIGURATION*/
@media (prefers-color-scheme: dark) {
    body {
        --body-bg: rgba(0, 0, 0, 0.6);
        /*MAINTAINS BODY BACKGROUND COLOR IN DARK MODE*/
    }
}

/* ((4)) CUSTOM MOBILE DARK MODE FIX END */




/* ((5)) CUSTOM SCREEN CONTRAST FIX BEGIN */
:root {
    color-scheme: light dark;
    /*DEFINES LIGHT & DARK MODE COLOUR*/
}

* {
    image-rendering: -webkit-optimize-contrast;
    /*OPTIMIZES RENDERING CONTRAST*/
    image-rendering: crisp-edges;
    /*IMPROVES COMPATIBILITY*/
}

/* ((5)) CUSTOM SCREEN CONTRAST FIX END */




/* ((6)) CUSTOM REMOVE DISCUSSION PAGE SIDE NAVIGATION BEGIN */
@media (min-width: 768px) {
    .DiscussionPage-nav {
        display: none !important;
        /*COMPLETELY REMOVES DISCUSSION PAGE SIDE NAVIGATION FROM LARGER SCREENS*/
    }
}

/* ((6)) CUSTOM REMOVE DISCUSSION PAGE SIDE NAVIGATION END */




/* ((7)) CUSTOM DISCUSSION PAGE STREAM POSITIONING BEGIN */
.DiscussionPage-stream {
    margin-left: 0 !important;
    /*RESETS LEFT MARGIN FOR CORRECT POSITIONING*/
    margin-right: 0 !important;
    /*RESETS RIGHT MARGIN FOR CORRECT POSITIONING*/
    padding: 10px 10px;
    /*UNIFIES PADDING FOR CONTENT*/
    width: 100% !important;
    /*SETS WIDTH OF DISCUSSION STREAM TO 100%*/
    box-sizing: border-box;
    /*ENSURES PADDING IS INCLUDED IN WIDTH CALCULATION*/
}

/* ((7)) CUSTOM DISCUSSION PAGE STREAM POSITIONING END */




/* ((8)) CUSTOM DISCUSSION PAGE BLOCK BEGIN */
.DiscussionPage-discussion>.container {
    display: flex !important;
    /*USES FLEX TO IMPROVE CONTENT ALIGNMENT*/
    flex-direction: column;
    /*ALIGN ITEMS IN A COLUMN DIRECTION*/
    width: 95%;
    /*ENSURES CONTAINER TAKES FULL WIDTH*/
}

/* ((8)) CUSTOM DISCUSSION PAGE BLOCK END */




/* ((9)) CUSTOM SPOILERS BEGIN */
span.spoiler {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.7)) !important;
    color: transparent;
    display: block;
    padding: 10px 20px;
    border-radius: 5px;
    height: auto;
    overflow: hidden;
    user-select: none;
    position: relative;
    transition: all 0.3s ease-in-out;
    border: 1px solid white;
    text-align: center;
    box-shadow: 0 0 10px white;
    background-size: 400% 400%;
    animation: rainbowBackground 10s ease infinite;
}

span.spoiler::before {
    content: '\f07b Click To Reveal Spoiler \f07b';
    font-family: 'Font Awesome 5 Free', sans-serif;
    color: white;
    display: block;
    text-align: center;
    transition: all 0.3s ease-in-out;
    font-weight: bold;
    animation: pulse 2s infinite;
    text-shadow: 0 0 5px white, 0 0 10px black;
}

span.spoiler:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.9)) !important;
    cursor: pointer;
    font-size: calc(14px - 1%) !important;
    box-shadow: 0 0 15px white, 0 0 20px black;
    transform: scale(1.05);
}

span.spoiler:active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.8)) !important;
    box-shadow: 0 0 20px white, 0 0 25px black;
    transform: scale(0.95);
}

span.spoiler.revealed {
    color: white !important;
    height: auto;
    box-shadow: 0 0 25px white, 0 0 30px black;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.7)) !important;
}

span.spoiler.revealed::before {
    content: none;
}

@keyframes rainbowBackground {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulse {
    0% {
        text-shadow: 0 0 5px white;
    }

    50% {
        text-shadow: 0 0 20px black;
    }

    100% {
        text-shadow: 0 0 5px white;
    }
}

@media (prefers-color-scheme: dark) {
    span.spoiler {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.7)) !important;
    }

    span.spoiler:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.9)) !important;
    }

    span.spoiler:active {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.8)) !important;
    }
}

/* ((9)) CUSTOM SPOILERS END */




/* ((10)) CUSTOM NAVIGATION BUTTONS & ICONS BEGIN */
@media (max-width: 767px) {

    .App-primaryControl>.Button--icon,
    .App-titleControl>.Button--icon,
    .App-backControl>.Button--icon {
        width: auto;
        transition: all 0.3s ease-in-out;
        /* Smooth transition for state changes */
    }

    .App-primaryControl>.Button--icon:hover,
    .App-titleControl>.Button--icon:hover,
    .App-backControl>.Button--icon:hover {
        transform: scale(1.1);
        /* Slightly increase the size on hover */
        background-color: rgba(0, 0, 0, 0.1);
        /* Add a subtle background color */
    }

    .Navigation.ButtonGroup.App-backControl>.Button:before {
        content: "👽";
        /* Alien emoji icon */
        float: left;
        position: relative;
        top: -6px;
        width: 45px;
        height: 32px;
        background: url(https://asylum.flarum.cloud/assets/files/2024-08-06/1722900915-108278-img-20240806-111227.png) top left/contain no-repeat;
        display: inline-block;
        transition: all 0.3s ease-in-out;
        /* Smooth transition for state changes */
    }

    .Navigation.ButtonGroup.App-backControl>.Button:before:hover {
        transform: rotate(10deg);
        /* Slight rotation effect */
    }
}

/* ((10)) CUSTOM NAVIGATION BUTTONS & ICONS END */




/* ((11)) CUSTOM NAVIGATION BAR BEGIN */
.App::before {
    background: rgba(0, 0, 0, 0.5) !important;
    /* Semi-transparent black background */
    color: white !important;
    /* White text color */
    font-family: Garamond, serif !important;
    /* Garamond font family */
    font-size: 19px !important;
    /* Font size */
    font-weight: 600 !important;
    /* Font weight */
    transition: background 0.3s ease-in-out;
}

/* ((11)) CUSTOM NAVIGATION BAR END */




/* ((12)) ADDITIONAL CUSTOMIZATIONS */
@media (max-width: 767px) {

    .App-primaryControl>.Button--icon,
    .App-titleControl>.Button--icon,
    .App-backControl>.Button--icon {
        border-radius: 5px;
        /* Rounded corners */
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        /* Add a glow effect */
    }

    .App-primaryControl>.Button--icon:focus,
    .App-titleControl>.Button--icon:focus,
    .App-backControl>.Button--icon:focus {
        outline: none;
        /* Remove default outline */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.6);
        /* New focus shadow */
    }

    .App-primaryControl>.Button--icon:hover,
    .App-titleControl>.Button--icon:hover,
    .App-backControl>.Button--icon:hover {
        transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
        /* Smooth transitions */
        transform: scale(1.1);
        /* Slightly increase the size on hover */
        background-color: rgba(0, 0, 0, 0.2);
        /* Darker background on hover */
    }

    .Navigation.ButtonGroup.App-backControl>.Button:before:hover {
        transform: rotate(15deg);
        /* Slightly more rotation on hover */
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
        /* Add a drop shadow */
    }
}

/* ((12)) ADDITIONAL CUSTOMIZATIONS END */




/* ((13)) LOG-IN & SIGN-UP BUTTONS BEGIN */
@media (min-width: 768px) {

    #header-secondary>ul>li.item-signUp>button,
    #header-secondary>ul>li.item-logIn>button {
        margin-left: 10px;
        margin-bottom: 10px;
        padding: 8px 5px;
        border-radius: 10px;
        background: linear-gradient(130deg, #000000, #ffffff, #000000, #ffffff) !important;
        width: 80px;
        text-align: center;
        color: black;
        font-family: Garamond, serif;
        font-size: 19px;
        font-weight: 600 !important;
        text-shadow: 0 0 9px white;
        background-size: 1800% 1800%;
        animation: rainbow 20s ease infinite !important;
    }

    #header-secondary>ul>li.item-signUp>button:hover,
    #header-secondary>ul>li.item-logIn>button:hover {
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    }
}

@keyframes rainbow {
    0% {
        background-position: 0% 62%;
    }

    50% {
        background-position: 80% 19%;
    }

    100% {
        background-position: 0% 62%;
    }
}

/* ((13)) LOG-IN & SIGN-UP BUTTONS END */




/* ((14)) STICKY NAVIGATION BAR */
.navbar {
    position: -webkit-sticky;
    /* FOR SAFARI */
    position: sticky;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-family: Garamond, serif;
    font-size: 19px;
    font-weight: 600;
    z-index: 1000;
    /* ENSURES IT ALWAYS STAYS ON TOP */
    transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* SMOOTH TRANSITION FOR BACKGROUND AND SHADOW */
}

.navbar.sticky {
    background: rgba(0, 0, 0, 0.8);
    /* SLIGHTLY DARKER BACKGROUND WHEN STICKY */
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.2);
    /* FAINT GOLD SHADOW ON STICKY */
}

/* ((14)) STICKY NAVIGATION BAR END */




/* ((15)) REMOVE INDEX TAGS TOOLBAR BEGIN */
.IndexPage-toolbar,
.TagsPage-toolbar {
    display: none;
}

/* ((15)) REMOVE INDEX TAGS TOOLBAR END */




/* ((16)) REMOVE SECONDARY & SIDE NAVIGATION BEGIN */
nav.IndexPage-nav.sideNav,
nav.TagsPage-nav.sideNav,
nav.DiscussionPage-nav.sideNav,
nav.UserPage-nav.sideNav {
    display: none !important;
}

/* ((16)) REMOVE SECONDARY & SIDE NAVIGATION END */




/* ((17)) CUSTOM REACTIONS BEGIN */
.item-like .Button--link .Button-label,
.item-dislike .Button--link .Button-label,
.item-reply .Button--link .Button-label {
    display: none;
}

.item-like .Button:before,
.item-dislike .Button:before,
.item-reply .Button--link:before,
.PostMeta .Dropdown-toggle:before,
article.CommentPost.Post.Post--by-start-user .Post-header h3:after {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
    font-weight: 600;
    font-size: 19px;
    padding: 5px;
    color: black;
    border-radius: 100px;
    text-shadow: 0 0 0px white, 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 6px white, 0 0 7px white, 0 0 8px white, 0 0 9px white;
    background: linear-gradient(130deg, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000);
    background-size: 1800% 1800%;
    animation: rainbow 16s ease infinite;
}

.item-like .Button:before {
    content: '\f164';
    vertical-align: -1px;
}

.item-dislike .Button:before {
    content: '\f165';
    vertical-align: -3px;
}

.item-reply .Button--link:before {
    content: '\f3e5';
    vertical-align: -2px;
    margin-right: 4px;
}

.PostMeta .Dropdown-toggle:before {
    content: "\f14d";
    margin-left: 10px;
}

article.CommentPost.Post.Post--by-start-user .Post-header h3:after {
    content: "\f305";
    margin-left: 10px;
    transition: transform 0.3s ease-in-out;
}

article.CommentPost.Post.Post--by-start-user .Post-header:hover h3:after {
    content: "\f305 Original Poster";
    transform: translateY(-5px);
}

@keyframes rainbow {
    0% {
        background-position: 0% 62%;
    }

    50% {
        background-position: 80% 19%;
    }

    100% {
        background-position: 0% 62%;
    }
}

/* ((17)) CUSTOM REACTIONS END */




/* ((18)) CUSTOM DISCUSSION LIST ITEMS & POSTS BEGIN */
.DiscussionListItem {
    margin-left: 10px !important;
    margin-right: 10px !important;
    background: rgba(0, 0, 0, 0.5);
    color: white !important;
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.DiscussionListItem:hover {
    transform: scale(1.05);
    background: rgba(0, 0, 0, 0.7);
}

.DiscussionListItem-content {
    color: white !important;
}

.Post.CommentPost {
    color: white !important;
    background: rgba(0, 0, 0, 0.5);
    padding-left: 10px !important;
    padding-right: 10px !important;
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.Post.CommentPost:hover {
    transform: scale(1.05);
    background: rgba(0, 0, 0, 0.7);
}

/* ((18)) CUSTOM DISCUSSION LIST ITEMS & POSTS END */




/* ((19)) CUSTOM POST BODY BEGIN */
.Post-body {
    color: white !important;
    font-size: 19px !important;
    font-family: Garamond, serif;
    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;
    padding: 10px;
    padding-bottom: 30px;
    width: 90%;
    box-sizing: border-box;
}

.Post-body:hover {
    color: #ffd700;
    /* Gold color on hover */
    font-size: 22px;
    /* Slightly larger font size on hover */
}

/* ((19)) CUSTOM POST BODY END */




/* ((20)) CUSTOM DROP DOWN MENUS BEGIN */
.Dropdown-menu {
    padding: 8px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.9);
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.Dropdown-menu>li>a,
.Dropdown-menu>li>button,
.Dropdown-menu>li>span {
    border-radius: 5px;
    font-family: Garamond, serif;
    font-size: 19px;
    color: white !important;
    transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
}

.Dropdown-menu>li>a:hover,
.Dropdown-menu>li>button:hover,
.Dropdown-menu>li>span:hover {
    background: rgba(0, 0, 0, 0.8);
    /* Slightly darker background on hover */
    color: gold !important;
    /* Gold text color on hover */
}

.DiscussionListItem-title {
    color: white !important;
    font-family: Garamond, serif;
    font-size: 20px !important;
    transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

.DiscussionListItem-title:hover {
    color: #ffd700;
    /* Gold color on hover */
    font-size: 22px;
    /* Slightly larger font size on hover */
}

@media (max-width: 767.98px) {
    .DiscussionListItem-title {
        color: white !important;
        font-family: Garamond, serif;
        font-size: 20px !important;
        text-decoration: none !important;
    }

    .DiscussionListItem-title:hover {
        color: #ffd700;
        /* Gold color on hover */
        font-size: 22px;
        /* Slightly larger font size on hover */
    }
}

.DiscussionListItem-info {
    font-family: Garamond, serif;
    font-size: 12px;
}

:root {
    --border-radius: 5px !important;
    --discussion-title-color: white;
}

/* ((20)) CUSTOM DROP DOWN MENUS END */




/* ((21)) CUSTOM DISCUSSION LIST AVATAR BEGIN */
.DiscussionListItem-author .Avatar {
    filter: drop-shadow(0px 0px 5px white);
    transition: filter 0.3s ease-in-out;
}

.DiscussionListItem-author .Avatar:hover {
    filter: drop-shadow(0px 0px 10px gold);
    /* Gold glow on hover */
}

/* ((21)) CUSTOM DISCUSSION LIST AVATAR END */




/* ((22)) CUSTOM DISCUSSION LIST USERNAME STYLES BEGIN */
.DiscussionListItem-info .username {
    color: black;
    font-family: Garamond, serif;
    font-size: 15px;
    font-weight: 600 !important;
    text-shadow: 0 0 0px white, 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white !important;
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}

.DiscussionListItem-info .username:hover {
    color: white;
    /* White color on hover */
    text-shadow: 0 0 0px gold, 0 0 1px gold, 0 0 2px gold, 0 0 3px gold, 0 0 4px gold !important;
}

/* ((22)) CUSTOM DISCUSSION LIST USERNAME STYLES END */




/* ((23)) CUSTOM COMPOSER BODY HEADER BEGIN */
.ComposerBody-header h3,
.ComposerBody-header h3 input,
.ComposerBody-header h3 a {
    font-size: 19px;
    color: white !important;
    font-family: Garamond, serif;
    border-radius: 5px;
    transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
}

.ComposerBody-header h3:hover,
.ComposerBody-header h3 input:hover,
.ComposerBody-header h3 a:hover {
    color: gold !important;
    /* Gold color on hover */
    background: rgba(0, 0, 0, 0.4);
    /* Slightly darker background on hover */
}

/* ((23)) CUSTOM COMPOSER BODY HEADER END */




/* ((24)) CUSTOM REPLY PLACEHOLDER BEGIN */
.ReplyPlaceholder {
    background: rgba(0, 0, 0, 0.3) !important;
    font-size: 20px;
    font-weight: 600;
    color: white !important;
    box-shadow: 0 0 0px white, 0 0 1px white, 0 0 2px white, 0 0 3px white;
    transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.ReplyPlaceholder:hover {
    background: rgba(0, 0, 0, 0.5) !important;
    box-shadow: 0 0 0px white, 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 6px white, 0 0 7px white;
}

/* ((24)) CUSTOM REPLY PLACEHOLDER END */




/* ((25)) CUSTOM USER ONLINE INDICATOR BEGIN */
@online-user-circle-color: linear-gradient(124deg, gold, white, green, white, gold, white, green, white, gold);

@online-user-circle-animation: rainbow 20s ease infinite;

@keyframes rainbow {
    0% {
        background-position: 0% 62%;
    }

    50% {
        background-position: 80% 19%;
    }

    100% {
        background-position: 0% 62%;
    }
}

/* ((25)) CUSTOM USER ONLINE INDICATOR END */




/* ((26)) DISCUSSION LIST SIZE & POSITION CORRECTIONS BEGIN */
.container {
    padding-left: 15px;
    padding-right: 15px;
    width: auto;
    transition: margin 0.3s ease-in-out, padding 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* ((26)) DISCUSSION LIST SIZE & POSITION CORRECTIONS END */




/* ((27)) CUSTOM ANIMATED START DISCUSSION BUTTON BEGIN */
.IndexPage-newDiscussion,
.StartDiscussionButton {
    background: linear-gradient(124deg, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000);
    color: black;
    font-family: Garamond, serif;
    font-size: 19px;
    font-weight: 600 !important;
    text-shadow: 0 0 0px white, 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 6px white, 0 0 7px white, 0 0 8px white, 0 0 9px white, 0 0 10px white, 0 0 11px white, 0 0 12px white, 0 0 13px white, 0 0 14px white, 0 0 15px white, 0 0 16px white, 0 0 17px white;
    background-size: 1800% 1800%;
    animation: rainbow 20s ease infinite;
    border-radius: 5px;
    padding: 10px 20px;
    margin: 10px;
    display: inline-block;
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.StartDiscussionButton:hover {
    transform: scale(1.1);
    background: linear-gradient(124deg, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff);
    color: black;
}

@keyframes rainbow {
    0% {
        background-position: 0% 62%;
    }

    50% {
        background-position: 80% 19%;
    }

    100% {
        background-position: 0% 62%;
    }
}

/* ((27)) CUSTOM ANIMATED START DISCUSSION BUTTON END */




/* ((28)) CUSTOM ANIMATED POST SHARE TOGGLES BEGIN */
.PostMeta .Dropdown-toggle:before {
    content: "\f14d";
    border-radius: 100px;
    padding: 5px;
    margin-left: 10px;
    background: linear-gradient(130deg, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff);
    color: black;
    font-size: 19px;
    font-weight: 600 !important;
    font-family: "Font Awesome 5 Free", Garamond, serif;
    text-shadow: 0 0 0px white, 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 6px white, 0 0 7px white;
    background-size: 1800% 1800%;
    animation: rainbow 13s ease infinite;
}

@keyframes rainbow {
    0% {
        background-position: 0% 62%;
    }

    50% {
        background-position: 80% 19%;
    }

    100% {
        background-position: 0% 62%;
    }
}

/* ((28)) CUSTOM ANIMATED POST SHARE TOGGLES END */




/* ((29)) CUSTOM ANIMATED DISCUSSION LIST HOVER BEGIN */
.DiscussionListItem-content:hover {
    transition: all 0.2s ease-in-out;
    transform: scale(1.05);
    background: linear-gradient(130deg, white, black, white, black, white, black, white, black, white);
    color: white;
    font-size: 22px !important;
    font-weight: 900 !important;
    font-family: "Font Awesome 5 Free", Garamond, serif;
    text-shadow: 0 0 0px black, 0 0 1px black, 0 0 2px black, 0 0 3px black, 0 0 4px black, 0 0 5px black, 0 0 6px black, 0 0 7px black;
    background-size: 1800% 1800%;
    animation: rainbow 35s ease infinite;
}

@keyframes rainbow {
    0% {
        background-position: 0% 62%;
    }

    50% {
        background-position: 80% 19%;
    }

    100% {
        background-position: 0% 62%;
    }
}

/* ((29)) CUSTOM ANIMATED DISCUSSION LIST HOVER END */




/* ((30)) CUSTOM LOAD MORE BUTTON BEGIN */
.DiscussionList-loadMore button {
    width: 95%;
    border-radius: 5px 5px 5px 5px;
    background: linear-gradient(130deg, white, black, white, black, white, black, white, black, white);
    color: black;
    font-size: 20px !important;
    font-weight: 900 !important;
    font-family: Garamond, serif;
    text-shadow: 0 0 0px white, 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 6px white, 0 0 7px white, 0 0 8px white, 0 0 9px white, 0 0 10px white;
    background-size: 1800% 1800%;
    animation: rainbow 35s ease infinite;
}

@keyframes rainbow {
    0% {
        background-position: 0% 62%;
    }

    50% {
        background-position: 80% 19%;
    }

    100% {
        background-position: 0% 62%;
    }
}

/* ((30)) CUSTOM LOAD MORE BUTTON END */




/* ((31)) REMOVE POST CHANGE TABS BEGIN */
.DiscussionLockedPost {
    padding-top: 4px;
    padding-bottom: 4px;
    width: 100%;
    position: relative;
    left: 20px;
    font-size: 20px !important;
    font-family: Garamond, serif;
    background: linear-gradient(130deg, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff, #000000, #ffffff);
    color: black;
    font-weight: 900 !important;
    text-shadow: 0 0 0px white, 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 6px white, 0 0 7px white, 0 0 8px white, 0 0 9px white, 0 0 10px white;
    background-size: 1800% 1800%;
    animation: rainbow 13s ease infinite;
}

.DiscussionStickiedPost,
.DiscussionTaggedPost,
.DiscussionRenamedPost,
.PostStream-timeGap {
    display: none;
}

@keyframes rainbow {
    0% {
        background-position: 0% 62%;
    }

    50% {
        background-position: 80% 19%;
    }

    100% {
        background-position: 0% 62%;
    }
}

/* ((31)) REMOVE POST CHANGE TABS END */




/* ((32)) POST MENTION PREVIEW FIX BEGIN */
.Post-mentionedBy-preview,
.PostMention-preview {
    width: 600px;
    max-width: 90vw;
}

/* ((32)) POST MENTION PREVIEW FIX END */




/* ((33)) MOBILE NEW DISCUSSION BUTTON BACKGROUND GRADIENT FLOAT BEGIN */
@media (max-width: 767px) {
    .IndexPage-nav .item-newDiscussion .Button {
        position: fixed;
        top: 80%;
        right: 20px;
        border-radius: 50px 50px 5px 50px !important;
        width: 60px;
        height: 60px;
        z-index: 9999;
        background: linear-gradient(130deg, black, white) !important;
        color: black !important;
        border: solid 1px white !important;
        text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white, 0 0 25px white, 0 0 30px white !important;
        background-size: 100% 100% !important;
    }
}

/* ((33)) MOBILE NEW DISCUSSION BUTTON BACKGROUND GRADIENT FLOAT END */




/* ((34)) MOBILE REPLY BUTTON BACKGROUND GRADIENT FLOAT BEGIN */
@media (max-width: 767px) {
    .ReplyPlaceholder {
        background: linear-gradient(130deg, black, white) !important;
        position: fixed;
        top: 80%;
        right: 20px;
        border-radius: 50px 50px 5px 50px !important;
        width: 60px;
        height: 60px;
        z-index: 9999;
        color: black !important;
        border: solid 1px white !important;
        text-shadow: 0 0 1px white, 0 0 2px white, 0 0 3px white, 0 0 4px white, 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white, 0 0 25px white, 0 0 30px white !important;
        background-size: 100% 100% !important;
    }

    .ReplyPlaceholder .Post-header {
        display: none;
    }

    .ReplyPlaceholder::before {
        content: "\f1d8";
        font-family: "Font Awesome 5 Free";
        font-size: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scaleX(-1);
    }
}

/* ((34)) MOBILE REPLY BUTTON BACKGROUND GRADIENT FLOAT END */




/* ((35)) POST HEADER & AVATAR CORRECTIONS BEGIN */
.Post-header {
    position: relative;
    left: 95px;
    width: auto;
    padding-bottom: 50px;
    margin-right: 95px;
    color: white;
    font-size: 22px;
}

/* ((35)) POST HEADER & AVATAR CORRECTIONS END */



/* ((36)) CUSTOM COMPOSER BODY BEGIN */
.ComposerBody-body h3,
.ComposerBody-body h3 input,
.ComposerBody-body h3 a {
    font-size: 19px;
    color: white !important;
    font-family: Garamond, serif;
    border-radius: 5px;
    transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
}

.ComposerBody-body h3:hover,
.ComposerBody-body h3 input:hover,
.ComposerBody-body h3 a:hover {
    color: gold !important;
    /* Gold color on hover */
    background: rgba(0, 0, 0, 0.4);
    /* Slightly darker background on hover */
}

/* ((36)) CUSTOM COMPOSER BODY END */




/* ((37)) SPLICHOS CUSTOM POST HEADER BEGIN */
.PostStream-item::before {
    content: "";
    color: white;
    position: absolute;
    display: block;
    width: 300px;
    height: 120px;
    opacity: .1;
    scale: 1.12;
    margin-top: 8px;
    transform: rotate(-15deg);
    background: no-repeat center;
    background-image: url(https://asylum.flarum.cloud/assets/files/2024-08-15/1723704033-926482-magicut-1723703290793.png);
    background-size: contain;
}

/* ((37)) SPLICHOS CUSTOM POST HEADER END */

🤔...?

EDIT: I signed on to a paid AI coding site yesterday and attempted feeding the entire code to the GPT-4o, GPT-4o mini & another one called Llamda or something.

The idea was (as advertised) that these coding bots would hopefully check through it all and correct everything.

😅 Unfortunately such was definitely not so.

Apparently feeding them this much code leads to.... strange behaviour, and very little in the way of productive results.

So I then tried feeding them little bits at a time, and that did sorta work.... I think(¿?)

But ahhh dunno aye. It looks bloody messy to me.

Please do feel free to make any suggestions guys & gals...

EDIT: Updated the code.

Tidied it up a bit.
Added Splicho's code, #37.

RelicSystem

User31 EDIT: I signed on to a paid AI coding site yesterday and attempted feeding the entire code to the GPT-4o, GPT-4o mini & another one called Llamda or something.

Typical Ai - takes a minute to generate code that takes 3 hours to debug what it did wrong or weird.

User31

RelicSystem

Yeah and isn't it a little suspicious?

That AI apparently can't sort out computer languages all that well, but is quite capable of handling human communications as well as seemingly assessing human internal states via pseudo-psycholinguistic analysis.

Shouldn't computers be 100% proficient with computer languages rather than somehow being better at abstract non-computer languages and concepts?

Capybara

@User31 Do you by chance know how to transfer money to the rest of the stats under the avatar, which are displayed by masquerade? Because money is created by another extension

User31

Capybara

Yeah I'm not too sure how to do stuff like that yet, and especially with extensions.
I think, in this case with the Masquerade extension, we would first need to figure out what the correct target location identifier is within the Masquerade framework.
(*Sorry...😅I still don't know the correct terms.)

I'm thinking the target location identifier that you might be needing to achieve this, may possibly be something we could find hidden within the Masquerade extension documents(¿?)

So I just had a quick look, although I'm really not sure exactly what I should be looking for aye.
What do think?

(Here's some of the Masquerade documents I checked.)

/* masquerade/src/forum/mutateUserHero.js */
import { extend } from 'flarum/common/extend';
import app from 'flarum/forum/app';
import UserCard from 'flarum/forum/components/UserCard';
import TypeFactory from './types/TypeFactory';

export default function mutateUserHero() {
  extend(UserCard.prototype, 'infoItems', function (items) {
    const answers = app.forum.attribute('canViewMasquerade') ? this.attrs.user.bioFields() || [] : [];

    items.add(
      'masquerade-bio',
      <div>
        {answers.map((answer) => {
          const field = answer.attribute('field');
          const type = TypeFactory.typeForField({
            field,
            value: answer.content(),
          });

          return type.answerField();
        })}
      </div>
    );
  });
}

/* masquerade/js/src/forum/index.js */
import app from 'flarum/forum/app';
import User from 'flarum/common/models/User';
import Field from './../lib/models/Field';
import Answer from './../lib/models/Answer';
import Model from 'flarum/common/Model';

import addProfilePane from './addProfilePane';
import mutateUserHero from './mutateUserHero';

// Exports
import ProfileConfigurePane from './panes/ProfileConfigurePane';
import ProfilePane from './panes/ProfilePane';
import RootMasqueradePane from './panes/RootMasqueradePane';
import BaseField from './types/BaseField';
import BooleanField from './types/BooleanField';
import EmailField from './types/EmailField';
import SelectField from './types/SelectField';
import TypeFactory from './types/TypeFactory';
import UrlField from './types/UrlField';

app.initializers.add('fof-masquerade', (app) => {
  app.store.models['masquerade-field'] = Field;
  app.store.models['masquerade-answer'] = Answer;

  User.prototype.bioFields = Model.hasMany('bioFields');
  User.prototype.masqueradeAnswers = Model.hasMany('masqueradeAnswers');
  User.prototype.canEditMasqueradeProfile = Model.attribute('canEditMasqueradeProfile');

  addProfilePane();

  mutateUserHero();
});

const components = {
  ProfileConfigurePane,
  ProfilePane,
  RootMasqueradePane,
};

const types = {
  BaseField,
  BooleanField,
  EmailField,
  SelectField,
  TypeFactory,
  UrlField,
};

export { components, types };

/* masquerade/js/src/forum/addProfilePane.js */
import app from 'flarum/forum/app';

import { extend } from 'flarum/common/extend';
import LinkButton from 'flarum/common/components/LinkButton';
import UserPage from 'flarum/forum/components/UserPage';
import RootMasqueradePane from './panes/RootMasqueradePane';

export default function addProfilePane() {
  app.routes['fof-masquerade'] = {
    path: '/u/:username/masquerade',
    resolver: {
      onmatch() {
        if (!app.forum.attribute('canViewMasquerade')) throw new Error();

        return RootMasqueradePane;
      },
    },
  };

  extend(UserPage.prototype, 'navItems', function (items) {
    if (app.forum.attribute('canViewMasquerade') || this.user.canEditMasqueradeProfile()) {
      const edit = this.user.canEditMasqueradeProfile();

      items.add(
        'masquerade',
        LinkButton.component(
          {
            href: app.route('fof-masquerade', { username: this.user.slug() }),
            icon: 'far fa-id-card',
            'data-editProfile': edit,
          },
          app.translator.trans(`fof-masquerade.forum.buttons.${edit ? 'edit' : 'view'}-profile`)
        ),
        200
      );
    }
  });
}

Masquerade Docs

Subarist

Capybara

li.item-money {
    position: absolute;
    bottom: 35px;
    left: 0;
 }

.UserCard-info {
    position: relative;
}

Capybara

User31 Oh, it's hard for me to figure it out yet, I'll come back later with feedback, thank you!

User31

Subarist

😃👍💥 Absolute legend!🥇

Thank you

Capybara

Subarist Thank you very much!

User31

Found a coding AI yesterday that seems to do half decent job of it.

Refactored the entire CSS/LESS & HTML files to near half the size and somehow didn't make things worse like the the others I've tried.

I'm wondering if we fed an AI with the Flarum™ core coding stuff whether this might allow it to pump out whatever customizations we wanted.

Anyone tried that before?

Capybara

@User31 Check it out — I've drawn pictures of achievements. Actually, these are badges, not achievements, but the extension of achievements is broken, so I'm doing my best

User31

Capybara

Woah! You made these yourself?

Last year I paid this British chick around £2500 all up to create & set-up several hundred custom OzzMod Badges on my 2nd site....

...took her over a month to complete something like 22 or 23 badges in total...😂and they didn't look half as good as yours.

Capybara

And I also replaced the logo and favicon with the svg version via database. By the way, @clarkwinkelmann, why not allow svg officially through the admin panel?

clarkwinkelmann

Capybara it's a tricky change. Right now, all images uploaded through native Flarum (favicon, logo and avatars) always go through image resizing and compression. This has the added benefit of protecting against arbitrary files download. SVGs are completely different, if uploaded verbatim they can be an attack vector. If we wanted to clean and compress them we would need a new library.

Though now that the extension manager is part of Flarum, there are much more dangerous attack vectors if an admin account is compromised, so allowing verbatim SVG uploads would be the least of a forum owner worries.

Capybara

User31 I don't have that much money, so I'm doing it on my own😅

User31

Capybara In my frank opinion, money is inherently worthless.

Whereas talent, skill, creativity and the motivation to realize such, are infinitely valuable.

A perfect example of this, is ForumSpace.

😃As from my perspective, I think you have created an extraordinary fora experience!

Fact is Capy, I am actually understating just how remarkable ForumSpace is. I've never seen anything quite like it.

User31

Hey @Capybara, I would really like to discuss something with you.

Could you possibly consider registering @NicheForumPF at your earliest convenience.

Capybara

User31 Thanks a lot for the nice words to my forum. I have registered on your forum now

User31

Capybara
😉👍Sweet!
And hey, absolutely feel free to take a look around the place.
//*...it's a bit of a construction site at the present...😂//