NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript==
// @name Chat Customization
// @namespace torn.com
// @version 0.8.4
// @author Ahab [1735214]
// @updateURL https://openuserjs.org/meta/Ahab/Chat_Customization.meta.js
// @downloadURL https://openuserjs.org/install/Ahab/Chat_Customization.user.js
// @require https://gist.githubusercontent.com/BrockA/2625891/raw/9c97aa67ff9c5d56be34a55ad6c18a314e5eb548/waitForKeyElements.js
// @require https://raw.githubusercontent.com/seballot/spectrum/59bfa41e0dac01d5db8fa1dd63322e9f72561c5e/src/spectrum.js
// @require https://raw.githubusercontent.com/wipeautcrafter/jsfontpicker/refs/heads/main/dist/fontpicker.iife.min.js
// @include *torn.com*
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
const sharedStyles = `
[class*="root"][class*="online"]{
background-image: linear-gradient(#c0ff00,#c0ff00)!important;
}
[class*="root"][class*="idle___"]{
background-image: linear-gradient(#ff8000,#ff8000)!important;
}
#optionsLabel{
text-align: center;
}
.optionsRow{
display: flex;
justify-content: space-evenly;
}
.optionsRowB{
display: flex;
justify-items: center;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.optionsRowC{
display: flex;
justify-content: center;
align-items: center;
}
#myRange{
appearance: none;
border-radius: 8px;
height: 4px;
width: 68%;
--chat-range-range-color: var(--chat-theme-dark, #000) var(--chat-theme-light, #e5e5e5);
--chat-range-progress-color-default: var(--chat-theme-dark, #00698c) var(--chat-theme-light, rgba(0, 102, 153, .4));
--chat-range-progress-color-hover: var(--chat-theme-dark, #6edbff) var(--chat-theme-light, rgba(0, 102, 153, .8));
}
#myRange::-webkit-slider-thumb{
-webkit-appearance: none;
background-color: var(--chat-color-surface);
border-color: #6edbff #8cb5c9;
border-color: var(--chat-theme-dark,#6edbff) var(--chat-theme-light,#8cb5c9);
border-radius: 50%;
border-style: solid;
border-width: 2px;
cursor: pointer;
height: 14px;
width: 14px
}
#myRange:hover{
background: linear-gradient(to right, var(--chat-range-progress-color-hover) 100.00%, var(--chat-range-range-color) 100.00%, var(--chat-range-range-color) 100%);
}
.chatOptions {
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding-bottom: 5px;
}
.chatInput{
width: fit-content;
align-self: center;
margin-bottom: 5px;
-webkit-appearance: none;
appearance: none;
background: var(--input-background-color);
color: var(--input-color);
border-radius: 5px;
border: 1px solid;
border-color: var(--input-border-color);
text-align: center;
}
.chatInput::-webkit-outer-spin-button,
.chatInput::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.chatInput:hover {
border-color: var(--input-hover-border-color);
}
.fontCheckbox {
margin: 2px 2px 3px 14px;
align-items: center;
appearance: none;
border: 2px solid;
border-image-slice: 1;
border-image-source: linear-gradient(180deg,#ccc,#999) linear-gradient(0deg,#ccc,#aaa);
border-image-source: var(--chat-theme-dark, linear-gradient(180deg, #ccc 0, #999 100%)) var(--chat-theme-light, linear-gradient(0deg, #ccc 0, #aaa 100%));
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .651);
box-shadow: var(--chat-theme-dark, 0 0 2px rgba(0, 0, 0, .651)) var(--chat-theme-light, 0);
display: flex;
font: inherit;
height: 13px;
justify-content: center;
width: 13px;
}
.fontCheckbox:hover {
border-image-source: linear-gradient(0deg,#fff,#ccc) linear-gradient(0deg,#999,#666);
border-image-source: var(--chat-theme-dark, linear-gradient(0deg, #fff 0, #ccc 100%)) var(--chat-theme-light, linear-gradient(0deg, #999 0, #666 100%));
}
.fontCheckbox:before {
background: linear-gradient(180deg,#ccc,#999) linear-gradient(0deg,#ccc,#aaa);
background: var(--chat-theme-dark, linear-gradient(180deg, #ccc 0, #999 100%)) var(--chat-theme-light, linear-gradient(0deg, #ccc 0, #aaa 100%));
content: "";
height: 5px;
opacity: 0;
transition: opacity .12s ease-in-out;
width: 5px;
}
.fontCheckbox:checked:before {
opacity: 1;
}
.optionText{
font-weight: 700;
line-height: 14px;
color: var(--chat-theme-dark, #ddd) var(--chat-theme-light, #444);
width: 36%;
margin-right: 2px;
}
.h7{
font-size: 1rem;
padding-top: 5px;
}
.sp-container{
background-color: var(--chat-color-background)!important;
}
.sp-input:hover{
border-color: var(--input-hover-border-color);
}
.sp-container{position:absolute;top:0;left:0;display:inline-block;*display:inline;*zoom:1;z-index:9999994;overflow:hidden}.sp-container.sp-flat{position:relative}.sp-container,.sp-container *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.sp-top{position:relative;width:100%;display:inline-block}.sp-top-inner{position:absolute;top:0;left:0;bottom:0;right:0}.sp-color{position:absolute;top:0;left:0;bottom:0;right:20%}.sp-hue{position:absolute;top:0;right:0;bottom:0;left:84%;height:100%}.sp-clear-enabled .sp-hue{top:33px;height:77.5%}.sp-fill{padding-top:80%}.sp-sat,.sp-val{position:absolute;top:0;left:0;right:0;bottom:0}.sp-alpha-enabled .sp-top{margin-bottom:18px}.sp-alpha-enabled .sp-alpha{display:block}.sp-alpha-handle{position:absolute;top:-4px;bottom:-4px;width:6px;left:50%;cursor:pointer;border:1px solid black;background:white;opacity:.8}.sp-alpha{display:none;position:absolute;bottom:-14px;right:0;left:0;height:8px}.sp-alpha-inner{border:solid 1px #333}.sp-clear{display:none}.sp-clear.sp-clear-display{background-position:center}.sp-clear-enabled .sp-clear{display:block;position:absolute;top:0;right:0;bottom:0;left:84%;height:28px}.sp-container,.sp-replacer,.sp-preview,.sp-dragger,.sp-slider,.sp-alpha,.sp-clear,.sp-alpha-handle,.sp-container.sp-dragging .sp-input,.sp-container button{-webkit-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none}.sp-container.sp-input-disabled .sp-input-container{display:none}.sp-container.sp-buttons-disabled .sp-button-container{display:none}.sp-container.sp-palette-buttons-disabled .sp-palette-button-container{display:none}.sp-palette-only .sp-picker-container{display:none}.sp-palette-disabled .sp-palette-container{display:none}.sp-initial-disabled .sp-initial{display:none}.sp-sat{background-image:-webkit-gradient(linear,0 0,100% 0,from(#FFF),to(rgba(204,154,129,0)));background-image:-webkit-linear-gradient(left,#FFF,rgba(204,154,129,0));background-image:-moz-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-o-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:-ms-linear-gradient(left,#fff,rgba(204,154,129,0));background-image:linear-gradient(to right,#fff,rgba(204,154,129,0));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";filter:progid:DXImageTransform.Microsoft.gradient(GradientType = 1,startColorstr='#FFFFFFFF',endColorstr='#00CC9A81')}.sp-val{background-image:-webkit-gradient(linear,0 100%,0 0,from(#000),to(rgba(204,154,129,0)));background-image:-webkit-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-moz-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-o-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:-ms-linear-gradient(bottom,#000,rgba(204,154,129,0));background-image:linear-gradient(to top,#000,rgba(204,154,129,0));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81',endColorstr='#FF000000')}.sp-hue{background:-moz-linear-gradient(top,#f00 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);background:-ms-linear-gradient(top,#f00 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);background:-o-linear-gradient(top,#f00 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);background:-webkit-gradient(linear,left top,left bottom,from(#f00),color-stop(0.17,#ff0),color-stop(0.33,#0f0),color-stop(0.5,#0ff),color-stop(0.67,#00f),color-stop(0.83,#f0f),to(#f00));background:-webkit-linear-gradient(top,#f00 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);background:linear-gradient(to bottom,#f00 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}.sp-1{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000',endColorstr='#ffff00')}.sp-2{height:16%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00',endColorstr='#00ff00')}.sp-3{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00',endColorstr='#00ffff')}.sp-4{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff',endColorstr='#0000ff')}.sp-5{height:16%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff',endColorstr='#ff00ff')}.sp-6{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff',endColorstr='#ff0000')}.sp-hidden{display:none !important}.sp-cf:before,.sp-cf:after{content:"";display:table}.sp-cf:after{clear:both}.sp-cf{*zoom:1}@media(max-device-width:480px){.sp-color{right:40%}.sp-hue{left:63%}.sp-fill{padding-top:60%}}.sp-dragger{border-radius:5px;height:5px;width:5px;border:1px solid #fff;background:#000;cursor:pointer;position:absolute;top:0;left:0}.sp-slider{position:absolute;top:0;cursor:pointer;height:3px;left:-1px;right:-1px;border:1px solid #000;background:white;opacity:.8}.sp-container{border-radius:0;background-color:#ececec;border:solid 1px #000000;padding:0}.sp-container,.sp-container button,.sp-container input,.sp-color,.sp-hue,.sp-clear{font:normal 12px "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.sp-top{margin-bottom:3px}.sp-color,.sp-hue,.sp-clear{border:solid 1px #666}.sp-input-container{float:right;width:100px;margin-bottom:4px}.sp-initial-disabled .sp-input-container{width:100%}.sp-input{font-size:12px !important;border:1px inset;padding:4px 5px;margin:0;width:100%;background:var(--input-background-color);border-radius:3px;color: var(--input-color);border-color: var(--input-border-color);}.sp-input:focus{border:1px solid orange}.sp-input.sp-validation-error{border:1px solid red;background:#fdd}.sp-picker-container,.sp-palette-container{float:left;position:relative;padding:10px;padding-bottom:300px;margin-bottom:-290px}.sp-picker-container{width:172px;}.sp-palette-container{border-right:solid 1px #ccc}.sp-palette-only .sp-palette-container{border:0}.sp-palette .sp-thumb-el{display:block;position:relative;float:left;width:24px;height:15px;margin:3px;cursor:pointer;border:solid 2px transparent}.sp-palette .sp-thumb-el:hover,.sp-palette .sp-thumb-el.sp-thumb-active{border-color:orange}.sp-thumb-el{position:relative}.sp-initial{float:left;border:solid 1px #333}.sp-initial span{width:30px;height:25px;border:0;display:block;float:left;margin:0;box-shadow: var(--chat-theme-dark, 0 0 2px #000) var(--chat-theme-light, 0);}.sp-initial .sp-clear-display{background-position:center}.sp-palette-button-container,.sp-button-container{float:right}.sp-replacer{margin-bottom:3px;overflow:hidden;cursor:pointer;padding:4px;display:inline-block;*zoom:1;*display:inline;border: var(--chat-theme-dark, 0) var(--chat-theme-light, 1px solid #ccc);background: var(--chat-theme-dark, linear-gradient(180deg, #555 0, #333 100%)) var(--chat-theme-light, linear-gradient(180deg, #fff 0, #ddd 100%));color:var(--chat-theme-dark, #ddd) var(--chat-theme-light, #666) !important;box-shadow: var(--chat-theme-dark, 0 0 2px #000) var(--chat-theme-light, 0);vertical-align:middle}.sp-replacer:hover,.sp-replacer.sp-active{background: var(--chat-theme-dark, linear-gradient(180deg, #666 0, #444 100%)) var(--chat-theme-light, #fff);color:#111}.sp-replacer.sp-disabled{cursor:default;border-color:silver;color:silver}.sp-dd{padding:2px 0;height:16px;line-height:16px;float:left;font-size:10px}.sp-preview{position:relative;width:25px;height:20px;border:solid 1px #222;margin-right:5px;float:left;z-index:0}.sp-palette{*width:220px;max-width:220px}.sp-palette .sp-thumb-el{width:16px;height:16px;margin:2px 1px;border:solid 1px #d0d0d0}.sp-container{padding-bottom:0}.sp-container button{background-color:#eee;background-image:-webkit-linear-gradient(top,#eee,#ccc);background-image:-moz-linear-gradient(top,#eee,#ccc);background-image:-ms-linear-gradient(top,#eee,#ccc);background-image:-o-linear-gradient(top,#eee,#ccc);background-image:linear-gradient(to bottom,#eee,#ccc);border:1px solid #ccc;border-bottom:1px solid #bbb;border-radius:3px;color:#333;font-size:14px;line-height:1;padding:5px 4px;text-align:center;text-shadow:0 1px 0 #eee;vertical-align:middle}.sp-container button:hover{background-color:#ddd;background-image:-webkit-linear-gradient(top,#ddd,#bbb);background-image:-moz-linear-gradient(top,#ddd,#bbb);background-image:-ms-linear-gradient(top,#ddd,#bbb);background-image:-o-linear-gradient(top,#ddd,#bbb);background-image:linear-gradient(to bottom,#ddd,#bbb);border:1px solid #bbb;border-bottom:1px solid #999;cursor:pointer;text-shadow:0 1px 0 #ddd}.sp-container button:active{border:1px solid #aaa;border-bottom:1px solid #888;-webkit-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;-moz-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;-ms-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;-o-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee}.sp-cancel{font-size:11px;color:#d93f3f !important;margin:0;padding:2px;margin-right:5px;vertical-align:middle;text-decoration:none}.sp-cancel:hover{color:#d93f3f !important;text-decoration:underline}.sp-palette span:hover,.sp-palette span.sp-thumb-active{border-color:#000}.sp-preview,.sp-alpha,.sp-thumb-el{position:relative;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.sp-preview-inner,.sp-alpha-inner,.sp-thumb-inner{display:block;position:absolute;top:0;left:0;bottom:0;right:0}.sp-palette .sp-thumb-inner{background-position:50% 50%;background-repeat:no-repeat}.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=)}.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=)}.sp-clear-display{background-repeat:no-repeat;background-position:center;background-image:url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==)}
/* Theming */
[data-bs-theme='dark'],
[data-fp-theme='dark'] {
--fp-select-toggle-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
--fp-body-bg: #212529 !important;
--fp-body-color: #dee2e6 !important;
--fp-body-bg-rgb: 33, 37, 41 !important;
--fp-border-color: #495057 !important;
--fp-border-color-rgb: 73, 80, 87 !important;
--fp-border-color-translucent: rgba(255, 255, 255, 0.15) !important;
--fp-tertiary-color: rgba(222, 226, 230, 0.5) !important;
}
:root,
[data-bs-theme='light'],
[data-fp-theme='light'] {
--fp-select-toggle-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
--fp-body-bg: #fff;
--fp-body-color: #212529;
--fp-body-bg-rgb: 255, 255, 255;
--fp-border-color: #dee2e6;
--fp-border-color-rgb: 222, 226, 230;
--fp-border-color-translucent: rgba(0, 0, 0, 0.175);
--fp-tertiary-color: rgba(33, 37, 41, 0.5);
}
:root {
--fp-dark: #212529;
--fp-light: #fff;
--fp-primary: #0d6efd;
--fp-secondary: #ff8239;
--fp-hover-color: #0b5ed7;
--fp-ring-color: #86b7fe;
--fp-ring-shadow: rgba(13, 110, 253, 0.25) 0 0 0 0.25rem;
--fp-danger-rgb: 220, 53, 69;
--fp-border-radius-sm: 0.25rem;
--fp-border-radius: 0.375rem;
--fp-border-radius-lg: 0.5rem;
--fp-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--fp-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
/* Global */
.fpb__input,
.fpb__input *,
.fpb__input ::before,
.fpb__input ::after,
.fpb__modal,
.fpb__modal *,
.fpb__modal ::before,
.fpb__modal ::after {
box-sizing: border-box;
}
/* Default component styling */
.fpb__input,
.fpb__modal {
color: var(--fp-body-color);
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
'Helvetica Neue',
'Noto Sans',
'Liberation Sans',
Arial,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji';
}
/* Inputs */
.fpb__input {
display: block;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--chat-theme-dark, #fff) var(--chat-theme-light, #444);
appearance: none;
background: var(--input-background-color);
padding: 0.375rem 0.75rem;
border: 1px solid var(--input-border-color);
border-radius: 5px;
transition:
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
}
input:autofill {
background-color: var(--input-background-color) !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 30px var(--chat-theme-dark, #000) var(--chat-theme-light, linear-gradient(180deg, #e4e4e4 0, #f2f2f2 100%)) inset !important;
-webkit-text-fill-color: var(--input-color) !important;
transition: background-color 5000s ease-in-out 0s;
}
.fpb__input:hover {
border-color: var(--input-hover-border-color);
}
.fpb__input:focus {
outline: 0;
border-color: var(--fp-ring-color);
box-shadow: var(--fp-ring-shadow);
}
.fpb__input:disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.75;
}
.fpb__dropdown {
margin: unset; /* CSS reset */
padding: 0.375rem 0.775rem 0.375rem 0.75rem;
background-image: var(--fp-select-toggle-img);
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
margin: 0 auto;
}
.fpb__dropdown:hover{
background: var(--chat-theme-dark, linear-gradient(180deg, #666 0, #444 100%)) var(--chat-theme-light, #fff);
}
#fp__subsets{
background: var(--chat-theme-dark, #000) var(--chat-theme-light, linear-gradient(180deg, #e4e4e4 0, #f2f2f2 100%));
border-color: var(--chat-theme-dark, #444) var(--chat-theme-light, #fff);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .149);
cursor: pointer;
}
#fp__width{
background: var(--chat-theme-dark, #000) var(--chat-theme-light, linear-gradient(180deg, #e4e4e4 0, #f2f2f2 100%));
border-color: var(--chat-theme-dark, #444) var(--chat-theme-light, #fff);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .149);
cursor: pointer;
}
#fp__thickness{
background: var(--chat-theme-dark, #000) var(--chat-theme-light, linear-gradient(180deg, #e4e4e4 0, #f2f2f2 100%));
border-color: var(--chat-theme-dark, #444) var(--chat-theme-light, #fff);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .149);
cursor: pointer;
}
#fp__complexity{
background: var(--chat-theme-dark, #000) var(--chat-theme-light, linear-gradient(180deg, #e4e4e4 0, #f2f2f2 100%));
border-color: var(--chat-theme-dark, #444) var(--chat-theme-light, #fff);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .149);
cursor: pointer;
}
#fp__curvature{
background: var(--chat-theme-dark, #000) var(--chat-theme-light, linear-gradient(180deg, #e4e4e4 0, #f2f2f2 100%));
border-color: var(--chat-theme-dark, #444) var(--chat-theme-light, #fff);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .149);
cursor: pointer;
}
#fp__sort{
background: var(--chat-theme-dark, #000) var(--chat-theme-light, linear-gradient(180deg, #e4e4e4 0, #f2f2f2 100%));
border-color: var(--chat-theme-dark, #444) var(--chat-theme-light, #fff);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .149);
cursor: pointer;
}
/* Modals */
.fpb__modal {
position: fixed;
max-width: 32rem;
width: calc(100vw - 1rem);
height: calc(100vh - 3rem);
top: 50%;
left: 15%;
background: var(--chat-theme-dark, linear-gradient(180deg, #555 0, #333 100%)) var(--chat-theme-light, linear-gradient(180deg, #fff 0, #ddd 100%));
color: var(--chat-theme-dark, #ddd) var(--chat-theme-light, #666);
border: 1px solid var(--fp-border-color-translucent);
border-radius: var(--fp-border-radius-lg);
background-color: var(--fp-body-bg);
box-shadow: var(--fp-box-shadow);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -51%);
transition:
opacity 0.5s,
transform 0.5s;
z-index: 9999999999;
}
.fpb__modal ::-webkit-scrollbar {
width: 12px;
}
.fpb__modal ::-webkit-scrollbar-track {
background: #ddd;
background: var(--chat-box-scroll-track);
}
.fpb__modal ::-webkit-scrollbar-thumb {
background: #f2f2f2;
background: var(--chat-box-scroll-thumb-bg);
background-clip: content-box;
border: 3px solid transparent;
border-radius: 8px;
}
.fpb__modal.fpb__open {
opacity: 1;
pointer-events: all;
transform: translate(-50%, -50%);
}
.fpb__backdrop {
position: fixed;
width: 100vw;
height: 100vh;
inset: 0;
z-index: 1054;
background-color: #000;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
.fpb__modal.fpb__open + .fpb__backdrop {
opacity: 0.5;
pointer-events: all;
}
.fpb__modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.fp__modal-title {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
font-family: inherit;
}
.fpb__modal button:hover {
background-color: transparent !important; /* CSS reset */
}
.fpb__modal-footer {
display: flex;
align-items: center;
padding: 1rem;
gap: 1rem;
border-top: 1px solid var(--sidebar-horizontal-divider-bg-color);
}
.fpb__modal .fpb__input {
width: 100%;
}
.fpb__btn-close {
display: grid;
place-items: center;
color: var(--fp-tertiary-color);
font-size: 2rem;
width: 0.75em;
height: 0.75em;
padding: 0;
line-height: 0;
appearance: none;
background: none;
border: none;
border-radius: var(--fp-border-radius);
}
.fpb__btn-close:hover {
color: var(--fp-body-color);
}
.fpb__btn-close:focus-visible {
outline: 0;
box-shadow: var(--fp-ring-shadow);
}
/* Accordion */
.fpb__accordion-item {
margin-top: -1px;
}
.fpb__accordion-toggle {
--fp-accordion-toggle-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
display: flex;
width: 100%;
align-items: center;
color: var(--fp-body-color);
font-size: 1rem;
text-align: start;
appearance: none;
background: none;
border: none;
border-radius: 0;
border-bottom: 1px solid var(--sidebar-horizontal-divider-shadow-color);
border-top: 1px solid var(--sidebar-horizontal-divider-bg-color);
padding: 0.5rem 1rem;
margin: 0;
transition:
border-color 0.15s,
box-shadow 0.15s;
}
.fpb__accordion-toggle::after {
content: '';
margin-left: auto;
width: 1.25rem;
height: 1.25rem;
background-image: var(--fp-accordion-toggle-img);
background-repeat: no-repeat;
background-size: 100% 100%;
transition: transform 0.2s;
}
.fpb__accordion-item.fpb__open > .fpb__accordion-toggle::after {
transform: rotate(-180deg);
}
.fpb__accordion-content {
--fpb-height: 0;
max-height: 0;
overflow: hidden;
visibility: hidden;
transition: max-height 0.2s;
}
.fpb__accordion-content > * {
padding: 0.5rem 1rem;
border-top: 1px solid var(--sidebar-horizontal-divider-bg-color);
}
.fpb__accordion-item.fpb__open .fpb__accordion-content {
--fpb-height: fit-content;
max-height: var(--fpb-height);
visibility: visible;
}
.fpb__accordion-toggle:focus {
outline: 0;
box-shadow: var(--fp-ring-shadow);
border-color: var(--fp-ring-color);
}
/* Button */
[role='button'],
button {
cursor: pointer;
}
.fpb__btn {
--fpb-variant: var(--fp-primary);
cursor: pointer;
font-size: 1rem;
padding: 0.375rem 0.75rem;
line-height: 1.5;
color: var(--fp-light);
text-align: center;
user-select: none;
border: 1px solid var(--fpb-variant);
background-color: var(--fpb-variant);
border-radius: var(--fp-border-radius);
transition:
color 0.15s,
background-color 0.15s,
border-color 0.15s,
box-shadow 0.15s,
opacity 0.15s;
}
.fpb__btn:hover {
opacity: 0.8;
}
.fpb__btn-small {
font-size: 0.75rem;
padding: 0.1rem 0.5rem;
}
.fpb__btn-pill {
border-radius: 9999px;
}
button.fpb__btn-pill:hover {
/* CSS reset */
background-color: var(--fpb-variant) !important;
border-color: var(--fpb-variant) !important;
}
.fpb__btn-secondary {
--fpb-variant: var(--fp-secondary);
}
.fpb__btn-link {
color: var(--fpb-variant);
background: none;
border: none;
}
.fpb__btn-link::after {
content: '';
width: 0px;
height: 1px;
display: block;
background: currentColor;
opacity: 0;
transition:
width 0.2s,
opacity 0.2s;
}
.fpb__btn-link:hover {
/* CSS reset */
background: inherit !important;
}
.fpb__btn-link:hover::after {
width: 100%;
opacity: 1;
}
.fpb__hidden-input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
.fpb__btn-toggle {
white-space: nowrap;
color: var(--fpb-variant);
background-color: transparent;
}
.fpb__btn-flip,
.fpb__btn-toggle.fpb__active,
input:checked + .fpb__btn-toggle {
background-color: var(--fpb-variant);
border-color: var(--fpb-variant);
color: var(--fp-light);
}
.fpb__btn-flip > * {
transition: transform 0.25s ease-in-out;
}
input:checked + .fpb__btn-flip > *,
.fpb__btn-flip.fpb__active > * {
transform: scaleY(-1);
}
.fpb__btn:focus-visible,
input:focus-visible + .fpb__btn-toggle {
outline: 0;
opacity: 0.8;
box-shadow: var(--fp-ring-shadow);
}
.fpb__btn:disabled,
input:disabled + .fpb__btn-toggle {
opacity: 0.5;
cursor: not-allowed;
}
/* Input groups */
.fpb__input-group {
display: flex;
}
.fpb__input-group > *:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.fpb__input-group > *:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Grid utility */
.fpb__grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.fpb__span-2 {
grid-column: span 2;
}
.fpb__grow {
flex-grow: 1;
}
.fpb__hlist {
display: flex;
overflow-x: auto;
gap: 0.5rem;
}
.fpb__hidden {
display: none !important;
}
#fp__pick span{
color: #ddd!important;
}
#fp__pick svg rect{
fill: #ddd!important;
}
/* Text utility */
.fpb__has-icon,
.fpb__has-icon * {
vertical-align: middle;
color: var(--chat-theme-dark, #ddd) var(--chat-theme-light, #666);
}
.fpb__has-icon svg {
margin-right: 0.25rem;
}
.fpb__primary {
color: var(--fp-primary);
}
@media (max-width: 1750px) {
.fpb__modal{
left: 50%;
}
}
@media (max-width: 576px) {
.fpb__modal {
height: calc(100vh - 1rem);
}
.fpb__grid-2 {
display: flex;
flex-direction: column;
}
}
/* Font picker button element */
.font-picker {
text-align: start;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
background: var(--chat-theme-dark, linear-gradient(180deg, #555 0, #333 100%)) var(--chat-theme-light, linear-gradient(180deg, #fff 0, #ddd 100%));
border: var(--chat-theme-dark, 0) var(--chat-theme-light, 1px solid #ccc);
box-shadow: var(--chat-theme-dark, 0 0 2px #000) var(--chat-theme-light, 0);
color: var(--chat-theme-dark, #ddd) var(--chat-theme-light, #666) !important;
}
input.font-picker {
caret-color: transparent;
}
/* Filters */
.fp__changed::after {
content: '*';
color: var(--fp-secondary);
}
/* Font list */
#fp__fonts {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: scroll;
padding: 0.25rem;
margin-top: -1px;
border-top: 1px solid var(--sidebar-horizontal-divider-bg-color);
}
#fp__fonts:focus-visible {
outline: 0;
box-shadow: var(--fp-ring-shadow);
border-color: var(--fp-ring-color);
transition:
border-color 0.15s,
box-shadow 0.15s;
}
/* Font item */
.fp__font-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.25rem 1rem;
min-height: 2rem;
user-select: none;
border-radius: 9999px;
}
.fp__font-item:hover {
background: var(--chat-theme-dark, linear-gradient(180deg, #666 0, #444 100%)) var(--chat-theme-light, #fff);
}
.fp__font-item.fp__selected {
color: var(--fp-light);
background: var(--fp-primary);
}
.fp__font-family {
font-size: 1rem;
pointer-events: none;
}
/* Font heart */
.fp__heart {
height: 1em;
}
.fp__heart svg {
height: 1em;
pointer-events: none;
--fp-heart-color: var(--fp-border-color-rgb);
fill: rgba(var(--fp-heart-color), 0.5);
stroke: rgb(var(--fp-heart-color));
}
.fp__heart:hover svg {
fill: rgb(var(--fp-heart-color));
}
.fp__font-item:hover .fp__heart svg,
.fp__font-item.fp__selected .fp__heart svg {
--fp-heart-color: var(--fp-body-bg-rgb);
}
.fp__font-item.fp__fav .fp__heart svg {
--fp-heart-color: var(--fp-danger-rgb);
}
.fp__font-item.fp__fav.fp__selected .fp__heart svg {
filter: drop-shadow(0px 0px 2px var(--fp-dark));
}
/* Preview */
.fp__preview-container {
padding: 0.25rem;
border-top: 1px solid var(--sidebar-horizontal-divider-bg-color);
}
#fp__preview {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
font-size: 1.25rem;
line-height: 1.5;
padding-inline: 0.75rem;
border: 1px solid transparent;
transition:
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
}
#fp__preview:focus {
outline: 0;
border-color: var(--fp-ring-color);
box-shadow: var(--fp-ring-shadow);
}
/* Variants */
#fp__variants {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--sidebar-horizontal-divider-shadow-color);
border-top: 1px solid var(--sidebar-horizontal-divider-bg-color);
}
#fp__variants:has(#fp__italic:checked) {
font-style: italic !important;
}
#fp__variants:empty {
display: none;
}
`
var settings = {}
var chatId = {}
var temp = {}
var userId = 0
var customColor = ""
var activeStyle = GM_addStyle(sharedStyles)
var selfId = $("script[server_name*='torn']")[0].attributes[3].value
var chosenFont = ""
if(localStorage.chatSettings === undefined){
localStorage.chatSettings = JSON.stringify({'bubbles':'','userIds':{}})
settings = JSON.parse(localStorage.chatSettings)
if($('div[id^="settings_panel"]').length != 1){
alert('Please open the chat settings so I can check your bubble setting')
}
}else{
settings = JSON.parse(localStorage.chatSettings);
}
$.each(settings.userIds, function( index, value ) {
if(index != selfId){
if('bg' in settings.userIds[index]){
$('<style id='+index+'-bg>#chatRoot [class*="list"] [class*="root"]:has([id*="'+index+'"]), div[id*="'+index+'"] *:has(> [class*="box___"]:not([class*="root___"][class*="self"] [class*="box___"])):not(:has(a[id*="'+selfId+'"])), div[id*="'+index+'"] *:has(> [class*="box___"]:not([class*="root___"][class*="self"] [class*="box___"])):not(:has(a[id*="'+selfId+'"]))::before{ background-color:'+settings.userIds[index].bg+'!important; padding: 3px 3px 3px 3px;}</style>').appendTo('head')
}
if('fc' in settings.userIds[index]){
$('<style id='+index+'-fc>#chatRoot [class*="list"] [class*="root"]:has([id*="'+index+'"]) [class*="message"], div[id*="'+index+'"] [class*="message_"]:not([class*="self"] [class*="message_"], span:first-child:has(a[id*="'+selfId+'"]) + span[class*="message_"]) > span, a[id*="'+index+'"]{color:'+settings.userIds[index].fc+'!important}</style>').appendTo('head')
}
if('font' in settings.userIds[index]){
if(index != 'global'){
$('<link href="https://fonts.googleapis.com/css2?family='+settings.userIds[index].font+'&display=swap" rel="stylesheet">').appendTo('head')
$('<style id='+index+'-font>#chatRoot [class*="list"] [class*="root"]:has([id*="'+index+'"]) [class*="message"], div[id*="'+index+'"] [class*="message_"]:not([class*="self"] [class*="message_"], span:first-child:has(a[id*="'+selfId+'"]) + span[class*="message_"]) > span{font-family:"'+settings.userIds[index].font.replace(/\+/g, ' ')+'"!important}</style>').appendTo('head')
}else{
$('<link href="https://fonts.googleapis.com/css2?family='+settings.userIds[index].font+'&display=swap" rel="stylesheet">').appendTo('head')
$('<style id="global-font">#chatRoot [class*="list"] [class*="root"] [class*="message___"]{font-family:"'+settings.userIds[index].font.replace(/\+/g, ' ')+'"}</style>').appendTo('head')
}
}
}
if(index == selfId){
if('bg' in settings.userIds[index]){
$('<style id='+selfId+'-bg>div[id*="'+selfId+'"] [class*="self"], #chatRoot [class*="list"] [class*="root"]:has([id*="'+selfId+'"]), div[id*="'+selfId+'"] [class*="self"]::after{ background-color:'+settings.userIds[index].bg+'!important; padding: 3px 3px 3px 3px;}</style>').appendTo('head')
}
if('fc' in settings.userIds[index]){
$('<style id='+selfId+'-fc>div[id*="'+selfId+'"] [class*="self"] [class*="message_"], #chatRoot [class*="list"] [class*="root"]:has([id*="'+selfId+'"]) [class*="message"], a[id*="'+selfId+'"]{ color:'+settings.userIds[index].fc+'!important}</style>').appendTo('head')
}
if('font' in settings.userIds[index]){
$('<link href="https://fonts.googleapis.com/css2?family='+settings.userIds[index].font+'&display=swap" rel="stylesheet">').appendTo('head')
$('<style id='+selfId+'-font>div[id*="'+selfId+'"] [class*="self"] [class*="message_"], #chatRoot [class*="list"] [class*="root"]:has([id*="'+selfId+'"]) [class*="message"], a[id*="'+selfId+'"]{ font-family:"'+settings.userIds[index].font.replace(/\+/g, ' ')+'"!important}</style>').appendTo('head')
}
}
});
$('<style id="fs">span[class*="message___"], a[class*="sender___"], #chatRoot div[class*="list"] p[class*="message___"]{font-size:'+settings.fs+'rem; line-height: 18px !important;}</style>').appendTo('head')
$('<link rel="preconnect" href="https://fonts.gstatic.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />').appendTo('head')
function saveId(uid, type, color){
temp = {}
temp[(uid)] = {[type]:color}
$.extend(true, settings['userIds'], temp)
localStorage.chatSettings = JSON.stringify(settings);
}
function removeId(uid, type){
$('style[id*="'+uid+'-'+type+'"]').remove()
if(settings.userIds[uid]){
delete settings.userIds[uid][type]
if(Object.keys(settings.userIds[uid]).length == 0){
delete settings.userIds[uid]
}
localStorage.chatSettings = JSON.stringify(settings)
}
}
function changeFont(from, font, userId){
if(from == 'pickersp'){
if($.isNumeric(userId)){
if(font !== null){
chosenFont = font.family.name.replace(/ /g, '+')
$('style[id*='+userId+'-font]').remove()
if(userId == selfId){
$('<style id="'+selfId+'-font">div[id*="'+selfId+'"] [class*="self"] [class*="message_"], #chatRoot [class*="list"] [class*="root"]:has([id*="'+selfId+'"]) [class*="message"]{font-family:"'+chosenFont.replace(/\+/g, ' ')+'"}</style>').appendTo('head')
saveId(selfId, 'font', chosenFont)
}else{
$('<style id="'+userId+'-font">#chatRoot [class*="list"] [class*="root"]:has([id*="'+userId+'"]) [class*="message"], div[id*="'+userId+'"] [class*="message_"]:not([class*="self"] [class*="message_"], span:first-child:has(a[id*="'+selfId+'"]) + span[class*="message_"]) > span, a[id*="'+userId+'"]{font-family:"'+chosenFont.replace(/\+/g, ' ')+'"}</style>').appendTo('head')
saveId(userId, 'font', chosenFont)
}
}else{
$('style[id*='+userId+'-font]').remove()
removeId(userId, 'font')
}
}else if(userId == 'global'){
if(font !== null){
chosenFont = font.family.name.replace(/ /g, '+')
$('<style id="global-font">#chatRoot [class*="list"] [class*="root"] [class*="message___"]{font-family:"'+chosenFont.replace(/\+/g, ' ')+'"}</style>').appendTo('head')
saveId(userId, 'font', chosenFont)
}else{
$('style[id*=global-font]').remove()
removeId('global', 'font')
}
}
}else{
if(font !== null){
chosenFont = font.family.name.replace(/ /g, '+')
$('style[id*='+userId+'-font]').remove()
$('<style id="'+userId+'-font">#chatRoot [class*="list"] [class*="root"]:has([id*="'+userId+'"]) [class*="message"], div[id*="'+userId+'"] [class*="message_"]:not([class*="self"] [class*="message_"], span:first-child:has(a[id*="'+selfId+'"]) + span[class*="message_"]) > span, a[id*="'+userId+'"]{font-family:"'+chosenFont.replace(/\+/g, ' ')+'"}</style>').appendTo('head')
saveId(userId, 'font', chosenFont)
}else{
$('style[id*='+userId+'-font]').remove()
removeId(userId, 'font')
}
}
userId = ''
}
function options(){
var bgy = getComputedStyle(document.documentElement).getPropertyValue('--chat-color-background')
var fcy = getComputedStyle(document.documentElement).getPropertyValue('--chat-theme-dark')
var bgt = getComputedStyle(document.documentElement).getPropertyValue('--chat-color-background')
var fct = getComputedStyle(document.documentElement).getPropertyValue('--chat-theme-dark')
var fs = '0.75'
if(selfId in settings.userIds){
if('bg' in settings.userIds[selfId]){
bgy = settings.userIds[selfId].bg
}
if('fc' in settings.userIds[selfId]){
fcy = settings.userIds[selfId].fc
}
}
if($('div[class^="optionsContainer"]').length != 0){
userId = $('div[class^="optionsContainer"]')[0].children[0].href.split("=")[1]
if(userId in settings.userIds){
if('bg' in settings.userIds[userId]){
bgt = settings.userIds[userId].bg
}
if('fc' in settings.userIds[userId]){
fct = settings.userIds[userId].fc
}
}
}
if('fs' in settings){
fs = settings['fs']
}
if($('div[class^="optionsContainer___"]').length == 1 && $('div[class^="optionsContainer___"] [id^="chatOptions"]').length == 0){
$('div[class^="optionsContainer___"]').append('<hr class="delimiter-999 m-top10 m-bottom10"><div id="chatOptions" class="chatOptions"><div id="optionsLabel" class="h6">Options</div><div class="optionsRowB" style="margin-left: 11px; margin-right: 15px;"><label for="myRange" class="optionText">Font Size ('+fs+')</label><input type="range" min="0.1" max="1.5" value="'+fs+'" step="0.01" id="myRange" style="width: 95%;"></div><div id="optionsLabel" class="h7">You</div><div class="optionsRow"><div><input id="custom" data-color="'+bgy+'" class="bgpickerYou" style="display: none;"><p class="typography___Dc5WV body4 color-#333333">Background</p></div><div><input id="custom" data-color="'+fcy+'" class="fcpickerYou" style="display: none;"><p class="typography___Dc5WV body4 color-#333333 chat-box-options__label___QSXin">Font</p></div></div><div id="optionsLabel" class="h7">Them</div><div class="optionsRow"><div><input id="custom" data-color="'+bgt+'" class="bgpickerThem" style="display: none;"><p class="typography___Dc5WV body4 color-#333333">Background</p></div><div><input id="custom" data-color="'+fct+'" class="fcpickerThem" style="display: none;"><p class="typography___Dc5WV body4 color-#333333 chat-box-options__label___QSXin">Font</p></div></div><button id="fontPicker"></div>')
if($('div[class^="optionsContainer___"]').height() != $('div[class^="optionsContainer___"]').parent().parent().height()){
$('div[class^="optionsContainer___"]').css({'max-height':$('div[class^="optionsContainer___"]').parent().parent().height()-30+'px', 'overflow-y':'auto'})
}
const picker = new FontPicker('#fontPicker', {
language: 'en',
font: null,
defaultSubset: 'latin',
variants: false,
container: '.logged-in',
showCancelButton: true,
showClearButton: true,
})
picker.on('pick', function(font){
changeFont('picker', font, userId)
})
}
if($('div[id^="settings_panel"]').length == 1 && $('div[id^="settings_panel"] [id^="chatOptions"]').length == 0){
var rangeClass = $('input[class*="range"]')[0].className
var rootClass = $('input[class*="range"]').parent()[0].className
$('<hr class="delimiter-999 m-top10 m-bottom10"><div id="chatOptionssp" class="chatOptions"><div id="optionsLabel" class="h6">Chat Options</div><div class="optionsRowB"><label for="myRange" class="optionText">Font Size ('+fs+')</label><input type="range" min="0.1" max="1.5" value="'+fs+'" step="0.01" id="myRange"></div><div id="optionsLabel" class="h7">You</div><div class="optionsRow"><div><input id="custom" data-color="'+bgy+'" class="bgpickerYou" style="display: none;"><p class="typography___Dc5WV body4 color-#333333">Background</p></div><div><input id="custom" data-color="'+fcy+'" class="fcpickerYou" style="display: none;"><p class="typography___Dc5WV body4 color-#333333 chat-box-options__label___QSXin">Font</p></div></div><div id="optionsLabel" class="h7">Them</div><input id="chatInput" class="chatInput" type="number" placeholder="Player ID here"/><div class="optionsRow"><div><input id="custom" data-color="'+getComputedStyle(document.documentElement).getPropertyValue('--chat-box-body-message-box')+'" class="bgpickerThem" style="display: none;"><p class="typography___Dc5WV body4 color-#333333">Background</p></div><div><input id="custom" data-color="'+getComputedStyle(document.documentElement).getPropertyValue('--chat-box-body-message')+'" class="fcpickerThem" style="display: none;"><p class="typography___Dc5WV body4 color-#333333 chat-box-options__label___QSXin">Font</p></div></div><div id="optionsLabel" class="h7">Font Family</div><div class="optionsRowC"><input type="checkbox" id="selfCheck" class="fontCheckbox"><label for="selfCheck">Self</label><input type="checkbox" id="globalCheck" class="fontCheckbox"><label for="globalCheck">Global</label></div><input id="fontInput" class="chatInput" type="number" placeholder="Player ID here"/><button id="fontPickersp"></button></div>').appendTo($('div[id^="settings_panel"] [class*="content___"]')[0])
const pickersp = new FontPicker('#fontPickersp', {
language: 'en',
font: null,
defaultSubset: 'latin',
variants: false,
container: '.logged-in',
showCancelButton: true,
showClearButton: true,
})
pickersp.on('pick', function(font){
if($('input[id*=selfCheck]').prop('checked')){
userId = selfId
}
else if($('input[id*=globalCheck]').prop('checked')){
userId = 'global'
}else{
userId = $('input[id*=fontInput]')[0].value
}
changeFont('pickersp', font, userId)
})
}
$('input[id*="myRange"]').each( function(){
var n = (($(this)[0].value - 0.1) / (1.5 - 0.1) * 100).toFixed(2);
var o = "var(--chat-range-range-color)", c = "var(--chat-range-progress-color-default)";
$(this)[0].style.background = "linear-gradient(to right, ".concat(c, " ").concat(n, "%, ").concat(o, " ").concat(n, "%, ").concat(o, " 100%)")
})
if($('div[id^="settings_panel"]').length == 1){
if($('label:contains("Bubbles")').children(0).prop('checked')){
settings.bubbles = true
localStorage.chatSettings = JSON.stringify(settings);
}else{
settings.bubbles = false
localStorage.chatSettings = JSON.stringify(settings);
}
}
$("#custom, #custom1").spectrum({
type: "color",
showPalette: false,
showInput: true,
showAlpha: true,
allowEmpty: true,
clickoutFiresChange: true,
closeOnClickout: true,
showInitial: true,
showButtons: false,
cancelText: "cancel",
chooseText: "choose",
preferredFormat: "rgb",
});
$(".bgpickerYou").on('move.spectrum change.spectrum', function(e, tinycolor){
var userCheck = selfId in settings.userIds ? String(settings.userIds[selfId].bg) : ""
$('style[id*="'+selfId+'-bg"]').remove()
if($('style[id*="pseudo-bg"]').length == 0){
$('<style id="pseudo-bg">div[class*="self"], a[id*="'+selfId+'"], #chatRoot [class*="list"] [class*="root"]:has([id*="'+selfId+'"]){ background-color:'+userCheck+'!important} div[id*="'+selfId+'"] [class*="self"]::after{ background-color:'+userCheck+'!important}</style>').appendTo('head')
}
if(e.type == 'move'){
if(e.target.value !== ""){
customColor = tinycolor.toRgbString()
$('style[id*="pseudo-bg"]')[0].sheet.rules[0].style.setProperty('background-color', customColor, 'important');
}else{
$('style[id*="pseudo-bg"]')[0].sheet.rules[0].style.setProperty('background-color', "");
}
}
if(e.type == 'change'){
if(e.target.value !== ""){
customColor = tinycolor.toRgbString()
$('<style id='+selfId+'-bg>div[id*="'+selfId+'"] [class*="self"], #chatRoot [class*="list"] [class*="root"]:has([id*="'+selfId+'"]), div[id*="'+selfId+'"] [class*="self"]::after{ background-color:'+customColor+'!important}</style>').appendTo('head')
$('style[id*="pseudo-bg"]').remove()
saveId(selfId, 'bg', customColor)
}else{
removeId(selfId, 'bg')
}
}
});
$(".bgpickerThem").on('move.spectrum change.spectrum', function(e, tinycolor){
if(e.currentTarget.parentElement.offsetParent.offsetParent.id == 'settings_panel'){
userId = $('input[id^="chatInput"]')[0].value
}else{
userId = e.currentTarget.parentElement.offsetParent.children[0].href.split('=')[1]
}
var userCheck = userId in settings.userIds ? String(settings.userIds[userId].bg) : ""
$('style[id*="'+userId+'-bg"]').remove()
if($('style[id*="pseudo-bg"]').length == 0){
$('<style id="pseudo-bg">#chatRoot [class*="list"] [class*="root"]:has([id*="'+userId+'"]), div[id*="'+userId+'"] *:has(> [class*="box___"]:not([class*="root___"][class*="self"] [class*="box___"])):not(:has(a[id*="'+selfId+'"])), div[id*="'+userId+'"] *:has(> [class*="box___"]:not([class*="root___"][class*="self"] [class*="box___"])):not(:has(a[id*="'+selfId+'"]))::before{ background-color:'+userCheck+'!important}</style>').appendTo('head')
}
if(e.type == 'move'){
if(e.target.value !== "" && userId !== ""){
customColor = tinycolor.toRgbString()
$('style[id*="pseudo-bg"]')[0].sheet.rules[0].style.setProperty('background-color', customColor, 'important');
}else{
$('style[id*="pseudo-bg"]')[0].sheet.rules[0].style.setProperty('background-color', "");
}
}
if(e.type == 'change'){
if(e.target.value !== "" && userId !== ""){
customColor = tinycolor.toRgbString()
$('<style id='+userId+'-bg>#chatRoot [class*="list"] [class*="root"]:has([id*="'+userId+'"]), div[id*="'+userId+'"] *:has(> [class*="box___"]:not([class*="root___"][class*="self"] [class*="box___"])):not(:has(a[id*="'+selfId+'"])), div[id*="'+userId+'"] *:has(> [class*="box___"]:not([class*="root___"][class*="self"] [class*="box___"])):not(:has(a[id*="'+selfId+'"]))::before{ background-color:'+customColor+'!important}</style>').appendTo('head')
$('style[id*="pseudo-bg"]').remove()
saveId(userId, 'bg', customColor)
}else{
removeId(userId, 'bg')
}
}
});
$(".fcpickerYou").on('move.spectrum change.spectrum', function(e, tinycolor){
$('style[id*="'+selfId+'-fc"]').remove()
var userCheck = selfId in settings.userIds ? String(settings.userIds[selfId].bg) : ""
if($('style[id*="pseudo-fc"]').length == 0){
$('<style id="pseudo-fc">div[id*="'+selfId+'"] [class*="self"] [class*="message_"], #chatRoot [class*="list"] [class*="root"]:has([id*="'+selfId+'"]) [class*="message"], a[id*="'+selfId+'"]{ color:'+userCheck+'!important}</style>').appendTo('head')
}
if(e.type == 'move'){
if(e.target.value !== ""){
customColor = tinycolor.toRgbString()
$('style[id*="pseudo-fc"]')[0].sheet.rules[0].style.setProperty('color', customColor, 'important');
}else{
$('style[id*="pseudo-bg"]')[0].sheet.rules[0].style.setProperty('color', "");
}
}
if(e.type == 'change'){
if(e.target.value !== ""){
customColor = tinycolor.toRgbString()
$('<style id='+selfId+'-bg>div[id*="'+selfId+'"] [class*="self"] [class*="message_"], #chatRoot [class*="list"] [class*="root"]:has([id*="'+selfId+'"]) [class*="message"], a[id*="'+selfId+'"]{ color:'+customColor+'!important}</style>').appendTo('head')
$('style[id*="pseudo-fc"]').remove()
saveId(selfId, 'fc', customColor)
}else{
removeId(selfId, 'fc')
}
}
});
$(".fcpickerThem").on('move.spectrum change.spectrum', function(e, tinycolor){
if(e.currentTarget.parentElement.offsetParent.offsetParent.id == 'settings_panel'){
userId = $('input[id^="chatInput"]')[0].value
}else{
userId = e.currentTarget.parentElement.offsetParent.children[0].href.split('=')[1]
}
var userCheck = userId in settings.userIds ? String(settings.userIds[userId].bg) : ""
$('style[id*="'+userId+'-fc"]').remove()
if($('style[id*="pseudo-fc"]').length == 0){
$('<style id="pseudo-fc">#chatRoot [class*="list"] [class*="root"]:has([id*="'+userId+'"]) [class*="message"], div[id*="'+userId+'"] [class*="message_"]:not([class*="self"] [class*="message_"], span:first-child:has(a[id*="'+selfId+'"]) + span[class*="message_"]) > span, a[id*="'+userId+'"]{ color:'+userCheck+'!important}</style>').appendTo('head')
}
if(e.type == 'move'){
if(e.target.value !== ""){
customColor = tinycolor.toRgbString()
$('style[id*="pseudo-fc"]')[0].sheet.rules[0].style.setProperty('color', customColor, 'important');
}else{
$('style[id*="pseudo-bg"]')[0].sheet.rules[0].style.setProperty('color', "");
}
}
if(e.type == 'change'){
if(e.target.value !== "" && userId !== ""){
customColor = tinycolor.toRgbString()
$('<style id='+userId+'-fc>#chatRoot [class*="list"] [class*="root"]:has([id*="'+userId+'"]) [class*="message"], div[id*="'+userId+'"] [class*="message_"]:not([class*="self"] [class*="message_"], span:first-child:has(a[id*="'+selfId+'"]) + span[class*="message_"]) > span{color:'+customColor+'!important} a[id*="'+userId+'"]{color:'+customColor+'!important}</style>').appendTo('head')
$('style[id*="pseudo-fc"]').remove()
saveId(userId, 'fc', customColor)
}else{
removeId(userId, 'fc')
}
}
});
$("#chatInput").on('input', function(e){
if(parseInt(e.target.value) in settings.userIds){
$("#settings_panel .bgpickerThem").spectrum("set", settings.userIds[e.target.value].bg)
$("#settings_panel .fcpickerThem").spectrum("set", settings.userIds[e.target.value].fc)
}
})
$(".fontCheckbox").on('change', function(e){
var uncheck = e.target.id === 'selfCheck' ? 'globalCheck' : 'selfCheck';
$('#' + uncheck).prop('checked', false);
$('#fontInput').val('')
})
$("#fontInput").on('input', function(e){
$('.fontCheckbox').prop('checked', false);
})
$("#myRange").on('input change mouseover mouseleave', function(e){
var t = false
if(e.type != "mouseleave"){
t = true
}else{
t = false
}
var n = ((e.target.value - 0.1) / (1.5 - 0.1) * 100).toFixed(2);
var o = "var(--chat-range-range-color)", c = "var(--chat-range-progress-color-".concat(t ? "hover" : "default", ")");
$('input[id*="myRange"]').each( function(){
if($(this)[0] == e.currentTarget){
$(this)[0].style.background = "linear-gradient(to right, ".concat(c, " ").concat(n, "%, ").concat(o, " ").concat(n, "%, ").concat(o, " 100%)")
}
else{
$(this)[0].style.background = "linear-gradient(to right, ".concat("var(--chat-range-progress-color-default)", " ").concat(n, "%, ").concat(o, " ").concat(n, "%, ").concat(o, " 100%)")
}
})
if(e.type == "input"){
$('span[class*="message___"]').css("font-size", e.target.value+"rem", "line-height", "18px !important");
$('a[class*="sender___"]').css("font-size", e.target.value+"rem", "line-height", "18px !important");
$('#chatRoot div[class*="list"] p[class*="message___"]').css("font-size", e.target.value+"rem", "line-height", "18px !important");
$("div[class*=scrollContainer]").parent().each(function(index){
(this).scrollTop = (this).scrollHeight - (this).clientHeight;
});
$('label[for*="myRange"]')[0].innerHTML = "Font Size ("+e.target.value+")"
$('input[id*="myRange"]').each( function(){
$(this)[0].value = e.target.value
$(this)[0].previousSibling.innerHTML = "Font Size ("+e.target.value+")"
})
}
if(e.type == "change"){
$('style[id*="fs"]')[0].sheet.rules[0].style.fontSize = e.target.value+"rem"
temp = {}
temp['fs'] = [e.target.value]
$.extend(true, settings, temp)
localStorage.chatSettings = JSON.stringify(settings);
}
});
$('label:contains("Bubbles") > input, label:contains("Bubbles")').on('click',function(e){
setTimeout(function() {
if($('label:contains("Bubbles")').children(0).prop('checked')){
settings.bubbles = true
localStorage.chatSettings = JSON.stringify(settings);
}else{
settings.bubbles = false
localStorage.chatSettings = JSON.stringify(settings);
}
$("div[class*=scrollContainer]").parent().each(function(index){
(this).scrollTop = (this).scrollHeight - (this).clientHeight;
});
}, 100);
})
$('button[class*="chat-box-options__button"]').on('click', function(e){
$('div[id*="chatOptions"]').hide()
});
$('button[class*="chat-box-options__confirmation-button___"]').on('click', function(e){
$('div[id*="chatOptions"]').show()
});
$('input[id*="custom"]').on('show.spectrum', function(e){
$('.sp-replacer').addClass('sp-disabled');
$('.sp-replacer').prop('disabled', true);
})
$('input[id*="custom"]').on('hide.spectrum', function(e){
$('.sp-replacer').removeClass('sp-disabled');
$('.sp-replacer').prop('disabled', false);;
})
}
waitForKeyElements('div[class^="optionsContainer"]', options)
waitForKeyElements('div[id*="settings_panel"]', options)