From 4edc77aa00553e4162f11c43e44cad1f3a2b36ba Mon Sep 17 00:00:00 2001
From: rmcrackan <rmcrackan@gmail.com>
Date: Thu, 5 Mar 2026 10:07:31 -0500
Subject: [PATCH] #1652 - edit widget styling

---
 .github/download-icon.svg                     |  5 ++++
 .vitepress/theme/DownloadSuggestionWidget.vue | 23 ++++++++++++++++++-
 README.md                                     |  2 +-
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 .github/download-icon.svg

diff --git a/.github/download-icon.svg b/.github/download-icon.svg
new file mode 100644
index 00000000..aad9be49
--- /dev/null
+++ b/.github/download-icon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+  <polyline points="7 10 12 15 17 10"/>
+  <line x1="12" y1="15" x2="12" y2="3"/>
+</svg>
diff --git a/.vitepress/theme/DownloadSuggestionWidget.vue b/.vitepress/theme/DownloadSuggestionWidget.vue
index ef21907c..b53759d0 100644
--- a/.vitepress/theme/DownloadSuggestionWidget.vue
+++ b/.vitepress/theme/DownloadSuggestionWidget.vue
@@ -179,7 +179,7 @@ onMounted(() => {
 
 <style scoped>
 .download-widget-wrapper {
-  margin: 1.5rem 0;
+  margin: 1.5rem auto;
   max-width: 42rem;
 }
 .download-widget.recommended {
@@ -189,6 +189,14 @@ onMounted(() => {
   border-radius: 8px;
   font-weight: 600;
 }
+.download-widget.recommended a {
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+}
+.download-widget.recommended a:hover {
+  text-decoration: underline;
+  opacity: 0.8;
+}
 .block-head {
   display: flex;
   align-items: center;
@@ -205,11 +213,24 @@ onMounted(() => {
 .preview-select {
   margin-left: auto;
   font-size: 0.85rem;
+  padding-right: 1.75rem;
+  padding-left: 0.5rem;
+  appearance: none;
+  background-color: var(--vp-c-bg-soft);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.35rem center;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  cursor: pointer;
 }
 .widget-list {
   margin: 0 0 0 1rem;
   padding-left: 0.5rem;
 }
+.widget-list li strong {
+  font-weight: 700;
+}
 .widget-download {
   margin: 0.25rem 0;
 }
diff --git a/README.md b/README.md
index f7b7596a..a7e8d32c 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 **Libation** is a free, open-source application for downloading and managing your Audible audiobooks. It decrypts your library, removes DRM, and lets you own your audiobooks forever.
 
-> **[Which version should I download?](https://getlibation.com)** — get a recommended download for your system on our site.
+> <img src=".github/download-icon.svg" width="20" height="20" alt="" /> **[Which version should I download?](https://getlibation.com)** — get a recommended download for your system on our site.
 
 ## Features