कस्टम CSS थीम (Theme Library)

कस्टम CSS थीम पूरे Marinara का रंग-रूप बदल देती है। थीम बनाने, इंपोर्ट करने, एक्सपोर्ट करने और बदलने के लिए Theme Library (थीम लाइब्रेरी) इस्तेमाल करें। यह गाइड उन CSS वेरिएबल और क्लास की सूची भी देती है जिन्हें थीम इस्तेमाल कर सकती है, और बताती है कि थीम Card CSS के साथ कैसे काम करती हैं। CSS के बिना जल्दी बदलाव के लिए चैट विंडो के तैयार स्टाइल देखें।

शुरू करने से पहले: अगर आप Marinara किसी दूसरे डिवाइस से खोलते हैं, जैसे फ़ोन से, तो थीम बनाने, एडिट करने, इंपोर्ट करने, चालू करने या हटाने से पहले सर्वर को एक एडमिन सीक्रेट चाहिए। जिस कंप्यूटर पर सर्वर चलता है, उस पर किसी सीक्रेट की ज़रूरत नहीं है।

1. सर्वर पर .env फ़ाइल में ADMIN_SECRET सेट करें।
2. ऐप में Settings → Advanced → Admin Access (सेटिंग्स → एडवांस्ड → एडमिन एक्सेस) खोलें और वही वैल्यू डालें।

देखें सर्वर कॉन्फ़िगरेशन रेफ़रेंस और रिमोट एक्सेस गाइड। किसी की दी हुई थीम पर स्विच करने के लिए थीम चालू करना पर जाएँ।

कस्टम थीम क्या है

CSS यानी Cascading Style Sheets, वह कोड जो रंग, बॉर्डर और स्पेसिंग तय करता है। थीम CSS का एक ब्लॉक है जो पेज का बैकग्राउंड, एक्सेंट रंग, कार्ड, बॉर्डर, टेक्स्ट और बहुत कुछ बदल सकता है।

थीम आपके Marinara सर्वर पर Theme Library में रहती हैं, इसलिए वे उसी सर्वर से जुड़ने वाले हर डिवाइस पर सिंक हो जाती हैं। बाकी ज़्यादातर अपीयरेंस सेटिंग्स एक ही डिवाइस पर रहती हैं। एक समय पर सिर्फ़ एक थीम चालू रह सकती है, और आप जितनी चाहें उतनी थीम रख सकते हैं।

Theme Library कहाँ मिलती है

1. Settings खोलें।
2. Addons टैब खोलें।
3. Theme Library सेक्शन ढूँढें।

थीम बनाना

1. Theme Library सेक्शन में Create Theme पर क्लिक करें।
2. नाम वाले बॉक्स में नाम टाइप करें (उसमें "Theme name..." लिखा दिखता है)।
3. बड़े टेक्स्ट बॉक्स में अपना CSS लिखें या पेस्ट करें।
4. Preview चालू रहने दें, ताकि टाइप करते ही आपके बदलाव लाइव दिखें। लाइव प्रीव्यू रोकने के लिए इसे बंद कर दें।
5. Save पर क्लिक करें।

नई थीम एक टेम्पलेट से शुरू होती है, जिसमें आम वेरिएबल कमेंट किए हुए उदाहरणों के रूप में दिए रहते हैं। कमेंट के निशान हटाएँ और अपनी वैल्यू भरें। बिल्कुल नई थीम सेव करते ही चालू हो जाती है, और आपको यह संदेश दिखता है: Theme "My Theme" saved and activated.

बाद में थीम बदलनी हो तो उसे Installed Themes में ढूँढें, कोड आइकन पर क्लिक करें (टूलटिप Edit theme CSS), बदलाव करें और Save पर क्लिक करें। एडिट करने से यह नहीं बदलता कि कौन सी थीम चालू है।

थीम इंपोर्ट और एक्सपोर्ट करना

थीम इंपोर्ट करने के लिए:

1. Theme Library सेक्शन में Import File पर क्लिक करें।
2. कोई .css या .json फ़ाइल चुनें।
3. संदेश पढ़ें। उसमें बताया जाता है कि कितनी थीम इंपोर्ट हुईं, कितनी छोड़ी गईं और कितनी फ़ेल हुईं।

