diff --git a/src/web/styles/main.css b/src/web/styles/main.css index 5bf1dd1..1ef65f5 100644 --- a/src/web/styles/main.css +++ b/src/web/styles/main.css @@ -2010,37 +2010,36 @@ body { /* Browser row layout */ .browser-row { display: flex; - flex-wrap: wrap; + flex-direction: column; gap: 8px; - align-items: center; } .browser-row .collection-buttons { margin-bottom: 0; } -/* Link buttons (compact, next to collection buttons) */ +/* Link buttons (same style as collection buttons) */ .link-buttons { display: flex; flex-wrap: wrap; - gap: 6px; + gap: 8px; } .link-btn { display: inline-flex; align-items: center; - gap: 4px; - padding: 5px 10px; - border-radius: 6px; + gap: 6px; + padding: 6px 12px; + background: #f5f5f5; + border-radius: 20px; text-decoration: none; - color: #fff; - font-size: 12px; - transition: opacity 0.2s, transform 0.2s; + color: #333; + font-size: 13px; + transition: background 0.2s; } .link-btn:hover { - opacity: 0.9; - transform: translateY(-1px); + background: #e8e8e8; } .link-btn-icon { @@ -2055,23 +2054,6 @@ body { height: 100%; } -.link-btn-name { - font-weight: 500; -} - -/* Link button colors */ -.link-btn-github { - background: #24292e; -} - -.link-btn-x { - background: #000000; -} - -.link-btn-youtube { - background: #ff0000; -} - .no-collections, .no-records { padding: 20px; @@ -2222,6 +2204,13 @@ body { .collection-btn:hover { background: #3a3a3a; } + .link-btn { + background: #2a2a2a; + color: #e0e0e0; + } + .link-btn:hover { + background: #3a3a3a; + } .collection-item .collection-link { background: #2a2a2a; border-color: #444;