0.0.1
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
-- This resource is part of the default Cfx.re asset pack (cfx-server-data)
|
||||
-- Altering or recreating for local use only is strongly discouraged.
|
||||
|
||||
version '1.0.0'
|
||||
author 'Cfx.re <root@cfx.re>'
|
||||
description 'A GTA Online-styled theme for the chat resource.'
|
||||
repository 'https://github.com/citizenfx/cfx-server-data'
|
||||
|
||||
file 'style.css'
|
||||
file 'shadow.js'
|
||||
|
||||
chat_theme 'gtao' {
|
||||
styleSheet = 'style.css',
|
||||
script = 'shadow.js',
|
||||
msgTemplates = {
|
||||
default = '<b>{0}</b><span>{1}</span>'
|
||||
}
|
||||
}
|
||||
|
||||
game 'common'
|
||||
fx_version 'adamant'
|
||||
74
resources/[cfx-default]/[gameplay]/chat-theme-gtao/shadow.js
Normal file
74
resources/[cfx-default]/[gameplay]/chat-theme-gtao/shadow.js
Normal file
@@ -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 = 1;
|
||||
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");
|
||||
|
||||
})();
|
||||
141
resources/[cfx-default]/[gameplay]/chat-theme-gtao/style.css
Normal file
141
resources/[cfx-default]/[gameplay]/chat-theme-gtao/style.css
Normal file
@@ -0,0 +1,141 @@
|
||||
* {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.chat-window {
|
||||
--size: calc(((2.7vh * 1.2)) * 6);
|
||||
|
||||
position: absolute;
|
||||
right: calc(2.77vh);
|
||||
top: calc(50% - (var(--size) / 2));
|
||||
height: var(--size) !important;
|
||||
|
||||
background: inherit !important;
|
||||
|
||||
text-align: right;
|
||||
|
||||
left: auto;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@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: #fff;
|
||||
|
||||
font-size: calc(1.8vh); /* 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: 1;
|
||||
|
||||
font-size: calc(2.7vh);
|
||||
}
|
||||
|
||||
.msg > span > span > span {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.msg i:first-of-type {
|
||||
font-style: normal;
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
position: absolute;
|
||||
right: calc(2.77vh);
|
||||
bottom: calc(2.77vh);
|
||||
|
||||
background: inherit !important;
|
||||
|
||||
text-align: right;
|
||||
|
||||
top: auto;
|
||||
left: auto;
|
||||
|
||||
height: auto;
|
||||
|
||||
font-family: Font2, sans-serif;
|
||||
}
|
||||
|
||||
.chat-input > div {
|
||||
background-color: rgba(0, 0, 0, .6) !important;
|
||||
border: calc(0.28vh / 2) solid rgba(180, 180, 180, .6);
|
||||
outline: calc(0.28vh / 2) solid rgba(0, 0, 0, .8); /* to replace margin-background */
|
||||
padding: calc(0.28vh / 2);
|
||||
}
|
||||
|
||||
.chat-input .prefix {
|
||||
margin: 0;
|
||||
margin-left: 0.7%;
|
||||
margin-top: -0.1%;
|
||||
line-height: 2.8vh;
|
||||
}
|
||||
|
||||
.chat-input .prefix.any {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.chat-input .prefix.any:before {
|
||||
content: '[';
|
||||
}
|
||||
|
||||
.chat-input .prefix.any:after {
|
||||
content: ']';
|
||||
}
|
||||
|
||||
.chat-input > div + div {
|
||||
position: absolute;
|
||||
bottom: calc(1.65vh + 0.28vh + 0.28vh + 0.28vh + (0.28vh / 2));
|
||||
width: 99.6%;
|
||||
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
border: calc(0.28vh / 2) solid rgba(180, 180, 180, .6);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background: transparent;
|
||||
padding: 0.5vh;
|
||||
}
|
||||
|
||||
@media screen and (min-aspect-ratio: 21/9) {
|
||||
.chat-window, .chat-input {
|
||||
right: calc(12.8vw);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-aspect-ratio: 32/9) {
|
||||
.chat-window, .chat-input {
|
||||
right: calc(25vw);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user