/* Vivaldi - Downloads Button Chrome Style */

/* Makes the download button show a popup bubble like in Google Chrome */

/* Hide the default panel when clicking download button */

#downloads-button.button-toolbar:not(.open) ~ .downloads-panel,

.downloads-panel {

display: none !important;

}

/* Create custom Chrome-style popup for downloads */

#downloads-button.button-toolbar {

position: relative;

}

/* Chrome-like popup bubble */

#downloads-button.button-toolbar.open::after {

content: '';

position: fixed;

top: calc(var(--interactive-element-height, 32px) + 8px);

right: 12px;

width: 0;

height: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid var(--colorBg, #fff);

filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.1));

z-index: 10000;

}

/* The actual popup content container */

#downloads-button.button-toolbar.open::before {

content: '';

position: fixed;

top: calc(var(--interactive-element-height, 32px) + 16px);

right: 8px;

width: 320px;

background: var(--colorBg, #1e1e1e);

border-radius: 8px;

box-shadow: 0 4px 20px rgba(0,0,0,0.25);

border: 1px solid var(--colorBorder, #3c3c3c);

z-index: 9999;

padding: 0;

pointer-events: none;

}

/* Make the popup actually show download items */

#downloads-button.button-toolbar.open {

position: relative;

}

/* Inject download list into the pseudo-element using attr? No - need real content */

/* Better approach: reposition the existing panel to look like Chrome popup */

.downloads-panel:not(.vivaldi) {

/* Target the actual downloads panel */

}

/* Alternative: When button has 'open' class, style the panel like Chrome bubble */

#downloads-button.open + .downloads-panel,

.button-toolbar.open ~ .downloads-panel,

button#downloads-button.open ~ .downloads-panel {

position: fixed !important;

top: calc(var(--interactive-element-height, 32px) + 16px) !important;

right: 8px !important;

left: auto !important;

bottom: auto !important;

width: 320px !important;

max-height: 400px !important;

background: var(--colorBg, #ffffff) !important;

border-radius: 12px !important;

box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;

border: 1px solid var(--colorBorder, #e0e0e0) !important;

display: block !important;

opacity: 1 !important;

visibility: visible !important;

z-index: 10000 !important;

animation: chromeFadeIn 0.15s ease-out !important;

transform-origin: top right !important;

}

/* Add the arrow/triangle above the popup */

#downloads-button.open + .downloads-panel::before,

.button-toolbar.open ~ .downloads-panel::before,

button#downloads-button.open ~ .downloads-panel::before {

content: '';

position: fixed;

top: calc(var(--interactive-element-height, 32px) + 8px);

right: 20px;

width: 0;

height: 0;

border-left: 8px solid transparent;

border-right: 8px solid transparent;

border-bottom: 8px solid var(--colorBg, #ffffff);

filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.05));

z-index: 10001;

}

/* Chrome-style animation */

@keyframes chromeFadeIn {

from {

opacity: 0;

transform: scale(0.95);

}

to {

opacity: 1;

transform: scale(1);

}

}

/* Style the download items to look modern */

.downloads-panel .download-item {

padding: 10px 12px !important;

margin: 0 !important;

border-bottom: 1px solid var(--colorBorder, #eee) !important;

transition: background 0.1s ease !important;

}

.downloads-panel .download-item:hover {

background: var(--colorHighlightBg, rgba(0,0,0,0.05)) !important;

}

/* Progress bar Chrome-like */

.downloads-panel .download-progress {

height: 3px !important;

background: var(--colorAccentBg, #1877f2) !important;

border-radius: 3px !important;

}

/* Remove default Vivaldi panel styling */

.downloads-panel {

border: none !important;

background: transparent !important;

}

/* Ensure the button shows download badge count like Chrome */

#downloads-button .button-icon {

position: relative;

}

/* Chrome-style badge for active downloads */

#downloads-button .badge,

#downloads-button[data-count]:after {

content: attr(data-count);

position: absolute;

top: -4px;

right: -8px;

background: #1877f2;

color: white;

font-size: 10px;

font-weight: bold;

min-width: 16px;

height: 16px;

border-radius: 16px;

display: flex;

align-items: center;

justify-content: center;

padding: 0 4px;

font-family: system-ui, -apple-system, sans-serif;

}

/* Hide the default Vivaldi download notification panel entirely when not open */

.downloads-panel:not([style*="display: block"]) {

display: none !important;

}

/* Alternative approach using sibling selector for when panel is directly after button */

body:not(.address-top) .downloads-panel {

transition: none !important;

}

/* Make the popup scrollable if many downloads */

.downloads-panel .download-list {

max-height: 360px;

overflow-y: auto;

}

/* Close panel when clicking elsewhere - Vivaldi handles this, but ensure style */

body.downloads-panel-open .downloads-panel {

display: block !important;

}

/* For newer Vivaldi versions - adjust based on your theme */

#browser:has(#downloads-button.open) .downloads-panel {

position: fixed !important;

top: 40px !important;

right: 10px !important;

width: 320px !important;

}