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() {
|
||||
const cssText = `
|
||||
.flex{display:flex}
|
||||
.items-center {align-items:center}
|
||||
.gap-3 {gap: .25rem}
|
||||
.spinner {
|
||||
.or-flex{display:flex}
|
||||
.or-items-center {align-items:center}
|
||||
.or-gap-3 {gap: .25rem}
|
||||
.or-spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -40,8 +40,8 @@ export default defineUnlistedScript(() => {
|
|||
const message = event.data.message || "Recording has started successfully.";
|
||||
|
||||
const notificationContent = `
|
||||
<div class="flex gap-3 items-center">
|
||||
<div class="spinner"></div>
|
||||
<div class="or-flex or-gap-3 or-items-center">
|
||||
<div class="or-spinner"></div>
|
||||
<span>${message}</span>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue