Mobile CAI Improved

Better mobile CAI experience

当前为 2024-12-05 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Mobile CAI Improved
  3. // @namespace http://tampermonkey.net/
  4. // @version 2.4
  5. // @description Better mobile CAI experience
  6. // @author LuxTallis
  7. // @match https://character.ai/*
  8. // @grant GM_addStyle
  9. // @grant GM_getValue
  10. // @grant GM_setValue
  11. // @license MIT
  12. // ==/UserScript==
  13. (function () {
  14. 'use strict';
  15.  
  16. // Create the panel
  17. const panel = document.createElement('div');
  18. panel.style.position = 'fixed';
  19. panel.style.bottom = '0';
  20. panel.style.left = '0';
  21. panel.style.width = '100%';
  22. panel.style.height = '30px';
  23. panel.style.backgroundColor = 'black';
  24. panel.style.padding = '2px 5px';
  25. panel.style.zIndex = '9999';
  26. panel.style.display = 'flex';
  27. panel.style.justifyContent = 'space-between';
  28. panel.style.alignItems = 'center';
  29.  
  30. // Create zoom buttons
  31. const zoomInButton = document.createElement('button');
  32. zoomInButton.innerHTML = 'A+';
  33. zoomInButton.style.padding = '5px';
  34. zoomInButton.style.fontSize = '16px';
  35. zoomInButton.style.border = 'none';
  36. zoomInButton.style.borderRadius = '3px';
  37. zoomInButton.style.backgroundColor = '#000000';
  38. zoomInButton.style.color = 'white';
  39. zoomInButton.style.cursor = 'pointer';
  40. zoomInButton.style.marginLeft = '5px';
  41.  
  42. const zoomOutButton = document.createElement('button');
  43. zoomOutButton.innerHTML = 'A-';
  44. zoomOutButton.style.padding = '5px';
  45. zoomOutButton.style.fontSize = '16px';
  46. zoomOutButton.style.border = 'none';
  47. zoomOutButton.style.borderRadius = '3px';
  48. zoomOutButton.style.backgroundColor = '#000000';
  49. zoomOutButton.style.color = 'white';
  50. zoomOutButton.style.cursor = 'pointer';
  51. zoomOutButton.style.marginLeft = '5px';
  52.  
  53. // Create the full-screen toggle button
  54. const fullScreenButton = document.createElement('button');
  55. fullScreenButton.innerHTML = '⛶';
  56. fullScreenButton.id = 'fullScreenToggle';
  57. fullScreenButton.style.padding = '5px';
  58. fullScreenButton.style.fontSize = '16px';
  59. fullScreenButton.style.border = 'none';
  60. fullScreenButton.style.borderRadius = '3px';
  61. fullScreenButton.style.backgroundColor = '#000000';
  62. fullScreenButton.style.color = 'white';
  63. fullScreenButton.style.cursor = 'pointer';
  64. fullScreenButton.style.marginRight = '5px';
  65.  
  66. // Append buttons to the panel
  67. const leftGroup = document.createElement('div');
  68. leftGroup.style.display = 'flex';
  69. leftGroup.appendChild(zoomInButton);
  70. leftGroup.appendChild(zoomOutButton);
  71. panel.appendChild(leftGroup);
  72.  
  73. const rightGroup = document.createElement('div');
  74. rightGroup.appendChild(fullScreenButton);
  75. panel.appendChild(rightGroup);
  76.  
  77. // Append the panel to the body
  78. document.body.appendChild(panel);
  79.  
  80. // CSS adjustments
  81. GM_addStyle(`
  82. @import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
  83.  
  84. body {
  85. background-color: #000000 !important;
  86. color: #ffffff !important;
  87. font-family: 'PT Sans', sans-serif !important;
  88. }
  89.  
  90. .mt-1.bg-surface-elevation-2,
  91. .mt-1.bg-surface-elevation-3,
  92. .prose,
  93. .grow,
  94. textarea.flex {
  95. background-color: #000000 !important;
  96. font-family: 'PT Sans', sans-serif !important;
  97. }
  98.  
  99. .text-foreground {
  100. color: #000000 !important;
  101. font-family: 'PT Sans', sans-serif !important;
  102. }
  103.  
  104. #chat-messages .max-w-xl.rounded-2xl.bg-surface-elevation-2,
  105. #chat-messages textarea[maxlength="4092"] {
  106. background-color: #000000 !important;
  107. border: none !important;
  108. }
  109.  
  110. .dark #chat-header-background {
  111. background: #000000 !important;
  112. }
  113.  
  114. button.px-unit-0:nth-child(2) {
  115. display: none !important;
  116. }
  117.  
  118. /* Ensure the zoom and fullscreen buttons are unaffected by font size change */
  119. button {
  120. font-size: 16px !important;
  121. font-family: 'PT Sans', sans-serif !important;
  122. }
  123. `);
  124.  
  125. // Load saved font size
  126. let fontSize = GM_getValue('fontSize', 16);
  127.  
  128. const applyFontSize = () => {
  129. GM_addStyle(`
  130. * { font-size: ${fontSize}px !important; }
  131. `);
  132. };
  133.  
  134. applyFontSize();
  135.  
  136. // Full-screen toggle functionality
  137. fullScreenButton.addEventListener('click', () => {
  138. if (!document.fullscreenElement) {
  139. document.documentElement.requestFullscreen().catch(err => {
  140. console.error(`Error attempting to enable full-screen mode: ${err.message}`);
  141. });
  142. } else {
  143. document.exitFullscreen().catch(err => {
  144. console.error(`Error attempting to exit full-screen mode: ${err.message}`);
  145. });
  146. }
  147. });
  148.  
  149. // Zoom in and out functionality
  150. zoomInButton.addEventListener('click', () => {
  151. fontSize += 1;
  152. GM_setValue('fontSize', fontSize);
  153. applyFontSize();
  154. });
  155.  
  156. zoomOutButton.addEventListener('click', () => {
  157. fontSize -= 1;
  158. GM_setValue('fontSize', fontSize);
  159. applyFontSize();
  160. });
  161. })();