updated light theme

2026-04-19 05:58:30 -04:00 · 2017-06-07 13:27:27 +03:00
parent a0217e16f0
commit d2ca1b4ee1
5 changed files with 218 additions and 145 deletions
--- a/assets/css/loader.css
+++ b/assets/css/loader.css
@@ -9,7 +9,7 @@
  left: 0;
  right: 0;
  bottom: 0;
-  background-color: #2a2a2a;
+  background-color: #1b1e24;
  z-index: 999999;
 }

--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -58,8 +58,6 @@ button {
  text-align: center;
  font-weight: 400;
  font-size: 16px;
-  color: #ccc;
-  border-bottom: 1px solid #ccc;
 }


@@ -399,23 +397,16 @@ button {
  margin: 1px 5px 0px 0px;
  border-radius: 100%;
  position: relative;
-  border: 2px solid #fff;
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 100px;
  cursor: pointer;
-  background-color: #3d474e;
 }

-.uninstaller-list input[type=checkbox]:checked+label {
-  background-color: #2285c3;
-}

 #uninstall-selected {
  padding: 7px 15px;
-  color: #aeb5bf;
-  border: 1px solid #293945;
  cursor: pointer;
  font-size: 15px;
  margin: 15px 268px;
@@ -425,11 +416,6 @@ button {

 #uninstall-selected:disabled {
  cursor: not-allowed;
-  color: #293945;
-}
-
-#uninstall-selected:hover {
-  background-color: #293945;
 }


@@ -650,7 +636,6 @@ input[type=checkbox] {
  bottom: 0;
  left: 0;
  right: 0;
-  background-color: #16a085;
  text-align: left;
  padding: 7px 0;
 }
