fix: z-index for menus/tooltips, sidebar dropdown, hi-res SVG icon
- Fix z-index across all menus and tooltips (10000+) to prevent overlap issues - Redesign sidebar playlist header with dropdown menu: Sort by, Refresh, Import, Manage - Add playlist tooltip on hover showing track count (lazy-loads artists) - Fix submenu navigation with delayed close for better UX - Replace hi-res PNG with SVG icon in QualityBadge - Fix scrollbar spacing (8px from window edge) in main content - Fix Svelte state_unsafe_mutation error in sidebar tooltip loading
This commit is contained in:
vicrodh committed
1 parent
f4fe4b01c9
commit
bd578d8123
8 files changed
+749
-20
No files matched your search
@@ -255,7 +255,7 @@
|
||||
border-radius: 8px;
|
||||
padding: 4px 0;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
z-index: 60;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@@ -303,6 +303,6 @@
|
||||
border-radius: 8px;
|
||||
padding: 4px 0;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
z-index: 70;
|
||||
z-index: 10001;
|
||||
}
|
||||
</style>
|
||||
@@ -112,7 +112,7 @@
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
z-index: 50;
|
||||
z-index: 10000;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -5,19 +5,54 @@
|
||||
icon: Snippet;
|
||||
label: string;
|
||||
badge?: string;
|
||||
tooltip?: string;
|
||||
active?: boolean;
|
||||
onclick?: () => void;
|
||||
onHover?: () => void;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let { icon, label, badge, active = false, onclick, class: className = '' }: Props = $props();
|
||||
let { icon, label, badge, tooltip, active = false, onclick, onHover, class: className = '' }: Props = $props();
|
||||
|
||||
let showTooltip = $state(false);
|
||||
let tooltipTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
let buttonRef: HTMLButtonElement | null = null;
|
||||
let tooltipStyle = $state('');
|
||||
|
||||
function handleMouseEnter() {
|
||||
// Call hover callback immediately (for lazy loading)
|
||||
onHover?.();
|
||||
|
||||
if (!tooltip) return;
|
||||
tooltipTimeout = setTimeout(() => {
|
||||
updateTooltipPosition();
|
||||
showTooltip = true;
|
||||
}, 500); // Delay before showing tooltip
|
||||
}
|
||||
|
||||
function handleMouseLeave() {
|
||||
if (tooltipTimeout) {
|
||||
clearTimeout(tooltipTimeout);
|
||||
tooltipTimeout = null;
|
||||
}
|
||||
showTooltip = false;
|
||||
}
|
||||
|
||||
function updateTooltipPosition() {
|
||||
if (!buttonRef) return;
|
||||
const rect = buttonRef.getBoundingClientRect();
|
||||
tooltipStyle = `left: ${rect.right + 8}px; top: ${rect.top + rect.height / 2}px; transform: translateY(-50%);`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
bind:this={buttonRef}
|
||||
{onclick}
|
||||
class="nav-item {className}"
|
||||
class:active
|
||||
title={label}
|
||||
title={tooltip ? undefined : label}
|
||||
onmouseenter={handleMouseEnter}
|
||||
onmouseleave={handleMouseLeave}
|
||||
>
|
||||
<div class="icon-container">
|
||||
{@render icon()}
|
||||
@@ -28,8 +63,15 @@
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if showTooltip && tooltip}
|
||||
<div class="custom-tooltip" style={tooltipStyle}>
|
||||
{tooltip}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.nav-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
@@ -78,4 +120,21 @@
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.custom-tooltip {
|
||||
position: fixed;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
white-space: pre-line;
|
||||
line-height: 1.5;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
z-index: 10000;
|
||||
pointer-events: none;
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
}
|
||||
</style>
|
||||
@@ -77,7 +77,7 @@
|
||||
|
||||
// Get icon path based on tier
|
||||
const iconPath = $derived.by(() => {
|
||||
if (tier === 'max' || tier === 'hires') return '/logo-hires.png';
|
||||
if (tier === 'max' || tier === 'hires') return '/hi-res.svg';
|
||||
if (tier === 'cd') return '/cd.svg';
|
||||
if (tier === 'lossy') return '/mp3.svg';
|
||||
return '/cd.svg';
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Search, Home, HardDrive, Plus, RefreshCw, ChevronDown, ChevronUp, Heart, ListMusic, Import, Settings } from 'lucide-svelte';
|
||||
import { tick } from 'svelte';
|
||||
import { Search, Home, HardDrive, Plus, RefreshCw, ChevronDown, ChevronUp, Heart, ListMusic, Import, Settings, MoreHorizontal, ArrowUpDown, ChevronRight } from 'lucide-svelte';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { onMount } from 'svelte';
|
||||
import NavigationItem from './NavigationItem.svelte';
|
||||
@@ -20,6 +21,8 @@
|
||||
play_count?: number;
|
||||
}
|
||||
|
||||
type SortOption = 'name' | 'recent' | 'tracks' | 'playcount' | 'custom';
|
||||
|
||||
interface Props {
|
||||
activeView: string;
|
||||
selectedPlaylistId?: number | null;
|
||||
@@ -56,12 +59,151 @@
|
||||
let playlistsCollapsed = $state(false);
|
||||
let localLibraryCollapsed = $state(false);
|
||||
|
||||
// Visible playlists only (hide hidden ones from sidebar)
|
||||
// Dropdown menu state
|
||||
let menuOpen = $state(false);
|
||||
let sortSubmenuOpen = $state(false);
|
||||
let submenuCloseTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
let menuRef: HTMLDivElement | null = null;
|
||||
let menuEl: HTMLDivElement | null = null;
|
||||
let triggerRef: HTMLButtonElement | null = null;
|
||||
let sortTriggerRef: HTMLDivElement | null = null;
|
||||
let submenuEl: HTMLDivElement | null = null;
|
||||
let menuStyle = $state('');
|
||||
let submenuStyle = $state('');
|
||||
|
||||
function openSubmenu() {
|
||||
if (submenuCloseTimeout) {
|
||||
clearTimeout(submenuCloseTimeout);
|
||||
submenuCloseTimeout = null;
|
||||
}
|
||||
sortSubmenuOpen = true;
|
||||
}
|
||||
|
||||
function closeSubmenuDelayed() {
|
||||
if (submenuCloseTimeout) {
|
||||
clearTimeout(submenuCloseTimeout);
|
||||
}
|
||||
submenuCloseTimeout = setTimeout(() => {
|
||||
sortSubmenuOpen = false;
|
||||
}, 150); // Small delay to allow mouse to move to submenu
|
||||
}
|
||||
|
||||
// Sort state with localStorage persistence
|
||||
let sortOption = $state<SortOption>('name');
|
||||
|
||||
// Tooltip cache for playlist artists (non-reactive for reads during render)
|
||||
const playlistTooltipCache = new Map<number, string>();
|
||||
const tooltipLoadingIds = new Set<number>();
|
||||
|
||||
// Fetch playlist artists for tooltip
|
||||
async function fetchPlaylistArtists(playlistId: number, trackCount: number): Promise<string> {
|
||||
interface PlaylistDetails {
|
||||
tracks?: {
|
||||
items: Array<{
|
||||
performer?: { name: string };
|
||||
}>;
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
const details = await invoke<PlaylistDetails>('get_playlist', { playlistId });
|
||||
if (details.tracks?.items) {
|
||||
// Extract unique artist names
|
||||
const artistNames = new Set<string>();
|
||||
for (const track of details.tracks.items) {
|
||||
if (track.performer?.name) {
|
||||
artistNames.add(track.performer.name);
|
||||
if (artistNames.size >= 5) break;
|
||||
}
|
||||
}
|
||||
|
||||
const artists = Array.from(artistNames).slice(0, 5);
|
||||
const songText = `${trackCount} ${trackCount === 1 ? 'Song' : 'Songs'}`;
|
||||
|
||||
if (artists.length > 0) {
|
||||
return `${artists.join('\n')}\n${songText}`;
|
||||
}
|
||||
return songText;
|
||||
}
|
||||
} catch (err) {
|
||||
console.debug('Failed to fetch playlist artists:', err);
|
||||
}
|
||||
|
||||
return `${trackCount} ${trackCount === 1 ? 'Song' : 'Songs'}`;
|
||||
}
|
||||
|
||||
// Get basic tooltip (no state mutation during render)
|
||||
function getPlaylistTooltip(playlist: Playlist): string {
|
||||
const cached = playlistTooltipCache.get(playlist.id);
|
||||
if (cached) return cached;
|
||||
|
||||
// Return basic tooltip - fetch will happen on hover
|
||||
return `${playlist.tracks_count} ${playlist.tracks_count === 1 ? 'Song' : 'Songs'}`;
|
||||
}
|
||||
|
||||
// Load artist info for tooltip (called on hover, not during render)
|
||||
function loadPlaylistTooltip(playlist: Playlist) {
|
||||
if (playlistTooltipCache.has(playlist.id) || tooltipLoadingIds.has(playlist.id)) return;
|
||||
|
||||
tooltipLoadingIds.add(playlist.id);
|
||||
|
||||
fetchPlaylistArtists(playlist.id, playlist.tracks_count).then(tooltip => {
|
||||
playlistTooltipCache.set(playlist.id, tooltip);
|
||||
tooltipLoadingIds.delete(playlist.id);
|
||||
});
|
||||
}
|
||||
|
||||
// Load sort preference from localStorage
|
||||
function loadSortPreference() {
|
||||
try {
|
||||
const saved = localStorage.getItem('sidebar-playlist-sort');
|
||||
if (saved && ['name', 'recent', 'tracks', 'playcount', 'custom'].includes(saved)) {
|
||||
sortOption = saved as SortOption;
|
||||
}
|
||||
} catch (e) {
|
||||
// localStorage not available
|
||||
}
|
||||
}
|
||||
|
||||
function saveSortPreference(option: SortOption) {
|
||||
try {
|
||||
localStorage.setItem('sidebar-playlist-sort', option);
|
||||
} catch (e) {
|
||||
// localStorage not available
|
||||
}
|
||||
}
|
||||
|
||||
// Visible and sorted playlists
|
||||
const visiblePlaylists = $derived.by(() => {
|
||||
return userPlaylists.filter(p => {
|
||||
const visible = userPlaylists.filter(p => {
|
||||
const settings = playlistSettings.get(p.id);
|
||||
return !settings?.hidden;
|
||||
});
|
||||
|
||||
// Sort based on selected option
|
||||
return [...visible].sort((a, b) => {
|
||||
switch (sortOption) {
|
||||
case 'name':
|
||||
return a.name.localeCompare(b.name);
|
||||
case 'recent':
|
||||
// For now, use reverse order (most recently added first)
|
||||
return userPlaylists.indexOf(b) - userPlaylists.indexOf(a);
|
||||
case 'tracks':
|
||||
return b.tracks_count - a.tracks_count;
|
||||
case 'playcount': {
|
||||
const aCount = playlistSettings.get(a.id)?.play_count ?? 0;
|
||||
const bCount = playlistSettings.get(b.id)?.play_count ?? 0;
|
||||
return bCount - aCount;
|
||||
}
|
||||
case 'custom': {
|
||||
const aPos = playlistSettings.get(a.id)?.position ?? 9999;
|
||||
const bPos = playlistSettings.get(b.id)?.position ?? 9999;
|
||||
return aPos - bPos;
|
||||
}
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Expose playlists to parent via binding
|
||||
@@ -73,7 +215,107 @@
|
||||
loadUserPlaylists();
|
||||
}
|
||||
|
||||
// Menu handling functions
|
||||
function closeMenu() {
|
||||
menuOpen = false;
|
||||
sortSubmenuOpen = false;
|
||||
if (submenuCloseTimeout) {
|
||||
clearTimeout(submenuCloseTimeout);
|
||||
submenuCloseTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (menuRef && !menuRef.contains(event.target as Node)) {
|
||||
closeMenu();
|
||||
}
|
||||
}
|
||||
|
||||
async function setMenuPosition() {
|
||||
await tick();
|
||||
if (!triggerRef || !menuEl) return;
|
||||
|
||||
const triggerRect = triggerRef.getBoundingClientRect();
|
||||
const menuRect = menuEl.getBoundingClientRect();
|
||||
const padding = 8;
|
||||
|
||||
let left = triggerRect.left;
|
||||
let top = triggerRect.bottom + 6;
|
||||
|
||||
// Keep menu within bounds
|
||||
if (left + menuRect.width > window.innerWidth - padding) {
|
||||
left = Math.max(padding, window.innerWidth - menuRect.width - padding);
|
||||
}
|
||||
|
||||
if (top + menuRect.height > window.innerHeight - padding) {
|
||||
top = triggerRect.top - menuRect.height - 6;
|
||||
if (top < padding) top = padding;
|
||||
}
|
||||
|
||||
menuStyle = `left: ${left}px; top: ${top}px;`;
|
||||
}
|
||||
|
||||
async function setSubmenuPosition() {
|
||||
await tick();
|
||||
if (!sortTriggerRef || !submenuEl) return;
|
||||
|
||||
const triggerRect = sortTriggerRef.getBoundingClientRect();
|
||||
const submenuRect = submenuEl.getBoundingClientRect();
|
||||
const padding = 8;
|
||||
|
||||
// Try to position to the right of the trigger
|
||||
let left = triggerRect.right + 4;
|
||||
let top = triggerRect.top;
|
||||
|
||||
// If not enough space on right, position to left
|
||||
if (left + submenuRect.width > window.innerWidth - padding) {
|
||||
left = triggerRect.left - submenuRect.width - 4;
|
||||
}
|
||||
|
||||
// Keep within vertical bounds
|
||||
if (top + submenuRect.height > window.innerHeight - padding) {
|
||||
top = Math.max(padding, window.innerHeight - submenuRect.height - padding);
|
||||
}
|
||||
|
||||
submenuStyle = `left: ${left}px; top: ${top}px;`;
|
||||
}
|
||||
|
||||
async function toggleMenu() {
|
||||
if (menuOpen) {
|
||||
closeMenu();
|
||||
} else {
|
||||
menuOpen = true;
|
||||
await setMenuPosition();
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSortChange(option: SortOption) {
|
||||
sortOption = option;
|
||||
saveSortPreference(option);
|
||||
closeMenu();
|
||||
}
|
||||
|
||||
function handleMenuAction(action: () => void) {
|
||||
action();
|
||||
closeMenu();
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (!menuOpen) {
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
sortSubmenuOpen = false;
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (sortSubmenuOpen) {
|
||||
setSubmenuPosition();
|
||||
}
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
loadSortPreference();
|
||||
loadUserPlaylists();
|
||||
loadPlaylistSettings();
|
||||
});
|
||||
@@ -157,18 +399,17 @@
|
||||
<div class="section playlists-section">
|
||||
<div class="playlists-header">
|
||||
<div class="section-header">Playlists</div>
|
||||
<div class="header-actions">
|
||||
<div class="header-actions" bind:this={menuRef}>
|
||||
<button class="icon-btn" onclick={onCreatePlaylist} title="New playlist">
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
<button class="icon-btn" onclick={onImportPlaylist} title="Import playlist">
|
||||
<Import size={14} />
|
||||
</button>
|
||||
<button class="icon-btn" onclick={onPlaylistManagerClick} title="Manage playlists">
|
||||
<Settings size={14} />
|
||||
</button>
|
||||
<button class="icon-btn" onclick={loadUserPlaylists} title="Refresh playlists">
|
||||
<RefreshCw size={14} />
|
||||
<button
|
||||
class="icon-btn"
|
||||
bind:this={triggerRef}
|
||||
onclick={(e) => { e.stopPropagation(); toggleMenu(); }}
|
||||
title="Options"
|
||||
>
|
||||
<MoreHorizontal size={14} />
|
||||
</button>
|
||||
<button class="icon-btn" onclick={() => playlistsCollapsed = !playlistsCollapsed} title={playlistsCollapsed ? "Expand" : "Collapse"}>
|
||||
{#if playlistsCollapsed}
|
||||
@@ -180,6 +421,69 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Menu -->
|
||||
{#if menuOpen}
|
||||
<div class="dropdown-menu" bind:this={menuEl} style={menuStyle}>
|
||||
<!-- Sort by submenu trigger -->
|
||||
<div
|
||||
class="menu-item has-submenu"
|
||||
bind:this={sortTriggerRef}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onmouseenter={openSubmenu}
|
||||
onmouseleave={closeSubmenuDelayed}
|
||||
>
|
||||
<ArrowUpDown size={14} />
|
||||
<span class="menu-label">Sort by</span>
|
||||
<ChevronRight size={14} class="submenu-arrow" />
|
||||
</div>
|
||||
|
||||
<!-- Sort submenu (positioned outside trigger for better hover handling) -->
|
||||
{#if sortSubmenuOpen}
|
||||
<div
|
||||
class="submenu"
|
||||
bind:this={submenuEl}
|
||||
style={submenuStyle}
|
||||
onmouseenter={openSubmenu}
|
||||
onmouseleave={closeSubmenuDelayed}
|
||||
>
|
||||
<button class="menu-item" class:selected={sortOption === 'name'} onclick={() => handleSortChange('name')}>
|
||||
Name (A-Z)
|
||||
</button>
|
||||
<button class="menu-item" class:selected={sortOption === 'recent'} onclick={() => handleSortChange('recent')}>
|
||||
Recent
|
||||
</button>
|
||||
<button class="menu-item" class:selected={sortOption === 'tracks'} onclick={() => handleSortChange('tracks')}>
|
||||
# of Tracks
|
||||
</button>
|
||||
<button class="menu-item" class:selected={sortOption === 'playcount'} onclick={() => handleSortChange('playcount')}>
|
||||
Play Count
|
||||
</button>
|
||||
<button class="menu-item" class:selected={sortOption === 'custom'} onclick={() => handleSortChange('custom')}>
|
||||
Custom
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button class="menu-item" onclick={() => handleMenuAction(loadUserPlaylists)}>
|
||||
<RefreshCw size={14} />
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
|
||||
<button class="menu-item" onclick={() => handleMenuAction(onImportPlaylist ?? (() => {}))}>
|
||||
<Import size={14} />
|
||||
<span>Import</span>
|
||||
</button>
|
||||
|
||||
<div class="menu-divider"></div>
|
||||
|
||||
<button class="menu-item" onclick={() => handleMenuAction(onPlaylistManagerClick ?? (() => {}))}>
|
||||
<Settings size={14} />
|
||||
<span>Manage playlists</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if !playlistsCollapsed}
|
||||
{#if playlistsLoading}
|
||||
<div class="playlists-loading">Loading...</div>
|
||||
@@ -188,8 +492,10 @@
|
||||
{#each visiblePlaylists as playlist (playlist.id)}
|
||||
<NavigationItem
|
||||
label={playlist.name}
|
||||
tooltip={getPlaylistTooltip(playlist)}
|
||||
active={activeView === 'playlist' && selectedPlaylistId === playlist.id}
|
||||
onclick={() => handlePlaylistClick(playlist)}
|
||||
onHover={() => loadPlaylistTooltip(playlist)}
|
||||
>
|
||||
{#snippet icon()}<ListMusic size={14} />{/snippet}
|
||||
</NavigationItem>
|
||||
@@ -391,4 +697,74 @@
|
||||
border-top: 1px solid var(--bg-tertiary);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* Dropdown menu styles */
|
||||
.dropdown-menu {
|
||||
position: fixed;
|
||||
min-width: 180px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background-color 150ms ease, color 150ms ease;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.menu-item.selected {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.menu-item.has-submenu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-item .menu-label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-item .submenu-arrow {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
height: 1px;
|
||||
background: var(--bg-tertiary);
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.submenu {
|
||||
position: fixed;
|
||||
min-width: 140px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
.submenu .menu-item {
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -302,7 +302,7 @@
|
||||
border-radius: 8px;
|
||||
padding: 4px 0;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
z-index: 60;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@@ -350,6 +350,6 @@
|
||||
border-radius: 8px;
|
||||
padding: 4px 0;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
z-index: 70;
|
||||
z-index: 10001;
|
||||
}
|
||||
</style>
|
||||
@@ -1603,6 +1603,7 @@
|
||||
min-width: 0;
|
||||
height: calc(100vh - 136px); /* 104px NowPlayingBar + 32px TitleBar */
|
||||
overflow: hidden; /* Views handle their own scrolling */
|
||||
padding-right: 8px; /* Gap between scrollbar and window edge */
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,293 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48.4249878 48.4255981" style="enable-background:new 0 0 48.4249878 48.4255981;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{display:none;}
|
||||
.st1{display:inline;fill:#FFFFFF;}
|
||||
.st2{display:inline;}
|
||||
.st3{fill:#FFFFFF;}
|
||||
.st4{clip-path:url(#SVGID_2_);fill:url(#SVGID_3_);}
|
||||
.st5{clip-path:url(#SVGID_5_);fill:url(#SVGID_6_);}
|
||||
.st6{clip-path:url(#SVGID_8_);fill:url(#SVGID_9_);}
|
||||
.st7{fill:#6A4018;}
|
||||
.st8{clip-path:url(#SVGID_11_);fill:url(#SVGID_12_);}
|
||||
.st9{clip-path:url(#SVGID_14_);fill:url(#SVGID_15_);}
|
||||
.st10{clip-path:url(#SVGID_17_);fill:url(#SVGID_18_);}
|
||||
.st11{clip-path:url(#SVGID_20_);fill:url(#SVGID_21_);}
|
||||
</style>
|
||||
<g class="st0">
|
||||
<polygon class="st1" points="48.4248047,60.5088501 0.0097961,60.5368652 0.0097961,48.4248657 48.4248047,48.4248657 "/>
|
||||
<polygon class="st2" points="48.4248047,60.5088501 0.0097961,60.5368652 0.0097961,48.4248657 48.4248047,48.4248657 "/>
|
||||
<g class="st2">
|
||||
<polygon class="st3" points="7.6476746,51.9105225 7.6136475,51.9105225 6.7856445,57.621582 5.0166626,57.621582
|
||||
3.9126587,50.6075439 5.3036499,50.6075439 5.9666443,56.0345459 5.9856567,56.0345459 6.732666,50.6075439 8.5496521,50.6075439
|
||||
9.2836609,56.0345459 9.2916565,56.0345459 9.956665,50.6075439 11.3336182,50.6075439 10.2156677,57.621582 8.4226685,57.621582
|
||||
"/>
|
||||
<rect x="12.6079712" y="50.6080322" class="st3" width="1.2849731" height="7.0139771"/>
|
||||
<path class="st3" d="M15.5543823,50.6078491h2.2130127c1.0039673,0,2.0079956,0.4530029,2.0079956,1.8979492
|
||||
c0,0.848999-0.4020386,1.3780518-0.9780273,1.6280518v0.0239868c0.3590088,0.157959,0.4960327,0.4110107,0.6940308,1.2600098
|
||||
c0.1859741,0.7559814,0.3330078,1.4419556,0.5,2.2039795h-1.3650513c-0.098999-0.5310059-0.2679443-1.401001-0.3839722-1.8369751
|
||||
c-0.1599731-0.7560425-0.3480225-1.0090332-1.0029907-1.0090332h-0.3759766v2.8460083h-1.309021V50.6078491z
|
||||
M16.8634033,53.6517944h0.6089478c0.5230103,0,1.0020142-0.2289429,1.0020142-0.9639893
|
||||
c0-0.7769775-0.5219727-0.9379883-1.0529785-0.9379883h-0.5579834V53.6517944z"/>
|
||||
<polygon class="st3" points="21.3668823,50.607605 24.7418823,50.607605 24.7418823,51.7496338 22.6618652,51.7496338
|
||||
22.6618652,53.4726563 24.5788574,53.4726563 24.5788574,54.5906372 22.6618652,54.6176147 22.6618652,56.4736328
|
||||
24.8438721,56.4736328 24.8438721,57.6216431 21.3668823,57.6216431 "/>
|
||||
<polygon class="st3" points="26.3867188,50.607605 27.6746826,50.607605 27.6746826,56.4736328 29.8087158,56.4736328
|
||||
29.8087158,57.6216431 26.3867188,57.6216431 "/>
|
||||
<polygon class="st3" points="31.2047119,50.607605 34.5976563,50.607605 34.5976563,51.7496338 32.5136719,51.7496338
|
||||
32.5136719,53.4726563 34.4146729,53.4726563 34.4146729,54.5906372 32.5136719,54.5906372 32.5136719,56.4736328
|
||||
34.6676636,56.4736328 34.6676636,57.6216431 31.2047119,57.6216431 "/>
|
||||
<path class="st3" d="M39.250061,51.8395996c-0.3650513-0.1329956-0.6610107-0.2039795-1.0570068-0.2039795
|
||||
c-0.4570313,0-0.9250488,0.2039795-0.9250488,0.7780151c0,0.4169922,0.2280273,0.6419678,0.9380493,1.0780029
|
||||
c0.9759521,0.5739746,1.6300049,1.0119629,1.6300049,2.2009888c0,1.3980103-1.052002,2.0440063-2.257019,2.0440063
|
||||
c-0.507019,0-1.1240234-0.0960083-1.6170044-0.2750244l0.2630005-1.1479492
|
||||
c0.4680176,0.1849976,0.9039917,0.2709961,1.3289795,0.2709961c0.5910034,0,0.9910278-0.2709961,0.9910278-0.8210449
|
||||
c0-0.506958-0.3569946-0.8029785-1.0579834-1.2160034c-0.8950195-0.4819946-1.4980469-1.0310059-1.4980469-2.0629883
|
||||
c0-1.4909668,1.0830078-1.9940186,2.1360474-1.9940186c0.5219727,0,0.9919434,0.0680542,1.3839722,0.2030029L39.250061,51.8395996
|
||||
z"/>
|
||||
<path class="st3" d="M44.0172119,51.8395996c-0.3500366-0.1329956-0.6590576-0.2039795-1.0510254-0.2039795
|
||||
c-0.4570313,0-0.9260254,0.2039795-0.9260254,0.7559814c0,0.4390259,0.2290039,0.6640015,0.9520264,1.1000366
|
||||
c0.9649658,0.5739746,1.5889893,1.0119629,1.5889893,2.2009888c0,1.3980103-1.039978,2.0440063-2.2529907,2.0440063
|
||||
c-0.4910278,0-1.1019897-0.0960083-1.5839844-0.2750244l0.2749634-1.1479492
|
||||
c0.4390259,0.1849976,0.8920288,0.2709961,1.309021,0.2709961c0.5709839,0,0.9819946-0.2709961,0.9819946-0.8210449
|
||||
c0-0.506958-0.3439941-0.8029785-1.065979-1.2160034c-0.901001-0.4819946-1.5-1.0310059-1.5-2.0629883
|
||||
c0-1.4909668,1.0929565-1.9940186,2.1389771-1.9940186c0.5219727,0,1.0159912,0.0680542,1.3930054,0.2030029
|
||||
L44.0172119,51.8395996z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M41.7749634,14.1011963c-1.2600098-0.5539551-1.6170044-0.8739624-1.6170044-1.5819702
|
||||
c0-0.9199829,0.7649536-1.2579956,1.5019531-1.2579956c0.6420288,0,1.4120483,0.177002,2.06604,0.4309692l0.401001-1.6709595
|
||||
c-0.6900024-0.3010254-1.5610352-0.4840088-2.5370483-0.4840088c-1.6729736,0-3.4299927,0.9379883-3.4299927,3.0750122
|
||||
c0,1.5319824,0.94104,2.3599854,2.5840454,3.0949707c1.2630005,0.592041,1.7909546,1.007019,1.7909546,1.809021
|
||||
c0,0.8930054-0.6679688,1.2359619-1.5539551,1.2359619c-0.7740479,0-1.6670532-0.1799927-2.5310059-0.5459595l-0.3920288,1.7160034
|
||||
c0.8710327,0.3460083,1.9949951,0.5509644,2.9230347,0.5509644c1.6900024,0,3.5479736-0.8009644,3.5479736-3.0709839
|
||||
C44.5289307,15.6342163,43.4369507,14.8822021,41.7749634,14.1011963"/>
|
||||
<path d="M33.770813,9.5367432c-2.6090088,0-3.9619751,2.4330444-3.9619751,5.5050049
|
||||
c0,3.1640015,1.5310059,5.4320068,4.5939941,5.4320068c0.8619995,0,1.6459961-0.1589966,2.1539917-0.3659668l-0.242981-1.651001
|
||||
c-0.5709839,0.2059937-1.1790161,0.2959595-1.809021,0.2959595c-1.6209717,0-2.6350098-1.0749512-2.7449951-3.09198h5.572998
|
||||
v-0.8709717C37.3328247,11.6497803,36.3718262,9.5367432,33.770813,9.5367432 M35.4588623,14.0057373h-3.6990356
|
||||
c0.1359863-1.5789795,0.7160034-2.8409424,1.9920044-2.8409424c1.1779785,0,1.7070313,1.1709595,1.7070313,2.7529907V14.0057373z"
|
||||
/>
|
||||
<path d="M26.9191284,13.7351685v-0.026001c1.1640015-0.4550171,1.8520508-1.559021,1.8520508-3.1409912
|
||||
c0-2.6340332-1.5890503-3.6229858-3.4370117-3.6229858l-3.848999,0.0229492v13.4620361h1.8460083v-5.7349854h1.1459961
|
||||
c1.3859863,0,1.7039795,0.4609985,2.0369873,2.0199585c0.1950073,0.8699951,0.5529785,2.6799927,0.7420044,3.7150269h2.0219727
|
||||
c-0.3410034-1.4700317-0.617981-2.7520142-0.9389648-4.197998C27.9751587,14.6031494,27.663147,14.0061646,26.9191284,13.7351685
|
||||
M24.8101807,12.8851318h-1.4790039V8.736145h1.5379639c1.0050049,0,2.0250244,0.342041,2.0250244,2.0629883
|
||||
C26.894165,12.335144,26.0111694,12.8851318,24.8101807,12.8851318"/>
|
||||
<rect x="17.7680054" y="12.6350098" width="2.1149902" height="2.0369873"/>
|
||||
<rect x="14.2819824" y="6.9680176" width="1.8839722" height="1.9249878"/>
|
||||
<rect x="14.2730103" y="10.7529907" width="1.8770142" height="9.677002"/>
|
||||
<polygon points="10.364502,12.6348267 6.1434937,12.6348267 6.1434937,6.9678345 4.2354736,6.9678345 4.2354736,20.4308472
|
||||
6.1434937,20.4308472 6.1434937,14.4208374 10.364502,14.4208374 10.364502,20.4308472 12.2524414,20.4308472
|
||||
12.2524414,6.9678345 10.364502,6.9678345 "/>
|
||||
<path d="M24.2147217,29.095459c-8.0780029,0-15.7089539-1.992981-22.4049683-5.5v23.0170288l44.8029785-0.0250244V23.595459
|
||||
C39.916748,27.102478,32.2977295,29.095459,24.2147217,29.095459 M10.17276,42.3274536l-0.7160034-2.2049561H6.3267517
|
||||
l-0.7089844,2.2049561H3.8527527l2.9330139-9.0119629h2.269989l2.8990173,9.0119629H10.17276z M20.2657471,39.6624756
|
||||
c0,1.8380127-1.3859863,2.8259888-3.2579956,2.8259888c-1.8430176,0-3.2410278-0.9879761-3.2410278-2.8259888v-6.3469849h1.6660156
|
||||
V39.4375c0,1.1029663,0.6610107,1.5559692,1.565979,1.5559692c0.9050293,0,1.6060181-0.4810181,1.6060181-1.5559692v-6.1220093
|
||||
h1.6610107V39.6624756z M25.8157349,42.3274536h-2.7529907v-9.0119629h2.7529907
|
||||
c2.6600342,0,4.1010132,1.697998,4.1010132,4.4679565C29.916748,40.5614624,28.475769,42.3274536,25.8157349,42.3274536
|
||||
M34.1607666,42.3274536h-1.6470337v-9.0119629h1.6470337V42.3274536z M40.5587769,42.4634399
|
||||
c-2.434021,0-3.7790527-1.9229736-3.7790527-4.6309814s1.3270264-4.6799927,3.7790527-4.6799927
|
||||
c2.506958,0,3.8199463,1.9719849,3.8199463,4.6799927S43.0377197,42.4634399,40.5587769,42.4634399"/>
|
||||
<polygon points="6.7034912,38.6351318 9.055481,38.6351318 7.8884888,34.7351685 "/>
|
||||
<path d="M25.585083,34.7817993h-0.8700562v6.0510254h0.8700562c1.8469849,0,2.6709595-1.1879883,2.6709595-3.0250244
|
||||
C28.2560425,35.9988403,27.4320679,34.7817993,25.585083,34.7817993"/>
|
||||
<path d="M40.5587769,34.6429443c-1.4580078,0-2.1360474,1.4020386-2.1360474,3.1890259
|
||||
c0,1.7659912,0.6950073,3.1619873,2.1700439,3.1619873c1.4909668,0,2.1459961-1.3959961,2.1459961-3.1619873
|
||||
C42.7387695,36.0449829,42.0497437,34.6429443,40.5587769,34.6429443"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<polygon id="SVGID_1_" points="0,0 0.2749939,0.2750244 48.1409912,0.2750244 48.4249878,0 "/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-276.0588379" y1="452.5148621" x2="-275.0588074" y2="452.5148621" gradientTransform="matrix(48.4245529 -0.0025294 0.0025294 48.4245529 13366.8808594 -21913.3886719)">
|
||||
<stop offset="0" style="stop-color:#DDC77C"/>
|
||||
<stop offset="1" style="stop-color:#B4802C"/>
|
||||
</linearGradient>
|
||||
<rect x="-0.0000306" y="-0.0012512" class="st4" width="48.4249878" height="0.2774963"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_4_" d="M24.2139893,28.4770508c-8.0770264,0-15.7080078-1.9720459-22.4039917-5.4820557v0.6000366
|
||||
c6.6959839,3.507019,14.3269653,5.5,22.4039917,5.5c8.0830078,0,15.7030029-1.992981,22.3989868-5.5v-0.6000366
|
||||
C39.9169922,26.5050049,32.2969971,28.4770508,24.2139893,28.4770508"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_5_">
|
||||
<use xlink:href="#SVGID_4_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-276.4433289" y1="453.0949707" x2="-275.4433289" y2="453.0949707" gradientTransform="matrix(44.8038025 -0.0023356 0.0023356 44.8038025 12386.4638672 -20274.9785156)">
|
||||
<stop offset="0" style="stop-color:#472613"/>
|
||||
<stop offset="0.0408205" style="stop-color:#5C3A1A"/>
|
||||
<stop offset="0.0949331" style="stop-color:#704F21"/>
|
||||
<stop offset="0.1483985" style="stop-color:#7D5B25"/>
|
||||
<stop offset="0.2" style="stop-color:#815F26"/>
|
||||
<stop offset="0.2510605" style="stop-color:#8A6527"/>
|
||||
<stop offset="0.3343309" style="stop-color:#A2752A"/>
|
||||
<stop offset="0.438834" style="stop-color:#CA8F30"/>
|
||||
<stop offset="0.5" style="stop-color:#E4A133"/>
|
||||
<stop offset="0.5320022" style="stop-color:#E8A73C"/>
|
||||
<stop offset="0.584035" style="stop-color:#F4B754"/>
|
||||
<stop offset="0.6" style="stop-color:#F8BD5D"/>
|
||||
<stop offset="0.6378715" style="stop-color:#EFB659"/>
|
||||
<stop offset="0.6996277" style="stop-color:#D7A34E"/>
|
||||
<stop offset="0.777076" style="stop-color:#AF843B"/>
|
||||
<stop offset="0.85" style="stop-color:#846227"/>
|
||||
<stop offset="0.8968558" style="stop-color:#815E26"/>
|
||||
<stop offset="0.9453847" style="stop-color:#7A5123"/>
|
||||
<stop offset="0.9945391" style="stop-color:#6D3D1E"/>
|
||||
<stop offset="1" style="stop-color:#6B3A1D"/>
|
||||
</linearGradient>
|
||||
<rect x="1.8097992" y="22.993866" class="st5" width="44.803299" height="6.1023865"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<polygon id="SVGID_7_" points="0,0 0.0090027,48.4250488 48.4249878,48.4250488 48.4249878,0 "/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_8_">
|
||||
<use xlink:href="#SVGID_7_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-266.1282043" y1="453.7897644" x2="-265.1282043" y2="453.7897644" gradientTransform="matrix(17.786274 38.1375618 -38.1375618 17.786274 22052.6953125 2078.0583496)">
|
||||
<stop offset="0" style="stop-color:#F9E1B4"/>
|
||||
<stop offset="0.2" style="stop-color:#FAD37E"/>
|
||||
<stop offset="0.6" style="stop-color:#F6A936"/>
|
||||
<stop offset="0.7426466" style="stop-color:#DF9430"/>
|
||||
<stop offset="0.8883532" style="stop-color:#CF852C"/>
|
||||
<stop offset="1" style="stop-color:#C9802A"/>
|
||||
</linearGradient>
|
||||
<polygon class="st6" points="-18.5495605,8.6509399 8.6509094,66.9746094 66.9744873,39.7741089 39.7739868,-18.5494995 "/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M41.7749634,14.1011963c-1.2600098-0.5539551-1.6170044-0.8739624-1.6170044-1.5819702
|
||||
c0-0.9199829,0.7649536-1.2579956,1.5019531-1.2579956c0.6420288,0,1.4120483,0.177002,2.06604,0.4309692l0.401001-1.6709595
|
||||
c-0.6900024-0.3010254-1.5610352-0.4840088-2.5370483-0.4840088c-1.6729736,0-3.4299927,0.9379883-3.4299927,3.0750122
|
||||
c0,1.5319824,0.94104,2.3599854,2.5840454,3.0949707c1.2630005,0.5690308,1.7909546,1.007019,1.7909546,1.809021
|
||||
c0,0.8930054-0.6679688,1.2359619-1.5539551,1.2359619c-0.7740479,0-1.6670532-0.1799927-2.5310059-0.5459595l-0.3920288,1.7160034
|
||||
c0.8710327,0.3460083,1.9949951,0.5509644,2.9230347,0.5509644c1.6900024,0,3.5479736-0.8009644,3.5479736-3.0709839
|
||||
C44.5289307,15.6342163,43.4369507,14.8822021,41.7749634,14.1011963"/>
|
||||
<path d="M33.770813,9.5367432c-2.6090088,0-3.9619751,2.4330444-3.9619751,5.5050049
|
||||
c0,3.1640015,1.5310059,5.4320068,4.5939941,5.4320068c0.8619995,0,1.6459961-0.1589966,2.1539917-0.3659668l-0.242981-1.651001
|
||||
c-0.5709839,0.2059937-1.1790161,0.2959595-1.809021,0.2959595c-1.6209717,0-2.6350098-1.0749512-2.7449951-3.09198h5.572998
|
||||
v-0.8709717C37.3328247,11.6497803,36.3718262,9.5367432,33.770813,9.5367432 M35.4588623,14.0057373h-3.6990356
|
||||
c0.1359863-1.5789795,0.7160034-2.8409424,1.9920044-2.8409424c1.1779785,0,1.7070313,1.1709595,1.7070313,2.7529907V14.0057373z"
|
||||
/>
|
||||
<path d="M26.9251709,13.7351685v-0.026001c1.157959-0.4550171,1.8460083-1.559021,1.8460083-3.1409912
|
||||
c0-2.6340332-1.5890503-3.6229858-3.4370117-3.6229858l-3.848999,0.0229492v13.4620361h1.8460083v-5.7349854h1.1459961
|
||||
c1.3859863,0,1.7039795,0.4609985,2.0369873,2.0199585c0.1950073,0.8699951,0.5529785,2.6799927,0.7420044,3.7150269h2.0219727
|
||||
c-0.3410034-1.4700317-0.617981-2.7520142-0.9389648-4.197998C27.9751587,14.6031494,27.663147,14.0061646,26.9251709,13.7351685
|
||||
M24.8101807,12.8851318h-1.4790039V8.736145h1.5379639c1.0050049,0,2.0250244,0.342041,2.0250244,2.0629883
|
||||
C26.894165,12.335144,26.0111694,12.8851318,24.8101807,12.8851318"/>
|
||||
<rect x="17.7680054" y="12.6350098" width="2.1149902" height="2.0369873"/>
|
||||
<rect x="14.2819824" y="6.9680176" width="1.8839722" height="1.9249878"/>
|
||||
<rect x="14.2730103" y="10.7529907" width="1.8770142" height="9.677002"/>
|
||||
<polygon points="10.364502,12.6348267 6.1434937,12.6348267 6.1434937,6.9678345 4.2354736,6.9678345 4.2354736,20.4308472
|
||||
6.1434937,20.4308472 6.1434937,14.4208374 10.364502,14.4208374 10.364502,20.4308472 12.2524414,20.4308472
|
||||
12.2524414,6.9678345 10.364502,6.9678345 "/>
|
||||
<path d="M24.2147217,29.095459c-8.0780029,0-15.7089539-1.992981-22.4049683-5.5v23.0170288l44.8029785-0.0250244V23.595459
|
||||
C39.916748,27.102478,32.2977295,29.095459,24.2147217,29.095459 M10.17276,42.3274536l-0.7160034-2.2049561H6.3267517
|
||||
l-0.7089844,2.2049561H3.8527527l2.9330139-9.0119629h2.269989l2.9139709,9.0119629H10.17276z M20.2657471,39.6624756
|
||||
c0,1.8380127-1.3859863,2.8259888-3.2579956,2.8259888c-1.8430176,0-3.2410278-0.9879761-3.2410278-2.8259888v-6.3469849h1.6660156
|
||||
V39.4375c0,1.1029663,0.6610107,1.5559692,1.565979,1.5559692c0.9050293,0,1.6060181-0.4810181,1.6060181-1.5559692v-6.1220093
|
||||
h1.6610107V39.6624756z M25.8157349,42.3274536h-2.7529907v-9.0119629h2.7529907
|
||||
c2.6600342,0,4.1010132,1.697998,4.1010132,4.4679565C29.916748,40.5614624,28.475769,42.3274536,25.8157349,42.3274536
|
||||
M34.1607666,42.3274536h-1.6470337v-9.0119629h1.6470337V42.3274536z M40.5587769,42.4634399
|
||||
c-2.434021,0-3.7790527-1.9229736-3.7790527-4.6309814s1.3270264-4.6799927,3.7790527-4.6799927
|
||||
c2.506958,0,3.8199463,1.9719849,3.8199463,4.6799927S43.0377197,42.4634399,40.5587769,42.4634399"/>
|
||||
<polygon points="6.7034912,38.6351318 9.055481,38.6351318 7.8884888,34.7351685 "/>
|
||||
<path d="M25.585083,34.7817993h-0.8700562v6.0510254h0.8700562c1.8469849,0,2.6709595-1.1879883,2.6709595-3.0250244
|
||||
C28.2560425,35.9988403,27.4320679,34.7817993,25.585083,34.7817993"/>
|
||||
<path d="M40.5587769,34.6429443c-1.4580078,0-2.1360474,1.4020386-2.1360474,3.1890259
|
||||
c0,1.7659912,0.6950073,3.1619873,2.1700439,3.1619873c1.4909668,0,2.1459961-1.3959961,2.1459961-3.1619873
|
||||
C42.7387695,36.0449829,42.0497437,34.6429443,40.5587769,34.6429443"/>
|
||||
<polygon class="st7" points="0.2755737,48.12854 0.009552,48.4255981 48.4245605,48.4255981 48.147522,48.12854 "/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<polygon id="SVGID_10_" points="48.1409912,0.2750244 48.1439819,23.2990112 48.1480103,48.1280518 48.4249878,48.4250488
|
||||
48.4249878,0 "/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_11_">
|
||||
<use xlink:href="#SVGID_10_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="-278.4791565" y1="450.0944519" x2="-277.4791565" y2="450.0944519" gradientTransform="matrix(-0.0025294 -48.4249802 -48.4249802 0.0025294 21843.3945313 -13438.0615234)">
|
||||
<stop offset="0" style="stop-color:#815F26"/>
|
||||
<stop offset="0.5941817" style="stop-color:#836128"/>
|
||||
<stop offset="0.8079586" style="stop-color:#89682E"/>
|
||||
<stop offset="0.9600694" style="stop-color:#947338"/>
|
||||
<stop offset="1" style="stop-color:#98783C"/>
|
||||
</linearGradient>
|
||||
<rect x="48.1397095" y="-0.0000306" class="st8" width="0.2865295" height="48.4250793"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<polygon id="SVGID_13_" points="0.0090027,48.4250488 0.2749939,48.1280518 0.2749939,0.2750244 0,0 "/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_14_">
|
||||
<use xlink:href="#SVGID_13_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="-264.122467" y1="450.0944519" x2="-263.122467" y2="450.0944519" gradientTransform="matrix(0.0025295 48.4249763 -48.4249763 0.0025295 21796.6171875 12788.9853516)">
|
||||
<stop offset="0" style="stop-color:#CFAD75"/>
|
||||
<stop offset="1" style="stop-color:#816328"/>
|
||||
</linearGradient>
|
||||
<rect x="-0.001297" y="0" class="st9" width="0.2775269" height="48.4250488"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<polygon id="SVGID_16_" points="0,0 0.2749939,0.2750244 48.1409912,0.2750244 48.4249878,0 "/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_17_">
|
||||
<use xlink:href="#SVGID_16_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="-276.0588379" y1="452.5148621" x2="-275.0588074" y2="452.5148621" gradientTransform="matrix(48.4245529 -0.0025294 0.0025294 48.4245529 13366.8808594 -21913.3886719)">
|
||||
<stop offset="0" style="stop-color:#DDC77C"/>
|
||||
<stop offset="1" style="stop-color:#B4802C"/>
|
||||
</linearGradient>
|
||||
<rect x="-0.0000306" y="-0.0012512" class="st10" width="48.4249878" height="0.2774963"/>
|
||||
</g>
|
||||
<g>
|
||||
<defs>
|
||||
<path id="SVGID_19_" d="M24.2139893,28.4770508c-8.0770264,0-15.7080078-1.9720459-22.4039917-5.4820557v0.6000366
|
||||
c6.6959839,3.507019,14.3269653,5.5,22.4039917,5.5c8.0830078,0,15.7030029-1.992981,22.3989868-5.5v-0.6000366
|
||||
C39.9169922,26.5050049,32.2969971,28.4770508,24.2139893,28.4770508"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_20_">
|
||||
<use xlink:href="#SVGID_19_" style="overflow:visible;"/>
|
||||
</clipPath>
|
||||
|
||||
<linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="-276.4433289" y1="453.0949707" x2="-275.4433289" y2="453.0949707" gradientTransform="matrix(44.8038025 -0.0023356 0.0023356 44.8038025 12386.4638672 -20274.9785156)">
|
||||
<stop offset="0" style="stop-color:#472613"/>
|
||||
<stop offset="0.0408205" style="stop-color:#5C3A1A"/>
|
||||
<stop offset="0.0949331" style="stop-color:#704F21"/>
|
||||
<stop offset="0.1483985" style="stop-color:#7D5B25"/>
|
||||
<stop offset="0.2" style="stop-color:#815F26"/>
|
||||
<stop offset="0.2510605" style="stop-color:#8A6527"/>
|
||||
<stop offset="0.3343309" style="stop-color:#A2752A"/>
|
||||
<stop offset="0.438834" style="stop-color:#CA8F30"/>
|
||||
<stop offset="0.5" style="stop-color:#E4A133"/>
|
||||
<stop offset="0.5320022" style="stop-color:#E8A73C"/>
|
||||
<stop offset="0.584035" style="stop-color:#F4B754"/>
|
||||
<stop offset="0.6" style="stop-color:#F8BD5D"/>
|
||||
<stop offset="0.6378715" style="stop-color:#EFB659"/>
|
||||
<stop offset="0.6996277" style="stop-color:#D7A34E"/>
|
||||
<stop offset="0.777076" style="stop-color:#AF843B"/>
|
||||
<stop offset="0.85" style="stop-color:#846227"/>
|
||||
<stop offset="0.8968558" style="stop-color:#815E26"/>
|
||||
<stop offset="0.9453847" style="stop-color:#7A5123"/>
|
||||
<stop offset="0.9945391" style="stop-color:#6D3D1E"/>
|
||||
<stop offset="1" style="stop-color:#6B3A1D"/>
|
||||
</linearGradient>
|
||||
<rect x="1.8097992" y="22.993866" class="st11" width="44.803299" height="6.1023865"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 20 KiB |
Reference in new issue
Block a user