diff --git a/pages/upload.html b/pages/upload.html index a0f8ae9..6b1c19d 100644 --- a/pages/upload.html +++ b/pages/upload.html @@ -4,7 +4,7 @@


- +

\ No newline at end of file diff --git a/res/index.js b/res/index.js index 66450d3..b187fad 100644 --- a/res/index.js +++ b/res/index.js @@ -1,7 +1,6 @@ let selected = 'button-home'; const changeSelected = (buttonId) => { - console.log(buttonId); A(`#${selected}`).removeClass('button-selected'); A(`#${buttonId}`).addClass('button-selected'); selected = buttonId; diff --git a/res/style.css b/res/style.css index 1c8e7ac..4488b6e 100644 --- a/res/style.css +++ b/res/style.css @@ -1,14 +1,23 @@ +:root { + --body-bg-color: #2E2E2E; + --accent-bg-color: #d1d1d1; + --button-accent-color: #3d3d3d; + --selected-bg-color: #2E2E2E; + --hover-bg-color: #555555; + --main-font-weight: 400; +} + body { - background: #2E2E2E; + background: var(--body-bg-color); font-family: 'Roboto', sans-serif; - font-weight: 400; + font-weight: var(--main-font-weight); } .card { margin: 25px auto; padding: 20px; width: 400px; - background: #d1d1d1; + background: var(--accent-bg-color); border-radius: 3px; @@ -33,30 +42,30 @@ body { .button-default { text-decoration: none; border: none; - background-color: #d1d1d1; + background-color: var(--accent-bg-color); border-radius: 5px; padding: 5px; font-size: 18px; white-space: nowrap; margin-top: 2px; margin-bottom: 2px; - color: #606060; + color: var(--button-accent-color); cursor: pointer; outline: none; } .button-default:hover:not(.button-selected) { - color: #d1d1d1; - background-color:#555555; + color: var(--accent-bg-color); + background-color: var(--hover-bg-color); } .button-selected { - color: #d1d1d1; - background-color:#2E2E2E; + color: var(--accent-bg-color); + background-color: var(--selected-bg-color); } .button-border { - border: 2px solid #606060; + border: 2px solid var(--button-accent-color); } @media screen and (max-width: 768px) {