.css फ़ाइल से एक थीम बनती है, जिसका नाम फ़ाइल के नाम पर रखा जाता है। .json फ़ाइल में एक या कई थीम हो सकती हैं। Marinara से एक्सपोर्ट की गई फ़ाइल जैसी है वैसी ही इंपोर्ट करें, या खुद एक छोटी फ़ाइल लिखें:

{ "name": "My Theme", "css": "..." }

इंपोर्ट की हुई थीम अपने आप चालू नहीं होतीं। जिस थीम का नाम और CSS, दोनों सर्वर पर पहले से मौजूद किसी थीम जैसे हों, उसे छोड़ दिया जाता है।

थीम एक्सपोर्ट करने के लिए Installed Themes में उसकी पंक्ति पर अपलोड आइकन (टूलटिप Export theme) पर क्लिक करें। Marinara एक .json फ़ाइल डाउनलोड करता है, जिसे आप कहीं और इंपोर्ट कर सकते हैं।

थीम चालू करना

Installed Themes में हर थीम दिखती है, और सबसे ऊपर एक Default Theme एंट्री रहती है।

1. किसी थीम को चालू करने के लिए उसके नाम पर क्लिक करें। चालू थीम पर सही का निशान दिखता है।
2. कस्टम थीमिंग बंद करके बिल्ट-इन लुक पर लौटने के लिए Default Theme पर क्लिक करें।

Settings → Appearance (सेटिंग्स → अपीयरेंस) में App Style (ऐप स्टाइल) के सबसे ऊपर मौजूद Reset Appearance भी चालू थीम बंद कर देता है।

थीम डिलीट करने के लिए ट्रैश आइकन (टूलटिप Remove theme) पर क्लिक करें और Delete Theme डायलॉग विंडो में पुष्टि करें। इससे उसका CSS सर्वर से हमेशा के लिए डिलीट हो जाता है।

अगर यह काम नहीं किया: ऐप का लुक गलत दिखे, तो चालू थीम और चैट में मौजूद Card CSS, दोनों जाँचें। देखें थीम और Card CSS।

चैट विंडो के तैयार स्टाइल

शुरू करने से पहले: इसके लिए CSS की ज़रूरत नहीं है।

1. Settings → Appearance → App (सेटिंग्स → अपीयरेंस → ऐप) खोलें।
2. App Style के सबसे नीचे Chat widget style (चैट विजेट स्टाइल) ढूँढें।
3. कोई स्टाइल चुनें।

हर स्टाइल का अपना फ़ॉन्ट है, वह लाइट और डार्क मोड में काम करता है, और बटन, विंडो व फैलने वाले सेक्शन को एक साथ स्टाइल करता है। कोई स्टाइल चुनने पर Font (फ़ॉन्ट), Shape (आकार) और तीनों रंग रीसेट हो जाते हैं। आपकी विंडो की जगहें बनी रहती हैं।

इन्हें आप अलग-अलग बदल सकते हैं:

• Font और Shape तब तक स्टाइल के हिसाब से चलते हैं (Preset font, Preset shape), जब तक आप कुछ और न चुनें।
• Border & Buttons Color (बॉर्डर और बटन का रंग) बाहरी रेखा और बटन के आइकन बदलता है। आइकन ग्रेडिएंट का पहला रंग इस्तेमाल करते हैं।
• Background Color (बैकग्राउंड का रंग) बटन, विंडो, फैलने वाले सेक्शन और एडिट की जा सकने वाली फ़ील्ड भरता है।
• Text Color (टेक्स्ट का रंग) विजेट का टेक्स्ट बदलता है। ग्रेडिएंट शीर्षक और लेबल पर दिखता है, और एडिट की जा सकने वाली फ़ील्ड पहला रंग इस्तेमाल करती हैं।

हर रंग के लिए सादा रंग चुनने का कलर पिकर और ग्रेडिएंट का विकल्प है। किसी कंट्रोल के पास का Reset color (रंग रीसेट करें) उसे फिर से स्टाइल के लाइट या डार्क रंगों पर ले आता है। सजावटी चिह्न अपने मूल रंग बनाए रखते हैं।

स्टाइल को चैट तक ले जाना

कलर पिकर के नीचे के तीन स्विच इस स्टाइल को आगे तक ले जाते हैं। हर स्विच शुरू में बंद रहता है और दूसरों से अलग काम करता है। किसी एक को बंद करने पर उस हिस्से की सामान्य चैट स्टाइलिंग लौट आती है, और दूसरा स्टाइल चुनने पर स्विच के आपके चुनाव बने रहते हैं।

