Enhance Star Wars Journal with custom chat styles and UI tweaks
- Added a hook to apply custom CSS classes to chat messages based on flags in `asc-starwars.js`. - Updated `StarWarsStyleJournalSheet` to apply the 'asc-starwars' class and ensure the journal renders in a collapsed state by default. - Enhanced `asc-starwars-journal.css` to improve visual consistency: - Applied starry background and Star Wars-themed fonts to journal entries and chat messages. - Adjusted layout, padding, and width for better readability. - Added rounded borders, padding, and margins to message content for a polished look. These updates improve the thematic immersion and UI aesthetics of the Star Wars journal and chat features.
This commit is contained in:
@@ -8,4 +8,11 @@ Hooks.once('ready', () => {
|
|||||||
label: 'Star Wars Style Journal',
|
label: 'Star Wars Style Journal',
|
||||||
makeDefault: false // Set to true if you want this as the default
|
makeDefault: false // Set to true if you want this as the default
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
Hooks.on("renderChatMessage", (message, html, data) => {
|
||||||
|
let customClass = message.getFlag("asc-starwars-style-journal", "customClass");
|
||||||
|
if (customClass) {
|
||||||
|
html.addClass(customClass);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
@@ -1,7 +1,20 @@
|
|||||||
export class StarWarsStyleJournalSheet extends JournalSheet {
|
export class StarWarsStyleJournalSheet extends JournalSheet {
|
||||||
static get defaultOptions() {
|
static get defaultOptions() {
|
||||||
return mergeObject(super.defaultOptions, {
|
return mergeObject(super.defaultOptions, {
|
||||||
classes: [...(super.defaultOptions.classes || []), 'asc-starwars-customsheet'],
|
classes: [...(super.defaultOptions.classes || []), 'asc-starwars'],
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// activateListeners(html) {
|
||||||
|
// super.activateListeners(html);
|
||||||
|
|
||||||
|
// const sidebar = html.find('.journal-sidebar');
|
||||||
|
// const aside = html.find('aside');
|
||||||
|
// this.toggleSidebar()
|
||||||
|
|
||||||
|
// }
|
||||||
|
async _render(force, options) {
|
||||||
|
await super._render(force, {...options, collapsed:true});
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -23,30 +23,41 @@
|
|||||||
src: url("../fonts/SWCrawlBody.ttf");
|
src: url("../fonts/SWCrawlBody.ttf");
|
||||||
}
|
}
|
||||||
|
|
||||||
.asc-starwars-customsheet .journal-entry-content, .editor-container {
|
.asc-starwars .journal-entry-content, .editor-container, .chat-message.asc-starwars .message-content {
|
||||||
background-image:url(../artwork/stars.png) !important;
|
background-image:url(../artwork/stars.png) !important;
|
||||||
background-repeat:repeat !important;
|
background-repeat:repeat !important;
|
||||||
background-position:center top !important;
|
background-position:center top !important;
|
||||||
background-color:black !important;
|
background-color:black !important;
|
||||||
color: #ffd54e;
|
color: #ffd54e;
|
||||||
font-family:SWCrawlBody;
|
font-family:SWCrawlBody;
|
||||||
padding-top: 2rem;
|
|
||||||
|
|
||||||
.journal-header {
|
.journal-header {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-content {
|
.editor-content {
|
||||||
|
width:80%;
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.journal-entry-content {
|
||||||
|
padding-top: 2rem;
|
||||||
|
article{
|
||||||
|
width:80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.message-content {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
transform:perspective(300px) rotateX(10deg);
|
transform:perspective(300px) rotateX(10deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
article, .editor-content {
|
article, .editor-content, &.message-content {
|
||||||
font-size:larger;
|
font-size:larger;
|
||||||
width:80%;
|
|
||||||
margin:auto;
|
margin:auto;
|
||||||
|
|
||||||
a.content-link {
|
a.content-link {
|
||||||
@@ -56,9 +67,16 @@
|
|||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.message-content {
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
&.editor-content {
|
&.editor-content {
|
||||||
p, strong, em {
|
p, strong, em {
|
||||||
border: #686868BF 1px solid;
|
border: #686868BF 1px solid;
|
||||||
|
border-radius: .3rem;
|
||||||
|
padding: .2rem;
|
||||||
|
margin: .2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user