API tools faq
paste
Guest User

custom tinyllama

a guest
Nov 8th, 2019
214
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 298.58 KB | None | 0 0
raw download clone embed print report
  1. // ==UserScript==
  2. // @name TinyLlama : 2019 Theme
  3. // @namespace http://www.smokeyllama.com
  4. // @version 2019.38
  5. // @description Editing Overall Theme of Tinychat. Install and refresh.
  6. // @author SmokeyLlama
  7. // @match https://tinychat.com/*
  8. // @match https://tinychat.com/room/*
  9. // @exclude https://tinychat.com/room/*?1
  10. // @grant GM_setValue
  11. // @grant GM_getValue
  12. // @grant GM_listValues
  13. // @license MIT
  14.  
  15.  
  16. // ==/UserScript==
  17.  
  18. // Jojo's antispam
  19. // REPLACE word in quotes to message you want blocked on line 44
  20. // There are 3 slots available.
  21. // Hit File->Save then refresh tinychat page for changes to take effect
  22.  
  23. var antiSpamBlobURL = URL.createObjectURL( new Blob([ '(',
  24.  
  25. function(){
  26. onmessage = function(e){
  27. setTimeout(function(){postMessage('antispam')}, 250);
  28. }
  29. }
  30. .toString(),
  31.  
  32. ')()' ], { type: 'application/javascript' } ) );
  33.  
  34. var antiSpamWorker = new Worker( antiSpamBlobURL );
  35.  
  36. antiSpamWorker.onmessage = function(e){
  37. var webappOuter = document.querySelector("tinychat-webrtc-app");
  38. var webappElem = webappOuter.shadowRoot;
  39. var chatlogElem = webappElem.querySelector("tc-chatlog").shadowRoot;
  40. var chatMessages = chatlogElem.querySelector("#chat-wrapper").querySelector("#chat-position").querySelector("#chat").querySelector("#chat-content").children;
  41. for(let item of chatMessages){
  42. try{
  43. var chatMessage = item.querySelector(".content").querySelector("tc-message-html").shadowRoot.querySelector("#html");
  44. if(chatMessage.innerHTML.length > 350 || chatMessage.innerHTML.search("\n\n\n") !== -1 || chatMessage.innerHTML.search("loser low iq") !== -1){
  45. chatMessage.innerHTML = "--Ha! Got'em!--";
  46. }
  47. }
  48. catch(e)
  49. {}
  50. }
  51. setTimeout(function(){antiSpamWorker.postMessage('antispam')}, 250);
  52. };
  53.  
  54. antiSpamWorker.postMessage('');
  55.  
  56.  
  57. // Jojo's anti blur //
  58. var blobURL = URL.createObjectURL( new Blob([ '(',
  59.  
  60. function(){
  61. onmessage = function(e){
  62. setTimeout(function(){postMessage('fuckTc')}, 500);
  63. }
  64. }
  65. .toString(),
  66.  
  67. ')()' ], { type: 'application/javascript' } ) );
  68.  
  69. var worker = new Worker( blobURL );
  70.  
  71. worker.onmessage = function(e){
  72. var bodyElem = document.querySelector("body");
  73. var webappOuter = document.querySelector("tinychat-webrtc-app");
  74. var webappElem = webappOuter.shadowRoot;
  75. var videolistElem = webappElem.querySelector("tc-videolist").shadowRoot;
  76. var camQueryString = ".videos-items:last-child > .js-video";
  77. var camElems = videolistElem.querySelectorAll(camQueryString);
  78.  
  79. camElems.forEach(function(item, index){
  80. var bluredShit = item.querySelector("tc-video-item").shadowRoot.querySelector(".video").querySelector(".blured");
  81. if(bluredShit !== null){
  82. bluredShit.remove();
  83. }
  84. item.querySelector("tc-video-item").shadowRoot.querySelector(".video").querySelector("div").querySelector("video").style.filter="none"
  85. if(item.querySelector("tc-video-item").shadowRoot.querySelector(".video").querySelector("div").querySelector('style') === null){
  86. var css = '.overlay{z-index:1;}.overlay:hover > .icon-visibility {left: 14px!important; top: 12px!important;}.overlay:hover > .icon-resize {top: 12px!important;}.overlay:hover > .icon-report {right: 12px!important;top: 14px!important;}.overlay:hover > .icon-context {bottom: 7px!important; right: 16px!important;}.overlay:hover > .icon-context {right: 7px!important; right: 16px!important;}.overlay:hover > .icon-volume {left: 14px!important; bottom: 7px!important;}.overlay > .icon-context:focus + .video-context.on-white-scroll{opacity: 100!important;visibility: visible!important;}';
  87. var style = document.createElement('style');
  88. if (style.styleSheet) {
  89. style.styleSheet.cssText = css;
  90. } else {
  91. style.appendChild(document.createTextNode(css));
  92. }
  93. item.querySelector("tc-video-item").shadowRoot.querySelector(".video").querySelector("div").appendChild(style);
  94. }
  95. });
  96. setTimeout(function(){worker.postMessage('fuckTc')}, 500);
  97. };
  98.  
  99. worker.postMessage('');
  100.  
  101. //TinyLlama main function minus anti-blur//
  102.  
  103. if (/\/room/.test (location.pathname) ) {
  104.  
  105.  
  106. TESwsParser``;
  107. var initInterval = setInterval(function (){
  108. if (document.querySelector("tinychat-webrtc-app").shadowRoot) TESapp = runTES``;
  109. else tcl("Waiting for DOM...");
  110. }, 500);
  111.  
  112. function runTES() {
  113. clearInterval(initInterval);
  114. try {
  115. /* Begin main function */
  116.  
  117. var bodyElem = document.querySelector("body");
  118.  
  119. var webappOuter = document.querySelector("tinychat-webrtc-app");
  120. var webappElem = webappOuter.shadowRoot;
  121.  
  122. var chatlogOuter = webappElem.querySelector("#room-content");
  123. var chatlogElem = webappElem.querySelector("tc-chatlog").shadowRoot;
  124. var titleElem = webappElem.querySelector("tc-title").shadowRoot;
  125. var sidemenuElem = webappElem.querySelector("tc-sidemenu").shadowRoot;
  126. var videomoderationElem = sidemenuElem.querySelector("tc-video-moderation").shadowRoot;
  127. var videolistElem = webappElem.querySelector("tc-videolist").shadowRoot;
  128.  
  129.  
  130. var chatlistElem = sidemenuElem.querySelector("tc-chatlist").shadowRoot;
  131. var userlistElem = sidemenuElem.querySelector("tc-userlist").shadowRoot;
  132. var userContextmenuElem = userlistElem.querySelector("tc-user-contextmenu").shadowRoot;
  133.  
  134. var chatlogCSS = chatlogElem.querySelector("#chat-wrapper");
  135. var sidemenuCSS = sidemenuElem.querySelector("#sidemenu");
  136.  
  137. var videomoderationCSS = videomoderationElem.querySelector("#moderatorlist");
  138. var webappCSS = webappElem.querySelector("#room");
  139.  
  140. var chatlistCSS = chatlistElem.querySelector("#chatlist");
  141. var userlistCSS = userlistElem.querySelector("#userlist");
  142. var userContextmenuCSS = userContextmenuElem.querySelector("#main");
  143. var titleCSS = titleElem.querySelector("#room-header");
  144. var themeCSS = titleElem.querySelector("#tes-themes");
  145. var buttonCSS = videolistElem.querySelector("#videos-footer");
  146.  
  147. var videolistCSS = videolistElem.querySelector("#videolist");
  148. var bodyCSS = document.querySelector("body");
  149.  
  150. var userinfoCont = sidemenuElem.querySelector("#user-info > div");
  151. var scrollbox = chatlogElem.querySelector("#chat");
  152. var unreadbubble = chatlogElem.querySelector("#input-unread");
  153.  
  154. var resourceDirectory = document.querySelector('link[rel="manifest"]').getAttribute("href").split("manifest")[0]; // \/([\d\.\-])+\/
  155. var pinkPop = new Audio(resourceDirectory + 'sound/pop.mp3');
  156. var weedPop = new Audio('http://smokeyllama.com/bong.mp3');
  157. var audioPop = new Audio(resourceDirectory + 'sound/pop.mp3');
  158. var settingMentions = [];
  159. var giftsElemWidth = 127;
  160. var messageHeight;
  161. var chatboxHeight;
  162. var totalScrolledUp = 0;
  163. var freshInstall = (GM_listValues().length == 0);
  164. var isModerator = (!userlistElem.querySelector("#button-banlist").classList.contains("hidden"));
  165. var isPaidAccount = (sidemenuElem.querySelector("#sidemenu-wider"));
  166.  
  167. var browserFirefox = navigator.userAgent.includes("Firefox/");
  168. var urlAddress = new URL(window.location.href);
  169. var urlPars = urlAddress.searchParams;
  170.  
  171. var messageQueryString = "#chat-content .message";
  172. var camQueryString = ".videos-items:last-child > .js-video";
  173.  
  174. var userCount = 0;
  175. var messageCount = 0;
  176. var camMaxedCurrent = null;
  177. var camClosedCurrent = null;
  178. var autoScrollStatus = true;
  179. var roomName = webappOuter.getAttribute("roomname");
  180. var joinTime = getFormattedDateTime(new Date(), "time");
  181. var joinDate = getFormattedDateTime(new Date());
  182.  
  183. document.title = roomName + " - Tinychat";
  184. declareGlobalVars();
  185. var settingsWaitInterval = setInterval(waitForSettings,1000);
  186.  
  187. injectCSS();
  188. injectElements();
  189.  
  190. var scrollboxEvent = scrollbox.addEventListener("wheel", userHasScrolled);
  191. var unreadbubbleEvent = unreadbubble.addEventListener("click", function(){autoScrollStatus = true;} );
  192.  
  193. if (userinfoCont.hasAttribute("title")) {
  194. bodyCSS.classList.add("logged-in");
  195. sidemenuElem.querySelector("#sidemenu").classList.add("logged-in");
  196. }
  197. if (isModerator) {
  198. userlistElem.querySelector("#userlist").classList.add("tes-mod");
  199. chatlistElem.querySelector("#chatlist").classList.add("tes-mod");
  200. }
  201.  
  202. var settingsQuick = {
  203. "Autoscroll" : (GM_getValue("tes-Autoscroll") == "true" || GM_getValue("tes-Autoscroll") == undefined),
  204. "MentionsMonitor" : (GM_getValue("tes-MentionsMonitor") == "true" || GM_getValue("tes-MentionsMonitor") == undefined),
  205. "NotificationsOff" : (GM_getValue("tes-NotificationsOff") == "true"),
  206. "ChangeFont" : (GM_getValue("tes-ChangeFont") == "true" || GM_getValue("tes-ChangeFont") == undefined),
  207. "MaxedCamLeft" : (GM_getValue("tes-MaxedCamLeft") == "true" || GM_getValue("tes-MaxedCamLeft") == undefined),
  208.  
  209. "NightMode" : (GM_getValue("tes-NightMode") == "true"),
  210. "NightModeBlack" : (GM_getValue("tes-NightModeBlack") == "true" || GM_getValue("tes-NightModeBlack") == undefined),
  211.  
  212. "DefaultMode" : (GM_getValue("tes-NighModeBlack") == "true" || GM_getValue("tes-DarkMode") == "false"),
  213. "PinkMode" : (GM_getValue("tes-PinkMode") == "true" || GM_getValue("tes-DarkMode") == "false"),
  214. "BlueMode" : (GM_getValue("tes-BlueMode") == "true" || GM_getValue("tes-DarkMode") == "false"),
  215. "GreenMode" : (GM_getValue("tes-GreenMode") == "true" || GM_getValue("tes-DarkMode") == "false"),
  216. "PurpleMode" : (GM_getValue("tes-PurpleMode") == "true" || GM_getValue("tes-DarkMode") == "false"),
  217. "DarkPurpleMode" : (GM_getValue("tes-DarkPurpleMode") == "true" || GM_getValue("tes-DarkMode") == "false"),
  218. "OrangeMode" : (GM_getValue("tes-OrangeMode") == "true" || GM_getValue("tes-DarkMode") == "false"),
  219. "RedMode" : (GM_getValue("tes-RedMode") == "true" || GM_getValue("tes-DarkMode") == "false"),
  220. "WhiteMode" : (GM_getValue("tes-WhiteMode") == "true" || GM_getValue("tes-DarkMode") == "false"),
  221. "FeatureOneMode" : (GM_getValue("tes-FeatureOneMode") == "true" || GM_getValue("tes-DarkMode") == "false"),
  222. "FeatureTwoMode" : (GM_getValue("tes-FeatureTwoMode") == "true" || GM_getValue("tes-DarkMode") == "false"),
  223. "FeatureThreeMode" : (GM_getValue("tes-FeatureThreeMode") == "true" || GM_getValue("tes-DarkMode") == "false"),
  224.  
  225. "BorderlessCams" : (GM_getValue("tes-BorderlessCams") == "true" || GM_getValue("tes-BorderlessCams") == undefined),
  226. "miniyt" : (GM_getValue("tes-miniyt") == "true"),
  227. "ChatBelow" : (GM_getValue("tes-ChatBelow") == "true"),
  228. };
  229. if (settingsQuick["ChangeFont"]) bodyElem.classList.add("tes-changefont");
  230. if (settingsQuick["NightMode"]) nightmodeToggle(true);
  231. if (settingsQuick["MaxedCamLeft"]) videolistCSS.classList.add("tes-leftcam");
  232. if (settingsQuick["miniyt"]) miniytToggle(true);
  233.  
  234. if (settingsQuick["DefaultMode"]) defaultmodeToggle(true) && whitemodeToggle(false) && greenmodeToggle(false) && bluemodeToggle(false) && pinkmodeToggle(false) && purplemodeToggle(false) && orangemodeToggle(false) && redmodeToggle(false) && featureonemodeToggle(false) && featuretwomodeToggle(false) && darkpurplemodeToggle(false) && featurethreemodeToggle(false);
  235. if (settingsQuick["PinkMode"]) pinkmodeToggle(true) && whitemodeToggle(false) && greenmodeToggle(false) && bluemodeToggle(false) && purplemodeToggle(false) && defaultmodeToggle(false) && orangemodeToggle(false) && redmodeToggle(false) && featureonemodeToggle(false) && featuretwomodeToggle(false) && darkpurplemodeToggle(false) && featurethreemodeToggle(false);
  236. if (settingsQuick["BlueMode"]) bluemodeToggle(true) && whitemodeToggle(false) && greenmodeToggle(false) && pinkmodeToggle(false) && purplemodeToggle(false) && defaultmodeToggle(false) && orangemodeToggle(false) && redmodeToggle(false) && featureonemodeToggle(false) && featuretwomodeToggle(false) && darkpurplemodeToggle(false) && featurethreemodeToggle(false);
  237. if (settingsQuick["GreenMode"]) greenmodeToggle(true) && whitemodeToggle(false) && pinkmodeToggle(false) && bluemodeToggle(false) && purplemodeToggle(false) && defaultmodeToggle(false) && orangemodeToggle(false) && redmodeToggle(false) && featureonemodeToggle(false) && featuretwomodeToggle(false) && darkpurplemodeToggle(false) && featurethreemodeToggle(false);
  238. if (settingsQuick["PurpleMode"]) purplemodeToggle(true) && whitemodeToggle(false) && greenmodeToggle(false) && bluemodeToggle(false) && pinkmodeToggle(false) && defaultmodeToggle(false) && orangemodeToggle(false) && redmodeToggle(false) && featureonemodeToggle(false) && featuretwomodeToggle(false) && darkpurplemodeToggle(false) && featurethreemodeToggle(false);
  239. if (settingsQuick["DarkPurpleMode"]) darkpurplemodeToggle(true) && whitemodeToggle(false) && purplemodeToggle(false) && greenmodeToggle(false) && bluemodeToggle(false) && pinkmodeToggle(false) && defaultmodeToggle(false) && orangemodeToggle(false) && redmodeToggle(false) && featureonemodeToggle(false) && featuretwomodeToggle(false) && featurethreemodeToggle(false);
  240. if (settingsQuick["OrangeMode"]) orangemodeToggle(true) && whitemodeToggle(false) && purplemodeToggle(false) && greenmodeToggle(false) && bluemodeToggle(false) && pinkmodeToggle(false) && defaultmodeToggle(false) && redmodeToggle(false) && featureonemodeToggle(false) && featuretwomodeToggle(false) && darkpurplemodeToggle(false) && featurethreemodeToggle(false);
  241. if (settingsQuick["RedMode"]) redmodeToggle(true) && whitemodeToggle(false) && purplemodeToggle(false) && greenmodeToggle(false) && bluemodeToggle(false) && pinkmodeToggle(false) && defaultmodeToggle(false) && orangemodeToggle(false) && featureonemodeToggle(false) && featuretwomodeToggle(false) && darkpurplemodeToggle(false) && featurethreemodeToggle(false);
  242. if (settingsQuick["FeatureOneMode"]) featureonemodeToggle(true) && whitemodeToggle(false) && redmodeToggle(false) && purplemodeToggle(false) && greenmodeToggle(false) && bluemodeToggle(false) && pinkmodeToggle(false) && defaultmodeToggle(false) && orangemodeToggle(false) && featuretwomodeToggle(false) && darkpurplemodeToggle(false) && featurethreemodeToggle(false);
  243. if (settingsQuick["FeatureTwoMode"]) featuretwomodeToggle(true) && whitemodeToggle(false) && redmodeToggle(false) && purplemodeToggle(false) && greenmodeToggle(false) && bluemodeToggle(false) && pinkmodeToggle(false) && defaultmodeToggle(false) && orangemodeToggle(false) && featureonemodeToggle(false) && darkpurplemodeToggle(false) && featurethreemodeToggle(false);
  244. if (settingsQuick["FeatureThreeMode"]) featurethreemodeToggle(true) && featuretwomodeToggle(false) && whitemodeToggle(false) && redmodeToggle(false) && purplemodeToggle(false) && greenmodeToggle(false) && bluemodeToggle(false) && pinkmodeToggle(false) && defaultmodeToggle(false) && orangemodeToggle(false) && featureonemodeToggle(false) && darkpurplemodeToggle(false);
  245. if (settingsQuick["WhiteMode"]) whitemodeToggle(true) && featuretwomodeToggle(false) && redmodeToggle(false) && purplemodeToggle(false) && greenmodeToggle(false) && bluemodeToggle(false) && pinkmodeToggle(false) && defaultmodeToggle(false) && orangemodeToggle(false) && featureonemodeToggle(false) && darkpurplemodeToggle(false) && featurethreemodeToggle(false);
  246.  
  247. if (settingsQuick["ChatBelow"]) chatBelowToggle(true);
  248. if (settingsQuick["BorderlessCams"]) borderlessCamsToggle(true);
  249.  
  250. if (browserFirefox && 1 == 2) {
  251. titleElem.querySelector("#room-header-info").insertAdjacentHTML("afterend", `
  252. <div id="tes-firefoxwarning" class="style-scope tinychat-title"
  253. style="font-size: .75em; background: white; color: grey; width: 200px; padding: 5px; line-height: 13px;vertical-align: middle;border: #ddd 1px solid;border-width: 0px 1px 0px 1px;">
  254. <div class="style-scope tinychat-title" style="display: table;height: 100%;">
  255. <span style="display: table-cell; vertical-align: middle;top: 16%;" class="style-scope tinychat-title">
  256. Tinychat Theme requires Chrome or Opera.
  257. </span>
  258. </div>
  259. </div>
  260. `);
  261. }
  262.  
  263. function waitForSettings() {
  264. try{
  265. settingsVisible = false;
  266. if (titleElem.querySelector("#room-header-gifts") != null) {
  267. clearInterval(settingsWaitInterval);
  268. newCamAdded();
  269. newUserAdded();
  270. newMessageAdded();
  271. setTimeout(messageParserCheckCSS, 3000);
  272.  
  273. giftsElemWidth = titleElem.querySelector("#room-header-gifts").offsetWidth;
  274. if (titleElem.querySelector("#room-header-gifts-items") == null) {
  275. giftsElemWidth1000 = giftsElemWidth + 45;
  276. }
  277. else { giftsElemWidth1000 = giftsElemWidth; }
  278. if (titleCSS.querySelector("#titleCSS")) {
  279. titleCSS.querySelector("#titleCSS").innerHTML += `
  280. #tes-settings {
  281. right: ` + giftsElemWidth + `px;
  282. }
  283. `;
  284. }
  285.  
  286. var sidemenuFakeBorder = document.createElement("span");
  287. sidemenuFakeBorder.setAttribute("id", "tes-sidemenufakeborder");
  288. sidemenuCSS.insertAdjacentElement("beforeend", sidemenuFakeBorder);
  289.  
  290. settingsElem = titleElem.querySelector("#room-header-gifts").insertAdjacentHTML("beforebegin", `
  291.  
  292. <!--- START OF THEMES --->
  293. <div id="tes-themes">
  294. <div id="tes-themesBox" class="hidden">
  295. <div id="tes-colors">
  296.  
  297. <div id="tes-settings-pinkmode">
  298. <label class="tes-color-container">
  299. <input type="checkbox">
  300. <span class="checkmark" title="PINK"></span>
  301. <div class="foo2 pink">
  302. </div></label></div>
  303.  
  304. <div id="tes-settings-greenmode">
  305. <label class="tes-color-container">
  306. <input type="checkbox">
  307. <span class="checkmark" title="GREEN"></span>
  308. <div class="foo2 green">
  309. </div></label></div>
  310.  
  311. <div id="tes-settings-bluemode">
  312. <label class="tes-color-container">
  313. <input type="checkbox">
  314. <span class="checkmark" title="BLUE"></span>
  315. <div class="foo2 blue">
  316. </div></label></div>
  317.  
  318. <div id="tes-settings-purplemode">
  319. <label class="tes-color-container">
  320. <input type="checkbox">
  321. <span class="checkmark" title="PURPLE"></span>
  322. <div class="foo2 purple">
  323. </div></label></div>
  324.  
  325. <div id="tes-settings-orangemode">
  326. <label class="tes-color-container">
  327. <input type="checkbox">
  328. <span class="checkmark" title="ORANGE"></span>
  329. <div class="foo2 orange">
  330. </div></label></div>
  331.  
  332. <div id="tes-settings-redmode">
  333. <label class="tes-color-container">
  334. <input type="checkbox">
  335. <span class="checkmark" title="RED"></span>
  336. <div class="foo2 red">
  337. </div></label></div>
  338.  
  339. <div id="tes-settings-darkpurplemode">
  340. <label class="tes-color-container">
  341. <input type="checkbox">
  342. <span class="checkmark" title="DARK PURPLE"></span>
  343. <div class="foo2 darkpurple">
  344. </div></label></div>
  345.  
  346. <div id="tes-settings-defaultmode">
  347. <label class="tes-color-container">
  348. <input type="checkbox">
  349. <span class="checkmark" title="DEFAULT"></span>
  350. <div class="foo2 default">
  351. </div></label></div>
  352.  
  353. <div id="tes-settings-whitemode">
  354. <label class="tes-color-container">
  355. <input type="checkbox">
  356. <span class="checkmark" title="WHITE"></span>
  357. <div class="foo2 white">
  358. </div></label></div>
  359.  
  360. <div id="tes-settings-featureonemode">
  361. <label class="tes-color-container">
  362. <input type="checkbox">
  363. <span class="checkmark feature1" title="Weed"></span>
  364. <div class="foo2 featureone">
  365. </div></label></div>
  366.  
  367. <div id="tes-settings-featuretwomode">
  368. <label class="tes-color-container">
  369. <input type="checkbox">
  370. <span class="checkmark feature2" title="Smash Bros"></span>
  371. <div class="foo2 featuretwo">
  372. </div></label></div>
  373.  
  374. <div id="tes-settings-featurethreemode">
  375. <label class="tes-color-container">
  376. <input type="checkbox">
  377. <span class="checkmark feature3" title="Splatoon"></span>
  378. <div class="foo2 featurethree">
  379. </div></label></div>
  380.  
  381.  
  382. <div id="featured" class="featured" style="display:none;">
  383.  
  384. <div id="tes-settings-featuredmode">
  385. FEATURED</div>
  386.  
  387. </div>
  388.  
  389. </div>
  390.  
  391. </div>
  392. <div id="tes-themesGear" title="Themes">
  393. <style>
  394.  
  395.  
  396. #tes-themesGear > div > span:after { content: "";
  397. position: relative;
  398. display: none;
  399. /* display: inline-block; */
  400. height: 7px;
  401. width: 7px;
  402. top: -1px;
  403. left: 0;
  404. margin-left: 4px;
  405. border-width: 2px 2px 0 0;
  406. border-style: solid;
  407. border-color: #fff;
  408. box-sizing: border-box;
  409. transform: rotate(45deg);
  410. -webkit-transform: rotate(45deg);
  411. transition: .2s;}
  412. #tes-themesGear > div > span:hover::after {margin-left:8px;}
  413. #tes-themesButton.tes-themes-open > span::after { border-width: 0 0 2px 2px;margin-left: 8px;}
  414.  
  415.  
  416. /* -------------------------------- PINKKK BUTTONS -------------------------------- */
  417. .tes-pinkmode #tes-themesButton {
  418. background-color: var(--pinkmode-bgcolor);
  419. border-color: var(--pinkmode-bordercolor);}
  420.  
  421. .tes-pinkmode #tes-gamesButton {
  422. background-color: var(--pinkmode-bgcolor);
  423. border-color: var(--pinkmode-bordercolor);}
  424.  
  425. .tes-pinkmode #tes-themesGear > div {color:#fff;}
  426. .tes-pinkmode #tes-gamesGear > div {color:#fff;}
  427.  
  428. /* -------------------------------- GREENNN BUTTONS -------------------------------- */
  429. .tes-greenmode #tes-themesButton {
  430. background-color: var(--greenmode-bgcolor);
  431. border-color: var(--greenmode-bordercolor);}
  432.  
  433. .tes-greenmode #tes-gamesButton {
  434. background-color: var(--greenmode-bgcolor);
  435. border-color: var(--greenmode-bordercolor);}
  436.  
  437. /* -------------------------------- BLUEEE BUTTONS -------------------------------- */
  438. .tes-bluemode #tes-themesButton {
  439. background-color: var(--bluemode-bgcolor);
  440. border-color: var(--bluemode-bordercolor);}
  441.  
  442. .tes-bluemode #tes-gamesButton {
  443. background-color: var(--bluemode-bgcolor);
  444. border-color: var(--bluemode-bordercolor);}
  445.  
  446. /* -------------------------------- PURPLEEE BUTTONS -------------------------------- */
  447. .tes-purplemode #tes-themesButton {
  448. background-color: var(--purplemode-bgcolor);
  449. border-color: var(--purplemode-bordercolor);}
  450.  
  451. .tes-purplemode #tes-gamesButton {
  452. background-color: var(--purplemode-bgcolor);
  453. border-color: var(--purplemode-bordercolor);}
  454.  
  455. /* -------------------------------- ORANGEEE BUTTONS -------------------------------- */
  456. .tes-orangemode #tes-themesButton {
  457. background-color: var(--orangemode-bgcolor);
  458. border-color: var(--orangemode-bordercolor);}
  459.  
  460. .tes-orangemode #tes-gamesButton {
  461. background-color: var(--orangemode-bgcolor);
  462. border-color: var(--orangemode-bordercolor);}
  463.  
  464. /* -------------------------------- REDDD BUTTONS -------------------------------- */
  465. .tes-redmode #tes-themesButton {
  466. background-color: var(--redmode-bgcolor);
  467. border-color: var(--redmode-bordercolor);}
  468.  
  469. .tes-redmode #tes-gamesButton {
  470. background-color: var(--redmode-bgcolor);
  471. border-color: var(--redmode-bordercolor);}
  472.  
  473. /* -------------------------------- DARKPURPLEEE BUTTONS -------------------------------- */
  474. .tes-darkpurplemode #tes-themesButton {
  475. background-color: var(--darkpurplemode-bgcolor);
  476. border-color: var(--darkpurplemode-bordercolor);}
  477.  
  478. .tes-darkpurplemode #tes-gamesButton {
  479. background-color: var(--darkpurplemode-bgcolor);
  480. border-color: var(--darkpurplemode-bordercolor);}
  481.  
  482. /* -------------------------------- WHITEEE BUTTONS -------------------------------- */
  483. .tes-whitemode #tes-themesButton {
  484. background-color: var(--whitemode-tcblue);
  485. border-color: var(--whitemode-bordercolor);}
  486.  
  487. .tes-whitemode #tes-gamesButton {
  488. background-color: var(--whitemode-bgcolor);
  489. border-color: var(--whitemode-bordercolor);}
  490.  
  491.  
  492. /* -------------------------------- FEATUREONEEE BUTTONS -------------------------------- */
  493. .tes-featureonemode #tes-themesButton {
  494. background-color: var(--featureonemode-bgcolor);
  495. border-color: var(--featureonemode-bordercolor);}
  496.  
  497. .tes-featureonemode #tes-gamesButton {
  498. background-color: var(--featureonemode-bgcolor);
  499. border-color: var(--featureonemode-bordercolor);}
  500.  
  501. /* -------------------------------- FEATURETWOOO BUTTONS -------------------------------- */
  502. .tes-featuretwomode #tes-themesButton {
  503. background-color: var(--featuretwomode-bgcolor);
  504. border-color: var(--featuretwomode-bordercolor);}
  505.  
  506. .tes-featuretwomode #tes-gamesButton {
  507. background-color: var(--featuretwomode-bgcolor);
  508. border-color: var(--featuretwomode-bordercolor);}
  509.  
  510. /* -------------------------------- FEATURETHREEE BUTTONS -------------------------------- */
  511. .tes-featurethreemode #tes-themesButton {
  512. background-color: transparent;
  513. border:0px;}
  514.  
  515. .tes-featurethreemode #tes-gamesButton {
  516. background-color: #51bc02;
  517. border-color:#111;border-top:0px !important;}
  518.  
  519. </style>
  520. <div class="tes-themesButton" id="tes-themesButton">
  521. <span><img src="https://raw.githubusercontent.com/snwh/paper-icon-theme/master/Paper/512x512/apps/preferences-color.png" width="20px" style="margin-top:3px;"></span>
  522. </div>
  523. </div>
  524. </div>
  525. </div>
  526. <!--- END OF THEMES --->
  527.  
  528. <!--- START OF HIDING --->
  529. <style>
  530. #tes-hidinglist > a {
  531. background-color: #002f3e;
  532. border: 1px solid #c1c1c17d;
  533. border-bottom-right-radius: 5px;
  534. color: #fff;
  535. text-decoration: none;
  536. padding: 5px;
  537. position: absolute;
  538. left: -2px;
  539. box-shadow: -1px 1px 5px 0px #000;}
  540. </style>
  541.  
  542. <div id="tes-hiding" style="display:none;">
  543. <div id="tes-hidingBox" class="hidden">
  544. <div id="tes-hidinglist">
  545. <a href="https://smokeyllama.glitch.me/game_list.html" target="gamelist">&#171; RETURN TO GAME LIST</a>
  546. <!-- Copy and Paste Me -->
  547. <iframe allow="geolocation; microphone; camera; midi; vr; encrypted-media" src="https://smokeyllama.glitch.me/game_list.html" name="gamelist" style="border:0px;padding:0px;margin:0px;padding-top:10px;"/></iframe>
  548.  
  549.  
  550. </div>
  551. </div>
  552. <div id="tes-hidingGear" title="Games">
  553. <div class="tes-hidingButton" id="tes-hidingButton">
  554. <span style="margin-left:10px;">&nbsp;</span>
  555. </div>
  556.  
  557. </div>
  558. </div>
  559. <!--- END OF HIDING --->
  560.  
  561.  
  562. <!--- START OF GAMES --->
  563. <style>
  564. #tes-gameslist > a {
  565. background-color: #002f3e;
  566. border: 1px solid #c1c1c17d;
  567. border-bottom-right-radius: 5px;
  568. color: #fff;
  569. text-decoration: none;
  570. padding: 5px;
  571. position: absolute;
  572. left: -2px;
  573. box-shadow: -1px 1px 5px 0px #000;}
  574. </style>
  575.  
  576. <div id="tes-emojis" style="">
  577. <div id="tes-emojisBox" class="hidden">
  578. <div id="tes-emojislist" style="
  579. position: absolute;
  580. bottom: 30px;
  581. right: 7px;
  582. height: 220px;
  583. background-color: #191919;
  584. z-index: 100;
  585. border-radius: 10px;
  586. border: 1px solid #313131;">
  587. <iframe allow="geolocation; microphone; camera; midi; vr; encrypted-media" src="https://smokeyllama.glitch.me/emoji_list.html" name="gamelist" style="border: 0px; padding: 0px; margin: 0px; height: 100%; border-radius: 10px;"/></iframe>
  588.  
  589. </div>
  590. </div>
  591. <div id="tes-emojisGear" title="Emojis">
  592. <div class="tes-emojisButton" id="tes-emojisButton">
  593. <span style="margin-left:10px;">&nbsp;</span>
  594. </div>
  595.  
  596. </div>
  597. </div>
  598.  
  599.  
  600. <div id="tes-games" style="">
  601. <div id="tes-gamesBox" class="hidden">
  602. <div id="tes-gameslist">
  603. <a href="https://smokeyllama.glitch.me/game_list.html" target="gamelist">&#171; RETURN TO GAME LIST</a>
  604. <!-- Copy and Paste Me -->
  605. <iframe allow="geolocation; microphone; camera; midi; vr; encrypted-media" src="https://smokeyllama.glitch.me/game_list.html" name="gamelist" style="border:0px;padding:0px;margin:0px;padding-top:10px;"/></iframe>
  606.  
  607. </div>
  608. </div>
  609. <div id="tes-gamesGear" title="Games">
  610. <div class="tes-gamesButton" id="tes-gamesButton">
  611. <span style="margin-left:10px;">&nbsp;</span>
  612. </div>
  613.  
  614. </div>
  615. </div>
  616. <!--- END OF GAMES --->
  617.  
  618. <div id="tes-settings">
  619.  
  620. <div id="tes-settingsBox" class="hidden">
  621. <p id="title">Settings - - - - <a href="http://www.smokeyllama.tk">SmokeyLlama.tk</a></p>
  622.  
  623. <div id="tes-settings-mentions" class="tes-setting-container">
  624. <input type="checkbox">
  625. <span class="label">
  626. Alert phrases
  627. <span class="info" data-title='A comma-separated list of phrases to alert/highlight for. Example of 3 phrases: "hello,Google Chrome,sky"'>?</span>
  628. </span>
  629. <div class="inputcontainer">
  630. <input class="text"><button class="save blue-button">save</button>
  631. </div></div>
  632.  
  633. <div id="tes-settings-autoscroll" class="tes-setting-container">
  634. <input type="checkbox">
  635. <span class="label">
  636. Autoscroll
  637. </span></div>
  638.  
  639. <div id="tes-settings-notifications" class="tes-setting-container">
  640. <input type="checkbox">
  641. <span class="label">
  642. Hide notifications
  643. </span></div>
  644.  
  645. <div id="tes-settings-changefont" class="tes-setting-container">
  646. <input type="checkbox">
  647. <span class="label">
  648. Improve font
  649. <span class="info" data-title='The default font is too thin in some browsers'>?</span>
  650. </span></div>
  651.  
  652. <div id="tes-settings-chatbelow" class="tes-setting-container">
  653. <input type="checkbox">
  654. <span class="label">
  655. Chat on Bottom
  656. <span class="info" data-title='!! BETA !! ------ If cams dont resize, hit the arrow on the side of the chatlog to force resize.'>*</span>
  657. </span></div>
  658.  
  659.  
  660.  
  661.  
  662.  
  663. <!-- RIGHT SIDE -->
  664.  
  665. <!--
  666. <div id="tes-settings-messageanim" class="tes-setting-container">
  667. <input type="checkbox">
  668. <span class="label">
  669. Disable message animation
  670. </span>
  671. </div>
  672. -->
  673.  
  674. <div id="tes-settings-borderlesscams" class="tes-setting-container right" style="position:absolute;right:100px;">
  675. <input type="checkbox">
  676. <span class="label">Remove cam spacing
  677. </span>
  678. </div>
  679.  
  680.  
  681. </div>
  682.  
  683.  
  684. <div id="tes-updateNotifier"><a class="tes-exitButtonSmall">✕</a><span style="padding:8px;border-color:cyan;right: -39px;">Updated Overall Theme Code!</span></div>
  685. <div id="tes-settingsGear" title="Settings"><span style=""><img src="https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__Llama.png" width="20px"></span></div>
  686. </div>
  687. </div>
  688. </div>
  689. </div>
  690.  
  691.  
  692. <!--- START OF TEST --->
  693. <div id="tes-settings-miniyt" class="tes-setting-container right" style="position:absolute;right:100px;">
  694. <label class="tes-miniyt-container">
  695. <input type="checkbox"">
  696. <span class="checkmark" title="Toggle Mini Youtube"></span>
  697. <span class="label">
  698. <img src="https://i.ibb.co/x5wQDvb/MiniYT.png">
  699. <span class="info" data-title='Mini Youtube : After Toggle, Press the arrow button on the side of the chatbox to fix cams!'>?
  700. </span>
  701. </span>
  702. </label>
  703. </div>
  704.  
  705. <style>
  706. /*-TEST----*/
  707. #tes-settings-miniyt > label:hover {background: transparent;}
  708. .checkmark .feature1:hover {background-color:#00ff00;}
  709.  
  710. .tes-pinkmode #tes-settings-miniyt {background-color: var(--pinkmode-bordercolor);}
  711. .tes-greenmode #tes-settings-miniyt {background-color: var(--greenmode-bordercolor);}
  712. .tes-bluemode #tes-settings-miniyt {background-color: var(--bluemode-bordercolor);}
  713. .tes-purplemode #tes-settings-miniyt {background-color: var(--purplemode-bgcolor);}
  714. .tes-orangemode #tes-settings-miniyt {background-color: var(--orangemode-bordercolor);}
  715. .tes-redmode #tes-settings-miniyt {background-color: var(--redmode-bordercolor);}
  716. .tes-darkpurplemode #tes-settings-miniyt {background-color: var(--darkpurplemode-bordercolor);}
  717. .tes-whitemode #tes-settings-miniyt {background-color: var(--whitemode-bordercolor);}
  718. .tes-featureonemode #tes-settings-miniyt {background-color: var(--featureonemode-bordercolor);}
  719. .tes-featuretwomode #tes-settings-miniyt {background-color: var(--featuretwomode-bordercolor);}
  720. .tes-featurethreemode #tes-settings-miniyt {background-color: var(--featurethreemode-bordercolor);}
  721.  
  722. /* On mouse-over, add a grey background color */
  723. .tes-miniyt-container:hover input ~ .checkmark {
  724. background-color: transparent;
  725. border-right:1px solid #fff;
  726. border-bottom:1px solid #fff;
  727. border-bottom-right-radius: 10px;
  728. border-left:0px;
  729. width:25px;height:25px;
  730. }
  731.  
  732. /* When the checkbox is checked, add a blue background */
  733. .tes-miniyt-container input:checked ~ .checkmark {
  734. background-color: transparent;
  735. border: 0px solid #FFFFFF;
  736. border-top-right-radius: 100px;
  737. border-bottom-right-radius: 100px;
  738. border-left: 0px;
  739. width:25px;}
  740.  
  741. /* Create the checkmark/indicator (hidden when not checked) */
  742. .checkmark:after {
  743. content: "";
  744. position: absolute;
  745. display: none;}
  746.  
  747. /* Show the checkmark when checked */
  748. .tes-miniyt-container input:checked ~ .checkmark:after {
  749. display: block;}
  750.  
  751. /* Style the checkmark/indicator */
  752. #tes-settings-miniyt > label > span.checkmark:after {
  753. left: 8px;
  754. top: 1px;
  755. width: 3px;
  756. height: 8px;
  757. border: solid #ffffff;
  758. border-width: 0 3px 3px 0;
  759. -webkit-transform: rotate(45deg);
  760. -ms-transform: rotate(45deg);
  761. transform: rotate(45deg);}
  762.  
  763. /*-TEST---------*/
  764.  
  765. #tes-settings-miniyt > label > input[type=checkbox] {
  766. position: absolute;
  767. opacity: 0;
  768. cursor: pointer;}
  769.  
  770. .checkmark2 {
  771. position: absolute;
  772. top: 0;
  773. left: 0;
  774. height: 14px;
  775. width: 15px;
  776. background-color: transparent;
  777. border-radius: 3px;
  778. }
  779.  
  780. #tes-settings-miniyt .info{
  781. position: absolute;
  782. top: 0px;
  783. left: 0px;
  784. color: transparent;
  785. font-weight: bold;
  786. font-family: Arial;
  787. border: transparent 1px solid;
  788. border-radius: 16px;
  789. height: 1.5em;
  790. width: 1.5em;
  791. text-align: center;
  792. display: inline-block;}
  793.  
  794. #tes-settings-miniyt .info:hover:after{
  795. font-weight: normal;
  796. padding: 4px 7px 4px 7px;
  797. border-radius: 7px;
  798. color: white;
  799. background: #0085ad;
  800. content: attr(data-title);
  801. display: inline-block;
  802. position: absolute;
  803. top: 25px;
  804. left: 0;
  805. width:200px;
  806. z-index: 9;}
  807. </style>
  808. </div>
  809.  
  810. <!--- END OF TEST --->
  811. `);
  812.  
  813. titleElem.getElementById("tes-settingsGear").addEventListener("click", toggleSettingsDisplay);
  814. titleElem.getElementById("tes-themesGear").addEventListener("click", toggleThemesDisplay);
  815. titleElem.getElementById("tes-gamesGear").addEventListener("click", toggleGamesDisplay);
  816. titleElem.getElementById("tes-emojisGear").addEventListener("click", toggleEmojisDisplay);
  817. titleElem.getElementById("tes-hidingGear").addEventListener("click", toggleHidingDisplay);
  818. titleElem.getElementById("tes-updateNotifier").addEventListener("click", function(){toggleSettingsDisplay("updateNotifier");} );
  819. if (!freshInstall && GM_getValue("tes-updateNotifSeen") != "2018.155") titleElem.getElementById("tes-updateNotifier").classList.add("visible");
  820. titleElem.querySelector("#tes-settings #tes-settings-mentions button.save").addEventListener("click", function(){mentionsManager("save");} );
  821. mentionsManager("load");
  822.  
  823. settingsCheckboxUpdate();
  824. titleElem.querySelector("#tes-settings-pinkmode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-pinkmode");});
  825. titleElem.querySelector("#tes-settings-greenmode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-greenmode");});
  826. titleElem.querySelector("#tes-settings-bluemode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-bluemode");});
  827. titleElem.querySelector("#tes-settings-purplemode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-purplemode");});
  828. titleElem.querySelector("#tes-settings-darkpurplemode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-darkpurplemode");});
  829. titleElem.querySelector("#tes-settings-whitemode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-whitemode");});
  830. titleElem.querySelector("#tes-settings-orangemode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-orangemode");});
  831. titleElem.querySelector("#tes-settings-redmode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-redmode");});
  832. titleElem.querySelector("#tes-settings-featureonemode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-featureonemode");});
  833. titleElem.querySelector("#tes-settings-featuretwomode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-featuretwomode");});
  834. titleElem.querySelector("#tes-settings-featurethreemode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-featurethreemode");});
  835. titleElem.querySelector("#tes-settings-defaultmode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-defaultmode");});
  836.  
  837. titleElem.querySelector("#tes-settings-borderlesscams input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-borderlesscams");});
  838. titleElem.querySelector("#tes-settings-miniyt input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-miniyt");});
  839.  
  840. titleElem.querySelector("#tes-settings-autoscroll input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-autoscroll");});
  841. titleElem.querySelector("#tes-settings-mentions input:first-of-type").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-mentions");});
  842. titleElem.querySelector("#tes-settings-notifications input:first-of-type").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-notifications");});
  843. titleElem.querySelector("#tes-settings-changefont input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-changefont");});
  844. titleElem.querySelector("#tes-settings-chatbelow input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-chatbelow");});
  845. titleElem.querySelector("#tes-settings-nightmode input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-nightmode");});
  846.  
  847.  
  848. titleElem.querySelector("#tes-settings-maxcamposition input").addEventListener("click", function(){settingsCheckboxUpdate("tes-settings-maxcamposition");});
  849.  
  850. notificationHider();
  851. }
  852. }catch(e){tcl("error waitForSettings: " + e.message);}
  853. }
  854.  
  855. function nightmodeToggle(arg) {
  856. try{
  857. var nightmodeClasses = ["tes-nightmode"];
  858.  
  859. if (settingsQuick["NightModeBlack"]) nightmodeClasses.push("blacknight");
  860.  
  861. if (arg == true) {
  862. bodyElem.classList.add(...nightmodeClasses);
  863. titleCSS.classList.add(...nightmodeClasses);
  864. sidemenuCSS.classList.add(...nightmodeClasses);
  865. userlistCSS.classList.add(...nightmodeClasses);
  866. webappCSS.classList.add(...nightmodeClasses);
  867. videolistCSS.classList.add(...nightmodeClasses);
  868. videomoderationCSS.classList.add(...nightmodeClasses);
  869. chatlistCSS.classList.add(...nightmodeClasses);
  870. chatlogCSS.classList.add(...nightmodeClasses);
  871. chatlogElem.querySelector("#chat-wider").classList.add(...nightmodeClasses);
  872. // Messages:
  873. if (chatlogElem.querySelector(messageQueryString) != null) {
  874. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  875. for (i=0; i < messageElems.length; i++) {
  876. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  877. var messageItemCSS = messageItem.querySelector(".message");
  878. messageItemCSS.classList.add(...nightmodeClasses);
  879. }
  880. }
  881. // Cams:
  882. if (videolistElem.querySelector(camQueryString) != null) {
  883. var camElems = videolistElem.querySelectorAll(camQueryString);
  884. for (i=0; i < camElems.length; i++) {
  885. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  886. var camItemCSS = camItem.querySelector(".video");
  887. camItemCSS.classList.add(...nightmodeClasses);
  888.  
  889. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  890. }
  891. }
  892. }
  893. if (arg == false) {
  894. if (!settingsQuick["NightModeBlack"] && settingsQuick["NightMode"]) nightmodeClasses = ["blacknight"];
  895.  
  896. bodyElem.classList.remove(...nightmodeClasses);
  897. titleCSS.classList.remove(...nightmodeClasses);
  898. sidemenuCSS.classList.remove(...nightmodeClasses);
  899. userlistCSS.classList.remove(...nightmodeClasses);
  900. webappCSS.classList.remove(...nightmodeClasses);
  901. videolistCSS.classList.remove(...nightmodeClasses);
  902. videomoderationCSS.classList.remove(...nightmodeClasses);
  903. chatlistCSS.classList.remove(...nightmodeClasses);
  904. chatlogCSS.classList.remove(...nightmodeClasses);
  905. chatlogElem.querySelector("#chat-wider").classList.remove(...nightmodeClasses);
  906. // Messages:
  907. if (chatlogElem.querySelector(messageQueryString) != null) {
  908. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  909. for (i=0; i < messageElems.length; i++) {
  910. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  911. var messageItemCSS = messageItem.querySelector(".message");
  912. messageItemCSS.classList.remove(...nightmodeClasses);
  913. }
  914. }
  915. // Cams:
  916. if (videolistElem.querySelector(camQueryString) != null) {
  917. var camElems = videolistElem.querySelectorAll(camQueryString);
  918. for (i=0; i < camElems.length; i++) {
  919. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  920. var camItemCSS = camItem.querySelector(".video");
  921. camItemCSS.classList.remove(...nightmodeClasses);
  922. }
  923. }
  924. }
  925. }catch(e){tcl("error nightmodeToggle: " + e.message);}
  926. }
  927.  
  928. function pinkmodeToggle(arg) {
  929. try{
  930. var pinkmodeClasses = ["tes-pinkmode"];
  931.  
  932. if (settingsQuick["PinkModeBlack"]) pinkmodeClasses.push("pinknight");
  933.  
  934. if (arg == true) {
  935. bodyElem.classList.add(...pinkmodeClasses);
  936. titleCSS.classList.add(...pinkmodeClasses);
  937. sidemenuCSS.classList.add(...pinkmodeClasses);
  938. userlistCSS.classList.add(...pinkmodeClasses);
  939. webappCSS.classList.add(...pinkmodeClasses);
  940. videolistCSS.classList.add(...pinkmodeClasses);
  941. videomoderationCSS.classList.add(...pinkmodeClasses);
  942. chatlistCSS.classList.add(...pinkmodeClasses);
  943. chatlogCSS.classList.add(...pinkmodeClasses);
  944. chatlogElem.querySelector("#chat-wider").classList.add(...pinkmodeClasses);
  945. // Messages:
  946. if (chatlogElem.querySelector(messageQueryString) != null) {
  947. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  948. for (i=0; i < messageElems.length; i++) {
  949. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  950. var messageItemCSS = messageItem.querySelector(".message");
  951. messageItemCSS.classList.add(...pinkmodeClasses);
  952. }
  953. }
  954. // Cams:
  955. if (videolistElem.querySelector(camQueryString) != null) {
  956. var camElems = videolistElem.querySelectorAll(camQueryString);
  957. for (i=0; i < camElems.length; i++) {
  958. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  959. var camItemCSS = camItem.querySelector(".video");
  960. camItemCSS.classList.add(...pinkmodeClasses);
  961.  
  962. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  963. }
  964. }
  965. }
  966. if (arg == false) {
  967. if (!settingsQuick["PinkModeBlack"] && settingsQuick["PinkMode"]) pinkmodeClasses = ["pinknight"];
  968.  
  969. bodyElem.classList.remove(...pinkmodeClasses);
  970. titleCSS.classList.remove(...pinkmodeClasses);
  971. sidemenuCSS.classList.remove(...pinkmodeClasses);
  972. userlistCSS.classList.remove(...pinkmodeClasses);
  973. webappCSS.classList.remove(...pinkmodeClasses);
  974. videolistCSS.classList.remove(...pinkmodeClasses);
  975. videomoderationCSS.classList.remove(...pinkmodeClasses);
  976. chatlistCSS.classList.remove(...pinkmodeClasses);
  977. chatlogCSS.classList.remove(...pinkmodeClasses);
  978. chatlogElem.querySelector("#chat-wider").classList.remove(...pinkmodeClasses);
  979. // Messages:
  980. if (chatlogElem.querySelector(messageQueryString) != null) {
  981. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  982. for (i=0; i < messageElems.length; i++) {
  983. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  984. var messageItemCSS = messageItem.querySelector(".message");
  985. messageItemCSS.classList.remove(...pinkmodeClasses);
  986. }
  987. }
  988. // Cams:
  989. if (videolistElem.querySelector(camQueryString) != null) {
  990. var camElems = videolistElem.querySelectorAll(camQueryString);
  991. for (i=0; i < camElems.length; i++) {
  992. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  993. var camItemCSS = camItem.querySelector(".video");
  994. camItemCSS.classList.remove(...pinkmodeClasses);
  995. }
  996. }
  997. }
  998. }catch(e){tcl("error pinkmodeToggle: " + e.message);}
  999. }
  1000.  
  1001. function whitemodeToggle(arg) {
  1002. try{
  1003. var whitemodeClasses = ["tes-whitemode"];
  1004.  
  1005. if (settingsQuick["WhiteModeBlack"]) whitemodeClasses.push("whitenight");
  1006.  
  1007. if (arg == true) {
  1008. bodyElem.classList.add(...whitemodeClasses);
  1009. titleCSS.classList.add(...whitemodeClasses);
  1010. sidemenuCSS.classList.add(...whitemodeClasses);
  1011. userlistCSS.classList.add(...whitemodeClasses);
  1012. webappCSS.classList.add(...whitemodeClasses);
  1013. videolistCSS.classList.add(...whitemodeClasses);
  1014. videomoderationCSS.classList.add(...whitemodeClasses);
  1015. chatlistCSS.classList.add(...whitemodeClasses);
  1016. chatlogCSS.classList.add(...whitemodeClasses);
  1017. chatlogElem.querySelector("#chat-wider").classList.add(...whitemodeClasses);
  1018. // Messages:
  1019. if (chatlogElem.querySelector(messageQueryString) != null) {
  1020. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1021. for (i=0; i < messageElems.length; i++) {
  1022. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1023. var messageItemCSS = messageItem.querySelector(".message");
  1024. messageItemCSS.classList.add(...whitemodeClasses);
  1025. }
  1026. }
  1027. // Cams:
  1028. if (videolistElem.querySelector(camQueryString) != null) {
  1029. var camElems = videolistElem.querySelectorAll(camQueryString);
  1030. for (i=0; i < camElems.length; i++) {
  1031. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1032. var camItemCSS = camItem.querySelector(".video");
  1033. camItemCSS.classList.add(...whitemodeClasses);
  1034.  
  1035. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  1036. }
  1037. }
  1038. }
  1039. if (arg == false) {
  1040. if (!settingsQuick["WhiteModeBlack"] && settingsQuick["WhiteMode"]) whitemodeClasses = ["whitenight"];
  1041.  
  1042. bodyElem.classList.remove(...whitemodeClasses);
  1043. titleCSS.classList.remove(...whitemodeClasses);
  1044. sidemenuCSS.classList.remove(...whitemodeClasses);
  1045. userlistCSS.classList.remove(...whitemodeClasses);
  1046. webappCSS.classList.remove(...whitemodeClasses);
  1047. videolistCSS.classList.remove(...whitemodeClasses);
  1048. videomoderationCSS.classList.remove(...whitemodeClasses);
  1049. chatlistCSS.classList.remove(...whitemodeClasses);
  1050. chatlogCSS.classList.remove(...whitemodeClasses);
  1051. chatlogElem.querySelector("#chat-wider").classList.remove(...whitemodeClasses);
  1052. // Messages:
  1053. if (chatlogElem.querySelector(messageQueryString) != null) {
  1054. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1055. for (i=0; i < messageElems.length; i++) {
  1056. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1057. var messageItemCSS = messageItem.querySelector(".message");
  1058. messageItemCSS.classList.remove(...whitemodeClasses);
  1059. }
  1060. }
  1061. // Cams:
  1062. if (videolistElem.querySelector(camQueryString) != null) {
  1063. var camElems = videolistElem.querySelectorAll(camQueryString);
  1064. for (i=0; i < camElems.length; i++) {
  1065. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1066. var camItemCSS = camItem.querySelector(".video");
  1067. camItemCSS.classList.remove(...whitemodeClasses);
  1068. }
  1069. }
  1070. }
  1071. }catch(e){tcl("error whitemodeToggle: " + e.message);}
  1072. }
  1073.  
  1074. function greenmodeToggle(arg) {
  1075. try{
  1076. var greenmodeClasses = ["tes-greenmode"];
  1077.  
  1078. if (settingsQuick["GreenModeBlack"]) greenmodeClasses.push("greennight");
  1079.  
  1080. if (arg == true) {
  1081. bodyElem.classList.add(...greenmodeClasses);
  1082. titleCSS.classList.add(...greenmodeClasses);
  1083. sidemenuCSS.classList.add(...greenmodeClasses);
  1084. userlistCSS.classList.add(...greenmodeClasses);
  1085. webappCSS.classList.add(...greenmodeClasses);
  1086. videolistCSS.classList.add(...greenmodeClasses);
  1087. videomoderationCSS.classList.add(...greenmodeClasses);
  1088. chatlistCSS.classList.add(...greenmodeClasses);
  1089. chatlogCSS.classList.add(...greenmodeClasses);
  1090. chatlogElem.querySelector("#chat-wider").classList.add(...greenmodeClasses);
  1091. // Messages:
  1092. if (chatlogElem.querySelector(messageQueryString) != null) {
  1093. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1094. for (i=0; i < messageElems.length; i++) {
  1095. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1096. var messageItemCSS = messageItem.querySelector(".message");
  1097. messageItemCSS.classList.add(...greenmodeClasses);
  1098. }
  1099. }
  1100. // Cams:
  1101. if (videolistElem.querySelector(camQueryString) != null) {
  1102. var camElems = videolistElem.querySelectorAll(camQueryString);
  1103. for (i=0; i < camElems.length; i++) {
  1104. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1105. var camItemCSS = camItem.querySelector(".video");
  1106. camItemCSS.classList.add(...greenmodeClasses);
  1107.  
  1108. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  1109. }
  1110. }
  1111. }
  1112. if (arg == false) {
  1113. if (!settingsQuick["GreenModeBlack"] && settingsQuick["GreenMode"]) nightmodeClasses = ["greennight"];
  1114.  
  1115. bodyElem.classList.remove(...greenmodeClasses);
  1116. titleCSS.classList.remove(...greenmodeClasses);
  1117. sidemenuCSS.classList.remove(...greenmodeClasses);
  1118. userlistCSS.classList.remove(...greenmodeClasses);
  1119. webappCSS.classList.remove(...greenmodeClasses);
  1120. videolistCSS.classList.remove(...greenmodeClasses);
  1121. videomoderationCSS.classList.remove(...greenmodeClasses);
  1122. chatlistCSS.classList.remove(...greenmodeClasses);
  1123. chatlogCSS.classList.remove(...greenmodeClasses);
  1124. chatlogElem.querySelector("#chat-wider").classList.remove(...greenmodeClasses);
  1125. // Messages:
  1126. if (chatlogElem.querySelector(messageQueryString) != null) {
  1127. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1128. for (i=0; i < messageElems.length; i++) {
  1129. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1130. var messageItemCSS = messageItem.querySelector(".message");
  1131. messageItemCSS.classList.remove(...greenmodeClasses);
  1132. }
  1133. }
  1134. // Cams:
  1135. if (videolistElem.querySelector(camQueryString) != null) {
  1136. var camElems = videolistElem.querySelectorAll(camQueryString);
  1137. for (i=0; i < camElems.length; i++) {
  1138. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1139. var camItemCSS = camItem.querySelector(".video");
  1140. camItemCSS.classList.remove(...greenmodeClasses);
  1141. }
  1142. }
  1143. }
  1144. }catch(e){tcl("error greenmodeToggle: " + e.message);}
  1145. }
  1146.  
  1147. function bluemodeToggle(arg) {
  1148. try{
  1149. var bluemodeClasses = ["tes-bluemode"];
  1150.  
  1151. if (settingsQuick["BlueModeBlack"]) bluemodeClasses.push("bluenight");
  1152.  
  1153. if (arg == true) {
  1154. bodyElem.classList.add(...bluemodeClasses);
  1155. titleCSS.classList.add(...bluemodeClasses);
  1156. sidemenuCSS.classList.add(...bluemodeClasses);
  1157. userlistCSS.classList.add(...bluemodeClasses);
  1158. webappCSS.classList.add(...bluemodeClasses);
  1159. videolistCSS.classList.add(...bluemodeClasses);
  1160. videomoderationCSS.classList.add(...bluemodeClasses);
  1161. chatlistCSS.classList.add(...bluemodeClasses);
  1162. chatlogCSS.classList.add(...bluemodeClasses);
  1163. chatlogElem.querySelector("#chat-wider").classList.add(...bluemodeClasses);
  1164. // Messages:
  1165. if (chatlogElem.querySelector(messageQueryString) != null) {
  1166. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1167. for (i=0; i < messageElems.length; i++) {
  1168. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1169. var messageItemCSS = messageItem.querySelector(".message");
  1170. messageItemCSS.classList.add(...bluemodeClasses);
  1171. }
  1172. }
  1173. // Cams:
  1174. if (videolistElem.querySelector(camQueryString) != null) {
  1175. var camElems = videolistElem.querySelectorAll(camQueryString);
  1176. for (i=0; i < camElems.length; i++) {
  1177. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1178. var camItemCSS = camItem.querySelector(".video");
  1179. camItemCSS.classList.add(...bluemodeClasses);
  1180.  
  1181. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  1182. }
  1183. }
  1184. }
  1185. if (arg == false) {
  1186. if (!settingsQuick["BlueModeBlack"] && settingsQuick["BlueMode"]) nightmodeClasses = ["bluenight"];
  1187.  
  1188. bodyElem.classList.remove(...bluemodeClasses);
  1189. titleCSS.classList.remove(...bluemodeClasses);
  1190. sidemenuCSS.classList.remove(...bluemodeClasses);
  1191. userlistCSS.classList.remove(...bluemodeClasses);
  1192. webappCSS.classList.remove(...bluemodeClasses);
  1193. videolistCSS.classList.remove(...bluemodeClasses);
  1194. videomoderationCSS.classList.remove(...bluemodeClasses);
  1195. chatlistCSS.classList.remove(...bluemodeClasses);
  1196. chatlogCSS.classList.remove(...bluemodeClasses);
  1197. chatlogElem.querySelector("#chat-wider").classList.remove(...bluemodeClasses);
  1198. // Messages:
  1199. if (chatlogElem.querySelector(messageQueryString) != null) {
  1200. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1201. for (i=0; i < messageElems.length; i++) {
  1202. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1203. var messageItemCSS = messageItem.querySelector(".message");
  1204. messageItemCSS.classList.remove(...bluemodeClasses);
  1205. }
  1206. }
  1207. // Cams:
  1208. if (videolistElem.querySelector(camQueryString) != null) {
  1209. var camElems = videolistElem.querySelectorAll(camQueryString);
  1210. for (i=0; i < camElems.length; i++) {
  1211. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1212. var camItemCSS = camItem.querySelector(".video");
  1213. camItemCSS.classList.remove(...bluemodeClasses);
  1214. }
  1215. }
  1216. }
  1217. }catch(e){tcl("error bluemodeToggle: " + e.message);}
  1218. }
  1219.  
  1220. function orangemodeToggle(arg) {
  1221. try{
  1222. var orangemodeClasses = ["tes-orangemode"];
  1223.  
  1224. if (settingsQuick["OrangeModeBlack"]) orangemodeClasses.push("orangenight");
  1225.  
  1226. if (arg == true) {
  1227. bodyElem.classList.add(...orangemodeClasses);
  1228. titleCSS.classList.add(...orangemodeClasses);
  1229. sidemenuCSS.classList.add(...orangemodeClasses);
  1230. userlistCSS.classList.add(...orangemodeClasses);
  1231. webappCSS.classList.add(...orangemodeClasses);
  1232. videolistCSS.classList.add(...orangemodeClasses);
  1233. videomoderationCSS.classList.add(...orangemodeClasses);
  1234. chatlistCSS.classList.add(...orangemodeClasses);
  1235. chatlogCSS.classList.add(...orangemodeClasses);
  1236. chatlogElem.querySelector("#chat-wider").classList.add(...orangemodeClasses);
  1237. // Messages:
  1238. if (chatlogElem.querySelector(messageQueryString) != null) {
  1239. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1240. for (i=0; i < messageElems.length; i++) {
  1241. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1242. var messageItemCSS = messageItem.querySelector(".message");
  1243. messageItemCSS.classList.add(...orangemodeClasses);
  1244. }
  1245. }
  1246. // Cams:
  1247. if (videolistElem.querySelector(camQueryString) != null) {
  1248. var camElems = videolistElem.querySelectorAll(camQueryString);
  1249. for (i=0; i < camElems.length; i++) {
  1250. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1251. var camItemCSS = camItem.querySelector(".video");
  1252. camItemCSS.classList.add(...orangemodeClasses);
  1253.  
  1254. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  1255. }
  1256. }
  1257. }
  1258. if (arg == false) {
  1259. if (!settingsQuick["OrangeModeBlack"] && settingsQuick["OrangeMode"]) nightmodeClasses = ["orangenight"];
  1260.  
  1261. bodyElem.classList.remove(...orangemodeClasses);
  1262. titleCSS.classList.remove(...orangemodeClasses);
  1263. sidemenuCSS.classList.remove(...orangemodeClasses);
  1264. userlistCSS.classList.remove(...orangemodeClasses);
  1265. webappCSS.classList.remove(...orangemodeClasses);
  1266. videolistCSS.classList.remove(...orangemodeClasses);
  1267. videomoderationCSS.classList.remove(...orangemodeClasses);
  1268. chatlistCSS.classList.remove(...orangemodeClasses);
  1269. chatlogCSS.classList.remove(...orangemodeClasses);
  1270. chatlogElem.querySelector("#chat-wider").classList.remove(...orangemodeClasses);
  1271. // Messages:
  1272. if (chatlogElem.querySelector(messageQueryString) != null) {
  1273. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1274. for (i=0; i < messageElems.length; i++) {
  1275. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1276. var messageItemCSS = messageItem.querySelector(".message");
  1277. messageItemCSS.classList.remove(...orangemodeClasses);
  1278. }
  1279. }
  1280. // Cams:
  1281. if (videolistElem.querySelector(camQueryString) != null) {
  1282. var camElems = videolistElem.querySelectorAll(camQueryString);
  1283. for (i=0; i < camElems.length; i++) {
  1284. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1285. var camItemCSS = camItem.querySelector(".video");
  1286. camItemCSS.classList.remove(...orangemodeClasses);
  1287. }
  1288. }
  1289. }
  1290. }catch(e){tcl("error orangemodeToggle: " + e.message);}
  1291. }
  1292.  
  1293. function redmodeToggle(arg) {
  1294. try{
  1295. var redmodeClasses = ["tes-redmode"];
  1296.  
  1297. if (settingsQuick["RedModeBlack"]) redmodeClasses.push("rednight");
  1298.  
  1299. if (arg == true) {
  1300. bodyElem.classList.add(...redmodeClasses);
  1301. titleCSS.classList.add(...redmodeClasses);
  1302. sidemenuCSS.classList.add(...redmodeClasses);
  1303. userlistCSS.classList.add(...redmodeClasses);
  1304. webappCSS.classList.add(...redmodeClasses);
  1305. videolistCSS.classList.add(...redmodeClasses);
  1306. videomoderationCSS.classList.add(...redmodeClasses);
  1307. chatlistCSS.classList.add(...redmodeClasses);
  1308. chatlogCSS.classList.add(...redmodeClasses);
  1309. chatlogElem.querySelector("#chat-wider").classList.add(...redmodeClasses);
  1310. // Messages:
  1311. if (chatlogElem.querySelector(messageQueryString) != null) {
  1312. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1313. for (i=0; i < messageElems.length; i++) {
  1314. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1315. var messageItemCSS = messageItem.querySelector(".message");
  1316. messageItemCSS.classList.add(...redmodeClasses);
  1317. }
  1318. }
  1319. // Cams:
  1320. if (videolistElem.querySelector(camQueryString) != null) {
  1321. var camElems = videolistElem.querySelectorAll(camQueryString);
  1322. for (i=0; i < camElems.length; i++) {
  1323. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1324. var camItemCSS = camItem.querySelector(".video");
  1325. camItemCSS.classList.add(...redmodeClasses);
  1326.  
  1327. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  1328. }
  1329. }
  1330. }
  1331. if (arg == false) {
  1332. if (!settingsQuick["RedModeBlack"] && settingsQuick["RedMode"]) nightmodeClasses = ["rednight"];
  1333.  
  1334. bodyElem.classList.remove(...redmodeClasses);
  1335. titleCSS.classList.remove(...redmodeClasses);
  1336. sidemenuCSS.classList.remove(...redmodeClasses);
  1337. userlistCSS.classList.remove(...redmodeClasses);
  1338. webappCSS.classList.remove(...redmodeClasses);
  1339. videolistCSS.classList.remove(...redmodeClasses);
  1340. videomoderationCSS.classList.remove(...redmodeClasses);
  1341. chatlistCSS.classList.remove(...redmodeClasses);
  1342. chatlogCSS.classList.remove(...redmodeClasses);
  1343. chatlogElem.querySelector("#chat-wider").classList.remove(...redmodeClasses);
  1344. // Messages:
  1345. if (chatlogElem.querySelector(messageQueryString) != null) {
  1346. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1347. for (i=0; i < messageElems.length; i++) {
  1348. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1349. var messageItemCSS = messageItem.querySelector(".message");
  1350. messageItemCSS.classList.remove(...redmodeClasses);
  1351. }
  1352. }
  1353. // Cams:
  1354. if (videolistElem.querySelector(camQueryString) != null) {
  1355. var camElems = videolistElem.querySelectorAll(camQueryString);
  1356. for (i=0; i < camElems.length; i++) {
  1357. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1358. var camItemCSS = camItem.querySelector(".video");
  1359. camItemCSS.classList.remove(...redmodeClasses);
  1360. }
  1361. }
  1362. }
  1363. }catch(e){tcl("error redmodeToggle: " + e.message);}
  1364. }
  1365.  
  1366. function featureonemodeToggle(arg) {
  1367. try{
  1368. var featureonemodeClasses = ["tes-featureonemode"];
  1369.  
  1370. if (settingsQuick["FeatureOneModeBlack"]) featureonemodeClasses.push("featureonenight");
  1371.  
  1372. if (arg == true) {
  1373. bodyElem.classList.add(...featureonemodeClasses);
  1374. titleCSS.classList.add(...featureonemodeClasses);
  1375. sidemenuCSS.classList.add(...featureonemodeClasses);
  1376. userlistCSS.classList.add(...featureonemodeClasses);
  1377. webappCSS.classList.add(...featureonemodeClasses);
  1378. videolistCSS.classList.add(...featureonemodeClasses);
  1379. videomoderationCSS.classList.add(...featureonemodeClasses);
  1380. chatlistCSS.classList.add(...featureonemodeClasses);
  1381. chatlogCSS.classList.add(...featureonemodeClasses);
  1382. chatlogElem.querySelector("#chat-wider").classList.add(...featureonemodeClasses);
  1383. // Messages:
  1384. if (chatlogElem.querySelector(messageQueryString) != null) {
  1385. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1386. for (i=0; i < messageElems.length; i++) {
  1387. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1388. var messageItemCSS = messageItem.querySelector(".message");
  1389. messageItemCSS.classList.add(...featureonemodeClasses);
  1390. }
  1391. }
  1392. // Cams:
  1393. if (videolistElem.querySelector(camQueryString) != null) {
  1394. var camElems = videolistElem.querySelectorAll(camQueryString);
  1395. for (i=0; i < camElems.length; i++) {
  1396. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1397. var camItemCSS = camItem.querySelector(".video");
  1398. camItemCSS.classList.add(...featureonemodeClasses);
  1399.  
  1400. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  1401. }
  1402. }
  1403. }
  1404. if (arg == false) {
  1405. if (!settingsQuick["FeatureOneModeBlack"] && settingsQuick["FeatureOneMode"]) nightmodeClasses = ["featureonenight"];
  1406.  
  1407. bodyElem.classList.remove(...featureonemodeClasses);
  1408. titleCSS.classList.remove(...featureonemodeClasses);
  1409. sidemenuCSS.classList.remove(...featureonemodeClasses);
  1410. userlistCSS.classList.remove(...featureonemodeClasses);
  1411. webappCSS.classList.remove(...featureonemodeClasses);
  1412. videolistCSS.classList.remove(...featureonemodeClasses);
  1413. videomoderationCSS.classList.remove(...featureonemodeClasses);
  1414. chatlistCSS.classList.remove(...featureonemodeClasses);
  1415. chatlogCSS.classList.remove(...featureonemodeClasses);
  1416. chatlogElem.querySelector("#chat-wider").classList.remove(...featureonemodeClasses);
  1417. // Messages:
  1418. if (chatlogElem.querySelector(messageQueryString) != null) {
  1419. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1420. for (i=0; i < messageElems.length; i++) {
  1421. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1422. var messageItemCSS = messageItem.querySelector(".message");
  1423. messageItemCSS.classList.remove(...featureonemodeClasses);
  1424. }
  1425. }
  1426. // Cams:
  1427. if (videolistElem.querySelector(camQueryString) != null) {
  1428. var camElems = videolistElem.querySelectorAll(camQueryString);
  1429. for (i=0; i < camElems.length; i++) {
  1430. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1431. var camItemCSS = camItem.querySelector(".video");
  1432. camItemCSS.classList.remove(...featureonemodeClasses);
  1433. }
  1434. }
  1435. }
  1436. }catch(e){tcl("error featureonemodeToggle: " + e.message);}
  1437. }
  1438.  
  1439. function featuretwomodeToggle(arg) {
  1440. try{
  1441. var featuretwomodeClasses = ["tes-featuretwomode"];
  1442.  
  1443. if (settingsQuick["FeatureTwoModeBlack"]) featuretwomodeClasses.push("featuretwonight");
  1444.  
  1445. if (arg == true) {
  1446. bodyElem.classList.add(...featuretwomodeClasses);
  1447. titleCSS.classList.add(...featuretwomodeClasses);
  1448. sidemenuCSS.classList.add(...featuretwomodeClasses);
  1449. userlistCSS.classList.add(...featuretwomodeClasses);
  1450. webappCSS.classList.add(...featuretwomodeClasses);
  1451. videolistCSS.classList.add(...featuretwomodeClasses);
  1452. videomoderationCSS.classList.add(...featuretwomodeClasses);
  1453. chatlistCSS.classList.add(...featuretwomodeClasses);
  1454. chatlogCSS.classList.add(...featuretwomodeClasses);
  1455. chatlogElem.querySelector("#chat-wider").classList.add(...featuretwomodeClasses);
  1456. // Messages:
  1457. if (chatlogElem.querySelector(messageQueryString) != null) {
  1458. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1459. for (i=0; i < messageElems.length; i++) {
  1460. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1461. var messageItemCSS = messageItem.querySelector(".message");
  1462. messageItemCSS.classList.add(...featuretwomodeClasses);
  1463. }
  1464. }
  1465. // Cams:
  1466. if (videolistElem.querySelector(camQueryString) != null) {
  1467. var camElems = videolistElem.querySelectorAll(camQueryString);
  1468. for (i=0; i < camElems.length; i++) {
  1469. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1470. var camItemCSS = camItem.querySelector(".video");
  1471. camItemCSS.classList.add(...featuretwomodeClasses);
  1472.  
  1473. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  1474. }
  1475. }
  1476. }
  1477. if (arg == false) {
  1478. if (!settingsQuick["FeatureTwoModeBlack"] && settingsQuick["FeatureTwoMode"]) nightmodeClasses = ["featuretwonight"];
  1479.  
  1480. bodyElem.classList.remove(...featuretwomodeClasses);
  1481. titleCSS.classList.remove(...featuretwomodeClasses);
  1482. sidemenuCSS.classList.remove(...featuretwomodeClasses);
  1483. userlistCSS.classList.remove(...featuretwomodeClasses);
  1484. webappCSS.classList.remove(...featuretwomodeClasses);
  1485. videolistCSS.classList.remove(...featuretwomodeClasses);
  1486. videomoderationCSS.classList.remove(...featuretwomodeClasses);
  1487. chatlistCSS.classList.remove(...featuretwomodeClasses);
  1488. chatlogCSS.classList.remove(...featuretwomodeClasses);
  1489. chatlogElem.querySelector("#chat-wider").classList.remove(...featuretwomodeClasses);
  1490. // Messages:
  1491. if (chatlogElem.querySelector(messageQueryString) != null) {
  1492. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1493. for (i=0; i < messageElems.length; i++) {
  1494. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1495. var messageItemCSS = messageItem.querySelector(".message");
  1496. messageItemCSS.classList.remove(...featuretwomodeClasses);
  1497. }
  1498. }
  1499. // Cams:
  1500. if (videolistElem.querySelector(camQueryString) != null) {
  1501. var camElems = videolistElem.querySelectorAll(camQueryString);
  1502. for (i=0; i < camElems.length; i++) {
  1503. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1504. var camItemCSS = camItem.querySelector(".video");
  1505. camItemCSS.classList.remove(...featuretwomodeClasses);
  1506. }
  1507. }
  1508. }
  1509. }catch(e){tcl("error featuretwomodeToggle: " + e.message);}
  1510. }
  1511.  
  1512. function featurethreemodeToggle(arg) {
  1513. try{
  1514. var featurethreemodeClasses = ["tes-featurethreemode"];
  1515.  
  1516. if (settingsQuick["FeatureThreeModeBlack"]) featurethreemodeClasses.push("featurethreenight");
  1517.  
  1518. if (arg == true) {
  1519. bodyElem.classList.add(...featurethreemodeClasses);
  1520. titleCSS.classList.add(...featurethreemodeClasses);
  1521. sidemenuCSS.classList.add(...featurethreemodeClasses);
  1522. userlistCSS.classList.add(...featurethreemodeClasses);
  1523. webappCSS.classList.add(...featurethreemodeClasses);
  1524. videolistCSS.classList.add(...featurethreemodeClasses);
  1525. videomoderationCSS.classList.add(...featurethreemodeClasses);
  1526. chatlistCSS.classList.add(...featurethreemodeClasses);
  1527. chatlogCSS.classList.add(...featurethreemodeClasses);
  1528. chatlogElem.querySelector("#chat-wider").classList.add(...featurethreemodeClasses);
  1529. // Messages:
  1530. if (chatlogElem.querySelector(messageQueryString) != null) {
  1531. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1532. for (i=0; i < messageElems.length; i++) {
  1533. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1534. var messageItemCSS = messageItem.querySelector(".message");
  1535. messageItemCSS.classList.add(...featurethreemodeClasses);
  1536. }
  1537. }
  1538. // Cams:
  1539. if (videolistElem.querySelector(camQueryString) != null) {
  1540. var camElems = videolistElem.querySelectorAll(camQueryString);
  1541. for (i=0; i < camElems.length; i++) {
  1542. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1543. var camItemCSS = camItem.querySelector(".video");
  1544. camItemCSS.classList.add(...featurethreemodeClasses);
  1545.  
  1546. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  1547. }
  1548. }
  1549. }
  1550. if (arg == false) {
  1551. if (!settingsQuick["FeatureThreeModeBlack"] && settingsQuick["FeatureThreeMode"]) nightmodeClasses = ["featurethreenight"];
  1552.  
  1553. bodyElem.classList.remove(...featurethreemodeClasses);
  1554. titleCSS.classList.remove(...featurethreemodeClasses);
  1555. sidemenuCSS.classList.remove(...featurethreemodeClasses);
  1556. userlistCSS.classList.remove(...featurethreemodeClasses);
  1557. webappCSS.classList.remove(...featurethreemodeClasses);
  1558. videolistCSS.classList.remove(...featurethreemodeClasses);
  1559. videomoderationCSS.classList.remove(...featurethreemodeClasses);
  1560. chatlistCSS.classList.remove(...featurethreemodeClasses);
  1561. chatlogCSS.classList.remove(...featurethreemodeClasses);
  1562. chatlogElem.querySelector("#chat-wider").classList.remove(...featurethreemodeClasses);
  1563. // Messages:
  1564. if (chatlogElem.querySelector(messageQueryString) != null) {
  1565. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1566. for (i=0; i < messageElems.length; i++) {
  1567. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1568. var messageItemCSS = messageItem.querySelector(".message");
  1569. messageItemCSS.classList.remove(...featurethreemodeClasses);
  1570. }
  1571. }
  1572. // Cams:
  1573. if (videolistElem.querySelector(camQueryString) != null) {
  1574. var camElems = videolistElem.querySelectorAll(camQueryString);
  1575. for (i=0; i < camElems.length; i++) {
  1576. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1577. var camItemCSS = camItem.querySelector(".video");
  1578. camItemCSS.classList.remove(...featurethreemodeClasses);
  1579. }
  1580. }
  1581. }
  1582. }catch(e){tcl("error featurethreemodeToggle: " + e.message);}
  1583. }
  1584.  
  1585. function darkpurplemodeToggle(arg) {
  1586. try{
  1587. var darkpurplemodeClasses = ["tes-darkpurplemode"];
  1588.  
  1589. if (settingsQuick["DarkPurpleModeBlack"]) darkpurplemodeClasses.push("darkpurplenight");
  1590.  
  1591. if (arg == true) {
  1592. bodyElem.classList.add(...darkpurplemodeClasses);
  1593. titleCSS.classList.add(...darkpurplemodeClasses);
  1594. sidemenuCSS.classList.add(...darkpurplemodeClasses);
  1595. userlistCSS.classList.add(...darkpurplemodeClasses);
  1596. webappCSS.classList.add(...darkpurplemodeClasses);
  1597. videolistCSS.classList.add(...darkpurplemodeClasses);
  1598. videomoderationCSS.classList.add(...darkpurplemodeClasses);
  1599. chatlistCSS.classList.add(...darkpurplemodeClasses);
  1600. chatlogCSS.classList.add(...darkpurplemodeClasses);
  1601. chatlogElem.querySelector("#chat-wider").classList.add(...darkpurplemodeClasses);
  1602. // Messages:
  1603. if (chatlogElem.querySelector(messageQueryString) != null) {
  1604. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1605. for (i=0; i < messageElems.length; i++) {
  1606. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1607. var messageItemCSS = messageItem.querySelector(".message");
  1608. messageItemCSS.classList.add(...darkpurplemodeClasses);
  1609. }
  1610. }
  1611. // Cams:
  1612. if (videolistElem.querySelector(camQueryString) != null) {
  1613. var camElems = videolistElem.querySelectorAll(camQueryString);
  1614. for (i=0; i < camElems.length; i++) {
  1615. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1616. var camItemCSS = camItem.querySelector(".video");
  1617. camItemCSS.classList.add(...darkpurplemodeClasses);
  1618.  
  1619. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  1620. }
  1621. }
  1622. }
  1623. if (arg == false) {
  1624. if (!settingsQuick["DarkPurpleModeBlack"] && settingsQuick["DarkPurpleMode"]) nightmodeClasses = ["darkpurplenight"];
  1625.  
  1626. bodyElem.classList.remove(...darkpurplemodeClasses);
  1627. titleCSS.classList.remove(...darkpurplemodeClasses);
  1628. sidemenuCSS.classList.remove(...darkpurplemodeClasses);
  1629. userlistCSS.classList.remove(...darkpurplemodeClasses);
  1630. webappCSS.classList.remove(...darkpurplemodeClasses);
  1631. videolistCSS.classList.remove(...darkpurplemodeClasses);
  1632. videomoderationCSS.classList.remove(...darkpurplemodeClasses);
  1633. chatlistCSS.classList.remove(...darkpurplemodeClasses);
  1634. chatlogCSS.classList.remove(...darkpurplemodeClasses);
  1635. chatlogElem.querySelector("#chat-wider").classList.remove(...darkpurplemodeClasses);
  1636. // Messages:
  1637. if (chatlogElem.querySelector(messageQueryString) != null) {
  1638. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1639. for (i=0; i < messageElems.length; i++) {
  1640. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1641. var messageItemCSS = messageItem.querySelector(".message");
  1642. messageItemCSS.classList.remove(...darkpurplemodeClasses);
  1643. }
  1644. }
  1645. // Cams:
  1646. if (videolistElem.querySelector(camQueryString) != null) {
  1647. var camElems = videolistElem.querySelectorAll(camQueryString);
  1648. for (i=0; i < camElems.length; i++) {
  1649. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1650. var camItemCSS = camItem.querySelector(".video");
  1651. camItemCSS.classList.remove(...darkpurplemodeClasses);
  1652. }
  1653. }
  1654. }
  1655. }catch(e){tcl("error darkpurplemodeToggle: " + e.message);}
  1656. }
  1657.  
  1658. function purplemodeToggle(arg) {
  1659. try{
  1660. var purplemodeClasses = ["tes-purplemode"];
  1661.  
  1662. if (settingsQuick["PurpleModeBlack"]) purplemodeClasses.push("purplenight");
  1663.  
  1664. if (arg == true) {
  1665. bodyElem.classList.add(...purplemodeClasses);
  1666. titleCSS.classList.add(...purplemodeClasses);
  1667. sidemenuCSS.classList.add(...purplemodeClasses);
  1668. userlistCSS.classList.add(...purplemodeClasses);
  1669. webappCSS.classList.add(...purplemodeClasses);
  1670. videolistCSS.classList.add(...purplemodeClasses);
  1671. videomoderationCSS.classList.add(...purplemodeClasses);
  1672. chatlistCSS.classList.add(...purplemodeClasses);
  1673. chatlogCSS.classList.add(...purplemodeClasses);
  1674. chatlogElem.querySelector("#chat-wider").classList.add(...purplemodeClasses);
  1675. // Messages:
  1676. if (chatlogElem.querySelector(messageQueryString) != null) {
  1677. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1678. for (i=0; i < messageElems.length; i++) {
  1679. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1680. var messageItemCSS = messageItem.querySelector(".message");
  1681. messageItemCSS.classList.add(...purplemodeClasses);
  1682. }
  1683. }
  1684. // Cams:
  1685. if (videolistElem.querySelector(camQueryString) != null) {
  1686. var camElems = videolistElem.querySelectorAll(camQueryString);
  1687. for (i=0; i < camElems.length; i++) {
  1688. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1689. var camItemCSS = camItem.querySelector(".video");
  1690. camItemCSS.classList.add(...purplemodeClasses);
  1691.  
  1692. if (camItemCSS.querySelector("#camItemCSS") == null) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  1693. }
  1694. }
  1695. }
  1696. if (arg == false) {
  1697. if (!settingsQuick["PurpleModeBlack"] && settingsQuick["PurpleMode"]) nightmodeClasses = ["purplenight"];
  1698.  
  1699. bodyElem.classList.remove(...purplemodeClasses);
  1700. titleCSS.classList.remove(...purplemodeClasses);
  1701. sidemenuCSS.classList.remove(...purplemodeClasses);
  1702. userlistCSS.classList.remove(...purplemodeClasses);
  1703. webappCSS.classList.remove(...purplemodeClasses);
  1704. videolistCSS.classList.remove(...purplemodeClasses);
  1705. videomoderationCSS.classList.remove(...purplemodeClasses);
  1706. chatlistCSS.classList.remove(...purplemodeClasses);
  1707. chatlogCSS.classList.remove(...purplemodeClasses);
  1708. chatlogElem.querySelector("#chat-wider").classList.remove(...purplemodeClasses);
  1709. // Messages:
  1710. if (chatlogElem.querySelector(messageQueryString) != null) {
  1711. var messageElems = chatlogElem.querySelectorAll(messageQueryString);
  1712. for (i=0; i < messageElems.length; i++) {
  1713. var messageItem = messageElems[i].querySelector("tc-message-html").shadowRoot;
  1714. var messageItemCSS = messageItem.querySelector(".message");
  1715. messageItemCSS.classList.remove(...purplemodeClasses);
  1716. }
  1717. }
  1718. // Cams:
  1719. if (videolistElem.querySelector(camQueryString) != null) {
  1720. var camElems = videolistElem.querySelectorAll(camQueryString);
  1721. for (i=0; i < camElems.length; i++) {
  1722. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  1723. var camItemCSS = camItem.querySelector(".video");
  1724. camItemCSS.classList.remove(...purplemodeClasses);
  1725. }
  1726. }
  1727. }
  1728. }catch(e){tcl("error purplemodeToggle: " + e.message);}
  1729. }
  1730.  
  1731.  
  1732. function showUpdateNotifier(text) {
  1733. try{
  1734.  
  1735. var updateNotifier = titleElem.querySelector("#tes-updateNotifier");
  1736. updateNotifier.querySelector("span").innerHTML = text;
  1737. updateNotifier.classList.add("visible");
  1738. if (settingsVisible == true) toggleSettingsDisplay();
  1739.  
  1740. }catch(e){tcl("error showUpdateNotifier: " + e.message);}
  1741. }
  1742.  
  1743. function toggleSettingsDisplay(arg) {
  1744. try{
  1745. if (arg == "updateNotifier") {
  1746. titleElem.querySelector("#tes-updateNotifier").classList.remove("visible");
  1747. GM_setValue("tes-updateNotifSeen", "2018.155");
  1748. }
  1749.  
  1750. if (settingsVisible == true) {
  1751. titleElem.getElementById("tes-settingsBox").classList.add("hidden");
  1752. titleElem.getElementById("tes-settings").classList.remove("tes-open");
  1753. settingsVisible = false;
  1754. }
  1755.  
  1756. else {
  1757. titleElem.getElementById("tes-settingsBox").classList.remove("hidden");
  1758. titleElem.getElementById("tes-settings").classList.add("tes-open");
  1759. settingsVisible = true;
  1760. }
  1761. }catch(e){tcl("error toggleSettingsDisplay: " + e.message);}
  1762. }
  1763.  
  1764. function toggleThemesDisplay(arg) {
  1765.  
  1766. if (settingsVisible == true) {
  1767. titleElem.getElementById("tes-themesBox").classList.add("hidden");
  1768. titleElem.getElementById("tes-themes").classList.remove("tes-open");
  1769. titleElem.getElementById("tes-themesButton").classList.remove("tes-themes-open");
  1770. settingsVisible = false;
  1771. }
  1772.  
  1773. else {
  1774. titleElem.getElementById("tes-themesBox").classList.remove("hidden");
  1775. titleElem.getElementById("tes-themes").classList.add("tes-open");
  1776. titleElem.getElementById("tes-themesButton").classList.add("tes-themes-open");
  1777. settingsVisible = true;
  1778. }
  1779.  
  1780. }
  1781.  
  1782. function toggleGamesDisplay(arg) {
  1783.  
  1784. if (settingsVisible == true) {
  1785. titleElem.getElementById("tes-gamesBox").classList.add("hidden");
  1786. titleElem.getElementById("tes-games").classList.remove("tes-open");
  1787. titleElem.getElementById("tes-gamesButton").classList.remove("tes-games-open");
  1788. settingsVisible = false;
  1789. }
  1790.  
  1791. else {
  1792. titleElem.getElementById("tes-gamesBox").classList.remove("hidden");
  1793. titleElem.getElementById("tes-games").classList.add("tes-open");
  1794. titleElem.getElementById("tes-gamesButton").classList.add("tes-games-open");
  1795. settingsVisible = true;
  1796. }
  1797.  
  1798. }
  1799.  
  1800. function toggleEmojisDisplay(arg) {
  1801.  
  1802. if (settingsVisible == true) {
  1803. titleElem.getElementById("tes-emojisBox").classList.add("hidden");
  1804. titleElem.getElementById("tes-emojis").classList.remove("tes-open");
  1805. titleElem.getElementById("tes-emojisButton").classList.remove("tes-emojis-open");
  1806. settingsVisible = false;
  1807. }
  1808.  
  1809. else {
  1810. titleElem.getElementById("tes-emojisBox").classList.remove("hidden");
  1811. titleElem.getElementById("tes-emojis").classList.add("tes-open");
  1812. titleElem.getElementById("tes-emojisButton").classList.add("tes-emojis-open");
  1813. settingsVisible = true;
  1814. }
  1815.  
  1816. }
  1817.  
  1818. function toggleHidingDisplay(arg) {
  1819.  
  1820. if (settingsVisible == true) {
  1821. titleElem.getElementById("tes-hidingBox").classList.add("hidden");
  1822. titleElem.getElementById("tes-hiding").classList.remove("tes-open");
  1823. titleElem.getElementById("tes-hidingButton").classList.remove("tes-hiding-open");
  1824. settingsVisible = false;
  1825. }
  1826.  
  1827. else {
  1828. titleElem.getElementById("tes-hidingBox").classList.remove("hidden");
  1829. titleElem.getElementById("tes-hiding").classList.add("tes-open");
  1830. titleElem.getElementById("tes-hidingButton").classList.add("tes-hiding-open");
  1831. settingsVisible = true;
  1832. }
  1833.  
  1834. }
  1835.  
  1836. function settingsCheckboxUpdate(settingName=null, value=null) {
  1837. try{
  1838. if (settingName == null && value == null) {
  1839. titleElem.getElementById("tes-settings-borderlesscams").querySelector("input").checked = settingsQuick["BorderlessCams"];
  1840. titleElem.getElementById("tes-settings-miniyt").querySelector("input").checked = settingsQuick["miniyt"];
  1841.  
  1842. titleElem.getElementById("tes-settings-autoscroll").querySelector("input").checked = settingsQuick["Autoscroll"];
  1843. titleElem.getElementById("tes-settings-mentions").querySelector("input").checked = settingsQuick["MentionsMonitor"];
  1844. titleElem.getElementById("tes-settings-notifications").querySelector("input").checked = settingsQuick["NotificationsOff"];
  1845. titleElem.getElementById("tes-settings-changefont").querySelector("input").checked = settingsQuick["ChangeFont"];
  1846. titleElem.getElementById("tes-settings-chatbelow").querySelector("input").checked = settingsQuick["ChatBelow"];
  1847. titleElem.getElementById("tes-settings-nightmode").querySelector("input").checked = settingsQuick["NightMode"];
  1848. titleElem.getElementById("tes-settings-maxcamposition").querySelector("input").checked = settingsQuick["MaxedCamLeft"];
  1849.  
  1850. titleElem.getElementById("tes-settings-defaultmode").querySelector("input").checked = settingsQuick["DefaultMode"];
  1851. titleElem.getElementById("tes-settings-pinkmode").querySelector("input").checked = settingsQuick["PinkMode"];
  1852. titleElem.getElementById("tes-settings-greenmode").querySelector("input").checked = settingsQuick["GreenMode"];
  1853. titleElem.getElementById("tes-settings-bluemode").querySelector("input").checked = settingsQuick["BlueMode"];
  1854. titleElem.getElementById("tes-settings-purplemode").querySelector("input").checked = settingsQuick["PurpleMode"];
  1855. titleElem.getElementById("tes-settings-darkpurplemode").querySelector("input").checked = settingsQuick["DarkPurpleMode"];
  1856. titleElem.getElementById("tes-settings-whitemode").querySelector("input").checked = settingsQuick["WhiteMode"];
  1857. titleElem.getElementById("tes-settings-orangemode").querySelector("input").checked = settingsQuick["OrangeMode"];
  1858. titleElem.getElementById("tes-settings-redmode").querySelector("input").checked = settingsQuick["RedMode"];
  1859. titleElem.getElementById("tes-settings-featureonemode").querySelector("input").checked = settingsQuick["FeatureOneMode"];
  1860. titleElem.getElementById("tes-settings-featuretwomode").querySelector("input").checked = settingsQuick["FeatureTwoMode"];
  1861. titleElem.getElementById("tes-settings-featurethreemode").querySelector("input").checked = settingsQuick["FeatureThreeMode"];
  1862.  
  1863. return;
  1864. }
  1865.  
  1866. if (settingName == "tes-settings-autoscroll") {
  1867. if (value == null) {
  1868. var newValue = titleElem.getElementById("tes-settings-autoscroll").querySelector("input").checked;
  1869. settingsQuick["Autoscroll"] = newValue;
  1870. GM_setValue("tes-Autoscroll", newValue.toString());
  1871. }
  1872. }
  1873. if (settingName == "tes-settings-mentions") {
  1874. if (value == null) {
  1875. var newValue = titleElem.getElementById("tes-settings-mentions").querySelector("input:first-of-type").checked;
  1876. // if (newValue) {
  1877. // titleElem.getElementById("tes-settings-mentions").getAttribute("class").includes("setting-disabled");
  1878. // }
  1879. settingsQuick["MentionsMonitor"] = newValue;
  1880. GM_setValue("tes-MentionsMonitor", newValue.toString());
  1881. }
  1882. }
  1883. if (settingName == "tes-settings-notifications") {
  1884. if (value == null) {
  1885. var newValue = titleElem.getElementById("tes-settings-notifications").querySelector("input").checked;
  1886. settingsQuick["NotificationsOff"] = newValue;
  1887. GM_setValue("tes-NotificationsOff", newValue.toString());
  1888. notificationHider();
  1889. }
  1890. }
  1891. if (settingName == "tes-settings-changefont") {
  1892. if (value == null) {
  1893. var newValue = titleElem.getElementById("tes-settings-changefont").querySelector("input").checked;
  1894. settingsQuick["ChangeFont"] = newValue;
  1895. GM_setValue("tes-ChangeFont", newValue.toString());
  1896. fontToggle(newValue);
  1897. }
  1898. }
  1899. if (settingName == "tes-settings-chatbelow") {
  1900. if (value == null) {
  1901. var newValue = titleElem.getElementById("tes-settings-chatbelow").querySelector("input").checked;
  1902. settingsQuick["ChatBelow"] = newValue;
  1903. GM_setValue("tes-ChatBelow", newValue.toString());
  1904. chatBelowToggle(newValue);
  1905. }
  1906. }
  1907. if (settingName == "tes-settings-nightmode") {
  1908. if (value == null) {
  1909. var newValue = titleElem.getElementById("tes-settings-nightmode").querySelector("input").checked;
  1910. settingsQuick["NightMode"] = newValue;
  1911. GM_setValue("tes-NightMode", newValue.toString());
  1912. nightmodeToggle(newValue);
  1913. }
  1914. }
  1915. if (settingName == "tes-settings-nightmode-black") {
  1916. if (value == null) {
  1917. var newValue = titleElem.querySelector("#tes-settings-nightmode #black input").checked;
  1918. titleElem.querySelector("#tes-settings-nightmode #gray input").checked = (!newValue);
  1919. settingsQuick["NightModeBlack"] = newValue;
  1920. GM_setValue("tes-NightModeBlack", newValue.toString());
  1921. nightmodeToggle(newValue);
  1922. nightmodeToggle(true);
  1923.  
  1924. if (titleElem.querySelector("#tes-settings-nightmode #black input").checked || titleElem.querySelector("#tes-settings-nightmode #gray input").checked) {
  1925. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  1926. GM_setValue("tes-NightMode", true.toString());
  1927. settingsQuick["NightMode"] = true;
  1928. }
  1929. }
  1930. }
  1931.  
  1932. if (settingName == "tes-settings-maxcamposition") {
  1933. if (value == null) {
  1934. var newValue = titleElem.getElementById("tes-settings-maxcamposition").querySelector("input").checked;
  1935. settingsQuick["MaxedCamLeft"] = newValue;
  1936. GM_setValue("tes-MaxedCamLeft", newValue.toString());
  1937. maxCamPositionToggle(newValue);
  1938. }
  1939. }
  1940. if (settingName == "tes-settings-miniyt") {
  1941. if (value == null) {
  1942. var newValue = titleElem.getElementById("tes-settings-miniyt").querySelector("input").checked;
  1943. settingsQuick["miniyt"] = newValue;
  1944. GM_setValue("tes-miniyt", newValue.toString());
  1945. miniytToggle(newValue);
  1946. }
  1947. }
  1948.  
  1949. if (settingName == "tes-settings-borderlesscams") {
  1950. if (value == null) {
  1951. var newValue = titleElem.getElementById("tes-settings-borderlesscams").querySelector("input").checked;
  1952. settingsQuick["BorderlessCams"] = newValue;
  1953. GM_setValue("tes-BorderlessCams", newValue.toString());
  1954. borderlessCamsToggle(newValue);
  1955. }
  1956. }
  1957.  
  1958. if (settingName == "tes-settings-pinkmode") {
  1959. if (value == null) {
  1960. var newValue = titleElem.getElementById("tes-settings-pinkmode").querySelector("input").checked
  1961.  
  1962. settingsQuick["BlueMode"] = (false);
  1963. GM_setValue("tes-BlueMode", (false).toString());
  1964. titleElem.querySelector("#tes-settings-bluemode input").checked = false;
  1965.  
  1966. settingsQuick["GreenMode"] = (false);
  1967. GM_setValue("tes-GreenMode", (false).toString());
  1968. titleElem.querySelector("#tes-settings-greenmode input").checked = false;
  1969.  
  1970. settingsQuick["PurpleMode"] = (false);
  1971. GM_setValue("tes-PurpleMode", (false).toString());
  1972. titleElem.querySelector("#tes-settings-purplemode input").checked = false;
  1973.  
  1974. settingsQuick["DarkPurpleMode"] = (false);
  1975. GM_setValue("tes-DarkPurpleMode", (false).toString());
  1976. titleElem.querySelector("#tes-settings-darkpurplemode input").checked = false;
  1977.  
  1978. settingsQuick["OrangeMode"] = (false);
  1979. GM_setValue("tes-OrangeMode", (false).toString());
  1980. titleElem.querySelector("#tes-settings-orangemode input").checked = false;
  1981.  
  1982. settingsQuick["FeatureThreeMode"] = (false);
  1983. GM_setValue("tes-FeatureThreeMode", (false).toString());
  1984. titleElem.querySelector("#tes-settings-featurethreemode input").checked = false;
  1985.  
  1986. settingsQuick["FeatureTwoMode"] = (false);
  1987. GM_setValue("tes-FeatureTwoMode", (false).toString());
  1988. titleElem.querySelector("#tes-settings-featuretwomode input").checked = false;
  1989.  
  1990. settingsQuick["FeatureOneMode"] = (false);
  1991. GM_setValue("tes-FeatureOneMode", (false).toString());
  1992. titleElem.querySelector("#tes-settings-featureonemode input").checked = false;
  1993.  
  1994. settingsQuick["RedMode"] = (false);
  1995. GM_setValue("tes-RedMode", (false).toString());
  1996. titleElem.querySelector("#tes-settings-redmode input").checked = false;
  1997.  
  1998. settingsQuick["WhiteMode"] = (false);
  1999. GM_setValue("tes-WhiteMode", (false).toString());
  2000. titleElem.querySelector("#tes-settings-whitemode input").checked = false;
  2001.  
  2002. settingsQuick["DefaultMode"] = (false);
  2003. GM_setValue("tes-DefaultMode", (false).toString());
  2004. titleElem.querySelector("#tes-settings-defaultmode input").checked = false;
  2005.  
  2006. settingsQuick["PinkMode"] = newValue;
  2007. GM_setValue("tes-PinkMode", newValue.toString());
  2008. pinkmodeToggle(newValue);
  2009. pinkmodeToggle(true);
  2010. toggleThemesDisplay(false);
  2011. featuretwomodeToggle(false);
  2012. featureonemodeToggle(false);
  2013. greenmodeToggle(false);
  2014. bluemodeToggle(false);
  2015. orangemodeToggle(false);
  2016. redmodeToggle(false);
  2017. purplemodeToggle(false);
  2018. whitemodeToggle(false);
  2019. darkpurplemodeToggle(false);
  2020. featurethreemodeToggle(false);
  2021.  
  2022. if (titleElem.getElementById("tes-settings-pinkmode").querySelector("input").checked) {
  2023. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  2024. GM_setValue("tes-NightMode", true.toString());
  2025. settingsQuick["NightMode"] = true;
  2026. }
  2027. }
  2028. }
  2029. if (settingName == "tes-settings-whitemode") {
  2030. if (value == null) {
  2031. var newValue = titleElem.getElementById("tes-settings-whitemode").querySelector("input").checked
  2032.  
  2033. settingsQuick["BlueMode"] = (false);
  2034. GM_setValue("tes-BlueMode", (false).toString());
  2035. titleElem.querySelector("#tes-settings-bluemode input").checked = false;
  2036.  
  2037. settingsQuick["GreenMode"] = (false);
  2038. GM_setValue("tes-GreenMode", (false).toString());
  2039. titleElem.querySelector("#tes-settings-greenmode input").checked = false;
  2040.  
  2041. settingsQuick["PurpleMode"] = (false);
  2042. GM_setValue("tes-PurpleMode", (false).toString());
  2043. titleElem.querySelector("#tes-settings-purplemode input").checked = false;
  2044.  
  2045. settingsQuick["DarkPurpleMode"] = (false);
  2046. GM_setValue("tes-DarkPurpleMode", (false).toString());
  2047. titleElem.querySelector("#tes-settings-darkpurplemode input").checked = false;
  2048.  
  2049. settingsQuick["OrangeMode"] = (false);
  2050. GM_setValue("tes-OrangeMode", (false).toString());
  2051. titleElem.querySelector("#tes-settings-orangemode input").checked = false;
  2052.  
  2053. settingsQuick["FeatureThreeMode"] = (false);
  2054. GM_setValue("tes-FeatureThreeMode", (false).toString());
  2055. titleElem.querySelector("#tes-settings-featurethreemode input").checked = false;
  2056.  
  2057. settingsQuick["FeatureTwoMode"] = (false);
  2058. GM_setValue("tes-FeatureTwoMode", (false).toString());
  2059. titleElem.querySelector("#tes-settings-featuretwomode input").checked = false;
  2060.  
  2061. settingsQuick["FeatureOneMode"] = (false);
  2062. GM_setValue("tes-FeatureOneMode", (false).toString());
  2063. titleElem.querySelector("#tes-settings-featureonemode input").checked = false;
  2064.  
  2065. settingsQuick["RedMode"] = (false);
  2066. GM_setValue("tes-RedMode", (false).toString());
  2067. titleElem.querySelector("#tes-settings-redmode input").checked = false;
  2068.  
  2069. settingsQuick["PinkMode"] = (false);
  2070. GM_setValue("tes-PinkMode", (false).toString());
  2071. titleElem.querySelector("#tes-settings-pinkmode input").checked = false;
  2072.  
  2073. settingsQuick["DefaultMode"] = (false);
  2074. GM_setValue("tes-DefaultMode", (false).toString());
  2075. titleElem.querySelector("#tes-settings-defaultmode input").checked = false;
  2076.  
  2077. settingsQuick["WhiteMode"] = newValue;
  2078. GM_setValue("tes-WhiteMode", newValue.toString());
  2079. whitemodeToggle(newValue);
  2080. whitemodeToggle(true);
  2081. toggleThemesDisplay(false);
  2082. featuretwomodeToggle(false);
  2083. featureonemodeToggle(false);
  2084. greenmodeToggle(false);
  2085. bluemodeToggle(false);
  2086. orangemodeToggle(false);
  2087. redmodeToggle(false);
  2088. purplemodeToggle(false);
  2089. pinkmodeToggle(false);
  2090. darkpurplemodeToggle(false);
  2091. featurethreemodeToggle(false);
  2092.  
  2093.  
  2094. if (titleElem.getElementById("tes-settings-whitemode").querySelector("input").checked) {
  2095. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  2096. GM_setValue("tes-NightMode", true.toString());
  2097. settingsQuick["NightMode"] = true;
  2098. }
  2099. }
  2100. }
  2101. if (settingName == "tes-settings-greenmode") {
  2102. if (value == null) {
  2103. var newValue = titleElem.getElementById("tes-settings-greenmode").querySelector("input").checked;
  2104.  
  2105. settingsQuick["BlueMode"] = (false);
  2106. GM_setValue("tes-BlueMode", (false).toString());
  2107. titleElem.querySelector("#tes-settings-bluemode input").checked = false;
  2108.  
  2109. settingsQuick["PinkMode"] = (false);
  2110. GM_setValue("tes-PinkMode", (false).toString());
  2111. titleElem.querySelector("#tes-settings-pinkmode input").checked = false;
  2112.  
  2113. settingsQuick["PurpleMode"] = (false);
  2114. GM_setValue("tes-PurpleMode", (false).toString());
  2115. titleElem.querySelector("#tes-settings-purplemode input").checked = false;
  2116.  
  2117. settingsQuick["DarkPurpleMode"] = (false);
  2118. GM_setValue("tes-DarkPurpleMode", (false).toString());
  2119. titleElem.querySelector("#tes-settings-darkpurplemode input").checked = false;
  2120.  
  2121. settingsQuick["OrangeMode"] = (false);
  2122. GM_setValue("tes-OrangeMode", (false).toString());
  2123. titleElem.querySelector("#tes-settings-orangemode input").checked = false;
  2124.  
  2125. settingsQuick["RedMode"] = (false);
  2126. GM_setValue("tes-RedMode", (false).toString());
  2127. titleElem.querySelector("#tes-settings-redmode input").checked = false;
  2128.  
  2129. settingsQuick["FeatureThreeMode"] = (false);
  2130. GM_setValue("tes-FeatureThreeMode", (false).toString());
  2131. titleElem.querySelector("#tes-settings-featurethreemode input").checked = false;
  2132.  
  2133. settingsQuick["FeatureOneMode"] = (false);
  2134. GM_setValue("tes-FeatureOneMode", (false).toString());
  2135. titleElem.querySelector("#tes-settings-featureonemode input").checked = false;
  2136.  
  2137. settingsQuick["FeatureTwoMode"] = (false);
  2138. GM_setValue("tes-FeatureTwoMode", (false).toString());
  2139. titleElem.querySelector("#tes-settings-featuretwomode input").checked = false;
  2140.  
  2141. settingsQuick["WhiteMode"] = (false);
  2142. GM_setValue("tes-WhiteMode", (false).toString());
  2143. titleElem.querySelector("#tes-settings-whitemode input").checked = false;
  2144.  
  2145. settingsQuick["DefaultMode"] = (false);
  2146. GM_setValue("tes-DefaultMode", (false).toString());
  2147. titleElem.querySelector("#tes-settings-defaultmode input").checked = false;
  2148.  
  2149. settingsQuick["GreenMode"] = newValue;
  2150. GM_setValue("tes-GreenMode", newValue.toString());
  2151. greenmodeToggle(newValue);
  2152. greenmodeToggle(true);
  2153. toggleThemesDisplay(false);
  2154. featuretwomodeToggle(false);
  2155. featureonemodeToggle(false);
  2156. pinkmodeToggle(false);
  2157. orangemodeToggle(false);
  2158. redmodeToggle(false);
  2159. bluemodeToggle(false);
  2160. purplemodeToggle(false);
  2161. darkpurplemodeToggle(false);
  2162. whitemodeToggle(false);
  2163. featurethreemodeToggle(false);
  2164.  
  2165. if (titleElem.getElementById("tes-settings-greenmode").querySelector("input").checked) {
  2166. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  2167. GM_setValue("tes-NightMode", true.toString());
  2168. settingsQuick["NightMode"] = true;
  2169. }
  2170. }
  2171. }
  2172. if (settingName == "tes-settings-bluemode") {
  2173. if (value == null) {
  2174. var newValue = titleElem.getElementById("tes-settings-bluemode").querySelector("input").checked;
  2175.  
  2176. settingsQuick["PinkMode"] = (false);
  2177. GM_setValue("tes-PinkMode", (false).toString());
  2178. titleElem.querySelector("#tes-settings-pinkmode input").checked = false;
  2179.  
  2180. settingsQuick["GreenMode"] = (false);
  2181. GM_setValue("tes-GreenMode", (false).toString());
  2182. titleElem.querySelector("#tes-settings-greenmode input").checked = false;
  2183.  
  2184. settingsQuick["PurpleMode"] = (false);
  2185. GM_setValue("tes-PurpleMode", (false).toString());
  2186. titleElem.querySelector("#tes-settings-purplemode input").checked = false;
  2187.  
  2188. settingsQuick["DarkPurpleMode"] = (false);
  2189. GM_setValue("tes-DarkPurpleMode", (false).toString());
  2190. titleElem.querySelector("#tes-settings-darkpurplemode input").checked = false;
  2191.  
  2192. settingsQuick["OrangeMode"] = (false);
  2193. GM_setValue("tes-OrangeMode", (false).toString());
  2194. titleElem.querySelector("#tes-settings-orangemode input").checked = false;
  2195.  
  2196. settingsQuick["FeatureOneMode"] = (false);
  2197. GM_setValue("tes-FeatureOneMode", (false).toString());
  2198. titleElem.querySelector("#tes-settings-featureonemode input").checked = false;
  2199.  
  2200. settingsQuick["FeatureThreeMode"] = (false);
  2201. GM_setValue("tes-FeatureThreeMode", (false).toString());
  2202. titleElem.querySelector("#tes-settings-featurethreemode input").checked = false;
  2203.  
  2204. settingsQuick["FeatureTwoMode"] = (false);
  2205. GM_setValue("tes-FeatureTwoMode", (false).toString());
  2206. titleElem.querySelector("#tes-settings-featuretwomode input").checked = false;
  2207.  
  2208. settingsQuick["RedMode"] = (false);
  2209. GM_setValue("tes-RedMode", (false).toString());
  2210. titleElem.querySelector("#tes-settings-redmode input").checked = false;
  2211.  
  2212. settingsQuick["WhiteMode"] = (false);
  2213. GM_setValue("tes-WhiteMode", (false).toString());
  2214. titleElem.querySelector("#tes-settings-whitemode input").checked = false;
  2215.  
  2216. settingsQuick["DefaultMode"] = (false);
  2217. GM_setValue("tes-DefaultMode", (false).toString());
  2218. titleElem.querySelector("#tes-settings-defaultmode input").checked = false;
  2219.  
  2220. settingsQuick["BlueMode"] = newValue;
  2221. GM_setValue("tes-BlueMode", newValue.toString());
  2222. bluemodeToggle(newValue);
  2223. bluemodeToggle(true);
  2224. toggleThemesDisplay(false);
  2225. featuretwomodeToggle(false);
  2226. featureonemodeToggle(false);
  2227. purplemodeToggle(false);
  2228. darkpurplemodeToggle(false);
  2229. orangemodeToggle(false);
  2230. redmodeToggle(false);
  2231. pinkmodeToggle(false);
  2232. greenmodeToggle(false);
  2233. whitemodeToggle(false);
  2234. featurethreemodeToggle(false);
  2235.  
  2236. if (titleElem.getElementById("tes-settings-bluemode").querySelector("input").checked) {
  2237. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  2238. GM_setValue("tes-NightMode", true.toString());
  2239. settingsQuick["NightMode"] = true;
  2240. }
  2241. }
  2242. }
  2243. if (settingName == "tes-settings-orangemode") {
  2244. if (value == null) {
  2245. var newValue = titleElem.getElementById("tes-settings-orangemode").querySelector("input").checked;
  2246.  
  2247. settingsQuick["PinkMode"] = (false);
  2248. GM_setValue("tes-PinkMode", (false).toString());
  2249. titleElem.querySelector("#tes-settings-pinkmode input").checked = false;
  2250.  
  2251. settingsQuick["GreenMode"] = (false);
  2252. GM_setValue("tes-GreenMode", (false).toString());
  2253. titleElem.querySelector("#tes-settings-greenmode input").checked = false;
  2254.  
  2255. settingsQuick["PurpleMode"] = (false);
  2256. GM_setValue("tes-PurpleMode", (false).toString());
  2257. titleElem.querySelector("#tes-settings-purplemode input").checked = false;
  2258.  
  2259. settingsQuick["DarkPurpleMode"] = (false);
  2260. GM_setValue("tes-DarkPurpleMode", (false).toString());
  2261. titleElem.querySelector("#tes-settings-darkpurplemode input").checked = false;
  2262.  
  2263. settingsQuick["BlueMode"] = (false);
  2264. GM_setValue("tes-BlueMode", (false).toString());
  2265. titleElem.querySelector("#tes-settings-bluemode input").checked = false;
  2266.  
  2267. settingsQuick["FeatureThreeMode"] = (false);
  2268. GM_setValue("tes-FeatureThreeMode", (false).toString());
  2269. titleElem.querySelector("#tes-settings-featurethreemode input").checked = false;
  2270.  
  2271. settingsQuick["FeatureOneMode"] = (false);
  2272. GM_setValue("tes-FeatureOneMode", (false).toString());
  2273. titleElem.querySelector("#tes-settings-featureonemode input").checked = false;
  2274.  
  2275. settingsQuick["FeatureTwoMode"] = (false);
  2276. GM_setValue("tes-FeatureTwoMode", (false).toString());
  2277. titleElem.querySelector("#tes-settings-featuretwomode input").checked = false;
  2278.  
  2279. settingsQuick["RedMode"] = (false);
  2280. GM_setValue("tes-RedMode", (false).toString());
  2281. titleElem.querySelector("#tes-settings-redmode input").checked = false;
  2282.  
  2283. settingsQuick["WhiteMode"] = (false);
  2284. GM_setValue("tes-WhiteMode", (false).toString());
  2285. titleElem.querySelector("#tes-settings-whitemode input").checked = false;
  2286.  
  2287. settingsQuick["DefaultMode"] = (false);
  2288. GM_setValue("tes-DefaultMode", (false).toString());
  2289. titleElem.querySelector("#tes-settings-defaultmode input").checked = false;
  2290.  
  2291. settingsQuick["OrangeMode"] = newValue;
  2292. GM_setValue("tes-OrangeMode", newValue.toString());
  2293. orangemodeToggle(newValue);
  2294. orangemodeToggle(true);
  2295. toggleThemesDisplay(false);
  2296. featuretwomodeToggle(false);
  2297. featureonemodeToggle(false);
  2298. bluemodeToggle(false);
  2299. redmodeToggle(false);
  2300. purplemodeToggle(false);
  2301. darkpurplemodeToggle(false);
  2302. pinkmodeToggle(false);
  2303. greenmodeToggle(false);
  2304. whitemodeToggle(false);
  2305. featurethreemodeToggle(false);
  2306.  
  2307. if (titleElem.getElementById("tes-settings-orangemode").querySelector("input").checked) {
  2308. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  2309. GM_setValue("tes-NightMode", true.toString());
  2310. settingsQuick["NightMode"] = true;
  2311. }
  2312. }
  2313. }
  2314. if (settingName == "tes-settings-redmode") {
  2315. if (value == null) {
  2316. var newValue = titleElem.getElementById("tes-settings-redmode").querySelector("input").checked;
  2317.  
  2318. settingsQuick["PinkMode"] = (false);
  2319. GM_setValue("tes-PinkMode", (false).toString());
  2320. titleElem.querySelector("#tes-settings-pinkmode input").checked = false;
  2321.  
  2322. settingsQuick["GreenMode"] = (false);
  2323. GM_setValue("tes-GreenMode", (false).toString());
  2324. titleElem.querySelector("#tes-settings-greenmode input").checked = false;
  2325.  
  2326. settingsQuick["PurpleMode"] = (false);
  2327. GM_setValue("tes-PurpleMode", (false).toString());
  2328. titleElem.querySelector("#tes-settings-purplemode input").checked = false;
  2329.  
  2330. settingsQuick["DarkPurpleMode"] = (false);
  2331. GM_setValue("tes-DarkPurpleMode", (false).toString());
  2332. titleElem.querySelector("#tes-settings-darkpurplemode input").checked = false;
  2333.  
  2334. settingsQuick["BlueMode"] = (false);
  2335. GM_setValue("tes-BlueMode", (false).toString());
  2336. titleElem.querySelector("#tes-settings-bluemode input").checked = false;
  2337.  
  2338. settingsQuick["FeatureThreeMode"] = (false);
  2339. GM_setValue("tes-FeatureThreeMode", (false).toString());
  2340. titleElem.querySelector("#tes-settings-featurethreemode input").checked = false;
  2341.  
  2342. settingsQuick["FeatureOneMode"] = (false);
  2343. GM_setValue("tes-FeatureOneMode", (false).toString());
  2344. titleElem.querySelector("#tes-settings-featureonemode input").checked = false;
  2345.  
  2346. settingsQuick["FeatureTwoMode"] = (false);
  2347. GM_setValue("tes-FeatureTwoMode", (false).toString());
  2348. titleElem.querySelector("#tes-settings-featuretwomode input").checked = false;
  2349.  
  2350. settingsQuick["OrangeMode"] = (false);
  2351. GM_setValue("tes-OrangeMode", (false).toString());
  2352. titleElem.querySelector("#tes-settings-orangemode input").checked = false;
  2353.  
  2354. settingsQuick["WhiteMode"] = (false);
  2355. GM_setValue("tes-WhiteMode", (false).toString());
  2356. titleElem.querySelector("#tes-settings-whitemode input").checked = false;
  2357.  
  2358. settingsQuick["DefaultMode"] = (false);
  2359. GM_setValue("tes-DefaultMode", (false).toString());
  2360. titleElem.querySelector("#tes-settings-defaultmode input").checked = false;
  2361.  
  2362. settingsQuick["RedMode"] = newValue;
  2363. GM_setValue("tes-RedMode", newValue.toString());
  2364. redmodeToggle(newValue);
  2365. redmodeToggle(true);
  2366. toggleThemesDisplay(false);
  2367. featuretwomodeToggle(false);
  2368. featureonemodeToggle(false);
  2369. bluemodeToggle(false);
  2370. orangemodeToggle(false);
  2371. purplemodeToggle(false);
  2372. darkpurplemodeToggle(false);
  2373. pinkmodeToggle(false);
  2374. greenmodeToggle(false);
  2375. whitemodeToggle(false);
  2376. featurethreemodeToggle(false);
  2377.  
  2378. if (titleElem.getElementById("tes-settings-redmode").querySelector("input").checked) {
  2379. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  2380. GM_setValue("tes-NightMode", true.toString());
  2381. settingsQuick["NightMode"] = true;
  2382. }
  2383. }
  2384. }
  2385. if (settingName == "tes-settings-darkpurplemode") {
  2386. if (value == null) {
  2387. var newValue = titleElem.getElementById("tes-settings-darkpurplemode").querySelector("input").checked;
  2388.  
  2389. settingsQuick["PinkMode"] = (false);
  2390. GM_setValue("tes-PinkMode", (false).toString());
  2391. titleElem.querySelector("#tes-settings-pinkmode input").checked = false;
  2392.  
  2393. settingsQuick["GreenMode"] = (false);
  2394. GM_setValue("tes-GreenMode", (false).toString());
  2395. titleElem.querySelector("#tes-settings-greenmode input").checked = false;
  2396.  
  2397. settingsQuick["BlueMode"] = (false);
  2398. GM_setValue("tes-BlueMode", (false).toString());
  2399. titleElem.querySelector("#tes-settings-bluemode input").checked = false;
  2400.  
  2401. settingsQuick["OrangeMode"] = (false);
  2402. GM_setValue("tes-OrangeMode", (false).toString());
  2403. titleElem.querySelector("#tes-settings-orangemode input").checked = false;
  2404.  
  2405. settingsQuick["PurpleMode"] = (false);
  2406. GM_setValue("tes-PurpleMode", (false).toString());
  2407. titleElem.querySelector("#tes-settings-purplemode input").checked = false;
  2408.  
  2409. settingsQuick["FeatureThreeMode"] = (false);
  2410. GM_setValue("tes-FeatureThreeMode", (false).toString());
  2411. titleElem.querySelector("#tes-settings-featurethreemode input").checked = false;
  2412.  
  2413. settingsQuick["FeatureOneMode"] = (false);
  2414. GM_setValue("tes-FeatureOneMode", (false).toString());
  2415. titleElem.querySelector("#tes-settings-featureonemode input").checked = false;
  2416.  
  2417. settingsQuick["FeatureTwoMode"] = (false);
  2418. GM_setValue("tes-FeatureTwoMode", (false).toString());
  2419. titleElem.querySelector("#tes-settings-featuretwomode input").checked = false;
  2420.  
  2421. settingsQuick["RedMode"] = (false);
  2422. GM_setValue("tes-RedMode", (false).toString());
  2423. titleElem.querySelector("#tes-settings-redmode input").checked = false;
  2424.  
  2425. settingsQuick["WhiteMode"] = (false);
  2426. GM_setValue("tes-WhiteMode", (false).toString());
  2427. titleElem.querySelector("#tes-settings-whitemode input").checked = false;
  2428.  
  2429. settingsQuick["DefaultMode"] = (false);
  2430. GM_setValue("tes-DefaultMode", (false).toString());
  2431. titleElem.querySelector("#tes-settings-defaultmode input").checked = false;
  2432.  
  2433. settingsQuick["DarkPurpleMode"] = newValue;
  2434. GM_setValue("tes-DarkPurpleMode", newValue.toString());
  2435. darkpurplemodeToggle(newValue);
  2436. darkpurplemodeToggle(true);
  2437. toggleThemesDisplay(false);
  2438. featureonemodeToggle(false);
  2439. featuretwomodeToggle(false);
  2440. purplemodeToggle(false);
  2441. pinkmodeToggle(false);
  2442. redmodeToggle(false);
  2443. greenmodeToggle(false);
  2444. bluemodeToggle(false);
  2445. orangemodeToggle(false);
  2446. whitemodeToggle(false);
  2447. featurethreemodeToggle(false);
  2448.  
  2449. if (titleElem.getElementById("tes-settings-darkpurplemode").querySelector("input").checked) {
  2450. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  2451. GM_setValue("tes-NightMode", true.toString());
  2452. settingsQuick["NightMode"] = true;
  2453. }
  2454. }
  2455. }
  2456. if (settingName == "tes-settings-purplemode") {
  2457. if (value == null) {
  2458. var newValue = titleElem.getElementById("tes-settings-purplemode").querySelector("input").checked;
  2459.  
  2460. settingsQuick["PinkMode"] = (false);
  2461. GM_setValue("tes-PinkMode", (false).toString());
  2462. titleElem.querySelector("#tes-settings-pinkmode input").checked = false;
  2463.  
  2464. settingsQuick["GreenMode"] = (false);
  2465. GM_setValue("tes-GreenMode", (false).toString());
  2466. titleElem.querySelector("#tes-settings-greenmode input").checked = false;
  2467.  
  2468. settingsQuick["BlueMode"] = (false);
  2469. GM_setValue("tes-BlueMode", (false).toString());
  2470. titleElem.querySelector("#tes-settings-bluemode input").checked = false;
  2471.  
  2472. settingsQuick["OrangeMode"] = (false);
  2473. GM_setValue("tes-OrangeMode", (false).toString());
  2474. titleElem.querySelector("#tes-settings-orangemode input").checked = false;
  2475.  
  2476. settingsQuick["DarkPurpleMode"] = (false);
  2477. GM_setValue("tes-DarkPurpleMode", (false).toString());
  2478. titleElem.querySelector("#tes-settings-darkpurplemode input").checked = false;
  2479.  
  2480. settingsQuick["FeatureThreeMode"] = (false);
  2481. GM_setValue("tes-FeatureThreeMode", (false).toString());
  2482. titleElem.querySelector("#tes-settings-featurethreemode input").checked = false;
  2483.  
  2484. settingsQuick["FeatureOneMode"] = (false);
  2485. GM_setValue("tes-FeatureOneMode", (false).toString());
  2486. titleElem.querySelector("#tes-settings-featureonemode input").checked = false;
  2487.  
  2488. settingsQuick["FeatureTwoMode"] = (false);
  2489. GM_setValue("tes-FeatureTwoMode", (false).toString());
  2490. titleElem.querySelector("#tes-settings-featuretwomode input").checked = false;
  2491.  
  2492. settingsQuick["RedMode"] = (false);
  2493. GM_setValue("tes-RedMode", (false).toString());
  2494. titleElem.querySelector("#tes-settings-redmode input").checked = false;
  2495.  
  2496. settingsQuick["WhiteMode"] = (false);
  2497. GM_setValue("tes-WhiteMode", (false).toString());
  2498. titleElem.querySelector("#tes-settings-whitemode input").checked = false;
  2499.  
  2500. settingsQuick["DefaultMode"] = (false);
  2501. GM_setValue("tes-DefaultMode", (false).toString());
  2502. titleElem.querySelector("#tes-settings-defaultmode input").checked = false;
  2503.  
  2504. settingsQuick["PurpleMode"] = newValue;
  2505. GM_setValue("tes-PurpleMode", newValue.toString());
  2506. purplemodeToggle(newValue);
  2507. purplemodeToggle(true);
  2508. toggleThemesDisplay(false);
  2509. featureonemodeToggle(false);
  2510. featuretwomodeToggle(false);
  2511. darkpurplemodeToggle(false);
  2512. pinkmodeToggle(false);
  2513. redmodeToggle(false);
  2514. greenmodeToggle(false);
  2515. bluemodeToggle(false);
  2516. orangemodeToggle(false);
  2517. whitemodeToggle(false);
  2518. featurethreemodeToggle(false);
  2519.  
  2520. if (titleElem.getElementById("tes-settings-purplemode").querySelector("input").checked) {
  2521. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  2522. GM_setValue("tes-NightMode", true.toString());
  2523. settingsQuick["NightMode"] = true;
  2524. }
  2525. }
  2526. }
  2527. if (settingName == "tes-settings-featureonemode") {
  2528. if (value == null) {
  2529. var newValue = titleElem.getElementById("tes-settings-featureonemode").querySelector("input").checked;
  2530.  
  2531. settingsQuick["PinkMode"] = (false);
  2532. GM_setValue("tes-PinkMode", (false).toString());
  2533. titleElem.querySelector("#tes-settings-pinkmode input").checked = false;
  2534.  
  2535. settingsQuick["PurpleMode"] = (false);
  2536. GM_setValue("tes-PurpleMode", (false).toString());
  2537. titleElem.querySelector("#tes-settings-purplemode input").checked = false;
  2538.  
  2539. settingsQuick["DarkPurpleMode"] = (false);
  2540. GM_setValue("tes-DarkPurpleMode", (false).toString());
  2541. titleElem.querySelector("#tes-settings-darkpurplemode input").checked = false;
  2542.  
  2543. settingsQuick["GreenMode"] = (false);
  2544. GM_setValue("tes-GreenMode", (false).toString());
  2545. titleElem.querySelector("#tes-settings-greenmode input").checked = false;
  2546.  
  2547. settingsQuick["BlueMode"] = (false);
  2548. GM_setValue("tes-BlueMode", (false).toString());
  2549. titleElem.querySelector("#tes-settings-bluemode input").checked = false;
  2550.  
  2551. settingsQuick["OrangeMode"] = (false);
  2552. GM_setValue("tes-OrangeMode", (false).toString());
  2553. titleElem.querySelector("#tes-settings-orangemode input").checked = false;
  2554.  
  2555. settingsQuick["FeatureThreeMode"] = (false);
  2556. GM_setValue("tes-FeatureThreeMode", (false).toString());
  2557. titleElem.querySelector("#tes-settings-featurethreemode input").checked = false;
  2558.  
  2559. settingsQuick["FeatureTwoMode"] = (false);
  2560. GM_setValue("tes-FeatureTwoMode", (false).toString());
  2561. titleElem.querySelector("#tes-settings-featuretwomode input").checked = false;
  2562.  
  2563. settingsQuick["RedMode"] = (false);
  2564. GM_setValue("tes-RedMode", (false).toString());
  2565. titleElem.querySelector("#tes-settings-redmode input").checked = false;
  2566.  
  2567. settingsQuick["WhiteMode"] = (false);
  2568. GM_setValue("tes-WhiteMode", (false).toString());
  2569. titleElem.querySelector("#tes-settings-whitemode input").checked = false;
  2570.  
  2571. settingsQuick["DefaultMode"] = (false);
  2572. GM_setValue("tes-DefaultMode", (false).toString());
  2573. titleElem.querySelector("#tes-settings-defaultmode input").checked = false;
  2574.  
  2575. settingsQuick["FeatureOneMode"] = newValue;
  2576. GM_setValue("tes-FeatureOneMode", newValue.toString());
  2577. featureonemodeToggle(newValue);
  2578. featureonemodeToggle(true);
  2579. toggleThemesDisplay(false);
  2580. featuretwomodeToggle(false);
  2581. purplemodeToggle(false);
  2582. darkpurplemodeToggle(false);
  2583. pinkmodeToggle(false);
  2584. redmodeToggle(false);
  2585. greenmodeToggle(false);
  2586. bluemodeToggle(false);
  2587. orangemodeToggle(false);
  2588. whitemodeToggle(false);
  2589. featurethreemodeToggle(false);
  2590.  
  2591. if (titleElem.getElementById("tes-settings-featureonemode").querySelector("input").checked) {
  2592. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  2593. GM_setValue("tes-NightMode", true.toString());
  2594. settingsQuick["NightMode"] = true;
  2595. }
  2596. }
  2597. }
  2598. if (settingName == "tes-settings-featuretwomode") {
  2599. if (value == null) {
  2600. var newValue = titleElem.getElementById("tes-settings-featuretwomode").querySelector("input").checked;
  2601.  
  2602. settingsQuick["PinkMode"] = (false);
  2603. GM_setValue("tes-PinkMode", (false).toString());
  2604. titleElem.querySelector("#tes-settings-pinkmode input").checked = false;
  2605.  
  2606. settingsQuick["PurpleMode"] = (false);
  2607. GM_setValue("tes-PurpleMode", (false).toString());
  2608. titleElem.querySelector("#tes-settings-purplemode input").checked = false;
  2609.  
  2610. settingsQuick["DarkPurpleMode"] = (false);
  2611. GM_setValue("tes-DarkPurpleMode", (false).toString());
  2612. titleElem.querySelector("#tes-settings-darkpurplemode input").checked = false;
  2613.  
  2614. settingsQuick["GreenMode"] = (false);
  2615. GM_setValue("tes-GreenMode", (false).toString());
  2616. titleElem.querySelector("#tes-settings-greenmode input").checked = false;
  2617.  
  2618. settingsQuick["BlueMode"] = (false);
  2619. GM_setValue("tes-BlueMode", (false).toString());
  2620. titleElem.querySelector("#tes-settings-bluemode input").checked = false;
  2621.  
  2622. settingsQuick["OrangeMode"] = (false);
  2623. GM_setValue("tes-OrangeMode", (false).toString());
  2624. titleElem.querySelector("#tes-settings-orangemode input").checked = false;
  2625.  
  2626. settingsQuick["FeatureThreeMode"] = (false);
  2627. GM_setValue("tes-FeatureThreeMode", (false).toString());
  2628. titleElem.querySelector("#tes-settings-featurethreemode input").checked = false;
  2629.  
  2630. settingsQuick["FeatureOneMode"] = (false);
  2631. GM_setValue("tes-FeatureOneMode", (false).toString());
  2632. titleElem.querySelector("#tes-settings-featureonemode input").checked = false;
  2633.  
  2634. settingsQuick["RedMode"] = (false);
  2635. GM_setValue("tes-RedMode", (false).toString());
  2636. titleElem.querySelector("#tes-settings-redmode input").checked = false;
  2637.  
  2638. settingsQuick["WhiteMode"] = (false);
  2639. GM_setValue("tes-WhiteMode", (false).toString());
  2640. titleElem.querySelector("#tes-settings-whitemode input").checked = false;
  2641.  
  2642. settingsQuick["DefaultMode"] = (false);
  2643. GM_setValue("tes-DefaultMode", (false).toString());
  2644. titleElem.querySelector("#tes-settings-defaultmode input").checked = false;
  2645.  
  2646. settingsQuick["FeatureTwoMode"] = newValue;
  2647. GM_setValue("tes-FeatureTwoMode", newValue.toString());
  2648. featuretwomodeToggle(newValue);
  2649. featuretwomodeToggle(true);
  2650. toggleThemesDisplay(false);
  2651. featureonemodeToggle(false);
  2652. purplemodeToggle(false);
  2653. darkpurplemodeToggle(false);
  2654. pinkmodeToggle(false);
  2655. redmodeToggle(false);
  2656. greenmodeToggle(false);
  2657. bluemodeToggle(false);
  2658. orangemodeToggle(false);
  2659. whitemodeToggle(false);
  2660. featurethreemodeToggle(false);
  2661.  
  2662. if (titleElem.getElementById("tes-settings-featuretwomode").querySelector("input").checked) {
  2663. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  2664. GM_setValue("tes-NightMode", true.toString());
  2665. settingsQuick["NightMode"] = true;
  2666. }
  2667. }
  2668. }
  2669.  
  2670. if (settingName == "tes-settings-featurethreemode") {
  2671. if (value == null) {
  2672. var newValue = titleElem.getElementById("tes-settings-featurethreemode").querySelector("input").checked;
  2673.  
  2674. settingsQuick["PinkMode"] = (false);
  2675. GM_setValue("tes-PinkMode", (false).toString());
  2676. titleElem.querySelector("#tes-settings-pinkmode input").checked = false;
  2677.  
  2678. settingsQuick["PurpleMode"] = (false);
  2679. GM_setValue("tes-PurpleMode", (false).toString());
  2680. titleElem.querySelector("#tes-settings-purplemode input").checked = false;
  2681.  
  2682. settingsQuick["DarkPurpleMode"] = (false);
  2683. GM_setValue("tes-DarkPurpleMode", (false).toString());
  2684. titleElem.querySelector("#tes-settings-darkpurplemode input").checked = false;
  2685.  
  2686. settingsQuick["GreenMode"] = (false);
  2687. GM_setValue("tes-GreenMode", (false).toString());
  2688. titleElem.querySelector("#tes-settings-greenmode input").checked = false;
  2689.  
  2690. settingsQuick["BlueMode"] = (false);
  2691. GM_setValue("tes-BlueMode", (false).toString());
  2692. titleElem.querySelector("#tes-settings-bluemode input").checked = false;
  2693.  
  2694. settingsQuick["OrangeMode"] = (false);
  2695. GM_setValue("tes-OrangeMode", (false).toString());
  2696. titleElem.querySelector("#tes-settings-orangemode input").checked = false;
  2697.  
  2698. settingsQuick["FeatureOneMode"] = (false);
  2699. GM_setValue("tes-FeatureOneMode", (false).toString());
  2700. titleElem.querySelector("#tes-settings-featureonemode input").checked = false;
  2701.  
  2702. settingsQuick["FeatureTwoMode"] = (false);
  2703. GM_setValue("tes-FeatureTwoMode", (false).toString());
  2704. titleElem.querySelector("#tes-settings-featuretwomode input").checked = false;
  2705.  
  2706. settingsQuick["RedMode"] = (false);
  2707. GM_setValue("tes-RedMode", (false).toString());
  2708. titleElem.querySelector("#tes-settings-redmode input").checked = false;
  2709.  
  2710. settingsQuick["WhiteMode"] = (false);
  2711. GM_setValue("tes-WhiteMode", (false).toString());
  2712. titleElem.querySelector("#tes-settings-whitemode input").checked = false;
  2713.  
  2714. settingsQuick["DefaultMode"] = (false);
  2715. GM_setValue("tes-DefaultMode", (false).toString());
  2716. titleElem.querySelector("#tes-settings-defaultmode input").checked = false;
  2717.  
  2718. settingsQuick["FeatureThreeMode"] = newValue;
  2719. GM_setValue("tes-FeatureThreeMode", newValue.toString());
  2720. featurethreemodeToggle(newValue);
  2721. featurethreemodeToggle(true);
  2722. toggleThemesDisplay(false);
  2723. featureonemodeToggle(false);
  2724. purplemodeToggle(false);
  2725. darkpurplemodeToggle(false);
  2726. pinkmodeToggle(false);
  2727. redmodeToggle(false);
  2728. greenmodeToggle(false);
  2729. bluemodeToggle(false);
  2730. orangemodeToggle(false);
  2731. whitemodeToggle(false);
  2732. featuretwomodeToggle(false);
  2733.  
  2734. if (titleElem.getElementById("tes-settings-featurethreemode").querySelector("input").checked) {
  2735. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  2736. GM_setValue("tes-NightMode", true.toString());
  2737. settingsQuick["NightMode"] = true;
  2738. }
  2739. }
  2740. }
  2741.  
  2742. if (settingName == "tes-settings-defaultmode") {
  2743. if (value == null) {
  2744. var newValue = titleElem.getElementById("tes-settings-defaultmode").querySelector("input").checked;
  2745.  
  2746. settingsQuick["PinkMode"] = (false);
  2747. GM_setValue("tes-PinkMode", (false).toString());
  2748. titleElem.querySelector("#tes-settings-pinkmode input").checked = false;
  2749.  
  2750. settingsQuick["GreenMode"] = (false);
  2751. GM_setValue("tes-GreenMode", (false).toString());
  2752. titleElem.querySelector("#tes-settings-greenmode input").checked = false;
  2753.  
  2754. settingsQuick["PurpleMode"] = (false);
  2755. GM_setValue("tes-PurpleMode", (false).toString());
  2756. titleElem.querySelector("#tes-settings-purplemode input").checked = false;
  2757.  
  2758. settingsQuick["DarkPurpleMode"] = (false);
  2759. GM_setValue("tes-DarkPurpleMode", (false).toString());
  2760. titleElem.querySelector("#tes-settings-darkpurplemode input").checked = false;
  2761.  
  2762. settingsQuick["OrangeMode"] = (false);
  2763. GM_setValue("tes-OrangeMode", (false).toString());
  2764. titleElem.querySelector("#tes-settings-orangemode input").checked = false;
  2765.  
  2766. settingsQuick["RedMode"] = (false);
  2767. GM_setValue("tes-RedMode", (false).toString());
  2768. titleElem.querySelector("#tes-settings-redmode input").checked = false;
  2769.  
  2770. settingsQuick["FeatureThreeMode"] = (false);
  2771. GM_setValue("tes-FeatureThreeMode", (false).toString());
  2772. titleElem.querySelector("#tes-settings-featurethreemode input").checked = false;
  2773.  
  2774. settingsQuick["FeatureOneMode"] = (false);
  2775. GM_setValue("tes-FeatureOneMode", (false).toString());
  2776. titleElem.querySelector("#tes-settings-featureonemode input").checked = false;
  2777.  
  2778. settingsQuick["FeatureTwoMode"] = (false);
  2779. GM_setValue("tes-FeatureTwoMode", (false).toString());
  2780. titleElem.querySelector("#tes-settings-featuretwomode input").checked = false;
  2781.  
  2782. settingsQuick["WhiteMode"] = (false);
  2783. GM_setValue("tes-WhiteMode", (false).toString());
  2784. titleElem.querySelector("#tes-settings-whitemode input").checked = false;
  2785.  
  2786. settingsQuick["BlueMode"] = (false);
  2787. GM_setValue("tes-BlueMode", (false).toString());
  2788. titleElem.querySelector("#tes-settings-bluemode input").checked = false;
  2789.  
  2790. settingsQuick["DefaultMode"] = newValue;
  2791. GM_setValue("tes-DefaultMode", newValue.toString());
  2792. nightmodeToggle(newValue);
  2793. nightmodeToggle(true);
  2794. toggleThemesDisplay(false);
  2795. purplemodeToggle(false);
  2796. darkpurplemodeToggle(false);
  2797. featureonemodeToggle(false);
  2798. featuretwomodeToggle(false);
  2799. redmodeToggle(false);
  2800. pinkmodeToggle(false);
  2801. greenmodeToggle(false);
  2802. bluemodeToggle(false);
  2803. orangemodeToggle(false);
  2804. whitemodeToggle(false);
  2805. featurethreemodeToggle(false);
  2806.  
  2807. if (titleElem.getElementById("tes-settings-defaultmode").querySelector("input").checked) {
  2808. titleElem.querySelector("#tes-settings-nightmode > input").checked = true;
  2809. GM_setValue("tes-NightMode", true.toString());
  2810. settingsQuick["NightMode"] = true;
  2811. }
  2812. }
  2813. }
  2814. }catch(e){tcl("error settingsCheckboxUpdate: " + e.message);}
  2815. }
  2816.  
  2817. function fontToggle(arg) {
  2818. try{
  2819. arg ? bodyElem.classList.add("tes-changefont") : bodyElem.classList.remove("tes-changefont");
  2820. }catch(e){tcl("error fontToggle: " + e.message);}
  2821. }
  2822.  
  2823. function borderlessCamsToggle(arg) {
  2824.  
  2825. if (videolistElem.querySelector(camQueryString) != null) {
  2826. var camElems = videolistElem.querySelectorAll(camQueryString);
  2827. for (i=0; i < camElems.length; i++) {
  2828. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  2829. var camElem = camItem.querySelector(".video");
  2830. arg ? camElem.classList.add("tes-borderlesscams") : camElem.classList.remove("tes-borderlesscams");
  2831. }
  2832. }
  2833. arg ? videolistCSS.classList.add("tes-borderlesscams") : videolistCSS.classList.remove("tes-borderlesscams");
  2834. }
  2835.  
  2836. function maxCamPositionToggle(arg) {
  2837. try{
  2838. arg ? videolistCSS.classList.add("tes-leftcam") : videolistCSS.classList.remove("tes-leftcam");
  2839. }catch(e){tcl("error maxCamPositionToggle: " + e.message);}
  2840. }
  2841.  
  2842. function miniytToggle(arg) {
  2843. try{
  2844. arg ? videolistCSS.classList.add("tes-miniyt") : videolistCSS.classList.remove("tes-miniyt");
  2845. }catch(e){tcl("error miniytToggle: " + e.message);}
  2846. }
  2847.  
  2848. function chatBelowToggle(arg) {
  2849. try{
  2850. arg ? chatlogOuter.classList.add("tes-chatbelow") : chatlogOuter.classList.remove("tes-chatbelow");
  2851. arg ? videosFooter.classList.add("tes-chatbelow") : chatlogOuter.classList.remove("tes-chatbelow");
  2852. }catch(e){tcl("error chatBelowToggle: " + e.message);}
  2853. }
  2854.  
  2855. function notificationHider() {
  2856. try{
  2857. chatlogContainer = chatlogElem.querySelector("#chat-content");
  2858. settingsQuick["NotificationsOff"] ? chatlogContainer.classList.add("tes-notif-off") : chatlogContainer.classList.remove("tes-notif-off");
  2859. }catch(e){tcl("error notificationHider: " + e.message);}
  2860. }
  2861.  
  2862. function copyChatlog(opt=null) {
  2863. try{
  2864. if (opt == "close") {
  2865. chatlogDisplayElem.classList.remove("show");
  2866. chatlogDisplayClose.classList.remove("show");
  2867. setTimeout(function(){chatlogDisplayCont.classList.remove("show");}, 300);
  2868. return;
  2869. }
  2870.  
  2871. var filename = "tinychat_" + roomName + "_" + joinDate + "_" + joinTime.replace(/:/g, ".") + "-chatlog.log";
  2872. var chatlogText = "Tinychat room " + roomName + " on " + joinDate + " " + joinTime + newline + "Users (" + usersCountInitial + "): " + userlistInitial + newline + chatlogMain;
  2873.  
  2874. var downloadLink = 'data:text/plain;charset=utf-8,' + encodeURIComponent(chatlogText);
  2875. var downloadElem = document.createElement('a');
  2876. downloadElem.setAttribute("href", downloadLink);
  2877.  
  2878. downloadElem.setAttribute("download", filename);
  2879.  
  2880. if (opt == "download") {
  2881. if (browserFirefox) showUpdateNotifier("Chat log downloading doesn't work in Firefox yet.");
  2882. else downloadElem.click();
  2883. }
  2884. if (opt == "view" || opt == null) {
  2885. if (typeof chatlogDisplayCont == "undefined") {
  2886. chatlogDisplayCont = chatlogElem.querySelector("#tes-chatlogDisplay");
  2887. chatlogDisplayElem = chatlogDisplayCont.querySelector("textarea");
  2888. chatlogDisplayClose = chatlogDisplayCont.querySelector("#close");
  2889. }
  2890. chatlogDisplayElem.value = chatlogText;
  2891. chatlogDisplayCont.classList.add("show");
  2892. setTimeout(function(){
  2893. chatlogDisplayElem.classList.add("show");
  2894. chatlogDisplayClose.classList.add("show");
  2895. }, 50);
  2896. chatlogDisplayElem.scrollTop = chatlogDisplayElem.scrollHeight;
  2897. }
  2898. }catch(e){tcl("error copyChatlog: " + e.message);}
  2899. }
  2900.  
  2901. function getFormattedDateTime(d, opt=null) {
  2902. try{
  2903. if (opt == "time") return d.toLocaleTimeString('en-US', { hour12: false });
  2904. else return d.toLocaleDateString('zh-CN', {'year':'numeric', 'month':'2-digit', 'day':'2-digit'}).replace(/\//g, "-");
  2905. }catch(e){tcl("error getFormattedDateTime: " + e.message);}
  2906. }
  2907.  
  2908. function mentionsManager(mode) {
  2909. try{
  2910. var inputElem = titleElem.querySelector("#tes-settings #tes-settings-mentions input.text");
  2911. // phrases = inputElem.value.split(",");
  2912. var phrase = inputElem.value;
  2913. if (phrase.endsWith(",")) { phrase = phrase.slice(0, -1); }
  2914. if (phrase.startsWith(",")) { phrase = phrase.slice(1); }
  2915.  
  2916. if (mode == "save") {
  2917. GM_setValue("tes-Mentions", phrase);
  2918. settingMentions = phrase.split(",");
  2919. inputElem.value = phrase;
  2920. }
  2921. if (mode == "load") {
  2922. var loadedMentions = GM_getValue("tes-Mentions");
  2923. if (loadedMentions != undefined) {
  2924. inputElem.value = loadedMentions;
  2925. settingMentions = loadedMentions.split(",");
  2926. }
  2927. }
  2928. return;
  2929.  
  2930. var phrase = phrase.toString();
  2931. if (mode == "save") {
  2932. settingMentions.push(phrases);
  2933. GM_setValue("tes-Mentions", JSON.stringify(setting_Mentions));
  2934. }
  2935. if (mode == "load") {
  2936. var mentions = JSON.parse(GM_getValue("tes-Mentions"));
  2937. settingMentions = mentions;
  2938. inputElem.value = settingMentions.join();
  2939. }
  2940. }catch(e){tcl("error mentionsManager: " + e.message);}
  2941. }
  2942.  
  2943.  
  2944. function declareGlobalVars() {
  2945.  
  2946. try{
  2947. globalCSS = `:root {
  2948. --textcolor: black;
  2949. --bgcolor: white;
  2950.  
  2951. /*--------------------------------------------------DEFAULTTT--------------------------------------------------------*/
  2952. --nightmode-bgcolor: #2d373a;
  2953. --nightmode-trimcolor: #3c4a4e;
  2954. --nightmode-textcolor: #9faaad;
  2955. --nightmode-textSecondarycolor: #4e5f65;
  2956. --nightmode-headerButtonscolor: #3986a7;
  2957.  
  2958. --nightmodeBlack-bgcolor: black;
  2959. --nightmodeBlack-trimcolor: #222;
  2960. /*--------------------------------------------------PINKKK1--------------------------------------------------------*/
  2961. --pinkmode-bgcolor: #ffd1dc;
  2962. --pinkmode-bordercolor: #ea98ab;
  2963. --pinkmode-lightbgcolor: #ffe1e6;
  2964. --pinkmode-textcolor: #aa8991;
  2965.  
  2966. /*--------------------------------------------------GREENNN1--------------------------------------------------------*/
  2967. --greenmode-bgcolor: #042500;
  2968. --greenmode-bordercolor: #217c16;
  2969. --greenmode-lightbgcolor: #00500d;
  2970. --greenmode-textcolor: #000000;
  2971.  
  2972. /*--------------------------------------------------BLUEEE1--------------------------------------------------------*/
  2973. --bluemode-bgcolor: #111949;
  2974. --bluemode-bordercolor: #596ce0;
  2975. --bluemode-lightbgcolor: #2a388b;
  2976. --bluemode-textcolor: #000000;
  2977.  
  2978. /*--------------------------------------------------PURPLEEE1--------------------------------------------------------*/
  2979. --purplemode-bgcolor: #9168b2;
  2980. --purplemode-bordercolor: #cac0d2;
  2981. --purplemode-lightbgcolor: #BF8FE5;
  2982. --purplemode-textcolor: #000000;
  2983.  
  2984. /*--------------------------------------------------ORANGEEE1--------------------------------------------------------*/
  2985. --orangemode-bgcolor: #b33700;
  2986. --orangemode-bordercolor: #ff8d10;
  2987. --orangemode-lightbgcolor: #ff4f00;
  2988. --orangemode-textcolor: #000000;
  2989.  
  2990. /*--------------------------------------------------REDDD1--------------------------------------------------------*/
  2991. --redmode-bgcolor: #590000;
  2992. --redmode-bordercolor: #d02323;
  2993. --redmode-lightbgcolor: #860000;
  2994. --redmode-textcolor: #000000;
  2995.  
  2996. /*--------------------------------------------------DARKPURPLEEE1--------------------------------------------------------*/
  2997. --darkpurplemode-bgcolor: #280048;
  2998. --darkpurplemode-bordercolor: #b14fff;
  2999. --darkpurplemode-lightbgcolor: #550098;
  3000. --darkpurplemode-textcolor: #000000;
  3001.  
  3002. /*--------------------------------------------------WHITEEE1--------------------------------------------------------*/
  3003. --whitemode-bgcolor: #2d373a;
  3004. --whitemode-bordercolor: #cbcfcf;
  3005. --whitemode-lightbgcolor: #FFFFFF;
  3006. --whitemode-textcolor: #000000;
  3007. --whitemode-headerbg: #f5f5f5;
  3008. --whitemode-darkbgcolor: #091316;
  3009. --whitemode-tcblue: #04caff;
  3010.  
  3011. /*--------------------------------------------------FEATUREONEEE1--------------------------------------------------------*/
  3012. --featureonemode-bgcolor: #000000;
  3013. --featureonemode-bordercolor: #005900;
  3014. --featureonemode-lightbgcolor: #000000;
  3015. --featureonemode-textcolor: #000000;
  3016. --featureonemode-headerbg: url(https://i.ibb.co/jDC8w3C/weed-wallpaper-1920x1080.jpg);
  3017. --featureonemode-roombg: url(https://i.ibb.co/5YKLsSK/wp2565886.jpg);
  3018. --featureonemode-userbg: url(https://i.ibb.co/5YKLsSK/wp2565886.jpg);
  3019. --featureonemode-chatbg: url(https://i.ibb.co/5YKLsSK/wp2565886.jpg);
  3020. --featureonemode-ptt: url(https://i.ibb.co/W2tyNNs/cannabis-PNG17.png);
  3021.  
  3022. /*--------------------------------------------------FEATURETWOOO1--------------------------------------------------------*/
  3023. --featuretwomode-bgcolor: #282828;
  3024. --featuretwomode-bordercolor: #3c3c3c;
  3025. --featuretwomode-lightbgcolor: #282828;
  3026. --featuretwomode-textcolor: #FFFFFF;
  3027. --featuretwomode-headerbg: url(https://i.ibb.co/BK1CXz4/smashlogo.jpg);
  3028. --featuretwomode-roombg: url(https://i.ibb.co/JxkgSdj/melee-minimal-wallpaper-by-browniehooves-d8lwcvk.png);
  3029. --featuretwomode-userbg: url(https://i.ibb.co/nRNHL9C/20444930186-7a639da784-o.png);
  3030. --featuretwomode-chatbg: url(https://i.ibb.co/ZSYHQs7/chat.jpg);
  3031. --featuretwomode-ptt: url(https://i.ibb.co/7KSTsdj/smash-clipart-87526.png);
  3032.  
  3033. /*--------------------------------------------------FEATURETHREEE1--------------------------------------------------------*/
  3034. --featurethreemode-bgcolor: #282828;
  3035. --featurethreemode-bordercolor: #3c3c3c;
  3036. --featurethreemode-lightbgcolor: #282828;
  3037. --featurethreemode-textcolor: #FFFFFF;
  3038. --featurethreemode-headerbg: url(https://i.imgur.com/jeJ2kjd.png);
  3039. --featurethreemode-roombg: url(https://i.imgur.com/jeJ2kjd.png);
  3040. --featurethreemode-userbg: url(https://i.imgur.com/jeJ2kjd.png);
  3041. --featurethreemode-chatbg: url(https://i.ibb.co/TrKBZFn/splat-chat-bg3.png);
  3042. --featurethreemode-ptt: url(https://i.ibb.co/3dHQVhC/splat-mic2.png);
  3043. --featurethreemode-innerchatbg: url(https://i.ibb.co/vBXky7C/splat-chat-bg.png);
  3044. --featurethreemode-messagebg: url(https://i.ibb.co/FWFnhc4/messagebg.png);
  3045. --featurethreemode-squid: url(https://i.imgur.com/Lf550ep.png);
  3046. --featurethreemode-squid2: url(https://i.imgur.com/1uMeS7U.png);
  3047. --featurethreemode-squid3: url(https://i.imgur.com/Wtai2zL.png);
  3048.  
  3049. ;
  3050.  
  3051. }
  3052.  
  3053.  
  3054. * {
  3055. scrollbar-color: #ccc transparent;
  3056. scrollbar-width: thin;
  3057. }
  3058. .tes-nightmode * { scrollbar-color: #242C2E transparent; }
  3059. .tes-nightmode.blacknight * { scrollbar-color: #111 transparent; }
  3060. .icon-resize {
  3061. left: 50%;
  3062. margin-left: -11px;display:none;
  3063. }
  3064.  
  3065. .tes-featurethreemode #room-content {
  3066. background-color:transparent !important;
  3067. }
  3068.  
  3069. :host, #videolist {
  3070. background-color: transparent;
  3071. }
  3072. /*--------------------------------------------------MINIYT--------------------------------------------------------*/
  3073. .tes-miniyt .videos-items:first-child:not(.hidden) {
  3074. width: 100px !important;
  3075. position: absolute;
  3076. top: -20px;
  3077. left: -24px;
  3078. height: 75px !important;
  3079. z-index: 1;
  3080. opacity: 0.5;}
  3081.  
  3082. .tes-miniyt #icon-seek {display:none;}
  3083.  
  3084. @media only screen and (min-width: 1920px) {
  3085. .tes-miniyt #videos.row > .videos-items:last-child {
  3086. width: 100%;}
  3087. }
  3088.  
  3089. `;
  3090.  
  3091. camItemCSShtml = `
  3092. <style id="camItemCSS">` + globalCSS + `
  3093.  
  3094. .icon-tes-max {
  3095. position: absolute;
  3096. top: -40%;
  3097. right: 0;
  3098. z-index: 9;
  3099. background: none;
  3100. border: 0;
  3101. }
  3102. .icon-tes-max:hover { cursor: pointer; }
  3103. .icon-tes-max path { fill: #04caff; }
  3104.  
  3105. .video:hover .icon-tes-max {
  3106. top: 40%;
  3107. transition: top .2s ease .2s,
  3108. right .2s ease .2s,
  3109. left .2s ease .2s,
  3110. opacity .2s;
  3111. }
  3112. .icon-tes-close {
  3113. position: absolute;
  3114. top: -40%;
  3115. left:3%;
  3116. z-index: 9;
  3117. background: none;
  3118. border: 0;
  3119. }
  3120.  
  3121. .icon-tes-close:hover { cursor: pointer; }
  3122. .icon-tes-close path { fill: #ff0000; }
  3123.  
  3124. .video:hover .icon-tes-close {
  3125. top: 40%;
  3126. transition: top .2s ease .2s,
  3127. left .2s ease .2s,
  3128. right .2s ease .2s,
  3129. opacity .2s;
  3130. }
  3131. .video > div > .overlay {
  3132. border-radius: 40px;
  3133. }
  3134.  
  3135. .video:after { border: 0px !important; border-color:#2a2c2c !important;}
  3136.  
  3137. /* Disable cam border
  3138. .video:after { border: none; border-color:#2a2c2c}
  3139. .video > div { background-color: unset; }
  3140. video,
  3141. .video > div > .overlay {
  3142. border-radius: 10px;
  3143. }
  3144. */
  3145. .video { transition: .4s; }
  3146. .tes-borderlesscams.video { padding: 0; }
  3147. .tes-leftcam.tes-close.tes-closedCam.video > div > .overlay { border-radius: 100px;}
  3148. .tes-borderlesscams.video:after { display: none; }
  3149.  
  3150. .tes-nightmode.video:after { border-color: var(--nightmode-bgcolor); }
  3151. .tes-nightmode.blacknight.video:after { border-color: var(--nightmodeBlack-bgcolor); }
  3152. .tes-pinkmode.blacknight.video:after,
  3153. .tes-greenmode.blacknight.video:after,
  3154. .tes-bluemode.blacknight.video:after,
  3155. .tes-purplemode.blacknight.video:after,
  3156. .tes-orangemode.blacknight.video:after,
  3157. .tes-redmode.blacknight.video:after,
  3158. .tes-darkpurplemode.blacknight.video:after,
  3159. .tes-whitemode.blacknight.video:after
  3160. { border-color: transparent; }
  3161.  
  3162.  
  3163.  
  3164.  
  3165. .tes-nightmode.blacknight.video > div > .waiting { background: #111; }
  3166. .tes-nightmode.blacknight.video > div { background-color: #111; }
  3167. </style>
  3168. `;
  3169.  
  3170. camMaxCSShtml = `
  3171. <style id="camMaxCSS">` + globalCSS + `
  3172. .tes-max .js-video {
  3173. width: 15%!important;
  3174. z-index: 1;
  3175. }
  3176. .tes-leftcam .tes-max .js-video {
  3177. float: right;
  3178. order: 2;
  3179. }
  3180. .tes-leftcam .tes-max .tes-maxedCam {
  3181. float: left;
  3182. order: 1;
  3183. }
  3184.  
  3185. div[data-video-count="5"] .tes-max .js-video:not(.tes-maxedCam),
  3186. div[data-video-count="6"] .tes-max .js-video:not(.tes-maxedCam),
  3187. div[data-video-count="7"] .tes-max .js-video:not(.tes-maxedCam)
  3188. { width: 20%!important; }
  3189. .tes-max.tes-camCount2 .js-video { width: 30%!important; }
  3190. .tes-max.tes-camCount10-11 .js-video { width: 16%!important; }
  3191. .tes-max.tes-camCount12 .js-video { width: 14%!important; }
  3192.  
  3193. :not(.hidden) + .tes-max.tes-camCount12 .js-video,
  3194. :not(.hidden) + .tes-max.tes-camCount10-11 .js-video,
  3195. :not(.hidden) + .tes-max .js-video
  3196. { width: 30%!important; }
  3197. :not(.hidden) + .tes-max.tes-camCount2 .js-video { width: 60%!important; }
  3198.  
  3199. .tes-max .js-video.tes-maxedCam,
  3200. :not(.hidden) + .tes-max .js-video.tes-maxedCam { width: 70%!important; }
  3201.  
  3202. @media screen and (max-width: 1400px) {
  3203. .tes-max .js-video { width: 20%!important; }
  3204.  
  3205. .tes-max.tes-camCount2 .js-video { width: 40%!important; }
  3206. .tes-max.tes-camCount10-11 .js-video { width: 18%!important; }
  3207. .tes-max.tes-camCount12 .js-video { width: 15%!important; }
  3208.  
  3209. .tes-max .js-video.tes-maxedCam,
  3210. :not(.hidden) + .tes-max .js-video.tes-maxedCam { width: 60%!important; }
  3211. }
  3212. `;
  3213.  
  3214. camMaxButtonHtml = `
  3215. <button class="icon-tes-max" id="maxbutton-camName">
  3216. <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
  3217. <path d="M14.37 12.95l3.335 3.336a1.003 1.003 0 1 1-1.42 1.42L12.95 14.37a8.028 8.028 0 1 1 1.42-1.42zm-6.342 1.1a6.02 6.02 0 1 0 0-12.042 6.02 6.02 0 0 0 0 12.042zM6.012 9.032a.996.996
  3218. 0 0 1-.994-1.004c0-.554.452-1.003.994-1.003h4.033c.55 0 .994.445.994 1.003 0 .555-.454 1.004-.995 1.004H6.012z" fill-rule="evenodd"></path>
  3219. <path d="M0 .99C0 .445.444 0 1 0a1 1 0 0 1 1 .99v4.02C2 5.555 1.556 6 1 6a1 1 0 0 1-1-.99V.99z" transform="translate(7 5)" fill-rule="evenodd"></path>
  3220. </svg>
  3221. </button>
  3222. `;
  3223. camCloseCSShtml = `
  3224. <style id="camCloseCSS">` + globalCSS + `
  3225. .tes-close .js-video {
  3226. z-index: 1;
  3227. }
  3228. .tes-leftcam .tes-close .js-video {
  3229. float: right;
  3230. order: 2;
  3231. }
  3232.  
  3233.  
  3234. /*---------CLOSED ITEM--------*/
  3235. .tes-leftcam .tes-close .tes-closedCam {
  3236. width: 8% !important;
  3237. z-index: 12;
  3238. position: absolute;
  3239. top: -130px;
  3240. right: 100px;
  3241. height: 5px !important;
  3242. margin: 0;
  3243. padding: 0;
  3244. opacity: 0.5;
  3245. float: left;
  3246. order: 1;}
  3247.  
  3248.  
  3249.  
  3250.  
  3251. div[data-video-count="5"] .tes-close .js-video:not(.tes-closedCam),
  3252. div[data-video-count="6"] .tes-close .js-video:not(.tes-closedCam),
  3253. div[data-video-count="7"] .tes-close .js-video:not(.tes-closedCam)
  3254. {}
  3255. .tes-close.tes-camCount2 .js-video {}
  3256. .tes-close.tes-camCount10-11 .js-video {}
  3257. .tes-close.tes-camCount12 .js-video {}
  3258.  
  3259. :not(.hidden) + .tes-close.tes-camCount12 .js-video,
  3260. :not(.hidden) + .tes-close.tes-camCount10-11 .js-video,
  3261. :not(.hidden) + .tes-close .js-video
  3262. {}
  3263. :not(.hidden) + .tes-close.tes-camCount2 .js-video {}
  3264.  
  3265. /*---------CLOSED ITEM--------*/
  3266. .tes-max .js-video.tes-closedCam,
  3267. :not(.hidden) + .tes-close .js-video.tes-closedCam {}
  3268.  
  3269.  
  3270.  
  3271. @media screen and (max-width: 1400px) {
  3272. .tes-close .js-video {}
  3273.  
  3274. .tes-close.tes-camCount2 .js-video {}
  3275. .tes-close.tes-camCount10-11 .js-video {}
  3276. .tes-close.tes-camCount12 .js-video {}
  3277.  
  3278.  
  3279. /*---------CLOSED ITEM--BIG SCREEN------*/
  3280. .tes-close .js-video.tes-closedCam,
  3281. :not(.hidden) + .tes-close .js-video.tes-closedCam {}
  3282. }
  3283. `;
  3284.  
  3285. camCloseButtonHtml = `
  3286. <button class="icon-tes-close" id="closebutton-camName" style="">
  3287. <svg width="20" height="14" viewBox="0 0 20 14" xmlns="http://www.w3.org/2000/svg">
  3288. <path d="M3.63 12.024C1.474 10.5.52 8.65.52 8.65c-.657-.9-.68-2.417-.128-3.362C.392 5.288 2.452 0 10 0c1.94 0 3.52.35 4.79.867l.594-.592a.945.945 0 0 1 1.34.006.953.953
  3289. 0 0 1 .004 1.34L4.616 13.724a.945.945 0 0 1-1.34-.006.953.953 0 0 1-.004-1.34l.357-.356zm9.598-9.594c-.942-.28-2.013-.43-3.23-.43-2.797
  3290. 0-4.83.803-6.288 2.125-.496.45-.888.928-1.183 1.4-.163.26-.25.436-.27.49L2.2 6.16l-.08.137c-.17.29-.15.946.017 1.176l.09.123.07.136c.042.08.168.29.378.58A9.167
  3291. 9.167 0 0 0 4.058 9.82c.32.28.656.535 1.01.766l8.16-8.156zm-6.08 11.222l1.713-1.714c.368.04.747.062 1.14.062 2.423 0 4.374-.814 5.942-2.185a9.2 9.2
  3292. 0 0 0 1.386-1.51c.212-.293.338-.5.38-.583l.057-.108.07-.1c.19-.282.217-.94.07-1.17L17.8 6.18l-.072-.184a3.74 3.74 0 0 0-.268-.485 6.577 6.577
  3293. 0 0 0-.972-1.2l1.415-1.414c1.244 1.225 1.69 2.374 1.69 2.374.6.94.512 2.465-.107 3.37 0 0-2.774 5.36-9.487 5.36-1.046 0-1.995-.13-2.853-.348z" fill-rule="evenodd"></path>
  3294. </svg>
  3295. </button>
  3296. `;
  3297. }catch(e){tcl("error declareGlobalVars: " + e.message);}
  3298. }
  3299.  
  3300. function injectCSS(cssName=null) {
  3301. try{
  3302. // Indenting is purposely wrong, for readability
  3303. var insertPosition = "beforeend";
  3304. headElem = document.querySelector("head");
  3305. browserSpoofedChrome = (headElem.innerHTML.includes("Shady DOM styles for") ? true : false);
  3306. if (browserSpoofedChrome) tcl("browserSpoofedChrome");
  3307. var firefoxCSS = "";
  3308.  
  3309. { // titleCSS
  3310. if (browserFirefox) var firefoxCSS = `
  3311. #tes-settings-nightmode .nightmode-colors:after { display: none; }
  3312. #tes-settings-nightmode .nightmode-colors {
  3313.  
  3314. }
  3315. #tes-settings-nightmode > span {
  3316. position: relative;
  3317. top: -4px;
  3318. }
  3319. #tes-settings-nightmode .label { margin-right: 3px; }
  3320. #tes-settings-nightmode .sublabel {
  3321. margin-left: unset;
  3322. position: relative;
  3323. top: -2px;
  3324. }
  3325. #tes-settings-nightmode .colorCont {
  3326. position: relative;
  3327. top: -2px;
  3328. }
  3329. `;
  3330.  
  3331. titleCSShtml = `
  3332. <style id="titleCSS" scope="tinychat-title">` + globalCSS + `
  3333.  
  3334. #tes-ColorChoice {
  3335. position:absolute;
  3336. top:10px;
  3337. background-color:#00ff00;}
  3338.  
  3339. .foo {
  3340. float: left;
  3341. width: 90px;
  3342. height: 13px;
  3343. margin-left: 25px;
  3344. border: 1px solid rgba(0, 0, 0, .2);
  3345. border-radius: 0px;
  3346. text-align: center;
  3347. font-weight: bold;}
  3348.  
  3349. .foo2 {
  3350. float: left;
  3351. width: 25px;
  3352. height: 15px;
  3353. border-top-right-radius: 100px;
  3354. border-bottom-right-radius: 100px;
  3355. text-align: center;
  3356. font-weight: bold;
  3357. border: 0PX SOLID #313131;}
  3358.  
  3359. .foo3 {
  3360. float: left;
  3361. width: 65px;
  3362. height: 50px;
  3363. /* border: 1px solid rgba(0, 0, 0, .2); */
  3364. border-radius: 3px;
  3365. text-align: center;
  3366. font-weight: bold;
  3367. border: 1px solid #C1C1C1;
  3368. margin-left: 5px;}
  3369.  
  3370. .pick {font-size: 11px;
  3371. position: relative;
  3372. top: 2px;
  3373. left: 20px;
  3374. float: left;
  3375. color: #313131;}
  3376.  
  3377.  
  3378. .pink {background: #ffadc1;
  3379. color: #952c46;}
  3380. .green {background: #00500d;
  3381. color: #952c46;}
  3382. .blue {background: #2a388b;
  3383. color: #952c46;}
  3384. .purple {background: #BF8FE5;
  3385. color: #952c46;}
  3386. .darkpurple {background: #550098;
  3387. color: #952c46;}
  3388. .orange {background: #ff4f00;
  3389. color: #952c46;}
  3390. .red {background: #860000;
  3391. color: #952c46;}
  3392. .white {background: #ffffff;
  3393. color: #952c46;}
  3394. .featureone {
  3395. color: #952c46;}
  3396. .featuretwo {
  3397. color: #952c46;}
  3398. .featurethree {
  3399. color: #952c46;}
  3400. .default {background: #191919;
  3401. }
  3402.  
  3403. .feature1 {
  3404. width: 30px !important;
  3405. height: 33px !important;
  3406. }
  3407.  
  3408. .feature1:hover {
  3409. background-color:#00ff00;
  3410. width: 30px !important;
  3411. height: 33px !important;
  3412. }
  3413. .featureone {
  3414. background-image: url(https://i.ibb.co/0Dp3Knx/weed-logo2.png);
  3415. background-size: 36px;
  3416. position: relative;
  3417. right: 8px;
  3418. background-position: top left;
  3419. background-repeat: no-repeat;
  3420. color: #952c46;
  3421. float: left;
  3422. width: 50px;
  3423. height: 50px;
  3424. text-align: center;}
  3425.  
  3426.  
  3427. .feature2 {
  3428. width: 30px !important;
  3429. height: 33px !important;
  3430. }
  3431.  
  3432. .feature2:hover {
  3433. background-color:#00ff00;
  3434. width: 30px !important;
  3435. height: 33px !important;
  3436. }
  3437. .featuretwo {
  3438. background-image: url(https://i.ibb.co/7KSTsdj/smash-clipart-87526.png);
  3439. background-size: 36px;
  3440. position: relative;
  3441. right: 8px;
  3442. background-position: top left;
  3443. background-repeat: no-repeat;
  3444. color: #952c46;
  3445. float: left;
  3446. width: 50px;
  3447. height: 50px;
  3448. text-align: center;}
  3449.  
  3450. .feature3 {
  3451. width: 30px !important;
  3452. height: 33px !important;
  3453. }
  3454.  
  3455. .feature3:hover {
  3456. background-color:#00ff00;
  3457. width: 30px !important;
  3458. height: 33px !important;
  3459. }
  3460. .featurethree {
  3461. background-image: var(--featurethreemode-ptt);
  3462. background-size: 36px;
  3463. position: relative;
  3464. right: 8px;
  3465. background-position: top left;
  3466. background-repeat: no-repeat;
  3467. color: #952c46;
  3468. float: left;
  3469. width: 50px;
  3470. height: 50px;
  3471. text-align: center;}
  3472.  
  3473.  
  3474. @keyframes ease-to-left {
  3475. 0% {right: -50px; opacity: 0;}
  3476. 100% {right: 0; opacity: 1;}}
  3477.  
  3478. @keyframes ease-to-right {
  3479. 0% {right:auto;}
  3480. 100% {right:0;}}
  3481.  
  3482. @keyframes ease-to-bottom-21px {
  3483. 0% {top:-300px; opacity: 0;}
  3484. 100% {top:0; opacity: 1;}}
  3485.  
  3486. #content {
  3487. padding: 0px;
  3488. background-color:#111111;}
  3489.  
  3490. #room-header-gifts-buttons > #get-coins {
  3491. background-color: #111111;
  3492. border-color: #313131;
  3493. color: #313131;}
  3494.  
  3495. #room-header-gifts-buttons > #get-coins:hover {
  3496. background-color: #313131;
  3497. border-color: #111111;
  3498. color: #111111;}
  3499.  
  3500. #room-header-gifts-buttons > a {
  3501. background-color: #111111;
  3502. border-color: #313131;
  3503. color: #313131;}
  3504.  
  3505. #room-header-gifts-buttons > a:hover {
  3506. background-color: #313131;
  3507. border-color: #111111;
  3508. color: #111111;}
  3509.  
  3510. #tes-header-grabber {
  3511. position: absolute;
  3512. top: 88px;
  3513. right: 50%;
  3514. background: white;
  3515. width: 60px;
  3516. height: 20px;
  3517. border-color: #313131;
  3518. border-top: 1px solid #313131;
  3519. border-right: 0px;
  3520. border-bottom: 0px;
  3521. border-left: 0px;
  3522. border-radius: 19px;
  3523. text-align: center;
  3524. color: #b4c1c5;
  3525. cursor: pointer;
  3526. transition: all .4s ease-in-out;
  3527. background-color:#111111;
  3528. z-index:9;}
  3529.  
  3530. #tes-fullscreen-grabber {
  3531. position: absolute;
  3532. top: 50px;
  3533. right: 18%;#room-header *
  3534. background: white;
  3535. width: 20px;
  3536. height: 20px;
  3537. border: #313131 1px solid;
  3538. border-radius: 19px;
  3539. text-align: center;
  3540. color: #b4c1c5;
  3541. cursor: pointer;
  3542. transition: all .4s ease-in-out;
  3543. background-color:#111111;}
  3544.  
  3545. #tes-header-grabber:before{ content: '';
  3546. position: absolute;
  3547. display: block;
  3548. height: 0;
  3549. width: 0;
  3550. top: 50%;
  3551. left: 50%;
  3552. margin: -7px 0 0 -2px;
  3553. border-width: 4px 4px 4px 0;
  3554. border-style: solid;
  3555. border-left: 4px solid transparent;
  3556. border-right: 4px solid transparent;
  3557. border-top: 4px solid transparent;
  3558. transition: .8s;}
  3559.  
  3560. .tes-headerCollapsed #tes-header-grabber:before {
  3561. transform: rotate(180deg);
  3562. -webkit-transform: rotate(180deg);
  3563. top: 12px;}
  3564.  
  3565. .tes-headerCollapsed #tes-header-grabber {
  3566. top: 0px;
  3567. background: #111111;
  3568. border-top: 0;
  3569. z-index: 9;
  3570. border-radius: 11px;
  3571. line-height: 15px;
  3572. border-top-left-radius: 0;
  3573. border-top-right-radius: 0;
  3574. height: 15px;}
  3575.  
  3576. .tes-headerCollapsed:hover #tes-header-grabber {
  3577. height: 29px;
  3578. line-height: 43px;}
  3579.  
  3580. .tes-nightmode #tes-settings > div#tes-updateNotifier {
  3581. border-color: #5d7883;}
  3582.  
  3583. .tes-nightmode #tes-settings > div#tes-updateNotifier {
  3584. background-color: transparent;
  3585. border-color: #145876;
  3586. color:#191919;
  3587. top: -100px;}
  3588.  
  3589. -------
  3590.  
  3591. #tes-settings > div#tes-updateNotifier {
  3592. top: -200px;
  3593. margin-right: -33px;
  3594. float: left;
  3595. border: #53b6ef 1px solid;
  3596. border-radius: 8px 0 0px 8px;
  3597. padding: 5px;
  3598. padding-right: 32px;
  3599. height: auto;
  3600. transition: visibility 0s, opacity 0.5s linear;
  3601. background: white;}
  3602.  
  3603. #tes-settings.tes-open > div#tes-updateNotifier {
  3604. visibility: hidden;
  3605. opacity: 0;
  3606. width: 0;
  3607. height: 0;
  3608. padding: 0;}
  3609.  
  3610. #tes-settings > div#tes-updateNotifier:hover {
  3611. cursor: pointer;}
  3612.  
  3613. .tes-exitButtonSmall {
  3614. float: left;
  3615. padding-right: 37px;
  3616. /* margin: 0px; */
  3617. color: #191919;
  3618. padding-left: 5px;
  3619. padding-top: 9px;
  3620. padding-bottom: 7px;
  3621. background-color: cyan;
  3622. border-radius: 50px;
  3623. height: 20px;
  3624. margin-right: 7px;
  3625. position: relative;
  3626. top: -36px;
  3627. right: -82px;
  3628. font-size: 12pt;
  3629. font-weight: bold;}
  3630.  
  3631. #tes-settings > div#tes-updateNotifier.visible {
  3632. top: 38px;
  3633. color: #ffffff !important;
  3634. text-transform: uppercase;
  3635. background-color: transparent;
  3636. border-color:cyan;
  3637. padding: 5px;
  3638. padding-top: 10px;
  3639. padding-right: 40px;
  3640. padding-bottom: 10px;
  3641. border-radius: 20px;}
  3642.  
  3643. .tes-exitButtonSmall:hover {
  3644. color: #7ccefe;
  3645. background-color: #2b2b2b;
  3646. border-radius: 50px;
  3647. border:1px solid cyan;
  3648. height: 20px;
  3649. padding-bottom: 5px;}
  3650.  
  3651.  
  3652. ------
  3653.  
  3654. input {
  3655. border: 1px solid #c4d4dc;
  3656. line-height: 16px;
  3657. padding-left: 3px;}
  3658.  
  3659. .label ~ input {
  3660. border-bottom-left-radius: 6px;
  3661. border-top-left-radius: 6px;}
  3662.  
  3663. input ~ button {
  3664. border-bottom-right-radius: 6px;
  3665. border-top-right-radius: 6px;}
  3666.  
  3667. input[type="button"], button {
  3668. display: inline;
  3669. padding: 0 15px;
  3670. border: 0;
  3671. box-sizing: border-box;
  3672. letter-spacing: 1px;
  3673. font-size: 12px;
  3674. font-weight: bold;
  3675. line-height: 20px;
  3676. text-align: center;
  3677. transition: .2s;
  3678. outline: none;}
  3679.  
  3680. .blue-button {
  3681. color: #fff;
  3682. background-color: #333333;}
  3683.  
  3684. .blue-button:hover {
  3685. background-color: #54ccf3;}
  3686.  
  3687. .blue-button:active {
  3688. background-color: #38a8dd;}
  3689.  
  3690. .tes-setting-container {
  3691. line-height: initial;}
  3692.  
  3693. #tes-settings > div {
  3694. animation: ease-to-bottom-21px .2s ease 0s 1;
  3695. position: relative;
  3696. top: 0px;
  3697. }
  3698.  
  3699. #tes-settings > div > span {
  3700. position: relative;
  3701. top: -23px;
  3702. background-color: #111111;
  3703. border: 1px solid #313131;
  3704. border-radius: 100px;
  3705. padding-left: 5px;
  3706. padding-right: 5px;}
  3707.  
  3708.  
  3709. @media screen and (max-width: 1000px) {
  3710. #tes-settings > div {
  3711. height: 92px;}
  3712. }
  3713.  
  3714. #tes-settings .hidden {
  3715. display: none;}
  3716.  
  3717. #tes-themes .hidden {
  3718. display: none;}
  3719.  
  3720. #tes-games .hidden {
  3721. display: none;}
  3722.  
  3723. #tes-emojis .hidden {
  3724. display: none;}
  3725.  
  3726. #tes-hiding .hidden {
  3727. display: none;}
  3728.  
  3729. #tes-settings #title {
  3730. font-weight: bold;
  3731. color:#ffffff;
  3732. text-transform:uppercase;}
  3733.  
  3734. .tes-whitemode #tes-settings #title {
  3735. font-weight: bold;
  3736. color:#000000;
  3737. text-transform:uppercase;}
  3738.  
  3739.  
  3740. #tes-settings {
  3741. width: 390px;
  3742. transition: all .4s ease-in-out;
  3743. animation: ease-to-bottom-21px .2s ease 0s 1;
  3744. /*max-height: 10%;*/
  3745. font-size: 11px;
  3746. flex: none;
  3747. overflow: hidden;
  3748. z-index: 9;
  3749. position: absolute;
  3750. top: 0px;
  3751. /* right: ` + (giftsElemWidth + 10).toString() + `px; */}
  3752.  
  3753.  
  3754.  
  3755. #tes-themes.tes-sidemenuCollapsed {position:absolute;left:0px !important;}
  3756. #tes-themes {
  3757. width: 25px;
  3758. /* transition: all .4s ease-in-out;*/
  3759. /* animation: ease-to-bottom-21px .2s ease 0s 1;*/
  3760. /*max-height: 10%;*/
  3761. font-size: 11px;
  3762. flex: none;
  3763. z-index: 9;
  3764. position: absolute;
  3765. top: 5px;
  3766. left:161px;}
  3767.  
  3768.  
  3769. #tes-themesGear > div {
  3770. background-color: #111111;
  3771. border:1px solid #313131;
  3772. height: 25px;
  3773. border-bottom-right-radius:20px;
  3774. border-top-right-radius:20px;
  3775. border-left:0px;
  3776. text-align: center;
  3777. font-weight: bold;
  3778. color: #C1C1C1;
  3779. line-height: 20px;
  3780. font-size: 13px;}
  3781.  
  3782. /*
  3783.  
  3784. #tes-themesGear > div:hover{
  3785. background-color: #04caff;
  3786. height: 25px;
  3787. border-bottom-right-radius:20px;
  3788. border-top-right-radius:20px;
  3789. cursor:pointer;
  3790. text-align: center;
  3791. color:#fff;}*/
  3792.  
  3793. #tes-themesButton > span > img:hover{
  3794. -webkit-animation-name: rotate;
  3795. -webkit-animation-duration: 2s;
  3796. -webkit-animation-iteration-count: infinite;
  3797. -webkit-animation-timing-function: linear;
  3798. -moz-animation-name: rotate;
  3799. -moz-animation-duration: 2s;
  3800. -moz-animation-iteration-count: infinite;
  3801. -moz-animation-timing-function: linear;
  3802. animation-name: rotate;
  3803. animation-duration: 2s;
  3804. animation-iteration-count: infinite;
  3805. animation-timing-function: linear;
  3806. }
  3807. @-webkit-keyframes rotate {
  3808. from {-webkit-transform: rotate(0deg);}
  3809. to {-webkit-transform: rotate(360deg);}
  3810. }
  3811.  
  3812. @-moz-keyframes rotate {
  3813. from {-moz-transform: rotate(0deg);}
  3814. to {-moz-transform: rotate(360deg);}
  3815. }
  3816.  
  3817. @keyframes rotate {
  3818. from {transform: rotate(0deg);}
  3819. to {transform: rotate(360deg);}
  3820. }
  3821.  
  3822.  
  3823. #tes-hiding {
  3824. width: 53px;
  3825. font-size: 11px;
  3826. flex: none;
  3827. z-index: 9;
  3828. position: absolute;
  3829. top: 199px;
  3830. right: 0px;}
  3831.  
  3832. #tes-hidingGear > div {
  3833. background-color: #111111;
  3834. background-image: url(https://i.ibb.co/FXrx1X9/Video-Game-Controller-Icon-IDV-edit-green-svg.png);
  3835. background-position: top center;
  3836. background-position-y: -6px;
  3837. background-size: 27px;
  3838. background-repeat: no-repeat;
  3839. border: 1px solid #313131;
  3840. height: 24px;
  3841. border-bottom-left-radius: 15px;
  3842. border-bottom-right-radius: 15px;
  3843. /* border-left: 0px; */
  3844. text-align: center;
  3845. font-weight: bold;
  3846. color: #C1C1C1;
  3847. line-height: 20px;
  3848. font-size: 13px;;}
  3849.  
  3850. #tes-hidingGear > div:hover {
  3851. background-color: #04caff;
  3852. height: 20px;
  3853. cursor:pointer;
  3854. text-align: center;
  3855. color:#fff;}
  3856.  
  3857. #tes-games {display:none;
  3858. width: 33px;
  3859. font-size: 11px;
  3860. flex: none;
  3861. z-index: 9;
  3862. position: absolute;
  3863. top: 99px;
  3864. right: 0px;}
  3865.  
  3866. #tes-emojis {
  3867. width: 33px;
  3868. font-size: 11px;
  3869. flex: none;
  3870. z-index: 9;
  3871. position: absolute;
  3872. bottom: 35px;
  3873. right: 335px;}
  3874.  
  3875. .tes-headerCollapsed #tes-games {
  3876. top:-1px;
  3877. right:36px;
  3878. z-index:10;
  3879. }
  3880.  
  3881.  
  3882. #tes-gamesGear > div {
  3883. background-color: #111111;
  3884. background-image: url(https://i.ibb.co/FXrx1X9/Video-Game-Controller-Icon-IDV-edit-green-svg.png);
  3885. background-position: top center;
  3886. background-position-y: -6px;
  3887. background-size: 27px;
  3888. background-repeat: no-repeat;
  3889. border: 1px solid #313131;
  3890. height: 24px;
  3891. border-bottom-left-radius: 15px;
  3892. border-bottom-right-radius: 15px;
  3893. /* border-left: 0px; */
  3894. text-align: center;
  3895. font-weight: bold;
  3896. color: #C1C1C1;
  3897. line-height: 20px;
  3898. font-size: 13px;;}
  3899.  
  3900. #tes-gamesGear > div:hover {
  3901. background-color: #04caff;
  3902. height: 20px;
  3903. cursor:pointer;
  3904. text-align: center;
  3905. color:#fff;}
  3906.  
  3907.  
  3908. #tes-emojisGear > div {
  3909. background-color: #111111;
  3910. background-image: url(https://cdn.glitch.com/e82ef8ae-b7d2-4511-8d06-23bc75bc02eb%2FEmoji-BG.jpg?v=1561428846260);
  3911. background-position: left center;
  3912. background-position-x: -18px;
  3913. background-position-y: -6px;
  3914. background-size: 266px;
  3915. background-repeat: no-repeat;
  3916. border: 1px solid #313131;
  3917. height: 20px;
  3918. width: 20px;
  3919. border-radius: 53px;
  3920. /* border-left: 0px; */
  3921. text-align: center;
  3922. font-weight: bold;
  3923. color: #C1C1C1;
  3924. line-height: 20px;
  3925. font-size: 13px;}
  3926.  
  3927. #tes-emojisGear > div:hover {
  3928. background-color: #04caff;
  3929. height: 20px;
  3930. cursor:pointer;
  3931. text-align: center;
  3932. color:#fff;}
  3933.  
  3934.  
  3935. #tes-colors {
  3936. width: 70px;
  3937. height: 300px;
  3938. transition: all .4s ease-in-out;
  3939. animation: ease-to-bottom-21px .2s ease 0s 1;
  3940. /*max-height: 10%;*/
  3941. font-size: 11px;
  3942. flex: none;
  3943. overflow: hidden;
  3944. z-index: 8;
  3945. position: absolute;
  3946. top: 26px;
  3947. left:1px;
  3948.  
  3949. /*background-color: #111111;*/
  3950. border-top-right-radius: 5px;
  3951. border-bottom-right-radius: 5px;
  3952. /*border: 1px solid #313131;*/
  3953.  
  3954. /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
  3955. }
  3956.  
  3957. #tes-gameslist {
  3958. width: 350px;
  3959. height: 620px;
  3960. transition: all .4s ease-in-out;
  3961. animation: ease-to-bottom-21px .2s ease 0s 1;
  3962. /* max-height: 10%; */
  3963. font-size: 11px;
  3964. flex: none;
  3965. overflow: hidden;
  3966. z-index: 8;
  3967. position: absolute;
  3968. top: 24px;
  3969. right: 5px;resize:vertical;
  3970. background-color: #191919;
  3971. border: 2px solid #c1c1c17d;
  3972. border-radius: 10px;
  3973. background-position: center center;
  3974. background-image: url(https://anceldesigns.000webhostapp.com/img/arcade2.jpg);}
  3975. .footer_wrapper {background-color:#fff;}
  3976. #tes-gameslist > iframe {
  3977. height:600px;
  3978. width:350px;}
  3979.  
  3980. @media screen and (max-width: 1000px) {
  3981. #tes-settings {
  3982. right: 37px!important;
  3983. top: -20px;}
  3984.  
  3985. #tes-settings.tes-open {
  3986. top: 6px;}
  3987.  
  3988. #tes-settingsGear {
  3989. font-size: 52px!important;}
  3990.  
  3991. #room-header-gifts-items {
  3992. padding: 0 11px;
  3993. border-radius: 12px;
  3994. background-color: #2a2a2a;
  3995. font-size: 0;
  3996. text-align: center;
  3997. white-space: nowrap;}
  3998. }
  3999.  
  4000. @media screen and (max-width: 600px) {
  4001. #tes-settings {
  4002. right: -4px!important;
  4003. top: 19px;}
  4004. }
  4005.  
  4006. #tes-settings:hover {
  4007. overflow: visible;}
  4008.  
  4009. #tes-settings-mentions .inputcontainer {
  4010. float: right;
  4011. position: relative;
  4012. top: -3px;}
  4013.  
  4014. #tes-settingsGear {
  4015. font-size: 40px;
  4016. color: #53b6ef;
  4017. float: right;}
  4018.  
  4019. #tes-settingsGear:hover {
  4020. cursor: pointer;
  4021. color: #7ccefe;}
  4022.  
  4023. .tes-open #tes-settingsGear {
  4024. background: none;
  4025. border-bottom-right-radius: 15px;
  4026. border-top-right-radius: 15px;
  4027. border: #53b6ef 0px solid;
  4028. border-left: 0;
  4029. top: -30px;
  4030. }
  4031.  
  4032. .tes-open #tes-settingsGear span img{
  4033. fill: red;}
  4034. /*transition: all .2s linear;*/}
  4035.  
  4036. #tes-settingsGear span {
  4037. display: block;
  4038. transition: transform 0.4s ease-in-out;}
  4039.  
  4040. #tes-settingsBox.hidden {
  4041. animation: ease-to-right .2s ease 0s 1;
  4042. display: visible;
  4043. /*position: relative; right: -1000px;*/}
  4044.  
  4045. /*** Inline with header ***/
  4046.  
  4047. #tes-settingsBox {
  4048. border-bottom-left-radius: 15px;
  4049. border-top-left-radius: 15px;}
  4050.  
  4051. #tes-settingsBox {
  4052. background: #191919;
  4053. padding: 0px 10px 0px 10px;
  4054. float: left;
  4055. border: #313131 1px solid;
  4056. border-top-left-radius: 12px;
  4057. border-bottom-left-radius: 12px;
  4058. border-bottom-right-radius: 12px;
  4059. border-top-right-radius: 12px;
  4060. animation: ease-to-left .2s ease 0s 1;
  4061. right: 0;}
  4062.  
  4063. #tes-settingsGear {
  4064. display: table;}
  4065.  
  4066. #tes-settingsGear span {
  4067. display: table-cell;
  4068. vertical-align: middle;}
  4069. ------
  4070.  
  4071. /*** ******RIGHT SIDE******* ***/
  4072.  
  4073. #tes-settings .right {
  4074. position: absolute;
  4075. left: 189px;}
  4076.  
  4077. #tes-settings .right .label {
  4078. margin-left: 22px;}
  4079.  
  4080. #tes-settings .right .head {
  4081. position: relative;
  4082. top: -10px;
  4083. left: -6px;
  4084. width: 110%;
  4085. color: #000;
  4086. background-color: #fff;
  4087. border-top-left-radius: 10px;
  4088. border-top-right-radius: 10px;
  4089. text-transform: uppercase;
  4090. text-align: center;
  4091. font-weight: bold;}
  4092.  
  4093. #tes-settings-maxcamposition { top: 54px; }
  4094. #tes-settings-borderlesscams { top: 67px; }
  4095. #tes-settings-miniyt {
  4096. top: 100px;
  4097. left: 162px;
  4098. z-index: 2;
  4099. background-color: #000000;
  4100. width: 25px;height:25px;
  4101. color: #fff;
  4102. border-bottom-right-radius: 10px;}
  4103. #tes-settings-miniyt > span > img {position: relative;
  4104. top: 9px;
  4105. left: -6px;}
  4106. .tes-headerCollapsed #tes-settings-miniyt {
  4107. top:-1px;
  4108. right:36px;
  4109. left: 210px;border-bottom-left-radius:10px}
  4110. .tes-sidemenuCollapsed #tes-settings-miniyt {
  4111. top:-1px;
  4112. right:36px;
  4113. left: 0px;}
  4114.  
  4115. .tes-sidemenuCollapsed.tes-headerCollapsed #tes-settings-miniyt {
  4116. left: 33px;}
  4117.  
  4118.  
  4119. /***------------------------------------FEATURETWOOO------------------------------------***/
  4120. #tes-settings-pinkmode {
  4121. top: 4px !important;
  4122. position: relative;}
  4123.  
  4124. /***------------------------------------GREEBNNN------------------------------------***/
  4125. #tes-settings-greenmode {
  4126. position:absolute;
  4127. top: 22px !important;}
  4128.  
  4129. /***------------------------------------BLUEEE------------------------------------***/
  4130. #tes-settings-bluemode {
  4131. position:absolute;
  4132. top: 39px !important;}
  4133.  
  4134. /***------------------------------------PURPLEEE------------------------------------***/
  4135. #tes-settings-purplemode {
  4136. position:absolute;
  4137. top: 56px !important;}
  4138.  
  4139. /***------------------------------------ORANGEEE------------------------------------***/
  4140. #tes-settings-orangemode {
  4141. position:absolute;
  4142. top: 73px !important;}
  4143.  
  4144. /***------------------------------------REDDD------------------------------------***/
  4145. #tes-settings-redmode {
  4146. position:absolute;
  4147. top: 90px !important;}
  4148.  
  4149. /***------------------------------------DARKPURPLEEE------------------------------------***/
  4150. #tes-settings-darkpurplemode {
  4151. position:absolute;
  4152. top: 107px !important;}
  4153.  
  4154. /***------------------------------------DEFAULTTTT------------------------------------***/
  4155. #tes-settings-defaultmode {
  4156. position:absolute;
  4157. top: 123px !important;}
  4158.  
  4159. /***------------------------------------WHITEEE------------------------------------***/
  4160. #tes-settings-whitemode {
  4161. position:absolute;
  4162. top: 140px !important;}
  4163.  
  4164. /***------------------------------------FEATUREONEEE------------------------------------***/
  4165. #tes-settings-featureonemode {
  4166. position:absolute;
  4167. top: 157px !important;}
  4168.  
  4169. /***------------------------------------FEATURETWOOO------------------------------------***/
  4170. #tes-settings-featuretwomode {
  4171. position:absolute;
  4172. top: 194px !important;}
  4173. /***------------------------------------FEATURETHREEE------------------------------------***/
  4174. #tes-settings-featurethreemode {
  4175. position:absolute;
  4176. top: 231px !important;}
  4177.  
  4178. .tes-featurethreemode #tes-themes {background-color:transparent}
  4179.  
  4180.  
  4181.  
  4182. #tes-settings-featuredmode {
  4183. position:absolute;
  4184. left: 0px !important;
  4185. top:30px !important;
  4186. background-color: #04caff;
  4187. width: 100%;
  4188. text-align: center;
  4189. font-weight:bold;}
  4190.  
  4191. /* The container */
  4192. .tes-color-container {
  4193. display: block;
  4194. position: relative;
  4195. cursor: pointer;
  4196. font-size: 22px;
  4197. -webkit-user-select: none;
  4198. -moz-user-select: none;
  4199. -ms-user-select: none;
  4200. user-select: none;}
  4201.  
  4202. /* Hide the browser's default checkbox */
  4203. #tes-settings-defaultmode > label > input[type="checkbox"],
  4204. #tes-settings-pinkmode > label > input[type="checkbox"],
  4205. #tes-settings-greenmode > label > input[type="checkbox"],
  4206. #tes-settings-bluemode > label > input[type="checkbox"],
  4207. #tes-settings-orangemode > label > input[type="checkbox"],
  4208. #tes-settings-redmode > label > input[type="checkbox"],
  4209. #tes-settings-featureonemode > label > input[type="checkbox"],
  4210. #tes-settings-featuretwomode > label > input[type="checkbox"],
  4211. #tes-settings-darkpurplemode > label > input[type="checkbox"],
  4212. #tes-settings-purplemode > label > input[type="checkbox"],
  4213. #tes-settings-whitemode > label > input[type="checkbox"],
  4214. #tes-settings-featurethreemode > label > input[type="checkbox"] {
  4215. position: absolute;
  4216. opacity: 0;
  4217. cursor: pointer;}
  4218.  
  4219. /* Create a custom checkbox */
  4220. .checkmark {
  4221. position: absolute;
  4222. top: 0;
  4223. left: 0;
  4224. height: 14px;
  4225. width: 15px;
  4226. background-color: transparent;
  4227. border-radius:3px;}
  4228. .checkmark .feature1:hover {background-color:#00ff00;}
  4229.  
  4230.  
  4231. /* On mouse-over, add a grey background color */
  4232. .tes-color-container:hover input ~ .checkmark {
  4233. background-color: transparent;
  4234. border:1px solid #FFFFFF;
  4235. border-top-right-radius: 100px;
  4236. border-bottom-right-radius: 100px;
  4237. border-left:0px;
  4238. width:25px;
  4239. }
  4240. .feature .tes-color-container:hover input ~ .checkmark {
  4241. background-color: transparent;
  4242. border:1px solid #00ff00;
  4243. border-top-right-radius: 100px;
  4244. border-bottom-right-radius: 100px;
  4245. border-left:0px;
  4246. width:20px;
  4247. }
  4248.  
  4249. /* When the checkbox is checked, add a blue background */
  4250. .tes-color-container input:checked ~ .checkmark {
  4251. background-color: transparent;
  4252. border: 0px solid #FFFFFF;
  4253. border-top-right-radius: 100px;
  4254. border-bottom-right-radius: 100px;
  4255. border-left: 0px;
  4256. width:25px;}
  4257.  
  4258. /* Create the checkmark/indicator (hidden when not checked) */
  4259. .checkmark:after {
  4260. content: "";
  4261. position: absolute;
  4262. display: none;}
  4263.  
  4264. /* Show the checkmark when checked */
  4265. .tes-color-container input:checked ~ .checkmark:after {
  4266. display: block;}
  4267.  
  4268. /* Style the checkmark/indicator */
  4269. #tes-settings-defaultmode > label > span.checkmark:after,
  4270. #tes-settings-purplemode > label > span.checkmark:after,
  4271. #tes-settings-darkpurplemode > label > span.checkmark:after,
  4272. #tes-settings-bluemode > label > span.checkmark:after,
  4273. #tes-settings-greenmode > label > span.checkmark:after,
  4274. #tes-settings-orangemode > label > span.checkmark:after,
  4275. #tes-settings-redmode > label > span.checkmark:after,
  4276. #tes-settings-featuretwomode > label > span.checkmark:after,
  4277. #tes-settings-pinkmode > label > span.checkmark:after,
  4278. #tes-settings-whitemode > label > span.checkmark:after,
  4279. #tes-settings-featurethreemode > label > span.checkmark:after {
  4280. left: 8px;
  4281. top: 1px;
  4282. width: 3px;
  4283. height: 8px;
  4284. border: solid #ffffff;
  4285. border-width: 0 3px 3px 0;
  4286. -webkit-transform: rotate(45deg);
  4287. -ms-transform: rotate(45deg);
  4288. transform: rotate(45deg);}
  4289.  
  4290. #tes-settings-featureonemode > label > span.checkmark:after {
  4291. left: 44px;
  4292. top: -5px;
  4293. width: 3px;
  4294. height: 8px;
  4295. border: solid #ffffff;
  4296. border-width: 0 3px 3px 0;
  4297. -webkit-transform: rotate(45deg);
  4298. -ms-transform: rotate(45deg);
  4299. transform: rotate(45deg);}
  4300.  
  4301. label {
  4302. border:0px solid #ccc;
  4303. padding:0px;
  4304. display:block;}
  4305.  
  4306. label:hover {
  4307. background:#53b6ef;
  4308. border-radius:5px;
  4309. cursor:pointer;}
  4310.  
  4311. #modes {
  4312. padding: 5px;
  4313. background-color: #111111;
  4314. border: #ffffff 1px solid;
  4315. border-radius: 10px;
  4316. box-shadow: 0 4px 8px 0 rgba(255,255,255,0.27), 0 6px 20px 0 rgba(255,255,255,0.27);}
  4317.  
  4318. .tes-pinkmode #modes {
  4319. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
  4320.  
  4321. .tes-greenmode #modes {
  4322. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
  4323.  
  4324. .tes-bluemode #modes {
  4325. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
  4326.  
  4327. #tes-settings .tes-setting-container input[type=checkbox] {
  4328. margin: 0;
  4329. margin-right: 1px;
  4330. float: left;
  4331. position: absolute;
  4332. left: 8px;}
  4333.  
  4334. #tes-settings .label{
  4335. margin-right: 4px;
  4336. margin-left: 12px;
  4337. color:#ffffff;
  4338. position: relative;
  4339. top: -2px;}
  4340.  
  4341. .tes-whitemode #tes-settings .label{
  4342. color:#000000;
  4343. }
  4344.  
  4345. #tes-settings .info{
  4346. margin-left: 3px;
  4347. color: #0d94e3;
  4348. font-weight: bold;
  4349. font-family: Arial;
  4350. border: #0d94e3 1px solid;
  4351. border-radius: 16px;
  4352. height: 1em;
  4353. width: 1em;
  4354. text-align: center;
  4355. display: inline-block;}
  4356.  
  4357. #tes-settings .info:hover:after{
  4358. font-weight: normal;
  4359. padding: 4px 7px 4px 7px;
  4360. border-radius: 7px;
  4361. color: white;
  4362. background: #61787f;
  4363. content: attr(data-title);
  4364. display: inline-block;
  4365. position: absolute;
  4366. top: 52px;
  4367. left: 0;
  4368. z-index: 9;}
  4369.  
  4370. /*#tes-settings .label:hover:before{
  4371. border: solid;
  4372. border-color: #61787f transparent;
  4373. border-width: 0px 6px 6px 6px;
  4374. top: 10px;
  4375. content: "";
  4376. left: 8%;
  4377. position: relative;
  4378. display: inline-block;}*/
  4379.  
  4380. #tes-settings a:visited, #tes-settings a:link {
  4381. text-decoration: none;
  4382. color: inherit;}
  4383.  
  4384. #tes-settings a:hover {
  4385. color: #53b6ef;}
  4386.  
  4387. #room-header {
  4388. z-index:9;
  4389. height: 100px;
  4390. max-height: unset;
  4391. min-height: unset;
  4392. transition: all .4s ease-in-out;
  4393. background-color:#191919;
  4394. border-bottom: 1px solid #313131;}
  4395.  
  4396. #room-header-gifts-items {
  4397. padding: 0 11px;
  4398. border-radius: 12px;
  4399. background-color: transparent;
  4400. font-size: 0;
  4401. text-align: center;
  4402. white-space: nowrap;}
  4403.  
  4404. #room-header-gifts-items > a > img {
  4405. height: 75%;
  4406. width: 75%;
  4407. border-radius: 50px;
  4408. border: 4px solid #313131;}
  4409.  
  4410. #room-header.tes-headerCollapsed {
  4411. height: 0px;
  4412. margin-top: -10px;}
  4413.  
  4414. .tes-featurethreemode #room-header.tes-headerCollapsed {
  4415. height: 0px;
  4416. margin-top: -10px;}
  4417.  
  4418.  
  4419. #room-header.tes-headerCollapsed:hover {
  4420. /* height: 25px;*/}
  4421.  
  4422. @media screen and (max-width: 600px) {
  4423. #room-header {
  4424. min-height: inherit;
  4425. max-height: inherit;}
  4426. }
  4427.  
  4428. #room-header-info {
  4429. padding: 0;
  4430. color: #ffffff;}
  4431.  
  4432. #room-header-info > h1 {
  4433. color: #ffffff;
  4434. text-transform: uppercase;}
  4435.  
  4436. #room-header-info > h1:after {
  4437. visibility: hidden;
  4438. hidden: none;}
  4439.  
  4440. #room-header-info-text:after{
  4441. visibility: hidden;
  4442. hidden: none;}
  4443.  
  4444. #room-header-info-text {
  4445. height: auto;}
  4446.  
  4447. @media screen and (max-width: 600px) {
  4448. #room-header-info-text {
  4449. height: inherit;}
  4450. }
  4451.  
  4452. #room-header-avatar {
  4453. margin: 2px 10px 0 35px;
  4454. height: 90px;
  4455. min-width: 90px;
  4456. max-width: 90px;
  4457. transition: all .5s linear;}
  4458.  
  4459. .tes-headerCollapsed:hover #room-header-avatar:hover {
  4460. z-index: 9;}
  4461.  
  4462. #room-header-gifts {
  4463. padding: 10px 10px;}
  4464.  
  4465. #room-header-avatar:hover {
  4466. border-radius: unset;}
  4467.  
  4468. .tes-headerCollapsed #tes-settingsGear {
  4469. font-size: 33px;}
  4470.  
  4471. .tes-headerCollapsed #tes-settings > div {
  4472. height: fit-content;}
  4473.  
  4474. #room-header-avatar > img {left:-22px;}
  4475.  
  4476. .tes-headerCollapsed #tes-settingsBox {
  4477. border-width: 1px;
  4478. border-radius: 7px;
  4479. border-top-right-radius: 0;
  4480. padding-bottom: 7px;}
  4481.  
  4482. .tes-headerCollapsed #tes-settings {
  4483. top: 0px;
  4484. right: 0;}
  4485.  
  4486.  
  4487. /*** ---COLORSSSSSSS--- ***/
  4488.  
  4489.  
  4490.  
  4491. /***------------------------------------PINKKK THEMEBOX + HEADER------------------------------------***/
  4492.  
  4493. .tes-pinkmode #tes-settings > div > span {
  4494. background-color: var(--pinkmode-bgcolor);
  4495. border-color: var(--pinkmode-bordercolor);}
  4496.  
  4497. #room-header.tes-pinkmode
  4498. { background-color: var(--pinkmode-lightbgcolor);
  4499. border-color: var(--pinkmode-bordercolor);}
  4500.  
  4501. .tes-pinkmode #tes-settingsBox,
  4502. .tes-pinkmode #tes-header-grabber
  4503. { background-color: var(--pinkmode-bgcolor);
  4504. border-color: var(--pinkmode-bordercolor);}
  4505.  
  4506. .tes-pinkmode #room-header-info,
  4507. .tes-pinkmode #room-header-info > h1
  4508. { color: var(--pinkmode-bordercolor);}
  4509.  
  4510. .tes-pinkmode #room-header-gifts-buttons > a,
  4511. .tes-pinkmode #room-header-gifts-buttons > #get-coins
  4512. { background-color: var(--pinkmode-bgcolor);
  4513. border-color: var(--pinkmode-bgcolor);
  4514. color: var(--pinkmode-textcolor);}
  4515.  
  4516. .tes-pinkmode #room-header-gifts-buttons > a:hover,
  4517. .tes-pinkmode #room-header-gifts-buttons > #get-coins:hover
  4518. { background-color: var(--pinkmode-bgcolor);
  4519. border-color: var(--pinkmode-bordercolor);
  4520. color: var(--pinkmode-textcolor);}
  4521.  
  4522. .tes-pinkmode #room-header-gifts-items > a > img
  4523. { border-color: var(--pinkmode-bgcolor);}
  4524.  
  4525. .tes-pinkmode #tes-header-grabber:before
  4526. { border-color: transparent transparent var(--pinkmode-bordercolor) transparent;}
  4527.  
  4528. /***------------------------------------GREENNN THEMEBOX + HEADER------------------------------------***/
  4529.  
  4530. .tes-greenmode #tes-settings > div > span {
  4531. background-color: var(--greenmode-bgcolor);
  4532. border-color: var(--greenmode-bordercolor);}
  4533.  
  4534. #room-header.tes-greenmode
  4535. { background-color: var(--greenmode-lightbgcolor);
  4536. border-color: var(--greenmode-bordercolor);}
  4537.  
  4538. .tes-greenmode #tes-settingsBox,
  4539. .tes-greenmode #tes-header-grabber
  4540. { background-color: var(--greenmode-bgcolor);
  4541. border-color: var(--greenmode-bordercolor);}
  4542.  
  4543. .tes-greenmode #room-header-info,
  4544. .tes-greenmode #room-header-info > h1
  4545. { color: var(--greenmode-bordercolor);}
  4546.  
  4547. .tes-greenmode #room-header-gifts-buttons > a,
  4548. .tes-greenmode #room-header-gifts-buttons > #get-coins
  4549. { background-color: var(--greenmode-bgcolor);
  4550. border-color: var(--greenmode-bgcolor);
  4551. color: var(--greenmode-bordercolor);}
  4552.  
  4553. .tes-greenmode #room-header-gifts-buttons > a:hover,
  4554. .tes-greenmode #room-header-gifts-buttons > #get-coins:hover
  4555. { background-color: var(--greenmode-bgcolor);
  4556. border-color: var(--greenmode-bordercolor);
  4557. color: var(--greenmode-bordercolor);}
  4558.  
  4559. .tes-greenmode #room-header-gifts-items > a > img
  4560. { border-color: var(--greenmode-bgcolor);}
  4561.  
  4562. .tes-greenmode #tes-header-grabber:before
  4563. { border-color: transparent transparent var(--greenmode-bordercolor) transparent;}
  4564.  
  4565. /***------------------------------------BLUEEE THEMEBOX + HEADER------------------------------------***/
  4566.  
  4567. .tes-bluemode #tes-settings > div > span {
  4568. background-color: var(--bluemode-bgcolor);
  4569. border-color: var(--bluemode-bordercolor);}
  4570.  
  4571. #room-header.tes-bluemode
  4572. { background-color: var(--bluemode-lightbgcolor);
  4573. border-color: var(--bluemode-bordercolor);}
  4574.  
  4575. .tes-bluemode #tes-settingsBox,
  4576. .tes-bluemode #tes-header-grabber
  4577. { background-color: var(--bluemode-bgcolor);
  4578. border-color: var(--bluemode-bordercolor);}
  4579.  
  4580. .tes-bluemode #room-header-info,
  4581. .tes-bluemode #room-header-info > h1
  4582. { color: var(--bluemode-bordercolor);}
  4583.  
  4584. .tes-bluemode #room-header-gifts-buttons > a,
  4585. .tes-bluemode #room-header-gifts-buttons > #get-coins
  4586. { background-color: var(--bluemode-bgcolor);
  4587. border-color: var(--bluemode-bgcolor);
  4588. color: var(--bluemode-bordercolor);}
  4589.  
  4590. .tes-bluemode #room-header-gifts-buttons > a:hover,
  4591. .tes-bluemode #room-header-gifts-buttons > #get-coins:hover
  4592. { background-color: var(--bluemode-bgcolor);
  4593. border-color: var(--bluemode-bordercolor);
  4594. color: var(--bluemode-bordercolor);}
  4595.  
  4596. .tes-bluemode #room-header-gifts-items > a > img
  4597. { border-color: var(--bluemode-bgcolor);}
  4598.  
  4599. .tes-bluemode #tes-header-grabber:before
  4600. { border-color: transparent transparent var(--bluemode-bordercolor) transparent;}
  4601.  
  4602. /***------------------------------------PURPLEEE THEMEBOX + HEADER------------------------------------***/
  4603.  
  4604. .tes-purplemode #tes-settings > div > span {
  4605. background-color: var(--purplemode-bgcolor);
  4606. border-color: var(--purplemode-bordercolor);}
  4607.  
  4608. #room-header.tes-purplemode
  4609. { background-color: var(--purplemode-lightbgcolor);
  4610. border-color: var(--purplemode-bordercolor);}
  4611.  
  4612. .tes-purplemode #tes-settingsBox,
  4613. .tes-purplemode #tes-header-grabber
  4614. { background-color: var(--purplemode-bgcolor);
  4615. border-color: var(--purplemode-bordercolor);}
  4616.  
  4617. .tes-purplemode #room-header-info,
  4618. .tes-purplemode #room-header-info > h1
  4619. { color: var(--purplemode-bordercolor);}
  4620.  
  4621. .tes-purplemode #room-header-gifts-buttons > a,
  4622. .tes-purplemode #room-header-gifts-buttons > #get-coins
  4623. { background-color: var(--purplemode-bgcolor);
  4624. border-color: var(--purplemode-bgcolor);
  4625. color: var(--purplemode-bordercolor);}
  4626.  
  4627. .tes-purplemode #room-header-gifts-buttons > a:hover,
  4628. .tes-purplemode #room-header-gifts-buttons > #get-coins:hover
  4629. { background-color: var(--purplemode-bgcolor);
  4630. border-color: var(--purplemode-bordercolor);
  4631. color: var(--purplemode-bordercolor);}
  4632.  
  4633. .tes-purplemode #room-header-gifts-items > a > img
  4634. { border-color: var(--purplemode-bgcolor);}
  4635.  
  4636. .tes-purplemode #tes-header-grabber:before
  4637. { border-color: transparent transparent var(--purplemode-bordercolor) transparent;}
  4638.  
  4639. /***------------------------------------ORANGEEE THEMEBOX + HEADER------------------------------------***/
  4640.  
  4641. .tes-orangemode #tes-settings > div > span {
  4642. background-color: var(--orangemode-bgcolor);
  4643. border-color: var(--orangemode-bordercolor);}
  4644.  
  4645. #room-header.tes-orangemode
  4646. { background-color: var(--orangemode-lightbgcolor);
  4647. border-color: var(--orangemode-bordercolor);}
  4648.  
  4649. .tes-orangemode #tes-settingsBox,
  4650. .tes-orangemode #tes-header-grabber
  4651. { background-color: var(--orangemode-bgcolor);
  4652. border-color: var(--orangemode-bordercolor);}
  4653.  
  4654. .tes-orangemode #room-header-info,
  4655. .tes-orangemode #room-header-info > h1
  4656. { color: var(--orangemode-bordercolor);}
  4657.  
  4658. .tes-orangemode #room-header-gifts-buttons > a,
  4659. .tes-orangemode #room-header-gifts-buttons > #get-coins
  4660. { background-color: var(--orangemode-bgcolor);
  4661. border-color: var(--orangemode-bgcolor);
  4662. color: var(--orangemode-bordercolor);}
  4663.  
  4664. .tes-orangemode #room-header-gifts-buttons > a:hover,
  4665. .tes-orangemode #room-header-gifts-buttons > #get-coins:hover
  4666. { background-color: var(--orangemode-bgcolor);
  4667. border-color: var(--orangemode-bordercolor);
  4668. color: var(--orangemode-bordercolor);}
  4669.  
  4670. .tes-orangemode #room-header-gifts-items > a > img
  4671. { border-color: var(--orangemode-bgcolor);}
  4672.  
  4673. .tes-orangemode #tes-header-grabber:before
  4674. { border-color: transparent transparent var(--orangemode-bordercolor) transparent;}
  4675.  
  4676. /***------------------------------------REDDD THEMEBOX + HEADER------------------------------------***/
  4677.  
  4678. .tes-redmode #tes-settings > div > span {
  4679. background-color: var(--redmode-bgcolor);
  4680. border-color: var(--redmode-bordercolor);}
  4681.  
  4682. #room-header.tes-redmode
  4683. { background-color: var(--redmode-lightbgcolor);
  4684. border-color: var(--redmode-bordercolor);}
  4685.  
  4686. .tes-redmode #tes-settingsBox,
  4687. .tes-redmode #tes-header-grabber
  4688. { background-color: var(--redmode-bgcolor);
  4689. border-color: var(--redmode-bordercolor);}
  4690.  
  4691. .tes-redmode #room-header-info,
  4692. .tes-redmode #room-header-info > h1
  4693. { color: var(--redmode-bordercolor);}
  4694.  
  4695. .tes-redmode #room-header-gifts-buttons > a,
  4696. .tes-redmode #room-header-gifts-buttons > #get-coins
  4697. { background-color: var(--redmode-bgcolor);
  4698. border-color: var(--redmode-bgcolor);
  4699. color: var(--redmode-bordercolor);}
  4700.  
  4701. .tes-redmode #room-header-gifts-buttons > a:hover,
  4702. .tes-redmode #room-header-gifts-buttons > #get-coins:hover {
  4703. background-color: var(--redmode-bgcolor);
  4704. border-color: var(--redmode-bordercolor);
  4705. color: var(--redmode-bordercolor);}
  4706.  
  4707. .tes-redmode #room-header-gifts-items > a > img {
  4708. border-color: var(--redmode-bgcolor);}
  4709.  
  4710. .tes-redmode #tes-header-grabber:before {
  4711. border-color: transparent transparent var(--redmode-bordercolor) transparent;}
  4712.  
  4713. /***------------------------------------DARKPURPLEEE THEMEBOX + HEADER------------------------------------***/
  4714.  
  4715. .tes-darkpurplemode #tes-settings > div > span {
  4716. background-color: var(--darkpurplemode-bgcolor);
  4717. border-color: var(--darkpurplemode-bordercolor);}
  4718.  
  4719. #room-header.tes-darkpurplemode {
  4720. background-color: var(--darkpurplemode-lightbgcolor);
  4721. border-color: var(--darkpurplemode-bordercolor);}
  4722.  
  4723. .tes-darkpurplemode #tes-settingsBox,
  4724. .tes-darkpurplemode #tes-header-grabber {
  4725. background-color: var(--darkpurplemode-bgcolor);
  4726. border-color: var(--darkpurplemode-bordercolor);}
  4727.  
  4728. .tes-darkpurplemode #room-header-info,
  4729. .tes-darkpurplemode #room-header-info > h1 {
  4730. color: var(--darkpurplemode-bordercolor);}
  4731.  
  4732. .tes-darkpurplemode #room-header-gifts-buttons > a,
  4733. .tes-darkpurplemode #room-header-gifts-buttons > #get-coins {
  4734. background-color: var(--darkpurplemode-bgcolor);
  4735. border-color: var(--darkpurplemode-bgcolor);
  4736. color: var(--darkpurplemode-bordercolor);}
  4737.  
  4738. .tes-darkpurplemode #room-header-gifts-buttons > a:hover,
  4739. .tes-darkpurplemode #room-header-gifts-buttons > #get-coins:hover {
  4740. background-color: var(--darkpurplemode-bgcolor);
  4741. border-color: var(--darkpurplemode-bordercolor);
  4742. color: var(--darkpurplemode-bordercolor);}
  4743.  
  4744. .tes-darkpurplemode #room-header-gifts-items > a > img {
  4745. border-color: var(--darkpurplemode-bgcolor);}
  4746.  
  4747. .tes-darkpurplemode #tes-header-grabber:before {
  4748. border-color: transparent transparent var(--darkpurplemode-bordercolor) transparent;}
  4749.  
  4750. /***------------------------------------WHITEEE THEMEBOX + HEADER------------------------------------***/
  4751.  
  4752. .tes-whitemode #tes-settings > div > span {
  4753. background-color: var(--whitemode-lightbgcolor);
  4754. border-color: var(--whitemode-bordercolor);}
  4755.  
  4756. #room-header.tes-whitemode
  4757. { background-color: var(--whitemode-headerbg);
  4758. border-color: var(--whitemode-bordercolor);}
  4759.  
  4760. .tes-whitemode #tes-settingsBox,
  4761. .tes-whitemode #tes-header-grabber
  4762. { background-color: var(--whitemode-lightbgcolor);
  4763. border-color: var(--whitemode-bordercolor);}
  4764.  
  4765. .tes-whitemode #room-header-info,
  4766. .tes-whitemode #room-header-info > h1
  4767. { color: var(--whitemode-bordercolor);}
  4768.  
  4769. .tes-whitemode #room-header-gifts-buttons > a,
  4770. .tes-whitemode #room-header-gifts-buttons > #get-coins
  4771. { background-color: var(--whitemode-lightbgcolor);
  4772. border-color: var(--whitemode-bordercolor);
  4773. color: var(--whitemode-bordercolor);}
  4774.  
  4775. .tes-whitemode #room-header-gifts-buttons > a:hover,
  4776. .tes-whitemode #room-header-gifts-buttons > #get-coins:hover
  4777. { background-color: var(--whitemode-lightbgcolor);
  4778. border-color: var(--whitemode-bgcolor);
  4779. color: var(--whitemode-bordercolor);}
  4780.  
  4781. .tes-whitemode #room-header-gifts-items > a > img
  4782. { border-color: var(--whitemode-bgcolor);}
  4783.  
  4784. .tes-whitemode #tes-header-grabber:before
  4785. { border-color: transparent transparent var(--whitemode-bordercolor) transparent;}
  4786.  
  4787. /***------------------------------------FEATUREONEEE THEMEBOX + HEADER------------------------------------***/
  4788.  
  4789. .tes-featureonemode #tes-settings > div > span {
  4790. background-color: var(--featureonemode-bgcolor);
  4791. border-color: var(--featureonemode-bordercolor);}
  4792.  
  4793. #room-header.tes-featureonemode
  4794. { background-color: var(--featureonemode-headerbg);
  4795. border-color: var(--featureonemode-bordercolor);
  4796. background-position: center center;
  4797. background-image: var(--featureonemode-headerbg);}
  4798.  
  4799. .tes-featureonemode #tes-settingsBox,
  4800. .tes-featureonemode #tes-header-grabber
  4801. { background-color: var(--featureonemode-lightbgcolor);
  4802. border-color: var(--featureonemode-bordercolor);}
  4803.  
  4804. .tes-featureonemode #room-header-info,
  4805. .tes-featureonemode #room-header-info > h1
  4806. { color: var(--featureonemode-bordercolor);}
  4807.  
  4808. .tes-featureonemode #room-header-gifts-buttons > a,
  4809. .tes-featureonemode #room-header-gifts-buttons > #get-coins
  4810. { background-color: var(--featureonemode-bgcolor);
  4811. border-color: var(--featureonemode-bgcolor);
  4812. color: var(--featureonemode-bordercolor);}
  4813.  
  4814. .tes-featureonemode #room-header-gifts-buttons > a:hover,
  4815. .tes-featureonemode #room-header-gifts-buttons > #get-coins:hover
  4816. { background-color: var(--featureonemode-bgcolor);
  4817. border-color: var(--featureonemode-bordercolor);
  4818. color: var(--featureonemode-bordercolor);}
  4819.  
  4820. .tes-featureonemode #room-header-gifts-items > a > img
  4821. { border-color: var(--featureonemode-bgcolor);}
  4822.  
  4823. .tes-featureonemode #tes-header-grabber:before
  4824. { border-color: transparent transparent var(--featureonemode-bordercolor) transparent;}
  4825.  
  4826. /***------------------------------------FEATURETWOOO THEMEBOX + HEADER------------------------------------***/
  4827.  
  4828. .tes-featuretwomode #tes-settings > div > span {
  4829. background-color: var(--featuretwomode-bgcolor);
  4830. border-color: var(--featuretwomode-bordercolor);}
  4831.  
  4832. #room-header.tes-featuretwomode
  4833. { background-color: #282828;
  4834. border-color: var(--featuretwomode-bordercolor);
  4835. background-position: right center;
  4836. background-size: 240px;
  4837. background-repeat:no-repeat;
  4838. background-image: var(--featuretwomode-headerbg);}
  4839.  
  4840. .tes-featuretwomode #tes-settingsBox,
  4841. .tes-featuretwomode #tes-header-grabber
  4842. { background-color: var(--featuretwomode-lightbgcolor);
  4843. border-color: var(--featuretwomode-bordercolor);}
  4844.  
  4845. .tes-featuretwomode #room-header-info,
  4846. .tes-featuretwomode #room-header-info > h1
  4847. { color: var(--featuretwomode-textcolor);}
  4848.  
  4849. .tes-featuretwomode #room-header-gifts-buttons > a, .tes-featuretwomode #room-header-gifts-buttons > #get-coins {display:none;}
  4850.  
  4851. .tes-featuretwomode #room-header-gifts-buttons > a,
  4852. .tes-featuretwomode #room-header-gifts-buttons > #get-coins
  4853.  
  4854. { display:none !important;background-color: var(--featuretwomode-bgcolor);
  4855. border-color: var(--featuretwomode-textcolor);
  4856. color: var(--featuretwomode-bordercolor);}
  4857.  
  4858. .tes-featuretwomode #room-header-gifts-buttons > a:hover,
  4859. .tes-featuretwomode #room-header-gifts-buttons > #get-coins:hover
  4860. { background-color: var(--featuretwomode-bgcolor);
  4861. border-color: var(--featuretwomode-bordercolor);
  4862. color: var(--featuretwomode-bordercolor);}
  4863.  
  4864. .tes-featuretwomode #room-header-gifts-items > a > img
  4865. { border-color: var(--featuretwomode-bgcolor);}
  4866.  
  4867. .tes-featuretwomode #tes-header-grabber:before
  4868. { border-color: transparent transparent var(--featuretwomode-bordercolor) transparent;}
  4869.  
  4870. /***------------------------------------FEATURETHREEE THEMEBOX + HEADER------------------------------------***/
  4871.  
  4872. .tes-featurethreemode #tes-settings > div > span {
  4873. background-color: var(--featurethreemode-bgcolor);
  4874. border-color:#51bc02;}
  4875.  
  4876. #room-header.tes-featurethreemode
  4877. { background-color: transparent;
  4878. border: 0px;
  4879. background-position: right center;
  4880. background-repeat:no-repeat;
  4881. border-top-right-radius: 100px;
  4882. border-bottom-right-radius: 100px;
  4883. background-image: var(--featurethreemode-headerbg);}
  4884.  
  4885. #room-header.tes-featurethreemode.tes-headerCollapsed {
  4886. position: unset !important;
  4887. left: unset !important;
  4888. height: 0px;
  4889. margin-top: -150px;
  4890. }
  4891.  
  4892. #room-header.tes-featurethreemode.tes-sidemenuCollapsed {
  4893. position:relative;
  4894. left:-1px;
  4895. }
  4896.  
  4897. #room-header.tes-featurethreemode.tes-sidemenuCollapsed + .tes-headerCollapse{
  4898. position:relative;
  4899. left:-1px;
  4900. height: 0px;
  4901. margin-top: -15px;
  4902. }
  4903.  
  4904.  
  4905. .tes-featurethreemode #tes-header-grabber {
  4906. background-image: var(--featurethreemode-squid);
  4907. background-size: 25px;
  4908. background-repeat: no-repeat;
  4909. background-color: transparent;
  4910. border-color: var(--featurethreemode-bordercolor);
  4911. height: 30px;
  4912. width: 25px;
  4913. top: 81px;
  4914. }
  4915.  
  4916. .tes-featurethreemode #tes-header-grabber:hover {background-color:#51bc02;}
  4917.  
  4918.  
  4919. .tes-featurethreemode.tes-headerCollapsed #tes-header-grabber {
  4920. -webkit-transform: rotate(180deg);
  4921. transform: rotate(180deg);
  4922. border-radius:50px;
  4923. top: -13px !important;
  4924. }
  4925.  
  4926. .tes-featurethreemode #tes-settingsBox
  4927. { background-color: var(--featurethreemode-lightbgcolor);
  4928. border-color: #51bc02;
  4929. background-image: url(https://i.imgur.com/kR2eClp.jpg);
  4930. background-size: cover; background-size: cover;}
  4931.  
  4932.  
  4933. .tes-featurethreemode #room-header-info,
  4934. .tes-featurethreemode #room-header-info > h1
  4935. { color: var(--featurethreemode-textcolor);top:4px;}
  4936.  
  4937. .tes-featurethreemode #room-header-gifts-buttons > a, .tes-featurethreemode #room-header-gifts-buttons > #get-coins {display:none;}
  4938.  
  4939. .tes-featurethreemode #room-header-gifts-buttons > a,
  4940. .tes-featurethreemode #room-header-gifts-buttons > #get-coins
  4941.  
  4942. { display:none !important;background-color: var(--featurethreemode-bgcolor);
  4943. border-color: var(--featurethreemode-textcolor);
  4944. color: var(--featurethreemode-bordercolor);}
  4945.  
  4946. .tes-featurethreemode #room-header-gifts-buttons > a:hover,
  4947. .tes-featurethreemode #room-header-gifts-buttons > #get-coins:hover
  4948. { background-color: var(--featurethreemode-bgcolor);
  4949. border-color: var(--featurethreemode-bordercolor);
  4950. color: var(--featurethreemode-bordercolor);}
  4951.  
  4952. .tes-featurethreemode #room-header-gifts-items > a > img
  4953. { border-color: var(--featurethreemode-bgcolor);}
  4954.  
  4955. .tes-featurethreemode #tes-header-grabber:before
  4956. { border-color: transparent transparent var(--featurethreemode-bordercolor) transparent;displaY:none;}
  4957.  
  4958.  
  4959. ` + firefoxCSS + `
  4960. </style>
  4961. `;
  4962. titleCSS.insertAdjacentHTML(insertPosition, titleCSShtml);
  4963. }
  4964.  
  4965. { // videolistCSS
  4966. videolistCSShtml = `
  4967. <style id="videolistCSS" scope="tc-videolist">` + globalCSS + `
  4968. #videolist.tes-sidemenuCollapsed {
  4969. width: 100%;}
  4970.  
  4971. .video > div > .blured {opacity:0 !important; visibility: hidden !important;}
  4972. .video > div > video {filter:none !important;}
  4973.  
  4974. #videos-footer {
  4975. display: flex;
  4976. flex-direction: row;
  4977. align-items: stretch;
  4978. height: 0px;
  4979. min-height: 0px;
  4980. width: 170px;
  4981. position: fixed;
  4982. bottom: 0;
  4983. left: 10px !important;
  4984. padding: 0 30px 0px;
  4985. box-sizing: border-box;
  4986. font-size: 0;
  4987. z-index: 3;
  4988. left: auto;
  4989. background-color:#111111;}
  4990.  
  4991. #videos-footer.tes-sidemenuCollapsed{
  4992. position: relative;
  4993. bottom: 0;
  4994. right: 50px;}
  4995.  
  4996. .tes-sidemenuCollapsed#videos-footer{
  4997. position: relative;
  4998. bottom: 0;
  4999. right: 50px;}
  5000.  
  5001. #youtube.video:after {
  5002. border: none;}
  5003.  
  5004. .video:after {
  5005. content: '';
  5006. position: absolute;
  5007. display: block;
  5008. height: 100%;
  5009. width: 100%;
  5010. top: 0;
  5011. left: 0;
  5012. border: 5px solid #111;
  5013. border-radius: 10px;
  5014. box-sizing: border-box;
  5015. pointer-events: none;}
  5016.  
  5017. #video::after {
  5018. border: 5px solid #111;}
  5019.  
  5020. #video:after {
  5021. border: 5px solid #111;}
  5022.  
  5023. #videos > .video {
  5024. position: relative;
  5025. width: 100%;
  5026. padding: 5px;
  5027. box-sizing: border-box;
  5028. font-size: 0;
  5029. overflow: hidden;
  5030. background-color: #ffffff !important;}
  5031.  
  5032. .video > div > iframe {
  5033. width:100%;}
  5034.  
  5035. #videos-header {
  5036. height: 10px;
  5037. min-height: 10px;
  5038. background-color:#111111;}
  5039.  
  5040. #videos-content {
  5041. background-color:#111111;}
  5042.  
  5043. #videos-footer-youtube {
  5044. background-color: #b20000;
  5045. background-image: url(https://anceldesigns.000webhostapp.com/img/youtube_white.png);
  5046. background-position: top center;
  5047. background-position: -5px;
  5048. background-size: 125px;
  5049. background-repeat: no-repeat;
  5050. position: relative;
  5051. left: -20px;
  5052. top: -2px;}
  5053.  
  5054. #videos-footer-youtube > svg, #videos-footer-soundcloud > svg {
  5055. vertical-align: middle;
  5056. display:none;}
  5057.  
  5058. #videos-footer-push-to-talk > svg {
  5059. vertical-align: middle;
  5060. pointer-events: none;
  5061. display:none;}
  5062.  
  5063. #videos-footer-youtube, #videos-footer-soundcloud {
  5064. height: 42px;
  5065. width: 10px !important;
  5066. min-width: 115px !important;
  5067. margin-right: -63px !important;
  5068. margin-top: -150px;
  5069. border-radius: 11px;
  5070. text-align: center;
  5071. line-height: 50px;
  5072. cursor: pointer;
  5073. overflow: hidden;
  5074. transition: .2s;}
  5075.  
  5076. .tes-sidemenuCollapsed #videos-footer {
  5077. position: fixed;
  5078. top: 205px;}
  5079. .tes-sidemenuCollapsed #videos-footer-push-to-talk { position: fixed !important;
  5080. bottom: 22px !important;
  5081. right: 7px !important;
  5082. width: 60px !important;
  5083. min-width: 10px !important;
  5084. height: 45px !important;
  5085. top:unset !important;
  5086. border-top-left-radius: 11px !important;
  5087. border-top-right-radius: 11px !important;
  5088. }
  5089.  
  5090. .tes-sidemenuCollapsed #videos-footer-broadcast {
  5091. position: fixed;
  5092. bottom: 1px;
  5093. right: 210px;
  5094. border-top-right-radius: 0px;
  5095. border-bottom-left-radius: 5px;
  5096. top: unset;
  5097. left: unset;
  5098. width: 120px !important;
  5099. min-width: 10px !important;
  5100. height: 18px;
  5101. font-size: 12px;
  5102. line-height: 20px;
  5103.  
  5104. }
  5105. .tes-chatbelow #videos-footer-youtube {
  5106. display:none;}
  5107.  
  5108. .tes-sidemenuCollapsed #videos-footer-youtube {
  5109. position: fixed;
  5110. bottom: 31px;
  5111. right: 405px;
  5112. border-top-right-radius: 0px;
  5113. top: unset;
  5114. left: unset;
  5115. width: 30px !important;
  5116. min-width: 10px !important;
  5117. height: 30px;
  5118. background-image: url(https://iconsplace.com/wp-content/uploads/_icons/ffffff/256/png/play-icon-18-256.png);
  5119. background-position: top center;
  5120. background-position: 1px;
  5121. background-size: 30px;
  5122. background-repeat: no-repeat;}
  5123.  
  5124. #videos-footer-push-to-talk {
  5125. height: 55px;
  5126. margin-top: 4px;
  5127. background-image: url(https://anceldesigns.000webhostapp.com/img/mic.png);
  5128. background-position: center center;
  5129. background-size: 35px 35px;
  5130. background-repeat: no-repeat;}
  5131.  
  5132. #videos-footer-push-to-talk.tes-sidemenuCollapsed {
  5133. height: 55px;
  5134. margin-top: -14px;}
  5135.  
  5136. #videos-footer-broadcast-wrapper.tes-sidemenuCollapsed {
  5137. position: relative;
  5138. right: 10px;}
  5139.  
  5140. #videos-footer-broadcast-wrapper {
  5141. position: relative;
  5142. right: 140px;
  5143. margin-top: -105px;
  5144. display: unset;
  5145. flex-direction: row;
  5146. align-items: unset;
  5147. width: unset;
  5148. padding-left: 0px !important;}
  5149.  
  5150. #videos-footer-broadcast-wrapper > #videos-footer-submenu-button {
  5151. height: 15px;
  5152. margin-bottom: 0px;
  5153. background-color: #328332;
  5154. position: absolute;
  5155. top: -15px;
  5156. left: -9px;
  5157. display: block;
  5158. width: 20px;
  5159. min-width: 10px;
  5160. border-radius: 5px 5px 0px 0px;
  5161. box-sizing: border-box;
  5162. cursor: pointer;
  5163. transition: .2s;}
  5164.  
  5165. #videos-footer-submenu {
  5166. position: absolute;
  5167. width: 250px;
  5168. bottom: 100px;
  5169. left: 150px;
  5170. right: 0px;
  5171. padding: 7px;
  5172. border-radius: 4px;
  5173. background-color: #fff;
  5174. font-size: 14px;
  5175. color: #000;
  5176. box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .09);
  5177. opacity: 0;
  5178. visibility: hidden;
  5179. z-index: 2;
  5180. transition: .2s;}
  5181.  
  5182. #videos-footer-submenu:before, #videos-footer-submenu:after {
  5183. content: '';
  5184. position: absolute;
  5185. display: block;
  5186. height: 0;
  5187. width: 0;
  5188. right: unset;
  5189. bottom: unset;
  5190. border-width: 7px 7px 0 7px;
  5191. border-style: solid;
  5192. border-color: rgba(0, 0, 0, .06) transparent;}
  5193.  
  5194. #videos-footer-broadcast-wrapper > #videos-footer-submenu-button:before {
  5195. content: '';
  5196. position: absolute;
  5197. display: block;
  5198. height: 0;
  5199. width: 0;
  5200. top: 4px;
  5201. right: 3px;
  5202. border-width: 0 5px 6px;
  5203. border-style: solid;
  5204. border-color: #fff transparent;
  5205. opacity: 1;
  5206. visibility: visible;
  5207. transition: .2s;}
  5208.  
  5209. #videos-footer-broadcast {
  5210. position: relative;
  5211. display: block;
  5212. right: 5px;
  5213. height: 39px;
  5214. min-width: 162px;
  5215. max-width: 100%;
  5216. padding-left: 0px;
  5217. border-radius: 0px 5px 5px 0px;
  5218. box-sizing: unset;
  5219. background-color: #13a832;
  5220. font-size: 15px;
  5221. font-weight: 550;
  5222. color: #fff;
  5223. text-align: center;
  5224. line-height: 38px;
  5225. cursor: pointer;
  5226. text-transform: uppercase;
  5227. transition: .2s;}
  5228.  
  5229. #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button {
  5230. z-index:-1;}
  5231.  
  5232. #videos-footer-broadcast-wrapper > .waiting {
  5233. position: absolute;
  5234. width: 125px;
  5235. height: 55px;
  5236. top: 45px;
  5237. bottom: 0;
  5238. left: 10px;
  5239. right: 0;
  5240. border-radius: 11px;
  5241. background-color: #38cd57;
  5242. opacity: 0;
  5243. visibility: hidden;
  5244. transition: .2s;}
  5245.  
  5246. #videos-footer-youtube.hidden, #videos-footer-soundcloud.hidden {
  5247. width: 0;
  5248. min-width: 0;
  5249. margin-right: 0;
  5250. visibility: hidden;}
  5251. }
  5252.  
  5253. #Fvideolist * {
  5254. width: 75%!important;
  5255. display: contents;
  5256. float: right;
  5257. flex-direction: column;}
  5258.  
  5259. #Fvideos {
  5260. flex-direction: unset;
  5261. flex-wrap: unset;}
  5262.  
  5263. #videos-header > span {
  5264. line-height: initial;
  5265. position: relative;
  5266. top: 1px;
  5267. background: none;}
  5268.  
  5269. #videos-header > span > svg {
  5270. height: 16px;
  5271. padding: 0;}
  5272.  
  5273. .videos-header-volume {
  5274. position: absolute;
  5275. height: 128px;
  5276. width: 24px;
  5277. top: 2px;
  5278. left: 50%;
  5279. margin-left: -14px;
  5280. margin-top: 15px;
  5281. border-width: 50px 22px 22px;
  5282. border-style: solid;
  5283. border-color: #111;
  5284. border-radius: 5px;
  5285. box-shadow: 10px 1px 4px 0 rgba(0, 0, 0, .09);
  5286. opacity: 0;
  5287. visibility: hidden;
  5288. transition: .2s;}
  5289.  
  5290. .videos-header-volume-level > div {
  5291. position: absolute;
  5292. display: block;
  5293. height: 12px;
  5294. width: 24px;
  5295. top: 0px;
  5296. left: 0px;
  5297. border-radius: 0;
  5298. background-color:#313131;}
  5299.  
  5300. .videos-header-volume:before {
  5301. background-color: #111;}
  5302.  
  5303.  
  5304.  
  5305.  
  5306. /***------------------------------------PINKKK VIDEO HEADER------------------------------------***/
  5307.  
  5308. .tes-pinkmode #videos-header,
  5309. .tes-pinkmode #videos-content
  5310. { background-color: var(--pinkmode-bgcolor);}
  5311.  
  5312. .tes-pinkmode #videos-footer-broadcast-wrapper.active > #videos-footer-broadcast,
  5313. .tes-pinkmode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button,
  5314. .tes-pinkmode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button:focus
  5315. { background-color: var(--pinkmode-bordercolor);}
  5316.  
  5317.  
  5318. /***------------------------------------GREENNN VIDEO HEADER------------------------------------***/
  5319.  
  5320. .tes-greenmode #videos-header,
  5321. .tes-greenmode #videos-content
  5322. { background-color: var(--greenmode-bgcolor);}
  5323.  
  5324. .tes-greenmode #videos-footer-broadcast-wrapper.active > #videos-footer-broadcast,
  5325. .tes-greenmode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button,
  5326. .tes-greenmode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button:focus
  5327. { background-color: var(--greenmode-bordercolor);}
  5328.  
  5329.  
  5330. /***------------------------------------BLUEEE VIDEO HEADER------------------------------------***/
  5331.  
  5332. .tes-bluemode #videos-header,
  5333. .tes-bluemode #videos-content
  5334. { background-color: var(--bluemode-bgcolor);}
  5335.  
  5336. .tes-bluemode #videos-footer-broadcast-wrapper.active > #videos-footer-broadcast,
  5337. .tes-bluemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button,
  5338. .tes-bluemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button:focus
  5339. { background-color: var(--bluemode-bordercolor);}
  5340.  
  5341.  
  5342. /***------------------------------------PURPLEEE VIDEO HEADER------------------------------------***/
  5343.  
  5344. .tes-purplemode #videos-header,
  5345. .tes-purplemode #videos-content
  5346. { background-color: var(--purplemode-bgcolor);}
  5347.  
  5348. .tes-purplemode #videos-footer-broadcast-wrapper.active > #videos-footer-broadcast,
  5349. .tes-purplemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button,
  5350. .tes-purplemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button:focus
  5351. { background-color: var(--purplemode-bgcolor); border-color: var(--purplemode-bordercolor);}
  5352.  
  5353. /***------------------------------------ORANGEEE VIDEO HEADER------------------------------------***/
  5354.  
  5355. .tes-orangemode #videos-header,
  5356. .tes-orangemode #videos-content
  5357. { background-color: var(--orangemode-bgcolor);}
  5358.  
  5359. .tes-orangemode #videos-footer-broadcast-wrapper.active > #videos-footer-broadcast,
  5360. .tes-orangemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button,
  5361. .tes-orangemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button:focus
  5362. { background-color: var(--orangemode-bordercolor);}
  5363.  
  5364. /***------------------------------------REDDD VIDEO HEADER------------------------------------***/
  5365.  
  5366. .tes-redmode #videos-header,
  5367. .tes-redmode #videos-content
  5368. { background-color: var(--redmode-bgcolor);}
  5369.  
  5370. .tes-redmode #videos-footer-broadcast-wrapper.active > #videos-footer-broadcast,
  5371. .tes-redmode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button,
  5372. .tes-redmode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button:focus
  5373. { background-color: var(--redmode-bordercolor);}
  5374.  
  5375. /***------------------------------------DARKPURPLEEE VIDEO HEADER------------------------------------***/
  5376.  
  5377. .tes-darkpurplemode #videos-header,
  5378. .tes-darkpurplemode #videos-content
  5379. { background-color: var(--darkpurplemode-bgcolor);}
  5380.  
  5381. .tes-darkpurplemode #videos-footer-broadcast-wrapper.active > #videos-footer-broadcast,
  5382. .tes-darkpurplemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button,
  5383. .tes-darkpurplemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button:focus
  5384. { background-color: var(--darkpurplemode-bordercolor);}
  5385.  
  5386. /***------------------------------------WHITEEE VIDEO HEADER------------------------------------***/
  5387.  
  5388. .tes-whitemode #videos-header,
  5389. .tes-whitemode #videos-content
  5390. { background-color: var(--whitemode-lightbgcolor);}
  5391.  
  5392. .tes-whitemode #videos-footer-broadcast-wrapper.active > #videos-footer-broadcast,
  5393. .tes-whitemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button,
  5394. .tes-whitemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button:focus
  5395. { background-color: var(--whitemode-darkbgcolor);}
  5396.  
  5397. /***------------------------------------FEATUREONEEE VIDEO HEADER------------------------------------***/
  5398.  
  5399. .tes-featureonemode #videos-header
  5400. { min-height: 0px;
  5401. height: 0px;
  5402. background-color:transparent;}
  5403.  
  5404. .tes-featureonemode #videos-content
  5405. { background-color:transparent;
  5406. background-image: var(--featureonemode-roombg);
  5407. background-position: center center;
  5408. background-size: cover;}
  5409.  
  5410. .tes-featureonemode #videos-footer-broadcast-wrapper.active > #videos-footer-broadcast,
  5411. .tes-featureonemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button,
  5412. .tes-featureonemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button:focus
  5413. { background-color: var(--featureonemode-bordercolor);}
  5414.  
  5415. .tes-featureonemode #videos-footer-push-to-talk {
  5416. background-image: var(--featureonemode-ptt) !important;
  5417. background-size: 50px;}
  5418.  
  5419. /***------------------------------------FEATURETWOOO VIDEO HEADER------------------------------------***/
  5420.  
  5421. .tes-featuretwomode #videos-header
  5422. { min-height: 0px;
  5423. height: 0px;
  5424. background-color:transparent;}
  5425.  
  5426. .tes-featuretwomode #videos-content
  5427. { background-color:transparent;
  5428. background-image: var(--featuretwomode-roombg);
  5429. background-position: right center;
  5430. background-size: cover;}
  5431.  
  5432. .tes-featuretwomode #videos-footer-broadcast-wrapper.active > #videos-footer-broadcast,
  5433. .tes-featuretwomode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button,
  5434. .tes-featuretwomode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button:focus
  5435. { background-color: var(--featuretwomode-bordercolor);}
  5436.  
  5437. .tes-featuretwomode #videos-footer-push-to-talk {
  5438. background-image: var(--featuretwomode-ptt) !important;
  5439. background-size: 50px;}
  5440.  
  5441. /***------------------------------------FEATURETHREEE VIDEO HEADER------------------------------------***/
  5442.  
  5443. .tes-featurethreemode#videos-footer-broadcast-wrapper {
  5444. background-image: var(--featurethreemode-ptt);
  5445. }
  5446.  
  5447.  
  5448. .tes-featurethreemode.tes-sidemenuCollapsed #videos-footer-broadcast {
  5449. background-color: #bd1071;
  5450. right: 184px;
  5451.  
  5452. }
  5453.  
  5454. .tes-featurethreemode.tes-sidemenuCollapsed #videos-footer-youtube{
  5455. right: 383px;
  5456. border: 1px solid #51bc02;
  5457. }
  5458. .tes-featurethreemode #videos-header
  5459. { min-height: 0px;
  5460. height: 0px;
  5461. background-color:transparent;}
  5462.  
  5463. .tes-featurethreemode #videos-content
  5464. { background-color:transparent;
  5465. background-image: none;
  5466. background-position: right center;
  5467. background-size: cover;}
  5468.  
  5469. .tes-featurethreemode #videos-footer-broadcast-wrapper.active > #videos-footer-broadcast,
  5470. .tes-featurethreemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button,
  5471. .tes-featurethreemode #videos-footer-broadcast-wrapper.active > #videos-footer-submenu-button:focus
  5472. { background-color: var(--featurethreemode-bordercolor);}
  5473.  
  5474. .tes-featurethreemode #videos-footer-push-to-talk {
  5475. background-image: var(--featurethreemode-ptt) !important;
  5476. background-size: 89px;}
  5477.  
  5478. .tes-featurethreemode #videos-footer-broadcast-wrapper.show-ptt > #videos-footer-push-to-talk {
  5479. height: 50px;
  5480. border-top-left-radius: 0px;
  5481. border-top-right-radius: 0px;
  5482. position: relative;
  5483. top: -4px;}
  5484. </style>
  5485. `;
  5486. videolistCSS.insertAdjacentHTML(insertPosition, videolistCSShtml);
  5487. }
  5488.  
  5489. { // chatlistCSS
  5490. chatlistCSShtml = `
  5491. <style id="chatlistCSS" scope="tinychat-chatlist">` + globalCSS + `
  5492. #chatlist {margin-top:-25px;}
  5493. #chatlist.tes-orangemode > div > span {
  5494. color:#000000;}
  5495.  
  5496. #chatlist.tes-redmode > div > span {
  5497. color:#000000;}
  5498.  
  5499. .tes-redmode #chat-wider:before {
  5500. color:#860000;}
  5501.  
  5502. #chatlist > div > span {
  5503. padding-left: 10px;}
  5504.  
  5505. #chatlist > #header {
  5506. top: 3px;
  5507. height: auto;}
  5508.  
  5509. /*** --- this block is in chatlistCSS & userlistCSS --- ***/
  5510.  
  5511. .list-item > span > img {
  5512. right: 13px;
  5513. left: auto;}
  5514.  
  5515. .list-item > span[data-status]:before {
  5516. left: auto;
  5517. right: 0;}
  5518.  
  5519. .list-item > span > span {
  5520. background: none!important;
  5521. box-shadow: none!important;}
  5522.  
  5523. /*** --- --- ***/
  5524.  
  5525. .close-instant > path {
  5526. fill: white;}
  5527.  
  5528. .list-item > span > span { /* gift and close buttons */
  5529. right: 16px;}
  5530.  
  5531. .list-item > span:hover > span { /* gift and close buttons */
  5532. right: 16px;
  5533. background: none!important;}
  5534.  
  5535. </style>
  5536. `;
  5537. chatlistCSS.insertAdjacentHTML(insertPosition, chatlistCSShtml);
  5538. }
  5539.  
  5540. { // userlistCSS
  5541. userlistCSShtml = `
  5542. <style id="userlistCSS" scope="tinychat-userlist">` + globalCSS + `
  5543. #userlist > div > span {
  5544. padding-left: 2px;
  5545. padding-right: 2px;
  5546. position: relative;
  5547. display: inline-block;
  5548. height: 30px;
  5549. width: 100%;
  5550. border-radius: 0 0 0 0;
  5551. box-sizing: border-box;
  5552. font-size: 14px;
  5553. color: #7b868a;
  5554. line-height: 30px;
  5555. text-align: left;
  5556. white-space: nowrap;
  5557. overflow: hidden;
  5558. transition: .2s;}
  5559.  
  5560. .tes-sidemenuCollapsed #button-banlist {
  5561. left: -100px;
  5562. width: 10px;}
  5563.  
  5564. #chatlist > div > span {
  5565. position: relative;
  5566. display: inline-block;
  5567. height: 30px;
  5568. width: 100%;
  5569. padding-left: 36px;
  5570. border-radius: 0 30px 30px 0;
  5571. box-sizing: border-box;
  5572. font-size: 14px;
  5573. color: #02bcff;
  5574. line-height: 30px;
  5575. text-align: left;
  5576. white-space: nowrap;
  5577. overflow: hidden;
  5578. transition: .2s;}
  5579.  
  5580. .list-item > span > span {
  5581. right: auto;
  5582. padding: 0 5px;}
  5583.  
  5584. .list-item > span > .nickname {
  5585. padding-right: 3px;}
  5586.  
  5587. /*** --- this block is in chatlistCSS & userlistCSS --- ***/
  5588.  
  5589. .list-item > span > img {
  5590. right: 13px;
  5591. left: auto;}
  5592.  
  5593. .list-item > span[data-status]:before {
  5594. left: auto;
  5595. right: 0;}
  5596.  
  5597. .list-item > span > span {
  5598. background: none;
  5599. box-shadow: none;}
  5600.  
  5601. /*** --- --- ***/
  5602.  
  5603. .list-item > span > span[data-moderator="1"]:before {
  5604. filter: hue-rotate(226deg) saturate(4000%);}
  5605.  
  5606. #userlist > #header {
  5607. top: auto;
  5608. height: auto;}
  5609.  
  5610. #userlist > #header > span {
  5611. display: block;
  5612. border-color: black;
  5613. background-color: #111111;
  5614. text-align: center;
  5615. top: 4px;}
  5616.  
  5617. #chatlist > #header {
  5618. color: #111111;}
  5619.  
  5620. #button-banlist {
  5621. padding: 0 12px;
  5622. text-indent: -9999px;
  5623. background-image: url(https://www.freeiconspng.com/uploads/red-x-png-4.png);
  5624. background-size: 15px;
  5625. background-position: center center;
  5626. background-repeat: no-repeat;
  5627. white-space: nowrap;
  5628. background-color:transparent;}
  5629.  
  5630. .list-item > span[data-status]:before {
  5631. left: auto;
  5632. right: 0;
  5633. border-radius:10px;}
  5634.  
  5635. .list-item > span > span[data-cam="1"]:after
  5636. { background-image: url(https://i.ibb.co/RjLdY26/63629-3.png) !important;
  5637. background-size: 10px;}
  5638.  
  5639. /*** --- START COLOR MODES --- ***/
  5640.  
  5641.  
  5642. /***------------------------------------PINKKK USERS------------------------------------***/
  5643.  
  5644. #userlist.tes-pinkmode > div > span:hover
  5645. { background-color: var(--pinkmode-bgcolor);
  5646. color: var(--pinkmode-bordercolor);}
  5647.  
  5648. .tes-pinkmode .list-item > span:hover > span
  5649. { background: none;
  5650. box-shadow: none;}
  5651.  
  5652. .list-item.tes-pinkmode > span > span > .send-gift:hover
  5653. { background-color: var(--pinkmode-bgcolor);}
  5654.  
  5655. #userlist.tes-pinkmode > #header > span
  5656. { background-color: var(--pinkmode-bordercolor);
  5657. color:#ffffff}
  5658.  
  5659.  
  5660. /***------------------------------------GREENNN USERS------------------------------------***/
  5661.  
  5662. #userlist.tes-greenmode > div > span:hover
  5663. { background-color: var(--greenmode-bgcolor);
  5664. color: var(--greenmode-bordercolor);}
  5665.  
  5666. .tes-greenmode .list-item > span:hover > span
  5667. { background: none;
  5668. box-shadow: none;}
  5669.  
  5670. .list-item.tes-greenmode > span > span > .send-gift:hover
  5671. { background-color: var(--greenmode-bgcolor);}
  5672.  
  5673. #userlist.tes-greenmode > #header > span
  5674. { background-color: var(--greenmode-bordercolor);
  5675. color:#ffffff}
  5676.  
  5677. /***------------------------------------BLUEEE USERS------------------------------------***/
  5678.  
  5679. #userlist.tes-bluemode > div > span:hover
  5680. { background-color: var(--bluemode-bgcolor);
  5681. color: var(--bluemode-bordercolor);}
  5682.  
  5683. .tes-bluemode .list-item > span:hover > span
  5684. { background: none;
  5685. box-shadow: none;}
  5686.  
  5687. .list-item.tes-bluemode > span > span > .send-gift:hover
  5688. { background-color: var(--bluemode-bgcolor);}
  5689.  
  5690. #userlist.tes-bluemode > #header > span
  5691. { background-color: var(--bluemode-bordercolor);
  5692. color:#ffffff}
  5693.  
  5694. /***------------------------------------PURPLEEE USERS------------------------------------***/
  5695.  
  5696. #userlist.tes-purplemode > div > span:hover
  5697. { background-color: var(--purplemode-bgcolor);
  5698. color: var(--purplemode-bordercolor);}
  5699.  
  5700. .tes-purplemode .list-item > span:hover > span
  5701. { background: none;
  5702. box-shadow: none;}
  5703.  
  5704. .list-item.tes-purplemode > span > span > .send-gift:hover
  5705. { background-color: var(--purplemode-bgcolor);}
  5706.  
  5707. #userlist.tes-purplemode > #header > span
  5708. { background-color: var(--purplemode-bgcolor);
  5709. color:#ffffff}
  5710.  
  5711. /***------------------------------------ORANGEEE USERS------------------------------------***/
  5712.  
  5713. #userlist.tes-orangemode > div > span:hover
  5714. { background-color: var(--orangemode-bgcolor);
  5715. color: var(--orangemode-bordercolor);}
  5716.  
  5717. .tes-orangemode .list-item > span:hover > span
  5718. { background: none;
  5719. box-shadow: none;}
  5720.  
  5721. .list-item.tes-orangemode > span > span > .send-gift:hover
  5722. { background-color: var(--orangemode-bgcolor);}
  5723.  
  5724. #userlist.tes-orangemode > #header > span
  5725. { background-color: var(--orangemode-bordercolor);
  5726. color:#ffffff}
  5727.  
  5728. /***------------------------------------REDDD USERS------------------------------------***/
  5729.  
  5730. #userlist.tes-redmode > div > span:hover
  5731. { background-color: var(--redmode-bgcolor);
  5732. color: var(--redmode-bordercolor);}
  5733.  
  5734. .tes-redmode .list-item > span:hover > span
  5735. { background: none;
  5736. box-shadow: none;}
  5737.  
  5738. .list-item.tes-redmode > span > span > .send-gift:hover
  5739. { background-color: var(--redmode-bgcolor);}
  5740.  
  5741. #userlist.tes-redmode > #header > span
  5742. { background-color: var(--redmode-bordercolor);
  5743. color:#ffffff}
  5744.  
  5745. /***------------------------------------DARKPURPLEEE USERS------------------------------------***/
  5746.  
  5747. #userlist.tes-darkpurplemode > div > span:hover
  5748. { background-color: var(--darkpurplemode-bgcolor);
  5749. color: var(--darkpurplemode-bordercolor);}
  5750.  
  5751. .tes-darkpurplemode .list-item > span:hover > span
  5752. { background: none;
  5753. box-shadow: none;}
  5754.  
  5755. .list-item.tes-darkpurplemode > span > span > .send-gift:hover
  5756. { background-color: var(--darkpurplemode-bgcolor);}
  5757.  
  5758. #userlist.tes-darkpurplemode > #header > span
  5759. { background-color: var(--darkpurplemode-bordercolor);
  5760. color:#ffffff}
  5761.  
  5762. /***------------------------------------WHITEEE USERS------------------------------------***/
  5763.  
  5764. #userlist.tes-whitemode > div > span:hover
  5765. { background-color: var(--whitemode-lightbgcolor);
  5766. color: var(--whitemode-bordercolor);}
  5767.  
  5768. .tes-whitemode .list-item > span:hover > span
  5769. { background: none;
  5770. box-shadow: none;}
  5771.  
  5772. .list-item.tes-whitemode > span > span > .send-gift:hover
  5773. { background-color: var(--whitemode-bgcolor);}
  5774.  
  5775. #userlist.tes-whitemode > #header > span
  5776. { background-color: var(--whitemode-bgcolor);
  5777. color:#ffffff}
  5778.  
  5779. /***------------------------------------FEATUREONEEE USERS------------------------------------***/
  5780.  
  5781. #userlist.tes-featureonemode > #header > span {
  5782. background-color:#005900;
  5783. color:#000;}
  5784.  
  5785. #userlist.tes-featureonemode > div > span:hover
  5786. { background-color: var(--featureonemode-lightbgcolor);
  5787. color: var(--featureonemode-bordercolor);}
  5788.  
  5789. .tes-featureonemode .list-item > span:hover > span
  5790. { background: none;
  5791. box-shadow: none;}
  5792.  
  5793. .list-item.tes-featureonemode > span > span > .send-gift:hover
  5794. { background-color: var(--featureonemode-bgcolor);}
  5795.  
  5796. #userlist.tes-featureonemode > #header > span
  5797. { background-color: var(--featureonemode-bgcolor);
  5798. color:#ffffff}
  5799.  
  5800. /***------------------------------------FEATURETWOOO USERS------------------------------------***/
  5801.  
  5802. #userlist.tes-featuretwomode > #header > span {
  5803. background-color:#005900;
  5804. color:#000;}
  5805.  
  5806. #userlist.tes-featuretwomode > div > span
  5807. { background-color: #2a2a2abd;
  5808. color: var(--featuretwomode-textcolor);}
  5809.  
  5810. #userlist.tes-featuretwomode > div > span:hover
  5811. { background-color: var(--featuretwomode-lightbgcolor);
  5812. color: var(--featuretwomode-bordercolor);}
  5813.  
  5814. .tes-featuretwomode .list-item > span:hover > span
  5815. { background: none;
  5816. box-shadow: none;}
  5817.  
  5818. .list-item.tes-featuretwomode > span > span > .send-gift:hover
  5819. { background-color: var(--featuretwomode-bgcolor);}
  5820.  
  5821. #userlist.tes-featuretwomode > #header > span
  5822. { background-color: var(--featuretwomode-bgcolor);
  5823. color:#ffffff}
  5824.  
  5825. .tes-featuretwomode #userlist > div > span {background-color:#00ff00;}
  5826.  
  5827. /***------------------------------------FEATURETHREEE USERS------------------------------------***/
  5828. .tes-featurethreemode .tes-myNick {
  5829. color:#ffffff;
  5830. text-shadow: 0px 0px #000000;
  5831. background-image: url(https://i.ibb.co/hWh32Cp/19-190402-paint-brush-strokes-png-graphic-transparent-library-png.png);
  5832. background-size: 54px;
  5833. background-position: left center;
  5834. background-repeat: no-repeat;
  5835. }
  5836. .tes-myNick {
  5837. color:#ff0000;
  5838. }
  5839.  
  5840.  
  5841. #chatlist.tes-featurethreemod > div > span{color:#00ff00;}
  5842.  
  5843.  
  5844.  
  5845. #userlist.tes-featurethreemode > div > span {width:98%;}
  5846. #userlist.tes-featurethreemode {margin-left:2%;}
  5847.  
  5848. .tes-featurethreemode .nickname {margin-left:5px; !important;}
  5849. #userlist.tes-featurethreemode > #header > span {
  5850. background-image:none;
  5851. background-color: #0d0d0d;
  5852. border-radius: 100px;
  5853. color: #ffffff;
  5854. top: 0px;
  5855. border: 1px solid #51bc02;}
  5856.  
  5857. #userlist.tes-featurethreemode > div > span
  5858. { border-color: var(--featurethreemode-bordercolor);
  5859. background-image: var(--featurethreemode-messagebg);
  5860. border-radius: 14px;
  5861. margin-top: 2px;
  5862. color: var(--featurethreemode-textcolor);
  5863. font-weight: bold;
  5864. text-shadow: 1px 2px #2b6600;}
  5865.  
  5866. #userlist.tes-featurethreemode > div > span:hover
  5867. { border:1px solid #51bc02; background-color: #0d0d0d;;
  5868. background-image:none;
  5869. color: var(--featurethreemode-textcolor);
  5870. text-shadow: 1px 2px #000000;}
  5871.  
  5872. .tes-featurethreemode .list-item > span:hover > span
  5873. { background: none;
  5874. box-shadow: none;}
  5875.  
  5876. .list-item.tes-featurethreemode > span > span > .send-gift:hover
  5877. { background-color: var(--featurethreemode-bgcolor);}
  5878.  
  5879. .tes-featurethreemode #userlist > div > span {background-color:#00ff00;}
  5880.  
  5881. </style>
  5882. `;
  5883. userlistCSS.insertAdjacentHTML(insertPosition, userlistCSShtml);
  5884. }
  5885.  
  5886. { // userContextmenuCSS
  5887. userContextmenuCSShtml = `
  5888. <style id="userContextmenuCSS" scope="tinychat-user-contextmenu">` + globalCSS + `
  5889. #main {
  5890. border: 1px solid rgba(0, 0, 0, .1);
  5891. }
  5892. </style>
  5893. `;
  5894. userContextmenuCSS.insertAdjacentHTML(insertPosition, userContextmenuCSShtml);
  5895. }
  5896.  
  5897. { // bodyCSS
  5898. bodyCSShtml = `
  5899. <style id="bodyCSS">` + globalCSS + `
  5900.  
  5901. /*** --- START COLOR MODES --- ***/
  5902.  
  5903.  
  5904. /***------------------------------------PINKKK BODY---------------------------------***/
  5905.  
  5906. body.tes-pinkmode
  5907. { overflow: hidden;
  5908. background-color: var(--pinkmode-bgcolor)}
  5909.  
  5910. /***------------------------------------GREENNN BODY---------------------------------***/
  5911.  
  5912. body.tes-greenmode
  5913. { overflow: hidden;
  5914. background-color: var(--greenmode-bgcolor)}
  5915.  
  5916. /***------------------------------------BLUEEE BODY---------------------------------***/
  5917.  
  5918. body.tes-bluemode
  5919. { overflow: hidden;
  5920. background-color: var(--bluemode-bgcolor)}
  5921.  
  5922. /***------------------------------------PURPLEEE BODY---------------------------------***/
  5923.  
  5924. body.tes-purplemode
  5925. { overflow: hidden;
  5926. background-color: var(--purplemode-bgcolor)}
  5927.  
  5928. /***------------------------------------ORANGEEE BODY---------------------------------***/
  5929.  
  5930. body.tes-orangemode
  5931. { overflow: hidden;
  5932. background-color: var(--orangemode-bgcolor)}
  5933.  
  5934. /***------------------------------------REDDD BODY---------------------------------***/
  5935.  
  5936. body.tes-redmode
  5937. { overflow: hidden;
  5938. background-color: var(--redmode-bgcolor)}
  5939.  
  5940. /***------------------------------------DARKPURPLEEE BODY---------------------------------***/
  5941.  
  5942. body.tes-darkpurplemode
  5943. { overflow: hidden;
  5944. background-color: var(--darkpurplemode-bgcolor)}
  5945.  
  5946. /***------------------------------------WHITEEE BODY---------------------------------***/
  5947.  
  5948. body.tes-whitemode
  5949. { overflow: hidden;
  5950. background-color: var(--whitemode-bgcolor)}
  5951.  
  5952. /***------------------------------------FEATUREONEEE BODY---------------------------------***/
  5953.  
  5954. body.tes-featureonemode
  5955. { overflow: hidden;
  5956. background-color: var(--featureonemode-bgcolor)}
  5957.  
  5958. /***------------------------------------FEATURETWOOO BODY---------------------------------***/
  5959.  
  5960. body.tes-featuretwomode
  5961. { overflow: hidden;
  5962. background-color: var(--featuretwomode-bgcolor)}
  5963.  
  5964. /***------------------------------------FEATURETHREEE BODY---------------------------------***/
  5965.  
  5966. body.tes-featurethreemode
  5967. { overflow: hidden;
  5968. background-color: var(--featurethreemode-bgcolor);
  5969. background-image: var(--featurethreemode-roombg);
  5970.  
  5971. background-size:auto;}
  5972.  
  5973. .message {color:red;}
  5974.  
  5975.  
  5976.  
  5977.  
  5978. /*** --- END COLOR MODES --- ***/
  5979.  
  5980. body{
  5981. overflow: hidden;
  5982. background-color:#111111;}
  5983.  
  5984. #nav-static-wrapper {
  5985. width: 2px;
  5986. opacity: .7;
  5987. display:none;
  5988. visibility:hidden;}
  5989.  
  5990. #nav-static-wrapper {
  5991. width: 2px;
  5992. opacity: .7;
  5993. display:none;
  5994. visibility:hidden;}
  5995.  
  5996. #nav-static-wrapper.tes-sidemenuCollapsed{
  5997. display:none;
  5998. visibility:hidden;}
  5999.  
  6000. @media screen and (max-width: 1000px) {
  6001. #nav-static-wrapper {
  6002. width: 82px;
  6003. opacity: 1;}
  6004. }
  6005.  
  6006.  
  6007. #menu-icon {
  6008. transition: 1s;
  6009. display:none;}
  6010.  
  6011. .tes-sidemenuCollapsed #menu-icon {
  6012. z-index: -1;
  6013. opacity: 0;
  6014. display:none;}
  6015.  
  6016. .tes-sidemenuCollapsed #header-user {
  6017. display: none;}
  6018.  
  6019. @media screen and (max-width: 1000px) {
  6020. #header-user {
  6021. left: 21px;}
  6022.  
  6023. #videos-footer-youtube.tes-sidemenuCollapsed{
  6024. padding: 0px;
  6025. left:100px;
  6026. background-color:#f07629;}
  6027.  
  6028.  
  6029. body.tes-changefont {
  6030. font-family: sans-serif;}
  6031.  
  6032. #header-user {
  6033. left: 62px;}
  6034.  
  6035. @media screen and (max-width: 1000px) {
  6036. #header-user {
  6037. left: 21px;}
  6038. }
  6039.  
  6040. @media screen and (max-width: 600px) {
  6041. #header-user {
  6042. left: auto;
  6043. right: 54px;}
  6044. }
  6045.  
  6046. @media screen and (min-width: 1000px) {
  6047. #menu-icon:hover {
  6048. opacity: 1;}
  6049.  
  6050. #menu-icon {
  6051. top: 4px;
  6052. left: 19px;
  6053. height: 12px;
  6054. width: 109px;
  6055. font-size: 10px;
  6056. background: #04caff;
  6057. border-radius: 6px;
  6058. opacity: .8;
  6059. visibility: hidden;
  6060. display:none;}
  6061.  
  6062. #menu-icon:after {
  6063. position: absolute;
  6064. top: 3px;
  6065. left: 51px;
  6066. content: "";
  6067. height: 7px;
  6068. width: 7px;
  6069. border-width: 2px 2px 0px 0px;
  6070. border-style: solid;
  6071. border-color: #fff;
  6072. box-sizing: border-box;
  6073. transform: rotate(45deg);
  6074. transition: .2s;
  6075. visibility: hidden;}
  6076.  
  6077. #menu-icon:hover:after {
  6078. border-width: 0px 0px 2px 2px;
  6079. visibility: hidden;}
  6080.  
  6081. #menu-icon > svg {
  6082. opacity: 0;
  6083. visibility: hidden;}
  6084. }
  6085.  
  6086. #menu-icon {
  6087. visibility: hidden;
  6088. display:none;}
  6089. </style>
  6090. `;
  6091. bodyCSS.insertAdjacentHTML(insertPosition, bodyCSShtml);
  6092. }
  6093.  
  6094. messageCSS = `
  6095. .tes-nightmode { color: var(--nightmode-textcolor);}
  6096.  
  6097. .tes-nightmode.blacknight { color: white;}
  6098.  
  6099. .tes-mention-message { color: red !important; }
  6100.  
  6101. .tes-featurethreemode #chat-content > .message.system {
  6102. color: #51bc02;}
  6103.  
  6104. .tes-nightmode.tes-mention-message { color: #e44a3f; }
  6105. .tes-nightmode.message.system,
  6106. .tes-nightmode #chat-content > .message.system {
  6107. background-color: #313c3f;
  6108. color: #677174;}
  6109.  
  6110. .tes-nightmode.blacknight.message.system,
  6111. .tes-nightmode.blacknight #chat-content > .message.system {
  6112. background-color: transparent;
  6113. color: #4d4d4d;}
  6114.  
  6115. body.tes-pinkmode {
  6116. overflow: hidden;
  6117. background-color: var(--pinkmode-bgcolor)!important;}
  6118.  
  6119. .message.tes-orangemode,.message.tes-featurethreemode {
  6120. color: black;}
  6121.  
  6122. .message.system {
  6123. font-size: 12px;
  6124. font-weight: 600;
  6125. color: #8f999c;
  6126. left: 0px;}
  6127.  
  6128. .o
  6129. .tes-mention-message { color: red; }
  6130. .on-white-scroll {
  6131. padding-left: 16px;
  6132. box-sizing: border-box;
  6133. overflow-x: hidden;
  6134. overflow-y: hidden;}
  6135.  
  6136. .tes-featurethreemode.message {
  6137. font-size: 14px;
  6138. color: #000000;
  6139. white-space: pre-line;
  6140. word-wrap: break-word;
  6141. position: relative;
  6142. right: 12px;
  6143. font-weight:bold;
  6144. top: 3px;}
  6145.  
  6146.  
  6147. .message {
  6148. font-size: 14px;
  6149. color: #ffffff;
  6150. white-space: pre-line;
  6151. word-wrap: break-word;
  6152. position: relative;
  6153. right: 12px;
  6154. font-weight:bold;
  6155. top: 3px;}
  6156.  
  6157. `;
  6158.  
  6159. { // chatlogCSS
  6160. chatlogCSShtml = `
  6161. <style id="chatlogCSS" scope="tinychat-chatlog">` + globalCSS + `
  6162. /* HERE IS THE OTHER GRABBER */
  6163. #tes-chat-grabber {
  6164. position: absolute;
  6165. top: 88px;
  6166. right: 50%;tinychat-chatlog *
  6167. background: white;
  6168. width: 60px;
  6169. height: 20px;
  6170. border: #313131 1px solid;
  6171. border-radius: 19px;
  6172. text-align: center;
  6173. color: #b4c1c5;
  6174. cursor: pointer;
  6175. transition: all .4s ease-in-out;
  6176. background-color:#111111;}
  6177.  
  6178. .tes-chatCollapsed #tes-chat-grabber {
  6179. top: 0px;
  6180. background: #111111;
  6181. border-top: 0;
  6182. z-index: 9;
  6183. border-radius: 11px;
  6184. line-height: 15px;
  6185. border-top-left-radius: 0;
  6186. border-top-right-radius: 0;
  6187. height: 15px;}
  6188.  
  6189. .tes-chatCollapsed:hover #tes-chat-grabber {
  6190. height: 29px;
  6191. line-height: 43px;}
  6192.  
  6193. :host, #chat-wrapper.tes-chatCollapsed {
  6194. }
  6195.  
  6196.  
  6197. /* END */
  6198.  
  6199. .message a:first-child,
  6200. .message a:first-child img:first-child {
  6201. transition: .1s;
  6202. }
  6203. .message a:first-child:hover {
  6204. width: 100px!important;
  6205. height: 75px!important;
  6206. z-index: 1000;
  6207. }
  6208. .message a:first-child:hover img:first-child {
  6209. width: 100px;
  6210. height: 79px!important;
  6211. }
  6212. #chat-instant > a > .avatar, #chat-content > .message > a > .avatar:hover {border-radius:100%;}
  6213.  
  6214.  
  6215.  
  6216. #chat-instant > a > .status-icon, #chat-content > .message > a > .status-icon {
  6217. position: absolute;
  6218. height: 15px;
  6219. width: 15px;
  6220. top: 0px;
  6221. left: 315px;
  6222. padding: 3px;
  6223. border-radius: 100%;
  6224. background-color: #fff;}
  6225.  
  6226. .tes-featurethreemode #chat-content > .message > a > .status-icon {
  6227. left:293px;}
  6228.  
  6229. #chat-content > .message.system > .content {
  6230. font-size: 12px;
  6231. font-weight: 600;
  6232. color: #00ff00;
  6233. margin:10px;}
  6234.  
  6235. #chat-wrapper {
  6236. min-width: 350px;
  6237. border-left: 0px solid rgba(0, 0, 0, .1);
  6238. box-sizing: border-box;
  6239. background-color: #111111;
  6240. transition: .8s;}
  6241. #chat-wrapper.tes-whitemode {
  6242. min-width: 350px;
  6243. border-left: 1px solid rgba(0, 0, 0, .1);
  6244. box-sizing: border-box;
  6245. background-color: #111111;
  6246. transition: .8s;}
  6247.  
  6248. #chat-content > .message {
  6249. padding-bottom: 0;
  6250. padding-top: 0!important;
  6251. margin-bottom: 5px;
  6252. min-height: 0px!important;
  6253. color: #ff0000 !important;}
  6254.  
  6255. /*
  6256. #chat-content > .message:hover {
  6257. background: rgba(0, 0, 0, 0.03);
  6258. color: #ffffff;}
  6259. */
  6260.  
  6261. #chat-content > .message.common {
  6262. margin-bottom: 5px;
  6263. margin-right: 10px;
  6264. padding-bottom: 9px;
  6265. color: #353535 !important;
  6266. background-color: #2a2a2a;
  6267. border: 1px solid;
  6268. border-radius: 20px;}
  6269.  
  6270. #chat-content > .message.system {
  6271. box-sizing: border-box;
  6272. background-color: #0000006b;
  6273. cursor: default;
  6274. border: 1px solid #8f999c;
  6275. color: #8f999c;
  6276. border-radius:24px;
  6277. padding: 0px 0px;}
  6278. }
  6279.  
  6280. #chat-content.tes-notif-off > .message.system {
  6281. display: none;}
  6282.  
  6283. #chat-content.tes-notif-off > .message.system.dontHide {
  6284. display: initial;}
  6285.  
  6286. #chat-instant > a:first-child,
  6287. #chat-content > .message > a:first-child {
  6288. top: auto;}
  6289.  
  6290. #chat-position #input:before {
  6291. background: none;}
  6292.  
  6293. #input {
  6294. position: relative;
  6295. display: block;
  6296. padding-top: 10px;
  6297. margin-right: 25px;
  6298. overflow-wrap: break-word;}
  6299.  
  6300. #input > textarea{
  6301. overflow-y:auto;
  6302. background-color:#111111;
  6303. border:1px solid #313131;
  6304. color:#ffffff;}
  6305.  
  6306. #input:after {
  6307. content: "";
  6308. position: absolute;
  6309. display: block;
  6310. top: 10px;
  6311. left: 0;
  6312. right: 0;
  6313. bottom: 0;
  6314. border: 0px solid #cbcfcf;
  6315. border-radius: 12px;
  6316. box-sizing: border-box;
  6317. pointer-events: none;}
  6318.  
  6319. #input > .waiting {
  6320. position: absolute;
  6321. width: auto;
  6322. top: 10px;
  6323. bottom: 0;
  6324. left: 0;
  6325. right: 0;
  6326. border-radius: 12px;
  6327. background-color: #e9eaea;
  6328. z-index: 1;
  6329. opacity: 0;
  6330. visibility: hidden;
  6331. transition: .2s;}
  6332.  
  6333. #chat-position {
  6334. position: absolute;
  6335. display: flex;
  6336. flex-direction: column;
  6337. align-items: stretch;
  6338. top: 20px;
  6339. left: 10px;
  6340. right: -20px;
  6341. bottom: 19px;}
  6342.  
  6343. #chat-wider {
  6344. font-size: 0;
  6345. background-color: transparent;
  6346. border: 1px solid #313131;
  6347. cursor: pointer;
  6348. z-index: 1;
  6349. padding-top: 10px;
  6350. color: #3b3b3b;
  6351. position: absolute;
  6352. top: 47%;}
  6353.  
  6354. #chat-wider.active + #chat-wrapper {
  6355. min-width: 0px;}
  6356.  
  6357. #chat-wider.active {
  6358. left: -15px;
  6359. border-radius: 10px 0 0 10px;}
  6360.  
  6361. #chat-wider:before {
  6362. transform: rotate(180deg);
  6363. -webkit-transform: rotate(180deg);}
  6364.  
  6365. #chat-wider.active:before {
  6366. transform: rotate(0deg);
  6367. -webkit-transform: rotate(0deg);}
  6368.  
  6369. #chat-wider:hover {
  6370. background: #333;
  6371. color: #5c5c5c;
  6372. cursor: pointer;
  6373. border:0px;}
  6374.  
  6375. #chat-instant > a > .avatar,
  6376. #chat-content > .message > a > .avatar {
  6377. width:75%;
  6378. height:100%;
  6379. background-color: #666666;
  6380. border-top-left-radius: 100%;
  6381. border-bottom-left-radius: 100%;
  6382. border-top-right-radius: 0%;
  6383. border-bottom-right-radius: 0%;
  6384. overflow: hidden;}
  6385.  
  6386. #abovefiller{
  6387. border-radius: unset;}
  6388.  
  6389. #timestamp {
  6390. font-size: 11px;
  6391. color: #999999;
  6392. float: right;
  6393. position: absolute;
  6394. right: 0;
  6395. padding-top: 3px;
  6396. padding-right: 20px;
  6397. font-weight: 600;}
  6398.  
  6399. #chat-content > .message > .nickname {
  6400. overflow: initial;
  6401. line-height: initial;
  6402. position: relative;
  6403. right: 15px;
  6404. color: #00abfa;}
  6405.  
  6406. #chat-content div.message.common:last-of-type {
  6407. margin-bottom: 10px;
  6408. margin-right: 10px;}
  6409.  
  6410. #chat-instant-button.tes-loading {
  6411. border: 0;
  6412. font-size: x-large;
  6413. animation: spin .5s linear infinite;}
  6414.  
  6415. @keyframes spin {
  6416. 0% { transform: rotate(0deg); }
  6417. 100% { transform: rotate(360deg); }}
  6418.  
  6419. #tes-chatlogDisplay {
  6420. display: none;
  6421. position: fixed;
  6422. top: 121px;
  6423. left: 177px;
  6424. width: 90%;
  6425. height: 80%;
  6426. z-index: 7;
  6427. cursor: default;}
  6428.  
  6429. #tes-chatlogDisplay.show {
  6430. display: unset; }
  6431.  
  6432. #tes-chatlogDisplay * {
  6433. float: left;
  6434. height: 50%;}
  6435.  
  6436. #tes-chatlogDisplay textarea {
  6437. transition: .2s;
  6438. opacity: 0;
  6439. border-radius: 6px;
  6440. width: 90%;}
  6441.  
  6442. #tes-chatlogDisplay textarea.show {
  6443. opacity: 1;}
  6444.  
  6445. #tes-chatlogDisplay textarea.show {
  6446. background-color:#111111;
  6447. color:#17ff00;}
  6448.  
  6449. #tes-chatlogDisplay #close {
  6450. opacity: 0;
  6451. transition: .2s;
  6452. width: 30px;
  6453. background: #313131;
  6454. height: 30px;
  6455. border-radius: 10px;
  6456. position: relative;
  6457. color: white;
  6458. top: -1%;
  6459. left:-21px;
  6460. vertical-align: middle;
  6461. font-size: 22px;
  6462. text-align: center;
  6463. padding-top: 0px;
  6464. cursor: pointer;}
  6465.  
  6466. #tes-chatlogDisplay #close:hover {
  6467. background: #990000;}
  6468.  
  6469. #tes-chatlogDisplay #close.show {
  6470. opacity: 1;
  6471. border:1px solid #990000;}
  6472.  
  6473. #tes-chatlogButtons {
  6474. position: absolute;
  6475. top: 2px;
  6476. left: 6px;
  6477. font: 15px monospace;}
  6478.  
  6479. .tes-chatlogBut {
  6480. padding: 2px;
  6481. border-bottom-right-radius: 4px;
  6482. border-bottom-left-radius: 4px;
  6483. border: silver 0px solid;
  6484. color: silver;
  6485. transition: .3s;
  6486. width: 10px;
  6487. height: 10px;
  6488. overflow: hidden;
  6489. cursor: pointer;
  6490. opacity: 1;
  6491. float: left;}
  6492.  
  6493. .tes-chatlogBut:hover {
  6494. color: black;
  6495. border-color: #17ff00;}
  6496.  
  6497. .tes-chatlogBut ~ .tes-chatlogBut {
  6498. margin-left: 2px;}
  6499.  
  6500. .tes-chatlogBut .icon {
  6501. width: 10px;}
  6502.  
  6503. .tes-chatlogBut .label {
  6504. width: 0;
  6505. opacity: 0;
  6506. overflow: hidden;
  6507. transition: .3s;
  6508. display: block;
  6509. position: relative;
  6510. top: -2px;
  6511. left: 13px;
  6512. font: 11px sans-serif;
  6513. color: black;}
  6514.  
  6515. .tes-chatlogBut:hover .label {
  6516. opacity: 1;
  6517. color: #17ff00;}
  6518.  
  6519. .tes-chatboxPM #tes-chatlogSave {
  6520. opacity: 0;
  6521. z-index: -5;
  6522. }
  6523. #tes-chatlogSave .icon {
  6524. /* transform: scaleY(.6); */
  6525. position: absolute;
  6526. top: -1px;
  6527. left: 4px;}
  6528.  
  6529. #tes-chatlogSave .icon svg {
  6530. width: 19px;
  6531. height: 19px;
  6532. position: relative;
  6533. left: -3px;}
  6534.  
  6535. #tes-chatlogSave .icon path {
  6536. transform: scale(.08) scaleX(1.2) rotate(180deg);
  6537. fill: #ccc;
  6538. transform-origin: 11px 12px;}
  6539.  
  6540. #tes-chatlogSave:hover .icon path {
  6541. fill: #17ff00;
  6542. border}
  6543.  
  6544. #tes-chatlogSave:hover {
  6545. }
  6546.  
  6547. #tes-chatlogSave:hover .label {
  6548. }
  6549.  
  6550. #tes-chatlogView .icon {
  6551. font-size: 10px;
  6552. top: 1px;
  6553. position: absolute;}
  6554.  
  6555. #tes-chatlogView:hover {
  6556. color:#17ff00;}
  6557.  
  6558.  
  6559. /*** --- START COLOR MODES --- ***/
  6560.  
  6561. /***------------------------------------PINKKK CHAT---------------------------------***/
  6562.  
  6563. .tes-pinkmode #input > textarea
  6564. { background-color: var(--pinkmode-bordercolor);
  6565. border-color: var(--pinkmode-bordercolor);
  6566. color:#000000;}
  6567.  
  6568. .tes-pinkmode #input > textarea::placeholder
  6569. { color:#FFFFFF;}
  6570.  
  6571. .tes-pinkmode #chat-wider:before,
  6572. #chat-wider.tes-pinkmode
  6573. { background-color: var(--pinkmode-bgcolor);
  6574. border:1px solid var(--pinkmode-bordercolor) !important;}
  6575.  
  6576. .tes-pinkmode #chat-wider:hover
  6577. { background-color: var(--pinkmode-bordercolor);
  6578. border:1px solid var(--pinkmode-bgcolor) !important;}
  6579.  
  6580. #chat-wrapper.tes-pinkmode
  6581. { background-color:var(--pinkmode-bgcolor);}
  6582.  
  6583. .tes-pinkmode #chat-content > .message.common
  6584. { border-color: var(--pinkmode-bordercolor);
  6585. background-color: var(--pinkmode-bordercolor);}
  6586.  
  6587. .tes-pinkmode #timestamp
  6588. { color: var(--pinkmode-bgcolor);}
  6589.  
  6590. .tes-pinkmode#chat-wider:before
  6591. { border-color: transparent var(--pinkmode-bordercolor);}
  6592.  
  6593.  
  6594. /***------------------------------------GREENNN CHAT---------------------------------***/
  6595.  
  6596. .tes-greenmode #input > textarea
  6597. { background-color: var(--greenmode-bordercolor);
  6598. border-color: var(--greenmode-bordercolor);
  6599. color:#000000;}
  6600.  
  6601. .tes-greenmode #input > textarea::placeholder
  6602. { color:#FFFFFF;}
  6603.  
  6604. .tes-greenmode #chat-wider:before,
  6605. #chat-wider.tes-greenmode
  6606. { background-color: var(--greenmode-bgcolor);
  6607. border: 1px solid var(--greenmode-bordercolor) !important;}
  6608.  
  6609. .tes-greenmode #chat-wider:hover
  6610. { background-color: var(--greenmode-bordercolor);
  6611. border: 1px solid var(--greenmode-bgcolor) !important;}
  6612.  
  6613. #chat-wrapper.tes-greenmode
  6614. { background-color:var(--greenmode-bgcolor);}
  6615.  
  6616. .tes-greenmode #chat-content > .message.common
  6617. { border-color: var(--greenmode-bordercolor);
  6618. background-color: var(--greenmode-bordercolor);}
  6619.  
  6620. .tes-greenmode #timestamp
  6621. { color: var(--greenmode-bgcolor);}
  6622.  
  6623. .tes-greenmode#chat-wider:before
  6624. { border-color: transparent var(--greenmode-bordercolor);}
  6625.  
  6626. /***------------------------------------BLUEEE CHAT---------------------------------***/
  6627.  
  6628. .tes-bluemode #input > textarea
  6629. { background-color: var(--bluemode-bordercolor);
  6630. border-color: var(--bluemode-bordercolor);
  6631. color:#000000;}
  6632.  
  6633. .tes-bluemode #input > textarea::placeholder
  6634. { color:#FFFFFF;}
  6635.  
  6636. .tes-bluemode #chat-wider:before,
  6637. #chat-wider.tes-bluemode
  6638. { background-color: var(--bluemode-bgcolor);
  6639. border: 1px solid var(--bluemode-bordercolor) !important;}
  6640.  
  6641. .tes-bluemode #chat-wider:hover
  6642. { background-color: var(--bluemode-bordercolor);
  6643. border: 1px solid var(--bluemode-bgcolor) !important;}
  6644.  
  6645. #chat-wrapper.tes-bluemode
  6646. { background-color:var(--bluemode-bgcolor);}
  6647.  
  6648. .tes-bluemode #chat-content > .message.common
  6649. { border-color: var(--bluemode-bordercolor);
  6650. background-color: var(--bluemode-bordercolor);}
  6651.  
  6652. .tes-bluemode #timestamp
  6653. { color: var(--bluemode-bgcolor);}
  6654.  
  6655. .tes-bluemode#chat-wider:before
  6656. { border-color: transparent var(--bluemode-bordercolor);}
  6657.  
  6658. /***------------------------------------PURPLEEE CHAT---------------------------------***/
  6659.  
  6660. .tes-purplemode #input > textarea
  6661. { background-color: var(--purplemode-lightbgcolor);
  6662. border-color: var(--purplemode-lightbgcolor);
  6663. color:#000000;}
  6664.  
  6665. .tes-purplemode #input > textarea::placeholder
  6666. { color:#FFFFFF;}
  6667.  
  6668. .tes-purplemode #chat-wider:before,
  6669. #chat-wider.tes-purplemode
  6670. { background-color: var(--purplemode-bgcolor);
  6671. border: 1px solid var(--purplemode-bordercolor) !important;}
  6672.  
  6673. .tes-purplemode #chat-wider:hover
  6674. { background-color: var(--purplemode-bordercolor);
  6675. border: 1px solid var(--purplemode-bgcolor) !important;}
  6676.  
  6677. #chat-wrapper.tes-purplemode
  6678. { background-color:var(--purplemode-bgcolor);}
  6679.  
  6680. .tes-purplemode #chat-content > .message.common
  6681. { border-color: var(--purplemode-lightbgcolor);
  6682. background-color: var(--purplemode-lightbgcolor);}
  6683.  
  6684. .tes-purplemode #timestamp
  6685. { color: var(--purplemode-bgcolor);}
  6686.  
  6687. .tes-purplemode#chat-wider:before
  6688. { border-color: transparent var(--purplemode-bordercolor);}
  6689.  
  6690. /***------------------------------------ORANGEEE CHAT---------------------------------***/
  6691.  
  6692. .tes-orangemode #input > textarea
  6693. { background-color: var(--orangemode-lightbgcolor);
  6694. border-color: var(--orangemode-lightbgcolor);
  6695. color:#000000;}
  6696.  
  6697. .tes-orangemode #input > textarea::placeholder
  6698. { color:#FFFFFF;}
  6699.  
  6700. .tes-orangemode #chat-wider:before,
  6701. #chat-wider.tes-orangemode
  6702. { background-color: var(--orangemode-bgcolor);
  6703. border: 1px solid var(--orangemode-bordercolor) !important;}
  6704.  
  6705. .tes-orangemode #chat-wider:hover
  6706. { background-color: var(--orangemode-bordercolor);
  6707. border: 1px solid var(--orangemode-bgcolor) !important;}
  6708.  
  6709. #chat-wrapper.tes-orangemode
  6710. { background-color:var(--orangemode-bgcolor);}
  6711.  
  6712. .tes-orangemode #chat-content > .message.common
  6713. { border-color: var(--orangemode-lightbgcolor);
  6714. background-color: var(--orangemode-lightbgcolor);}
  6715.  
  6716. .tes-orangemode #timestamp
  6717. { color: var(--orangemode-bgcolor);}
  6718.  
  6719. .tes-orangemode#chat-wider:before
  6720. { border-color: transparent var(--orangemode-bordercolor);}
  6721.  
  6722. /***------------------------------------REDDD CHAT---------------------------------***/
  6723.  
  6724. .tes-redmode #input > textarea
  6725. { background-color: var(--redmode-lightbgcolor);
  6726. border-color: var(--redmode-lightbgcolor);
  6727. color:#000000;}
  6728.  
  6729. .tes-redmode #input > textarea::placeholder
  6730. { color:#FFFFFF;}
  6731.  
  6732. .tes-redmode #chat-wider:before,
  6733. #chat-wider.tes-redmode
  6734. { background-color: var(--redmode-bgcolor);
  6735. border: 1px solid var(--redmode-bordercolor) !important;}
  6736.  
  6737. .tes-redmode #chat-wider:hover
  6738. { background-color: var(--redmode-bordercolor);
  6739. border: 1px solid var(--redmode-bgcolor) !important;}
  6740.  
  6741. #chat-wrapper.tes-redmode
  6742. { background-color:var(--redmode-bgcolor);}
  6743.  
  6744. .tes-redmode #chat-content > .message.common
  6745. { border-color: var(--redmode-lightbgcolor);
  6746. background-color: var(--redmode-lightbgcolor);}
  6747.  
  6748. .tes-redmode #timestamp
  6749. { color: var(--redmode-bgcolor);}
  6750.  
  6751. .tes-redmode#chat-wider:before
  6752. { border-color: transparent var(--redmode-bordercolor);}
  6753.  
  6754.  
  6755. /***------------------------------------DARKPURPLEEE CHAT---------------------------------***/
  6756.  
  6757. .tes-darkpurplemode #input > textarea
  6758. { background-color: var(--darkpurplemode-lightbgcolor);
  6759. border-color: var(--darkpurplemode-lightbgcolor);
  6760. color:#000000;}
  6761.  
  6762. .tes-darkpurplemode #input > textarea::placeholder
  6763. { color:#FFFFFF;}
  6764.  
  6765. .tes-darkpurplemode #chat-wider:before,
  6766. #chat-wider.tes-darkpurplemode
  6767. { background-color: var(--darkpurplemode-bgcolor);
  6768. border: 1px solid var(--darkpurplemode-bordercolor) !important;}
  6769.  
  6770. .tes-darkpurplemode #chat-wider:hover
  6771. { background-color: var(--darkpurplemode-bordercolor);
  6772. border: 1px solid var(--darkpurplemode-bgcolor) !important;}
  6773.  
  6774. #chat-wrapper.tes-darkpurplemode
  6775. { background-color:var(--darkpurplemode-bgcolor);}
  6776.  
  6777. .tes-darkpurplemode #chat-content > .message.common
  6778. { border-color: var(--darkpurplemode-lightbgcolor);
  6779. background-color: var(--darkpurplemode-lightbgcolor);}
  6780.  
  6781. .tes-darkpurplemode #timestamp
  6782. { color: var(--darkpurplemode-bgcolor);}
  6783.  
  6784. .tes-darkpurplemode#chat-wider:before
  6785. { border-color: transparent var(--darkpurplemode-bordercolor);}
  6786.  
  6787. /***------------------------------------WHITEEE CHAT---------------------------------***/
  6788.  
  6789. .tes-whitemode #input > textarea
  6790. { background-color: var(--whitemode-bordercolor);
  6791. border-color: var(--whitemode-bordercolor);
  6792. color:#000000;}
  6793.  
  6794. .tes-whitemode #input > textarea::placeholder
  6795. { color:#000000;}
  6796.  
  6797. .tes-whitemode #chat-wider:before,
  6798. #chat-wider.tes-whitemode
  6799. { background-color: var(--whitemode-lightbgcolor);
  6800. border: 1px solid var(--whitemode-bordercolor) !important;}
  6801.  
  6802. .tes-whitemode #chat-wider:hover
  6803. { background-color: var(--whitemode-bordercolor);
  6804. border: 1px solid var(--whitemode-bgcolor) !important;}
  6805.  
  6806. #chat-wrapper.tes-whitemode
  6807. { background-color:var(--whitemode-lightbgcolor);}
  6808.  
  6809. .tes-whitemode #chat-content > .message.common
  6810. { border-color: var(--whitemode-bgcolor);
  6811. background-color: var(--whitemode-bgcolor);}
  6812.  
  6813. .tes-whitemode #timestamp
  6814. { color: var(--whitemode-bgcolor);}
  6815.  
  6816. .tes-whitemode#chat-wider:before
  6817. { border-color: transparent var(--whitemode-bordercolor);}
  6818.  
  6819. /***------------------------------------FEATUREONEEE CHAT---------------------------------***/
  6820.  
  6821. .tes-featureonemode #input > textarea
  6822. { background-color: var(--featureonemode-bordercolor);
  6823. border-color: var(--featureonemode-bordercolor);
  6824. color:#000000;}
  6825.  
  6826. .tes-featureonemode #input > textarea::placeholder
  6827. { color:#000000;}
  6828.  
  6829. .tes-featureonemode #chat-wider:before,
  6830. #chat-wider.tes-featureonemode
  6831. { background-color: var(--featureonemode-lightbgcolor);
  6832. border: 1px solid var(--featureonemode-bordercolor) !important;}
  6833.  
  6834. .tes-featureonemode #chat-wider:hover
  6835. { background-color: var(--featureonemode-bordercolor);
  6836. border: 1px solid var(--featureonemode-bgcolor) !important;}
  6837.  
  6838. #chat-wrapper.tes-featureonemode
  6839. { background-color:var(--featureonemode-lightbgcolor);}
  6840.  
  6841. .tes-featureonemode #chat-content > .message.common
  6842. { border-color: var(--featureonemode-bgcolor);
  6843. background-color: var(--featureonemode-bgcolor);}
  6844.  
  6845. .tes-featureonemode #timestamp
  6846. { color: var(--featureonemode-bgcolor);}
  6847.  
  6848. .tes-featureonemode#chat-wider:before
  6849. { border-color: transparent var(--featureonemode-bordercolor);}
  6850.  
  6851. #chat-wrapper.tes-featureonemode {
  6852. background-color: #242424;
  6853. background-image: var(--featureonemode-chatbg);
  6854. background-position: center center;
  6855. background-blend-mode: overlay;
  6856. background-size: cover;}
  6857.  
  6858. /***------------------------------------FEATURETWOOO CHAT---------------------------------***/
  6859.  
  6860. .tes-featuretwomode #input > textarea
  6861. { background-color: var(--featuretwomode-bordercolor);
  6862. border-color: var(--featuretwomode-bordercolor);
  6863. color:#000000;}
  6864.  
  6865. .tes-featuretwomode #input > textarea::placeholder
  6866. { color:#000000;}
  6867.  
  6868. .tes-featuretwomode #chat-wider:before,
  6869. #chat-wider.tes-featuretwomode
  6870. { background-color: var(--featuretwomode-lightbgcolor);
  6871. border: 1px solid var(--featuretwomode-bordercolor) !important;}
  6872.  
  6873. .tes-featuretwomode #chat-wider:hover
  6874. { background-color: var(--featuretwomode-bordercolor);
  6875. border: 1px solid var(--featuretwomode-bgcolor) !important;}
  6876.  
  6877. #chat-wrapper.tes-featuretwomode
  6878. { background-color:var(--featuretwomode-lightbgcolor);
  6879. border-left: 1px solid var(--featuretwomode-bordercolor);}
  6880.  
  6881. .tes-featuretwomode #chat-content > .message.common
  6882. { border-color: var(--featuretwomode-bordercolor);
  6883. background-color: #2a2a2abd;}
  6884.  
  6885. .tes-featuretwomode #timestamp
  6886. { color: var(--featuretwomode-textcolor);}
  6887.  
  6888. .tes-featuretwomode#chat-wider:before
  6889. { border-color: transparent var(--featuretwomode-bordercolor);}
  6890.  
  6891. #chat-wrapper.tes-featuretwomode {
  6892. background-color: #242424;
  6893. background-image: var(--featuretwomode-chatbg);
  6894. background-position: center center;
  6895. background-size: cover;}
  6896.  
  6897. /***------------------------------------FEATURETHREEE CHAT---------------------------------***/
  6898.  
  6899. .tes-featurethreemode #input > textarea
  6900. { background-color: transparent;
  6901. border-color: #51bc02;
  6902. color:#FFFFFF;
  6903. width: 95%;
  6904. margin-left: 17px;}
  6905.  
  6906. .tes-featurethreemode #input > textarea::placeholder
  6907. { color:#51bc02;}
  6908.  
  6909.  
  6910.  
  6911. .tes-featurethreemode#chat-wider{
  6912. background-image: var(--featurethreemode-squid2);
  6913. background-size: 25px;
  6914. background-repeat: no-repeat;
  6915. background-color: transparent;
  6916. border-color: var(--featurethreemode-bordercolor);
  6917. height: 13px;
  6918. width: 26px;
  6919. border-left:0px;
  6920. border-top:0px;
  6921. border-bottom:0px;}
  6922.  
  6923. .tes-featurethreemode#chat-wider:hover {background-color:#00ff00;}
  6924.  
  6925.  
  6926. #chat-wider.tes-featurethreemode.active {
  6927. -webkit-transform: rotate(180deg);
  6928. transform: rotate(180deg);
  6929. border-radius:50px;
  6930. }
  6931.  
  6932.  
  6933. .tes-featurethreemode.message{color#000000 !important;}
  6934. .tes-featurethreemode .message{color#000000 !important;}
  6935. .message.tes-featurethreemode{color#000000 !important;}
  6936. .message .tes-featurethreemode{color#000000 !important;}
  6937.  
  6938.  
  6939.  
  6940. .tes-featurethreemode.tes-sidemenuCollapsed#chat-wider {
  6941. -webkit-transform: rotate(180deg);
  6942. transform: rotate(180deg);
  6943. border-radius:50px;
  6944. }
  6945.  
  6946. ----
  6947.  
  6948.  
  6949.  
  6950. .tes-featurethreemode#chat-wider:before {
  6951. background-color: var(--featurethreemode-lightbgcolor);
  6952. border: 1px solid var(--featurethreemode-bordercolor) !important;
  6953. display:none !important;}
  6954.  
  6955. .tes-featurethreemode #chat-wider:hover {
  6956. background-color: var(--featurethreemode-bordercolor);
  6957. border: 1px solid var(--featurethreemode-bgcolor) !important;}
  6958.  
  6959. #chat-wrapper.tes-featurethreemode {
  6960. min-width:344px;background-color:var(--featurethreemode-lightbgcolor);
  6961. border-left: 0px solid var(--featurethreemode-bordercolor);
  6962. }
  6963. @keyframes animatedBackground {
  6964. from { background-position: 0 0; }
  6965. to { background-position: 0 100%; }
  6966. }
  6967.  
  6968.  
  6969.  
  6970.  
  6971. /*--------------*/
  6972.  
  6973. .tes-featurethreemode #chat-content > .message.common {
  6974. border-color: var(--featurethreemode-bordercolor);
  6975. background-image: var(--featurethreemode-messagebg);
  6976. background-color: #51bc02;
  6977. margin-left:17px;}
  6978.  
  6979. .tes-featurethreemode #chat-content > .message {
  6980. border-color: #51bc02;margin-left:10px;color: #51bc02 !important;}
  6981.  
  6982. .tes-featurethreemode #chat-content > .system {
  6983. color: #51bc02 !important;}
  6984. .tes-featurethreemode #chat-content > .blacknight {
  6985. color: #51bc02 !important;}
  6986.  
  6987. .tes-featurethreemode #chat-content > .system {
  6988. border-color: #51bc02;margin-left:10px;color: #51bc02 !important;}
  6989.  
  6990. .tes-featurethreemode #timestamp{ color: var(--featurethreemode-textcolor);}
  6991.  
  6992. .tes-featurethreemode#chat-wider:before{ border-color: transparent var(--featurethreemode-bordercolor);}
  6993.  
  6994. #chat-wrapper.tes-featurethreemode {
  6995. border-radius: 18px;
  6996. background-color: transparent;
  6997. background-image: var(--featurethreemode-chatbg);
  6998. background-position: center center;
  6999. background-position: 0px 0px;
  7000. background-repeat: repeat-y;
  7001.  
  7002. animation: animatedBackground 10s linear infinite;
  7003. }
  7004.  
  7005. #chat-content.tes-featurethreemode > .message {
  7006. box-sizing: border-box;
  7007. background-color: #0000006b;
  7008. cursor: default;
  7009. border: 1px solid #000000;
  7010. color: #000000;
  7011. border-radius:24px;
  7012. padding: 0px 0px;}
  7013. }
  7014.  
  7015. /*#chat-content > .message > .nickname {
  7016. color:#000000;
  7017. }*/
  7018.  
  7019. .tes-featurethreemode#chat-content > .tes-featurethreemode.message > .tes-featurethreemode.nickname {color:#000000;}
  7020.  
  7021. .tes-featurethreemode #chat-content > .message > .nickname {color:#000000;}
  7022.  
  7023.  
  7024.  
  7025. </style>
  7026. `;
  7027. chatlogCSS.insertAdjacentHTML(insertPosition, chatlogCSShtml);
  7028. }
  7029.  
  7030. { // sidemenuCSS
  7031. var firefoxCSS = "";
  7032. if (browserSpoofedChrome) {
  7033. firefoxCSS = `
  7034. #sidemenu {
  7035. left: 0!important;
  7036. transition: all .4s ease-in-out;
  7037. }
  7038. `;
  7039. }
  7040. sidemenuCSShtml = `
  7041. <style id="sidemenuCSS" scope="tinychat-sidemenu">` + globalCSS + `
  7042. #sidemenu {
  7043. min-width: 162px;
  7044. max-width: 162px;
  7045. left: 0px;
  7046. background-color: #191919;
  7047. /* background-image:url('http://i68.tinypic.com/2rp4ncm.png'); */
  7048. background-position: right top;
  7049. background-size: 100%;
  7050. border-right:1px solid #313131;
  7051. transition: all .4s ease-in-out;
  7052. z-index:3;}
  7053. ` + firefoxCSS +
  7054. `
  7055. #sidemenu-content {
  7056. height: 90%;
  7057. padding-top: 30px;
  7058. box-sizing: border-box;
  7059. padding-left: 0px;
  7060. overflow-x: hidden;
  7061. overflow-y: auto;
  7062. background-color: #191919;
  7063. /* background-image:url('http://i68.tinypic.com/2rp4ncm.png'); */
  7064. background-position: right top;
  7065. background-size: 100%;
  7066. border-right:0px solid;}
  7067.  
  7068. #user-info {
  7069. position: absolute;
  7070. height: 80px;
  7071. width: 100%;
  7072. bottom: 0;
  7073. left: 0;
  7074. padding: 20px 30px 20px 20px;
  7075. border-top: 1px solid rgba(0, 0, 0, .1);
  7076. box-sizing: border-box;
  7077. background-color: #2a2a2a;
  7078. display: none; visibility:hidden;}
  7079.  
  7080. @media screen and (max-width: 1000px) {
  7081. #sidemenu {
  7082. left: -188px;transition: all .4s ease-in-out;}
  7083. }
  7084.  
  7085. #live-directory-wrapper {
  7086. padding: 0;}
  7087.  
  7088. #top-buttons-wrapper {
  7089. padding: 0;}
  7090.  
  7091. .logged-in #user-info {
  7092. padding: 0;
  7093. height: auto;
  7094. text-align: center;
  7095. visibility: hidden;
  7096. display: none;}
  7097.  
  7098. #user-info button {
  7099. opacity: .8;}
  7100.  
  7101. #user-info:hover button {
  7102. opacity: 1;}
  7103.  
  7104. .logged-in #user-info > a {
  7105. display: none;
  7106. visibility:hidden;}
  7107.  
  7108. @media screen and (min-width: 1000px) {
  7109. #live-directory {
  7110. height: 25px;
  7111. line-height: 25px;
  7112. font-size: 13px;
  7113. opacity: .8;
  7114. margin-left: 24px;
  7115. width: 150px;
  7116. background-color:#111111;
  7117. border:1px solid #313131;
  7118. position: relative;
  7119. top: -25px;}
  7120.  
  7121. #upgrade {
  7122. height: 0px;
  7123. line-height: 0px;
  7124. font-size: 13px;
  7125. opacity: .8;}
  7126.  
  7127. #live-directory:before {
  7128. height: 8px;
  7129. width: 8px;
  7130. top: 0px;}
  7131.  
  7132. #upgrade {
  7133. margin-top: 0px;
  7134. visibility: hidden;
  7135. display: none;}
  7136.  
  7137. #live-directory:hover, #upgrade:hover {
  7138. opacity: 1;
  7139. background-color:#222222;}
  7140. }
  7141.  
  7142. #sidemenu.tes-sidemenuCollapsed {
  7143. min-width: 0px;
  7144. max-width: 0px;
  7145. border:0px;}
  7146.  
  7147.  
  7148. #tes-sidemenu-grabber {
  7149. position: absolute;
  7150. top: 47%;
  7151. right: 0;
  7152. left: 153px;
  7153. background: #111111;
  7154. color: #536165;
  7155. z-index: 3;
  7156. border-radius: 10px;
  7157. border-right: 0px;
  7158. border-bottom: 0px;
  7159. border-top: 0px;
  7160. height: 34px;
  7161. padding-top: 19px;
  7162. width: 16px;
  7163. text-align: center;
  7164. transition: all .4s ease-in-out;
  7165. border-left: #313131 1px solid;}
  7166.  
  7167. #tes-sidemenu-grabber:before {
  7168. content: '';
  7169. position: absolute;
  7170. display: block;
  7171. height: 0;
  7172. width: 0;
  7173. top: 50%;
  7174. left: 50%;
  7175. margin: -4px 0 0 -2px;
  7176. border-width: 4px 4px 4px 0;
  7177. border-style: solid;
  7178. border-color: #cbcfcf;
  7179. transition: .8s;}
  7180.  
  7181. #tes-sidemenu-grabber:hover {
  7182. background: #333;
  7183. color: #5c5c5c;
  7184. cursor: pointer;}
  7185.  
  7186. .tes-sidemenuCollapsed #tes-sidemenu-grabber{
  7187. border-radius: 0 10px 10px 0;
  7188. right: -15px;
  7189. left: -4px;}
  7190. #tes-sidemenu-grabber:before {border-color: transparent #cbcfcf;}
  7191.  
  7192. #sidemenu.tes-nightmode{
  7193. background: #191919;}
  7194.  
  7195. .tes-nightmode #sidemenu-content::-webkit-scrollbar-track {
  7196. background: transparent;}
  7197. #sidemenu-content::-webkit-scrollbar-track {
  7198. background: transparent;}
  7199.  
  7200. .tes-nightmode #tes-sidemenu-grabber {
  7201. background: #111111;}
  7202.  
  7203. .tes-nightmode #tes-sidemenu-grabber:hover {
  7204. background: #333;
  7205. color: #5c5c5c;}
  7206.  
  7207. .tes-sidemenuCollapsed #tes-sidemenu-grabber:before {
  7208. transform: rotate(180deg);
  7209. -webkit-transform: rotate(180deg);}
  7210.  
  7211. .tes-nightmode #user-info {
  7212. background: black;}
  7213.  
  7214. .tes-nightmode #user-info > button {
  7215. background: #035268;
  7216. color: #aaa;}
  7217.  
  7218. .tes-nightmode #user-info > button:hover {
  7219. background: #0080a3;
  7220. color: white;}
  7221.  
  7222. .tes-nightmode #sidemenu-content::-webkit-scrollbar-thumb {
  7223. border: 1px solid #191919;
  7224. width:50%;
  7225. background-color: #111;}
  7226.  
  7227. .tes-nightmode #sidemenu-content::-webkit-scrollbar {
  7228. width: 5px;}
  7229.  
  7230. /*** --- START COLOR MODES --- ***/
  7231.  
  7232.  
  7233. /***------------------------------------PINKKK SIDEMENU------------------------------------***/
  7234.  
  7235. #sidemenu.tes-pinkmode,
  7236. .tes-pinkmode #sidemenu-content::-webkit-scrollbar-track
  7237. { background: var(--pinkmode-lightbgcolor);}
  7238.  
  7239. .tes-pinkmode #sidemenu-content::-webkit-scrollbar-thumb
  7240. { border-color: var(--pinkmode-bgcolor);
  7241. background-color: var(--pinkmode-bgcolor);
  7242. width:50%;}
  7243.  
  7244. .tes-pinkmode #tes-sidemenu-grabber:before {
  7245. border-color: transparent var(--pinkmode-bordercolor);}
  7246.  
  7247. #sidemenu.tes-pinkmode > #tes-sidemenu-grabber
  7248. { background-color: var(--pinkmode-bgcolor);
  7249. border-color: var(--pinkmode-bordercolor);}
  7250.  
  7251. #sidemenu.tes-pinkmode
  7252. { background-color: var(--pinkmode-lightbgcolor);
  7253. border-color: var(--pinkmode-bordercolor);}
  7254.  
  7255. #sidemenu.tes-pinkmode > #sidemenu-content
  7256. { background-color: var(--pinkmode-lightbgcolor);}
  7257.  
  7258. @media screen and (min-width: 1000px)
  7259. {.tes-pinkmode #live-directory
  7260. { margin-left:10px;
  7261. width:175px;
  7262. background-color: var(--pinkmode-bgcolor);
  7263. border:1px solid var(--pinkmode-bordercolor);}
  7264.  
  7265. .tes-pinkmode #tes-sidemenu-grabber,
  7266. #chat-wrapper.tes-pinkmode
  7267. { background-color: var(--pinkmode-bgcolor);}
  7268.  
  7269. /***------------------------------------GREENNN SIDEMENU------------------------------------***/
  7270.  
  7271. #sidemenu.tes-greenmode,
  7272. .tes-greenmode #sidemenu-content::-webkit-scrollbar-track
  7273. { background: var(--greenmode-lightbgcolor);}
  7274.  
  7275. .tes-greenmode #sidemenu-content::-webkit-scrollbar-thumb
  7276. { border-color: var(--greenmode-bgcolor);
  7277. background-color: var(--greenmode-bgcolor);
  7278. width:50%;}
  7279.  
  7280. .tes-greenmode #tes-sidemenu-grabber:before {
  7281. border-color: transparent var(--greenmode-bordercolor);}
  7282.  
  7283. #sidemenu.tes-greenmode > #tes-sidemenu-grabber
  7284. { background-color: var(--greenmode-bgcolor);
  7285. border-color: var(--greenmode-bordercolor);}
  7286.  
  7287. #sidemenu.tes-greenmode
  7288. { background-color: var(--greenmode-lightbgcolor);
  7289. border-color: var(--greenmode-bordercolor);}
  7290.  
  7291. #sidemenu.tes-greenmode > #sidemenu-content
  7292. { background-color: var(--greenmode-lightbgcolor);}
  7293.  
  7294. @media screen and (min-width: 1000px)
  7295. {.tes-greenmode #live-directory
  7296. { margin-left:10px;
  7297. width:175px;
  7298. background-color: var(--greenmode-bgcolor);
  7299. border:1px solid var(--greenmode-bordercolor);}
  7300.  
  7301. .tes-greenmode #tes-sidemenu-grabber,
  7302. #chat-wrapper.tes-greenmode
  7303. { background-color: var(--greenmode-bgcolor);}
  7304.  
  7305. /***------------------------------------BLUEEE SIDEMENU------------------------------------***/
  7306.  
  7307. #sidemenu.tes-bluemode,
  7308. .tes-bluemode #sidemenu-content::-webkit-scrollbar-track
  7309. { background: var(--bluemode-lightbgcolor);}
  7310.  
  7311. .tes-bluemode #sidemenu-content::-webkit-scrollbar-thumb
  7312. { border-color: var(--bluemode-bgcolor);
  7313. background-color: var(--bluemode-bgcolor);
  7314. width:50%;}
  7315.  
  7316. .tes-bluemode #tes-sidemenu-grabber:before {
  7317. border-color: transparent var(--bluemode-bordercolor);}
  7318.  
  7319. #sidemenu.tes-bluemode > #tes-sidemenu-grabber
  7320. { background-color: var(--bluemode-bgcolor);
  7321. border-color: var(--bluemode-bordercolor);}
  7322.  
  7323. #sidemenu.tes-bluemode
  7324. { background-color: var(--bluemode-lightbgcolor);
  7325. border-color: var(--bluemode-bordercolor);}
  7326.  
  7327. #sidemenu.tes-bluemode > #sidemenu-content
  7328. { background-color: var(--bluemode-lightbgcolor);}
  7329.  
  7330. @media screen and (min-width: 1000px)
  7331. {.tes-bluemode #live-directory
  7332. { margin-left:10px;
  7333. width:175px;
  7334. background-color: var(--bluemode-bgcolor);
  7335. border:1px solid var(--bluemode-bordercolor);}
  7336.  
  7337. .tes-bluemode #tes-sidemenu-grabber,
  7338. #chat-wrapper.tes-bluemode
  7339. { background-color: var(--bluemode-bgcolor);}
  7340.  
  7341.  
  7342. /***------------------------------------PURPLEEE SIDEMENU------------------------------------***/
  7343.  
  7344. #sidemenu.tes-purplemode,
  7345. .tes-purplemode #sidemenu-content::-webkit-scrollbar-track
  7346. { background: var(--purplemode-lightbgcolor);}
  7347.  
  7348. .tes-purplemode #sidemenu-content::-webkit-scrollbar-thumb
  7349. { border-color: var(--purplemode-bgcolor);
  7350. background-color: var(--purplemode-bgcolor);
  7351. width:50%;}
  7352.  
  7353. .tes-purplemode #tes-sidemenu-grabber:before {
  7354. border-color: transparent var(--purplemode-bordercolor);}
  7355.  
  7356. #sidemenu.tes-purplemode > #tes-sidemenu-grabber
  7357. { background-color: var(--purplemode-bgcolor);
  7358. border-color: var(--purplemode-bordercolor);}
  7359.  
  7360. #sidemenu.tes-purplemode
  7361. { background-color: var(--purplemode-lightbgcolor);
  7362. border-color: var(--purplemode-bordercolor);}
  7363.  
  7364. #sidemenu.tes-purplemode > #sidemenu-content
  7365. { background-color: var(--purplemode-lightbgcolor);}
  7366.  
  7367. @media screen and (min-width: 1000px)
  7368. {.tes-purplemode #live-directory
  7369. { margin-left:10px;
  7370. width:175px;
  7371. background-color: var(--purplemode-bgcolor);
  7372. border:1px solid var(--purplemode-bordercolor);}
  7373.  
  7374. .tes-purplemode #tes-sidemenu-grabber,
  7375. #chat-wrapper.tes-purplemode
  7376. { background-color: var(--purplemode-bgcolor);}
  7377.  
  7378. /***------------------------------------ORANGEEE SIDEMENU------------------------------------***/
  7379.  
  7380. #sidemenu.tes-orangemode,
  7381. .tes-orangemode #sidemenu-content::-webkit-scrollbar-track
  7382. { background: var(--orangemode-lightbgcolor);}
  7383.  
  7384. .tes-orangemode #sidemenu-content::-webkit-scrollbar-thumb
  7385. { border-color: var(--orangemode-bgcolor);
  7386. background-color: var(--orangemode-bgcolor);
  7387. width:50%;}
  7388.  
  7389. .tes-orangemode #tes-sidemenu-grabber:before {
  7390. border-color: transparent var(--orangemode-bordercolor);}
  7391.  
  7392. #sidemenu.tes-orangemode > #tes-sidemenu-grabber
  7393. { background-color: var(--orangemode-bgcolor);
  7394. border-color: var(--orangemode-bordercolor);}
  7395.  
  7396. #sidemenu.tes-orangemode
  7397. { background-color: var(--orangemode-lightbgcolor);
  7398. border-color: var(--orangemode-bordercolor);}
  7399.  
  7400. #sidemenu.tes-orangemode > #sidemenu-content
  7401. { background-color: var(--orangemode-lightbgcolor);}
  7402.  
  7403. @media screen and (min-width: 1000px)
  7404. {.tes-orangemode #live-directory
  7405. { margin-left:10px;
  7406. width:175px;
  7407. background-color: var(--orangemode-bgcolor);
  7408. border:1px solid var(--orangemode-bordercolor);}
  7409.  
  7410. .tes-orangemode #tes-sidemenu-grabber,
  7411. #chat-wrapper.tes-orangemode
  7412. { background-color: var(--orangemode-bgcolor);}
  7413.  
  7414. /***------------------------------------REDDD SIDEMENU------------------------------------***/
  7415.  
  7416. #sidemenu.tes-redmode,
  7417. .tes-redmode #sidemenu-content::-webkit-scrollbar-track
  7418. { background: var(--redmode-lightbgcolor);}
  7419.  
  7420. .tes-redmode #sidemenu-content::-webkit-scrollbar-thumb
  7421. { border-color: var(--redmode-bgcolor);
  7422. background-color: var(--redmode-bgcolor);
  7423. width:50%;}
  7424.  
  7425. .tes-redmode #tes-sidemenu-grabber:before {
  7426. border-color: transparent var(--redmode-bordercolor);}
  7427.  
  7428. #sidemenu.tes-redmode > #tes-sidemenu-grabber
  7429. { background-color: var(--redmode-bgcolor);
  7430. border-color: var(--redmode-bordercolor);}
  7431.  
  7432. #sidemenu.tes-redmode
  7433. { background-color: var(--redmode-lightbgcolor);
  7434. border-color: var(--redmode-bordercolor);}
  7435.  
  7436. #sidemenu.tes-redmode > #sidemenu-content
  7437. { background-color: var(--redmode-lightbgcolor);}
  7438.  
  7439. @media screen and (min-width: 1000px)
  7440. {.tes-redmode #live-directory
  7441. { margin-left:10px;
  7442. width:175px;
  7443. background-color: var(--redmode-bgcolor);
  7444. border:1px solid var(--redmode-bordercolor);}
  7445.  
  7446. .tes-redmode #tes-sidemenu-grabber,
  7447. #chat-wrapper.tes-redmode
  7448. { background-color: var(--redmode-bgcolor);}
  7449.  
  7450. /***------------------------------------DARKPURPLEEE SIDEMENU------------------------------------***/
  7451.  
  7452. #sidemenu.tes-darkpurplemode,
  7453. .tes-darkpurplemode #sidemenu-content::-webkit-scrollbar-track
  7454. { background: var(--darkpurplemode-lightbgcolor);}
  7455.  
  7456. .tes-darkpurplemode #sidemenu-content::-webkit-scrollbar-thumb
  7457. { border-color: var(--darkpurplemode-bgcolor);
  7458. background-color: var(--darkpurplemode-bgcolor);
  7459. width:50%;}
  7460.  
  7461. .tes-darkpurplemode #tes-sidemenu-grabber:before {
  7462. border-color: transparent var(--darkpurplemode-bordercolor);}
  7463.  
  7464. #sidemenu.tes-darkpurplemode > #tes-sidemenu-grabber
  7465. { background-color: var(--darkpurplemode-bgcolor);
  7466. border-color: var(--darkpurplemode-bordercolor);}
  7467.  
  7468. #sidemenu.tes-darkpurplemode
  7469. { background-color: var(--darkpurplemode-lightbgcolor);
  7470. border-color: var(--darkpurplemode-bordercolor);}
  7471.  
  7472. #sidemenu.tes-darkpurplemode > #sidemenu-content
  7473. { background-color: var(--darkpurplemode-lightbgcolor);}
  7474.  
  7475. @media screen and (min-width: 1000px)
  7476. {.tes-darkpurplemode #live-directory
  7477. { margin-left:10px;
  7478. width:175px;
  7479. background-color: var(--darkpurplemode-bgcolor);
  7480. border:1px solid var(--darkpurplemode-bordercolor);}
  7481.  
  7482. .tes-darkpurplemode #tes-sidemenu-grabber,
  7483. #chat-wrapper.tes-darkpurplemode
  7484. { background-color: var(--darkpurplemode-bgcolor);}
  7485.  
  7486. /***------------------------------------WHITEEE SIDEMENU------------------------------------***/
  7487.  
  7488. #sidemenu.tes-whitemode,
  7489. .tes-whitemode #sidemenu-content::-webkit-scrollbar-track
  7490. { background: var(--whitemode-lightbgcolor);}
  7491.  
  7492. .tes-whitemode #sidemenu-content::-webkit-scrollbar-thumb
  7493. { border-color: var(--whitemode-bgcolor);
  7494. background-color: var(--whitemode-bgcolor);
  7495. width:50%;}
  7496.  
  7497. .tes-whitemode #tes-sidemenu-grabber:before {
  7498. border-color: transparent var(--whitemode-bordercolor);}
  7499.  
  7500. #sidemenu.tes-whitemode > #tes-sidemenu-grabber
  7501. { background-color: var(--whitemode-bgcolor);
  7502. border-color: var(--whitemode-bordercolor);}
  7503.  
  7504. #sidemenu.tes-whitemode
  7505. { background-color: var(--whitemode-bgcolor);
  7506. border-color: var(--whitemode-bordercolor);}
  7507.  
  7508. #sidemenu.tes-whitemode > #sidemenu-content
  7509. { background-color: var(--whitemode-bgcolor);}
  7510.  
  7511. @media screen and (min-width: 1000px)
  7512. {.tes-whitemode #live-directory
  7513. { margin-left:10px;
  7514. width:175px;
  7515. background-color: var(--whitemode-tcblue);
  7516. border:1px solid var(--whitemode-bordercolor);}
  7517.  
  7518. .tes-whitemode #tes-sidemenu-grabber,
  7519. #chat-wrapper.tes-whitemode
  7520. { background-color: var(--whitemode-bgcolor);}
  7521.  
  7522. /***------------------------------------FEATUREONEEE SIDEMENU------------------------------------***/
  7523.  
  7524. #sidemenu.tes-featureonemode,
  7525. .tes-featureonemode #sidemenu-content::-webkit-scrollbar-track
  7526. { background: var(--featureonemode-lightbgcolor);}
  7527.  
  7528. .tes-featureonemode #sidemenu-content::-webkit-scrollbar-thumb
  7529. { border-color: var(--featureonemode-bgcolor);
  7530. background-color: var(--featureonemode-bgcolor);
  7531. width:50%;}
  7532.  
  7533. .tes-featureonemode #tes-sidemenu-grabber:before {
  7534. border-color: transparent var(--featureonemode-bordercolor);}
  7535.  
  7536. #sidemenu.tes-featureonemode > #tes-sidemenu-grabber
  7537. { background-color: var(--featureonemode-bgcolor);
  7538. border-color: var(--featureonemode-bordercolor);}
  7539.  
  7540. #sidemenu.tes-featureonemode,#sidemenu.tes-featureonemode {
  7541. border-color: var(--featureonemode-bordercolor);
  7542. background-image: var(--featureonemode-roombg);
  7543. background-position: right center;
  7544. background-size: cover;}
  7545.  
  7546. #sidemenu.tes-featureonemode > #sidemenu-content
  7547. { background-color: transparent;}
  7548.  
  7549. @media screen and (min-width: 1000px)
  7550. {.tes-featureonemode #live-directory
  7551. { margin-left:10px;
  7552. width:175px;
  7553. background-color: var(--featureonemode-tcblue);
  7554. border:1px solid var(--featureonemode-bordercolor);}
  7555.  
  7556. .tes-featureonemode #tes-sidemenu-grabber,
  7557. #chat-wrapper.tes-featureonemode
  7558. { background-color: var(--featureonemode-bgcolor);}
  7559.  
  7560. /***------------------------------------FEATURETWOOO SIDEMENU------------------------------------***/
  7561.  
  7562. #sidemenu.tes-featuretwomode,
  7563. .tes-featuretwomode #sidemenu-content::-webkit-scrollbar-track
  7564. { background: var(--featuretwomode-lightbgcolor);}
  7565.  
  7566. .tes-featuretwomode #sidemenu-content::-webkit-scrollbar-thumb
  7567. { border-color: var(--featuretwomode-bgcolor);
  7568. background-color: var(--featuretwomode-bgcolor);
  7569. width:50%;}
  7570.  
  7571. .tes-featuretwomode #tes-sidemenu-grabber:before {
  7572. border-color: transparent var(--featuretwomode-bordercolor);}
  7573.  
  7574. #sidemenu.tes-featuretwomode > #tes-sidemenu-grabber
  7575. { background-color: var(--featuretwomode-bgcolor);
  7576. border-color: var(--featuretwomode-bordercolor);}
  7577.  
  7578. #sidemenu.tes-featuretwomode,#sidemenu.tes-featuretwomode {
  7579. border-color: var(--featuretwomode-bordercolor);
  7580. background-image: var(--featuretwomode-userbg);
  7581. background-attachment: fixed;
  7582. background-position:left;
  7583. background-size: 900px;
  7584. background-repeat: no-repeat;}
  7585.  
  7586. #sidemenu.tes-featuretwomode > #sidemenu-content
  7587. { background-color: transparent;}
  7588.  
  7589. @media screen and (min-width: 1000px)
  7590. {.tes-featuretwomode #live-directory
  7591. { margin-left:10px;
  7592. width:175px;
  7593. background-color: var(--featuretwomode-tcblue);
  7594. border:1px solid var(--featuretwomode-bordercolor);}
  7595.  
  7596. .tes-featuretwomode #tes-sidemenu-grabber,
  7597. #chat-wrapper.tes-featuretwomode
  7598. { background-color: var(--featuretwomode-bgcolor);}
  7599.  
  7600. /***------------------------------------FEATURETHREEE SIDEMENU------------------------------------***/
  7601.  
  7602. #sidemenu.tes-featurethreemode,
  7603. .tes-featurethreemode #sidemenu-content::-webkit-scrollbar-track {
  7604. background: var(--featurethreemode-lightbgcolor);}
  7605.  
  7606. .tes-featurethreemode #sidemenu-content::-webkit-scrollbar-thumb {
  7607. border-color: var(--featurethreemode-bgcolor);
  7608. background-color: var(--featurethreemode-bgcolor);
  7609. width:50%;}
  7610.  
  7611. .tes-featurethreemode #tes-sidemenu-grabber:before {
  7612. border-color: transparent var(--featurethreemode-bordercolor);display:none;}
  7613.  
  7614. #sidemenu.tes-featurethreemode > #tes-sidemenu-grabber {
  7615. background-image: var(--featurethreemode-squid3);
  7616. background-size: 25px;
  7617. background-repeat: no-repeat;
  7618. background-color: transparent;
  7619. border-color: var(--featurethreemode-bordercolor);
  7620. height: 5px;
  7621. width: 30px;
  7622. left: 145px;}
  7623.  
  7624. #sidemenu.tes-featurethreemode > #tes-sidemenu-grabber:hover {background-color:#00ff00;}
  7625.  
  7626. .tes-featurethreemode.tes-sidemenuCollapsed #tes-sidemenu-grabber {
  7627. -webkit-transform: rotate(180deg);
  7628. transform: rotate(180deg);
  7629. border-radius:50px;
  7630. left: -15px !important;
  7631. }
  7632.  
  7633. #sidemenu.tes-featurethreemode,#sidemenu.tes-featurethreemode {
  7634. background-color:transparent;
  7635. border: 0px;
  7636. background-image: var(--featurethreemode-userbg);
  7637. background-attachment: fixed;
  7638. background-position:left;
  7639. border-radius: 30px;
  7640. border-top-right-radius: 0px;
  7641. border-top-left-radius: 0px;
  7642. height: 99%;}
  7643.  
  7644. #sidemenu.tes-featurethreemode > #sidemenu-content {
  7645. background-color: transparent;}
  7646.  
  7647. @media screen and (min-width: 1000px)
  7648. {.tes-featurethreemode #live-directory {
  7649. background-image: var(--featurethreemode-roombg);
  7650. background-position:top left;
  7651. margin-left: 5px;
  7652. width: 152px;
  7653. background-color: #6cff00;
  7654. color:#000000;
  7655. border:0px solid var(--featurethreemode-bordercolor);}
  7656. .tes-featurethreemode #live-directory:before {
  7657. color:#000000;
  7658. border-color:#000000;
  7659. }
  7660. .tes-featurethreemode #live-directory:hover
  7661. {color:#51bc02;border:1px solid #51bc02;
  7662. }
  7663. .tes-featurethreemode #live-directory:before::hover
  7664. {color:#51bc02;
  7665. }
  7666.  
  7667. .tes-featurethreemode #tes-sidemenu-grabber,
  7668. #chat-wrapper.tes-featurethreemode
  7669. { background-color: var(--featurethreemode-bgcolor);}
  7670. </style>
  7671. `;
  7672. sidemenuCSS.insertAdjacentHTML(insertPosition, sidemenuCSShtml);
  7673. }
  7674.  
  7675. { // videomoderationCSS
  7676. videomoderationCSShtml = `
  7677. <style id="videomoderationCSS" scope="tc-video-moderation">` + globalCSS + `
  7678. #moderatorlist {
  7679. padding-left: 0;
  7680. z-index: 7;
  7681. max-height:22px;}
  7682.  
  7683. #moderatorlist:hover {
  7684. position: absolute;
  7685. background: white;
  7686. z-index: 1000;
  7687. width: 300px;
  7688. min-height: 155px;
  7689. flex-direction: column;
  7690. position: absolute;
  7691. background: #111;
  7692. z-index: 1000;
  7693. width: 350px;
  7694. max-height: fit-content!important;
  7695. left: 15px;
  7696. border-radius: 13px;
  7697. border: #fff 1px solid;
  7698. top: 30px;
  7699. left:0px;}
  7700.  
  7701. #moderatorlist:after {
  7702. top: 2px;
  7703. right: 1px;}
  7704.  
  7705. #moderatorlist:hover #header {
  7706. height: unset;
  7707. top: unset;
  7708. padding-left:0 !important;}
  7709.  
  7710. #moderatorlist > #header {
  7711. top: 2px !important;
  7712. width: 100%;
  7713. height:20px;}
  7714.  
  7715. #moderatorlist > #header > span > button {
  7716. border-radius:10px;
  7717. width: unset !important;
  7718. height:unset !important;
  7719. background-color: unset;}
  7720.  
  7721. #moderatorlist.tes-nightmode > #header > span > button {
  7722. background: var(--nightmodeBlack-bgcolor);}
  7723.  
  7724. #moderatorlist.tes-nightmode:hover {
  7725. border-color: #333;}
  7726.  
  7727. .video:after{
  7728. border:0px;}
  7729.  
  7730. </style>
  7731. `;
  7732. videomoderationCSS.insertAdjacentHTML(insertPosition, videomoderationCSShtml);
  7733. }
  7734.  
  7735. { // webappCSS
  7736. webappCSShtml = `
  7737. <style id="webappCSS" scope="tinychat-webrtc-app">` + globalCSS + `
  7738. .input-menu{display:none;}
  7739. #room {
  7740. padding: 0;
  7741. padding-left: 80px;}
  7742.  
  7743. #room.tes-sidemenuCollapsed {
  7744. margin-left: -161px;
  7745. width: 110%;}
  7746.  
  7747.  
  7748.  
  7749. @media screen and (max-width: 1000px) {
  7750. :host > #room {
  7751. padding-left: 82px;}
  7752. }
  7753.  
  7754. @media screen and (max-width: 600px) {
  7755. :host > #room {
  7756. padding-left: 0;}
  7757. }
  7758.  
  7759. #room-content.tes-chatbelow {
  7760. flex-direction: column !important;
  7761. margin-bottom: -10px !important;}
  7762.  
  7763.  
  7764. .tes-nightmode tc-videolist { background: var(--nightmode-bgcolor); }
  7765. .tes-nightmode.blacknight tc-videolist { background: transparent; }
  7766.  
  7767. </style>
  7768. `;
  7769. webappCSS.insertAdjacentHTML(insertPosition, webappCSShtml);
  7770. }
  7771. }catch(e){tcl("error injectCSS: " + e.message);}
  7772. }
  7773.  
  7774. function injectElements() {
  7775. try{
  7776. headerGrabberParElem = titleElem.querySelector("#room-header");
  7777. headerGrabberParElem.insertAdjacentHTML("beforeend", `<div id="tes-header-grabber"></div>`);
  7778. headerGrabberElem = headerGrabberParElem.querySelector("#tes-header-grabber");
  7779. headerGrabberElem.addEventListener("click", headerGrabber);
  7780.  
  7781. sidemenuOverlayElem = bodyElem.querySelector("#menu-icon");
  7782. sidemenuOverlayElem.addEventListener("click", function(){sidemenuOverlayElem.classList.toggle("expanded");});
  7783.  
  7784. chatlogButtonsHTML = `
  7785. <div id="tes-chatlogButtons">
  7786. <div id="tes-chatlogSave" class="tes-chatlogBut">
  7787. <span class="icon">
  7788. <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  7789. <path d="m0,50l50,-50l50,50l-25,0l0,50l-50,0l0,-50l-25,0z"></path>
  7790. </svg>
  7791. </span><!-- ⇩ -->
  7792. <span class="label">download</span>
  7793. </div>
  7794. <div id="tes-chatlogView" class="tes-chatlogBut">
  7795. <span class="icon">☰</span>
  7796. <span class="label">view</span>
  7797. </div>
  7798. <div id="tes-chatlogDisplay">
  7799. <textarea spellcheck="false"></textarea>
  7800. <div id="close">✕</div>
  7801. </div>
  7802. </div>`;
  7803.  
  7804. selectAllButton = chatlogElem.querySelector("#chat-wrapper").insertAdjacentHTML("afterbegin", chatlogButtonsHTML);
  7805. chatlogElem.querySelector("#tes-chatlogSave").addEventListener("click", function(){copyChatlog("download")} );
  7806. chatlogElem.querySelector("#tes-chatlogView").addEventListener("click", function(){copyChatlog("view")} );
  7807. chatlogElem.querySelector("#tes-chatlogDisplay #close").addEventListener("click", function(){copyChatlog("close")} );
  7808.  
  7809. if (!isPaidAccount) {
  7810. sidemenuGrabberParElem = sidemenuElem.querySelector("#sidemenu");
  7811. sidemenuGrabberElem = document.createElement("div");
  7812. sidemenuGrabberElem.setAttribute("id", "tes-sidemenu-grabber");
  7813. sidemenuGrabberElem.innerHTML = "";
  7814. sidemenuGrabberElem.addEventListener("click", sidemenuGrabber);
  7815. sidemenuGrabberParElem.appendChild(sidemenuGrabberElem);
  7816. sidemenuGrabberElem = sidemenuElem.querySelector("#tes-sidemenu-grabber");
  7817. }
  7818. }catch(e){tcl("error injectElements: " + e.message);}
  7819. }
  7820.  
  7821. function sidemenuGrabber() {
  7822. try{
  7823. sidemenuGrabberParElem.classList.toggle("tes-sidemenuCollapsed");
  7824. sidemenuGrabberParElem.classList.contains("tes-sidemenuCollapsed") ? sidemenuGrabberElem.innerHTML = "" : sidemenuGrabberElem.innerHTML = "";
  7825.  
  7826. userlistElem.querySelector("#userlist").classList.toggle("tes-sidemenuCollapsed");
  7827. videolistElem.querySelector("#videolist").classList.toggle("tes-sidemenuCollapsed");
  7828. webappElem.querySelector("#room").classList.toggle("tes-sidemenuCollapsed");
  7829. bodyElem.classList.toggle("tes-sidemenuCollapsed");
  7830. titleElem.querySelector("#tes-themes").classList.toggle("tes-sidemenuCollapsed");
  7831. titleElem.querySelector("#tes-settings-miniyt").classList.toggle("tes-sidemenuCollapsed");
  7832. titleElem.querySelector("#room-header").classList.toggle("tes-sidemenuCollapsed");
  7833. }catch(e){tcl("error sidemenuGrabber: " + e.message);}
  7834. }
  7835.  
  7836. function chatlogGrabber() {
  7837. try{
  7838. chatlogGrabberParElem.classList.toggle("tes-chatCollapsed");
  7839. chatlogGrabberParElem.classList.contains("tes-chatCollapsed") ? chatlogGrabberElem.innerHTML = "" : chatlogGrabberElem.innerHTML = "";
  7840. }catch(e){tcl("error sidemenuGrabber: " + e.message);}
  7841. }
  7842.  
  7843. function headerGrabber() {
  7844. try{
  7845. headerGrabberParElem.classList.toggle("tes-headerCollapsed");
  7846. headerGrabberParElem.classList.contains("tes-headerCollapsed") ? headerGrabberElem.innerHTML = "" : headerGrabberElem.innerHTML = "";
  7847. }catch(e){tcl("error headerGrabber: " + e.message);}
  7848. }
  7849.  
  7850. function updateScroll() {
  7851. try{
  7852. scrollbox.scrollTop = scrollbox.scrollHeight;
  7853. scrollbox.scrollTop = scrollbox.scrollTop + 5;
  7854. }catch(e){tcl("error updateScroll: " + e.message);}
  7855. }
  7856.  
  7857. function userHasScrolled(e) {
  7858. try{
  7859. var scrollwheelAmount = e.deltaY;
  7860.  
  7861. if (scrollwheelAmount < 0) {
  7862. autoScrollStatus = false;
  7863. totalScrolledUp += scrollwheelAmount * -1;
  7864. }
  7865. else { totalScrolledUp -= scrollwheelAmount; }
  7866.  
  7867. if (autoScrollStatus === false && scrollbox.scrollHeight - scrollbox.scrollTop == scrollbox.offsetHeight) {
  7868. autoScrollStatus = true;
  7869. totalScrolledUp = 0;
  7870. }
  7871. }catch(e){tcl("error userHasScrolled: " + e.message);}
  7872. }
  7873.  
  7874. function newMessageAdded() {
  7875. try{
  7876. if (autoScrollStatus === true && settingsQuick["Autoscroll"]) { updateScroll(); }
  7877. timestampAdd();
  7878. messageParser();
  7879. }catch(e){tcl("error newMessageAdded: " + e.message);}
  7880. }
  7881.  
  7882. function userContextmenuUpdated() {
  7883. try{
  7884. var elemBottom = 0;
  7885. var topPos = userContextmenuCSS.getBoundingClientRect().top;
  7886. var elemBottom = topPos + userContextmenuCSS.offsetHeight;
  7887. if (elemBottom > (window.innerHeight - 82)) {
  7888. // userContextmenuCSS.style.top = (userContextmenuCSS.style.top - userlistElem.querySelector("#userlist").scrollTop - 200) + "px";
  7889. // userContextmenuCSS.style.top = (userlistElem.querySelector("#userlist").scrollTop - window.innerHeight) + "px";
  7890. userContextmenuCSS.style.top = (window.innerHeight - 82 - userContextmenuCSS.offsetHeight - 15) + "px";
  7891. // tcl("Change: " + userContextmenuCSS.style.top);
  7892. }
  7893.  
  7894. // tcl("elemBottom: " + elemBottom + ". Max: " + (window.innerHeight - 82) + ". offsetHeight: " + userContextmenuCSS.offsetHeight + ". New top: " + (window.innerHeight - 82 - userContextmenuCSS.offsetHeight));
  7895. }catch(e){tcl("error userContextmenuUpdated: " + e.message);}
  7896. }
  7897.  
  7898. function messageParserCheckCSS() {
  7899. try{
  7900. var messages = chatlogElem.querySelectorAll(messageQueryString);
  7901. var messagesAmount = messages.length;
  7902. chatboxHeight = chatlogElem.querySelector("#chat").offsetHeight;
  7903. var messagesToCheck = messageHeight ? parseInt(chatboxHeight / messageHeight) + 3 : 20;
  7904.  
  7905. if (messagesAmount > 0) {
  7906. for (i=messagesAmount - 1; i > ((messagesAmount - messagesToCheck) - 1); i--) {
  7907. if (i == 0) break;
  7908. var tcMessageHtmlElem = messages[i].querySelector("tc-message-html").shadowRoot;
  7909. if (!tcMessageHtmlElem.querySelector("#messageCSS")) tcMessageHtmlElem.appendChild(messageParserAddCSS());
  7910. if (settingsQuick["NightMode"]) tcMessageHtmlElem.querySelector("#html").classList.add("tes-nightmode");
  7911. if (settingsQuick["NightModeBlack"]) tcMessageHtmlElem.querySelector("#html").classList.add("blacknight");
  7912. }
  7913. }
  7914. }catch(e){tcl("error messageParserCheckCSS: " + e.message);}
  7915. }
  7916. function messageParserAddCSS(elem=null) {
  7917. try{
  7918. var node = document.createElement("style");
  7919. var textnode = document.createTextNode(messageCSS);
  7920. node.appendChild(textnode);
  7921. node.setAttribute("id", "messageCSS");
  7922.  
  7923. if (elem) { elem.appendChild(node); }
  7924. else { return node; }
  7925. }catch(e){tcl("error messageParserAddCSS: " + e.message);}
  7926. }
  7927. function messageParser() {
  7928. try{
  7929. latestMessageElem = chatlogElem.querySelector(messageQueryString + ":last-of-type");
  7930.  
  7931. var typeSystem = false;
  7932.  
  7933. if (latestMessageElem != null) {
  7934. if (!messageHeight) {
  7935. messageHeight = latestMessageElem.scrollHeight;
  7936. chatboxHeight = chatlogElem.querySelector("#chat").offsetHeight;
  7937. }
  7938.  
  7939. if (latestMessageElem.classList.contains("system")) typeSystem = true;
  7940. latestMessageElem.setAttribute("id", "msg-"+messageCount);
  7941. messageCount++;
  7942.  
  7943. if (!typeSystem) {
  7944. var latestMessageNickElem = latestMessageElem.querySelector(".nickname");
  7945. var latestMessageNick = latestMessageNickElem.innerHTML;
  7946. }
  7947. else {
  7948. latestMessageNick = "&system";
  7949. }
  7950.  
  7951. tcMessageHtmlElem = latestMessageElem.querySelector("tc-message-html").shadowRoot;
  7952. latestMessageContentElem = tcMessageHtmlElem.querySelector("#html");
  7953.  
  7954. if (!tcMessageHtmlElem.querySelector("#messageCSS")) {
  7955. messageParserAddCSS(tcMessageHtmlElem);
  7956. }
  7957. if (settingsQuick["NightMode"]) latestMessageContentElem.classList.add("tes-nightmode");
  7958. if (settingsQuick["NightModeBlack"]) latestMessageContentElem.classList.add("blacknight");
  7959.  
  7960.  
  7961. latestMessageContent = latestMessageContentElem.innerHTML;
  7962.  
  7963. latestMessageContent.includes(" banned ") || latestMessageContent.includes(" kicked ") ? latestMessageElem.classList.add("dontHide") : void(0);
  7964.  
  7965. if (settingsQuick["MentionsMonitor"]) {
  7966. if (!(settingMentions.length == 1 && settingMentions[0] == "")) {
  7967. for (i=0; i < settingMentions.length; i++) {
  7968. if (latestMessageContent.toLowerCase().includes(settingMentions[i].toLowerCase())) {
  7969. latestMessageContentElem.classList.add("tes-mention-message");
  7970. if (settingsQuick["PinkMode"]) {
  7971. pinkPop.play();
  7972. }
  7973. if (settingsQuick["FeatureOneMode"]) {
  7974. weedPop.play();
  7975. } else {
  7976. audioPop.play();
  7977. }
  7978. tcl('MENTION: "' + settingMentions[i] + '" : ' + latestMessageContent);
  7979. break;
  7980. }
  7981. }
  7982. }
  7983. }
  7984. }
  7985. }catch(e){tcl("error messageParser: " + e.message);}
  7986. }
  7987.  
  7988.  
  7989. var messagesMO = new MutationObserver(function (e) {
  7990. if (e[0].addedNodes) newMessageAdded();
  7991. });
  7992. messagesMO.observe(chatlogElem.querySelector("#chat-content"), { childList: true });
  7993.  
  7994. var camsMO = new MutationObserver(function (e) {
  7995. if (e[0].addedNodes) newCamAdded();
  7996. });
  7997. camsMO.observe(videolistElem.querySelector(".videos-items:last-child"), { childList: true });
  7998.  
  7999. var userContextmenuMO = new MutationObserver(function (e) {
  8000. if (e[0].addedNodes) userContextmenuUpdated();
  8001. });
  8002. userContextmenuMO.observe(userContextmenuCSS, { attributes: true });
  8003.  
  8004. var chatTextboxMO = new MutationObserver(function (e) {
  8005. if (e[0].addedNodes) chatboxSwitch();
  8006. });
  8007. chatTextboxMO.observe(chatlogElem.querySelector("#chat-instant"), { attributes: true, attributeFilter: ['class'], childList: false, characterData: false });
  8008.  
  8009. var userlistMO = new MutationObserver(function (e) {
  8010. if (e[0].addedNodes) newUserAdded();
  8011. });
  8012. userlistMO.observe(userlistElem.querySelector("#userlist"), { childList: true });
  8013.  
  8014. function chatboxSwitch() {
  8015. messageParserCheckCSS();
  8016. return;
  8017.  
  8018. // if (chatlistElem.querySelector("#chat-instant-button")) chatlistElem.querySelector("#chat-instant-button").classList.add("tes-loading");
  8019. try{
  8020. chatboxPM = (chatlogElem.querySelector("#chat-instant").getAttribute("class") == "show");
  8021. chatboxPM ? chatlogCSS.classList.add("tes-chatboxPM") : chatlogCSS.classList.remove("tes-chatboxPM");
  8022. messageParserCheckCSS();
  8023. }catch(e){tcl("error chatboxSwitch: " + e.message)};
  8024. }
  8025.  
  8026. function timestampAdd(opt=null) {
  8027. try{
  8028. var SHOW_SECONDS = true;
  8029.  
  8030. var date = new Date();
  8031. var hours = date.getHours();
  8032. var minutes = date.getMinutes().toString();
  8033. var secs = date.getSeconds().toString();
  8034.  
  8035. if (hours > 11) {
  8036. hours = (hours % 12 || 12);
  8037. var period = "pm";
  8038. }
  8039. else { var period = "am"; }
  8040.  
  8041. if (hours == "0") { hours = "12"; }
  8042. if (minutes == "0") { minutes = "00"; }
  8043. if (minutes.length == 1) { minutes = "0" + minutes; }
  8044. if (secs.length == 1) { secs = "0" + secs; }
  8045.  
  8046. if (SHOW_SECONDS == true) {
  8047. var timestamp = hours + ":" + minutes + ":" + secs + "" + period;
  8048. }
  8049. else {
  8050. var timestamp = hours + ":" + minutes + period;
  8051. }
  8052.  
  8053. if (opt == "return") return;
  8054.  
  8055. var queryString = messageQueryString + ".common:last-of-type .nickname";
  8056. if (chatlogElem.querySelector(queryString) != null) {
  8057. var recentMsgNickname = chatlogElem.querySelector(queryString);
  8058. recentMsgNickname.insertAdjacentHTML("afterend", "<span id='timestamp'> " + timestamp + "</span>");
  8059. }
  8060. }catch(e){tcl("error timestampAdd: " + e.message);}
  8061. }
  8062.  
  8063. function newUserAdded(opt=null) {
  8064. try{
  8065. if (!userlistElem.querySelector("#userlist .list-item")) return;
  8066. var usersElems = userlistElem.querySelectorAll("#userlist .list-item");
  8067. userCount = usersElems.length;
  8068.  
  8069. setTimeout(function() {
  8070. for (i=0; i < usersElems.length; i++) {
  8071. var userNickItem = usersElems[i].querySelector(".nickname");
  8072. var userNick = userNickItem.innerHTML;
  8073.  
  8074. userNickItem.classList.remove("tes-myNick");
  8075. if (userNick == myNick) {
  8076. userNickItem.classList.add("tes-myNick");
  8077. }
  8078. }
  8079. }, 500);
  8080.  
  8081. if (opt == "scanOnly") {
  8082. return;
  8083. }
  8084. else {
  8085. if (!userlistElem.querySelector("#tes-userCount")) {
  8086. userCountParElem = userlistElem.querySelector("#header > span");
  8087. userCountElem = document.createElement("span");
  8088. userCountElem.setAttribute("id", "tes-userCount");
  8089. userCountElem.innerHTML = "(" + userCount + ")";
  8090. userCountParElem.appendChild(userCountElem);
  8091. userCountElem = userlistElem.querySelector("#tes-userCount");
  8092. }
  8093. else {
  8094. userCountElem.innerHTML = "(" + userCount + ")";
  8095. }
  8096. }
  8097. }catch(e){tcl("error newUserAdded: " + e.message);}
  8098. }
  8099.  
  8100. function newCamAdded() {
  8101. try{
  8102. if (videolistElem.querySelector(camQueryString)) var camElems = videolistElem.querySelectorAll(camQueryString);
  8103. else return;
  8104.  
  8105. camsCount = 0;
  8106.  
  8107. for (i=0; i < camElems.length; i++) {
  8108. camsCount = i + 1;
  8109. var camItem = camElems[i].querySelector("tc-video-item").shadowRoot;
  8110. var camItemCSS = camItem.querySelector(".video");
  8111. if (settingsQuick["NightMode"]) camItemCSS.classList.add("tes-nightmode");
  8112. else camItemCSS.classList.remove("tes-nightmode");
  8113. if (settingsQuick["NightModeBlack"]) camItemCSS.classList.add("blacknight");
  8114. else camItemCSS.classList.remove("blacknight");
  8115. if (settingsQuick["BorderlessCams"]) camItemCSS.classList.add("tes-borderlesscams");
  8116. else camItemCSS.classList.remove("tes-borderlesscams");
  8117.  
  8118. if (!camItem.querySelector("#camItemCSS")) camItemCSS.insertAdjacentHTML("afterbegin", camItemCSShtml);
  8119.  
  8120. var camName = camItem.querySelector(".nickname").getAttribute("title");
  8121. camElems[i].setAttribute("id", "camUser-"+camName);
  8122.  
  8123. // Cam maxing
  8124. try {
  8125. if (camItem.querySelector(".icon-tes-max")) {
  8126. var maxbutton = camItem.querySelector(".icon-tes-max");
  8127. maxbutton.parentNode.removeChild(maxbutton);
  8128. }
  8129. camItem.querySelector(".icon-resize").insertAdjacentHTML("beforebegin", camMaxButtonHtml);
  8130. camItem.querySelector(".icon-tes-max").setAttribute("id", "maxbutton-" + camName);
  8131. var maxCamVar = function(maxCamVarArg){
  8132. videolistElem.querySelector(".videos-items:last-child").classList.remove("tes-max-noAnim");
  8133. maximizeCam(maxCamVarArg, "buttonpress");
  8134. };
  8135. camItem.querySelector("#maxbutton-"+camName).addEventListener("click", maxCamVar.bind(this, camName));
  8136.  
  8137. if (camMaxedCurrent == camName) {
  8138. camElems[i].classList.add("tes-maxedCam");
  8139. camElems[i].parentElement.classList.add("tes-max");
  8140. }
  8141. if (!videolistElem.querySelector(".tes-maxedCam")) camElems[i].parentElement.classList.remove("tes-max");
  8142.  
  8143. if (videolistCSS.querySelector("#camMaxCSS")) {
  8144. var maxcss = videolistCSS.querySelector("#camMaxCSS");
  8145. maxcss.parentNode.removeChild(maxcss);
  8146. }
  8147. videolistCSS.insertAdjacentHTML("beforeend", camMaxCSShtml);
  8148.  
  8149. }
  8150. catch(e) { tcl("error newCamAdded: " + e.message); }
  8151.  
  8152. // Cam closing
  8153. try {
  8154. if (camItem.querySelector(".icon-tes-close")) {
  8155. var closebutton = camItem.querySelector(".icon-tes-close");
  8156. closebutton.parentNode.removeChild(closebutton);
  8157. }
  8158. camItem.querySelector(".icon-resize").insertAdjacentHTML("beforebegin", camCloseButtonHtml);
  8159. camItem.querySelector(".icon-tes-close").setAttribute("id", "closebutton-" + camName);
  8160. var closeCamVar = function(closeCamVarArg){
  8161. videolistElem.querySelector(".videos-items:last-child").classList.remove("tes-close-noAnim");
  8162. closeimizeCam(closeCamVarArg, "buttonpress2");
  8163. };
  8164. camItem.querySelector("#closebutton-"+camName).addEventListener("click", closeCamVar.bind(this, camName));
  8165.  
  8166. if (camClosedCurrent == camName) {
  8167. camElems[i].classList.add("tes-closedCam");
  8168. camElems[i].parentElement.classList.add("tes-close");
  8169. }
  8170. if (!videolistElem.querySelector(".tes-closedCam")) camElems[i].parentElement.classList.remove("tes-close");
  8171.  
  8172. if (videolistCSS.querySelector("#camCloseCSS")) {
  8173. var closecss = videolistCSS.querySelector("#camCloseCSS");
  8174. closecss.parentNode.removeChild(closecss);
  8175. }
  8176. videolistCSS.insertAdjacentHTML("beforeend", camCloseCSShtml);
  8177.  
  8178. }
  8179. catch(e) { tcl("error newCamAdded: " + e.message); }
  8180.  
  8181. if (settingsQuick["HideAllCams"] == "true" || urlPars.get("hideallcams") == "") {
  8182. camItem.querySelector("button.icon-visibility").click();
  8183. tcl("Cam hide: " + camName);
  8184. }
  8185.  
  8186. camCounter(camElems[i]);
  8187. }
  8188. }catch(e){tcl("error newCamAdded: " + e.message);}
  8189. }
  8190.  
  8191. function maximizeCam(camName, opt=null) {
  8192. try {
  8193. if (camName != camMaxedCurrent && camMaxedCurrent != null) {
  8194. maximizeCam(camMaxedCurrent);
  8195. maximizeCam(camName);
  8196. return;
  8197. }
  8198.  
  8199. var camElem = videolistElem.querySelector("#camUser-" + camName);
  8200. if (camElem == null) {
  8201. camMaxedCurrent = null;
  8202. return;
  8203. }
  8204.  
  8205. if (opt == "bbuttonpress") {
  8206. camElem.parentElement.classList.remove("tes-max-noAnim");
  8207. }
  8208.  
  8209. if (camElem.classList.contains("tes-maxedCam")) {
  8210. camElem.classList.remove("tes-maxedCam");
  8211. camElem.parentElement.classList.remove("tes-max");
  8212. camMaxedCurrent = null;
  8213. }
  8214. else {
  8215. camElem.classList.add("tes-maxedCam");
  8216. camElem.parentElement.classList.add("tes-max");
  8217. camMaxedCurrent = camName;
  8218. setTimeout(function(){ camElem.parentElement.classList.add("tes-max-noAnim"); }, 500);
  8219. }
  8220. camCounter(camElem);
  8221. }
  8222. catch(e) { tcl("error maximizeCam: " + e.message); }
  8223. }
  8224.  
  8225. function closeimizeCam(camName, opt=null) {
  8226. try {
  8227. if (camName != camClosedCurrent && camClosedCurrent != null) {
  8228. closeimizeCam(camClosedCurrent);
  8229. closeimizeCam(camName);
  8230. return;
  8231. }
  8232.  
  8233. var camElem = videolistElem.querySelector("#camUser-" + camName);
  8234. if (camElem == null) {
  8235. camClosedCurrent = null;
  8236. return;
  8237. }
  8238.  
  8239. if (opt == "bbuttonpress2") {
  8240. camElem.parentElement.classList.remove("tes-close-noAnim");
  8241. }
  8242.  
  8243. if (camElem.classList.contains("tes-closedCam")) {
  8244.  
  8245. camElem.parentElement.classList.remove("tes-close");
  8246. camClosedCurrent = null;
  8247. }
  8248. else {
  8249. camElem.classList.add("tes-closedCam");
  8250. camElem.parentElement.classList.add("tes-close");
  8251. camClosedCurrent = camName;
  8252. setTimeout(function(){ camElem.parentElement.classList.add("tes-close-noAnim"); }, 500);
  8253. }
  8254. camCounter(camElem);
  8255. }
  8256. catch(e) { tcl("error closeimizeCam: " + e.message); }
  8257. }
  8258.  
  8259. function closeimizeYoutube(camName, opt=null) {
  8260. try {
  8261. if (camName != camClosedCurrent && camClosedCurrent != null) {
  8262. closeimizeCam(camClosedCurrent);
  8263. closeimizeCam(camName);
  8264. return;
  8265. }
  8266.  
  8267. var camElem = videolistElem.querySelector("#camUser-" + camName);
  8268. if (camElem == null) {
  8269. camClosedCurrent = null;
  8270. return;
  8271. }
  8272.  
  8273. if (opt == "bbuttonpress2") {
  8274. camElem.parentElement.classList.remove("tes-close-noAnim");
  8275. }
  8276.  
  8277. if (camElem.classList.contains("tes-closedCam")) {
  8278. camElem.classList.remove("tes-closedCam");
  8279. camElem.parentElement.classList.remove("tes-close");
  8280. camClosedCurrent = null;
  8281. }
  8282. else {
  8283. camElem.classList.add("tes-closedCam");
  8284. camElem.parentElement.classList.add("tes-close");
  8285. camClosedCurrent = camName;
  8286. setTimeout(function(){ camElem.parentElement.classList.add("tes-close-noAnim"); }, 500);
  8287. }
  8288. camCounter(camElem);
  8289. }
  8290. catch(e) { tcl("error closeimizeCam: " + e.message); }
  8291. }
  8292.  
  8293. function camCounter(camElem) {
  8294. try{
  8295. if (camsCount == 12) {
  8296. camElem.parentElement.classList.remove("tes-camCount10-11");
  8297. camElem.parentElement.classList.remove("tes-camCount2");
  8298.  
  8299. camElem.parentElement.classList.add("tes-camCount12");
  8300. }
  8301. else if (camsCount > 9 && camsCount < 12) {
  8302. camElem.parentElement.classList.remove("tes-camCount12");
  8303. camElem.parentElement.classList.remove("tes-camCount2");
  8304.  
  8305. camElem.parentElement.classList.add("tes-camCount10-11");
  8306. }
  8307. else if (camsCount == 2) {
  8308. camElem.parentElement.classList.remove("tes-camCount12");
  8309. camElem.parentElement.classList.remove("tes-camCount10-11");
  8310.  
  8311. camElem.parentElement.classList.add("tes-camCount2");
  8312. }
  8313. else {
  8314. camElem.parentElement.classList.remove("tes-camCount12");
  8315. camElem.parentElement.classList.remove("tes-camCount10-11");
  8316. camElem.parentElement.classList.remove("tes-camCount2");
  8317. }
  8318. }catch(e){tcl("error camCounter: " + e.message);}
  8319. }
  8320. } catch(e) { tcl("error runTES: " + e.message); }
  8321. /* End main function */
  8322. return {
  8323. newUserAdded: newUserAdded
  8324. };
  8325. }
  8326.  
  8327. function tcl(m) {
  8328. try {
  8329. if (m.includes("error ")) {
  8330. var m = m.split("error ")[1];
  8331. console.log("%cTES " + "%cerror" + "%c" + ": " + m, "font-weight: bold; color: #53b6ef;", "color: red;", "");
  8332. }
  8333. else { console.log("%cTES: " + "%c" + m, "font-weight: bold; color: #53b6ef;", ""); }
  8334. }catch(e){console.log("------ TES error tcl: " + e.message);}
  8335. }
  8336.  
  8337. function play(){
  8338. try {
  8339. var audio = document.getElementById("audio");
  8340. audio.play();
  8341. }catch(e){console.log("Audio Error" + e.message);}
  8342. }
  8343.  
  8344. function TESwsParser() {
  8345. try{
  8346. wsdata = [];
  8347. chatlogMain = "";
  8348. userlistLog = {};
  8349. usernamesLog = [];
  8350. userlistLogQuits = {};
  8351. newline = `
  8352. `;
  8353. WebSocket.prototype._send = WebSocket.prototype.send;
  8354. WebSocket.prototype.send = function (data) {
  8355. try{
  8356. this._send(data);
  8357. this.addEventListener('message', function (msg) {
  8358. if (msg.data.includes('"tc":"joined"')) {
  8359. var joined = JSON.parse(msg.data);
  8360. myNick = joined["self"]["nick"];
  8361. myHandle = joined["self"]["handle"];
  8362. }
  8363. if (msg.data.includes('"tc":"msg"') && msg.data.includes('"handle"')) {
  8364. var messageArr = JSON.parse(msg.data);
  8365. var handle = messageArr["handle"];
  8366. chatlogAdd(userlistLog[handle]["nick"] + ": " + messageArr["text"]);
  8367. }
  8368. if (msg.data.includes('"item"')) {
  8369. if (msg.data.includes('tc":"yut_play"')) {
  8370. var youtubeArr = JSON.parse(msg.data);
  8371. var id = youtubeArr["item"]["id"];
  8372. chatlogAdd("- YouTube video started: " + "https://youtube.com/watch?v=" + id);
  8373. }
  8374. if (msg.data.includes('tc":"yut_stop"')) chatlogAdd("- YouTube video stopped.");
  8375. }
  8376. if (msg.data.match(/"tc":"(?:un)?publish"/)) {
  8377. var publishArr = JSON.parse(msg.data);
  8378. var action = (publishArr["tc"] == "publish") ? "is" : "stopped";
  8379. var handle = publishArr["handle"];
  8380.  
  8381. if (userlistLog[handle]) var nick = userlistLog[handle]["nick"];
  8382. else var nick = userlistLogQuits[handle]["nick"];
  8383.  
  8384. chatlogAdd("- " + nick + " " + action + " broadcasting.");
  8385. }
  8386. if (msg.data.includes('"tc":"sysmsg"')) {
  8387. var systext = JSON.parse(msg.data)["text"];
  8388. chatlogAdd("-- " + systext);
  8389. }
  8390. if (msg.data.includes('"tc":"userlist"')) {
  8391. userlistArr = JSON.parse(msg.data)["users"];
  8392. for (i=0; i < userlistArr.length; i++) {
  8393. var nick = userlistArr[i]["nick"];
  8394. var handle = userlistArr[i]["handle"];
  8395. var username = userlistArr[i]["username"];
  8396. var isMod = userlistArr[i]["mod"];
  8397. userlistLog[handle] = {"nick":nick, "username":username, "mod":isMod};
  8398. var isMod = isMod == true ? "[MOD]" : "";
  8399. var logtext = username == "" ? nick : nick + "(" + username + ")";
  8400. logtext += isMod;
  8401. usernamesLog.push(logtext);
  8402. }
  8403.  
  8404. userlistInitial = usernamesLog.join(', ');
  8405. usersCountInitial = usernamesLog.length;
  8406. }
  8407. if (msg.data.includes('"tc":"join","username":"')) {
  8408. var userArr = JSON.parse(msg.data)
  8409. var nick = userArr["nick"];
  8410. var handle = userArr["handle"];
  8411. var username = userArr["username"];
  8412. var isMod = userArr["mod"];
  8413. userlistLog[handle] = {"nick":nick, "username":username, "mod":isMod};
  8414. }
  8415. if (msg.data.includes('"tc":"quit"')) {
  8416. var userArr = JSON.parse(msg.data);
  8417. var handle = userArr["handle"];
  8418. userlistLogQuits[handle] = userlistLog[handle];
  8419. delete userlistLog[handle];
  8420. }
  8421. if (msg.data.includes('"tc":"nick"')) {
  8422. var userArr = JSON.parse(msg.data);
  8423. var handle = userArr["handle"];
  8424. var nick = userArr["nick"];
  8425.  
  8426. userlistLog[handle]["nick"] = nick;
  8427. if (handle == myHandle) {
  8428. myNick = nick;
  8429. }
  8430. TESapp.newUserAdded("scanOnly");
  8431. }
  8432. }, false);
  8433. this.send = function (data) {
  8434. this._send(data);
  8435. };
  8436.  
  8437. }catch(e){tcl("error WebSocket.prototype.send: " + e.message);}
  8438. }
  8439.  
  8440. function chatlogAdd(arg) {
  8441. var timestamp = new Date().toLocaleTimeString('en-US', { hour12: false });
  8442. chatlogMain += "[" + timestamp + "] " + arg + newline;
  8443. }
  8444.  
  8445. }catch(e){tcl("error TESwsParser: " + e.message);}
  8446. }
  8447.  
  8448.  
  8449.  
  8450. }
  8451.  
  8452. else
  8453.  
  8454. {(function() {var css = [
  8455. ".left-arrow.active:before, .right-arrow.active:before {",
  8456. " border-color: #111111 !important;",
  8457. "}",
  8458. ".left-arrow:before, .right-arrow:before {",
  8459. " border-color: #111111 !important;",
  8460. "}",
  8461. "body {",
  8462. " background-color: #333333 !important;",
  8463. "}",
  8464. "",
  8465. "#welcome-wrapper {",
  8466. " width: 100% !important;",
  8467. " max-width: none !important;",
  8468. " padding: 0 !important;",
  8469. " border-bottom: 1px solid #e5e5e5 !important;",
  8470. " box-sizing: border-box !important;",
  8471. " background-color: #666666 !important;",
  8472. " height: 10px !important;",
  8473. " display: none !important;",
  8474. "}",
  8475. "#navigation {",
  8476. " position: relative !important;",
  8477. " display: block !important;",
  8478. " top: -25px !important;",
  8479. " left: 0px !important;",
  8480. " right: 30px !important;",
  8481. " margin: 0 auto !important;",
  8482. " font-size: 0 !important;",
  8483. " text-align: center !important;",
  8484. " z-index: 6 !important;",
  8485. " width: 650px !important;",
  8486. "}",
  8487. "#promoted-wrapper > #promote-button {",
  8488. " max-width: 200px !important;",
  8489. " margin: 10px auto 0px !important;",
  8490.  
  8491. "}",
  8492. "#nav-static-wrapper {",
  8493. " position: relative !important;",
  8494. " height: 87px !important;",
  8495. " width: 100% !important;",
  8496. " background-color: #222222 !important;",
  8497. " opacity: 0.95 !important;",
  8498. " z-index: 2 !important;",
  8499. " border:0px !important;",
  8500. "}",
  8501. "#nav-static {",
  8502. " position: relative !important;",
  8503. " height: 100% !important;",
  8504. " max-width: 1300px !important;",
  8505. " margin: 0 auto !important;",
  8506. " padding: 0 30px !important;",
  8507. " border-bottom: 2px solid #000 !important;",
  8508. " box-sizing: border-box !important;",
  8509. " line-height: 87px !important;",
  8510. " vertical-align: middle !important;",
  8511. " border-radius:10px !important;",
  8512. "}",
  8513. "#nav-fixed {",
  8514. " position: relative !important;",
  8515. " height: 60px !important;",
  8516. " max-width: 1300px !important;",
  8517. " margin: auto !important;",
  8518. " padding: 0 30px !important;",
  8519. " border-bottom: 1px solid #111111 !important;",
  8520. " line-height: 60px !important;",
  8521. "}",
  8522. "#nav-fixed-wrapper {",
  8523. " position: fixed !important;",
  8524. " height: 60px !important;",
  8525. " width: 100% !important;",
  8526. " top: -400px !important;",
  8527. " left: 0 !important;",
  8528. " font-family: \"Open Sans\" !important;",
  8529. " background-color: #111111 !important;",
  8530. " opacity: 0.95 !important;",
  8531. " z-index: 2 !important;",
  8532. " transition: top .3s !important;",
  8533. " border-bottom: 0px solid #e9e9e9 !important;",
  8534. "}",
  8535. ".tile-header {",
  8536. " height: 195px !important;",
  8537. " outline: 0px solid #111111 !important;",
  8538. "",
  8539. "}",
  8540. ".tile-header > img {",
  8541. " height: 195px !important;",
  8542. " outline: 0px solid #111111 !important;",
  8543. "",
  8544. "}",
  8545. ".tile {",
  8546. " position: relative !important;",
  8547. " border-radius: 15px !important;",
  8548. " background-color: #222222 !important;",
  8549. " border:0px solid #666666 !important;",
  8550. " box-shadow: 0 2px 15px 0 #111111 !important;",
  8551. " overflow: hidden !important;",
  8552. "",
  8553. "}",
  8554. ".trended-tiles {",
  8555. " position: relative !important;",
  8556. " border-radius: 4px !important;",
  8557. " background-color: #222222 !important;",
  8558. " border:2px solid #111111 !important;",
  8559. " box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1) !important;",
  8560. " overflow: hidden;",
  8561. "",
  8562. "}",
  8563. ".tile-content {",
  8564. " display: block !important;",
  8565. " width: 100% !important;",
  8566. " padding: 29px 23px 35px 17px !important;",
  8567. " box-sizing: border-box !important;",
  8568. " /* text-align: left !important; */",
  8569. " overflow: hidden !important;",
  8570. "}",
  8571. ".tile-content-info{",
  8572. " height: 40px !important;",
  8573. "}",
  8574. "",
  8575. ".tile-content-info-text{",
  8576. " color: #666666 !important;",
  8577. " position: relative !important;",
  8578. " bottom: 20px !important;",
  8579. "}",
  8580. "",
  8581. ".tile-name {",
  8582. " /* background-color:#111111 !important;*/ ",
  8583. " padding-top: 0px !important;",
  8584. " font-size: 20px !important;",
  8585. " white-space: nowrap !important;",
  8586. " position: relative;",
  8587. " left: 80px;",
  8588. " top: 160px;",
  8589. " /* box-shadow: 0 2px 15px 0 #111111 !important;*/",
  8590. " border-bottom: 0px solid #666666 !important;",
  8591. "}",
  8592. ".tile-content > img {",
  8593. " position: relative !important;",
  8594. " bottom: 20px !important;",
  8595. " padding-top: 0px !important;",
  8596. " border-radius: 10PX !important;",
  8597. "/*DISPLAY: NONE !important;8",
  8598. "VISIBILITY: HIDDEN !important;*/",
  8599. "}",
  8600. ".tile-info {",
  8601. " position: absolute !important;",
  8602. " display: block !important;",
  8603. " height: 195px !important;",
  8604. " width: 110% !important;",
  8605. " bottom: 0 !important;",
  8606. " left: -20px !important;",
  8607. " font-weight: 600 !important;",
  8608. " color: #ffffff !important;",
  8609. " text-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;",
  8610. " box-shadow: 0 2px 15px 0 #111111 !important;",
  8611. "}",
  8612. "#catalog-wrapper {",
  8613. " position: relative;",
  8614. " display: block;",
  8615. " max-width: none;",
  8616. " padding: 10px 160px 50px;",
  8617. " margin-top: -145px;",
  8618. "}",
  8619. ".tile-statistic {",
  8620. " border-radius: 10px !important;",
  8621. " text-align: left !important;",
  8622. " position: relative !important;",
  8623. " top: 135px !important;",
  8624. " left:0px !important;",
  8625. " padding-top: 0px !important;",
  8626. " width:100px !important;",
  8627. " height: 25px !important;",
  8628. " font-size: 0 !important;",
  8629. " text-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;",
  8630. " background-color:#111111 !important; ",
  8631. " white-space: nowrap !important;",
  8632. " border: 1px solid #232323 !important;",
  8633. "}",
  8634. "",
  8635. "#promoted-wrapper, #trended-wrapper {",
  8636. " ",
  8637. " position: relative !important;",
  8638. " display: none;",
  8639. " width: 100% !important;",
  8640. " max-width: 1360px !important;",
  8641. " margin: 0 auto !important;",
  8642. " padding-bottom:20px !important;",
  8643. " border-bottom:3px solid #ffb000 !important;",
  8644. " border-radius: 15px !important;",
  8645. "",
  8646. "}",
  8647. "",
  8648. "#promoted .tile-promoted, #trended .tile-promoted {",
  8649. " position: absolute !important;",
  8650. " bottom: 20px !important;",
  8651. "/* display:none; */",
  8652. "/* visibility: hidden !important;*/}",
  8653. "",
  8654. "#no-rooms-error {",
  8655. " padding-top: 33px !important;",
  8656. " font-family: Roboto !important;",
  8657. " font-weight: 300 !important;",
  8658. " font-size: 40px !important;",
  8659. " color: #ffffff !important;",
  8660. "}",
  8661. "#footer-content {",
  8662. " max-width: 1300px !important;",
  8663. " margin: 0 auto !important;",
  8664. " padding: 0px 0px 0px !important;",
  8665. " font-size: 11px !important;",
  8666. " color: #333333 !important;",
  8667. "}",
  8668. "#footer-content-wrapper {",
  8669. " background-color: #333333 !important;",
  8670. " display: none !important;",
  8671. " visibility: hidden !important;",
  8672. "}",
  8673. "#footer {",
  8674. " position: relative !important;",
  8675. " height: 0px !important;",
  8676. " width: 100% !important;",
  8677. " padding: 0 !important;",
  8678. " background-color: #333333 !important;",
  8679. " border-top: 1px solid #111111 !important;",
  8680. " display: none !important;",
  8681. " visibility: hidden !important;",
  8682. "}",
  8683. "#footer-social {",
  8684. " position: absolute !important;",
  8685. " width: 650px !important;",
  8686. " min-height: 54px !important;",
  8687. " top: -30px !important;",
  8688. " left: 30px !important;",
  8689. " right: 30px !important;",
  8690. " margin: 0 auto !important;",
  8691. " text-align: center !important;",
  8692. " border: 1px solid #e1e1e1 !important;",
  8693. " background-color: #fff !important;",
  8694. " color: transparent !important;",
  8695. " display: none !important;",
  8696. " visibility: hidden !important;",
  8697. "}",
  8698. ".nav-menu-links, .nav-menu-links {",
  8699. " font-weight: bold !important;",
  8700. " display: none !important;",
  8701. "}",
  8702. ".nav-menu-links > a {",
  8703. " position: relative !important;",
  8704. " height: 100% !important;",
  8705. " padding: 0 1% !important;",
  8706. " box-sizing: border-box !important;",
  8707. " color: #FFFFFF !important;",
  8708. " transition: color .2s !important;",
  8709. " font-weight: bold !important;",
  8710. "}",
  8711. ".nav-menu-links > a:before {",
  8712. " content: \"\" !important;",
  8713. " position: absolute !important;",
  8714. " display: block !important;",
  8715. " height: 4px !important;",
  8716. " width: 100% !important;",
  8717. " bottom: -1px !important;",
  8718. " left: 0 !important;",
  8719. " color: #111111 !important;",
  8720. " background-color: #111111 !important;",
  8721. " cursor: default !important;",
  8722. " opacity: 0 !important;",
  8723. " transition: opacity .2s !important;",
  8724. "}",
  8725. ".nav-menu-links > a:hover, .nav-menu-links > a.active {",
  8726. " color: #111111 !important;",
  8727. "}",
  8728. ".nav-logo {",
  8729. " position: relative !important;",
  8730. " display: inline-block !important;",
  8731. " height: 70px !important;",
  8732. " width: 70px !important;",
  8733. " margin-right: -100% !important;",
  8734. " vertical-align: middle !important;",
  8735. " z-index: 1 !important;",
  8736. " COLOR:#FFFFFF !important;",
  8737. " background-image: url(https://anceldesigns.000webhostapp.com/img/512x512bb.png) !important;",
  8738. " background-position: center center !important;",
  8739. " background-size: 100% 100% !important;",
  8740. " background-repeat: no-repeat !important;",
  8741. "",
  8742. "}",
  8743. ".nav-logo svg {",
  8744. " display: none !important;",
  8745. "",
  8746. "}",
  8747. ".nav-btn-sign-on {",
  8748. " position: absolute !important;",
  8749. " right: -30px !important;",
  8750. " top: 25px;",
  8751. "}",
  8752. ".nav-btn-instant-room {",
  8753. " font-family: \"Open Sans\" !important;",
  8754. " border: 1px solid #111111 !important;",
  8755. " background-color: #111111 !important;",
  8756. " color: #fff !important;",
  8757. " margin-right: 20px !important;",
  8758. " position: absolute !important;",
  8759. " right: 50px !important;",
  8760. " top: 25px;",
  8761. "}",
  8762. "#promoted-wrapper > h2, #trended-wrapper > h2, #header-for-all {",
  8763. " padding: 0 0 11px 5px !important;",
  8764. " font-size: 20px !important;",
  8765. " line-height: 27px !important;",
  8766. " color: #fff !important;",
  8767. " text-transform: uppercase !important;",
  8768. " text-align: left !important;",
  8769. " font-weight: bold !important;",
  8770. " text-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;",
  8771. "}",
  8772. "#input-catalog-menu-all:checked ~ #navigation > label[for=\"input-catalog-menu-all\"], #input-catalog-menu-near-you:checked ~ #navigation > label[for=\"input-catalog-menu-near-you\"], #input-catalog-menu-most-gifted:checked ~ #navigation > label[for=\"input-catalog-menu-most-gifted\"] {",
  8773. " background-color: #111111 !important;",
  8774. " border:1px solid #111111 !important;",
  8775. " z-index: 1 !important;",
  8776. " font-weight: bold !important;",
  8777. " border-radius:25px;",
  8778. " margin:5px;",
  8779. "}",
  8780. "#navigation > label[for=\"input-catalog-navigation\"] {",
  8781. " display: none !important;",
  8782. " border-radius:25px;",
  8783. " margin:5px;",
  8784. "}",
  8785. "#navigation > label {",
  8786. " position: relative !important;",
  8787. " display: inline-block !important;",
  8788. " height: 40px !important;",
  8789. " width: 193px !important;",
  8790. " background-color: #222222 !important;",
  8791. " border: 1px solid #fff !important;",
  8792. " font-size: 17px !important;",
  8793. " color: #fff !important;",
  8794. " cursor: pointer !important;",
  8795. " z-index: 1 !important;",
  8796. " transition: .2s !important;",
  8797. " border-radius:25px;",
  8798. " margin:5px;",
  8799. "}",
  8800. ".nav-sandwich-menu-button:before {",
  8801. " height: 5px !important;",
  8802. " width: 100% !important;",
  8803. " top: 4px !important;",
  8804. " left: 0 !important;",
  8805. " background-color: #111111 !important;",
  8806. "}",
  8807. ".nav-sandwich-menu-button {",
  8808. "",
  8809. " background-color: #222222 !important;",
  8810. "",
  8811. "}",
  8812. ".nav-sandwich-menu-button:after {",
  8813. " height: 5px !important;",
  8814. " width: 100% !important;",
  8815. " top: 4px !important;",
  8816. " left: 0 !important;",
  8817. " background-color: #111111 !important;",
  8818. " bottom: 4px !important;",
  8819. "}",
  8820. "#loadmore {",
  8821. " height: 48px !important;",
  8822. " font-size: 16px !important;",
  8823. " color: #fff !important;",
  8824. " background-color: #111111 !important;",
  8825. " line-height: 48px !important;",
  8826. " vertical-align: middle !important;",
  8827. " transition: background-color .2s !important;",
  8828. "}",
  8829. "#content > h1 {",
  8830. " text-transform: uppercase;",
  8831. " font-weight: 600 !important;",
  8832. " color: #fff !important;",
  8833. "}",
  8834. "#content > #wrapper-forms {",
  8835. " background-color: #222222 !important;",
  8836. "}",
  8837. "#content {",
  8838. " background-color: #333333 !important;",
  8839. " padding-bottom: 0px !important;",
  8840. "}",
  8841. "#content-page-content {",
  8842. " background-color: transparent !important;",
  8843. "}",
  8844. "#content {",
  8845. " top:100px !important;",
  8846. "}",
  8847. "#content-page-menu {",
  8848. " background-color: #666666 !important;",
  8849. " box-shadow: 0 2px 15px 0 #111111 !important;",
  8850. "}",
  8851. "#content-page-menu > a:hover, #content-page-menu > a.active {",
  8852. " background-color: #333333 !important;",
  8853. " color: #fff !important;",
  8854. "}",
  8855. "#wrapper {",
  8856. " background-color: #222222 !important;",
  8857. "}",
  8858. "#up-button-content:hover {",
  8859. " background-color:#000 !important;",
  8860. "}",
  8861. "#content > * {",
  8862. " background-color: #222222 !important;",
  8863. " /*background-image: url(https://image.ibb.co/mCRLCT/Wallpaper_Here.jpg);*/",
  8864. " background-attachment: fixed;",
  8865. " background-position: center;",
  8866. "}",
  8867. "#live-broadcasts-wrapper > div {",
  8868. " background-color: #222222 !important;",
  8869. "}",
  8870. "#live-broadcasts-wrapper {",
  8871. " background-color: #222222 !important;",
  8872. "}"
  8873. ].join("\n");
  8874. if (typeof GM_addStyle != "undefined") {
  8875. GM_addStyle(css);
  8876. } else if (typeof PRO_addStyle != "undefined") {
  8877. PRO_addStyle(css);
  8878. } else if (typeof addStyle != "undefined") {
  8879. addStyle(css);
  8880. } else {
  8881. var node = document.createElement("style");
  8882. node.type = "text/css";
  8883. node.appendChild(document.createTextNode(css));
  8884. var heads = document.getElementsByTagName("head");
  8885. if (heads.length > 0) {
  8886. heads[0].appendChild(node);
  8887. } else {
  8888. // no head yet, stick it whereever
  8889. document.documentElement.appendChild(node);
  8890. }
  8891. }
  8892. })();
  8893. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!