Fix container styling

electrikmilk · Nov 23, 2023 · 9aee739 · 9aee739
1 parent edf89ec
commit 9aee739
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -117,6 +117,7 @@ export class ShortcutPreview {
 
     preview() {
         preview = document.querySelector<HTMLDivElement>(this.selector);
+        preview?.classList.add('sp-preview');
         if (!preview) {
             throw new Error(`[preview-shortcut] Selector '${this.selector}' selects nothing.`);
         }

diff --git a/src/style.css b/src/style.css
@@ -1,30 +1,30 @@
 @import "glyphs.css";
 
-:root {
+.sp-preview :root {
     --sp-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
     --f7-theme-color: #007aff;
 }
 
 @media (prefers-color-scheme: dark) {
-    .sp-container :root {
+    .sp-preview :root {
         --f7-theme-color: #007bff !important;
     }
 
-    .sp-container input[type=checkbox]:not(:checked) + .toggle-icon {
+    .sp-preview input[type=checkbox]:not(:checked) + .toggle-icon {
         background: #39393e !important;
     }
 
-    .sp-container input[type=checkbox]:not(:checked) + .toggle-icon:before {
+    .sp-preview input[type=checkbox]:not(:checked) + .toggle-icon:before {
         background: #39393e !important;
     }
 
-    .sp-header {
+    .sp-preview .sp-header {
         background: #383837 !important;
         color: #fafafa !important;
         border-color: black !important;
     }
 
-    .sp-header-action-count {
+    .sp-preview .sp-header-action-count {
         color: #b1b1b0 !important;
     }
 
@@ -108,8 +108,7 @@
     }
 }
 
-.sp-container {
-    background: #ebebeb;
+.sp-preview {
     font-family: "SF Pro Text", system-ui, Helvetica, Arial, sans-serif;
     line-height: 1.6;
     font-size: 18px;
@@ -119,21 +118,26 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-text-size-adjust: 100%;
+    text-align: center;
+}
+
+.sp-preview .sp-container {
+    background: #ebebeb;
     padding: 1.5rem;
 }
 
-.sp-sub-container {
+.sp-preview .sp-sub-container {
     padding-left: 2rem;
 }
 
-.sp-header {
+.sp-preview .sp-header {
     padding: 1rem 0;
     background-color: #ffffff;
     border-bottom: 1px solid #e6e6e6;
     text-align: center;
 }
 
-.sp-header .sp-header-title {
+.sp-preview .sp-header .sp-header-title {
     color: var(--f7-list-item-title-text-color);
     font-size: 1.3rem;
     font-weight: 500;
@@ -143,17 +147,17 @@
     text-shadow: var(--sp-shadow);
 }
 
-.sp-header .sp-header-action-count {
+.sp-preview .sp-header .sp-header-action-count {
     color: #474746;
     font-size: 1rem;
     font-weight: 500;
 }
 
-.sp-header .shortcut-icon:after {
+.sp-preview .sp-header .shortcut-icon:after {
     margin-left: -22px;
 }
 
-.sp-actions-empty {
+.sp-preview .sp-actions-empty {
     padding: 10rem 0;
     text-align: center;
     color: #888888;