pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-25 08:06:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Added styles for empty states on the page. #10703 (#11588)

Browse Source 
### What problem does this PR solve?

Fix: Added styles for empty states on the page.
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
chanx
2025-11-28 14:03:20 +08:00
committed by GitHub
parent dbdda0fbab
commit 7d05d4ced7
29 changed files with 866 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/assets/svg/empty/no-data-bri.svg Normal file
View File

@ -0,0 +1,24 @@
<svg width="42" height="52" viewBox="0 0 42 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.175 16.22L6 30V42C6 43.0609 6.31607 44.0783 6.87868 44.8284C7.44129 45.5786 8.20435 46 9 46H33C33.7956 46 34.5587 45.5786 35.1213 44.8284C35.6839 44.0783 36 43.0609 36 42V30L30.825 16.22C30.5766 15.5536 30.1938 14.9927 29.7194 14.6006C29.2451 14.2084 28.6981 14.0004 28.14 14H13.86C13.3019 14.0004 12.7549 14.2084 12.2806 14.6006C11.8062 14.9927 11.4234 15.5536 11.175 16.22Z" stroke="url(#paint0_linear_493_44259)" stroke-opacity="0.2" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.175 8.22L6 22V34C6 35.0609 6.31607 36.0783 6.87868 36.8284C7.44129 37.5786 8.20435 38 9 38H33C33.7957 38 34.5587 37.5786 35.1213 36.8284C35.6839 36.0783 36 35.0609 36 34V22L30.825 8.22C30.5766 7.55357 30.1938 6.99274 29.7194 6.60056C29.2451 6.20838 28.6981 6.00039 28.14 6H13.86C13.3019 6.00039 12.7549 6.20838 12.2806 6.60056C11.8062 6.99274 11.4234 7.55357 11.175 8.22Z" fill="white" stroke="url(#paint1_linear_493_44259)" stroke-opacity="0.8" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.175 12.22L6 26V38C6 39.0609 6.31607 40.0783 6.87868 40.8284C7.44129 41.5786 8.20435 42 9 42H33C33.7957 42 34.5587 41.5786 35.1213 40.8284C35.6839 40.0783 36 39.0609 36 38V26L30.825 12.22C30.5766 11.5536 30.1938 10.9927 29.7194 10.6006C29.2451 10.2084 28.6981 10.0004 28.14 10H13.86C13.3019 10.0004 12.7549 10.2084 12.2806 10.6006C11.8062 10.9927 11.4234 11.5536 11.175 12.22Z" fill="white" stroke="url(#paint2_linear_493_44259)" stroke-opacity="0.5" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M36 22.1641H27L24 28.1641H18L15 22.1641H6M36 22.1641V34.1641C36 35.2249 35.6839 36.2423 35.1213 36.9925C34.5587 37.7426 33.7956 38.1641 33 38.1641H9C8.20435 38.1641 7.44129 37.7426 6.87868 36.9925C6.31607 36.2423 6 35.2249 6 34.1641V22.1641M36 22.1641L30.825 8.38406C30.5766 7.71764 30.1938 7.1568 29.7194 6.76462C29.2451 6.37244 28.6981 6.16446 28.14 6.16406H13.86C13.3019 6.16446 12.7549 6.37244 12.2806 6.76462C11.8062 7.1568 11.4234 7.71764 11.175 8.38406L6 22.1641" stroke="url(#paint3_linear_493_44259)" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_493_44259" x1="21" y1="14" x2="9.71922" y2="50.3541" gradientUnits="userSpaceOnUse">
<stop offset="0.195167" stop-color="#161618" stop-opacity="0"/>
<stop offset="1" stop-color="#C2C2C2"/>
</linearGradient>
<linearGradient id="paint1_linear_493_44259" x1="21" y1="6" x2="9.71922" y2="42.3541" gradientUnits="userSpaceOnUse">
<stop offset="0.195167" stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="#C2C2C2"/>
</linearGradient>
<linearGradient id="paint2_linear_493_44259" x1="21" y1="10" x2="9.71922" y2="46.3541" gradientUnits="userSpaceOnUse">
<stop offset="0.195167" stop-color="#161618" stop-opacity="0"/>
<stop offset="1" stop-color="#C2C2C2"/>
</linearGradient>
<linearGradient id="paint3_linear_493_44259" x1="21" y1="6.16406" x2="21" y2="38.1641" gradientUnits="userSpaceOnUse">
<stop stop-color="#161618"/>
<stop offset="1" stop-color="#7B7B7C"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

24
web/src/assets/svg/empty/no-data-dark.svg Normal file
View File

@ -0,0 +1,24 @@
<svg width="42" height="52" viewBox="0 0 42 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.175 16.22L6 30V42C6 43.0609 6.31607 44.0783 6.87868 44.8284C7.44129 45.5786 8.20435 46 9 46H33C33.7956 46 34.5587 45.5786 35.1213 44.8284C35.6839 44.0783 36 43.0609 36 42V30L30.825 16.22C30.5766 15.5536 30.1938 14.9927 29.7194 14.6006C29.2451 14.2084 28.6981 14.0004 28.14 14H13.86C13.3019 14.0004 12.7549 14.2084 12.2806 14.6006C11.8062 14.9927 11.4234 15.5536 11.175 16.22Z" stroke="url(#paint0_linear_486_6708)" stroke-opacity="0.2" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.175 8.22L6 22V34C6 35.0609 6.31607 36.0783 6.87868 36.8284C7.44129 37.5786 8.20435 38 9 38H33C33.7957 38 34.5587 37.5786 35.1213 36.8284C35.6839 36.0783 36 35.0609 36 34V22L30.825 8.22C30.5766 7.55357 30.1938 6.99274 29.7194 6.60056C29.2451 6.20838 28.6981 6.00039 28.14 6H13.86C13.3019 6.00039 12.7549 6.20838 12.2806 6.60056C11.8062 6.99274 11.4234 7.55357 11.175 8.22Z" fill="#222224" stroke="url(#paint1_linear_486_6708)" stroke-opacity="0.8" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.175 12.22L6 26V38C6 39.0609 6.31607 40.0783 6.87868 40.8284C7.44129 41.5786 8.20435 42 9 42H33C33.7957 42 34.5587 41.5786 35.1213 40.8284C35.6839 40.0783 36 39.0609 36 38V26L30.825 12.22C30.5766 11.5536 30.1938 10.9927 29.7194 10.6006C29.2451 10.2084 28.6981 10.0004 28.14 10H13.86C13.3019 10.0004 12.7549 10.2084 12.2806 10.6006C11.8062 10.9927 11.4234 11.5536 11.175 12.22Z" fill="#222224" stroke="url(#paint2_linear_486_6708)" stroke-opacity="0.5" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M36 22.1641H27L24 28.1641H18L15 22.1641H6M36 22.1641V34.1641C36 35.2249 35.6839 36.2423 35.1213 36.9925C34.5587 37.7426 33.7956 38.1641 33 38.1641H9C8.20435 38.1641 7.44129 37.7426 6.87868 36.9925C6.31607 36.2423 6 35.2249 6 34.1641V22.1641M36 22.1641L30.825 8.38406C30.5766 7.71764 30.1938 7.1568 29.7194 6.76462C29.2451 6.37244 28.6981 6.16446 28.14 6.16406H13.86C13.3019 6.16446 12.7549 6.37244 12.2806 6.76462C11.8062 7.1568 11.4234 7.71764 11.175 8.38406L6 22.1641" stroke="url(#paint3_linear_486_6708)" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_486_6708" x1="21" y1="14" x2="9.71922" y2="50.3541" gradientUnits="userSpaceOnUse">
<stop offset="0.195167" stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="#C2C2C2"/>
</linearGradient>
<linearGradient id="paint1_linear_486_6708" x1="21" y1="6" x2="9.71922" y2="42.3541" gradientUnits="userSpaceOnUse">
<stop offset="0.195167" stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="#C2C2C2"/>
</linearGradient>
<linearGradient id="paint2_linear_486_6708" x1="21" y1="10" x2="9.71922" y2="46.3541" gradientUnits="userSpaceOnUse">
<stop offset="0.195167" stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="#C2C2C2"/>
</linearGradient>
<linearGradient id="paint3_linear_486_6708" x1="21" y1="6.16406" x2="21" y2="38.1641" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#7B7B7C"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

35
web/src/assets/svg/empty/no-search-data-bri.svg Normal file
View File

@ -0,0 +1,35 @@
<svg width="84" height="104" viewBox="0 0 84 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="search nothing">
<path id="Vector" d="M60.6654 71.3333V39.3333C60.6654 37.9188 60.1035 36.5623 59.1033 35.5621C58.1031 34.5619 56.7465 34 55.332 34H20.6654M20.6654 34C22.0799 34 23.4364 34.5619 24.4366 35.5621C25.4368 36.5623 25.9987 37.9188 25.9987 39.3333V76.6667C25.9987 78.0812 26.5606 79.4377 27.5608 80.4379C28.561 81.4381 29.9175 82 31.332 82M20.6654 34C19.2509 34 17.8943 34.5619 16.8941 35.5621C15.8939 36.5623 15.332 37.9188 15.332 39.3333V44.6667C15.332 45.3739 15.613 46.0522 16.1131 46.5523C16.6132 47.0524 17.2915 47.3333 17.9987 47.3333H25.9987M31.332 82H63.332C64.7465 82 66.1031 81.4381 67.1033 80.4379C68.1035 79.4377 68.6654 78.0812 68.6654 76.6667V74C68.6654 73.2928 68.3844 72.6145 67.8843 72.1144C67.3842 71.6143 66.7059 71.3333 65.9987 71.3333H39.332C38.6248 71.3333 37.9465 71.6143 37.4464 72.1144C36.9463 72.6145 36.6654 73.2928 36.6654 74V76.6667C36.6654 78.0812 36.1035 79.4377 35.1033 80.4379C34.1031 81.4381 32.7465 82 31.332 82Z" stroke="url(#paint0_linear_493_43922)" stroke-opacity="0.2" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<g id="Vector_2">
<path d="M60.6654 65.3333V33.3333C60.6654 31.9188 60.1035 30.5623 59.1033 29.5621C58.1031 28.5619 56.7465 28 55.332 28H20.6654" fill="white"/>
<path d="M31.332 76H63.332C64.7465 76 66.1031 75.4381 67.1033 74.4379C68.1035 73.4377 68.6654 72.0812 68.6654 70.6667V68C68.6654 67.2928 68.3844 66.6145 67.8843 66.1144C67.3842 65.6143 66.7059 65.3333 65.9987 65.3333H39.332C38.6248 65.3333 37.9465 65.6143 37.4464 66.1144C36.9463 66.6145 36.6654 67.2928 36.6654 68V70.6667C36.6654 72.0812 36.1035 73.4377 35.1033 74.4379C34.1031 75.4381 32.7465 76 31.332 76C29.9175 76 28.561 75.4381 27.5608 74.4379C26.5606 73.4377 25.9987 72.0812 25.9987 70.6667V33.3333C25.9987 31.9188 25.4368 30.5623 24.4366 29.5621C23.4364 28.5619 22.0799 28 20.6654 28C19.2509 28 17.8943 28.5619 16.8941 29.5621C15.8939 30.5623 15.332 31.9188 15.332 33.3333V38.6667C15.332 39.3739 15.613 40.0522 16.1131 40.5523C16.6132 41.0524 17.2915 41.3333 17.9987 41.3333H25.9987" fill="white"/>
<path d="M60.6654 65.3333V33.3333C60.6654 31.9188 60.1035 30.5623 59.1033 29.5621C58.1031 28.5619 56.7465 28 55.332 28H20.6654M20.6654 28C22.0799 28 23.4364 28.5619 24.4366 29.5621C25.4368 30.5623 25.9987 31.9188 25.9987 33.3333V70.6667C25.9987 72.0812 26.5606 73.4377 27.5608 74.4379C28.561 75.4381 29.9175 76 31.332 76M20.6654 28C19.2509 28 17.8943 28.5619 16.8941 29.5621C15.8939 30.5623 15.332 31.9188 15.332 33.3333V38.6667C15.332 39.3739 15.613 40.0522 16.1131 40.5523C16.6132 41.0524 17.2915 41.3333 17.9987 41.3333H25.9987M31.332 76H63.332C64.7465 76 66.1031 75.4381 67.1033 74.4379C68.1035 73.4377 68.6654 72.0812 68.6654 70.6667V68C68.6654 67.2928 68.3844 66.6145 67.8843 66.1144C67.3842 65.6143 66.7059 65.3333 65.9987 65.3333H39.332C38.6248 65.3333 37.9465 65.6143 37.4464 66.1144C36.9463 66.6145 36.6654 67.2928 36.6654 68V70.6667C36.6654 72.0812 36.1035 73.4377 35.1033 74.4379C34.1031 75.4381 32.7465 76 31.332 76Z" stroke="url(#paint1_linear_493_43922)" stroke-opacity="0.6" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path id="Vector_3" d="M61.3333 59.3333V27.3333C61.3333 25.9188 60.7714 24.5623 59.7712 23.5621C58.771 22.5619 57.4145 22 56 22H21.3333M21.3333 22C22.7478 22 24.1044 22.5619 25.1046 23.5621C26.1048 24.5623 26.6667 25.9188 26.6667 27.3333V64.6667C26.6667 66.0812 27.2286 67.4377 28.2288 68.4379C29.229 69.4381 30.5855 70 32 70M21.3333 22C19.9188 22 18.5623 22.5619 17.5621 23.5621C16.5619 24.5623 16 25.9188 16 27.3333V32.6667C16 33.3739 16.281 34.0522 16.781 34.5523C17.2811 35.0524 17.9594 35.3333 18.6667 35.3333H26.6667M32 70H64C65.4145 70 66.771 69.4381 67.7712 68.4379C68.7714 67.4377 69.3333 66.0812 69.3333 64.6667V62C69.3333 61.2928 69.0524 60.6145 68.5523 60.1144C68.0522 59.6143 67.3739 59.3333 66.6667 59.3333H40C39.2928 59.3333 38.6145 59.6143 38.1144 60.1144C37.6143 60.6145 37.3333 61.2928 37.3333 62V64.6667C37.3333 66.0812 36.7714 67.4377 35.7712 68.4379C34.771 69.4381 33.4145 70 32 70Z" stroke="url(#paint2_linear_493_43922)" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_4" d="M61.3333 59.3333V27.3333C61.3333 25.9188 60.7714 24.5623 59.7712 23.5621C58.771 22.5619 57.4145 22 56 22H21.3333M21.3333 22C22.7478 22 24.1044 22.5619 25.1046 23.5621C26.1048 24.5623 26.6667 25.9188 26.6667 27.3333V64.6667C26.6667 66.0812 27.2286 67.4377 28.2288 68.4379C29.229 69.4381 30.5855 70 32 70M21.3333 22C19.9188 22 18.5623 22.5619 17.5621 23.5621C16.5619 24.5623 16 25.9188 16 27.3333V32.6667C16 33.3739 16.281 34.0522 16.781 34.5523C17.2811 35.0524 17.9594 35.3333 18.6667 35.3333H26.6667M32 70H64C65.4145 70 66.771 69.4381 67.7712 68.4379C68.7714 67.4377 69.3333 66.0812 69.3333 64.6667V62C69.3333 61.2928 69.0524 60.6145 68.5523 60.1144C68.0522 59.6143 67.3739 59.3333 66.6667 59.3333H40C39.2928 59.3333 38.6145 59.6143 38.1144 60.1144C37.6143 60.6145 37.3333 61.2928 37.3333 62V64.6667C37.3333 66.0812 36.7714 67.4377 35.7712 68.4379C34.771 69.4381 33.4145 70 32 70Z" stroke="url(#paint3_linear_493_43922)" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_5" d="M56 52L51.1778 47.1778M53.7778 40.8889C53.7778 45.7981 49.7981 49.7778 44.8889 49.7778C39.9797 49.7778 36 45.7981 36 40.8889C36 35.9797 39.9797 32 44.8889 32C49.7981 32 53.7778 35.9797 53.7778 40.8889Z" stroke="url(#paint4_linear_493_43922)" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<linearGradient id="paint0_linear_493_43922" x1="41.9987" y1="34" x2="41.9987" y2="82" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#7B7B7C"/>
</linearGradient>
<linearGradient id="paint1_linear_493_43922" x1="41.9987" y1="28" x2="41.9987" y2="76" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#7B7B7C"/>
</linearGradient>
<linearGradient id="paint2_linear_493_43922" x1="42.6667" y1="22" x2="42.6667" y2="70" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#7B7B7C"/>
</linearGradient>
<linearGradient id="paint3_linear_493_43922" x1="42.6667" y1="22" x2="42.6667" y2="70" gradientUnits="userSpaceOnUse">
<stop stop-color="#161618"/>
<stop offset="1" stop-color="#7B7B7C"/>
</linearGradient>
<linearGradient id="paint4_linear_493_43922" x1="46" y1="32" x2="46" y2="52" gradientUnits="userSpaceOnUse">
<stop stop-color="#161618"/>
<stop offset="1" stop-color="#7B7B7C"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

39
web/src/assets/svg/empty/no-search-data-dark.svg Normal file
View File

@ -0,0 +1,39 @@
<svg width="84" height="104" viewBox="0 0 84 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="search nothing">
<path id="Vector" d="M60.6654 71.3333V39.3333C60.6654 37.9188 60.1035 36.5623 59.1033 35.5621C58.1031 34.5619 56.7465 34 55.332 34H20.6654M20.6654 34C22.0799 34 23.4364 34.5619 24.4366 35.5621C25.4368 36.5623 25.9987 37.9188 25.9987 39.3333V76.6667C25.9987 78.0812 26.5606 79.4377 27.5608 80.4379C28.561 81.4381 29.9175 82 31.332 82M20.6654 34C19.2509 34 17.8943 34.5619 16.8941 35.5621C15.8939 36.5623 15.332 37.9188 15.332 39.3333V44.6667C15.332 45.3739 15.613 46.0522 16.1131 46.5523C16.6132 47.0524 17.2915 47.3333 17.9987 47.3333H25.9987M31.332 82H63.332C64.7465 82 66.1031 81.4381 67.1033 80.4379C68.1035 79.4377 68.6654 78.0812 68.6654 76.6667V74C68.6654 73.2928 68.3844 72.6145 67.8843 72.1144C67.3842 71.6143 66.7059 71.3333 65.9987 71.3333H39.332C38.6248 71.3333 37.9465 71.6143 37.4464 72.1144C36.9463 72.6145 36.6654 73.2928 36.6654 74V76.6667C36.6654 78.0812 36.1035 79.4377 35.1033 80.4379C34.1031 81.4381 32.7465 82 31.332 82Z" stroke="url(#paint0_linear_486_6812)" stroke-opacity="0.2" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<g id="Vector_2">
<path d="M60.6654 65.3333V33.3333C60.6654 31.9188 60.1035 30.5623 59.1033 29.5621C58.1031 28.5619 56.7465 28 55.332 28H20.6654" fill="#161618"/>
<path d="M31.332 76H63.332C64.7465 76 66.1031 75.4381 67.1033 74.4379C68.1035 73.4377 68.6654 72.0812 68.6654 70.6667V68C68.6654 67.2928 68.3844 66.6145 67.8843 66.1144C67.3842 65.6143 66.7059 65.3333 65.9987 65.3333H39.332C38.6248 65.3333 37.9465 65.6143 37.4464 66.1144C36.9463 66.6145 36.6654 67.2928 36.6654 68V70.6667C36.6654 72.0812 36.1035 73.4377 35.1033 74.4379C34.1031 75.4381 32.7465 76 31.332 76C29.9175 76 28.561 75.4381 27.5608 74.4379C26.5606 73.4377 25.9987 72.0812 25.9987 70.6667V33.3333C25.9987 31.9188 25.4368 30.5623 24.4366 29.5621C23.4364 28.5619 22.0799 28 20.6654 28C19.2509 28 17.8943 28.5619 16.8941 29.5621C15.8939 30.5623 15.332 31.9188 15.332 33.3333V38.6667C15.332 39.3739 15.613 40.0522 16.1131 40.5523C16.6132 41.0524 17.2915 41.3333 17.9987 41.3333H25.9987" fill="#161618"/>
<path d="M60.6654 65.3333V33.3333C60.6654 31.9188 60.1035 30.5623 59.1033 29.5621C58.1031 28.5619 56.7465 28 55.332 28H20.6654M20.6654 28C22.0799 28 23.4364 28.5619 24.4366 29.5621C25.4368 30.5623 25.9987 31.9188 25.9987 33.3333V70.6667C25.9987 72.0812 26.5606 73.4377 27.5608 74.4379C28.561 75.4381 29.9175 76 31.332 76M20.6654 28C19.2509 28 17.8943 28.5619 16.8941 29.5621C15.8939 30.5623 15.332 31.9188 15.332 33.3333V38.6667C15.332 39.3739 15.613 40.0522 16.1131 40.5523C16.6132 41.0524 17.2915 41.3333 17.9987 41.3333H25.9987M31.332 76H63.332C64.7465 76 66.1031 75.4381 67.1033 74.4379C68.1035 73.4377 68.6654 72.0812 68.6654 70.6667V68C68.6654 67.2928 68.3844 66.6145 67.8843 66.1144C67.3842 65.6143 66.7059 65.3333 65.9987 65.3333H39.332C38.6248 65.3333 37.9465 65.6143 37.4464 66.1144C36.9463 66.6145 36.6654 67.2928 36.6654 68V70.6667C36.6654 72.0812 36.1035 73.4377 35.1033 74.4379C34.1031 75.4381 32.7465 76 31.332 76Z" stroke="url(#paint1_linear_486_6812)" stroke-opacity="0.6" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path id="Vector_3" d="M61.3333 59.3333V27.3333C61.3333 25.9188 60.7714 24.5623 59.7712 23.5621C58.771 22.5619 57.4145 22 56 22H21.3333M21.3333 22C22.7478 22 24.1044 22.5619 25.1046 23.5621C26.1048 24.5623 26.6667 25.9188 26.6667 27.3333V64.6667C26.6667 66.0812 27.2286 67.4377 28.2288 68.4379C29.229 69.4381 30.5855 70 32 70M21.3333 22C19.9188 22 18.5623 22.5619 17.5621 23.5621C16.5619 24.5623 16 25.9188 16 27.3333V32.6667C16 33.3739 16.281 34.0522 16.781 34.5523C17.2811 35.0524 17.9594 35.3333 18.6667 35.3333H26.6667M32 70H64C65.4145 70 66.771 69.4381 67.7712 68.4379C68.7714 67.4377 69.3333 66.0812 69.3333 64.6667V62C69.3333 61.2928 69.0524 60.6145 68.5523 60.1144C68.0522 59.6143 67.3739 59.3333 66.6667 59.3333H40C39.2928 59.3333 38.6145 59.6143 38.1144 60.1144C37.6143 60.6145 37.3333 61.2928 37.3333 62V64.6667C37.3333 66.0812 36.7714 67.4377 35.7712 68.4379C34.771 69.4381 33.4145 70 32 70Z" stroke="url(#paint2_linear_486_6812)" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<g id="Vector_4">
<path d="M61.3333 59.3333V27.3333C61.3333 25.9188 60.7714 24.5623 59.7712 23.5621C58.771 22.5619 57.4145 22 56 22H21.3333" fill="#161618"/>
<path d="M32 70H64C65.4145 70 66.771 69.4381 67.7712 68.4379C68.7714 67.4377 69.3333 66.0812 69.3333 64.6667V62C69.3333 61.2928 69.0524 60.6145 68.5523 60.1144C68.0522 59.6143 67.3739 59.3333 66.6667 59.3333H40C39.2928 59.3333 38.6145 59.6143 38.1144 60.1144C37.6143 60.6145 37.3333 61.2928 37.3333 62V64.6667C37.3333 66.0812 36.7714 67.4377 35.7712 68.4379C34.771 69.4381 33.4145 70 32 70C30.5855 70 29.229 69.4381 28.2288 68.4379C27.2286 67.4377 26.6667 66.0812 26.6667 64.6667V27.3333C26.6667 25.9188 26.1048 24.5623 25.1046 23.5621C24.1044 22.5619 22.7478 22 21.3333 22C19.9188 22 18.5623 22.5619 17.5621 23.5621C16.5619 24.5623 16 25.9188 16 27.3333V32.6667C16 33.3739 16.281 34.0522 16.781 34.5523C17.2811 35.0524 17.9594 35.3333 18.6667 35.3333H26.6667" fill="#161618"/>
<path d="M61.3333 59.3333V27.3333C61.3333 25.9188 60.7714 24.5623 59.7712 23.5621C58.771 22.5619 57.4145 22 56 22H21.3333M21.3333 22C22.7478 22 24.1044 22.5619 25.1046 23.5621C26.1048 24.5623 26.6667 25.9188 26.6667 27.3333V64.6667C26.6667 66.0812 27.2286 67.4377 28.2288 68.4379C29.229 69.4381 30.5855 70 32 70M21.3333 22C19.9188 22 18.5623 22.5619 17.5621 23.5621C16.5619 24.5623 16 25.9188 16 27.3333V32.6667C16 33.3739 16.281 34.0522 16.781 34.5523C17.2811 35.0524 17.9594 35.3333 18.6667 35.3333H26.6667M32 70H64C65.4145 70 66.771 69.4381 67.7712 68.4379C68.7714 67.4377 69.3333 66.0812 69.3333 64.6667V62C69.3333 61.2928 69.0524 60.6145 68.5523 60.1144C68.0522 59.6143 67.3739 59.3333 66.6667 59.3333H40C39.2928 59.3333 38.6145 59.6143 38.1144 60.1144C37.6143 60.6145 37.3333 61.2928 37.3333 62V64.6667C37.3333 66.0812 36.7714 67.4377 35.7712 68.4379C34.771 69.4381 33.4145 70 32 70Z" stroke="url(#paint3_linear_486_6812)" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path id="Vector_5" d="M56 52L51.1778 47.1778M53.7778 40.8889C53.7778 45.7981 49.7981 49.7778 44.8889 49.7778C39.9797 49.7778 36 45.7981 36 40.8889C36 35.9797 39.9797 32 44.8889 32C49.7981 32 53.7778 35.9797 53.7778 40.8889Z" stroke="url(#paint4_linear_486_6812)" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<linearGradient id="paint0_linear_486_6812" x1="41.9987" y1="34" x2="41.9987" y2="82" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#7B7B7C"/>
</linearGradient>
<linearGradient id="paint1_linear_486_6812" x1="41.9987" y1="28" x2="41.9987" y2="76" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#7B7B7C"/>
</linearGradient>
<linearGradient id="paint2_linear_486_6812" x1="42.6667" y1="22" x2="42.6667" y2="70" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#7B7B7C"/>
</linearGradient>
<linearGradient id="paint3_linear_486_6812" x1="42.6667" y1="22" x2="42.6667" y2="70" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#7B7B7C"/>
</linearGradient>
<linearGradient id="paint4_linear_486_6812" x1="46" y1="32" x2="46" y2="52" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#7B7B7C"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB