Scope css

Trinovantes · Apr 15, 2022 · 54e2257 · 54e2257
1 parent d83ed3f
commit 54e2257
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 135 deletions.
diff --git a/src/assets/css/variables.scss b/src/assets/css/variables.scss
@@ -5,17 +5,6 @@ $min-dialog-width: 300px;
 $border-radius: 4px;
 $border: 1px solid #ddd;
 
-.margins{
-    margin: $padding 0;
-
-    &:first-child{
-        margin-top: 0;
-    }
-    &:last-child{
-        margin-bottom: 0;
-    }
-}
-
 .icon-btn{
     background-size: 50% 50%;
     background-color: white;

diff --git a/src/components/UserscriptApp.vue b/src/components/UserscriptApp.vue
@@ -51,15 +51,11 @@ export default defineComponent({
 
 <template>
     <div class="userscript-delete-workflow-runs">
-        <div v-if="isOpen" class="dialog-wrapper">
+        <div
+            v-if="isOpen"
+            class="dialog-wrapper"
+        >
             <div class="dialog">
-                <h1>
-                    {{ title }}
-                </h1>
-                <a :href="projectUrl" class="url">
-                    {{ projectUrl }}
-                </a>
-
                 <UserscriptAppSettings
                     @close="isOpen = false"
                 />
@@ -93,86 +89,71 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
-.userscript-delete-workflow-runs{
-    *{
-        background: none;
-        outline: none;
-        border: none;
-        margin: 0;
-        padding: 0;
-
-        color: #111;
-        font-size: 15px;
-        font-weight: normal;
-        line-height: 1.5;
-    }
-
-    a.stop-btn,
-    a.start-btn,
-    a.settings-btn{
-        @extend .icon-btn;
-
-        position: fixed;
-        right: $padding;
-        z-index: 9999;
-
-        box-shadow: rgba(11, 11, 11, 0.1) 0 2px 8px;
+.userscript-delete-workflow-runs *{
+    background: none;
+    outline: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+
+    color: #111;
+    font-size: 15px;
+    font-weight: normal;
+    font-family: Arial, Helvetica, sans-serif;
+    line-height: 1.5;
+    vertical-align: baseline;
+}
+</style>
 
-        &:hover{
-            box-shadow: rgba(11, 11, 11, 0.4) 0 0px 8px;
-        }
-    }
+<style lang="scss" scoped>
+a.stop-btn,
+a.start-btn,
+a.settings-btn{
+    @extend .icon-btn;
 
-    a.stop-btn{
-        background-image: url('@/assets/img/stop.png');
-        bottom: $padding + $btn-size + $padding + $btn-size + $padding;
-    }
+    position: fixed;
+    right: $padding;
+    z-index: 9999;
 
-    a.start-btn{
-        background-image: url('@/assets/img/start.png');
-        bottom: $padding + $btn-size + $padding + $btn-size + $padding;
-    }
+    box-shadow: rgba(11, 11, 11, 0.1) 0 2px 8px;
 
-    a.settings-btn{
-        background-image: url('@/assets/img/settings.png');
-        bottom: $padding + $btn-size + $padding;
+    &:hover{
+        box-shadow: rgba(11, 11, 11, 0.4) 0 0px 8px;
     }
+}
 
-    .dialog-wrapper{
-        background: rgba(11, 11, 11, 0.4);
-
-        position: fixed;
-        top: 0; left: 0;
-        width: 100%; height: 100%;
-        z-index: 99999;
+a.stop-btn{
+    background-image: url('@/assets/img/stop.png');
+    bottom: $padding + $btn-size + $padding + $btn-size + $padding;
+}
 
-        > .dialog{
-            background: white;
-            padding: $padding;
-            border-radius: $border-radius;
+a.start-btn{
+    background-image: url('@/assets/img/start.png');
+    bottom: $padding + $btn-size + $padding + $btn-size + $padding;
+}
 
-            position: absolute;
-            top: 50%; left: 50%;
-            transform: translateY(-50%) translateX(-50%);
-            min-width: $min-dialog-width;
+a.settings-btn{
+    background-image: url('@/assets/img/settings.png');
+    bottom: $padding + $btn-size + $padding;
+}
 
-            h1{
-                font-size: 24px;
-                font-weight: bold;
-            }
+.dialog-wrapper{
+    background: rgba(11, 11, 11, 0.4);
 
-            a.url{
-                display: block;
-                margin-bottom: $padding;
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    z-index: 99999;
 
-                color: blue;
-                text-decoration: none;
+    > .dialog{
+        background: white;
+        padding: $padding;
+        border-radius: $border-radius;
 
-                &:hover{
-                    text-decoration: underline;
-                }
-            }
-        }
+        position: absolute;
+        top: 50%; left: 50%;
+        transform: translateY(-50%) translateX(-50%);
+        min-width: $min-dialog-width;
     }
 }
 </style>
diff --git a/src/components/UserscriptAppSettings.vue b/src/components/UserscriptAppSettings.vue
@@ -14,6 +14,8 @@ export default defineComponent({
         }
 
         return {
+            title: `${DEFINE.PRODUCT_NAME} ${DEFINE.VERSION}`,
+            projectUrl: DEFINE.REPO.url,
             store,
             save,
         }
@@ -22,60 +24,105 @@ export default defineComponent({
 </script>
 
 <template>
-    <div class="group">
-        <label for="numWorkflowRunsToKeep">
-            Number of Workflow Runs to Keep
-            <input
-                id="numWorkflowRunsToKeep"
-                v-model.number="store.numWorkflowRunsToKeep"
-                type="number"
+    <div class="settings">
+        <div class="group">
+            <h1>
+                {{ title }}
+            </h1>
+            <a :href="projectUrl" class="project-url">
+                {{ projectUrl }}
+            </a>
+        </div>
+
+        <div class="group">
+            <label for="numWorkflowRunsToKeep">
+                Number of Workflow Runs to Keep
+                <input
+                    id="numWorkflowRunsToKeep"
+                    v-model.number="store.numWorkflowRunsToKeep"
+                    type="number"
+                >
+            </label>
+
+            <label for="numDeletionsPerExecution">
+                Number of Deletions per Execution
+                <input
+                    id="numDeletionsPerExecution"
+                    v-model.number="store.numDeletionsPerExecution"
+                    type="number"
+                >
+            </label>
+        </div>
+
+        <div class="group actions">
+            <a
+                class="btn positive"
+                @click="save(); $emit('close')"
             >
-        </label>
-
-        <label for="numDeletionsPerExecution">
-            Number of Deletions per Execution
-            <input
-                id="numDeletionsPerExecution"
-                v-model.number="store.numDeletionsPerExecution"
-                type="number"
+                Save
+            </a>
+            <div class="hspace" />
+            <a
+                class="btn"
+                @click="$emit('close')"
             >
-        </label>
-    </div>
-
-    <div class="group actions">
-        <a
-            class="btn positive"
-            @click="save(); $emit('close')"
-        >
-            Save
-        </a>
-        <div class="hspace" />
-        <a
-            class="btn"
-            @click="$emit('close')"
-        >
-            Cancel
-        </a>
+                Cancel
+            </a>
+        </div>
     </div>
 </template>
 
 <style lang="scss" scoped>
+.settings{
+    display: grid;
+    gap: $padding;
+}
+
 .group{
-    border-top: $border;
-    padding: $padding 0;
+    display: grid;
+    gap: math.div($padding, 2);
+
+    &:not(:first-child){
+        border-top: $border;
+        padding-top: $padding;
+    }
+
+    &.actions{
+        display: flex;
+        gap: math.div($padding, 2);
+
+        .hspace{
+            flex: 1;
+        }
+    }
+}
+
+h1{
+    font-size: 24px;
+    font-weight: bold;
+}
+
+h2{
+    font-size: 21px;
+    font-weight: bold;
+}
 
-    &:last-child{
-        padding-bottom: 0;
+a.project-url{
+    display: block;
+    color: blue;
+    text-decoration: none;
+
+    &:hover{
+        text-decoration: underline;
     }
 }
 
 label{
-    @extend .margins;
+    cursor: pointer;
+    font-weight: bold;
 
     align-items: center;
     display: grid;
-    cursor: pointer;
-    font-weight: bold;
     gap: math.div($padding, 2);
     grid-template-columns: 1fr 2fr;
 }
@@ -92,15 +139,6 @@ input{
     }
 }
 
-.actions{
-    display: flex;
-    gap: math.div($padding, 2);
-
-    .hspace{
-        flex: 1;
-    }
-}
-
 a.btn{
     background-color: white;
     border: $border;