इतिहास वाले बटन, यानी Load More (और लोड करें) और Show older (पुराने दिखाएँ), बाकी चैट कंट्रोल की तरह इन स्विच के हिसाब से चलते हैं। Game Mode में ये स्विच अलग से दिखाई जाने वाली टिप्पणियों, HUD विजेट, मैप पैनल, कैरेक्टर शीट, लॉग, Inventory, लड़ाई के पैनल और डायलॉग विंडो पर भी लागू होते हैं। Professor Mari इन हिस्सों के लिए कस्टम थीम भी बना सकती है।

कस्टम थीम अब भी इन स्टाइल को ओवरराइड कर सकती है। नीचे दिए गए विंडो और ड्रॉअर के वेरिएबल को स्टाइल के रंगों से ज़्यादा प्राथमिकता मिलती है। विंडो के अक्षरों के लिए --mari-window-font-family, सेक्शन के कोनों के लिए --mari-drawer-radius, और शीर्षक की सजावट छिपाने के लिए --mari-window-ornament: none इस्तेमाल करें। स्टाइल की पूरी सजावट हटाने के लिए पहले Default चुनें।

थीम और Card CSS

Marinara में कस्टम CSS जोड़ने के दो तरीके हैं, और दोनों एक साथ चालू रह सकते हैं।

• कस्टम थीम पूरे ऐप का रंग-रूप बदलती है। उसे Marinara के कोर वेरिएबल ओवरराइड करने, !important लगाने और position: fixed इस्तेमाल करने की छूट है।
• Card CSS किसी कैरेक्टर या पर्सोना कार्ड के अंदर रखा होता है और हर चैट में अलग से चालू किया जाता है। इसे ज़्यादा सख्ती से साफ़ किया जाता है: यह कोर वेरिएबल ओवरराइड नहीं कर सकता, !important हटा दिया जाता है, और position: fixed बदलकर position: absolute हो जाता है। यह पूरे ऐप को नहीं, सिर्फ़ चैट के संदेशों को स्टाइल करता है। देखें कार्ड CSS थीमिंग गाइड।

साइज़ और नाम की सीमाएँ

थीम का नाम ज़्यादा से ज़्यादा 200 अक्षर का हो सकता है। CSS ज़्यादा से ज़्यादा 256 KiB का हो सकता है, जिसे UTF-8 बाइट में मापा जाता है। इससे बड़ी थीम सेव या इंपोर्ट करते समय अस्वीकार हो जाती है। कस्टम थीम का CSS चलने से पहले साफ़ भी किया जाता है: किसी दूसरी वेबसाइट से फ़ाइल लोड करने वाली स्टाइल काम नहीं करतीं। इसकी जगह इमेज या फ़ॉन्ट को data: URI के रूप में एम्बेड करें।

CSS वेरिएबल रेफ़रेंस

थीम एडिटर में एक CSS Variable Reference रहता है, जिसे खोला और बंद किया जा सकता है। उस पर क्लिक करने से सबसे काम के वेरिएबल दिखते हैं, जिन्हें ओवरराइड किया जा सकता है। थीम इन्हीं वेरिएबल को :root ब्लॉक में सेट करके ऐप का रूप बदलती है। रेफ़रेंस में ये वेरिएबल दिए हैं:

थीम सिर्फ़ इन्हें ही नहीं, Marinara का इस्तेमाल किया हुआ कोई भी CSS वेरिएबल सेट कर सकती है। कुछ इफ़ेक्ट के अपने वेरिएबल हैं। उदाहरण के लिए, --marinara-theme-accent-pulse: enabled एक्सेंट पल्स एनिमेशन माँगता है।

चैट विंडो और ड्रॉअर की स्टाइल बदलना

कंप्यूटर पर Chat Settings (चैट सेटिंग्स) खिसकाई जा सकने वाली विंडो में खुलता है। उसके सिमटने वाले सेक्शन ड्रॉअर कहलाते हैं। ड्रॉअर अपनी अलग विंडो में खुल सकता है, फिर छोटे खिसकाए जा सकने वाले बटन में सिमट सकता है, जिसे बबल कहते हैं।

