Banner exploration

This commit is contained in:
Niels Laute
2025-09-30 21:04:04 +02:00
parent c49883e0dc
commit de82003fb6
5 changed files with 394 additions and 2 deletions

View File

@@ -0,0 +1,100 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_125_2801)">
<g clip-path="url(#clip1_125_2801)">
<path d="M0 5C0 4.44771 0.447715 4 1 4H22C22.5523 4 23 4.44772 23 5V18.5C23 20.9853 20.9853 23 18.5 23H4.5C2.01472 23 0 20.9853 0 18.5V5Z" fill="url(#paint0_linear_125_2801)"/>
<mask id="mask0_125_2801" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="4" width="23" height="19">
<path d="M0 5C0 4.44771 0.447715 4 1 4H22C22.5523 4 23 4.44772 23 5V18.5C23 20.9853 20.9853 23 18.5 23H4.5C2.01472 23 0 20.9853 0 18.5V5Z" fill="url(#paint1_linear_125_2801)"/>
</mask>
<g mask="url(#mask0_125_2801)">
<g filter="url(#filter0_dd_125_2801)">
<path d="M6 5V1H17V5" stroke="url(#paint2_linear_125_2801)" stroke-width="2" stroke-linecap="round"/>
</g>
</g>
<rect x="6" y="8" width="11" height="11" rx="1" fill="white" fill-opacity="0.5"/>
<g filter="url(#filter1_d_125_2801)">
<path d="M11 9H7V13H11V9Z" fill="#F25022"/>
<path d="M16 9H12V13H16V9Z" fill="#7FBA00"/>
<path d="M16 14H12V18H16V14Z" fill="#FFB900"/>
<path d="M11 14H7V18H11V14Z" fill="#00A4EF"/>
</g>
<path d="M6 5V2C6 1.44772 6.44772 1 7 1H16C16.5523 1 17 1.44772 17 2V5" stroke="url(#paint3_linear_125_2801)" stroke-width="2" stroke-linecap="round"/>
<rect x="7" width="9" height="2" fill="url(#paint4_linear_125_2801)"/>
<mask id="mask1_125_2801" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="0" width="9" height="2">
<rect x="7" width="9" height="2" fill="url(#paint5_linear_125_2801)"/>
</mask>
<g mask="url(#mask1_125_2801)">
<g filter="url(#filter2_dd_125_2801)">
</g>
</g>
</g>
</g>
<defs>
<filter id="filter0_dd_125_2801" x="3.5" y="-1" width="16" height="9" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.25"/>
<feGaussianBlur stdDeviation="0.25"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_125_2801"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.75"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_125_2801" result="effect2_dropShadow_125_2801"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_125_2801" result="shape"/>
</filter>
<filter id="filter1_d_125_2801" x="6" y="8.25" width="11" height="11" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.25"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_125_2801"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_125_2801" result="shape"/>
</filter>
<filter id="filter2_dd_125_2801" x="3.5" y="-2.5" width="16" height="8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1"/>
<feGaussianBlur stdDeviation="0.25"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_125_2801"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1"/>
<feGaussianBlur stdDeviation="0.75"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_125_2801" result="effect2_dropShadow_125_2801"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_125_2801" result="shape"/>
</filter>
<linearGradient id="paint0_linear_125_2801" x1="5.22727" y1="1.19318" x2="9.5894" y2="22.315" gradientUnits="userSpaceOnUse">
<stop offset="0.270833" stop-color="white"/>
<stop offset="1" stop-color="#DFDFDF"/>
</linearGradient>
<linearGradient id="paint1_linear_125_2801" x1="11.5" y1="4" x2="15.4941" y2="23.743" gradientUnits="userSpaceOnUse">
<stop stop-color="#0078D4"/>
<stop offset="1" stop-color="#114A8B"/>
</linearGradient>
<linearGradient id="paint2_linear_125_2801" x1="11.5" y1="1" x2="11.8823" y2="5.29249" gradientUnits="userSpaceOnUse">
<stop stop-color="#28AFEA"/>
<stop offset="1" stop-color="#0078D4"/>
</linearGradient>
<linearGradient id="paint3_linear_125_2801" x1="11.5" y1="1" x2="11.7158" y2="4.23049" gradientUnits="userSpaceOnUse">
<stop stop-color="#30DAFF"/>
<stop offset="1" stop-color="#0094D4"/>
</linearGradient>
<linearGradient id="paint4_linear_125_2801" x1="11" y1="5.23303e-08" x2="11" y2="2" gradientUnits="userSpaceOnUse">
<stop stop-color="#22BCFF"/>
<stop offset="1" stop-color="#0088F0"/>
</linearGradient>
<linearGradient id="paint5_linear_125_2801" x1="11" y1="5.23303e-08" x2="11" y2="2" gradientUnits="userSpaceOnUse">
<stop stop-color="#28AFEA"/>
<stop offset="1" stop-color="#3CCBF4"/>
</linearGradient>
<clipPath id="clip0_125_2801">
<rect width="24" height="24" fill="white"/>
</clipPath>
<clipPath id="clip1_125_2801">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 5.6 KiB

