Skip to content

Findy message view style by KABA

Details

AuthorKABA

LicenseNo License

Categoryfindy-code

Created

Updated

Size2.0 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

UX improved

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         Findy message view style
@version      1.0.0
@namespace    findy-code.io
==/UserStyle== */

@-moz-document url-prefix("https://findy-code.io/matches/") {
/* Adjust navbar height without hover */
.custom-1vwgk1v {
    z-index: 1030;
    box-shadow: 0 0 0 1px #dbdcdc;
    transition: .2s;
    background: #fff;
}
header:has(+ main) {
    position: relative;
    &:hover {
        /* Retain the hover region */
        &::after {
            position: absolute;
            top: 49px;
            z-index: 1031;
            width: 100%;
            height: 1.5em;
            content: "";
        }
    }
    &:not(:hover) {
        + main {
            .custom-1vwgk1v { top: 24px }           
        }
    }
}
}

@-moz-document url-prefix("https://findy-code.io/matches/") {
/* HACK: Make Message detail visible even on Comment box */
:is(
    .message_detail,
    .custom-25yqbn
) {
    padding-bottom: 300px;
}

/* Lower fixed block */
.custom-171ui0m { container-type: inline-size } /* NOTE: Enable cqw unit */
:is(
    .comment_box,
    .custom-14svt73
) {
    position: fixed;
    bottom: 0;
    width: 100cqw;

    border: 0;
    box-shadow: 0 -4px 2px -2px #0000001f;
    background: #fffd;
    opacity: .05;

    form { max-width: calc(45em * 1.39) }

    /* HACK: Enable Message detail scroll on Comment box */
    pointer-events: none;
    input,
    button,
    textarea { pointer-events: auto }
    
    textarea { max-height: calc(100dvh - 300px) }

    transition: .2s;
    &:has(:hover, :focus) { opacity: 1 }
}

/* Input field */
:is(
    .message_box,
    .custom-15cudvv
) {
    --fds-color-control-border-enabled: #0003;

    border-width: 1px;
    padding: .5em .75em;

    min-height: 8em;

    background: #f6f5f5aa;
    transition: .2s;

    &:focus {
        outline: 0;
        background: #fff;
    }
}
}

Reviews

No reviews yet.