बाकी चैट टूल भी यही विंडो और बटन इस्तेमाल करते हैं, जैसे Game controls, Session, Volume, Game Assets, जुड़ी हुई चैट और पैकेज के कंट्रोल। फ़ोन पर ज़्यादातर विंडो पूरी चौड़ाई वाले पैनल में खुलती हैं; Echo Chamber एक छोटी विंडो रहती है जिसे खिसका सकते हैं और जिसका आकार बदल सकते हैं। Chat Settings से बाहर निकाले गए टूल, खिसकाए जा सकने वाले तीन बिंदुओं के Chat tools (चैट टूल) मेन्यू में आते हैं; ट्रैकर के बटन अलग रहते हैं।

नीचे की क्लास, डेटा एट्रिब्यूट और वेरिएबल से थीम इन हिस्सों को एक साथ बदल सकती है। आपकी थीम के नियम !important के बिना भी डिफ़ॉल्ट की जगह लग जाते हैं।

क्लास

डेटा एट्रिब्यूट

• data-window विंडो और उसके बबल का नाम बताता है: chat-settings, trackers, कंट्रोल विंडो के नाम control:game, control:session, control:volume, control:assets, control:connected-chat, control:package:<package> और control:beholder:<package>, तथा बाहर निकले ड्रॉअर के लिए drawer:<window>:<drawer>, जैसे drawer:chat-settings:chat-name।
• data-drawer ड्रॉअर का नाम बताता है, जैसे chat-name। कुछ नाम चैट मोड से शुरू होते हैं, जैसे roleplay-agents या conversation-agents। ट्रैकर के नाम tracker-world, tracker-persona, tracker-characters, tracker-quests, tracker-inventory, tracker-custom और agent-activity हैं।
• data-presentation कंप्यूटर की विंडो पर "window" और फ़ोन के पैनल पर "sheet" होता है।
• विंडो पिन या लॉक होने पर data-pinned और data-locked की वैल्यू "true" होती है।
• data-window-control हर टाइटल बार बटन का नाम बताता है: "pin", "lock", "close" या "put-back"। दबे हुए पिन या लॉक बटन पर aria-pressed="true" भी होता है।
• data-chat-settings-control Chat Settings के अतिरिक्त टाइटल बार बटन पहचानता है: "reset-view", "favorite-layout" और "tracker-panel"। मौजूदा लेआउट सेव किए गए पसंदीदा लेआउट से मेल खाने पर स्टार का आइकन भरा होता है और aria-pressed="true" होता है।
• आकार बदलने वाले हर हैंडल पर data-edge की वैल्यू "n", "s", "e", "w", "ne", "nw", "se" या "sw" होती है।
• खुले ड्रॉअर के .mari-drawer__header के अंदर वाले टॉगल बटन पर aria-expanded="true" होता है।
• data-drawer-control="pop-out" ड्रॉअर को अलग विंडो में खोलने वाला बटन पहचानता है।
• data-outside="true" उस प्रीव्यू पर होता है जिसे विंडो से इतना बाहर खींच लिया गया है कि छोड़ने पर वह अलग विंडो बन जाएगा।
• ऊपर से नीचे जाने वाली सीध की गाइड पर data-axis की वैल्यू "x" होती है और आड़ी गाइड पर "y"।
• अपनी विंडो में दिखने वाले ड्रॉअर पर data-detached की वैल्यू "true" होती है, विंडो पर भी और उसके अंदर के ड्रॉअर पर भी। बाहर निकले ड्रॉअर की विंडो का नाम data-window="drawer:<window>:<drawer>" होता है, जैसे data-window="drawer:chat-settings:chat-name", और data-drawer-host उस विंडो का नाम बताता है जिससे वह निकला था।
• शीर्षक खींचते समय ड्रॉअर पर data-dragging की वैल्यू "true" होती है। बाहर निकला ड्रॉअर वापस रखने के लिए किसी विंडो के ऊपर पकड़ा हो, तो उस विंडो पर data-drop-target की वैल्यू "true" होती है।
• बबल पर उसकी विंडो का data-window और data-minimized="true" होता है, जैसे .mari-window-bubble[data-window="control:volume"]। कंट्रोल विंडो के नाम control:game, control:session, control:volume, control:assets, control:connected-chat, control:package:<package> और control:beholder:<package> हैं। बबल खींचते समय उस पर data-dragging की वैल्यू "true" होती है। जो बबल अपने आइकन की जगह लाइव सारांश दिखाता है, जैसे छोटा किया गया World State ट्रैकर, उस पर data-banner="true" होता है और वह सारांश जितना चौड़ा हो जाता है।
• लॉक किए गए बबल पर data-locked="true" होता है, Chat Settings बटन पर भी। वह अपनी विंडो अब भी खोलता है, लेकिन विंडो अनलॉक होने तक खिसक नहीं सकता। ऐसे बटन को अलग रूप देने के लिए .mari-window-bubble[data-locked="true"] इस्तेमाल करें।
• फ़ोन पर विंडो और उनके थोड़े बड़े बबल, दोनों पर data-presentation="sheet" होता है। Tracker Panel का बबल .mari-window-bubble[data-tracker-panel-toggle="bubble"] है।
• Chat Settings बटन भी बबल है: .mari-window-bubble[data-chat-settings-button]; Chat Settings खुला हो, तो उस पर data-open="true" होता है।
• बाहर निकला सेक्शन जिस बबल में सिमटता है, उस पर data-drawer-host होता है (वह विंडो जिससे यह निकला था)। उसकी विंडो का Put back बटन [data-window-control="put-back"] है।

