From 83378b85b8ab96fc353747b32a885d55238b17a0 Mon Sep 17 00:00:00 2001 From: Andrew Lorimer Date: Thu, 15 Aug 2019 12:26:53 +1000 Subject: [PATCH] change defaults, make foreground colour user-selectable --- admin.js | 30 ++++---- bg.js | 2 +- fg.js | 8 +++ newtab.html | 1 + options.html | 3 + options.js | 15 ++-- style.css | 190 ++++++++++++++++++++++++++------------------------- 7 files changed, 132 insertions(+), 117 deletions(-) create mode 100644 fg.js diff --git a/admin.js b/admin.js index 17fbdbd..6711890 100644 --- a/admin.js +++ b/admin.js @@ -7,30 +7,24 @@ document.addEventListener("DOMContentLoaded", function() { chrome.storage.sync.get( {"lists": [ [ - ["syncthing", "https://localhost:8384/"], - ["todoist", "http://todoist.com/"], - ["github", "https://github.com/"], - ["gmail", "http://mail.google.com/"], - ["drive", "http://drive.google.com/"] + ["Github", "https://github.com"], + ["Wikipedia", "https://en.wikipedia.org"], + ["Gmail", "https://mail.google.com"] ], [ - ["unixporn", "http://reddit.com/r/unixporn"], - ["news", "http://reddit.com/r/news"], - ["funny", "http://reddit.com/r/funny"], - ["linux", "http://reddit.com/r/linux"], - ["all", "http://reddit.com/r/all"] + ["Desmos", "https://www.desmos.com/calculator"], + ["Wolfram", "https://wolframalpha.com"], + ["Hacker News", "https://news.ycombinator.com"] ], [ - ["elementary", "https://elementary.io/"], - ["ubuntu", "https://www.ubuntu.com/"], - ["fedora", "https://getfedora.org/"], - ["mint", "https://linuxmint.com/"], - ["arch", "https://www.archlinux.org/"] + ["Reddit", "https://www.reddit.com"], + ["YouTube", "https://youtube.com"], + ["Instagram", "https://instagram.com"] ] ], -"l1name": "productivity", -"l2name": "general", -"l3name": "distros"}, +"l1name": "General", +"l2name": "Productivity", +"l3name": "Social"}, userListsCallback); }); diff --git a/bg.js b/bg.js index 72d59b4..73ee509 100644 --- a/bg.js +++ b/bg.js @@ -1,5 +1,5 @@ document.addEventListener("DOMContentLoaded", function() { - chrome.storage.sync.get({"bgvalue": "#222222"}, bgCallback); + chrome.storage.sync.get({"bgvalue": "#2E3440"}, bgCallback); }); var bgCallback = function(list) { var color = list["bgvalue"]; diff --git a/fg.js b/fg.js new file mode 100644 index 0000000..2d2cd06 --- /dev/null +++ b/fg.js @@ -0,0 +1,8 @@ +document.addEventListener("DOMContentLoaded", function() { + chrome.storage.sync.get({"fgvalue": "#ECEFF4"}, fgCallback); +}); +var fgCallback = function(list) { +var color = list["fgvalue"]; +console.log(color); +document.body.style.color = color; +}; diff --git a/newtab.html b/newtab.html index 70f25d7..f7268cb 100644 --- a/newtab.html +++ b/newtab.html @@ -8,6 +8,7 @@ + diff --git a/options.html b/options.html index 2100b20..958c951 100644 --- a/options.html +++ b/options.html @@ -23,6 +23,9 @@ bg + + fg + diff --git a/options.js b/options.js index 44eacbc..a12b9c9 100644 --- a/options.js +++ b/options.js @@ -2,8 +2,8 @@ function save_options() { var l1name = document.getElementById('l1').value; var l2name = document.getElementById('l2').value; var l3name = document.getElementById('l3').value; - var bgvalue = document.getElementById('bg').value; + var fgvalue = document.getElementById('fg').value; console.log(bgvalue); chrome.storage.sync.set({ @@ -11,6 +11,7 @@ function save_options() { "l2name": l2name, "l3name": l3name, "bgvalue": bgvalue, + "fgvalue": fgvalue, }, function() { window.close(); @@ -20,15 +21,17 @@ function save_options() { function restore_options() { chrome.storage.sync.get({ - "l1name": "list1", - "l2name": "list2", - "l3name": "list3", - "bgvalue": "#222222"}, + "l1name": "Productivity", + "l2name": "General", + "l3name": "Social", + "bgvalue": "#2E3440", + "fgvalue": "#D8DEE9"}, function(items) { document.getElementById('l1').value = items["l1name"]; document.getElementById('l2').value = items["l2name"]; document.getElementById('l3').value = items["l3name"]; - document.getElementById('bg').value = items["bgvalue"]; + document.getElementById('bg').value = items["bgvalue"]; + document.getElementById('fg').value = items["fgvalue"]; }); } diff --git a/style.css b/style.css index 5fe3349..659b04a 100644 --- a/style.css +++ b/style.css @@ -1,123 +1,131 @@ #search-form > input#search-box:-webkit-autofill { - -webkit-box-shadow: 0 0 0 1000px #222 inset !important; - -webkit-text-fill-color: #b5b5a4 !important; + -webkit-box-shadow: 0 0 0 1000px #222 inset !important; + -webkit-text-fill-color: #b5b5a4 !important; } #callback { - bottom: 0; - position: absolute; - height: 115px; - width: 31.1rem; + bottom: 0; + position: absolute; + height: 115px; + width: 31.1rem; } #search3 { - margin-top: -1.5rem; + margin-top: -1.5rem; } #wikires > a { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - margin-bottom: 0.5em; - height: 19px; - display: block; - color: inherit; - text-decoration: none; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + margin-bottom: 0.5em; + height: 19px; + display: block; + color: inherit; + text-decoration: none; } #duckduckres > a { - margin-bottom: 0.5em; - display: block; - color: inherit; - text-decoration: none; + margin-bottom: 0.5em; + display: block; + color: inherit; + text-decoration: none; } #topsites-list { - display: none; + display: none; } #search1.active { - margin-bottom: 2em; + margin-bottom: 2em; } #search2.active { - margin-top: 2em; + margin-top: 2em; } .name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 120px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 120px; } .inp { - width: 200px; + width: 200px; } .inp > input { - font-size: 16px !important; + font-size: 16px !important; } .users-list > ul > li > span { - margin-top: 4px; - font-weight: normal; - color: black; - width: 10px; - padding: 4px 5px 4px 10px; - background: white; - float: right; - display: none; - cursor: pointer; + font-weight: normal; + color: black; + width: 10px; + height: 32px; + padding: 4px 5px 0 10px; + background: #434C5E; + float: right; + display: none; + cursor: pointer; +} + +.users-list > ul > li > span:hover { + background: #BF616A; } .users-list > ul > .inp > span { - margin-top: 4px; - font-weight: normal; - color: black; - width: 10px; - padding: 2px 5px 3px 6px; - background: white; - cursor: pointer; + margin-top: 4px; + font-weight: normal; + color: black; + width: 10px; + padding: 2px 5px 3px 6px; + background: white; + cursor: pointer; } .users-list > ul > li:hover > span { - display: inline-block; + display: inline-block; } .users-list > ul > .title:hover > span { - display: inline-block; + display: inline-block; } .users-list > ul { - margin: 0; + margin: 0; } .users-list > ul > .title > span { - margin-top: 14px; - font-size: 75% !Important; - font-weight: normal; - color: black; - width: 10px; - content: "+"; - padding: 6px 6px 5px 9px; - background: white; - float: right; - display: none; - cursor: pointer; + margin-top: 14px; + font-size: 75% !Important; + font-weight: normal; + color: black; + width: 10px; + content: "+"; + padding: 6px 6px 5px 9px; + background: #b5b5a4; + float: right; + display: none; + cursor: pointer; +} + +.users-list > ul > .title > span { + background: #A3BE8C; } .users-list > ul > li > a, .users-list > ul > .title > p { - width: calc(100% - 45px); - display: inline-block; + width: calc(100% - 45px); + display: inline-block; } div#apps { - overflow-x: scroll; - display: flex; - width: 907px; - align-content: flex-start; - justify-content: flex-start; + overflow-x: scroll; + display: flex; + width: 907px; + align-content: flex-start; + justify-content: flex-start; } ::-webkit-scrollbar @@ -137,25 +145,25 @@ div#apps { } li.sortable-chosen.sortable-ghost > a { - background-color: white; - color: #2A313B !important; + background-color: white; + color: #2A313B !important; } .title > p { - width: 160px; - margin-left: 0.5rem; - margin-bottom: 0.5rem !important; + width: 160px; + margin-left: 0.5rem; + margin-bottom: 0.5rem !important; } .app { - cursor: pointer; - text-align: center; - margin: 16px; + cursor: pointer; + text-align: center; + margin: 16px; } .app > .image { - width: 64px; - padding: 8px; + width: 64px; + padding: 8px; } html, body { @@ -169,8 +177,7 @@ body { width: 100%; height: 100%; margin: 0; - background-color: #2A313B; - color: #b5b5a4; + color: #D8DEE9; } .container { @@ -201,11 +208,11 @@ ul { margin-bottom: 0.5rem; font-weight: bold; text-align: left; - border-bottom: 1px solid #b5b5a4; + border-bottom: 1px solid #434C5E; } ul > li > a { - color: #b5b5a4; + color: inherit; outline: none; display: block; text-decoration: none; @@ -213,28 +220,27 @@ ul > li > a { } ul > li > a:hover { - color: #2A313B; - background-color: #b5b5a4; + background-color: #434C5E; } .search.active { - width: 30rem; - padding: 0.5rem; - border: 1px solid #b5b5a4; + width: 30rem; + padding: 0.5rem; + border: 1px solid #434C5E; } #search-box { - font-size: inherit; - width: 100%; - margin: auto; - padding: 0; - background-color: rgba(0, 0, 0, 0); - color: #b5b5a4; - border: none; + font-size: inherit; + width: 100%; + margin: auto; + padding: 0; + background-color: rgba(0, 0, 0, 0); + color: #434C5E; + border: none; } #search-box:focus { - outline: none; + outline: none; } -- 2.47.1