diff --git a/manifest.json b/manifest.json index 18da4ab..beb9eb3 100644 --- a/manifest.json +++ b/manifest.json @@ -1,8 +1,8 @@ { "manifest_version": 3, "name": "SGDB Button on Steam", - "version": "1.0.4", - "description": "Adds a button on Steam game pages to bring you to its SteamGridDB entry.", + "version": "1.0.5", + "description": "Adds a button on Steam games that brings you to their SteamGridDB entry.", "icons": { "16": "icons/icon_16.png", "32": "icons/icon_32.png", diff --git a/popup.html b/popup.html index 96cfbd2..625fc24 100644 --- a/popup.html +++ b/popup.html @@ -9,6 +9,7 @@ body { min-width: 350px; max-width: 100%; + font-size: 16px; text-align: center; font-family: "Open Sans", sans-serif; background-color: #32414c; @@ -42,22 +43,82 @@ width: 22px; height: 22px; } + .checkbox { + display: inline-flex; + align-items: center; + cursor: pointer; + } + .checkbox > input[type="checkbox"] { + width: 0; + height: 0; + opacity: 0; + padding: 0; + margin: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + } + .checkbox > .fakebox { + width: 2em; + height: 1em; + border: 0; + border-radius: 1em; + background: rgba(0,0,0,.45); + display: inline-block; + position: relative; + margin-right: .5em; + transition: background 200ms ease; + } + .checkbox > input[type="checkbox"]:checked + .fakebox { + background: rgba(95, 180, 240, .5); + } + .checkbox > .fakebox::before { + content: ""; + display: block; + position: absolute; + width: 1em; + height: 1em; + border-radius: 100%; + background: #5fb4f0; + transform: translateX(0); + transition: background 150ms ease,transform 150ms ease; + } + .checkbox > input[type="checkbox"]:checked + .fakebox::before { + transform: translateX(1em); + } + div { + text-align: center; + padding: 5px 0px; + margin-right: .25rem; + }
-