Skip to content

Findy message view style by KABA

Details

AuthorKABA

LicenseNo License

Categoryfindy-code

Created

Updated

Code size2.0 kB

Code checksum82efea82

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.