From d2ca1b4ee136bd06fdda552e1abd683eb9ab6dbb Mon Sep 17 00:00:00 2001 From: oguzhaninan Date: Wed, 7 Jun 2017 13:27:27 +0300 Subject: [PATCH] updated light theme --- assets/css/loader.css | 2 +- assets/css/style.css | 37 +----- assets/css/themes/dark.css | 93 +++++++++++---- assets/css/themes/light.css | 229 ++++++++++++++++++++++-------------- src/index.js | 2 +- 5 files changed, 218 insertions(+), 145 deletions(-) diff --git a/assets/css/loader.css b/assets/css/loader.css index 9cff9698..b1d38251 100644 --- 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; } diff --git a/assets/css/style.css b/assets/css/style.css index 4e46076f..800b9c78 100755 --- 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; -} \ No newline at end of file diff --git a/assets/css/themes/dark.css b/assets/css/themes/dark.css index f5c20c5b..4d30c6fa 100644 --- a/assets/css/themes/dark.css +++ b/assets/css/themes/dark.css @@ -2,28 +2,34 @@ AUTHOR */ -/*----------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; } \ No newline at end of file diff --git a/assets/css/themes/light.css b/assets/css/themes/light.css index c2769a48..5936a1b1 100644 --- a/assets/css/themes/light.css +++ b/assets/css/themes/light.css @@ -1,215 +1,272 @@ -/*-------------Colors---------------*/ +/** + AUTHOR +*/ .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; } \ No newline at end of file diff --git a/src/index.js b/src/index.js index 679aa8ae..95e303c2 100755 --- 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) } }) \ No newline at end of file