Skip to content

YourHana responsive + customizations by breat

Mirrored from https://gitlab.com/breatfr/yourhana/-/raw/main/css/yourhana-responsive-customizations.user.css

Screenshot of YourHana responsive + customizations
Homepage Write a review Install Get Stylus

Details

Authorbreat

LicenseAGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt

Categoryyourhana.ai

Created

Updated

Size13 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

YourHana website is more suitable for wide screens.

Notes

Support me on:

List of available customizations

  • blur content (to share without lost your privacy)
  • dark mode
  • thin scrollbar
  • wide mode

How to use in few steps

  1. Install Stylus browser extension

  2. Install the UserStyle.

  3. To update the theme, open the Stylus Management window and click on Check for update and follow the instructions or just wait 24h to automatic update

  4. Enjoy :)

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           YourHana responsive + customizations
@version        1.1.1
@description    YourHana website is more suitable for wide screens.
@author         BreatFR (https://breat.fr)
@namespace      https://gitlab.com/breatfr
@homepageURL    https://gitlab.com/breatfr/yourhana
@supportURL     https://discord.gg/Q8KSHzdBxs
@license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor   stylus

@var    checkbox    blurcontent     "Blur content"      0
@var    checkbox    darkmode        "Dark mode"         1
@var    checkbox    thinscrollbar   "Thin scrollbar"    1
@var    checkbox    widemode        "Wide mode"         1
==/UserStyle== */

/* === Credits ===
Website         https://breat.fr
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
telegram        https://t.me/breatfr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
=== Credits === */

@-moz-document domain("yourhana.ai") {
    :root {
        --themeversion: 'Theme v1.1.1';
        --author: 'by BreatFR';
        --link: ' gitlab.com/breatfr/yourhana ';
    }

    .min-h-screen.bg-gray-100.flex.flex-col > nav > div.max-w-7xl.mx-auto.px-4.sm\\:px-6.lg\\:px-8 > div > div:nth-child(1)::after {
        background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        content: var(--themeversion) ' · ' var(--author) '\A' url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHN0eWxlPSJ0cmFuc2Zvcm06IHNjYWxlWSgtMSk7Ij48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2NiY2JjYiIgZD0iTTMwNyAzNC44Yy0xMS41IDUuMS0xOSAxNi42LTE5IDI5LjJ2NjRIMTc2Qzc4LjggMTI4IDAgMjA2LjggMCAzMDRDMCA0MTcuMyA4MS41IDQ2Ny45IDEwMC4yIDQ3OC4xYzIuNSAxLjQgNS4zIDEuOSA4LjEgMS45YzEwLjkgMCAxOS43LTguOSAxOS43LTE5LjdjMC03LjUtNC4zLTE0LjQtOS44LTE5LjVDMTA4LjggNDMxLjkgOTYgNDE0LjQgOTYgMzg0YzAtNTMgNDMtOTYgOTYtOTZoOTZ2NjRjMCAxMi42IDcuNCAyNC4xIDE5IDI5LjJzMjUgMyAzNC40LTUuNGwxNjAtMTQ0YzYuNy02LjEgMTAuNi0xNC43IDEwLjYtMjMuOHMtMy44LTE3LjctMTAuNi0yMy44bC0xNjAtMTQ0Yy05LjQtOC41LTIyLjktMTAuNi0zNC40LTUuNHoiLz48L3N2Zz4=") var(--link) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHRyYW5zZm9ybT0icm90YXRlKDE4MCkiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBmaWxsPSIjY2JjYmNiIiBkPSJNMzA3IDM0LjhjLTExLjUgNS4xLTE5IDE2LjYtMTkgMjkuMnY2NEgxNzZDNzguOCAxMjggMCAyMDYuOCAwIDMwNEMwIDQxNy4zIDgxLjUgNDY3LjkgMTAwLjIgNDc4LjFjMi41IDEuNCA1LjMgMS45IDguMSAxLjljMTAuOSAwIDE5LjctOC45IDE5LjctMTkuN2MwLTcuNS00LjMtMTQuNC05LjgtMTkuNUMxMDguOCA0MzEuOSA5NiA0MTQuNCA5NiAzODRjMC01MyA0My05NiA5Ni05Nmg5NnY2NGMwIDEyLjYgNy40IDI0LjEgMTkgMjkuMnMyNSAzIDM0LjQtNS40bDE2MC0xNDRjNi43LTYuMSAxMC42LTE0LjcgMTAuNi0yMy44cy0zLjgtMTcuNy0xMC42LTIzLjhsLTE2MC0xNDRjLTkuNC04LjUtMjIuOS0xMC42LTM0LjQtNS40eiIvPjwvc3ZnPg==") ;
        display: flex;
        flex-direction: column;
        font-size: 18px;
        left: 50%;
        position: absolute;
        text-align: center;
        top: 5px;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        width: max-content;
        white-space: pre-line;
    }
    
    /* Change cursor on disabled elements */
    :disabled {
        cursor: not-allowed;
    }
    
    if blurcontent {
        .flex.items-center.gap-1.justify-end.text-xs.text-gray-600.font-light.sm\\:ml-3.py-2 > span,
        .hidden.sm\\:flex.sm\\:items-center > div > div > div:nth-child(1) > span > button > span > span,
        .prose.max-w-none.prose-sm > p {
            filter: blur(10px);
        }
    }
    
    if darkmode {
        .bg-gray-100,
        .hidden.sm\\:flex.sm\\:items-center > div > div > div:nth-child(1) > span > button,
        .absolute.z-50.mt-2.rounded-md.shadow-lg.w-48.origin-top-right.right-0 > div,
        .max-w-6xl.z-10.absolute.left-0.right-0.flex.flex-col.w-full.px-4.pb-3.mx-auto.transition-all.duration-200.ease-in-out > ul,
        svg.h-4 > path:nth-child(2),
        svg.h-4 > path:nth-child(3),
        svg.h-4 > path:nth-child(4),
        svg.h-4 > path:nth-child(5),
        svg.h-4 > path:nth-child(6),
        svg.h-4 > path:nth-child(7),
        svg.h-4 > path:nth-child(8),
        svg.h-4 > path:nth-child(9),
        svg.h-5 > path:nth-child(2),
        svg.h-5 > path:nth-child(3),
        svg.h-5 > path:nth-child(4),
        svg.h-5 > path:nth-child(5),
        svg.h-5 > path:nth-child(6),
        svg.h-5 > path:nth-child(7),
        svg.h-5 > path:nth-child(8),
        svg.h-5 > path:nth-child(9),
        header,
        main,
        nav,
        .max-w-6xl,
        .max-w-7xl {
            background-color: rgb(9, 16, 29) !important;
            fill: white;
        }

        * {
            color: white !important;
        }
        
        .shadow-md,
        .flex.items-center.justify-end.bg-gray-50.border-gray-200.border-t.text-right.px-6.py-4,
        .px-4.py-5.bg-white.sm\\:p-6.shadow.sm\\:rounded-tl-md.sm\\:rounded-tr-md,
        .bg-gray-50.border-t.px-6.py-4.text-sm.text-gray-700,
        .flex.items-center.justify-end.px-4.py-3.bg-gray-50.text-right.sm\\:px-6.shadow.sm\\:rounded-bl-md.sm\\:rounded-br-md,
        .mt-5.md\\:mt-0.md\\:col-span-2 > div,
        .flex.flex-row.text-gray-700.-m-2.mr-0 > div,
        .hover\\:bg-gray-100:hover {
            background-color: #a78bfa1a;
        }
        
        /* Connect buttons */
        [data-platform-name="Discord"] > div,
        [data-platform-name="Telegram"] > div {
            background-color: rgb(30 41 59);
        }

        .px-6.pb-2 > span:nth-child(1),
        .px-6.pb-2 > span:nth-child(2),
        .px-6.pb-2 > span:nth-child(3) {
            background-color: rgb(9, 16, 29);
        }

        /* Enable Voice Messages? box */
        #headlessui-dialog-panel-9 {
            background-color: rgb(9, 16, 29);
        }
        
        /* Form fields */
        input,
        option,
        select,
        .mt-5 > div > span:nth-child(3) > span > button,
        .relative > span {
            color: black !important;
        }
        
        /* Hana's bubbles */
        .relative.text-sm.py-2.px-4.shadow.rounded-xl.sm\\:ml-3.bg-white {
            background: linear-gradient(to right, #cc2b5e, #753a88);
            border-radius: 8px 20px 20px 20px;
        }

        /* Our bubbles */
        .relative.text-sm.py-2.px-4.shadow.rounded-xl.sm\\:mr-3.bg-violet-100 {
            background: linear-gradient(to right, #3a6186, #89253e);
            border-radius: 20px 8px 20px 20px;
        }

        /* Heart background */
        .flex.flex-col.pt-6.pb-12.relative > div {
            background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) fixed 100%;
        }
        
        /* Chat link in nav */
        div.flex.items-center.flex-1.justify-end > a > i {
            color: rgb(139 92 246) !important;
        }

        div.flex.items-center.flex-1.justify-end > a > i:hover {
            color: rgb(124 58 237) !important;
        }
        
        /* textarea */
        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 100% 50%;
            }
        }

        textarea:not(:focus) {
            animation: gradient 5s ease infinite;
            animation-fill-mode: forwards;
            background-color: rgb(9, 16, 29);
            background-image: linear-gradient(90deg, rgba(58,180,133,0.14066876750700286) 0%, rgba(89,98,140,0.16307773109243695) 21%, rgba(253,29,29,0.16307773109243695) 43%, rgba(218,41,141,0.16867997198879547) 65%, rgba(183,53,252,0.24711134453781514) 80%, rgba(252,176,69,0.3031337535014006) 100%);
            background-size: 400% 400%;
            border: 0px;
            border-radius: 20px 0px 0px 20px;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        textarea:focus {
            animation: gradient 5s ease infinite;
            animation-fill-mode: forwards;
            background-color: rgb(9, 16, 29);
            background-image: linear-gradient(90deg, rgba(58,180,133,0.14066876750700286) 0%, rgba(89,98,140,0.16307773109243695) 21%, rgba(253,29,29,0.16307773109243695) 43%, rgba(218,41,141,0.16867997198879547) 65%, rgba(183,53,252,0.24711134453781514) 80%, rgba(252,176,69,0.3031337535014006) 100%);
            background-size: 400% 400%;
            border-radius: 20px 0px 0px 20px;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .flex.items-center.justify-center.bg-violet-500.rounded-r.text-white.px-4.py-2.transition.duration-300.ease-in-out.cursor-pointer.hover\\:bg-violet-600 {
            border-radius: 0px 20px 20px 0px;
        }

        /* Connect buttons */
        #headlessui-disclosure-panel-8 > div > div.mt-2.flex.flex-col.sm\\:flex-row.flex-wrap.items-start.md\\:items-center.gap-2 > div:nth-child(1) > div > button > span,
        #headlessui-disclosure-panel-8 > div > div.mt-2.flex.flex-col.sm\\:flex-row.flex-wrap.items-start.md\\:items-center.gap-2 > div:nth-child(2) > div > div.flex.items-center.gap-2.truncate > span,
        #headlessui-disclosure-panel-8 > div > div.mt-2.flex.flex-col.sm\\:flex-row.flex-wrap.items-st...

Reviews

No reviews yet.