diff --git a/assets/css/index.css b/assets/css/index.css
index e033f25..8964d5b 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -1138,16 +1138,16 @@ body:not(.gui) .chooser>.back {
max-width: 90%;
}
-@keyframes colrsAn {
+@keyframes colorsAn {
0% {
transform: translateX(-200px);
opacity: 0;
}
}
-.bottom .colrs {
+.bottom .colors {
z-index: 5;
- animation: colrsAn .25s ease-out;
+ animation: colorsAn .25s ease-out;
background: #212226;
border-radius: 10px;
width: 250px;
@@ -1160,11 +1160,11 @@ body:not(.gui) .chooser>.back {
grid-template-columns: 5% 27.5% 67.5%;
}
-.bottom .colrs .colr {
+.bottom .colors .color {
background: #41f097;
}
-.bottom .colrs.display {
+.bottom .colors.display {
display: grid;
}
@@ -1229,7 +1229,7 @@ body:not(.gui) .chooser>.back {
transition: .5s;
}
-.colrs:hover .pallets {
+.colors:hover .pallets {
opacity: 1;
}
@@ -1256,7 +1256,7 @@ body:not(.gui) .chooser>.back {
height: 100% !important;
}
-.colrs.picking .colRight .cTop>*:not(.color-picker), .colrs.picking .colRight .pallets, .colrs:not(.picking) .colRight .colBack, .colrs:not(.picking) .hex>div {
+.colors.picking .colRight .cTop>*:not(.color-picker), .colors.picking .colRight .pallets, .colors:not(.picking) .colRight .colBack, .colors:not(.picking) .hex>div {
display: none;
}
@@ -1736,7 +1736,7 @@ body {
}
}
-.colrs .hex>div {
+.colors .hex>div {
position: absolute;
top: -35px;
background: #212226;
@@ -1748,12 +1748,12 @@ body {
width: 50%;
}
-.colrs .hex>div>span {
+.colors .hex>div>span {
padding: 6px 6px 6px 10px;
display: flex;
}
-.colrs .hex>div>span>span {
+.colors .hex>div>span>span {
user-select: none;
padding: 0;
margin: 0;
@@ -1764,12 +1764,12 @@ body {
margin-right: 2px;
}
-.colrs .hex>div>span input {
+.colors .hex>div>span input {
width: 100%;
opacity: .8;
}
-.colrs .hex.incorrect>div {
+.colors .hex.incorrect>div {
background: #262121;
}
@@ -2078,13 +2078,13 @@ body.no-preview .side2 {
display: none !important;
}
-/* body.no-editor .bottom .colrs {
+/* body.no-editor .bottom .colors {
left: 20px;
top: 90px;
bottom: 0;
} */
-body.no-editor .bottom .colrs {
+body.no-editor .bottom .colors {
left: 20px;
top: 90px;
bottom: 0;
@@ -2118,7 +2118,7 @@ body.no-editor .side1 .item.top {
transform: translateY(10px);
}
-body.no-editor .bottom .colrs.display {
+body.no-editor .bottom .colors.display {
display: grid;
}
@@ -2421,17 +2421,17 @@ body.toHook .done .channels .selectOptions .hook {
border: none;
}
- .bottom .colrs {
+ .bottom .colors {
bottom: 40px;
top: 100px;
top: 90px;
left: 20px;
display: none;
- animation: colrsAn .1s ease-out;
+ animation: colorsAn .1s ease-out;
box-shadow: 0px 5px 15px 0px #0000004f;
}
- body.reversed .bottom .colrs {
+ body.reversed .bottom .colors {
left: 50%;
transform: translateX(-50%);
}
@@ -2474,7 +2474,7 @@ body.toHook .done .channels .selectOptions .hook {
}
@media screen and (max-height: 760px) {
- .bottom .colrs {
+ .bottom .colors {
bottom: 10px;
}
diff --git a/assets/js/script.js b/assets/js/script.js
index 6a9bd0e..096fbec 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -281,7 +281,7 @@ addEventListener('DOMContentLoaded', () => {
.replace(/<#\d+>/g, () => `channel`)
.replace(/<@(?:&|!)?\d+>|@(?:everyone|here)/g, match => {
if (match.startsWith('@')) return `${match}`
- else return `@user`
+ else return `@${match.includes('&') ? 'role' : 'user'}`
})
if (opts.inlineBlock)
@@ -888,15 +888,15 @@ addEventListener('DOMContentLoaded', () => {
let picker = new CP(document.querySelector('.picker'), state = { parent: document.querySelector('.cTop') });
picker.fire('change', toRGB('#41f097'));
- let colrs = document.querySelector('.colrs'),
- hexInput = colrs.querySelector('.hex>div input'),
+ let colors = document.querySelector('.colors'),
+ hexInput = colors.querySelector('.hex>div input'),
typingHex = true, exit = false,
removePicker = () => {
if (exit) return exit = false;
if (typingHex) picker.enter();
else {
typingHex = false, exit = true;
- colrs.classList.remove('picking');
+ colors.classList.remove('picking');
picker.exit();
}
}
@@ -912,11 +912,11 @@ addEventListener('DOMContentLoaded', () => {
hexInput.value = json.embed.color.toString(16).padStart(6, '0');
document.querySelector('.hex.incorrect')?.classList.remove('incorrect');
}
- colrs.classList.add('picking')
+ colors.classList.add('picking')
})
- document.querySelectorAll('.colr').forEach(e => e.addEventListener('click', el => {
- el = el.target.closest('.colr') || el.target;
+ document.querySelectorAll('.color').forEach(e => e.addEventListener('click', el => {
+ el = el.target.closest('.color') || el.target;
embed.closest('.embed').style.borderColor = el.style.backgroundColor;
json.embed && (json.embed.color = toRGB(el.style.backgroundColor, false, true));
picker.source.style.removeProperty('background');
@@ -1034,7 +1034,7 @@ addEventListener('DOMContentLoaded', () => {
let pickInGuiMode = false;
togglePicker = pickLater => {
- colrs.classList.toggle('display');
+ colors.classList.toggle('display');
document.querySelector('.side1').classList.toggle('low');
pickLater && (pickInGuiMode = true);
};
@@ -1043,11 +1043,11 @@ addEventListener('DOMContentLoaded', () => {
update(json);
document.body.addEventListener('click', e => {
- if (e.target.classList.contains('low') || (e.target.classList.contains('top') && colrs.classList.contains('display')))
+ if (e.target.classList.contains('low') || (e.target.classList.contains('top') && colors.classList.contains('display')))
togglePicker();
})
- document.querySelector('.colrs .hex>div').addEventListener('input', e => {
+ document.querySelector('.colors .hex>div').addEventListener('input', e => {
let inputValue = e.target.value;
if (inputValue.startsWith('#'))
e.target.value = inputValue.slice(1), inputValue = e.target.value;
diff --git a/index.html b/index.html
index c506e22..91e508e 100644
--- a/index.html
+++ b/index.html
@@ -192,7 +192,7 @@
-
+
@@ -261,18 +261,18 @@
Pick the embed colour
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+