@@ -658,33 +643,25 @@ input[type=checkbox] {
 .update-check span {
  float: left;
  display: block;
-  color: #202b33;
  padding: 5px 20px;
  margin: 0;
 }

 .update-check button {
-  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  float: right;
  display: block;
-  background-color: #202b33;
  border-radius: 4px;
  padding: 6px 15px;
  margin-right: 8px;
 }

-.update-check button:hover {
-  background-color: #293945;
-}
-

 /*prompt style*/

 .promptDialog {
-  position: fixed;
  background-color: rgba(0, 0, 0, .4);
  left: 0;
  right: 0;
@@ -748,8 +725,6 @@ input[type=checkbox] {

 /*----SETTINGS-----*/

-.settings {}
-
 .settings div {
  float: left;
  margin: 10px 15px 0 10px;
@@ -795,7 +770,7 @@ input[type=checkbox] {
 }


-/*-----STable-----*/
+/*-----STABLE-----*/

 .stable {
  background-color: #3d474e;
@@ -894,13 +869,3 @@ input[type=checkbox] {
  animation-name: reveal;
  animation-direction: reverse;
 }
-
-.side {
-  float: left;
-  height: 650px;
-  width: 60px;
-  background-color: deepskyblue;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
--- a/assets/css/themes/dark.css
+++ b/assets/css/themes/dark.css
@@ -2,28 +2,34 @@
  AUTHOR <email@address>
 */

-/*----------Colors-----------*/
-
 .dark {
  background-color: #202b33;
 }
+  
+.content h1 {
+  color: #ccc;
+  border-bottom: 1px solid #ccc;
+}

 /*----SIDEBAR-NAV----*/
+
 .dark .sidebar-nav {
  background-color: #293945;
 }

-.sidebar-nav ul li label {
+.dark .sidebar-nav ul li label {
  color: #2285c3;
 }

 .sidebar-nav ul li i {
  color: #fff;
 }
-/*---------DASHBOARD---------*/


-/*Trail Color*/
+/*-----DASHBOARD-----*/
+
+
+/*chart-trail-color*/

 .dark svg path:first-child {
  stroke: #202b33;
@@ -53,23 +59,17 @@
  background-color: #202b33;
 }

-.dark .sidebar-nav ul li:hover {  
+.dark .sidebar-nav ul li:hover {
  background-color: #1b242b;
 }

-.sidebar-nav ul li:hover > i {
-  color: #2285c3;
-}
-
+.dark .sidebar-nav ul li:hover>i,
 .dark .nav-active i {
  color: #2285c3;
 }


-/*---------DASHBOARD---------*/
-
-
-/*---------ITEM LIST---------*/
+/*----SWITCH-----*/

 .dark .switch+label,
 .dark .switch:not(:checked)+label:hover:active {
@@ -88,6 +88,9 @@
  background-color: #3d474e;
 }

+
+/*----ITEM LIST-----*/
+
 .dark .item-list ul li {
  background-color: #293945;
 }
@@ -108,10 +111,7 @@
 }


-/*---------ITEM LIST---------*/
-
-
-/*---------ITEM TABLE---------*/
+/*----ITEM TABLE----*/

 .dark .item-table {
  border: 1px solid #3d474e;
@@ -144,6 +144,9 @@
  color: #aeb5bf;
 }

+
+/*----CLEANER SIDE-----*/
+
 .dark .cleaner-side ul li label {
  color: #aeb5bf;
 }
@@ -169,7 +172,7 @@
 }


-/*---------ITEM TABLE---------*/
+/*----STARTUP APPS----*/

 .dark .add-startup-app {
  background-color: #2196f3;
@@ -180,6 +183,9 @@
  background-color: #2285c3;
 }

+
+/*----RESURCES----*/
+
 .dark .resources h4 {
  color: #aeb5bf;
 }
@@ -198,8 +204,49 @@
  background-color: #293945;
 }

-.dark .empty-list {
-  color: #748390;
+
+/*----UNINSTALLER----*/
+
+.dark .uninstaller-list label {
+  border: 2px solid #fff;
+  background-color: #3d474e;
+}
+
+.dark .uninstaller-list input[type=checkbox]:checked+label {
+  background-color: #2285c3;
+}
+
+.dark #uninstall-selected {
+  color: #aeb5bf;
+  border: 1px solid #293945;
+}
+
+.dark #uninstall-selected:disabled {
+  color: #293945;
+}
+
+.dark #uninstall-selected:hover {
+  background-color: #293945;
+}
+
+
+/*-----UPDATE-BAR-----*/
+
+.dark .update-check {
+  background-color: #16a085;
+}
+
+.dark .update-check span {
+  color: #202b33;
+}
+
+.dark .update-check button {
+  color: #fff;
+  background-color: #202b33;
+}
+
+.dark .update-check button:hover {
+  background-color: #293945;
 }


@@ -212,4 +259,8 @@
 .dark .settings div select {
  background-color: #293945;
  color: #fff;
+}
+
+.dark .empty-list {
+  color: #748390;
 }
--- a/assets/css/themes/light.css
+++ b/assets/css/themes/light.css
@@ -1,215 +1,272 @@
-/*-------------Colors---------------*/
+/**
+  AUTHOR <email@address>
+*/

 .light {
-	background-color: #eef4f6;
+  background-color: #eef4f6;
+}
+
+.content h1 {
+  color: #6d7278;
+  border-bottom: 1px solid #bdc4ca;
 }


-/*---------DASHBOARD---------*/
+/*----SIDEBAR-NAV----*/
+
+.light .sidebar-nav {
+  background-color: #fff;
+  box-shadow: 0px 0px 20px 0px #ddd;
+}
+
+.light .sidebar-nav ul li label {
+  color: #fff;
+}
+
+.sidebar-nav ul li i {
+  color: #6d7278;
+}


-/*Trail Color*/
+/*-----DASHBOARD-----*/
+
+
+/*chart-trail-color*/

 .light svg path:first-child {
-	stroke: #ddd;
+  stroke: #ddd;
 }

 .light .cont,
 .light .line-cont {
-	background-color: #fff;
-	box-shadow: 0px 0px 20px 0px #ddd;
-	color: #6d7278;
+  background-color: #fff;
+  box-shadow: 0px 0px 20px 0px #ddd;
+  color: #6d7278;
 }

 .light .cont h3,
 .light .line-cont h3,
 .light .system-info h3 {
-	color: #6d7278;
+  color: #6d7278;
 }

 .light .system-info ul li {
-	color: #6d7278;
+  color: #6d7278;
 }

-.light #nav li {
-	color: #6d7278;
+.light .nav-active {
+  background-color: #2285c3;
 }

-.light .nav-active,
-.light #nav li label:hover {
-	color: #47b1f3;
-	border-bottom: 1px solid #47b1f3;
+.light .sidebar-nav ul li:hover {
+  background-color: #2285c3;
+  color: #fff;
+}
+
+.light .sidebar-nav ul li:hover > i,
+.light .nav-active i {
+  color: #fff;
 }


-/*---------DASHBOARD---------*/
-
-
-/*---------ITEM LIST---------*/
+/*----SWITCH-----*/

 .light .switch+label,
 .light .switch:not(:checked)+label:hover:active {
-	background-color: #EF4836;
+  background-color: #EF4836;
 }

 .light .switch+label::after {
-	background-color: #fff;
+  background-color: #fff;
 }

 .light .switch:checked+label {
-	box-shadow: inset 0 0 0 13px #4BD865;
+  box-shadow: inset 0 0 0 13px #4BD865;
 }

 .light .scroll::-webkit-scrollbar-thumb {
-	background-color: #748390;
+  background-color: #748390;
 }

+
+/*----ITEM LIST-----*/
+
 .light .item-list ul li {
-	background-color: #fff;
-	box-shadow: 0px 0px 10px 0px #ddd;
+  background-color: #fff;
+  box-shadow: 0px 0px 10px 0px #ddd;
 }

 .light .item-list ul li:hover {
-	background-color: #748390;
-	color: #fff;
+  background-color: #748390;
+  color: #fff;
 }

 .light .item-list h3,
 .light .item-list ul li {
-	color: #6d7278;
+  color: #6d7278;
 }

 .light .item-list input[type=text] {
-	background-color: #fff;
-	border: 1px solid #eee;
-	box-shadow: 0px 0px 5px 0px #ddd;
-	color: #aeb5bf;
+  background-color: #fff;
+  border: 1px solid #eee;
+  box-shadow: 0px 0px 5px 0px #ddd;
+  color: #aeb5bf;
 }


-/*---------ITEM LIST---------*/
-
-
-/*---------ITEM TABLE---------*/
+/*----ITEM TABLE----*/

 .light .item-table {
-	background-color: #fff;
-	box-shadow: 0px 0px 20px 0px #ddd;
-	border: 0;
+  background-color: #fff;
+  box-shadow: 0px 0px 20px 0px #ddd;
+  border: 0;
 }

 .light .item-table ul li {
-	border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
 }

 .light .item-table ul li:hover {
-	background-color: #bdc4ca;
+  background-color: #bdc4ca;
 }

 .light .cleaner-side i,
 .light .item-table i {
-	background-color: #748390;
+  background-color: #748390;
 }

 .light .item-table input[type=checkbox]:checked+i::after,
 .light .cleaner-side input[type=checkbox]:checked+i::after {
-	background-color: #293945;
+  background-color: #293945;
 }

-.light .item-table li span {
-	color: #aeb5bf;
+.light .item-table h3 {
+  background-color: #bdc4ca;
+  color: #fff;
 }

-.light .item-table li span:hover {
-	color: #fff;
-}

-.light .item-table h3,
-.light .item-table h3 span {
-	background-color: #bdc4ca;
-	color: #fff;
-}
+/*----CLEANER SIDE-----*/

 .light .cleaner-side ul li label {
-	color: #aeb5bf;
+  color: #aeb5bf;
 }

 .light .cleaner-side ul li {
-	background-color: #fff;
-	box-shadow: 0px 0px 20px 0px #ddd;
-	border: 0;
+  background-color: #fff;
+  box-shadow: 0px 0px 20px 0px #ddd;
+  border: 0;
 }

 .light .cleaner-side ul li label:hover {
-	background-color: #bdc4ca;
-	color: #2285c3;
+  background-color: #bdc4ca;
+  color: #2285c3;
 }

 .light #clean-btn,
 .light #system-scan-btn {
-	color: #fff;
-	background-color: #bdc4ca;
-	box-shadow: 0px 0px 20px 0px #ddd;
-	border: 0;
+  color: #fff;
+  background-color: #bdc4ca;
+  box-shadow: 0px 0px 20px 0px #ddd;
+  border: 0;
 }

 .light #clean-btn:hover,
 .light #system-scan-btn:hover {
-	background-color: #748390;
+  background-color: #748390;
 }


-/*---------ITEM TABLE---------*/
+/*----STARTUP APPS----*/

 .light .add-startup-app {
-	background-color: #2196f3;
-	color: #eee;
+  background-color: #2196f3;
+  color: #eee;
 }

 .light .add-startup-app:hover {
-	background-color: #2285c3;
+  background-color: #2285c3;
 }

+
+/*----RESURCES----*/
+
 .light .resources h4 {
-	color: #6d7278;
+  color: #6d7278;
 }

 .light .fit-chart {
-	background: url(../../img/fit-light.png) no-repeat 0 0;
+  background: url(../../img/fit.png) no-repeat 0 0;
 }

 .light .collapse {
-	background: url(../../img/collapse-light.png) no-repeat 0 0;
+  background: url(../../img/collapse.png) no-repeat 0 0;
 }

 .light #cpus-chart,
 .light #memory-chart,
 .light #network-chart {
-	background-color: #fff;
-	box-shadow: 0px 0px 20px 0px #ddd;
+  background-color: #fff;
+  box-shadow: 0px 0px 20px 0px #ddd;
 }

-.light .empty-list {
-	color: #748390;
+
+/*----UNINSTALLER----*/
+
+.light .uninstaller-list label {
+  border: 2px solid #aeb5bf;
+  background-color: #eee;
+}
+
+.light .uninstaller-list input[type=checkbox]:checked+label {
+  background-color: #2285c3;
+}
+
+.light #uninstall-selected {
+  color: #748390;
+  border: 1px solid #748390;
+}
+
+.light #uninstall-selected:disabled {
+  color: #293945;
+}
+
+.light #uninstall-selected:hover {
+  background-color: #748390;
+}
+
+
+/*-----UPDATE-BAR-----*/
+
+.light .update-check {
+  background-color: #16a085;
+}
+
+.light .update-check span {
+  color: #202b33;
+}
+
+.light .update-check button {
+  color: #fff;
+  background-color: #202b33;
+}
+
+.light .update-check button:hover {
+  background-color: #293945;
 }


 /*----SETTINGS-----*/

-.light .settings h3 {
-	border-bottom: 1px solid #2285c3;
-	color: #2285c3;
-}
-
 .light .settings div label {
-	color: #6d7278;
+  color: #6d7278;
 }

 .light .settings div select {
-	background-color: #748390;
-	color: #fff;
+  background-color: #748390;
+  color: #fff;
 }

-.light .settings-btn {
-	background: #6d7278 url(../../img/settings.png) no-repeat 6px center;
+.light .empty-list {
+  color: #748390;
 }
--- a/src/index.js
+++ b/src/index.js
@@ -16,6 +16,6 @@ window.vm = new Vue({
        document.body.classList = [appTheme]
    },
    mounted() {
-        setTimeout(() => document.getElementById('loading').remove(), 20)
+        setTimeout(() => document.getElementById('loading').remove(), 3000)
    }
 })