Move global tailwind styles to widget

cmudig · Feb 20, 2023 · 6c1f7d0 · 6c1f7d0
1 parent 8292a58
commit 6c1f7d0
Show file tree

Hide file tree

Showing 2 changed files with 135 additions and 133 deletions.
diff --git a/src/Widget.svelte b/src/Widget.svelte
@@ -30,3 +30,137 @@
     isInFocus={false}
     isPinned={$dfProfile.isPinned}
 />
+
+<style global lang="postcss">
+    /* TAILWIND stuff */
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+
+    @layer base {
+        h1,
+        h2,
+        h3,
+        h4 {
+            @apply font-semibold;
+        }
+
+        /* Override default from base since clashes with jupyter */
+        input {
+            color: black;
+        }
+    }
+
+    .ͼ1 .cm-scroller {
+        /* font-family: 'MD IO'; */
+        font-size: 13px;
+    }
+
+    .stack-list > * + * {
+        margin-top: var(--gap, 1rem);
+    }
+
+    .stack + .stack {
+        margin-top: var(--gap, 1rem);
+    }
+
+    .button {
+        padding: 0;
+        margin: 0;
+        padding: 0.5rem 1rem;
+        font-weight: bold;
+        background-color: black;
+        color: white;
+        border: none;
+    }
+
+    .small-action-button,
+    .inspector-button {
+        padding: 0;
+        margin: 0;
+        background: transparent;
+        border: 1px solid transparent;
+        font-size: 0.75rem;
+        width: 1.5rem;
+        height: 1.5rem;
+        color: hsl(217, 5%, 60%);
+        display: inline-grid;
+        place-items: center;
+    }
+
+    .small-action-button:hover {
+        background-color: hsl(217, 15%, 95%);
+        cursor: pointer;
+        color: black;
+    }
+
+    .small-action-button.selected {
+        background-color: hsl(217, 15%, 85%);
+        color: black;
+    }
+
+    .table-container {
+        width: max-content;
+    }
+
+    .table-container table {
+        font-size: 13px;
+        text-align: right;
+        hyphens: none;
+        word-break: keep-all;
+        min-width: 100%;
+    }
+
+    .table-container td,
+    .table-container th {
+        padding: 0px 0.5rem;
+    }
+
+    .table-container td {
+        vertical-align: top;
+        white-space: nowrap;
+    }
+
+    .table-container th {
+        font-weight: 500;
+        font-style: italic;
+    }
+    .hljs-punctuation {
+        color: #bbb;
+    }
+
+    .hljs-attr {
+        font-weight: 500;
+    }
+
+    .hljs-string,
+    .hljs-number {
+        color: hsl(217, 1%, 50%);
+    }
+
+    .gutter-indicator {
+        width: 18px;
+        display: grid;
+        place-items: center;
+        height: 18px;
+    }
+
+    .draggable:active {
+        cursor: dragging;
+    }
+
+    .ͼ2 .cm-gutters {
+        background-color: transparent;
+        border-right: none;
+    }
+
+    .feedbackLink {
+        @apply font-semibold;
+        color: #616161;
+    }
+
+    .footerItem {
+        @apply inline-block;
+        @apply align-middle;
+    }
+</style>
diff --git a/src/components/DFProfile.svelte b/src/components/DFProfile.svelte
@@ -78,139 +78,7 @@
     </div>
 </div>
 
-<style global lang="postcss">
-    /* TAILWIND stuff */
-    @tailwind base;
-    @tailwind components;
-    @tailwind utilities;
-
-    @layer base {
-        h1,
-        h2,
-        h3,
-        h4 {
-            @apply font-semibold;
-        }
-
-        /* Override default from base since clashes with jupyter */
-        input {
-            color: black;
-        }
-    }
-
-    .ͼ1 .cm-scroller {
-        /* font-family: 'MD IO'; */
-        font-size: 13px;
-    }
-
-    .stack-list > * + * {
-        margin-top: var(--gap, 1rem);
-    }
-
-    .stack + .stack {
-        margin-top: var(--gap, 1rem);
-    }
-
-    .button {
-        padding: 0;
-        margin: 0;
-        padding: 0.5rem 1rem;
-        font-weight: bold;
-        background-color: black;
-        color: white;
-        border: none;
-    }
-
-    .small-action-button,
-    .inspector-button {
-        padding: 0;
-        margin: 0;
-        background: transparent;
-        border: 1px solid transparent;
-        font-size: 0.75rem;
-        width: 1.5rem;
-        height: 1.5rem;
-        color: hsl(217, 5%, 60%);
-        display: inline-grid;
-        place-items: center;
-    }
-
-    .small-action-button:hover {
-        background-color: hsl(217, 15%, 95%);
-        cursor: pointer;
-        color: black;
-    }
-
-    .small-action-button.selected {
-        background-color: hsl(217, 15%, 85%);
-        color: black;
-    }
-
-    .table-container {
-        width: max-content;
-    }
-
-    .table-container table {
-        font-size: 13px;
-        text-align: right;
-        hyphens: none;
-        word-break: keep-all;
-        min-width: 100%;
-    }
-
-    .table-container td,
-    .table-container th {
-        padding: 0px 0.5rem;
-    }
-
-    .table-container td {
-        vertical-align: top;
-        white-space: nowrap;
-    }
-
-    .table-container th {
-        font-weight: 500;
-        font-style: italic;
-    }
-    .hljs-punctuation {
-        color: #bbb;
-    }
-
-    .hljs-attr {
-        font-weight: 500;
-    }
-
-    .hljs-string,
-    .hljs-number {
-        color: hsl(217, 1%, 50%);
-    }
-
-    .gutter-indicator {
-        width: 18px;
-        display: grid;
-        place-items: center;
-        height: 18px;
-    }
-
-    .draggable:active {
-        cursor: dragging;
-    }
-
-    .ͼ2 .cm-gutters {
-        background-color: transparent;
-        border-right: none;
-    }
-
-    .feedbackLink {
-        @apply font-semibold;
-        color: #616161;
-    }
-
-    .footerItem {
-        @apply inline-block;
-        @apply align-middle;
-    }
-
+<style>
     /* this component styles */
     .col-profiles {
         width: 100%;