diff --git a/manifest.json b/manifest.json index 0eb770a..78feb0d 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "Speeder", "short_name": "Speeder", - "version": "5.2.6.0", + "version": "5.2.7.0", "manifest_version": 2, "description": "Speed up, slow down, advance and rewind HTML5 audio/video with shortcuts (New and improved version of \"Video Speed Controller\")", "homepage_url": "https://github.com/SoPat712/speeder", diff --git a/popup.css b/popup.css index adf694e..3fa0c00 100644 --- a/popup.css +++ b/popup.css @@ -210,21 +210,63 @@ button:focus-visible { .donate-split { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(3, 1fr); } -.donate-split button { +.donate-icon-btn { + display: flex; + align-items: center; + justify-content: center; + min-height: 32px; + padding: 6px 4px; + background: var(--panel); + border: 1px solid var(--border-strong); + color: var(--text); + text-decoration: none; + cursor: pointer; + transition: background 120ms ease, border-color 120ms ease; +} + +.donate-icon-btn:hover { + background: #f8f9fb; + border-color: #c5ccd5; +} + +.donate-icon-btn:active { + background: #f1f3f5; +} + +.donate-icon-btn:focus-visible { + outline: 2px solid rgba(17, 24, 39, 0.14); + outline-offset: 2px; + position: relative; + z-index: 1; +} + +.donate-icon-btn svg { + display: block; + flex-shrink: 0; +} + +.donate-icon-btn--kofi img { + display: block; + height: 22px; width: auto; - border-radius: 0; - min-height: 28px; + max-width: 40px; + object-fit: contain; } -.donate-split button:first-child { +.donate-icon-btn:first-child { border-radius: 8px 0 0 8px; - border-right: 0; + border-right-width: 0; } -.donate-split button:last-child { +.donate-icon-btn:nth-child(2) { + border-radius: 0; + border-right-width: 0; +} + +.donate-icon-btn:last-child { border-radius: 0 8px 8px 0; } @@ -266,4 +308,13 @@ button:focus-visible { background: #dfe3e8; border-color: #dfe3e8; } + + .donate-icon-btn:hover { + background: #1f2226; + border-color: #4a515a; + } + + .donate-icon-btn:active { + background: #252a2f; + } } diff --git a/popup.html b/popup.html index cae9e41..0eeba33 100644 --- a/popup.html +++ b/popup.html @@ -35,8 +35,67 @@