View File

@@ -0,0 +1,100 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_125_2875)">
<g clip-path="url(#clip1_125_2875)">
<path d="M0 5C0 4.44771 0.447715 4 1 4H22C22.5523 4 23 4.44772 23 5V18.5C23 20.9853 20.9853 23 18.5 23H4.5C2.01472 23 0 20.9853 0 18.5V5Z" fill="url(#paint0_linear_125_2875)"/>
<mask id="mask0_125_2875" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="4" width="23" height="19">
<path d="M0 5C0 4.44771 0.447715 4 1 4H22C22.5523 4 23 4.44772 23 5V18.5C23 20.9853 20.9853 23 18.5 23H4.5C2.01472 23 0 20.9853 0 18.5V5Z" fill="url(#paint1_linear_125_2875)"/>
</mask>
<g mask="url(#mask0_125_2875)">
<g filter="url(#filter0_dd_125_2875)">
<path d="M6 5V1H17V5" stroke="url(#paint2_linear_125_2875)" stroke-width="2" stroke-linecap="round"/>
</g>
</g>
<rect x="6" y="8" width="11" height="11" rx="1" fill="#243A5F" fill-opacity="0.5"/>
<g filter="url(#filter1_d_125_2875)">
<path d="M11 9H7V13H11V9Z" fill="#F25022"/>
<path d="M16 9H12V13H16V9Z" fill="#7FBA00"/>
<path d="M16 14H12V18H16V14Z" fill="#FFB900"/>
<path d="M11 14H7V18H11V14Z" fill="#00A4EF"/>
</g>
<path d="M6 5V2C6 1.44772 6.44772 1 7 1H16C16.5523 1 17 1.44772 17 2V5" stroke="url(#paint3_linear_125_2875)" stroke-width="2" stroke-linecap="round"/>
<rect x="7" width="9" height="2" fill="url(#paint4_linear_125_2875)"/>
<mask id="mask1_125_2875" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="0" width="9" height="2">
<rect x="7" width="9" height="2" fill="url(#paint5_linear_125_2875)"/>
</mask>
<g mask="url(#mask1_125_2875)">
<g filter="url(#filter2_dd_125_2875)">
</g>
</g>
</g>
</g>
<defs>
<filter id="filter0_dd_125_2875" x="3.5" y="-1" width="16" height="9" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.25"/>
<feGaussianBlur stdDeviation="0.25"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_125_2875"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.75"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_125_2875" result="effect2_dropShadow_125_2875"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_125_2875" result="shape"/>
</filter>
<filter id="filter1_d_125_2875" x="6" y="8.25" width="11" height="11" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.25"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_125_2875"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_125_2875" result="shape"/>
</filter>
<filter id="filter2_dd_125_2875" x="3.5" y="-2.5" width="16" height="8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1"/>
<feGaussianBlur stdDeviation="0.25"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_125_2875"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-1"/>
<feGaussianBlur stdDeviation="0.75"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_125_2875" result="effect2_dropShadow_125_2875"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_125_2875" result="shape"/>
</filter>
<linearGradient id="paint0_linear_125_2875" x1="11.5" y1="4" x2="15.4941" y2="23.743" gradientUnits="userSpaceOnUse">
<stop stop-color="#0669BC"/>
<stop offset="1" stop-color="#243A5F"/>
</linearGradient>
<linearGradient id="paint1_linear_125_2875" x1="11.5" y1="4" x2="15.4941" y2="23.743" gradientUnits="userSpaceOnUse">
<stop stop-color="#0078D4"/>
<stop offset="1" stop-color="#114A8B"/>
</linearGradient>
<linearGradient id="paint2_linear_125_2875" x1="11.5" y1="1" x2="11.8823" y2="5.29249" gradientUnits="userSpaceOnUse">
<stop stop-color="#28AFEA"/>
<stop offset="1" stop-color="#0078D4"/>
</linearGradient>
<linearGradient id="paint3_linear_125_2875" x1="11.5" y1="1" x2="11.7158" y2="4.23049" gradientUnits="userSpaceOnUse">
<stop stop-color="#30DAFF"/>
<stop offset="1" stop-color="#0094D4"/>
</linearGradient>
<linearGradient id="paint4_linear_125_2875" x1="11" y1="5.23303e-08" x2="11" y2="2" gradientUnits="userSpaceOnUse">
<stop stop-color="#22BCFF"/>
<stop offset="1" stop-color="#0088F0"/>
</linearGradient>
<linearGradient id="paint5_linear_125_2875" x1="11" y1="5.23303e-08" x2="11" y2="2" gradientUnits="userSpaceOnUse">
<stop stop-color="#28AFEA"/>
<stop offset="1" stop-color="#3CCBF4"/>
</linearGradient>
<clipPath id="clip0_125_2875">
<rect width="24" height="24" fill="white"/>
</clipPath>
<clipPath id="clip1_125_2875">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 5.6 KiB

