Making your janitor experience YOURS
More Customization by thite06
Details
Authorthite06
LicenseNo License
Categoryjanitorai
Created
Updated
Size10 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
A sister style to my C.AI QOL style, this one focused on customization as there's nothing really to fix.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name More Customization
@namespace github.com/openstyles/stylus
@version 1.1.1
@description Making your janitor experience YOURS
@author thite06
@preprocessor stylus
@var number widerchat "Chat width % (0 for default)" 0
@var select textbubbles "Chat bubbles" ["Separated", "Joined", "None*"]
@var checkbox alternating "Alternating chat" 0
@var text theme "Theme color (RGBHex in quotes)" "0"
@var select backgroundtype "Background type" ["z:Default*", "t:Theme color", "1:1>2", "2:2>1"]
@var checkbox backgroundchat "Main page background in chat" 0
@var text color1 "Custom color 1 (RGBHex in quotes)" "0"
@var checkbox color2override "Color 2 = darker color 1 (Override)" 1
@var text color2 "Custom color 2 (RGBHex in quotes)" "0"
@var select tags "Hide sender" ["z:None*", "n:Name", "p:PFP", "all:Both"]
@var checkbox headerhide "Hide chat header" 0
==/UserStyle== */
@-moz-document url-prefix("https://janitorai.com/")
{
if backgroundtype==t
{
body > div[id="root"] > div
{
background: convert(theme);
}
}
if backgroundtype==1
{
if color1!="0"
{
if color2!="0" || color2override
{
body > div[id="root"] > div
{
if color2override
{
--color2: darken(convert(color1), 20%)
}
else
{
--color2: convert(color2)
}
background: linear-gradient(var(--color2) 0%, var(--color2) 50.65%, rgba(convert(color1)) 100%);
}
}
else
{
body > div[id="root"] > div
{
background: linear-gradient(rgb(49, 51, 56) 0%, rgb(49, 51, 56) 50.65%, rgba(convert(color1)) 100%);
}
}
}
else if color2!="0"
{
body > div[id="root"] > div
{
background: linear-gradient(rgb(convert(color2)) 0%, rgb(convert(color2)) 50.65%, rgba(255, 47, 220, 0.324) 100%);
}
}
}
if backgroundtype==2
{
if color2!="0"
{
if color1!="0" || color2override
{
body > div[id="root"] > div
{
if color2override
{
--color1: darken(convert(color2), 20%)
}
else
{
--color1: convert(color1)
}
background: linear-gradient(var(--color1) 0%, var(--color1) 50.65%, rgba(convert(color2)) 100%);
}
}
else
{
body > div[id="root"] > div
{
background: linear-gradient(rgb(49, 51, 56) 0%, rgb(49, 51, 56) 50.65%, rgba(convert(color2)) 100%);
}
}
}
else if color1!="0"
{
body > div[id="root"] > div
{
background: linear-gradient(rgb(convert(color1)) 0%, rgb(convert(color1)) 50.65%, rgba(255, 47, 220, 0.324) 100%);
}
}
}
/* Here's hoping this never breaks. */
/* Also, I absolutely hate how these colors are listed. They could've rooted all of them, but no. Now I have to go out of my way to find every single color difference and change theme to match the theme in a satisfying way. */
if theme!="0"
{
.css-1vwsny8
{
background: linear-gradient(140deg, lighten(convert(theme), 10%) 0%, convert(theme) 40%, lighten(convert(theme), 4%) 90%, lighten(convert(theme), 8%) 100%) !important;
}
.css-1jf56se
{
background: linear-gradient(141deg, rgba(lighten(convert(theme), 10%), 0.12) 12.3558%, rgba(convert(theme), 0.22) 36.8364%, rgba(lighten(convert(theme), 4%), 0.46) 80.13%, rgba(lighten(convert(theme), 8%), 0.22) 100%) !important
}
.css-134lnqc
{
background: linear-gradient(to top, darken(convert(theme), 42%), var(--chakra-colors-transparent)) !important;
}
.css-12y9f64
{
box-shadow: convert(theme) 0px 0px 24px 0px inset !important;
}
.css-pz44gm
{
color: lighten(convert(theme), 30%) !important;
}
._content_1chl9_11
{
background: rgba(darken(convert(theme), 50%), .62)
}
.css-1sxhvxh > div.css-0
{
background: linear-gradient(140deg, lighten(convert(theme), 10%) 0%, convert(theme) 40%, lighten(convert(theme), 4%) 90%, lighten(convert(theme), 8%) 100%) !important;
}
.css-1w58nos
{
box-shadow: darken(convert(theme), 60%) 0px 1px 1px 1px !important;
border: 1px solid darken(convert(theme), 60%) !important;
--badge-color: lighten(convert(theme), 60%) !important;
}
:root
{
/* These guys are cool tho */
--chakra-colors-main: darken(convert(theme), 20%) !important;
}
}
}
@-moz-document url-prefix("https://janitorai.com/chats/")
{
/* I'm learning. This won't be backported to the c.ai qol. */
if alternating
{
main > div > div > div:not(:first-child):not(:last-child) > div:not(:has(img[alt="Character Icon"]))
{
direction: rtl;
}
main > div > div > div:not(:first-child):not(:last-child) > div:not(:has(img[alt="Character Icon"])) > li > div:has(button)
{
left: 0px;
right: unset;
}
main > div > div > div:not(:first-child):not(:last-child) > div:not(:has(img[alt="Character Icon"])) > * > * > * > *
{
direction: ltr;
}
.css-1c2za90:not(:has(img[alt="Character Icon"])) > .css-16u3s6f
{
width: 100%
}
section
{
direction: ltr;
}
}
if textbubbles!="None"
{
:root
{
if color1=="0"
{
if theme=="0"
{
--color1: rgba(128, 90, 213, 0.6)
}
else
{
--color1: rgba(darken(convert(theme), 20%), 0.6)
}
}
else
{
--color1: convert(color1)
}
if color2=="0" or color2override
{
if color1=="0" or !color2override
{
if !color2override
{
if theme=="0"
{
--color2: rgba(128, 90, 213, 0.6)
}
else
{
--color2: rgba(convert(theme), 0.6)
}
}
else
{
if theme=="0"
{
--color2: rgba(darken(rgb(128, 90, 213), 50%), 0.6);
}
else
{
--color2: rgba(darken(convert(theme), 50%), 0.6);
}
}
}
else
{
--color2: darken(convert(color1), 20%)
}
}
else
{
--color2: convert(color2)
}
}
if textbubbles=="Separated"
{
/* I originally used the same padding as seen in C.ai for their chat bubbles, but then decided to shrink it to 0.5rem instead for a much cleaner look. It lines up closely if not perfectly with the pfp of the sender when a message is a single line long.*/
main > div > div > div:not(:first-child):not(:last-child) > div:not(:has(img[alt="Character Icon"])) > li > div > div > div > div > div > p
{
background: var(--color1);
padding: 0.5rem;
border-radius: 10px;
width: fit-content;
}
main > div > div > div:not(:first-child):not(:last-child) > div:has(img[alt="Character Icon"]) > li > div > div > div > div > div > p, main > div > div > div > div > div > div > li > div > div > div > div > div > p
{
background: var(--color2);
padding: 0.5rem;
border-radius: 10px;
width: fit-content;
}
}
if textbubbles=="Joined"
{
main > div > div > div:not(:first-child):not(:last-child) > div:not(:has(img[alt="Character Icon"])) > li > div > div > div:has(p)
{
background: var(--color1);
padding: 0.5rem !important;
border-radius: 10px;
width: fit-content;
}
main > div > div > div:not(:first-child):not(:last-child) > div:has(img[alt="Character Icon"]) > li > div > div > div:has(p), main > div > div > div > div > div > div > li > div > div > div:has(p)
{
background: var(--color2);
padding: 0.5rem !important;
border-radius: 10px;
width: fit-content;
}
}
}
if widerchat
{
:root
{
--chakra-sizes-2xl: widerchat vw
}
}
/* The reasons this came back are simple. It could be for a more immersive chat, there's an argument to be made for more chat space, but i choose the reason of validating my addition of chat bubbles. :) */
if tags==p or tags==all
{
main > div > div > div:not(:first-child):not(:last-child) > div > li > div > div > img, main > div > div > div:not(:first-child):not(:last-child) > div > div > div > li > div > div > img
{
display: none
}
}
if tags==n or tags==all
{
main > div > div > div:not(:first-child):not(:last-child) > div > li > div > div > div:not(:has(p)), main > div > div > div:not(:first-child):not(:last-child) > div > div > div > li > div > div > div:not(:has(p))
{
/* Used visibilty here instead in order to preserve spacing at the very least. Losing spacing on the sides makes sense for the image as all that does is make there be more room for text, but losing spacing on the top and bottom makes it harder to tell who's text belongs to who when you also turn off the pfp.*/
visibility: hidden
}
}
if backgroundchat
{
if backgroundtype==t
{
body > div[id="root"] > div > div
{
background: convert(theme) !important;
}
}
if backgroundtype==1
{
if color1!="0"
{
if color2!="0" || color2override
{
body > div[id="root"] > div > div
{
if color2override
{
--color2: darken(convert(color1), 20%)
}
else
{
--color2: convert(color2)
}
background: linear-gradient(var(--color2) 0%, var(--color2) 50.65%, rgba(convert(color1)) 100%);
}
}
else
{
body > div[id="root"] > div > div
{
background: linear-gradient(rgb(49, 51, 56) 0%, rgb(49, 51, 56) 50.65%, rgba(convert(color1)) 100%);
}
}
}
else if color2!="0"
{
body > div[id="root"] > div > div
{
background: linear-gradient(rgb(convert(color2)) 0%, rgb(convert(color2)) 50.65%, rgba(255, 47, 220, 0.324) 100%);
}
}
}
if backgroundtype==2
{
if color2!="0"
{
if color1!="0" || color2override
{
body > div[id="root"] > div > div
{
if color2override
{
--color1: darken(convert(color2), 20%)
}
else
{
--color1: convert(color1)
}
background: linear-gradient(var(--color1) 0%, var(--color1) 50.65%, rgba(convert(color2)) 100%);
}
}
else
{
body > div[id="root"] > div > div
{
background: linear-gradient(rgb(49, 51, 56) 0%, rgb(49, 51, 56) 50.65%, rgba(convert(color2)) 100%);
}
}
}
else if color1!="0"
{...