Discord - Documentation + +A ESX-Based Chat-theme for your server + +# License + +esx_chat_theme - ESX Chat Theme + +Copyright (C) 2024 Jérémie N'gadi + +This program Is free software: you can redistribute it And/Or modify it under the terms Of the GNU General Public License As published by the Free Software Foundation, either version 3 Of the License, Or (at your option) any later version. + +This program Is distributed In the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty Of MERCHANTABILITY Or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License For more details. + +You should have received a copy Of the GNU General Public License along with this program. If Not, see http://www.gnu.org/licenses/. diff --git a/[core]/esx_chat_theme/fxmanifest.lua b/[core]/esx_chat_theme/fxmanifest.lua new file mode 100644 index 000000000..b5bb6785c --- /dev/null +++ b/[core]/esx_chat_theme/fxmanifest.lua @@ -0,0 +1,17 @@ +version '1.10.10' +author 'ESX-Framework' +description 'A ESX Stylised theme for the chat resource.' + +file 'style.css' +file 'shadow.js' + +chat_theme 'esx' { + styleSheet = 'style.css', + script = 'shadow.js', + msgTemplates = { + default = '{0}{1}' + } +} + +game 'common' +fx_version 'adamant' diff --git a/[core]/esx_chat_theme/shadow.js b/[core]/esx_chat_theme/shadow.js new file mode 100644 index 000000000..6393b2dca --- /dev/null +++ b/[core]/esx_chat_theme/shadow.js @@ -0,0 +1,74 @@ +(function() { +var Filters = {} + +var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); +svg.setAttribute("style", "display:block;width:0px;height:0px"); +var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); + +var blurFilter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); +blurFilter.setAttribute("id", "svgBlurFilter"); +var feGaussianFilter = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); +feGaussianFilter.setAttribute("stdDeviation", "0 0"); +blurFilter.appendChild(feGaussianFilter); +defs.appendChild(blurFilter); +Filters._svgBlurFilter = feGaussianFilter; + +// Drop Shadow Filter +var dropShadowFilter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); +dropShadowFilter.setAttribute("id", "svgDropShadowFilter"); +var feGaussianFilter = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); +feGaussianFilter.setAttribute("in", "SourceAlpha"); +feGaussianFilter.setAttribute("stdDeviation", "3"); +dropShadowFilter.appendChild(feGaussianFilter); +Filters._svgDropshadowFilterBlur = feGaussianFilter; + +var feOffset = document.createElementNS("http://www.w3.org/2000/svg", "feOffset"); +feOffset.setAttribute("dx", "0"); +feOffset.setAttribute("dy", "0"); +feOffset.setAttribute("result", "offsetblur"); +dropShadowFilter.appendChild(feOffset); +Filters._svgDropshadowFilterOffset = feOffset; + +var feFlood = document.createElementNS("http://www.w3.org/2000/svg", "feFlood"); +feFlood.setAttribute("flood-color", "rgba(0,0,0,1)"); +dropShadowFilter.appendChild(feFlood); +Filters._svgDropshadowFilterFlood = feFlood; + +var feComposite = document.createElementNS("http://www.w3.org/2000/svg", "feComposite"); +feComposite.setAttribute("in2", "offsetblur"); +feComposite.setAttribute("operator", "in"); +dropShadowFilter.appendChild(feComposite); +var feComposite = document.createElementNS("http://www.w3.org/2000/svg", "feComposite"); +feComposite.setAttribute("in2", "SourceAlpha"); +feComposite.setAttribute("operator", "out"); +feComposite.setAttribute("result", "outer"); +dropShadowFilter.appendChild(feComposite); + +var feMerge = document.createElementNS("http://www.w3.org/2000/svg", "feMerge"); +var feMergeNode = document.createElementNS("http://www.w3.org/2000/svg", "feMergeNode"); +feMerge.appendChild(feMergeNode); +var feMergeNode = document.createElementNS("http://www.w3.org/2000/svg", "feMergeNode"); +feMerge.appendChild(feMergeNode); +Filters._svgDropshadowMergeNode = feMergeNode; +dropShadowFilter.appendChild(feMerge); +defs.appendChild(dropShadowFilter); +svg.appendChild(defs); +document.documentElement.appendChild(svg); + +const blurScale = 4; +const scale = (document.body.clientWidth / 1280); + +Filters._svgDropshadowFilterBlur.setAttribute("stdDeviation", + 1 * blurScale + " " + + 1 * blurScale +); +Filters._svgDropshadowFilterOffset.setAttribute("dx", + String(Math.cos(45 * Math.PI / 180) * 1 * scale)); +Filters._svgDropshadowFilterOffset.setAttribute("dy", + String(Math.sin(45 * Math.PI / 180) * 1 * scale)); +Filters._svgDropshadowFilterFlood.setAttribute("flood-color", + 'rgba(0, 0, 0, 1)'); +Filters._svgDropshadowMergeNode.setAttribute("in", + "SourceGraphic"); + +})(); \ No newline at end of file diff --git a/[core]/esx_chat_theme/style.css b/[core]/esx_chat_theme/style.css new file mode 100644 index 000000000..844d720a9 --- /dev/null +++ b/[core]/esx_chat_theme/style.css @@ -0,0 +1,103 @@ +* { + font-family: inherit; +} + +.chat-window { + background: inherit !important; +} + +@font-face { + font-family: 'Font2'; + src: url(https://runtime.fivem.net/temp/ChaletLondonNineteenSixty.otf?a); +} + +@font-face { + font-family: 'Font2_cond'; + src: url(https://runtime.fivem.net/temp/chaletcomprime-colognesixty-webfont.ttf?a); +} + +.msg { + font-family: Font2, sans-serif; + color: #ffffff; + + font-size: calc(1.7vh); /* 13px in 720p, calc'd by width */ + filter: url(#svgDropShadowFilter); + + line-height: calc(2.7vh * 1.2); + + margin-bottom: 0; +} + +.chat-messages { + margin: 0; + height: 100%; +} + +.msg > span > span > b { + font-family: Font2_cond, sans-serif; + font-weight: normal; + + vertical-align: baseline; + padding-right: 11px; + + line-height: calc(2.7vh * 1.2); + + font-size: calc(2.4vh); +} + +.msg > span > span > span { + vertical-align: baseline; +} + +.msg i:first-of-type { + font-style: normal; + color: #c0c0c0; +} + +.chat-input { + background: inherit !important; + height: auto; + + font-family: Font2, sans-serif; +} + +.chat-input > div { + background-color: rgba(30, 30, 30, 0.7) !important; + border: calc(0.24vh / 2) solid #fb9c04ce; + outline: calc(0.24vh / 2) solid #fb9c04ce; /* to replace margin-background */ + padding: calc(0.2vh / 2); + border-radius: 5px; + filter: url(#svgDropShadowFilter); +} + +.chat-input .prefix { + margin: 0; + margin-left: 0.7%; + margin-right: 0.7%; + margin-top: -0.1%; + line-height: 2.8vh; +} + +.chat-input .prefix.any { + opacity: 0.8; +} + +.chat-input .prefix.any:before { + content: '['; + color: #fb9b04; +} + +.chat-input .prefix.any:after { + content: ']'; + color: #fb9b04; + margin-right: 1%; +} + +.suggestions { + background: transparent; +} + +textarea { + background: transparent; + padding: 0.5vh; +} \ No newline at end of file