View File

@@ -0,0 +1,97 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_125_2968)">
<path d="M3 1.5C3 0.671573 3.67157 0 4.5 0H19.5C20.3284 0 21 0.671573 21 1.5V16.5C21 17.3284 20.3284 18 19.5 18H4.5C3.67157 18 3 17.3284 3 16.5V1.5Z" fill="#9C640A"/>
<mask id="mask0_125_2968" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="0" width="18" height="18">
<path d="M3 1.5C3 0.671573 3.67157 0 4.5 0H19.5C20.3284 0 21 0.671573 21 1.5V16.5C21 17.3284 20.3284 18 19.5 18H4.5C3.67157 18 3 17.3284 3 16.5V1.5Z" fill="#9C640A"/>
</mask>
<g mask="url(#mask0_125_2968)">
<g filter="url(#filter0_dd_125_2968)">
<path d="M1.5 4.5C1.5 3.67157 2.17157 3 3 3H21C21.8284 3 22.5 3.67157 22.5 4.5V19.5C22.5 20.3284 21.8284 21 21 21H3C2.17157 21 1.5 20.3284 1.5 19.5V4.5Z" fill="#BC822A"/>
</g>
</g>
<path d="M1.5 4.5C1.5 3.67157 2.17157 3 3 3H21C21.8284 3 22.5 3.67157 22.5 4.5V19.5C22.5 20.3284 21.8284 21 21 21H3C2.17157 21 1.5 20.3284 1.5 19.5V4.5Z" fill="#BC822A"/>
<mask id="mask1_125_2968" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="3" width="22" height="18">
<path d="M1.5 4.5C1.5 3.67157 2.17157 3 3 3H21C21.8284 3 22.5 3.67157 22.5 4.5V19.5C22.5 20.3284 21.8284 21 21 21H3C2.17157 21 1.5 20.3284 1.5 19.5V4.5Z" fill="#BC822A"/>
</mask>
<g mask="url(#mask1_125_2968)">
<g filter="url(#filter1_dd_125_2968)">
<path d="M0 7.5C0 6.67157 0.671573 6 1.5 6H22.5C23.3284 6 24 6.67157 24 7.5V22.5C24 23.3284 23.3284 24 22.5 24H1.5C0.671573 24 0 23.3284 0 22.5V7.5Z" fill="#D9D9D9"/>
<path d="M0 7.5C0 6.67157 0.671573 6 1.5 6H22.5C23.3284 6 24 6.67157 24 7.5V22.5C24 23.3284 23.3284 24 22.5 24H1.5C0.671573 24 0 23.3284 0 22.5V7.5Z" fill="url(#paint0_linear_125_2968)"/>
<path d="M0 7.5C0 6.67157 0.671573 6 1.5 6H22.5C23.3284 6 24 6.67157 24 7.5V22.5C24 23.3284 23.3284 24 22.5 24H1.5C0.671573 24 0 23.3284 0 22.5V7.5Z" fill="url(#paint1_linear_125_2968)"/>
</g>
</g>
<path d="M0 7.5C0 6.67157 0.671573 6 1.5 6H22.5C23.3284 6 24 6.67157 24 7.5V22.5C24 23.3284 23.3284 24 22.5 24H1.5C0.671573 24 0 23.3284 0 22.5V7.5Z" fill="#D9D9D9"/>
<path d="M0 7.5C0 6.67157 0.671573 6 1.5 6H22.5C23.3284 6 24 6.67157 24 7.5V22.5C24 23.3284 23.3284 24 22.5 24H1.5C0.671573 24 0 23.3284 0 22.5V7.5Z" fill="url(#paint2_linear_125_2968)"/>
<path d="M0 7.5C0 6.67157 0.671573 6 1.5 6H22.5C23.3284 6 24 6.67157 24 7.5V22.5C24 23.3284 23.3284 24 22.5 24H1.5C0.671573 24 0 23.3284 0 22.5V7.5Z" fill="url(#paint3_linear_125_2968)"/>
<g filter="url(#filter2_dd_125_2968)">
<path d="M12 9C12.8284 9 13.5 9.67157 13.5 10.5V15.8789L14.6895 14.6895C15.2752 14.1037 16.2248 14.1037 16.8105 14.6895C17.3963 15.2752 17.3963 16.2248 16.8105 16.8105L13.0605 20.5605C12.4748 21.1463 11.5252 21.1463 10.9395 20.5605L7.18945 16.8105C6.60367 16.2248 6.60367 15.2752 7.18945 14.6895C7.77524 14.1037 8.72476 14.1037 9.31055 14.6895L10.5 15.8789V10.5C10.5 9.67157 11.1716 9 12 9Z" fill="url(#paint4_linear_125_2968)"/>
</g>
</g>
<defs>
<filter id="filter0_dd_125_2968" x="0.5" y="1.505" width="23" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-0.495"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_125_2968"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-0.105"/>
<feGaussianBlur stdDeviation="0.05"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_125_2968" result="effect2_dropShadow_125_2968"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_125_2968" result="shape"/>
</filter>
<filter id="filter1_dd_125_2968" x="-1" y="4.505" width="26" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-0.495"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_125_2968"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-0.105"/>
<feGaussianBlur stdDeviation="0.05"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_125_2968" result="effect2_dropShadow_125_2968"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_125_2968" result="shape"/>
</filter>
<filter id="filter2_dd_125_2968" x="5.75" y="8.5" width="12.5" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_125_2968"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="0.1"/>
<feGaussianBlur stdDeviation="0.05"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_125_2968" result="effect2_dropShadow_125_2968"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_125_2968" result="shape"/>
</filter>
<linearGradient id="paint0_linear_125_2968" x1="0" y1="6" x2="17.28" y2="29.04" gradientUnits="userSpaceOnUse">
<stop stop-color="#DEB678"/>
<stop offset="1" stop-color="#C59141"/>
</linearGradient>
<linearGradient id="paint1_linear_125_2968" x1="6.75" y1="3.75" x2="14.25" y2="26.25" gradientUnits="userSpaceOnUse">
<stop stop-color="#DEB678"/>
<stop offset="1" stop-color="#B57F2D"/>
</linearGradient>
<linearGradient id="paint2_linear_125_2968" x1="0" y1="6" x2="17.28" y2="29.04" gradientUnits="userSpaceOnUse">
<stop stop-color="#DEB678"/>
<stop offset="1" stop-color="#C59141"/>
</linearGradient>
<linearGradient id="paint3_linear_125_2968" x1="6.75" y1="3.75" x2="14.25" y2="26.25" gradientUnits="userSpaceOnUse">
<stop stop-color="#DEB678"/>
<stop offset="1" stop-color="#B57F2D"/>
</linearGradient>
<linearGradient id="paint4_linear_125_2968" x1="9.13631" y1="7.22729" x2="12.8104" y2="20.0865" gradientUnits="userSpaceOnUse">
<stop offset="0.270833" stop-color="white"/>
<stop offset="1" stop-color="#F0F0F0"/>
</linearGradient>
<clipPath id="clip0_125_2968">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 6.9 KiB

