changed the color of all icons to #397ca1 so they work better both against white and dark background;nested all children rules under app-ncdownloader-wrapper

appinfo/info.xml

@@ -8,7 +8,7 @@ Search for torrents within the app from mutiple BT sites;
 Control Aria2 and manage download tasks from the web;
 download videos from 700+ video sites(youtube,youku,vimo,dailymotion,twitter,facebook and the likes
 </description>
-    <version>0.6.0</version>
+    <version>0.6.1</version>
     <licence>agpl</licence>
     <author mail="freefallbenson@gmail.com" homepage="https://github.com/shiningw">jiaxinhuang</author>
     <namespace>NCDownloader</namespace>

img/add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewbox="0 0 16 16" fill="#397ca1" style="fill:#397ca1"><path d="M9.02 13.98h-2v-5h-5v-2h5v-5h2v5l5-.028V8.98h-5z"/></svg>

img/delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 16 16" width="16" height="16" fill="#397ca1" style="fill:#397ca1"><path d="M6.5 1L6 2H3c-.554 0-1 .446-1 1v1h12V3c0-.554-.446-1-1-1h-3l-.5-1zM3 5l.875 9c.06.55.573 1 1.125 1h6c.552 0 1.064-.45 1.125-1L13 5z"/></svg>

img/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 16 16" width="16" height="16" fill="#397ca1" style="fill:#397ca1"><path d="M6 1h4v7h5l-7 7-7-7h5z"/></svg>

img/play.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" style="fill:#fff" class="bi bi-play" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#397ca1" style="fill:#397ca1" class="bi bi-play" viewBox="0 0 16 16">
   <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/>
 </svg>

img/power.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-power" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#397ca1" style="fill:#397ca1" class="bi bi-power" viewBox="0 0 16 16">
   <path d="M7.5 1v7h1V1h-1z"/>
   <path d="M3 8.812a4.999 4.999 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812z"/>
 </svg>

img/refresh.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff" style="fill:#fff"><path d="M13.5 2c-5.621 0-10.211 4.443-10.475 10h-3.025l5 6.625 5-6.625h-2.975c.257-3.351 3.06-6 6.475-6 3.584 0 6.5 2.916 6.5 6.5s-2.916 6.5-6.5 6.5c-1.863 0-3.542-.793-4.728-2.053l-2.427 3.216c1.877 1.754 4.389 2.837 7.155 2.837 5.79 0 10.5-4.71 10.5-10.5s-4.71-10.5-10.5-10.5z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#397ca1" style="fill:#397ca1"><path d="M13.5 2c-5.621 0-10.211 4.443-10.475 10h-3.025l5 6.625 5-6.625h-2.975c.257-3.351 3.06-6 6.475-6 3.584 0 6.5 2.916 6.5 6.5s-2.916 6.5-6.5 6.5c-1.863 0-3.542-.793-4.728-2.053l-2.427 3.216c1.877 1.754 4.389 2.837 7.155 2.837 5.79 0 10.5-4.71 10.5-10.5s-4.71-10.5-10.5-10.5z"/></svg>

img/trash.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" style="fill:#fff" class="bi bi-trash" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#397ca1" style="fill:#397ca1" class="bi bi-trash" viewBox="0 0 16 16">
   <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
   <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
 </svg>

src/css/style.scss

@@ -2,6 +2,9 @@
     padding-left: 4%;
 }
 
+#app-ncdownloader-wrapper {
+    width: 100%;
+
     .action-item {
         position: relative;
     }
@@ -11,6 +14,34 @@ a {
         text-decoration: none;
     }
 
+    .icon-power {
+        background-image: url('../../img/power.svg');
+    }
+
+    .icon-purge {
+        background-image: url('../../img/trash.svg');
+    }
+
+    .icon-unpause {
+        background-image: url('../../img/play.svg');
+    }
+
+    .icon-refresh {
+        background-image: url('../../img/refresh.svg');
+    }
+
+    .icon-delete {
+        background-image: url('../../img/delete.svg');
+    }
+
+    .icon-download {
+        background-image: url('../../img/download.svg');
+    }
+
+    .icon-add {
+        background-image: url('../../img/add.svg');
+    }
+
     #ncdownloader-form-wrapper {
         margin-left: 2px;
 
@@ -48,10 +79,6 @@ div .number {
         padding      : 0 8px;
     }
 
-#ncdownloader-settings-form input[type=text] {
-    width: 160px;
-}
-
     #ncdownloader-form-wrapper input[type=text] {
         padding: 0px 5px;
         flex   : auto;
@@ -61,22 +88,6 @@ div .number {
         padding-left: 4px;
     }
 
-.icon-power {
-    background-image: url('../../img/power.svg');
-}
-
-.icon-purge {
-    background-image: url('../../img/trash.svg');
-}
-
-.icon-unpause {
-    background-image: url('../../img/play.svg');
-}
-
-.icon-refresh {
-    background-image: url('../../img/refresh.svg');
-}
-
     #ncdownloader-action-links-container {
         position: relative;
 
@@ -106,8 +117,6 @@ div .number {
         display        : block;
     }
 
-.app-ncdownloader,
-#app-ncdownloader-wrapper,
     .ncdownloader-body-wrapper,
     #ncdownloader-form-wrapper,
     #ncdownloader-table-content {
@@ -118,22 +127,22 @@ div .number {
         padding-top: 0.3em;
     }
 
-.app-ncdownloader #app-content-wrapper {
-    flex-wrap: wrap;
-}
-
     #app-content-wrapper #ncdownloader-table-content .table-cell {
         border-bottom: 1px solid #9d9595;
         border-left  : 1px solid #eee;
 
     }
 
+    #app-content-wrapper {
+        flex-wrap: wrap;
+    }
+
     .app-navigation-entry-bullet {
         background-color: rgb(80, 80, 173);
     }
 
     .notinstalled {
-    color: red;
+        color: rgb(236, 9, 9);
     }
 
     .checkboxes label {
@@ -150,7 +159,7 @@ div .number {
         vertical-align: middle;
     }
 
-#app-ncdownloader-wrapper>#app-navigation:not(.vue)>ul>li>a {
+    &>#app-navigation:not(.vue)>ul>li>a {
         padding: 0 12px 0 44px;
     }
 
@@ -162,6 +171,12 @@ div .number {
         min-height         : 24px;
     }
 
+}
+
+#ncdownloader-settings-form input[type=text] {
+    width: 160px;
+}
+
 @media only screen and (min-width: 800px) {}
 
 @media only screen and (max-width: 1024px) {
@@ -175,7 +190,6 @@ div .number {
     }
 }
 
-
 /* from bootstrap */
 .visually-hidden,
 .visually-hidden-focusable:not(:focus):not(:focus-within) {