वेरिएबल

वैल्यू न देने पर हर वेरिएबल चैट के इंटरफ़ेस के साझा रंग इस्तेमाल करता है। इसलिए थीम को सिर्फ़ वही वेरिएबल देना होता है जिसे वह बदलना चाहती है।

सभी विंडो बदलने के लिए वेरिएबल :root में सेट करें, या किसी एक को बदलने के लिए उसके सिलेक्टर पर:

:root {
  --mari-window-radius: 0.5rem;
  --mari-window-bubble-bg: #3b0764;
}

[data-window="chat-settings"] .mari-drawer[data-drawer="chat-name"] {
  --mari-drawer-border: transparent;
}

संदेशों, इनपुट बॉक्स और चैट कंट्रोल की स्टाइल बदलना

तीन Apply preset स्विच से कस्टम थीम भी बाकी चैट में विजेट का डिज़ाइन इस्तेमाल कर सकती है। थीम नीचे दिए गए वेरिएबल से हर हिस्सा बदल सकती है। खुद CSS नहीं लिखना चाहते, तो Professor Mari से मेल खाती चैट थीम बनाने के लिए कहें।

जैसे, Apply preset font और Apply preset colors चालू होने पर:

:root {
  --mari-chat-font-family: Georgia, serif;
  --mari-chat-bg: #251e29;
  --mari-chat-text: #f4e8dc;
  --mari-chat-border: linear-gradient(100deg, #d6aa66, #dda0b2);
}

जिन वेरिएबल का मान सेट नहीं है, वे विजेट की सेटिंग्स और प्रीसेट का पालन करते हैं। बिल्ट-इन स्टाइल के ज़रिए ये वेरिएबल लागू करने के लिए संबंधित स्विच चालू होना चाहिए। Apply preset shape चालू रहने पर भी Conversation के संदेश अपना आकार बनाए रखते हैं। कस्टम थीम सीधे क्लास को भी बदल सकती हैं; सजावट के लिए किसी हिस्से को काटते समय फ़ोकस की रेखाएँ, मेन्यू और संदेशों का कंटेंट न काटें।

फ़ोन पर तीन बिंदुओं वाला मेन्यू गोल बटन में फैलता है। उसे खोलने वाला बटन [data-chat-tools-menu-button] है, खुली बटन कतार [data-chat-tools-menu] है, और सूची के हर आइटम में data-chat-tools-menu-item का मान उसकी विंडो ID होता है। टूल के बटन .mari-window-bubble.mari-chat-tools-button और उसी ID के साथ data-chat-tools-menu-tool इस्तेमाल करते हैं। कतार के चारों ओर विंडो का फ़्रेम नहीं होता; उसके बटन विजेट के रंग और बटन साइज़ का पालन करते हैं। यह बाकी चैट के तीन स्विच से अलग काम करता है और बटन गोल ही रहते हैं।

मिलती-जुलती गाइड

• कार्ड CSS थीमिंग गाइड
• Appearance सेटिंग्स
• सर्वर कॉन्फ़िगरेशन रेफ़रेंस
• रिमोट एक्सेस: लॉगिन और IP अलाउलिस्ट