Making your janitor experience YOURS
More Customization by thite06
Details
Authorthite06
LicenseNo License
Categoryjanitorai
Created
Updated
Code size22 kB
Code checksume8a6c930
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.4
@description Making your janitor experience YOURS
@author thite06
@preprocessor stylus
@var number widerchat "Chat width % (0 for default)" 0
@var select textbubbles "Chat bubbles" ["s:Separated", "j:Joined", "n:None*"]
@var select alternating "Alternating chat" ["o:Off*", "u:User on right", "b:Bot on right", "2:Both on right"]
@var color theme "Theme color" rgba(0, 0, 0, 0)
@var select backgroundtype "Background type" ["z:Default*", "t:Theme color", "tg:Theme gradient", "12:1>2", "21:2>1", "e:Extra color", "s1:1", "s2:2", "g1:1 gradient", "g2:2 gradient"]
@var number themebackground "Theme color background brightness" [-40, -100, 100, 1, "%"]
@var color extracolor "Extra color" rgba(0, 0, 0, 0)
@var checkbox backgroundchat "Main page background in chat" 0
@var color color1 "Custom color 1" rgba(0, 0, 0, 0)
@var checkbox color2override "Color 2 = darker color 1 (Override)" 1
@var color color2 "Custom color 2" rgba(0, 0, 0, 0)
@var select tags "Hide sender" ["z:None*", "n:Name", "p:PFP", "all:Both"]
@var checkbox icontype "Use Circle PFP in chat?" 0
@var checkbox headerhide "Hide chat header" 0
==/UserStyle== */
@-moz-document url-prefix("https://janitorai.com/")
{
if var(--backgroundtype)==t
{
body > div[id="root"] > div, body:has(.captcha-container)
{
background: lighten(theme, themebackground);
}
}
if backgroundtype==tg
{
body > div[id="root"] > div, body:has(.captcha-container)
{
background: linear-gradient(180deg, #313338 0%, #313338 50%, lighten(theme, themebackground) 100%);
}
}
if backgroundtype==e
{
body > div[id="root"] > div, body:has(.captcha-container)
{
background: extracolor;
}
}
if backgroundtype==eg
{
body > div[id="root"] > div, body:has(.captcha-container)
{
background: linear-gradient(180deg, #313338 0%, #313338 50%, extracolor 100%);
}
}
if backgroundtype=="s1"
{
body > div[id="root"] > div, body:has(.captcha-container)
{
background: color1;
}
}
if backgroundtype=="g1"
{
body > div[id="root"] > div, body:has(.captcha-container)
{
background: linear-gradient(180deg, #313338 0%, #313338 50%, color1 100%);
}
}
if backgroundtype=="s2"
{
body > div[id="root"] > div, body:has(.captcha-container)
{
background: color2;
}
}
if backgroundtype=="g2"
{
body > div[id="root"] > div, body:has(.captcha-container)
{
background: linear-gradient(180deg, #313338 0%, #313338 50%, color2 100%);
}
}
if backgroundtype==12
{
if color1!=rgba(0, 0, 0, 0)
{
if color2!=rgba(0, 0, 0, 0) || color2override
{
body > div[id="root"] > div, body:has(.captcha-container)
{
if color2override
{
--color2: darken(color1, 20%)
}
else
{
--color2: color2
}
background: linear-gradient(var(--color2) 0%, var(--color2) 50%, rgba(color1) 100%);
}
}
else
{
body > div[id="root"] > div, body:has(.captcha-container)
{
background: linear-gradient(180deg, #313338 0%, #313338 50%, rgba(color1) 100%);
}
}
}
else if color2!=rgba(0, 0, 0, 0)
{
body > div[id="root"] > div, body:has(.captcha-container)
{
background: linear-gradient(rgb(color2) 0%, rgb(color2) 50%, #1a0b3b44 100%);
}
}
}
if backgroundtype==21
{
if color2!=rgba(0, 0, 0, 0)
{
if color1!=rgba(0, 0, 0, 0) || color2override
{
body > div[id="root"] > div, body:has(.captcha-container)
{
if color2override
{
--color1: darken(color2, 20%)
}
else
{
--color1: color1
}
background: linear-gradient(var(--color1) 0%, var(--color1) 50%, rgba(color2) 100%);
}
}
else
{
body > div[id="root"] > div, body:has(.captcha-container)
{
background: linear-gradient(180deg, #313338 0%, #313338 50%, rgba(color2) 100%);
}
}
}
else if color1!=rgba(0, 0, 0, 0)
{
body > div[id="root"] > div, body:has(.captcha-container)
{
background: linear-gradient(rgb(color1) 0%, rgb(color1) 50%, #1a0b3b44 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!=rgba(0, 0, 0, 0)
{
.css-1vwsny8, .css-1ocrlcd > div.css-0
{
background: linear-gradient(140deg, lighten(theme, 10%) 0%, theme 40%, lighten(theme, 4%) 90%, lighten(theme, 8%) 100%) !important;
}
.css-1jf56se
{
background: linear-gradient(141deg, rgba(lighten(theme, 10%), 0.12) 12.3558%, rgba(theme, 0.22) 36.8364%, rgba(lighten(theme, 4%), 0.46) 80.13%, rgba(lighten(theme, 8%), 0.22) 100%) !important
}
.css-134lnqc
{
background: linear-gradient(to top, darken(theme, 42%), var(--chakra-colors-transparent)) !important;
}
.css-12y9f64
{
box-shadow: theme 0px 0px 24px 0px inset !important;
}
.css-pz44gm, .chakra-heading
{
color: lighten(theme, 30%) !important;
}
._content_1chl9_11
{
background: rgba(darken(theme, 50%), .62)
}
.css-1sxhvxh > div.css-0
{
background: linear-gradient(140deg, lighten(theme, 10%) 0%, theme 40%, lighten(theme, 4%) 90%, lighten(theme, 8%) 100%) !important;
}
.css-1w58nos
{
box-shadow: darken(theme, 60%) 0px 1px 1px 1px !important;
border: 1px solid darken(theme, 60%) !important;
--badge-color: lighten(theme, 60%) !important;
}
.css-knkzko[aria-selected="true"]
{
--tabs-color: lighten(theme, 20%) !important;
}
.css-1hbdqdc
{
background-image: linear-gradient(160deg, darken(theme, 80%), darken(theme, 60%), darken(theme, 50%), darken(theme, 60%), darken(theme, 80%));
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px, rgba(darken(theme, 80%), 0.7) 0px -2px 5px 1px inset, rgba(lighten(theme, 40%), 0.4) 0px -1px 1px 3px inset;
border: 1px solid darken(theme, 10%);
color: lighten(theme, 50%);
text-shadow: rgba(lighten(theme, 50%), 0.8) 0px 0px 10px;
}
.css-1hbdqdc:hover, .css-1hbdqdc:focus
{
background-size: 150% 150%;
background-image: linear-gradient(160deg, darken(theme, 80%), darken(theme, 60%), darken(theme, 50%), darken(theme, 60%), darken(theme, 80%));
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px, rgba(darken(theme, 80%), 0.7) 0px -2px 5px 1px inset, rgba(lighten(theme, 40%), 0.4) 0px -1px 1px 3px inset;
border: 1px solid darken(theme, 10%);
color: lighten(theme, 50%);
text-shadow: rgba(lighten(theme, 50%), 0.8) 0px 0px 10px;
}
.css-445mh1::before, .css-o3lo1::before, .css-15ls0zu::before
{
background: linear-gradient(160deg, darken(theme, 80%), darken(theme, 60%), darken(theme, 50%), darken(theme, 60%), darken(theme, 80%));
}
.css-v91umc, .css-1irijfk
{
color: lighten(theme, 70%);
text-shadow: rgba(lighten(theme, 50%), 0.5) 0px 0px 10px
}
.Btn2-purple
{
background-image: linear-gradient(140deg, lighten(theme, 10%) 0%, lighten(theme, 40%) 40%, lighten(theme, 4%) 90%, lighten(theme, 8%) 100%) !important;
color: lighten(theme, 20%);
}
.css-zgqw37
{
color: lighten(theme, 30%)
}
.glow-on-hover::before
{
background: linear-gradient(140deg, lighten(theme, 10%) 0%, theme 40%, lighten(theme, 4%) 90%, lighten(theme, 8%) 100%) !important;
}
.css-96l1id
{
color: lighten(theme, 90%)
}
.css-15p9u6a, .css-1ilg6dv, .css-3cpdl
{
color: lighten(theme, 70%)
}
.css-1lgnt2x
{
border-top: 1px solid theme;
}
.chakra-image.css-19ihot3
{
filter: brightness(200%) brightness(50%) sepia(1) hue-rotate(hue(theme) - 38deg) saturate((saturation(theme) - 24.5%) + 100) brightness((60 - lightness(theme)) + 100)
}
/* Recents */
.chakra-text.css-41bf1u, .css-sxcniz, .chakra-text.css-1qxtz39, .css-tmqqf, .css-8mmkcg, .css-lja46y, .css-59fl6t, .css-1qqpju0, .css-1mboaz4
{
color: lighten(theme, 50%);
}
.css-13r5zk5
{
color: spin(lighten(theme, 50%), 60deg)
}
.css-ebmpsj, .css-1yszf7z
{
color: lighten(theme, 50%)
}
.css-15ls0zu, .css-17q4neg::before, .css-nxwsrm::before
{
background-image: linear-gradient(141deg, rgba(theme, 0.05) 12.3558%, rgba(theme, 0.1) 36.8364%, rgba(theme, 0.2) 80.13%, rgba(theme, 0.1) 100%);
}
.css-15ls0zu:hover, .css-o3lo1:hover, .css-445mh1:hover
{
box-shadow: rgba(theme, 0.3) 0px 4px 12px;
border-color: theme;
}
.css-o3lo1, .css-nxwsrm, .css-445mh1, .css-17q4neg
{
background: rgba(theme, 0.05);
border-color: rgba(theme, 0.1);
}
.react-select__option--is-selected
{
/* This one especially sucked to get. Spent an hour to get it to stop hiding itself when I tried to grab its css role*/
background-color: darken(theme, 20%) !important;
}
.dark .react-select__control:hover, .transparent .react-select__control:hover, .react-select__menu-portal .react-select__control:hover
{
/* ... I got intimidated and just selected all of the roles from one of the dropdowns, ok? */
border-color: theme
}
/*Character Page*/
.css-159h0d8:hover
{
color: darken(desaturate(theme, 20%), 40%);
background: lighten(theme, 50%);
}
.css-t7slvc
{
background-color: darken(theme, 80%);
}
.shiny-box
{
background: radial-gradient(circle 40px at 80% -10%, theme, #181b1b);
}
.shiny-box-blob
{
background: radial-gradient(circle 30px at 0% 100%, theme, rgba(theme, .631372549), transparent);
box-shadow: -5px 5px 15px rgba(theme, .176);
}
.shiny-box-inner
{
background: radial-gradient(circle 50px at 80% -60%, darken(theme, 50%), rgba(28, 26, 30, .875));
}
.shiny-box-inner::before
{
background: radial-gradient(circle 30px at 0% 100%, rgba(theme, .1019607843), rgba(theme, .0666666667), transparent);
}
/* Various cross site things*/
.glow-logo
{
co...