CopyBot/crypto-price-widget
1
0
Fork 0
mirror of https://github.com/nathanp/crypto-price-widget.git synced 2025-11-06 03:08:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

UI improvements

Browse Source
This commit is contained in:
Nathan Parikh 2017-10-12 22:23:40 -05:00
parent 649a26299c
commit ac6d6861bf
2 changed files with 81 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
css/app.css
View File

@ -36,7 +36,7 @@ button,
body { body {
background: rgba(0, 0, 0, 0.95); background: rgba(0, 0, 0, 0.95);
color: #fff; color: #fff;
margin-top: 5px; margin-top: 35px;
} }
ul { ul {
margin: 0; margin: 0;
@ -50,6 +50,13 @@ img {
-webkit-user-select: none; -webkit-user-select: none;
-webkit-app-region: drag; -webkit-app-region: drag;
opacity: 0; opacity: 0;
position: fixed;
width: 94%;
z-index: 100;
background: rgba(0, 0, 0, 0.95);
top: 0;
left: 0;
padding: 8px 3% 3px;
} }
.titlebar:hover { .titlebar:hover {
opacity: 1; opacity: 1;
@ -66,7 +73,6 @@ button {
border: 1px solid #252525; border: 1px solid #252525;
padding: 5px 10px; padding: 5px 10px;
margin: -1px 0px 0px 0px; margin: -1px 0px 0px 0px;
font-family: 'Inconsolata', monospace;
} }
header button { header button {
background: none; background: none;
@ -184,6 +190,14 @@ ul {
} }
.coin-list li .sym:hover { .coin-list li .sym:hover {
cursor: -webkit-grab; cursor: -webkit-grab;
border-top-color: #4c4c4c;
border-right-color: #4c4c4c;
border-bottom-color: #4c4c4c;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
} }
/*Symbol Colors*/ /*Symbol Colors*/
.coin-list li#coin-BTC .sym { .coin-list li#coin-BTC .sym {
@ -270,7 +284,6 @@ ul {
margin-top: 5px; margin-top: 5px;
} }
#myInput { #myInput {
font-family: 'Inconsolata', monospace;
border: none; border: none;
padding: 0px 0px 10px; padding: 0px 0px 10px;
font-size: 14px; font-size: 14px;
@ -288,7 +301,6 @@ ul {
border: 1px solid #252525; border: 1px solid #252525;
padding: 5px 10px; padding: 5px 10px;
margin: -1px 0px 0px 0px; margin: -1px 0px 0px 0px;
font-family: 'Inconsolata', monospace;
} }
#coinlist { #coinlist {
margin: 15px 0px 0px 0px; margin: 15px 0px 0px 0px;
@ -309,14 +321,17 @@ ul {
#coinlist label, #coinlist label,
.checkbox-styled-label { .checkbox-styled-label {
height: auto; height: 18px;
width: 100%;
z-index: 0; z-index: 0;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
text-indent: 24px; text-indent: 24px;
overflow: hidden;
}
#coinlist label {
cursor: pointer;
} }
#coinlist label div, #coinlist label div,
.checkbox-styled-label div { .checkbox-styled-label div {
@ -329,6 +344,11 @@ ul {
transition: all 0ms ease-in-out, border 0ms ease 0ms; transition: all 0ms ease-in-out, border 0ms ease 0ms;
position: absolute; position: absolute;
top: 0; top: 0;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
} }
#coinlist input:hover + label div, #coinlist input:hover + label div,
.checkbox-styled:hover + label div { .checkbox-styled:hover + label div {
@ -404,9 +424,12 @@ ul {
::-webkit-scrollbar-thumb:window-inactive, ::-webkit-scrollbar-thumb:window-inactive,
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #252525; background-color: #252525;
-webkit-border-radius: 100px; -webkit-border-radius: 100px;
} }
::-webkit-scrollbar-thumb:hover {
background-color: #4c4c4c;
}
/*Select Boxes*/ /*Select Boxes*/
.custom-select { .custom-select {

2
js/app_common.js
View File

@ -403,6 +403,8 @@ document.getElementById('saveQuantities').onclick = function(){
var div = document.createElement("div"); var div = document.createElement("div");
checkBox.type = "checkbox"; checkBox.type = "checkbox";
checkBox.value = actual_JSON.Data[key].Name; checkBox.value = actual_JSON.Data[key].Name;
checkBox.id = actual_JSON.Data[key].Name;
label.htmlFor = actual_JSON.Data[key].Name;
checkBox.name = "cl[]"; checkBox.name = "cl[]";
//check the coins the user has already set //check the coins the user has already set
var str = String(settings.get('user.coins')); var str = String(settings.get('user.coins'));