/* ==UserStyle==
@name           Fandom Thread Unlocker
@namespace      userstyles.world/user/logan
@version        1.0.1
@description    Unlock old comment threads for replying on wikis where old comments are locked.
@author         Logan
@license        Apache-2.0
@preprocessor   stylus

@var select replyDisplay "Locked thread replybox display" {
    "Show notice with replybox": "show",
    "Show notice when hovering over": "hover",
    "Show notice only, then replybox on hover": "hover_nonly",
    "Ditto, but hide notice on hover": "hover_nonly_hnote",
    "Hide notice entirely": "hide"
}
@var select animation "Animation style" {
    "No animation": "none",
    "Fast sliding": ".1s linear",
    "Smooth gliding*": ".2s ease",
    "Snappy bouncing": ".2s cubic-bezier(0.71, 1.7, 0.77, 1.24)"
}
@var checkbox noteReplying "Continue showing the notice when replying" 0
@var checkbox aboveNoteHide "Hide the notice above the 1st locked comment, on wikis with it" 0
@var range noteTrans "Locked thread notice transparency" [100, 1, 100, 1, '%']
@var checkbox noteTop "Show the replybox notice on the top, not the bottom" 0
==/UserStyle== */
noteMargin(area) { // automatically decide whether to use margin-bottom or margin-top, based on noteTop. done to prevent Write Everything Twice code
    if noteTop {
        margin-bottom: area
    } else {
        margin-top: area
    }
}

animate(props) { // only show an animation if the user is okay with it
    if not animation == "none" {
        transition: unquote(props)
    }
}

lockedThread = ".LockOldComments-locked" // locked comment
replying = ":has([class*='EditorForm'])"
lockedRbCont = "[class*='ReplyCreate_reply-create']" // replybox container
lockedReplybox = "[class*='FormEntryPoint_form-entry-point_']" // the reply textbox thats hidden
lockedNotice = "[class*='InlineEntityFormWrapper']>div:not([class])" // the locked thread note
lockedAboveNotice = ".LockOldComments-above" // locked thread above note
@-moz-document regexp("^https:\\/\\/([a-z0-9-]+)\\.fandom\\.com\\/(?:[^\\/]+\\/)?wiki\\/.*") {
    /* Please keep this userstyle's and my name (Logan), its license (Apache 2.0), and list the changes you've made if you plan on modifying this userstyle, and putting your own version somewhere online. Thanks!
    © 2025 Logan, userstyle is licensed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) */
    
    {lockedThread} {lockedReplybox} {
       if replyDisplay == "hover_nonly" || replyDisplay == "hover_nonly_hnote" {
           noteMargin(-35px)
           opacity: 0
           
           animate("margin-top " + animation + ", margin-bottom " + animation + ", opacity .2s")
       }
       
       display: flex!important
    }
    
    {lockedThread} {lockedNotice} {
        if replyDisplay == "show" { // Show with replybox
            display: block
        } else if replyDisplay == "hover" || replyDisplay == "hide" { // Show on hover or Hide entirely
            noteMargin(-24.5px!important)
            opacity: 0!important
            pointer-events: none
        } else if replyDisplay == "hover_nonly" { // Show only, replybox on hover
            display: block
        } else if replyDisplay == "hover_nonly_hnote" { // Show on hover
            display: block
        }
        
        animate("margin-top " + animation + ", margin-bottom " + animation + ", transform " + animation + ", opacity .2s")
        
        if noteTop {
            margin-bottom: 5px // change the spacing location based on the notice location
            order: -1
        } else {
            margin-top: 5px
            order: 1
        }
        
        font-size: 14px // lock to 14px text
        font-weight: 300
        opacity: noteTrans
    }
    
    if !noteReplying { // remove notice hitbox when replying, if set
        {lockedThread} {replying} {lockedNotice} {
            pointer-events: none
        }
    }
    
    {lockedAboveNotice} {
        if aboveNoteHide {
            display: none
        }
        
        padding-top: 0!important // remove excessive spacing that shouldnt be there in the first place
        opacity: noteTrans
    }
    
    // the code to detect when the replybox is being hovered over. also for when the notice should be showed when replying, as this code makes it show
    if replyDisplay == "hover" { // fade in and slide out the notice for Show on hover
        {lockedThread} {lockedRbCont}:hover {lockedNotice}, {lockedThread} {replying} {lockedRbCont} {lockedNotice} {
            noteMargin(5px!important)
            opacity: noteTrans!important
        }
    } else if replyDisplay == "hover_nonly" {
        {lockedThread} {lockedRbCont}:hover {lockedReplybox} {
            noteMargin(0)
            opacity: 1
        }
    } else if replyDisplay == "hover_nonly_hnote" {
        {lockedThread} :not({replying}) {lockedRbCont}:hover {lockedNotice} {
            noteMargin(-24.5px) // prevent putting a big spacing error
            if noteTop { // slide the notice out
                transform: translateY(-24.5px)
            } else {
                transform: translateY(24.5px)
            }
            opacity: 0
        }
        
        {lockedThread} {lockedRbCont}:hover {lockedReplybox} { // slide the reply box into view
            noteMargin(0)
            opacity: 1
        }
    }
    
    if !noteReplying { // animate the notice out when replying, if it shouldn't appear
        if replyDisplay == "show" || replyDisplay == "hover" { // they animate out the same way, so combine them into 2
            {lockedThread} {replying} {lockedRbCont} {lockedNotice} {
                noteMargin(-24.5px!important)
                opacity: 0!important
            }
        } else if replyDisplay == "hover_nonly" {
            {lockedThread} {replying} {lockedRbCont} {lockedNotice} {
                noteMargin(-24.5px)
                opacity: 0
            }
        } else if replyDisplay == "hover_nonly_hnote" {
            {lockedThread} {replying} {lockedRbCont} {lockedNotice} {
                noteMargin(-24.5px)
                if noteTop {
                    transform: translateY(-24.5px)
                } else {
                    transform: translateY(24.5px)
                }
                opacity: 0
            }
        }
    }
    
    if replyDisplay == "hover_nonly" || replyDisplay == "hover_nonly_hnote" { // make sure elements don't clip outside the container on sliding animations
        {lockedThread} {lockedRbCont} {
            overflow-y: clip
        }
    }
    
    if noteReplying && replyDisplay == "hide" {
        {lockedThread} {replying} {lockedRbCont} {lockedNotice} {
            display: block
            noteMargin(5px!important)
            opacity: noteTrans!important
        }
    }
}