Sleazy Fork is available in English.

MyGirl responsive + customisations v1.xx

MyGirl website is more suitable for wide screens.

  1. /* ==UserStyle==
  2. @name MyGirl responsive + customisations v1.xx
  3. @description MyGirl website is more suitable for wide screens.
  4. @version 1.0.0
  5. @author BreatFR
  6. @namespace https://gitlab.com/breatfr
  7. @homepageURL https://gitlab.com/breatfr/mygirl
  8. @supportURL https://discord.com/channels/1172088835358863410/1172482585918709840
  9. @license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor stylus
  11.  
  12. @var select bgchoice "Background choice" {
  13. "❤️ Hearts": "heartbg",
  14. "⬜ None": "nobg",
  15. "❔ Custom": "custombg"
  16. }
  17. @var text custombgurl "Background URL" "URL between quotes"
  18.  
  19. @var checkbox bgcolor "Background color" 0
  20. @var checkbox bgcolor "Background color" 0
  21. @var color bgcolorvalue "Background color value" #292b41
  22. @var checkbox lisabgcolor "Lisa's custom bubble color" 0
  23. @var color lisabgcolorvalue "Lisa's bubble color value" #211b19
  24. @var checkbox ourbgcolor "Our custom bubble color" 0
  25. @var color ourbgcolorvalue "Our bubble color value" #1b1c1e
  26. @var checkbox lisatextscolor "Lisa's font color" 0
  27. @var color lisatextscolorvalue "Lisa's font color value" #e591ff
  28. @var checkbox ourtextscolor "Our custom bubble color" 0
  29. @var checkbox ourtextscolor "Our font color" 0
  30. @var color ourtextscolorvalue "Our font color" #cbcbcb
  31. @var checkbox blurcontent "Blur content in bubbles" 0
  32. @var text bubblestext "Bubbles font size" 20px
  33. @var text chattextareasize "Textarea font size" 20px
  34. @var checkbox imageborder "Image border on hover" 1
  35. @var checkbox realsizeimages "Real size images in chat" 1
  36. ==/UserStyle== */
  37.  
  38. /* === Credits ===
  39. Website https://breat.fr
  40. facebook https://www.facebook.com/breatfroff
  41. mastodon https://mastodon.social/@breat_fr
  42. telegram https://t.me/breatfr
  43. vk https://vk.com/breatfroff
  44. X (twitter) https://x.com/breatfroff
  45. === Credits === */
  46. @-moz-document url("https://app.mygirl.tech/#/chat") {
  47. /* ===================================================================================================================================
  48. Chat page
  49. =================================================================================================================================== */
  50. /* Image border on hover */
  51. if imageborder {
  52. .el-image__preview {
  53. width: 215px !important;
  54. }
  55. .el-image__preview:hover {
  56. transition: 0.2s linear;
  57. border-radius: 16px;
  58. }
  59. .message__item--img:hover {
  60. border-radius: 16px;
  61. box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
  62. transition: 0.2s linear;
  63. }
  64. }
  65. if realsizeimages {
  66. .message__item--img,
  67. .message__item--img img {
  68. width: 768px !important;
  69. }
  70. }
  71. /* Image border on hover */
  72. if imageborder {
  73. .css-1regj17:hover {
  74. transition: 0.2s linear;
  75. }
  76. .css-1regj17:hover {
  77. border-radius: 16px;
  78. height: 300px;
  79. width: 300px;
  80. }
  81. .css-3vu8ng:hover {
  82. border-radius: 16px;
  83. box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
  84. transition: 0.2s linear;
  85. }
  86. }
  87. /* Background */
  88. if (bgchoice=="heartbg") {
  89. .chat__container,
  90. .chat__message-box,
  91. .messages__box--wrapper,
  92. .message__input,
  93. .role__name {
  94. background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) bgcolorvalue fixed 100% !important;
  95. }
  96. }
  97. if (bgchoice=="nobg") {
  98. /* No background */
  99. .chat__container,
  100. .chat__message-box,
  101. .messages__box--wrapper,
  102. .message__input,
  103. .role__name {
  104. background: bgcolorvalue;
  105. }
  106. }
  107. if (bgchoice=="custombg") {
  108. /* Custom background */
  109. .chat__container,
  110. .chat__message-box,
  111. .messages__box--wrapper,
  112. .message__input,
  113. .role__name {
  114. background: url(custombgurl) bgcolorvalue fixed 100% !important;
  115. }
  116. }
  117. if bgcolor {
  118. .chat__container,
  119. .chat__message-box,
  120. .messages__box--wrapper,
  121. .message__input,
  122. .role__name {
  123. background-color: bgcolorvalue !important;
  124. }
  125. }
  126. if blurcontent {
  127. .message__item,
  128. .message__item--img {
  129. filter: blur(8px);
  130. -webkit-filter: blur(8px);
  131. }
  132. }
  133. /* Header */
  134. .sidebar {
  135. max-height: 60px;
  136. left: 0px;
  137. top: 0px;
  138. z-index: 9999;
  139. }
  140. .sidebar[data-v-e3b8cdb9] {
  141. height: 60px;
  142. width: 30.45%;
  143. }
  144. .sidebar > figure > img {
  145. left: 10px;
  146. margin-block-end: 0px;
  147. margin-block-start: 0px;
  148. margin-inline-end: 0px;
  149. margin-inline-start: 0px;
  150. max-height: 50px;
  151. max-width: 50px;
  152. position: absolute;
  153. top: 10px;
  154. }
  155. .sidebar__item.logout svg use {
  156. stroke: var(--el-color-danger);
  157. }
  158. .sidebar__item.download,
  159. .sidebar__item.setting > span,
  160. .sidebar__item.logout {
  161. display: none;
  162. }
  163. .sidebar__item.download > svg,
  164. .sidebar__item.setting > svg,
  165. .sidebar__item.logout > svg {
  166. height: 40px;
  167. width: 40px;
  168. }
  169. .sidebar > figure > figcaption {
  170. display: none;
  171. }
  172. .sidebar__footer {
  173. display: flex !important;
  174. column-gap: 20px;
  175. left: 25%;
  176. top: 20%;
  177. position: absolute;
  178. width: 100%;
  179. z-index: 9999;
  180. }
  181. .sidebar__item.setting {
  182. padding-right: 0 !important;
  183. }
  184. .menu-icon-container.menu-icon-container--show-red-dot:after,
  185. .sidebar__item.sidebar__item--show-red-dot:after {
  186. right: 10px !important;
  187. }
  188. .menu-icon-container.menu-icon-container--show-red-dot:hover:after,
  189. .sidebar__item.sidebar__item--show-red-dot:hover:after {
  190. height: inherit;
  191. left: 66%;
  192. width: inherit;
  193. }
  194. .setting-btn-layout {
  195. column-gap: 20px;
  196. display: flex !important;
  197. left: 25% !important;
  198. position: absolute;
  199. top: -7% !important;
  200. z-index: 9999;
  201. }
  202. .setting-btn-layout > button,
  203. .setting-btn-layout > button:hover {
  204. background-color: transparent;
  205. border: none;
  206. }
  207. .setting:hover::after {
  208. background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
  209. border-radius: 5px;
  210. color: white;
  211. content: "Settings";
  212. font-size: 18px !important;
  213. font-weight: 600 !important;
  214. left: -3%;
  215. padding: 5px;
  216. position: absolute;
  217. top: 100%;
  218. }
  219. .character-home.chat__main > div > button:nth-child(1):hover::after {
  220. background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
  221. border-radius: 5px;
  222. color: white;
  223. content: "Gift Shop";
  224. font-size: 18px !important;
  225. font-weight: 600 !important;
  226. left: -18%;
  227. padding: 5px;
  228. position: absolute;
  229. top: 100%;
  230. }
  231. .character-home.chat__main > div > button:nth-child(2) > span > svg {
  232. padding-top: 5px !important;
  233. }
  234. .character-home.chat__main > div > button:nth-child(2):hover::after {
  235. background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
  236. border-radius: 5px;
  237. color: white;
  238. content: "Avatar & Outfit";
  239. font-size: 18px !important;
  240. font-weight: 600 !important;
  241. left: 27%;
  242. padding: 5px;
  243. position: absolute;
  244. top: 100%;
  245. }
  246. .setting-btn {
  247. height: 40px !important;
  248. width: 40px !important;
  249. }
  250. .character-home.chat__main > div > button:nth-child(1) > span > svg {
  251. height: 40px !important;
  252. width: 40px !important;
  253. }
  254. .character-home.chat__main > div > button:nth-child(2) > span > svg {
  255. height: 80px !important;
  256. width: 80px !important;
  257. }
  258. /* Chat */
  259. .chat__container {
  260. grid-template-columns: 30% 70% !important;
  261. left: 0px;
  262. position: absolute;
  263. width: calc(100% + 30px);
  264. }
  265. .chat__message-box {
  266. bottom: 0px;
  267. height: 100%;
  268. padding: 0px 0px 10px 0px !important;
  269. position: fixed;
  270. top: 0px;
  271. }
  272. /* Avatar */
  273. .character-home {
  274. background-color: #292b41;
  275. margin-top: 72px;
  276. }
  277. /* Chat */
  278. if bubblescolor {
  279. .message__item {
  280. color: bubblescolor !important;
  281. }
  282. }
  283. if bubblestext {
  284. .message__item {
  285. font-size: bubblestext !important;
  286. }
  287. }
  288. if chattextareasize {
  289. input {
  290. font-size: chattextareasize !important;
  291. }
  292. }
  293. .messages__box {
  294. margin-bottom: 20px !important;
  295. padding: 0px 40px 0px 40px !important;
  296. z-index: 9999;
  297. }
  298. /* Save space between chat bubbles */
  299. .message-item__wrapper {
  300. margin: 10px 0px 10px 0px !important;
  301. }
  302. /* Topic */
  303. .topic {
  304. font-size: 14px !important;
  305. }
  306. /* Textarea */
  307. .el-input__wrapper {
  308. border-radius: 30px;
  309. }
  310. .el-input__wrapper.is-focus {
  311. border-radius: 30px;
  312. box-shadow: 0 0 0 1px var(--el-input-focus-border) !important;
  313. }
  314. /* Bubbles size */
  315. .messages__box {
  316. width: 100%;
  317. }
  318. .message-item__wrapper {
  319. display: flex !important;
  320. align-self: start !important;
  321. -webkit-box-pack: start !important;
  322. justify-content: start !important;
  323. height: fit-content !important;
  324. }
  325. .message__item {
  326. border-radius: 8px 20px 20px 20px !important;
  327. display: flex !important;
  328. flex-direction: column !important;
  329. max-width: 80% !important;
  330. }
  331. .message-item__wrapper-is-me {
  332. align-self: end !important;
  333. display: flex !important;
  334. height: fit-content !important;
  335. justify-content: end !important;
  336. -webkit-box-pack: end !important;
  337. }
  338. .message__item-is-me {
  339. border-radius: 20px 8px 20px 20px !important;
  340. display: flex !important;
  341. flex-direction: column !important;
  342. max-width: 80% !important;
  343. }
  344. if lisabgcolor {
  345. .message__item {
  346. background: lisabgcolorvalue !important;
  347. border-radius: 8px 20px 20px 20px !important;
  348. display: flex !important;
  349. flex-direction: column !important;
  350. max-width: 80% !important;
  351. }
  352. }
  353. if ourbgcolor {
  354. .message__item-is-me {
  355. background: ourbgcolorvalue !important;
  356. border-radius: 20px 8px 20px 20px !important;
  357. display: flex !important;
  358. flex-direction: column !important;
  359. max-width: 80% !important;
  360. }
  361. }
  362. if lisatextscolor {
  363. .message__item {
  364. color: lisatextscolorvalue !important;
  365. }
  366. }
  367.  
  368. if ourtextscolor {
  369. .message__item-is-me {
  370. color: ourtextscolorvalue !important;
  371. }
  372. }
  373. /* No more border around images in chat */
  374. .el-image > img {
  375. border: none !important;
  376. }
  377. /* 1 time offer */
  378. .one-time-offer__body {
  379. top: -40px !important;
  380. margin-bottom: -25px;
  381. }
  382. .el-overlay-dialog,
  383. .el-dialog.coin-paywall {
  384. height: 900px !important;
  385. overflow: hidden !important;
  386. }
  387. .coin-package-list {
  388. padding-top: 30px !important;
  389. }
  390. .gift__price {
  391. background: rgba(106,139,255,.8) !important;
  392. height: 24px !important;
  393. font-size: 18px !important;
  394. font-weight: 400 !important;
  395. justify-self: center !important;
  396. line-height: 24px !important;
  397. padding: 10px 20px 10px 20px !important;
  398. text-align: center !important;
  399. width: fit-content !important;
  400. }
  401. /* Hide scrollbars */
  402. :root ::-webkit-scrollbar {
  403. scrollbar-width: none !important;
  404. -ms-overflow-style: none !important;
  405. width: 0px;
  406. }
  407. ::-webkit-scrollbar {
  408. display: none;
  409. width: 0px;
  410. }
  411. }
  412. @-moz-document url("https://app.mygirl.tech/#/setting") {
  413. /* ===================================================================================================================================
  414. Settings page
  415. =================================================================================================================================== */
  416. /* Theme version */
  417. :root {
  418. --version: 'Theme "MyGirl: Wide screen" by BreatFR version 1.00';
  419. }
  420. .sidebar {
  421. &::after {
  422. background: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  423. -webkit-background-clip: text;
  424. -webkit-text-fill-color: transparent;
  425. content: var(--version);
  426. font-size: 20px !important;
  427. position: absolute;
  428. top: 800px;
  429. left: 20px;
  430. width: max-content;
  431. }
  432. }
  433. if blurcontent {
  434. input {
  435. filter: blur(8px);
  436. -webkit-filter: blur(8px);
  437. }
  438. }
  439. /* Header */
  440. .sidebar {
  441. background: rgb(31, 30, 46) !important;
  442. max-height: 60px;
  443. left: 0px;
  444. top: 0px;
  445. z-index: 9999;
  446. }
  447. .sidebar[data-v-e3b8cdb9] {
  448. height: 60px;
  449. width: 31%;
  450. }
  451. .sidebar > figure > img {
  452. left: 10px;
  453. margin-block-end: 0px;
  454. margin-block-start: 0px;
  455. margin-inline-end: 0px;
  456. margin-inline-start: 0px;
  457. max-height: 50px;
  458. max-width: 50px;
  459. position: absolute;
  460. top: 10px;
  461. }
  462. .download:hover::after {
  463. background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
  464. border-radius: 5px;
  465. color: white;
  466. content: "Download app";
  467. font-size: 16px;
  468. left: -7%;
  469. padding: 5px;
  470. position: absolute;
  471. top: 100%;
  472. }
  473. .setting:hover::after {
  474. background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
  475. border-radius: 5px;
  476. color: white;
  477. content: "Settings";
  478. font-size: 16px;
  479. left: 11%;
  480. padding: 5px;
  481. position: absolute;
  482. top: 100%;
  483. }
  484. .logout:hover::after {
  485. background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
  486. border-radius: 5px;
  487. color: white;
  488. content: "Logout";
  489. font-size: 16px;
  490. left: 24%;
  491. padding: 5px;
  492. position: absolute;
  493. top: 100%;
  494. }
  495. .sidebar__item.logout {
  496. margin-top: -5px !important;
  497. }
  498. .sidebar__item.logout svg use {
  499. stroke: var(--el-color-danger);
  500. }
  501. .sidebar__item.download > span,
  502. .sidebar__item.setting > span,
  503. .sidebar__item.logout > span {
  504. display: none;
  505. }
  506. .sidebar__item.download > svg,
  507. .sidebar__item.setting > svg,
  508. .sidebar__item.logout > svg {
  509. height: 40px;
  510. width: 40px;
  511. }
  512. .sidebar > figure > figcaption {
  513. display: none;
  514. }
  515. .sidebar__footer {
  516. display: flex !important;
  517. gap: 20px;
  518. left: 0;
  519. top: 20%;
  520. position: absolute;
  521. width: 100%;
  522. z-index: 9999;
  523. }
  524. .sidebar__item.setting {
  525. padding-right: 0 !important;
  526. }
  527. .menu-icon-container.menu-icon-container--show-red-dot:after,
  528. .sidebar__item.sidebar__item--show-red-dot:after {
  529. right: 10px !important;
  530. }
  531. .menu-icon-container.menu-icon-container--show-red-dot:hover:after,
  532. .sidebar__item.sidebar__item--show-red-dot:hover:after {
  533. height: inherit;
  534. left: 66%;
  535. width: inherit;
  536. }
  537. /* Settings */
  538. .setting__container {
  539. left: 0px;
  540. position: absolute;
  541. padding-top: 72px !important;
  542. }
  543. .setting__container > div:nth-child(3) {
  544. position: absolute;
  545. right: 50%;
  546. top: 11.5%;
  547. }
  548. }