☰

YourHana responsive + customizations

YourHana website is more suitable for wide screens.

  1. /* ==UserStyle==
  2. @name           YourHana responsive + customizations
  3. @version        1.1.1
  4. @description    YourHana website is more suitable for wide screens.
  5. @author         BreatFR (https://breat.fr)
  6. @namespace      https://gitlab.com/breatfr
  7. @homepageURL    https://gitlab.com/breatfr/yourhana
  8. @supportURL     https://discord.gg/Q8KSHzdBxs
  9. @license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor   stylus
  11.  
  12. @var    checkbox    blurcontent     "Blur content"      0
  13. @var    checkbox    darkmode        "Dark mode"         1
  14. @var    checkbox    thinscrollbar   "Thin scrollbar"    1
  15. @var    checkbox    widemode        "Wide mode"         1
  16. ==/UserStyle== */
  17.  
  18. /* === Credits ===
  19. Website         https://breat.fr
  20. facebook        https://www.facebook.com/breatfroff
  21. mastodon        https://mastodon.social/@breat_fr
  22. telegram        https://t.me/breatfr
  23. vk              https://vk.com/breatfroff
  24. X (twitter)     https://x.com/breatfroff
  25. === Credits === */
  26.  
  27. @-moz-document domain("yourhana.ai") {
  28.     :root {
  29.         --themeversion: 'Theme v1.1.1';
  30.         --author: 'by BreatFR';
  31.         --link: ' gitlab.com/breatfr/yourhana ';
  32.     }
  33.  
  34.     .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 {
  35.         background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  36.         background-clip: text;
  37.         -webkit-background-clip: text;
  38.         color: transparent;
  39.         content: var(--themeversion) ' · ' var(--author) '\A' url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHN0eWxlPSJ0cmFuc2Zvcm06IHNjYWxlWSgtMSk7Ij48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2NiY2JjYiIgZD0iTTMwNyAzNC44Yy0xMS41IDUuMS0xOSAxNi42LTE5IDI5LjJ2NjRIMTc2Qzc4LjggMTI4IDAgMjA2LjggMCAzMDRDMCA0MTcuMyA4MS41IDQ2Ny45IDEwMC4yIDQ3OC4xYzIuNSAxLjQgNS4zIDEuOSA4LjEgMS45YzEwLjkgMCAxOS43LTguOSAxOS43LTE5LjdjMC03LjUtNC4zLTE0LjQtOS44LTE5LjVDMTA4LjggNDMxLjkgOTYgNDE0LjQgOTYgMzg0YzAtNTMgNDMtOTYgOTYtOTZoOTZ2NjRjMCAxMi42IDcuNCAyNC4xIDE5IDI5LjJzMjUgMyAzNC40LTUuNGwxNjAtMTQ0YzYuNy02LjEgMTAuNi0xNC43IDEwLjYtMjMuOHMtMy44LTE3LjctMTAuNi0yMy44bC0xNjAtMTQ0Yy05LjQtOC41LTIyLjktMTAuNi0zNC40LTUuNHoiLz48L3N2Zz4=") var(--link) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHRyYW5zZm9ybT0icm90YXRlKDE4MCkiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBmaWxsPSIjY2JjYmNiIiBkPSJNMzA3IDM0LjhjLTExLjUgNS4xLTE5IDE2LjYtMTkgMjkuMnY2NEgxNzZDNzguOCAxMjggMCAyMDYuOCAwIDMwNEMwIDQxNy4zIDgxLjUgNDY3LjkgMTAwLjIgNDc4LjFjMi41IDEuNCA1LjMgMS45IDguMSAxLjljMTAuOSAwIDE5LjctOC45IDE5LjctMTkuN2MwLTcuNS00LjMtMTQuNC05LjgtMTkuNUMxMDguOCA0MzEuOSA5NiA0MTQuNCA5NiAzODRjMC01MyA0My05NiA5Ni05Nmg5NnY2NGMwIDEyLjYgNy40IDI0LjEgMTkgMjkuMnMyNSAzIDM0LjQtNS40bDE2MC0xNDRjNi43LTYuMSAxMC42LTE0LjcgMTAuNi0yMy44cy0zLjgtMTcuNy0xMC42LTIzLjhsLTE2MC0xNDRjLTkuNC04LjUtMjIuOS0xMC42LTM0LjQtNS40eiIvPjwvc3ZnPg==") ;
  40.         display: flex;
  41.         flex-direction: column;
  42.         font-size: 18px;
  43.         left: 50%;
  44.         position: absolute;
  45.         text-align: center;
  46.         top: 5px;
  47.         transform: translateX(-50%);
  48.         -webkit-transform: translateX(-50%);
  49.         width: max-content;
  50.         white-space: pre-line;
  51.     }
  52.     
  53.     /* Change cursor on disabled elements */
  54.     :disabled {
  55.         cursor: not-allowed;
  56.     }
  57.     
  58.     if blurcontent {
  59.         .flex.items-center.gap-1.justify-end.text-xs.text-gray-600.font-light.sm\\:ml-3.py-2 > span,
  60.         .hidden.sm\\:flex.sm\\:items-center > div > div > div:nth-child(1) > span > button > span > span,
  61.         .prose.max-w-none.prose-sm > p {
  62.             filter: blur(10px);
  63.         }
  64.     }
  65.     
  66.     if darkmode {
  67.         .bg-gray-100,
  68.         .hidden.sm\\:flex.sm\\:items-center > div > div > div:nth-child(1) > span > button,
  69.         .absolute.z-50.mt-2.rounded-md.shadow-lg.w-48.origin-top-right.right-0 > div,
  70.         .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,
  71.         svg.h-4 > path:nth-child(2),
  72.         svg.h-4 > path:nth-child(3),
  73.         svg.h-4 > path:nth-child(4),
  74.         svg.h-4 > path:nth-child(5),
  75.         svg.h-4 > path:nth-child(6),
  76.         svg.h-4 > path:nth-child(7),
  77.         svg.h-4 > path:nth-child(8),
  78.         svg.h-4 > path:nth-child(9),
  79.         svg.h-5 > path:nth-child(2),
  80.         svg.h-5 > path:nth-child(3),
  81.         svg.h-5 > path:nth-child(4),
  82.         svg.h-5 > path:nth-child(5),
  83.         svg.h-5 > path:nth-child(6),
  84.         svg.h-5 > path:nth-child(7),
  85.         svg.h-5 > path:nth-child(8),
  86.         svg.h-5 > path:nth-child(9),
  87.         header,
  88.         main,
  89.         nav,
  90.         .max-w-6xl,
  91.         .max-w-7xl {
  92.             background-color: rgb(9, 16, 29) !important;
  93.             fill: white;
  94.         }
  95.  
  96.         * {
  97.             color: white !important;
  98.         }
  99.         
  100.         .shadow-md,
  101.         .flex.items-center.justify-end.bg-gray-50.border-gray-200.border-t.text-right.px-6.py-4,
  102.         .px-4.py-5.bg-white.sm\\:p-6.shadow.sm\\:rounded-tl-md.sm\\:rounded-tr-md,
  103.         .bg-gray-50.border-t.px-6.py-4.text-sm.text-gray-700,
  104.         .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,
  105.         .mt-5.md\\:mt-0.md\\:col-span-2 > div,
  106.         .flex.flex-row.text-gray-700.-m-2.mr-0 > div,
  107.         .hover\\:bg-gray-100:hover {
  108.             background-color: #a78bfa1a;
  109.         }
  110.         
  111.         /* Connect buttons */
  112.         [data-platform-name="Discord"] > div,
  113.         [data-platform-name="Telegram"] > div {
  114.             background-color: rgb(30 41 59);
  115.         }
  116.  
  117.         .px-6.pb-2 > span:nth-child(1),
  118.         .px-6.pb-2 > span:nth-child(2),
  119.         .px-6.pb-2 > span:nth-child(3) {
  120.             background-color: rgb(9, 16, 29);
  121.         }
  122.  
  123.         /* Enable Voice Messages? box */
  124.         #headlessui-dialog-panel-9 {
  125.             background-color: rgb(9, 16, 29);
  126.         }
  127.         
  128.         /* Form fields */
  129.         input,
  130.         option,
  131.         select,
  132.         .mt-5 > div > span:nth-child(3) > span > button,
  133.         .relative > span {
  134.             color: black !important;
  135.         }
  136.         
  137.         /* Hana's bubbles */
  138.         .relative.text-sm.py-2.px-4.shadow.rounded-xl.sm\\:ml-3.bg-white {
  139.             background: linear-gradient(to right, #cc2b5e, #753a88);
  140.             border-radius: 8px 20px 20px 20px;
  141.         }
  142.  
  143.         /* Our bubbles */
  144.         .relative.text-sm.py-2.px-4.shadow.rounded-xl.sm\\:mr-3.bg-violet-100 {
  145.             background: linear-gradient(to right, #3a6186, #89253e);
  146.             border-radius: 20px 8px 20px 20px;
  147.         }
  148.  
  149.         /* Heart background */
  150.         .flex.flex-col.pt-6.pb-12.relative > div {
  151.             background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) fixed 100%;
  152.         }
  153.         
  154.         /* Chat link in nav */
  155.         div.flex.items-center.flex-1.justify-end > a > i {
  156.             color: rgb(139 92 246) !important;
  157.         }
  158.  
  159.         div.flex.items-center.flex-1.justify-end > a > i:hover {
  160.             color: rgb(124 58 237) !important;
  161.         }
  162.         
  163.         /* textarea */
  164.         @keyframes gradient {
  165.             0% {
  166.                 background-position: 0% 50%;
  167.             }
  168.             100% {
  169.                 background-position: 100% 50%;
  170.             }
  171.         }
  172.  
  173.         textarea:not(:focus) {
  174.             animation: gradient 5s ease infinite;
  175.             animation-fill-mode: forwards;
  176.             background-color: rgb(9, 16, 29);
  177.             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%);
  178.             background-size: 400% 400%;
  179.             border: 0px;
  180.             border-radius: 20px 0px 0px 20px;
  181.             transition: all .3s;
  182.             -webkit-transition: all .3s;
  183.         }
  184.  
  185.         textarea:focus {
  186.             animation: gradient 5s ease infinite;
  187.             animation-fill-mode: forwards;
  188.             background-color: rgb(9, 16, 29);
  189.             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%);
  190.             background-size: 400% 400%;
  191.             border-radius: 20px 0px 0px 20px;
  192.             transition: all .3s;
  193.             -webkit-transition: all .3s;
  194.         }
  195.  
  196.         .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 {
  197.             border-radius: 0px 20px 20px 0px;
  198.         }
  199.  
  200.         /* Connect buttons */
  201.         #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,
  202.         #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,
  203.         #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 > div > span {
  204.             color: rgb(139 92 246) !important;
  205.         }
  206.     }
  207.     
  208.     if widemode {
  209.         .bg-gray-100,
  210.         .hidden.sm\\:flex.sm\\:items-center > div > div > div:nth-child(1) > span > button,
  211.         .absolute.z-50.mt-2.rounded-md.shadow-lg.w-48.origin-top-right.right-0 > div,
  212.         .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,
  213.         svg.h-4 > path:nth-child(2),
  214.         svg.h-4 > path:nth-child(3),
  215.         svg.h-4 > path:nth-child(4),
  216.         svg.h-4 > path:nth-child(5),
  217.         svg.h-4 > path:nth-child(6),
  218.         svg.h-4 > path:nth-child(7),
  219.         svg.h-4 > path:nth-child(8),
  220.         svg.h-4 > path:nth-child(9),
  221.         svg.h-5 > path:nth-child(2),
  222.         svg.h-5 > path:nth-child(3),
  223.         svg.h-5 > path:nth-child(4),
  224.         svg.h-5 > path:nth-child(5),
  225.         svg.h-5 > path:nth-child(6),
  226.         svg.h-5 > path:nth-child(7),
  227.         svg.h-5 > path:nth-child(8),
  228.         svg.h-5 > path:nth-child(9),
  229.         main,
  230.         .max-w-6xl,
  231.         .max-w-7xl {
  232.             max-width: 100%;
  233.             min-width: 100%;
  234.         }
  235.         
  236.         .py-6,
  237.         .py-12 {
  238.             padding-top: 0px;
  239.         }
  240.         .pb-12 {
  241.             padding-bottom: 25px;
  242.         }
  243.  
  244.         /* Hide header */
  245.         nav {
  246.             border-bottom: 0px;
  247.         }
  248.         header {
  249.             display: none;
  250.         }
  251.         
  252.         /* Tips */
  253.         .flex.items-center.gap-1.justify-end.text-xs.text-gray-600.font-light.sm\\:ml-3.py-2,
  254.         .absolute.text-xs.bottom-0.right-0.\-mb-5.mr-2.text-gray-400.w-full.text-right.flex.flex-row.gap-2.items-center.justify-end,
  255.         .prose.max-w-none.prose-sm,
  256.         .text-slate-500 {
  257.             font-size: 16px !important;
  258.         }
  259.  
  260.         .flex.flex-row.text-xs.text-slate-500.mt-2.ml-8.gap-2 {
  261.             font-size: 0.75rem !important;
  262.         }
  263.  
  264.         /* Bigger text */
  265.         .prose.max-w-none.prose-sm > p,
  266.         .text-sm {
  267.             font-size: 20px;
  268.         }
  269.     }
  270.         
  271.     if thinscrollbar {
  272.         ::-webkit-scrollbar {
  273.           width: 5px;
  274.           border-radius: 20px;
  275.         }
  276.  
  277.         ::-webkit-scrollbar-track {
  278.           box-shadow: inset 0 0 5px grey; 
  279.           border-radius: 20px;
  280.         }
  281.  
  282.         ::-webkit-scrollbar-thumb {
  283.           background: rgb(139 92 246);
  284.           border-radius: 20px;
  285.         }
  286.  
  287.         ::-webkit-scrollbar-thumb:hover {
  288.           background: rgb(124 58 237);
  289.           border-radius: 20px;
  290.         }
  291.     }
  292. }