Fix (spot): tailwind behavior conflict with flex class (#2616)
* Scope CSS styles for notification elements. * Remove unnecessary spaces in HTML tags
This commit is contained in:
parent
bd7ecf18f4
commit
b06d56cfa7
1 changed files with 7 additions and 7 deletions
|
|
@ -13,10 +13,10 @@ export default defineUnlistedScript(() => {
|
||||||
|
|
||||||
function injectCSS() {
|
function injectCSS() {
|
||||||
const cssText = `
|
const cssText = `
|
||||||
.flex{display:flex}
|
.or-flex{display:flex}
|
||||||
.items-center {align-items:center}
|
.or-items-center {align-items:center}
|
||||||
.gap-3 {gap: .25rem}
|
.or-gap-3 {gap: .25rem}
|
||||||
.spinner {
|
.or-spinner {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
border: 2px solid rgba(0, 0, 0, 0.1);
|
border: 2px solid rgba(0, 0, 0, 0.1);
|
||||||
|
|
@ -40,10 +40,10 @@ export default defineUnlistedScript(() => {
|
||||||
const message = event.data.message || "Recording has started successfully.";
|
const message = event.data.message || "Recording has started successfully.";
|
||||||
|
|
||||||
const notificationContent = `
|
const notificationContent = `
|
||||||
<div class="flex gap-3 items-center">
|
<div class="or-flex or-gap-3 or-items-center">
|
||||||
<div class="spinner"></div>
|
<div class="or-spinner"></div>
|
||||||
<span>${message}</span>
|
<span>${message}</span>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const notification = document.createElement("div");
|
const notification = document.createElement("div");
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue