Merge pull request #6 from nelsonr/v1.4.0

v1.4.0
nelsonr · Mar 23, 2024 · dc99c55 · nelsonr · Apr 13, 2024 · dc99c55
2 parents f333131 + 38cd097
commit dc99c55
Show file tree

Hide file tree

Showing 25 changed files with 700 additions and 170 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -49,6 +49,13 @@
             }
         ],
         "newline-before-return": "error",
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
+            {
+                "argsIgnorePattern": "^_"
+            }
+        ],
         "object-curly-newline": [
             "error",
             {
@@ -59,7 +66,7 @@
             "error",
             "always"
         ],
-        "object-property-newline": "error",
+        // "object-property-newline": "error",
         "padding-line-between-statements": [
             "error",
             {

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,8 +2,9 @@
     "files.eol": "\n",
     "eslint.enable": true,
     "eslint.run": "onSave",
+    "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
-        "source.fixAll": true,
-        "source.organizeImports": true
+        "source.fixAll": "explicit",
+        "source.organizeImports": "explicit"
     }
 }
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "Super CSS Inject",
-    "version": "1.3.1",
+    "version": "1.4.0",
     "description": "Keep multiple stylesheets ready to inject and change on the fly!",
     "manifest_version": 3,
     "permissions": ["activeTab", "storage"],

diff --git a/dist/options.css b/dist/options.css
@@ -1,4 +1,10 @@
+/* ============================================= */
+/* CSS Variables                                 */
+/* ============================================= */
+
 :root {
+    --main-width: 800px;
+
     /* Color */
     --color-primary: #F03738;
     --color-primary-shade-1: #F98484;
@@ -30,9 +36,19 @@
     --space-4: 16px;
     --space-6: 24px;
     --space-8: 32px;
+
+    /* Font Sizes */
+    --font-size-1: 4px;
+    --font-size-2: 8px;
+    --font-size-3: 12px;
+    --font-size-4: 16px;
+    --font-size-6: 24px;
+    --font-size-8: 32px;
 }
 
-/* Base Rules */
+/* ============================================= */
+/* Base Styles                                   */
+/* ============================================= */
 
 * {
     box-sizing: border-box;
@@ -76,7 +92,9 @@ code {
     padding-inline: var(--space-1);
 }
 
-/* Layout */
+/* ============================================= */
+/* Layout                                        */
+/* ============================================= */
 
 body {
     height: 100%;
@@ -89,16 +107,57 @@ body {
 }
 
 .column {
-    max-width: 650px;
+    max-width: var(--main-width);
     margin: auto;
+    padding-inline: var(--space-4);
+}
+
+/* ============================================= */
+/* Form                                          */
+/* ============================================= */
+
+.form-field {
+    margin-bottom: var(--space-4);
+}
+
+.form-field label {
+    display: block;
+    color: var(--color-neutral-6);
+    font-size: var(--font-size-3);
+    margin-bottom: var(--space-1);
+    text-transform: uppercase;
+}
+
+.form-actions {
+    margin-top: var(--space-6);
 }
 
-/* Header */
+/* Not Valid */
+
+.validation-message {
+    display: none;
+    color: var(--color-red);
+    font-size: var(--font-size-3);
+    margin-top: var(--space-1);
+}
+
+.form-field--not-valid input[type="text"] {
+    border-color: var(--color-red);
+}
+
+.form-field--not-valid .validation-message {
+    display: block;
+}
+
+/* ============================================= */
+/* Header                                        */
+/* ============================================= */
 
 header {
     background-color: var(--color-neutral-7);
     color: var(--color-neutral-0);
     padding: var(--space-3);
+    padding-inline: 0;
     position: fixed;
     top: 0;
     left: 0;
@@ -119,7 +178,9 @@ header .title {
     font-weight: normal;
 }
 
-/* Main Content */
+/* ============================================= */
+/* Main                                          */
+/* ============================================= */
 
 main {
     height: 100%;
@@ -129,8 +190,11 @@ main {
     text-align: center;
 }
 
-/* Buttons */
+/* ============================================= */
+/* Buttons                                       */
+/* ============================================= */
 
+button,
 .button {
     color: currentColor;
     background-color: var(--color-neutral-2);
@@ -139,14 +203,19 @@ main {
     font-weight: bold;
     font-size: 12px;
     border: 0;
-    padding-inline: var(--space-3);
+    padding-inline: var(--space-4);
     border-radius: var(--border-radius);
+    height: 40px;
 }
 
 .button:hover {
     background-color: var(--color-neutral-3);
 }
 
+button + button {
+    margin-left: var(--space-4);
+}
+
 /* Buttons > Success */
 
 .button--success {
@@ -178,15 +247,15 @@ main {
 /* Buttons > Small */
 
 .button--small {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     min-width: 32px;
     height: 32px;
     border-radius: var(--border-radius);
-    padding-inline: var(--space-2);
+    padding-inline: var(--space-4);
     margin-left: var(--space-2);
     position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     outline: 0;
     cursor: pointer;
     box-shadow: none;
@@ -212,7 +281,42 @@ main {
     height: auto;
 }
 
-/* Stylesheets Form */
+/* ============================================= */
+/* Table                                         */
+/* ============================================= */
+
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+table td,
+table th {
+    padding: var(--space-2);
+}
+
+table th {
+    font-size: 12px;
+    text-transform: uppercase;
+    border-bottom: 1px solid var(--color-neutral-2);
+}
+
+table tbody tr td {
+    border-bottom: 1px solid var(--color-neutral-2);
+}
+
+table tbody tr td:first-child {
+    overflow: auto;
+}
+
+table tr:last-child td {
+    border-bottom: 0;
+}
+
+/* ============================================= */
+/* Stylesheet Form                               */
+/* ============================================= */
 
 .stylesheets-form {
     display: flex;
@@ -235,26 +339,34 @@ main {
     margin-top: var(--space-2);
 }
 
-/* Stylesheets Empty Message */
+/* ============================================= */
+/* Stylesheet Empty Message                      */
+/* ============================================= */
 
 .stylesheets-message {
     margin-top: var(--space-6);
     letter-spacing: 0.6px;
 }
 
-/* Stylesheets List */
+/* ============================================= */
+/* Stylesheet List                               */
+/* ============================================= */
 
 .stylesheets-list {
+    padding: var(--space-2);
     margin-top: var(--space-6);
     width: 100%;
+    text-align: left;
+    background-color: var(--color-neutral-0);
+    border-radius: var(--border-radius);
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
-/* Stylesheet Item */
+/* ============================================= */
+/* Stylesheet Item                               */
+/* ============================================= */
 
 .stylesheet {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     gap: var(--space-2);
     height: 50px;
     padding: var(--space-2);
@@ -289,7 +401,68 @@ main {
     height: 32px;
 }
 
-/* Utilities */
+/* ============================================= */
+/* Modal                                         */
+/* ============================================= */
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    z-index: 10;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.modal__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.modal__main {
+    background-color: #FFF;
+    padding: var(--space-4);
+    position: relative;
+    z-index: 1;
+    opacity: 0;
+    border-radius: var(--border-radius);
+    min-width: 500px;
+}
+
+.modal--show {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.modal--show .modal__main {
+    animation: fadeUp 300ms ease-out forwards;
+}
+
+@keyframes fadeUp {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* ============================================= */
+/* Utilities                                     */
+/* ============================================= */
 
 .hidden {
     display: none;
@@ -305,3 +478,11 @@ main {
     text-align: left;
     font-size: 12px;
 }
+
+.text-align-end {
+    text-align: end;
+}
+
+.whitespace-nowrap {
+    white-space: nowrap;
+}