View File

@@ -179,6 +179,15 @@
<Content Update="..\Microsoft.CmdPal.UI.ViewModels\Assets\template.zip">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Update="Assets\StoreLogo.dark.svg">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
</Content>
<Content Update="Assets\StoreLogo.light.svg">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
</Content>
<Content Update="Assets\WinGetLogo.svg">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
</Content>
</ItemGroup>
<ItemGroup>
<Page Update="Styles\Colors.xaml">

View File

@@ -15,8 +15,43 @@
mc:Ignorable="d">
<Page.Resources>
<converters:BoolNegationConverter x:Key="InvertedBoolConverter" />
<converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<!-- ControlFillColorQuarternaryBrush does not exist (yet) in WinUI, only in Windows Visual Library (Figma) -->
<ResourceDictionary x:Key="Default">
<LinearGradientBrush x:Key="CardGradient2Brush" StartPoint="0,0" EndPoint="0.5, 1">
<GradientStop Offset="0" Color="#38C8AEC4" />
<GradientStop Offset="1" Color="#383286EE" />
</LinearGradientBrush>
<ImageSource x:Key="StoreLogo">ms-appx:///Assets/StoreLogo.dark.svg</ImageSource>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<LinearGradientBrush x:Key="CardGradient2Brush" StartPoint="0,0" EndPoint="1, 1">
<!--<GradientStop Offset="0" Color="#E6F0FC" />
<GradientStop Offset="0.4" Color="#E6F0FC" />
<GradientStop Offset="1" Color="#F0F0F7" />-->
<GradientStop Offset="0.0" Color="#FFF6F9FF" />
<!-- Light cool white -->
<GradientStop Offset="0.4" Color="#FFEFF5FF" />
<!-- Hinted lavender/blue -->
<GradientStop Offset="0.7" Color="#FFF7FAFD" />
<!-- Very soft neutral white -->
<GradientStop Offset="1.0" Color="#FFF5F8FA" />
<!-- Slight bluish-gray tint -->
<!-- Faint peach glow -->
<!-- Soft peach -->
</LinearGradientBrush>
<ImageSource x:Key="StoreLogo">ms-appx:///Assets/StoreLogo.light.svg</ImageSource>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="CardGradient2Brush" Color="Transparent" />
<SolidColorBrush x:Key="CardGradient1Brush" Color="Transparent" />
<ImageSource x:Key="StoreLogo">ms-appx:///Assets/StoreLogo.dark.svg</ImageSource>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<converters:BoolNegationConverter x:Key="InvertedBoolConverter" />
<converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
</ResourceDictionary>
</Page.Resources>
<Grid>
@@ -31,7 +66,58 @@
MaxWidth="1000"
HorizontalAlignment="Stretch"
Spacing="{StaticResource SettingsCardSpacing}">
<Grid
Padding="16"
Background="{ThemeResource CardGradient2Brush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical">
<TextBlock
FontSize="16"
FontWeight="SemiBold"
Text="Discover more extensions" />
<TextBlock
Grid.Row="1"
VerticalAlignment="Top"
Text="Find more extensions on the Microsoft Store or WinGet" />
</StackPanel>
<StackPanel
HorizontalAlignment="Right"
Orientation="Vertical"
Spacing="4">
<StackPanel
HorizontalAlignment="Right"
Orientation="Horizontal"
Spacing="8">
<Button>
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16">
<Image AutomationProperties.AccessibilityView="Raw" Source="{ThemeResource StoreLogo}" />
</Viewbox>
<TextBlock Text="Microsoft Store" />
</StackPanel>
</Button>
<Button>
<StackPanel Orientation="Horizontal" Spacing="8">
<Viewbox Width="16">
<Image AutomationProperties.AccessibilityView="Raw" Source="ms-appx:///Assets/WinGet.svg" />
</Viewbox>
<TextBlock Text="WinGet" />
</StackPanel>
</Button>
</StackPanel>
<HyperlinkButton
HorizontalAlignment="Right"
Content="Make your own? Check the docs"
FontSize="12" />
</StackPanel>
</Grid>
<!-- toolbar 1 -->
<Grid Padding="0,0,0,8">
<AutoSuggestBox