- /* ==UserStyle==
- @name MyGirl responsive + customisations v1.xx
- @description MyGirl website is more suitable for wide screens.
- @version 1.0.0
- @author BreatFR
- @namespace https://gitlab.com/breatfr
- @homepageURL https://gitlab.com/breatfr/mygirl
- @supportURL https://discord.com/channels/1172088835358863410/1172482585918709840
- @license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
- @preprocessor stylus
-
- @var select bgchoice "Background choice" {
- "❤️ Hearts": "heartbg",
- "⬜ None": "nobg",
- "❔ Custom": "custombg"
- }
- @var text custombgurl "Background URL" "URL between quotes"
-
- @var checkbox bgcolor "Background color" 0
- @var checkbox bgcolor "Background color" 0
- @var color bgcolorvalue "Background color value" #292b41
- @var checkbox lisabgcolor "Lisa's custom bubble color" 0
- @var color lisabgcolorvalue "Lisa's bubble color value" #211b19
- @var checkbox ourbgcolor "Our custom bubble color" 0
- @var color ourbgcolorvalue "Our bubble color value" #1b1c1e
- @var checkbox lisatextscolor "Lisa's font color" 0
- @var color lisatextscolorvalue "Lisa's font color value" #e591ff
- @var checkbox ourtextscolor "Our custom bubble color" 0
- @var checkbox ourtextscolor "Our font color" 0
- @var color ourtextscolorvalue "Our font color" #cbcbcb
- @var checkbox blurcontent "Blur content in bubbles" 0
- @var text bubblestext "Bubbles font size" 20px
- @var text chattextareasize "Textarea font size" 20px
- @var checkbox imageborder "Image border on hover" 1
- @var checkbox realsizeimages "Real size images in chat" 1
- ==/UserStyle== */
-
- /* === Credits ===
- Website https://breat.fr
- facebook https://www.facebook.com/breatfroff
- mastodon https://mastodon.social/@breat_fr
- telegram https://t.me/breatfr
- vk https://vk.com/breatfroff
- X (twitter) https://x.com/breatfroff
- === Credits === */
- @-moz-document url("https://app.mygirl.tech/#/chat") {
- /* ===================================================================================================================================
- Chat page
- =================================================================================================================================== */
- /* Image border on hover */
- if imageborder {
- .el-image__preview {
- width: 215px !important;
- }
- .el-image__preview:hover {
- transition: 0.2s linear;
- border-radius: 16px;
- }
- .message__item--img:hover {
- border-radius: 16px;
- 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;
- transition: 0.2s linear;
- }
- }
-
- if realsizeimages {
- .message__item--img,
- .message__item--img img {
- width: 768px !important;
- }
- }
-
- /* Image border on hover */
- if imageborder {
- .css-1regj17:hover {
- transition: 0.2s linear;
- }
- .css-1regj17:hover {
- border-radius: 16px;
- height: 300px;
- width: 300px;
- }
- .css-3vu8ng:hover {
- border-radius: 16px;
- 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;
- transition: 0.2s linear;
- }
- }
-
- /* Background */
- if (bgchoice=="heartbg") {
- .chat__container,
- .chat__message-box,
- .messages__box--wrapper,
- .message__input,
- .role__name {
- background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) bgcolorvalue fixed 100% !important;
- }
- }
- if (bgchoice=="nobg") {
- /* No background */
- .chat__container,
- .chat__message-box,
- .messages__box--wrapper,
- .message__input,
- .role__name {
- background: bgcolorvalue;
- }
- }
- if (bgchoice=="custombg") {
- /* Custom background */
- .chat__container,
- .chat__message-box,
- .messages__box--wrapper,
- .message__input,
- .role__name {
- background: url(custombgurl) bgcolorvalue fixed 100% !important;
- }
- }
- if bgcolor {
- .chat__container,
- .chat__message-box,
- .messages__box--wrapper,
- .message__input,
- .role__name {
- background-color: bgcolorvalue !important;
- }
- }
-
- if blurcontent {
- .message__item,
- .message__item--img {
- filter: blur(8px);
- -webkit-filter: blur(8px);
- }
- }
-
- /* Header */
- .sidebar {
- max-height: 60px;
- left: 0px;
- top: 0px;
- z-index: 9999;
- }
- .sidebar[data-v-e3b8cdb9] {
- height: 60px;
- width: 30.45%;
- }
- .sidebar > figure > img {
- left: 10px;
- margin-block-end: 0px;
- margin-block-start: 0px;
- margin-inline-end: 0px;
- margin-inline-start: 0px;
- max-height: 50px;
- max-width: 50px;
- position: absolute;
- top: 10px;
- }
- .sidebar__item.logout svg use {
- stroke: var(--el-color-danger);
- }
- .sidebar__item.download,
- .sidebar__item.setting > span,
- .sidebar__item.logout {
- display: none;
- }
- .sidebar__item.download > svg,
- .sidebar__item.setting > svg,
- .sidebar__item.logout > svg {
- height: 40px;
- width: 40px;
- }
- .sidebar > figure > figcaption {
- display: none;
- }
- .sidebar__footer {
- display: flex !important;
- column-gap: 20px;
- left: 25%;
- top: 20%;
- position: absolute;
- width: 100%;
- z-index: 9999;
- }
- .sidebar__item.setting {
- padding-right: 0 !important;
- }
- .menu-icon-container.menu-icon-container--show-red-dot:after,
- .sidebar__item.sidebar__item--show-red-dot:after {
- right: 10px !important;
- }
- .menu-icon-container.menu-icon-container--show-red-dot:hover:after,
- .sidebar__item.sidebar__item--show-red-dot:hover:after {
- height: inherit;
- left: 66%;
- width: inherit;
- }
-
- .setting-btn-layout {
- column-gap: 20px;
- display: flex !important;
- left: 25% !important;
- position: absolute;
- top: -7% !important;
- z-index: 9999;
- }
- .setting-btn-layout > button,
- .setting-btn-layout > button:hover {
- background-color: transparent;
- border: none;
- }
- .setting:hover::after {
- background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
- border-radius: 5px;
- color: white;
- content: "Settings";
- font-size: 18px !important;
- font-weight: 600 !important;
- left: -3%;
- padding: 5px;
- position: absolute;
- top: 100%;
- }
- .character-home.chat__main > div > button:nth-child(1):hover::after {
- background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
- border-radius: 5px;
- color: white;
- content: "Gift Shop";
- font-size: 18px !important;
- font-weight: 600 !important;
- left: -18%;
- padding: 5px;
- position: absolute;
- top: 100%;
- }
- .character-home.chat__main > div > button:nth-child(2) > span > svg {
- padding-top: 5px !important;
- }
- .character-home.chat__main > div > button:nth-child(2):hover::after {
- background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
- border-radius: 5px;
- color: white;
- content: "Avatar & Outfit";
- font-size: 18px !important;
- font-weight: 600 !important;
- left: 27%;
- padding: 5px;
- position: absolute;
- top: 100%;
- }
- .setting-btn {
- height: 40px !important;
- width: 40px !important;
- }
- .character-home.chat__main > div > button:nth-child(1) > span > svg {
- height: 40px !important;
- width: 40px !important;
- }
- .character-home.chat__main > div > button:nth-child(2) > span > svg {
- height: 80px !important;
- width: 80px !important;
- }
-
- /* Chat */
- .chat__container {
- grid-template-columns: 30% 70% !important;
- left: 0px;
- position: absolute;
- width: calc(100% + 30px);
- }
- .chat__message-box {
- bottom: 0px;
- height: 100%;
- padding: 0px 0px 10px 0px !important;
- position: fixed;
- top: 0px;
- }
- /* Avatar */
- .character-home {
- background-color: #292b41;
- margin-top: 72px;
- }
-
- /* Chat */
- if bubblescolor {
- .message__item {
- color: bubblescolor !important;
- }
- }
- if bubblestext {
- .message__item {
- font-size: bubblestext !important;
- }
- }
- if chattextareasize {
- input {
- font-size: chattextareasize !important;
- }
- }
-
- .messages__box {
- margin-bottom: 20px !important;
- padding: 0px 40px 0px 40px !important;
- z-index: 9999;
- }
-
- /* Save space between chat bubbles */
- .message-item__wrapper {
- margin: 10px 0px 10px 0px !important;
- }
-
- /* Topic */
- .topic {
- font-size: 14px !important;
- }
-
- /* Textarea */
- .el-input__wrapper {
- border-radius: 30px;
- }
- .el-input__wrapper.is-focus {
- border-radius: 30px;
- box-shadow: 0 0 0 1px var(--el-input-focus-border) !important;
- }
-
- /* Bubbles size */
- .messages__box {
- width: 100%;
- }
- .message-item__wrapper {
- display: flex !important;
- align-self: start !important;
- -webkit-box-pack: start !important;
- justify-content: start !important;
- height: fit-content !important;
- }
- .message__item {
- border-radius: 8px 20px 20px 20px !important;
- display: flex !important;
- flex-direction: column !important;
- max-width: 80% !important;
- }
- .message-item__wrapper-is-me {
- align-self: end !important;
- display: flex !important;
- height: fit-content !important;
- justify-content: end !important;
- -webkit-box-pack: end !important;
- }
- .message__item-is-me {
- border-radius: 20px 8px 20px 20px !important;
- display: flex !important;
- flex-direction: column !important;
- max-width: 80% !important;
- }
-
- if lisabgcolor {
- .message__item {
- background: lisabgcolorvalue !important;
- border-radius: 8px 20px 20px 20px !important;
- display: flex !important;
- flex-direction: column !important;
- max-width: 80% !important;
- }
- }
- if ourbgcolor {
- .message__item-is-me {
- background: ourbgcolorvalue !important;
- border-radius: 20px 8px 20px 20px !important;
- display: flex !important;
- flex-direction: column !important;
- max-width: 80% !important;
- }
- }
-
- if lisatextscolor {
- .message__item {
- color: lisatextscolorvalue !important;
- }
- }
-
- if ourtextscolor {
- .message__item-is-me {
- color: ourtextscolorvalue !important;
- }
- }
-
- /* No more border around images in chat */
- .el-image > img {
- border: none !important;
- }
-
- /* 1 time offer */
- .one-time-offer__body {
- top: -40px !important;
- margin-bottom: -25px;
- }
- .el-overlay-dialog,
- .el-dialog.coin-paywall {
- height: 900px !important;
- overflow: hidden !important;
- }
- .coin-package-list {
- padding-top: 30px !important;
- }
-
- .gift__price {
- background: rgba(106,139,255,.8) !important;
- height: 24px !important;
- font-size: 18px !important;
- font-weight: 400 !important;
- justify-self: center !important;
- line-height: 24px !important;
- padding: 10px 20px 10px 20px !important;
- text-align: center !important;
- width: fit-content !important;
- }
-
- /* Hide scrollbars */
- :root ::-webkit-scrollbar {
- scrollbar-width: none !important;
- -ms-overflow-style: none !important;
- width: 0px;
- }
- ::-webkit-scrollbar {
- display: none;
- width: 0px;
- }
- }
- @-moz-document url("https://app.mygirl.tech/#/setting") {
- /* ===================================================================================================================================
- Settings page
- =================================================================================================================================== */
- /* Theme version */
- :root {
- --version: 'Theme "MyGirl: Wide screen" by BreatFR version 1.00';
- }
- .sidebar {
- &::after {
- background: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- content: var(--version);
- font-size: 20px !important;
- position: absolute;
- top: 800px;
- left: 20px;
- width: max-content;
- }
- }
-
- if blurcontent {
- input {
- filter: blur(8px);
- -webkit-filter: blur(8px);
- }
- }
-
- /* Header */
- .sidebar {
- background: rgb(31, 30, 46) !important;
- max-height: 60px;
- left: 0px;
- top: 0px;
- z-index: 9999;
- }
- .sidebar[data-v-e3b8cdb9] {
- height: 60px;
- width: 31%;
- }
- .sidebar > figure > img {
- left: 10px;
- margin-block-end: 0px;
- margin-block-start: 0px;
- margin-inline-end: 0px;
- margin-inline-start: 0px;
- max-height: 50px;
- max-width: 50px;
- position: absolute;
- top: 10px;
- }
- .download:hover::after {
- background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
- border-radius: 5px;
- color: white;
- content: "Download app";
- font-size: 16px;
- left: -7%;
- padding: 5px;
- position: absolute;
- top: 100%;
- }
- .setting:hover::after {
- background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
- border-radius: 5px;
- color: white;
- content: "Settings";
- font-size: 16px;
- left: 11%;
- padding: 5px;
- position: absolute;
- top: 100%;
- }
- .logout:hover::after {
- background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
- border-radius: 5px;
- color: white;
- content: "Logout";
- font-size: 16px;
- left: 24%;
- padding: 5px;
- position: absolute;
- top: 100%;
- }
- .sidebar__item.logout {
- margin-top: -5px !important;
- }
- .sidebar__item.logout svg use {
- stroke: var(--el-color-danger);
- }
- .sidebar__item.download > span,
- .sidebar__item.setting > span,
- .sidebar__item.logout > span {
- display: none;
- }
- .sidebar__item.download > svg,
- .sidebar__item.setting > svg,
- .sidebar__item.logout > svg {
- height: 40px;
- width: 40px;
- }
- .sidebar > figure > figcaption {
- display: none;
- }
- .sidebar__footer {
- display: flex !important;
- gap: 20px;
- left: 0;
- top: 20%;
- position: absolute;
- width: 100%;
- z-index: 9999;
- }
- .sidebar__item.setting {
- padding-right: 0 !important;
- }
- .menu-icon-container.menu-icon-container--show-red-dot:after,
- .sidebar__item.sidebar__item--show-red-dot:after {
- right: 10px !important;
- }
- .menu-icon-container.menu-icon-container--show-red-dot:hover:after,
- .sidebar__item.sidebar__item--show-red-dot:hover:after {
- height: inherit;
- left: 66%;
- width: inherit;
- }
-
- /* Settings */
- .setting__container {
- left: 0px;
- position: absolute;
- padding-top: 72px !important;
- }
- .setting__container > div:nth-child(3) {
- position: absolute;
- right: 50%;
- top: 11.5%;
- }
- }