Merge pull request #1655 from rmcrackan/rmcrackan/widget-styling

#1652 - edit widget styling

.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>

.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;
 }

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