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,16 +2,47 @@
     padding-left: 4%;
 }
 
-.action-item {
+#app-ncdownloader-wrapper {
-    position: relative;
+    width: 100%;
-}
 
-a {
+    .action-item {
+        position: relative;
+    }
+
+    a {
         color          : #337ab7;
         text-decoration: none;
-}
+    }
 
-#ncdownloader-form-wrapper {
+    .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;
 
         .form-input-wrapper {
@@ -22,20 +53,20 @@ a {
                 justify-content: left;
             }
         }
-}
+    }
 
-a:hover,
+    a:hover,
-a:focus {
+    a:focus {
         color          : #23527c;
         text-decoration: underline;
-}
+    }
 
-a:focus {
+    a:focus {
         outline       : 5px auto -webkit-focus-ring-color;
         outline-offset: -2px;
-}
+    }
 
-div .number {
+    div .number {
         background   : none repeat scroll 0 0 #5f5853;
         border-radius: 999px;
         color        : #FFFFFF;
@@ -46,38 +77,18 @@ div .number {
         line-height  : 20px;
         margin-right : 10px;
         padding      : 0 8px;
-}
+    }
 
-#ncdownloader-settings-form input[type=text] {
+    #ncdownloader-form-wrapper input[type=text] {
-    width: 160px;
-}
-
-#ncdownloader-form-wrapper input[type=text] {
         padding: 0px 5px;
         flex   : auto;
-}
+    }
 
-#ncdownloader-table-data .table-cell {
+    #ncdownloader-table-data .table-cell {
         padding-left: 4px;
-}
+    }
 
-.icon-power {
+    #ncdownloader-action-links-container {
-    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;
 
         .action-link-item a:hover {
@@ -87,9 +98,9 @@ div .number {
         ul {
             background-color: #ededed;
         }
-}
+    }
 
-.action-links {
+    .action-links {
         /*visibility: hidden;*/
         display         : none;
         position        : absolute;
@@ -97,69 +108,73 @@ div .number {
         min-width       : 60px;
         box-shadow      : 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
         z-index         : 9999;
-}
+    }
 
-.action-link-item a {
+    .action-link-item a {
         color          : black;
         padding        : 6px 6px;
         text-decoration: none;
         display        : block;
-}
+    }
 
-.app-ncdownloader,
+    .ncdownloader-body-wrapper,
-#app-ncdownloader-wrapper,
+    #ncdownloader-form-wrapper,
-.ncdownloader-body-wrapper,
+    #ncdownloader-table-content {
-#ncdownloader-form-wrapper,
-#ncdownloader-table-content {
         width: 100%;
-}
+    }
 
-.ncdownloader-body-wrapper {
+    .ncdownloader-body-wrapper {
         padding-top: 0.3em;
-}
+    }
 
-.app-ncdownloader #app-content-wrapper {
+    #app-content-wrapper #ncdownloader-table-content .table-cell {
-    flex-wrap: wrap;
-}
-
-#app-content-wrapper #ncdownloader-table-content .table-cell {
         border-bottom: 1px solid #9d9595;
         border-left  : 1px solid #eee;
 
-}
+    }
 
-.app-navigation-entry-bullet {
+    #app-content-wrapper {
+        flex-wrap: wrap;
+    }
+
+    .app-navigation-entry-bullet {
         background-color: rgb(80, 80, 173);
-}
+    }
 
-.notinstalled {
+    .notinstalled {
-    color: red;
+        color: rgb(236, 9, 9);
-}
+    }
 
-.checkboxes label {
+    .checkboxes label {
         display      : inline-block;
         padding-right: 10px;
         white-space  : nowrap;
-}
+    }
 
-.checkboxes input {
+    .checkboxes input {
         vertical-align: middle;
-}
+    }
 
-.checkboxes label span {
+    .checkboxes label span {
         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;
-}
+    }
 
-.button-container [class^='icon-'],
+    .button-container [class^='icon-'],
-.button-container [class*=' icon-'] {
+    .button-container [class*=' icon-'] {
         background-repeat  : no-repeat;
         background-position: center;
         /* min-width       : 18px; */
         min-height         : 24px;
+    }
+
+}
+
+#ncdownloader-settings-form input[type=text] {
+    width: 160px;
 }
 
 @media only screen and (min-width: 800px) {}
@@ -175,7 +190,6 @@ div .number {
     }
 }
 
-
 /* from bootstrap */
 .visually-hidden,
 .visually-hidden-focusable:not(:focus):not(:focus-within) {