☰

Nomi Dark Theme

Dark theme for Nomi.

作者のサイトでサポートを受ける。または、このスクリプトの質問や評価の投稿はこちら、通報はこちらへお寄せください。 
  1. /* ==UserStyle==
  2. @name            Nomi Dark Theme
  3. @description     Dark theme for Nomi.
  4. @version         1.35.0
  5. @author          BreatFR (https://breat.fr)
  6. @namespace       https://gitlab.com/breatfr
  7. @homepageURL     https://gitlab.com/breatfr/nomi
  8. @supportURL      https://discord.com/channels/1099791840028405864/1138872233641652364
  9. @license         AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. ==/UserStyle== */
  11.  
  12. /* === Credits ===
  13. Created by  BreatFR
  14. Creatied on 2023/08/08
  15. Website     https://breat.fr
  16. facebook    https://www.facebook.com/breatfroff
  17. mastodon    https://mastodon.social/@breat_fr
  18. telegram    https://t.me/breatfr
  19. vk          https://vk.com/breatfroff
  20. X (twitter) https://x.com/breatfroff
  21. === Credits === */
  22.  
  23. @-moz-document domain("nomi.ai") {
  24.         /* ========================================================================
  25.        Bigger chat font size
  26.      ======================================================================= */
  27.     .css-2hr7pt,
  28.     .css-3td3fo,
  29.     .css-d56yar {
  30.         font-size: 20px;
  31.     }
  32.  
  33.     /* ========================================================================
  34.        Remove logo at the top left corner
  35.      ======================================================================= */
  36.     .css-zkgx86, /* Remove logo */
  37.     .css-e2xlbb.el09qsr0 > div:nth-of-type(1) /* Remove border under removed logo */{
  38.         display: none;
  39.     }
  40.  
  41.     /* ========================================================================
  42.        Heart background
  43.      ======================================================================= */
  44.     .css-1vi0cy8 {
  45.         background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) fixed 100% !important;
  46.         border-radius: 0px 0px 20px 20px;
  47.     }
  48.  
  49.     /* ========================================================================
  50.        Thin scrollbars for normally all browsers
  51.      ======================================================================= */
  52.     ::-webkit-scrollbar {
  53.       width: 5px;
  54.     }
  55.  
  56.     ::-webkit-scrollbar-track {
  57.       box-shadow: inset 0 0 5px grey; 
  58.       border-radius: 20px;
  59.     }
  60.  
  61.     ::-webkit-scrollbar-thumb {
  62.       background: pink;
  63.       border-radius: 20px;
  64.     }
  65.  
  66.     ::-webkit-scrollbar-thumb:hover {
  67.       background: white; 
  68.     }
  69.  
  70.     /* ========================================================================
  71.        Bigger image in picture viewer
  72.      ======================================================================= */
  73.     .css-staxus {
  74.         height: 100% !important;
  75.     }
  76.  
  77.     /* ========================================================================
  78.        Textarea customization
  79.      ======================================================================= */
  80.     @keyframes gradient {
  81.         0% {
  82.             background-position: 0% 50%;
  83.         }
  84.         100% {
  85.             background-position: 100% 50%;
  86.         }
  87.     }
  88.  
  89.     textarea:not(:focus) {
  90.         animation: gradient 5s ease infinite;
  91.         animation-fill-mode: forwards !important;
  92.         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%);
  93.         background-size: 200% 200%;
  94.         color: #2f343d !important;
  95.     }
  96.  
  97.     textarea:focus {
  98.         animation: gradient 5s ease infinite;
  99.         animation-fill-mode: forwards !important;
  100.         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%);
  101.         background-size: 200% 200%;
  102.         border-color: #9610FF !important;
  103.         color: var(--toastify-color-light) !important;
  104.     }
  105.  
  106.     /* Fix texarea to always stay on screen */
  107.     .css-1ooloxp {
  108.         position: sticky !important;
  109.     }
  110.  
  111.     /* Make textarea to grow to the top and not to the down and add rouned corners */
  112.     .css-d56yar {
  113.         border-radius: 20px;
  114.         min-height: 56px;
  115.         resize: vertical !important;
  116.     }
  117.  
  118.     /* Hide the resizer of the textarea */
  119.     textarea::-webkit-resizer {
  120.         display: none;
  121.     }
  122.  
  123.     /* ========================================================================
  124.        Height of menu
  125.      ======================================================================= */
  126.     .css-udmu36 {
  127.         border-top: 0px !important;
  128.         min-height: 85px;
  129.         max-height: 85px;
  130.         padding: 0px !important;
  131.     }
  132.  
  133.     /* Little bigger font-size in menu */
  134.     .css-1pqzh7c {
  135.         font-size: 14px;
  136.     }
  137.  
  138.     /* ========================================================================
  139.        Nomi's names list in left side
  140.      ======================================================================= */
  141.     /* Smaller names */
  142.     .css-5f4tlo {
  143.         line-height: 100%;
  144.         padding: 10px 0px;
  145.     }
  146.  
  147.     /* Nomi's name and pictures link, infos link SVG are pink in left side of chat page */
  148.     .css-5f4tlo h4,
  149.     .css-5f4tlo svg path {
  150.         color: pink !important;
  151.         stroke: pink;
  152.     }
  153.  
  154.     /* Remove borders between nomis list if more than 1 nomi */
  155.     .css-nzao1s.eawisc75 div {
  156.         border: 0px !important;
  157.     }
  158.  
  159.     /* ========================================================================
  160.        Pictures are in row in chat
  161.      ======================================================================= */
  162.     .css-1cwe3m3 {
  163.         display: grid;
  164.         gap: 8px;
  165.         grid-template-columns: repeat(4, 1fr);
  166.         justify-items: center;
  167.     }
  168.  
  169.     /* ========================================================================
  170.        Add rounded corners to pics in chat and photo album page
  171.      ======================================================================= */
  172.     .e129scxq2,
  173.     .css-yb98gs {
  174.         border-radius: 20px !important;
  175.     }
  176.  
  177.     /* ========================================================================
  178.        Replace the "Profile picture" overlay photo album page by a border
  179.      ======================================================================= */
  180.     .css-yb98gs {
  181.         background: transparent !important;
  182.         border: 5px solid rgb(171, 64, 255);
  183.     }
  184.  
  185.     .css-1gp3erv:hover {
  186.         transform: scale(1.9) !important;
  187.         transition: 0.2s linear !important;
  188.         z-index: 9999 !important;
  189.     }
  190.  
  191.     .css-yb98gs p {
  192.         display: none;
  193.     }
  194.  
  195.     /* ========================================================================
  196.        Image zoom on hover in picture viewer page
  197.      ======================================================================= */
  198.     .css-1mh151z:hover {
  199.         display: block;
  200.         max-height: 93%;
  201.         transform: scale(1.25);
  202.         transition: 0.2s linear;
  203.     }
  204.  
  205.     /* ========================================================================
  206.        Dark theme
  207.      ======================================================================= */
  208.     /* Light color for all texts */
  209.     * {
  210.         color: var(--toastify-color-light) !important;
  211.     }
  212.  
  213.     /* Dark background color on whole page */
  214.     body,
  215.     input,
  216.     select,
  217.     --toastify-spinner-color-empty-area,
  218.     ul.css-497xvz,
  219.     .css-18rjz9j,
  220.     .css-ea8az7,
  221.     .css-1j5d3ll,
  222.     .css-8oy3d3,
  223.     .css-1j19l95,
  224.     .css-mcumek,
  225.     .css-9i2gok,
  226.     .css-7fgif5,
  227.     .css-13esyrq,
  228.     .css-1n084m6,
  229.     .css-vtzx0o,
  230.     .css-1l1u68n,
  231.     .css-i616ue,
  232.     .css-1d7lv4w,
  233.     .react-datepicker__month-container,
  234.     .react-datepicker__header,
  235.     .css-1je5qdk,
  236.     .css-1ejta19,
  237.     .css-1n084m6,
  238.     .css-u5iji2,
  239.     .css-1oeraiw,
  240.     .css-1ooloxp {
  241.         background-color: rgb(9, 16, 29) !important;
  242.     }
  243.  
  244.     /* Remove border on pop up for selfie request */
  245.     .css-wwpt19 {
  246.         border: 0px !important;
  247.     }
  248.  
  249.     /* Nomi.ai color in menu */
  250.     .css-g6cz36 {
  251.         color: rgb(150, 16, 255) !important;
  252.     }
  253.  
  254.     /* SVG are white */
  255.     svg path {
  256.         stroke: white;
  257.     }
  258.  
  259.     .css-1u2l9gp svg path {
  260.         stroke: rgb(9, 16, 29);
  261.     }
  262.  
  263.     /* Fix spinner */
  264.     .css-1iw9n18 svg path {
  265.         stroke: none;
  266.     }
  267.  
  268.     /* Fix SVG menu */
  269.     .css-i3pbo svg path,
  270.     .css-vo6oh1 svg path,
  271.     /* Fix SVG customization */
  272.     .css-1v8aab4 svg path,
  273.     .css-1o5vjud svg path,
  274.     /* Fix SVG loading */
  275.     .css-1j0l6xk svg path {
  276.         stroke: rgb(150, 16, 255);
  277.     }
  278.  
  279.     /* Fix camera button */
  280.     .css-1x4dmv7 svg path {
  281.         fill: rgb(150, 16, 255);
  282.     }
  283.  
  284.     /* Make logout SVG and text red again */
  285.     .css-1rv67vh,
  286.     .css-1hmb4pn svg path,
  287.     /* Make delete image SVG red */
  288.     .css-l9wrht svg path {
  289.         color: #e74c3c !important;
  290.         fill: #e74c3c;
  291.     }
  292.  
  293.     /* Delete account button */
  294.     .css-1yp80wt {
  295.         align-items: center;
  296.         background-color: rgb(247, 85, 85);
  297.         border: 2px solid rgb(247, 85, 85);
  298.         border-radius: 100px;
  299.         display: flex;
  300.         font-size: 16px;
  301.         font-weight: 600;
  302.         height: 58px;
  303.         letter-spacing: 0.2px;
  304.         line-height: 22px;
  305.         padding: 18px 32px;    
  306.     }
  307.  
  308.     /* Delete Nomi buttons */
  309.     button.css-8as6rk,
  310.     .css-a6rva7 button {
  311.         background-color: #e74c3c !important;
  312.         color: white !important;
  313.     }
  314.  
  315.     /* Fix SVG on nomi details page when hover */
  316.     .css-bxdqnu:hover svg path {
  317.         fill: white;
  318.     }
  319.  
  320.     /* Fix some buttons and bubbles to make them more visible */
  321.     .css-9i2gok,
  322.     .css-hsqzc1,
  323.     .css-1qvkgqq,
  324.     .css-bxdqnu:hover /* Fix nomi details page hover */ {
  325.         background-color: gray !important;
  326.     }
  327.  
  328.     /* Blue background for the Welcome bubble */
  329.     .css-1y64612 > :last-child {
  330.         background: var(--toastify-color-info) !important;
  331.     }
  332.  
  333.     /* Titles on new nomi page */
  334.     h5.css-124mhq6 {
  335.         background: transparent!important;
  336.         color: var(--toastify-color-light) !important;
  337.     }
  338.  
  339.     /* Selfie notifications */
  340.     .Toastify__zoom-enter svg path,
  341.     .Toastify__zoom-error svg path,
  342.     .Toastify__toast-theme--light,
  343.     .Toastify__toast-body,
  344.     /* Fix bubble during selfie is taking to make her more visible */
  345.     .css-12kxn86,
  346.     .css-kkk4zb {
  347.         background: #616161 !important;
  348.         stroke: none;
  349.     }
  350.  
  351.     /* Make "Send" button and "Delete Nomi Forever" visible again when disabled */
  352.     .css-8as6rk:disabled,
  353.     .css-12a128q:disabled,
  354.     .css-1x4dmv7:disabled svg path {
  355.         background-color: gray !important;
  356.         cursor: not-allowed !important;
  357.         fill: gray;
  358.     }
  359.  
  360.     /* Date bubble */
  361.     .css-ygnlmt {
  362.         background-color: transparent !important;
  363.         display: inline-block;
  364.         padding: 0 10px;
  365.         position: relative;
  366.     }
  367.  
  368.     .css-ygnlmt::before,
  369.     .css-ygnlmt::after {
  370.         background-color: white;
  371.         content: "";
  372.         height: 2px;
  373.         position: absolute;
  374.         top: 20%;
  375.         width:100%;
  376.     }
  377.  
  378.     .css-ygnlmt::before {
  379.         left: 0;
  380.         transform: translate(-100%);
  381.     }
  382.  
  383.     .css-ygnlmt::after {
  384.         transform: translate(100%);
  385.         right: 0;
  386.     }
  387.  
  388.     /* Make send button visible again when disabled */
  389.     .css-ntdqfs:disabled,
  390.     .css-1x4dmv7:disabled {
  391.         background-color: gray !important;
  392.         cursor: not-allowed !important;
  393.     }
  394.  
  395.     /* Our bubbles color */
  396.     .css-3td3fo, /* Our bubbles color mobile */
  397.     .css-13w4jtb {
  398.         background: linear-gradient(to right, #3a6186, #89253e);
  399.         border-radius: 20px 8px 20px 20px;
  400.     }
  401.  
  402.     /* Replace thumbs background and remove borders */
  403.     .css-16hofwr {
  404.         background-color: transparent;
  405.         border: 0px !important;
  406.     }
  407.  
  408.     /* Put a background under unclicked thumbs */
  409.     .css-d3fk4o {
  410.         background: rgb(9, 16, 29) !important;
  411.         border: 0px !important;
  412.     }
  413.  
  414.     /* Remove background under clicked thumbs */
  415.     .css-vocaqi {
  416.         background-color: transparent !important;
  417.         border: 0px !important;
  418.     }
  419.  
  420.     /* Change background color under unclicked thumbs when hover */
  421.     .css-d3fk4o:hover {
  422.         background-color: #eeeeee !important;
  423.     }
  424.  
  425.     /* Remove the border on top of the left side */
  426.     .css-e2xlbb.e1fc4ty00 > div:nth-of-type(1) {
  427.         display: none;
  428.     }
  429.  
  430.     @media (max-width: 1500px) {
  431.         /* Put profile pic in full size without going in album */
  432.         .css-e2xlbb,
  433.         .css-nzao1s {
  434.             border-right: 0px;
  435.             max-width: 768px;
  436.             margin: 0px;
  437.             padding: 0px 0px 0px 2px !important;
  438.         }
  439.  
  440.         /* Remove free space on screen size 640px and more and rearrange a little the space */
  441.         .css-1fswsvh {
  442.             margin-left: min(25vw, 480px);
  443.             padding-right: 10px;
  444.         }
  445.  
  446.         /* Hide scrollbar but keep the function */
  447.         .css-1htcw6x {
  448.             scrollbar-width: none;
  449.             -ms-overflow-style: none;
  450.         }
  451.  
  452.         .css-1htcw6x::-webkit-scrollbar {
  453.             display: none;
  454.         }
  455.  
  456.         .css-1fswsvh {
  457.             padding: 0px 10px 0px 10px;
  458.         }
  459.  
  460.         /* "Current Profile Picture" button on picture viewer page is less opaque */
  461.         .css-1i76af2 {
  462.             opacity: 0.5;
  463.         }
  464.  
  465.         /* Nomi's answers */
  466.         .css-2hr7pt, /* Nomi's bubbles color mobile */
  467.         .css-afkp3z, /* Nomi's bubbles color */
  468.         .css-1ve1qsh /* Nomi's bubbles color when she answer */ {
  469.             background: linear-gradient(to right, #cc2b5e, #753a88);
  470.             border-radius: 8px 20px 20px 20px !important;
  471.             margin-left: 10px !important;
  472.         }
  473.  
  474.         /* Add space between form elements */
  475.         form {
  476.             gap: 10px;
  477.         }
  478.     }
  479.  
  480.     @media (min-width: 1500px) {
  481.         /* Fix bar position with Nomi's name, photo album and infos links at the top */
  482.         .css-5f4tlo {
  483.             background: rgb(9, 16, 29) !important;
  484.             position: sticky;
  485.             top: 0px !important;
  486.             z-index: 9999;
  487.         }
  488.  
  489.         .css-s37f8j {
  490.             overflow-y: scroll;
  491.         }
  492.  
  493.         /* Put profile pic in full size without going in album */
  494.         .css-1htcw6x,
  495.         .css-e2xlbb,
  496.         .css-nzao1s {
  497.             border-right: 0px;
  498.             margin: 0px !important;
  499.             max-width: 770px;
  500.             padding: 0px 0px 0px 2px !important;
  501.             width: 770px;
  502.         }
  503.  
  504.         .css-1fswsvh {
  505.             margin-left: 770px;
  506.             padding: 0px 10px 0px 0px;
  507.         }
  508.  
  509.         /* Remove space between chat and textarea */
  510.         .css-1vi0cy8 {
  511.             gap: 0px !important;
  512.             margin-bottom: 10px;
  513.         }
  514.  
  515.         .e1rpo1t71 {
  516.             margin-top: 25px !important;
  517.         }
  518.  
  519.         .css-1tyfq5e {
  520.             height: 0px;
  521.         }
  522.  
  523.         /* "Current Profile Picture" button on picture viewer page is less opaque and got a little marge under him */
  524.         .css-1i76af2 {
  525.             margin-bottom: 10px;
  526.             opacity: 0.5;
  527.         }
  528.  
  529.         /* Add a round corner to the div on profile pic */
  530.         .css-1htcw6x {
  531.             border-radius: 0px  0px 20px 20px !important;
  532.         }
  533.  
  534.         /* Hide scrollbar but keep the function */
  535.         .css-s37f8j,
  536.         .css-1htcw6x {
  537.             scrollbar-width: none;
  538.             -ms-overflow-style: none;
  539.         }
  540.  
  541.         .css-s37f8j::-webkit-scrollbar,
  542.         .css-1htcw6x::-webkit-scrollbar {
  543.             display: none;
  544.         }
  545.  
  546.         /* Nomi's answer */
  547.         .css-3fim88 {
  548.             margin-left: 10px !important;
  549.         }
  550.  
  551.         .css-2hr7pt, /* Nomi's bubbles color mobile */
  552.         .css-afkp3z, /* Nomi's bubbles color */
  553.         .css-1ve1qsh /* Nomi's bubbles color when she answer */ {
  554.             background: linear-gradient(to right, #cc2b5e, #753a88);
  555.             border-radius: 8px 20px 20px 20px !important;
  556.             margin-left: 10px !important;
  557.         }
  558.  
  559.         /* Add space between form elements */
  560.         form {
  561.             gap: 10px;
  562.             padding: 0px 0px 0px 10px !important;
  563.         }
  564.  
  565.         .css-alqmgy {
  566.             gap: 10px;
  567.         }
  568.  
  569.         /* ========================================================================
  570.         Home page customization to avoid scroll bar
  571.         ======================================================================= */
  572.         /* Avatar, name, hello message, beta alert message go on left side */
  573.         .css-1g4jhqi {
  574.             left: 0px;
  575.             position: fixed;    
  576.             top: 0px;
  577.             width: 25vw;
  578.         }
  579.  
  580.         .css-1g4jhqi img {
  581.             border-radius: 5px;
  582.             left: 10px;
  583.             position: fixed;
  584.             top: 10px;
  585.         }
  586.  
  587.         .css-1y64612 {
  588.             display: block;
  589.             left: 0px;
  590.             position: fixed;
  591.             top: 100px;
  592.             width: 25vw;
  593.         }
  594.  
  595.         .css-1gqy2tx {
  596.             display: block;
  597.             left: 70px;
  598.             position: fixed;
  599.             top: 10px !important;
  600.         }
  601.  
  602.         /* Nomi list */
  603.         .css-cnprv6,
  604.         .css-1pb0fgy {
  605.             margin: 3% 0px 0px 70px;
  606.             padding: 0px;
  607.             width: 60vw !important;
  608.         }
  609.     }
  610. }