diff --git a/build/images/background.png b/build/images/background.png new file mode 100644 index 0000000..2752d59 Binary files /dev/null and b/build/images/background.png differ diff --git a/build/images/coin.png b/build/images/coin.png new file mode 100644 index 0000000..dabfc1e Binary files /dev/null and b/build/images/coin.png differ diff --git a/build/images/sliderback.png b/build/images/sliderback.png new file mode 100644 index 0000000..e3997b2 Binary files /dev/null and b/build/images/sliderback.png differ diff --git a/build/manifest.json b/build/manifest.json index 4d1703d..260ac69 100644 --- a/build/manifest.json +++ b/build/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "DogMoneyMode", - "version": "1.3", + "version": "2.0", "description": "Browser extension that makes fiat prices display in Dogecoin. Fiat Supported: USD, GBP, EUR.", "permissions": ["storage"], "action": { diff --git a/build/popup.html b/build/popup.html index 12cefe5..8667120 100644 --- a/build/popup.html +++ b/build/popup.html @@ -6,43 +6,38 @@ * { font-family: 'Comic Sans MS', cursive, sans-serif; } - body { - background-color: #fae0d4; - padding: 5px; - width: 250px; + background-color: #23292B; + background: url('./images/background.png'); + background-position: center; + background-size: cover; text-align: center; + width: 300px; + height: 300px; + margin: 0; + padding: 0; } - - h1 { - margin-top: 0; - } - - h5 { - margin: 14px 0px; - font-size: 12px; - } - - - select { - padding: 10px; - font-size: 16px; - border-radius: 12px; + :root { + --switch-width: 180px; + --switch-height: 120px; + --slider-size: calc(var(--switch-height) - 0px); + --slider-move: calc(var(--switch-width) - var(--switch-height)); } - .switch { + top: 95px; position: relative; display: inline-block; - width: 150px; - height: 68px; + width: var(--switch-width); + height: var(--switch-height); + background: url('./images/sliderback.png') no-repeat; + background-size: 100% 100%; + border-radius: var(--switch-height); } - .switch input { opacity: 0; width: 0; height: 0; } - .slider { position: absolute; cursor: pointer; @@ -53,74 +48,85 @@ background-color: #ccc; -webkit-transition: .4s; transition: .4s; + border-radius: var(--switch-height); } - .slider:before { position: absolute; content: ""; - height: 58px; - width: 58px; - left: 5px; - bottom: 5px; + height: var(--slider-size); + width: var(--slider-size); + left: 0px; + bottom: 0px; background-color: white; -webkit-transition: .4s; transition: .4s; + border-radius: var(--switch-height); + background-image: url('images/coin.png'); + background-position: center; + background-size: cover; + z-index: 2; } - input:checked + .slider { - background-color: #2196F3; + -webkit-transition: .4s; + transition: .4s; + border-radius: var(--switch-height); + background-color: transparent; + background: url('./images/sliderback.png'); + } + .slider::after { + content: ""; + position: absolute; + border-radius: var(--switch-height); + left: 0%; + top: 0; + right: 0; + bottom: 0; + background-color: white; + transition: .4s; + z-index: 1; + } + input:checked + .slider::after { + left: 60px; } - input:focus + .slider { box-shadow: 0 0 1px #2196F3; } - input:checked + .slider:before { - -webkit-transform: translateX(75px); - -ms-transform: translateX(75px); - transform: translateX(75px); + -webkit-transform: translateX(var(--slider-move)); + -ms-transform: translateX(var(--slider-move)); + transform: translateX(var(--slider-move)); } - - - .slider.round { - border-radius: 68px; - } - - .slider.round:before { - border-radius: 50%; - } - - #tips { - display:block; + input:checked + .slider:before { + -webkit-filter: grayscale(0%); + -moz-filter: grayscale(0%); + -o-filter: grayscale(0%); + -ms-filter: grayscale(0%); + filter: grayscale(0%); } - .tip-content { - display: none; + input + .slider:before { + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + -o-filter: grayscale(100%); + -ms-filter: grayscale(100%); + filter: grayscale(100%); } - .tip-content img { - width: 250px; - height: 250px; - }
-