feat: Proper CSS api & css bundle (#269)

Co-authored-by: Vap0r1ze <superdash993@gmail.com>
This commit is contained in:
Ven 2022-12-25 20:47:35 +01:00 committed by GitHub
parent 2172cae779
commit 2e5d27b6b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 438 additions and 126 deletions

View file

@ -16,6 +16,8 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import "./messageLogger.css";
import { Settings } from "@api/settings";
import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
@ -42,51 +44,14 @@ export default definePlugin({
timestampModule: null as any,
moment: null as Function | null,
css: `
.messagelogger-red-overlay .messageLogger-deleted {
background-color: rgba(240, 71, 71, 0.15);
}
.messagelogger-red-text .messageLogger-deleted div {
color: #f04747;
}
.messageLogger-deleted [class^="buttons"] {
display: none;
}
.messageLogger-deleted-attachment {
filter: grayscale(1);
}
.messageLogger-deleted-attachment:hover {
filter: grayscale(0);
transition: 250ms filter linear;
}
.theme-dark .messageLogger-edited {
filter: brightness(80%);
}
.theme-light .messageLogger-edited {
opacity: 0.5;
}
`,
start() {
this.moment = findByPropsLazy("relativeTimeRounding", "relativeTimeThreshold");
this.timestampModule = findByPropsLazy("messageLogger_TimestampComponent");
const style = this.style = document.createElement("style");
style.textContent = this.css;
style.id = "MessageLogger-css";
document.head.appendChild(style);
addDeleteStyleClass();
},
stop() {
this.style?.remove();
document.querySelectorAll(".messageLogger-deleted").forEach(e => e.remove());
document.querySelectorAll(".messageLogger-edited").forEach(e => e.remove());
document.body.classList.remove("messagelogger-red-overlay");