Added window minimization + updated app icons
This commit is contained in:
Prozilla
parent
049cc62129
commit
b7bc57d9ce
23 changed files with 303 additions and 193 deletions
|
|
@ -1,23 +1,23 @@
|
|||
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M181.25 41.5H106.25L81.25 25H18.75C8.39453 25 0 33.3945 0 43.75V156.25C0 166.605 8.39453 175 18.75 175H181.25C191.605 175 200 166.605 200 156.25V60.25C200 49.8945 191.605 41.5 181.25 41.5Z" fill="url(#paint0_linear_4_22)"/>
|
||||
<rect y="61" width="200" height="114" rx="18" fill="#576574"/>
|
||||
<g filter="url(#filter0_d_4_22)">
|
||||
<mask id="mask0_159_76" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="13" width="200" height="175">
|
||||
<path d="M25 188H175C188.789 188 200 176.789 200 163V63C200 49.2109 188.789 38 175 38H112.5C108.555 38 104.844 36.1641 102.5 33L95 23C90.2734 16.7109 82.8516 13 75 13H25C11.2109 13 0 24.2109 0 38V163C0 176.789 11.2109 188 25 188Z" fill="#FF6B6B"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_159_76)">
|
||||
<path d="M25 188H175C188.789 188 200 176.789 200 163V63C200 49.2109 188.789 38 175 38H112.5C108.555 38 104.844 36.1641 102.5 33L95 23C90.2734 16.7109 82.8516 13 75 13H25C11.2109 13 0 24.2109 0 38V163C0 176.789 11.2109 188 25 188Z" fill="#FF6B6B"/>
|
||||
<g filter="url(#filter0_d_159_76)">
|
||||
<rect y="60" width="200" height="128" rx="25" fill="#576574"/>
|
||||
</g>
|
||||
<rect x="55" y="108" width="90" height="20" rx="10" fill="#8395A7"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_4_22" x="35" y="88" width="130" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<filter id="filter0_d_159_76" x="-20" y="40" width="240" height="168" 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/>
|
||||
<feGaussianBlur stdDeviation="10"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_22"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_22" result="shape"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_159_76"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_159_76" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_4_22" x1="100" y1="25" x2="100" y2="175" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.109375" stop-color="#FF6B6B"/>
|
||||
<stop offset="0.390625" stop-color="#7A1F1F"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,10 +1,10 @@
|
|||
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M181.25 175H18.75C8.39453 175 0 166.605 0 156.25V43.75C0 33.3945 8.39453 25 18.75 25H181.25C191.605 25 200 33.3945 200 43.75V156.25C200 166.605 191.605 175 181.25 175ZM43.75 46.875C31.6687 46.875 21.875 56.6687 21.875 68.75C21.875 80.8313 31.6687 90.625 43.75 90.625C55.8313 90.625 65.625 80.8313 65.625 68.75C65.625 56.6687 55.8313 46.875 43.75 46.875ZM25 150H175V106.25L140.814 72.0645C138.984 70.234 136.016 70.234 134.185 72.0645L81.25 125L59.5645 103.314C57.734 101.484 54.766 101.484 52.9352 103.314L25 131.25V150Z" fill="#2E86DE"/>
|
||||
<path d="M181.25 175H18.75C8.39453 175 0 166.605 0 156.25V43.75C0 33.3945 8.39453 25 18.75 25H181.25C191.605 25 200 33.3945 200 43.75V156.25C200 166.605 191.605 175 181.25 175ZM43.75 46.875C31.6688 46.875 21.875 56.6688 21.875 68.75C21.875 80.8312 31.6688 90.625 43.75 90.625C55.8312 90.625 65.625 80.8312 65.625 68.75C65.625 56.6688 55.8312 46.875 43.75 46.875ZM25 150H175V106.25L140.814 72.0645C138.984 70.234 136.016 70.234 134.185 72.0645L81.25 125L59.5645 103.314C57.734 101.484 54.766 101.484 52.9352 103.314L25 131.25V150Z" fill="#2E86DE"/>
|
||||
<g filter="url(#filter0_d_127_79)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.875 68.75C21.875 56.6687 31.6687 46.875 43.75 46.875C55.8312 46.875 65.625 56.6687 65.625 68.75C65.625 80.8312 55.8312 90.625 43.75 90.625C31.6687 90.625 21.875 80.8312 21.875 68.75Z" fill="#FECA57"/>
|
||||
<path d="M21.875 68.75C21.875 56.6687 31.6687 46.875 43.75 46.875C55.8312 46.875 65.625 56.6687 65.625 68.75C65.625 80.8312 55.8312 90.625 43.75 90.625C31.6687 90.625 21.875 80.8312 21.875 68.75Z" fill="#FECA57"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_127_79)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M175 150H25V131.25L52.9352 103.314C54.766 101.484 57.734 101.484 59.5645 103.314L81.25 125L134.185 72.0644C136.016 70.234 138.984 70.234 140.814 72.0644L175 106.25V150Z" fill="#1DD169"/>
|
||||
<path d="M175 150H25V131.25L52.9352 103.314C54.766 101.484 57.734 101.484 59.5645 103.314L81.25 125L134.185 72.0644C136.016 70.234 138.984 70.234 140.814 72.0644L175 106.25V150Z" fill="#10AC84"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_127_79" x="1.875" y="26.875" width="83.75" height="83.75" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
<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/>
|
||||
<feGaussianBlur stdDeviation="10"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_127_79"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_127_79" result="shape"/>
|
||||
|
|
@ -22,7 +21,6 @@
|
|||
<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/>
|
||||
<feGaussianBlur stdDeviation="10"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_127_79"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_127_79" result="shape"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,22 +1,23 @@
|
|||
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_63_42)">
|
||||
<mask id="mask0_63_42" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="0" width="193" height="200">
|
||||
<path d="M37.4375 138.791C36.2656 139.143 35.0938 139.455 34 139.807V13.3021C43.9609 10.5291 56.2656 8.02942 68.375 8.02942C82.6328 8.02942 95.0547 11.5836 105.719 14.63L106.227 14.7862C117.359 17.9498 126.695 20.5276 137.125 20.5276C147.594 20.5276 157.789 17.8717 165.641 15.0206C169.508 13.6145 172.633 12.2085 174.781 11.193C175.836 10.6853 176.656 10.2557 177.203 9.98226C177.477 9.82603 177.633 9.74792 177.75 9.6698L177.828 9.63075C181.695 7.44357 186.461 7.44357 190.289 9.70886C194.117 11.9742 196.5 16.0751 196.5 20.5276V120.513C196.5 125.239 193.844 129.574 189.586 131.683L184 120.513C189.586 131.683 189.586 131.683 189.586 131.683H189.547L189.469 131.722L189.195 131.878C188.961 131.996 188.609 132.152 188.219 132.347C187.359 132.738 186.188 133.284 184.703 133.909C181.695 135.198 177.477 136.878 172.398 138.557C162.32 141.955 148.375 145.509 134 145.509C119.547 145.509 108.531 141.838 99.2344 138.752L98.8438 138.635C89.4688 135.511 81.7734 133.011 71.5 133.011C60.7578 133.011 48.0234 135.745 37.4375 138.791Z" fill="#EE5253"/>
|
||||
<path d="M34 187.5V12.5C34 5.58594 27.2969 0 19 0C10.7031 0 4 5.58594 4 12.5V187.5C4 194.414 10.7031 200 19 200C27.2969 200 34 194.414 34 187.5Z" fill="#AC7653"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_63_42)">
|
||||
<path d="M37.4375 138.791C36.2656 139.143 35.0938 139.455 34 139.807V13.3021C43.9609 10.5291 56.2656 8.02942 68.375 8.02942C82.6328 8.02942 95.0547 11.5836 105.719 14.63L106.227 14.7862C117.359 17.9498 126.695 20.5276 137.125 20.5276C147.594 20.5276 157.789 17.8717 165.641 15.0206C169.508 13.6145 172.633 12.2085 174.781 11.193C175.836 10.6853 176.656 10.2557 177.203 9.98226C177.477 9.82603 177.633 9.74792 177.75 9.6698L177.828 9.63075C181.695 7.44357 186.461 7.44357 190.289 9.70886C194.117 11.9742 196.5 16.0751 196.5 20.5276V120.513C196.5 125.239 193.844 129.574 189.586 131.683L184 120.513C189.586 131.683 189.586 131.683 189.586 131.683H189.547L189.469 131.722L189.195 131.878C188.961 131.996 188.609 132.152 188.219 132.347C187.359 132.738 186.188 133.284 184.703 133.909C181.695 135.198 177.477 136.878 172.398 138.557C162.32 141.955 148.375 145.509 134 145.509C119.547 145.509 108.531 141.838 99.2344 138.752L98.8438 138.635C89.4688 135.511 81.7734 133.011 71.5 133.011C60.7578 133.011 48.0234 135.745 37.4375 138.791Z" fill="#EE5253"/>
|
||||
<g filter="url(#filter0_d_63_42)">
|
||||
<path d="M25 12.5276V187.502C25 194.415 19.4141 200 12.5 200C5.58594 200 0 194.415 0 187.502V12.5276C0 5.61454 5.58594 0.029421 12.5 0.029421C19.4141 0.029421 25 5.61454 25 12.5276ZM40.9375 130.791C39.7656 131.143 38.5937 131.455 37.5 131.807V5.30208C47.4609 2.52905 59.7656 0.029421 71.875 0.029421C86.1328 0.029421 98.5547 3.58359 109.219 6.63001L109.727 6.78624C120.859 9.94984 130.195 12.5276 140.625 12.5276C151.094 12.5276 161.289 9.87172 169.141 7.02058C173.008 5.61454 176.133 4.20849 178.281 3.19302C179.336 2.68528 180.156 2.25566 180.703 1.98226C180.977 1.82603 181.133 1.74792 181.25 1.6698L181.328 1.63075C185.195 -0.55643 189.961 -0.55643 193.789 1.70886C197.617 3.97415 200 8.07511 200 12.5276V112.513C200 117.239 197.344 121.574 193.086 123.683L187.5 112.513C193.086 123.683 193.086 123.683 193.086 123.683H193.047L192.969 123.722L192.695 123.878C192.461 123.996 192.109 124.152 191.719 124.347C190.859 124.738 189.687 125.284 188.203 125.909C185.195 127.198 180.977 128.878 175.898 130.557C165.82 133.955 151.875 137.509 137.5 137.509C123.047 137.509 112.031 133.838 102.734 130.752L102.344 130.635C92.9688 127.511 85.2734 125.011 75 125.011C64.2578 125.011 51.5234 127.745 40.9375 130.791Z" fill="#EE5253"/>
|
||||
<path d="M34 187.5V12.5C34 5.58594 27.2969 0 19 0C10.7031 0 4 5.58594 4 12.5V187.5C4 194.414 10.7031 200 19 200C27.2969 200 34 194.414 34 187.5Z" fill="#AC7653"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_63_42" x="-20" y="-20" width="240" height="240" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<filter id="filter0_d_63_42" x="-16" y="-20" width="70" height="240" 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/>
|
||||
<feGaussianBlur stdDeviation="10"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_63_42"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_63_42" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_63_42">
|
||||
<rect width="200" height="200" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 3.3 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M190.391 123.321L173.75 113.711C175.43 104.649 175.43 95.3519 173.75 86.2894L190.391 76.6801C192.305 75.5863 193.164 73.3207 192.539 71.2113C188.204 57.3051 180.821 44.7269 171.172 34.2582C169.688 32.6566 167.266 32.266 165.391 33.3597L148.75 42.9691C141.758 36.9535 133.711 32.3051 125 29.2582V10.0785C125 7.89099 123.477 5.97693 121.329 5.50818C106.993 2.30505 92.3051 2.4613 78.6723 5.50818C76.5239 5.97693 75.0004 7.89099 75.0004 10.0785V29.2972C66.3286 32.3832 58.2817 37.0316 51.2504 43.0082L34.6489 33.3988C32.7348 32.3051 30.352 32.6566 28.8676 34.2972C19.2192 44.7269 11.8364 57.3051 7.50044 71.2504C6.83637 73.3597 7.73481 75.6254 9.64887 76.7191L26.2895 86.3285C24.6098 95.391 24.6098 104.688 26.2895 113.75L9.64887 123.36C7.73481 124.453 6.87544 126.719 7.50044 128.828C11.8364 142.735 19.2192 155.313 28.8676 165.782C30.352 167.383 32.7739 167.774 34.6489 166.68L51.2895 157.071C58.2817 163.086 66.3286 167.735 75.0395 170.782V190C75.0395 192.188 76.5629 194.102 78.7114 194.571C93.0473 197.774 107.735 197.618 121.368 194.571C123.516 194.102 125.039 192.188 125.039 190V170.782C133.711 167.696 141.758 163.047 148.789 157.071L165.43 166.68C167.344 167.774 169.727 167.422 171.211 165.782C180.86 155.352 188.243 142.774 192.579 128.828C193.164 126.68 192.305 124.414 190.391 123.321ZM100 131.25C82.7739 131.25 68.7504 117.227 68.7504 100C68.7504 82.7738 82.7739 68.7504 100 68.7504C117.227 68.7504 131.25 82.7738 131.25 100C131.25 117.227 117.227 131.25 100 131.25Z" fill="#8395A7"/>
|
||||
<path d="M193.984 65.0781C195.234 68.4766 194.179 72.2656 191.484 74.6875L174.569 90.0781C174.999 93.3203 175.234 96.6406 175.234 100C175.234 103.359 174.999 106.68 174.569 109.922L191.484 125.312C194.179 127.734 195.234 131.523 193.984 134.922C192.265 139.57 190.194 144.023 187.812 148.32L185.976 151.484C183.398 155.781 180.507 159.844 177.343 163.672C175.038 166.484 171.21 167.422 167.773 166.328L146.015 159.414C140.78 163.438 134.999 166.797 128.827 169.336L123.944 191.641C123.163 195.195 120.429 198.008 116.835 198.594C111.444 199.492 105.898 199.961 100.233 199.961C94.5694 199.961 89.0226 199.492 83.6319 198.594C80.0382 198.008 77.3038 195.195 76.5226 191.641L71.6397 169.336C65.4679 166.797 59.6866 163.438 54.4522 159.414L32.7335 166.367C29.296 167.461 25.4679 166.484 23.1632 163.711C19.9991 159.883 17.1085 155.82 14.5304 151.523L12.6944 148.359C10.3116 144.062 8.24131 139.609 6.52256 134.961C5.27256 131.563 6.32725 127.773 9.02256 125.352L25.9366 109.961C25.5069 106.68 25.2726 103.359 25.2726 100C25.2726 96.6406 25.5069 93.3203 25.9366 90.0781L9.02256 74.6875C6.32725 72.2656 5.27256 68.4766 6.52256 65.0781C8.24131 60.4297 10.3116 55.9766 12.6944 51.6797L14.5304 48.5156C17.1085 44.2187 19.9991 40.1563 23.1632 36.3281C25.4679 33.5156 29.296 32.5781 32.7335 33.6719L54.4913 40.5859C59.7257 36.5625 65.5069 33.2031 71.6788 30.6641L76.5616 8.35937C77.3429 4.80469 80.0772 1.99219 83.671 1.40625C89.0616 0.46875 94.6085 0 100.273 0C105.937 0 111.484 0.46875 116.874 1.36719C120.468 1.95312 123.202 4.76562 123.984 8.32031L128.866 30.625C135.038 33.1641 140.819 36.5234 146.054 40.5469L167.812 33.6328C171.249 32.5391 175.077 33.5156 177.382 36.2891C180.546 40.1172 183.437 44.1797 186.015 48.4766L187.851 51.6406C190.234 55.9375 192.304 60.3906 194.023 65.0391L193.984 65.0781ZM100.273 131.25C108.561 131.25 116.509 127.958 122.37 122.097C128.23 116.237 131.523 108.288 131.523 100C131.523 91.712 128.23 83.7634 122.37 77.9029C116.509 72.0424 108.561 68.75 100.273 68.75C91.9845 68.75 84.036 72.0424 78.1755 77.9029C72.315 83.7634 69.0226 91.712 69.0226 100C69.0226 108.288 72.315 116.237 78.1755 122.097C84.036 127.958 91.9845 131.25 100.273 131.25Z" fill="#8395A7"/>
|
||||
<g filter="url(#filter0_d_98_54)">
|
||||
<circle cx="100" cy="100" r="40" fill="#C8D6E5"/>
|
||||
</g>
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
<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/>
|
||||
<feGaussianBlur stdDeviation="10"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_98_54"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_98_54" result="shape"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 3 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="25" width="200" height="150" rx="18" fill="#222F3E"/>
|
||||
<rect y="25" width="200" height="150" rx="25" fill="#5F27CD"/>
|
||||
<g filter="url(#filter0_d_4_23)">
|
||||
<path d="M87.7901 103.813L49.5288 142.476C47.6835 144.341 44.6918 144.341 42.8467 142.476L38.3839 137.967C36.5418 136.105 36.5382 133.088 38.3761 131.223L68.6991 100.437L38.3763 69.6522C36.5384 67.7863 36.542 64.7694 38.3841 62.9079L42.8467 58.3985C44.692 56.5338 47.6837 56.5338 49.5288 58.3985L87.7901 97.0612C89.6354 98.9257 89.6354 101.949 87.7901 103.813ZM163 140.225V133.859C163 131.222 160.885 129.085 158.275 129.085H98.4251C95.8155 129.085 93.7001 131.222 93.7001 133.859V140.225C93.7001 142.862 95.8155 145 98.4251 145H158.275C160.885 145 163 142.862 163 140.225Z" fill="white"/>
|
||||
</g>
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
<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/>
|
||||
<feGaussianBlur stdDeviation="10"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_23"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_23" result="shape"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="6.10352e-05" width="200" height="200" rx="42" fill="#10AC84"/>
|
||||
<g filter="url(#filter0_d_63_38)">
|
||||
<path d="M162.07 57.04L142.63 142H109.51L99.6705 93.76L89.8305 142H56.7105L37.2705 57.04H65.9505L73.6305 110.56L85.1505 57.04H114.19L125.71 110.56L133.39 57.04H162.07Z" fill="white"/>
|
||||
<path d="M162.07 57.04L142.63 142H109.51L99.6705 93.76L89.8305 142H56.7105L37.2705 57.04H65.9505L73.6305 110.56L85.1505 57.04H114.19L125.71 110.56L133.39 57.04H162.07Z" fill="#C8D6E5"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_63_38" x="13.7411" y="33.5106" width="171.859" height="132.019" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 237 KiB After Width: | Height: | Size: 287 KiB |
|
|
@ -1,39 +1,43 @@
|
|||
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_21_81)">
|
||||
<mask id="mask0_158_164" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="6" width="175" height="185">
|
||||
<path d="M105.792 9C108.101 5 113.875 5 116.184 9L139.377 49.1704C141.686 53.1704 138.799 58.1704 134.181 58.1704H87.7958C83.177 58.1704 80.2902 53.1704 82.5996 49.1704L105.792 9Z" fill="#10AC84"/>
|
||||
<path d="M32.0528 47.109C31.0566 43.3911 34.4587 39.989 38.1765 40.9852L76.413 51.2306C80.1308 52.2268 81.376 56.8742 78.6544 59.5958L50.6634 87.5868C47.9417 90.3085 43.2944 89.0632 42.2982 85.3454L32.0528 47.109Z" fill="#10AC84"/>
|
||||
<path d="M11.0149 110.663C8.49254 108.897 8.828 105.062 11.6187 103.761L41.1996 89.9673C43.9903 88.6659 47.1433 90.8736 46.8749 93.9411L44.0302 126.456C43.7619 129.523 40.2735 131.15 37.7511 129.384L11.0149 110.663Z" fill="#10AC84"/>
|
||||
<path d="M32.0528 47.109C31.0566 43.3912 34.4587 39.9891 38.1765 40.9853L76.4129 51.2307C80.1308 52.2269 81.376 56.8742 78.6543 59.5959L50.6634 87.5868C47.9417 90.3085 43.2944 89.0633 42.2982 85.3454L32.0528 47.109Z" fill="#10AC84"/>
|
||||
<path d="M11.0148 110.663C8.49251 108.897 8.82797 105.062 11.6187 103.761L41.1996 89.9672C43.9903 88.6659 47.1432 90.8736 46.8749 93.9411L44.0302 126.456C43.7618 129.523 40.2734 131.15 37.7511 129.384L11.0148 110.663Z" fill="#10AC84"/>
|
||||
<path d="M25.5812 162.489C23.2732 162.408 21.918 159.859 23.1418 157.901L37.4348 135.027C38.6586 133.069 41.5436 133.169 42.6278 135.208L55.2904 159.023C56.3746 161.062 54.8448 163.51 52.5368 163.43L25.5812 162.489Z" fill="#10AC84"/>
|
||||
<path d="M183.179 119.324C183.179 158.864 151.125 190.918 111.585 190.918C72.0443 190.918 39.9904 158.864 39.9904 119.324C39.9904 79.7835 72.0443 47.7296 111.585 47.7296C151.125 47.7296 183.179 79.7835 183.179 119.324Z" fill="#1DD1A1"/>
|
||||
<path d="M89.9213 144.504C85.1693 144.504 80.8013 143.4 76.8173 141.192C72.8813 138.984 69.7373 135.912 67.3853 131.976C65.0813 127.992 63.9293 123.528 63.9293 118.584C63.9293 113.64 65.0813 109.2 67.3853 105.264C69.7373 101.328 72.8813 98.256 76.8173 96.048C80.8013 93.84 85.1693 92.736 89.9213 92.736C94.6733 92.736 99.0173 93.84 102.953 96.048C106.937 98.256 110.057 101.328 112.313 105.264C114.617 109.2 115.769 113.64 115.769 118.584C115.769 123.528 114.617 127.992 112.313 131.976C110.009 135.912 106.889 138.984 102.953 141.192C99.0173 143.4 94.6733 144.504 89.9213 144.504ZM89.9213 133.272C93.9533 133.272 97.1693 131.928 99.5693 129.24C102.017 126.552 103.241 123 103.241 118.584C103.241 114.12 102.017 110.568 99.5693 107.928C97.1693 105.24 93.9533 103.896 89.9213 103.896C85.8413 103.896 82.5773 105.216 80.1293 107.856C77.7293 110.496 76.5293 114.072 76.5293 118.584C76.5293 123.048 77.7293 126.624 80.1293 129.312C82.5773 131.952 85.8413 133.272 89.9213 133.272Z" fill="#222F3E"/>
|
||||
<path d="M140.907 144.504C137.211 144.504 133.899 143.904 130.971 142.704C128.043 141.504 125.691 139.728 123.915 137.376C122.187 135.024 121.275 132.192 121.179 128.88H134.283C134.475 130.752 135.123 132.192 136.227 133.2C137.331 134.16 138.771 134.64 140.547 134.64C142.371 134.64 143.811 134.232 144.867 133.416C145.923 132.552 146.451 131.376 146.451 129.888C146.451 128.64 146.019 127.608 145.155 126.792C144.339 125.976 143.307 125.304 142.059 124.776C140.859 124.248 139.131 123.648 136.875 122.976C133.611 121.968 130.947 120.96 128.883 119.952C126.819 118.944 125.043 117.456 123.555 115.488C122.067 113.52 121.323 110.952 121.323 107.784C121.323 103.08 123.027 99.408 126.435 96.768C129.843 94.08 134.283 92.736 139.755 92.736C145.323 92.736 149.811 94.08 153.219 96.768C156.627 99.408 158.451 103.104 158.691 107.856H145.371C145.275 106.224 144.675 104.952 143.571 104.04C142.467 103.08 141.051 102.6 139.323 102.6C137.835 102.6 136.635 103.008 135.723 103.824C134.811 104.592 134.355 105.72 134.355 107.208C134.355 108.84 135.123 110.112 136.659 111.024C138.195 111.936 140.595 112.92 143.859 113.976C147.123 115.08 149.763 116.136 151.779 117.144C153.843 118.152 155.619 119.616 157.107 121.536C158.595 123.456 159.339 125.928 159.339 128.952C159.339 131.832 158.595 134.448 157.107 136.8C155.667 139.152 153.555 141.024 150.771 142.416C147.987 143.808 144.699 144.504 140.907 144.504Z" fill="#222F3E"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_158_164)">
|
||||
<path d="M105.792 9C108.101 5 113.875 5 116.184 9L139.377 49.1704C141.686 53.1704 138.799 58.1704 134.181 58.1704H87.7958C83.177 58.1704 80.2902 53.1704 82.5996 49.1704L105.792 9Z" fill="#10AC84"/>
|
||||
<path d="M32.0528 47.1091C31.0566 43.3912 34.4587 39.9892 38.1765 40.9854L76.413 51.2308C80.1308 52.227 81.376 56.8743 78.6544 59.5959L50.6634 87.5869C47.9417 90.3086 43.2944 89.0633 42.2982 85.3455L32.0528 47.1091Z" fill="#10AC84"/>
|
||||
<path d="M11.0149 110.663C8.49254 108.897 8.828 105.062 11.6187 103.761L41.1996 89.9671C43.9903 88.6658 47.1433 90.8735 46.8749 93.941L44.0302 126.456C43.7619 129.523 40.2735 131.15 37.7511 129.384L11.0149 110.663Z" fill="#10AC84"/>
|
||||
<path d="M25.5813 162.489C23.2733 162.408 21.918 159.859 23.1418 157.901L37.4348 135.027C38.6586 133.069 41.5436 133.169 42.6278 135.208L55.2904 159.023C56.3746 161.062 54.8449 163.511 52.5369 163.43L25.5813 162.489Z" fill="#10AC84"/>
|
||||
<g filter="url(#filter0_d_21_81)">
|
||||
<g filter="url(#filter0_d_158_164)">
|
||||
<circle cx="111.585" cy="119.324" r="71.5944" fill="#1DD1A1"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_21_81)">
|
||||
<path d="M111.827 117.595V119.669C111.827 123.583 111.276 127.099 110.174 130.216C109.096 133.309 107.561 135.958 105.569 138.161C103.577 140.341 101.221 142.016 98.5026 143.188C95.7838 144.337 92.7838 144.911 89.5026 144.911C86.1979 144.911 83.1744 144.337 80.4323 143.188C77.7135 142.016 75.3463 140.341 73.3307 138.161C71.3385 135.958 69.7916 133.309 68.6901 130.216C67.6119 127.099 67.0729 123.583 67.0729 119.669V117.595C67.0729 113.681 67.6119 110.165 68.6901 107.048C69.7916 103.931 71.3268 101.282 73.2955 99.1024C75.2877 96.8993 77.6432 95.2235 80.3619 94.0751C83.1041 92.9032 86.1276 92.3173 89.4323 92.3173C92.7135 92.3173 95.7135 92.9032 98.4323 94.0751C101.174 95.2235 103.542 96.8993 105.534 99.1024C107.526 101.282 109.073 103.931 110.174 107.048C111.276 110.165 111.827 113.681 111.827 117.595ZM99.3112 119.669V117.524C99.3112 114.993 99.0885 112.766 98.6432 110.845C98.2213 108.899 97.5885 107.27 96.7448 105.958C95.901 104.645 94.858 103.661 93.6158 103.005C92.3971 102.325 91.0026 101.985 89.4323 101.985C87.7916 101.985 86.3619 102.325 85.1432 103.005C83.9244 103.661 82.9049 104.645 82.0846 105.958C81.2643 107.27 80.6432 108.899 80.2213 110.845C79.8229 112.766 79.6237 114.993 79.6237 117.524V119.669C79.6237 122.177 79.8229 124.403 80.2213 126.349C80.6432 128.27 81.2643 129.899 82.0846 131.235C82.9283 132.571 83.9596 133.579 85.1783 134.259C86.4205 134.938 87.8619 135.278 89.5026 135.278C91.0729 135.278 92.4674 134.938 93.6862 134.259C94.9049 133.579 95.9244 132.571 96.7448 131.235C97.5885 129.899 98.2213 128.27 98.6432 126.349C99.0885 124.403 99.3112 122.177 99.3112 119.669ZM144.592 130.602C144.592 129.806 144.475 129.091 144.241 128.458C144.006 127.802 143.573 127.192 142.94 126.63C142.307 126.067 141.393 125.505 140.198 124.942C139.026 124.356 137.479 123.747 135.557 123.114C133.307 122.364 131.139 121.52 129.053 120.583C126.967 119.622 125.104 118.509 123.464 117.243C121.823 115.954 120.522 114.454 119.561 112.743C118.6 111.009 118.12 108.993 118.12 106.696C118.12 104.493 118.612 102.513 119.596 100.755C120.581 98.9735 121.952 97.4618 123.71 96.2196C125.491 94.954 127.577 93.993 129.967 93.3368C132.358 92.6571 134.971 92.3173 137.807 92.3173C141.557 92.3173 144.862 92.9735 147.721 94.286C150.604 95.5751 152.854 97.4149 154.471 99.8055C156.112 102.173 156.932 104.974 156.932 108.208H144.663C144.663 106.919 144.393 105.782 143.854 104.798C143.339 103.813 142.553 103.04 141.499 102.477C140.444 101.915 139.12 101.634 137.526 101.634C135.979 101.634 134.678 101.868 133.624 102.337C132.569 102.806 131.772 103.438 131.233 104.235C130.694 105.009 130.424 105.864 130.424 106.802C130.424 107.575 130.635 108.278 131.057 108.911C131.503 109.52 132.124 110.095 132.921 110.634C133.741 111.173 134.725 111.688 135.874 112.181C137.046 112.673 138.358 113.153 139.811 113.622C142.53 114.489 144.944 115.462 147.053 116.54C149.186 117.595 150.979 118.802 152.432 120.161C153.909 121.497 155.022 123.02 155.772 124.731C156.546 126.442 156.932 128.376 156.932 130.532C156.932 132.829 156.487 134.868 155.596 136.649C154.706 138.431 153.428 139.942 151.764 141.184C150.1 142.403 148.108 143.329 145.788 143.962C143.467 144.595 140.878 144.911 138.018 144.911C135.393 144.911 132.803 144.583 130.249 143.927C127.717 143.247 125.421 142.216 123.358 140.833C121.296 139.427 119.643 137.634 118.401 135.454C117.182 133.251 116.573 130.638 116.573 127.614H128.948C128.948 129.114 129.147 130.38 129.546 131.411C129.944 132.442 130.53 133.274 131.303 133.907C132.077 134.516 133.026 134.962 134.151 135.243C135.276 135.501 136.565 135.63 138.018 135.63C139.589 135.63 140.854 135.407 141.815 134.962C142.776 134.493 143.479 133.884 143.924 133.134C144.37 132.36 144.592 131.516 144.592 130.602Z" fill="#222F3E"/>
|
||||
<g filter="url(#filter1_d_158_164)">
|
||||
<path d="M89.9213 144.504C85.1693 144.504 80.8013 143.4 76.8173 141.192C72.8813 138.984 69.7373 135.912 67.3853 131.976C65.0813 127.992 63.9293 123.528 63.9293 118.584C63.9293 113.64 65.0813 109.2 67.3853 105.264C69.7373 101.328 72.8813 98.256 76.8173 96.048C80.8013 93.84 85.1693 92.736 89.9213 92.736C94.6733 92.736 99.0173 93.84 102.953 96.048C106.937 98.256 110.057 101.328 112.313 105.264C114.617 109.2 115.769 113.64 115.769 118.584C115.769 123.528 114.617 127.992 112.313 131.976C110.009 135.912 106.889 138.984 102.953 141.192C99.0173 143.4 94.6733 144.504 89.9213 144.504ZM89.9213 133.272C93.9533 133.272 97.1693 131.928 99.5693 129.24C102.017 126.552 103.241 123 103.241 118.584C103.241 114.12 102.017 110.568 99.5693 107.928C97.1693 105.24 93.9533 103.896 89.9213 103.896C85.8413 103.896 82.5773 105.216 80.1293 107.856C77.7293 110.496 76.5293 114.072 76.5293 118.584C76.5293 123.048 77.7293 126.624 80.1293 129.312C82.5773 131.952 85.8413 133.272 89.9213 133.272ZM140.907 144.504C137.211 144.504 133.899 143.904 130.971 142.704C128.043 141.504 125.691 139.728 123.915 137.376C122.187 135.024 121.275 132.192 121.179 128.88H134.283C134.475 130.752 135.123 132.192 136.227 133.2C137.331 134.16 138.771 134.64 140.547 134.64C142.371 134.64 143.811 134.232 144.867 133.416C145.923 132.552 146.451 131.376 146.451 129.888C146.451 128.64 146.019 127.608 145.155 126.792C144.339 125.976 143.307 125.304 142.059 124.776C140.859 124.248 139.131 123.648 136.875 122.976C133.611 121.968 130.947 120.96 128.883 119.952C126.819 118.944 125.043 117.456 123.555 115.488C122.067 113.52 121.323 110.952 121.323 107.784C121.323 103.08 123.027 99.408 126.435 96.768C129.843 94.08 134.283 92.736 139.755 92.736C145.323 92.736 149.811 94.08 153.219 96.768C156.627 99.408 158.451 103.104 158.691 107.856H145.371C145.275 106.224 144.675 104.952 143.571 104.04C142.467 103.08 141.051 102.6 139.323 102.6C137.835 102.6 136.635 103.008 135.723 103.824C134.811 104.592 134.355 105.72 134.355 107.208C134.355 108.84 135.123 110.112 136.659 111.024C138.195 111.936 140.595 112.92 143.859 113.976C147.123 115.08 149.763 116.136 151.779 117.144C153.843 118.152 155.619 119.616 157.107 121.536C158.595 123.456 159.339 125.928 159.339 128.952C159.339 131.832 158.595 134.448 157.107 136.8C155.667 139.152 153.555 141.024 150.771 142.416C147.987 143.808 144.699 144.504 140.907 144.504Z" fill="#222F3E"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_21_81" x="19.9905" y="27.7296" width="183.189" height="183.189" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<filter id="filter0_d_158_164" x="19.9904" y="27.7297" width="183.189" height="183.189" 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/>
|
||||
<feGaussianBlur stdDeviation="10"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_21_81"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_21_81" result="shape"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_158_164"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_158_164" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_21_81" x="47.0729" y="72.3173" width="129.859" height="92.5938" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<filter id="filter1_d_158_164" x="43.9293" y="72.7361" width="135.41" height="91.7678" 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/>
|
||||
<feGaussianBlur stdDeviation="10"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_21_81"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_21_81" result="shape"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_158_164"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_158_164" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_21_81">
|
||||
<rect width="200" height="200" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 8.4 KiB |
|
|
@ -1,3 +1,3 @@
|
|||
<options>
|
||||
<pins>terminal,settings,media-viewer,text-editor,file-explorer,wordle,balls,minesweeper</pins>
|
||||
<pins>file-explorer,terminal,settings,media-viewer,text-editor,wordle,balls,minesweeper</pins>
|
||||
</options>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" style="background-color: hsl(212, 14%, 10%);">
|
||||
<head>
|
||||
<title>ProzillaOS | Web-based Operating System</title>
|
||||
<meta name="description" content="ProzillaOS is an open-source web-based operating system inspired by Ubuntu Linux and Windows made with React.js by Prozilla."/>
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@ export const Taskbar = memo(() => {
|
|||
<Network/>
|
||||
<Volume/>
|
||||
<Calendar/>
|
||||
<button title="Show Desktop" id="desktop-button"/>
|
||||
<button title="Show Desktop" id="desktop-button" onClick={() => { windowsManager.minimizeAll(); }}/>
|
||||
</div>
|
||||
</div>
|
||||
</>);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
--taskbar-height: 3rem;
|
||||
--taskbar-color: rgba(0, 0, 0, 75%);
|
||||
--taskbar-button-hover-color: rgba(255, 255, 255, 5%);
|
||||
--taskbar-filter: blur(1rem);
|
||||
}
|
||||
|
||||
.Taskbar {
|
||||
|
|
@ -12,7 +13,7 @@
|
|||
width: 100%;
|
||||
height: var(--taskbar-height);
|
||||
background-color: var(--taskbar-color);
|
||||
backdrop-filter: blur(15px);
|
||||
backdrop-filter: var(--taskbar-filter);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import { removeFromArray } from "../../../features/utils/array.js";
|
|||
* @param {Application} props.app
|
||||
* @param {ModalsManager} props.modalsManager
|
||||
* @param {string[]} props.pins
|
||||
* @param {boolean} props.focused
|
||||
*/
|
||||
export const AppButton = memo(({ app, modalsManager, pins, active, visible }) => {
|
||||
const isPinned = pins.includes(app.id);
|
||||
|
|
@ -53,7 +54,17 @@ export const AppButton = memo(({ app, modalsManager, pins, active, visible }) =>
|
|||
key={app.id}
|
||||
tabIndex={0}
|
||||
className={classNames.join(" ")}
|
||||
onClick={() => { windowsManager.open(app.id); }}
|
||||
onClick={() => {
|
||||
const windowId = windowsManager.getAppWindowId(app.id);
|
||||
|
||||
if (!active) {
|
||||
windowsManager.open(app.id);
|
||||
} else if (!windowsManager.isFocused(windowId)) {
|
||||
windowsManager.focus(windowId);
|
||||
} else {
|
||||
windowsManager.setMinimized(windowId);
|
||||
}
|
||||
}}
|
||||
onContextMenu={(event) => {
|
||||
if (visible)
|
||||
onContextMenu(event);
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
border-top-left-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
backdrop-filter: blur(15px);
|
||||
backdrop-filter: var(--taskbar-filter);
|
||||
transform: none;
|
||||
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
border-top-left-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
backdrop-filter: blur(15px);
|
||||
backdrop-filter: var(--taskbar-filter);
|
||||
transform: none;
|
||||
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -38,25 +38,24 @@ import { useScreenDimensions } from "../../hooks/utils/screen.js";
|
|||
* @param {Function} props.onInteract
|
||||
* @param {object} props.options
|
||||
* @param {boolean} props.active
|
||||
* @param {boolean} props.minimized
|
||||
* @param {Function} props.toggleMinimized
|
||||
*/
|
||||
export const WindowView = memo(({ id, app, size, position, onInteract, options, active }) => {
|
||||
export const WindowView = memo(({ id, app, size, position, onInteract, options, active, minimized, toggleMinimized }) => {
|
||||
const windowsManager = useWindowsManager();
|
||||
const nodeRef = useRef(null);
|
||||
const [modalsManager, modals] = useModals();
|
||||
|
||||
const [startSize, setStartSize] = useState(size);
|
||||
const [startPosition, setStartPosition] = useState(position);
|
||||
|
||||
const [maximized, setMaximized] = useState(false);
|
||||
const [minimized, setMinimized] = useState(false);
|
||||
|
||||
const [screenWidth, screenHeight] = useScreenDimensions();
|
||||
|
||||
const [title, setTitle] = useState(app.name);
|
||||
const [iconUrl, setIconUrl] = useState(AppsManager.getAppIconUrl(app.id));
|
||||
|
||||
const { onContextMenu, ShortcutsListener } = useContextMenu({ modalsManager, Actions: (props) =>
|
||||
<Actions {...props}>
|
||||
<ClickAction label="Minimize" icon={faMinus} onTrigger={toggleMinimized}/>
|
||||
<ClickAction label="Maximize" icon={faExpand} shortcut={["F11"]} onTrigger={() => {
|
||||
setMaximized(!maximized);
|
||||
}}/>
|
||||
|
|
@ -95,10 +94,10 @@ export const WindowView = memo(({ id, app, size, position, onInteract, options,
|
|||
if (force)
|
||||
return onInteract();
|
||||
|
||||
if (event.defaultPrevented)
|
||||
if (event?.defaultPrevented)
|
||||
return;
|
||||
|
||||
if (event.target?.closest?.(".Handle") == null || event.target?.closest?.("button") == null)
|
||||
if (event == null || event.target?.closest?.(".Handle") == null || event.target?.closest?.("button") == null)
|
||||
onInteract();
|
||||
};
|
||||
|
||||
|
|
@ -127,55 +126,57 @@ export const WindowView = memo(({ id, app, size, position, onInteract, options,
|
|||
cancel="button"
|
||||
nodeRef={nodeRef}
|
||||
disabled={maximized}
|
||||
onMouseDown={focus}
|
||||
onStart={focus}
|
||||
>
|
||||
<div
|
||||
className={classNames.join(" ")}
|
||||
ref={nodeRef}
|
||||
style={{
|
||||
width: maximized ? null : startSize.x,
|
||||
height: maximized ? null : startSize.y,
|
||||
}}
|
||||
onClick={focus}
|
||||
>
|
||||
<div className={`${styles.Header} Window-handle`} onContextMenu={onContextMenu}>
|
||||
<ReactSVG
|
||||
className={styles["Window-icon"]}
|
||||
src={iconUrl}
|
||||
/>
|
||||
<p className={utilStyles["Text-semibold"]}>{title}</p>
|
||||
<button aria-label="Minimize" className={styles["Header-button"]} tabIndex={0} id="minimize-window"
|
||||
onClick={() => {
|
||||
setMinimized(!minimized);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faMinus}/>
|
||||
</button>
|
||||
<button aria-label="Maximize" className={styles["Header-button"]} tabIndex={0} id="maximize-window"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
setMaximized(!maximized);
|
||||
focus(event, true);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={maximized ? fasWindowMaximize : faWindowMaximize}/>
|
||||
</button>
|
||||
<button aria-label="Close" className={`${styles["Header-button"]} ${styles["Exit-button"]}`} tabIndex={0} id="close-window"
|
||||
onClick={close}>
|
||||
<FontAwesomeIcon icon={faXmark}/>
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles["Window-content"]}>
|
||||
<app.WindowContent
|
||||
{...options}
|
||||
app={app}
|
||||
setTitle={setTitle}
|
||||
setIconUrl={setIconUrl}
|
||||
close={close}
|
||||
focus={focus}
|
||||
active={active}
|
||||
modalsManager={modalsManager}
|
||||
/>
|
||||
<div
|
||||
className={styles["Window-inner"]}
|
||||
style={{
|
||||
width: maximized ? null : startSize.x,
|
||||
height: maximized ? null : startSize.y,
|
||||
}}
|
||||
>
|
||||
<div className={`${styles.Header} Window-handle`} onContextMenu={onContextMenu}>
|
||||
<ReactSVG
|
||||
className={styles["Window-icon"]}
|
||||
src={iconUrl}
|
||||
/>
|
||||
<p className={utilStyles["Text-semibold"]}>{title}</p>
|
||||
<button aria-label="Minimize" className={styles["Header-button"]} tabIndex={0} id="minimize-window"
|
||||
onClick={toggleMinimized}
|
||||
>
|
||||
<FontAwesomeIcon icon={faMinus}/>
|
||||
</button>
|
||||
<button aria-label="Maximize" className={styles["Header-button"]} tabIndex={0} id="maximize-window"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
setMaximized(!maximized);
|
||||
focus(event, true);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={maximized ? fasWindowMaximize : faWindowMaximize}/>
|
||||
</button>
|
||||
<button aria-label="Close" className={`${styles["Header-button"]} ${styles["Exit-button"]}`} tabIndex={0} id="close-window"
|
||||
onClick={close}>
|
||||
<FontAwesomeIcon icon={faXmark}/>
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles["Window-content"]}>
|
||||
<app.WindowContent
|
||||
{...options}
|
||||
app={app}
|
||||
setTitle={setTitle}
|
||||
setIconUrl={setIconUrl}
|
||||
close={close}
|
||||
focus={focus}
|
||||
active={active}
|
||||
modalsManager={modalsManager}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Draggable>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,6 @@
|
|||
--header-button-hover-color: rgba(255, 255, 255, 5%);
|
||||
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 300px;
|
||||
min-height: 150px;
|
||||
background-color: var(--background-color-c);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--window-box-shadow);
|
||||
resize: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes pop-in {
|
||||
|
|
@ -24,13 +15,64 @@
|
|||
}
|
||||
|
||||
.Window-container.Maximized {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.Window-container.Maximized .Window-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - var(--taskbar-height));
|
||||
border-radius: 0;
|
||||
transform: none !important;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.Window-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 300px;
|
||||
min-height: 150px;
|
||||
background-color: var(--background-color-c);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: var(--window-box-shadow);
|
||||
resize: both;
|
||||
overflow: hidden;
|
||||
transform-origin: center center;
|
||||
animation: appear 250ms ease-in-out forwards;
|
||||
}
|
||||
|
||||
.Window-container.Minimized .Window-inner {
|
||||
animation: disappear 250ms ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(25vh) scale(0);
|
||||
}
|
||||
25% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes disappear {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(25vh) scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
.Header {
|
||||
--window-icon-size: 1.5rem;
|
||||
--window-icon-margin: 0.75rem;
|
||||
|
|
|
|||
|
|
@ -17,16 +17,22 @@ export const WindowsView = memo(() => {
|
|||
// TO DO: prevent windows from being rerendered when order is changed
|
||||
|
||||
return (<div>
|
||||
{sortedWindows.map(({ id, app, size, position, options }, index) =>
|
||||
{sortedWindows.map(({ id, app, size, position, options, minimized }, index) =>
|
||||
<WindowView
|
||||
key={id}
|
||||
onInteract={() => { windowsManager.focus(id); }}
|
||||
active={index === 0}
|
||||
id={id}
|
||||
key={id}
|
||||
app={app}
|
||||
size={size}
|
||||
position={position}
|
||||
options={options}
|
||||
minimized={minimized}
|
||||
toggleMinimized={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
windowsManager.setMinimized(id, !minimized);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>);
|
||||
|
|
|
|||
|
|
@ -43,9 +43,10 @@ export default class WindowsManager {
|
|||
size,
|
||||
position,
|
||||
options,
|
||||
lastInteraction: new Date().valueOf()
|
||||
};
|
||||
|
||||
this.focus(id);
|
||||
|
||||
app.isActive = true;
|
||||
|
||||
this.updateWindows(this.windows);
|
||||
|
|
@ -96,9 +97,49 @@ export default class WindowsManager {
|
|||
return;
|
||||
}
|
||||
|
||||
Object.values(this.windows).forEach((window) => {
|
||||
const isFocused = (window.id === windowId);
|
||||
window.isFocused = isFocused;
|
||||
|
||||
if (isFocused) {
|
||||
window.lastInteraction = new Date().valueOf();
|
||||
window.minimized = false;
|
||||
}
|
||||
});
|
||||
|
||||
this.updateWindows(this.windows);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} windowId
|
||||
*/
|
||||
isFocused(windowId) {
|
||||
return this.windows[windowId].isFocused;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} windowId
|
||||
* @param {boolean=} minimized
|
||||
*/
|
||||
setMinimized(windowId, minimized) {
|
||||
windowId = windowId.toString();
|
||||
|
||||
if (!this.windowIds.includes(windowId)) {
|
||||
console.warn(`Failed to set minimized on window ${windowId}: window not found`);
|
||||
return;
|
||||
}
|
||||
|
||||
const window = this.windows[windowId];
|
||||
window.lastInteraction = new Date().valueOf();
|
||||
|
||||
window.minimized = minimized ?? !window.minimized;
|
||||
|
||||
this.updateWindows(this.windows);
|
||||
}
|
||||
|
||||
minimizeAll() {
|
||||
Object.values(this.windows).forEach((window) => {
|
||||
window.minimized = true;
|
||||
});
|
||||
|
||||
this.updateWindows(this.windows);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,52 +1,6 @@
|
|||
@import "./global/variables.css";
|
||||
@import "./global/fonts.css";
|
||||
|
||||
:root {
|
||||
--pink-a: #ff9ff3;
|
||||
--pink-b: #f368e0;
|
||||
--yellow-a: #feca57;
|
||||
--yellow-b: #ff9f43;
|
||||
--red-a: #ff6b6b;
|
||||
--red-b: #ee5253;
|
||||
--light-blue-a: #48dbfb;
|
||||
--light-blue-b: #0abde3;
|
||||
--green-a: #1dd1a1;
|
||||
--green-b: #10ac84;
|
||||
--cyan-a: #00d2d3;
|
||||
--cyan-b: #01a3a4;
|
||||
--blue-a: #54a0ff;
|
||||
--blue-b: #2e86de;
|
||||
--purple-a: #5f27cd;
|
||||
--purple-b: #341f97;
|
||||
--grey-a: #c8d6e5;
|
||||
--grey-b: #8395a7;
|
||||
--dark-grey-a: hsl(211, 14%, 40%);
|
||||
--dark-grey-b: hsl(212, 29%, 19%);
|
||||
--dark-grey-c: hsl(212, 29%, 15%);
|
||||
--dark-grey-ca: hsl(212, 27%, 12%);
|
||||
--dark-grey-d: hsl(212, 14%, 10%);
|
||||
--dark-grey-e: hsl(212, 12%, 8%);
|
||||
|
||||
--foreground-color-a: #fff;
|
||||
--foreground-color-b: var(--grey-a);
|
||||
--foreground-color-c: var(--grey-b);
|
||||
|
||||
--background-color-a: var(--dark-grey-b);
|
||||
--background-color-b: var(--dark-grey-c);
|
||||
--background-color-ba: var(--dark-grey-ca);
|
||||
--background-color-c: var(--dark-grey-d);
|
||||
--background-color-d: var(--dark-grey-e);
|
||||
|
||||
--background-color-a-hsl: 212, 29%, 19%;
|
||||
|
||||
--scrollbar-color: hsla(211, 29%, 40%, 25%);
|
||||
|
||||
--window-shadow-size: 0.3rem;
|
||||
--window-shadow-opacity: 35%;
|
||||
--window-shadow-spread: 3;
|
||||
--window-box-shadow: calc(var(--window-shadow-size) * -1) var(--window-shadow-size)
|
||||
calc(var(--window-shadow-size) * var(--window-shadow-spread)) 0px
|
||||
rgba(0, 0, 0, var(--window-shadow-opacity));
|
||||
}
|
||||
@import "./global/scrollbar.css";
|
||||
|
||||
html, body, #root {
|
||||
width: 100%;
|
||||
|
|
@ -75,7 +29,7 @@ body {
|
|||
|
||||
p, a, button, input, h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--body-font-family);
|
||||
letter-spacing: 0.01em;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
p, a, div, span { font-size: 1em; }
|
||||
|
|
@ -104,27 +58,4 @@ code {
|
|||
*::selection {
|
||||
color: var(--background-color-c);
|
||||
background-color: var(--grey-b);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: none;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 9999px;
|
||||
border: 5px solid transparent;
|
||||
background-color: var(--scrollbar-color);
|
||||
background-clip: padding-box;
|
||||
backdrop-filter: invert(100%);
|
||||
transition: 200ms ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
29
src/styles/global/scrollbar.css
Normal file
29
src/styles/global/scrollbar.css
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
/* Firefox */
|
||||
* {
|
||||
scrollbar-color: var(--scrollbar-color) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
/* Chrome, Safari */
|
||||
*::-webkit-scrollbar {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: none;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 9999px;
|
||||
border: 5px solid transparent;
|
||||
background-color: var(--scrollbar-color);
|
||||
background-clip: padding-box;
|
||||
backdrop-filter: invert(100%);
|
||||
transition: 200ms ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
47
src/styles/global/variables.css
Normal file
47
src/styles/global/variables.css
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
:root {
|
||||
--pink-a: #ff9ff3;
|
||||
--pink-b: #f368e0;
|
||||
--yellow-a: #feca57;
|
||||
--yellow-b: #ff9f43;
|
||||
--red-a: #ff6b6b;
|
||||
--red-b: #ee5253;
|
||||
--light-blue-a: #48dbfb;
|
||||
--light-blue-b: #0abde3;
|
||||
--green-a: #1dd1a1;
|
||||
--green-b: #10ac84;
|
||||
--cyan-a: #00d2d3;
|
||||
--cyan-b: #01a3a4;
|
||||
--blue-a: #54a0ff;
|
||||
--blue-b: #2e86de;
|
||||
--purple-a: #5f27cd;
|
||||
--purple-b: #341f97;
|
||||
--grey-a: #c8d6e5;
|
||||
--grey-b: #8395a7;
|
||||
--dark-grey-a: hsl(211, 14%, 40%);
|
||||
--dark-grey-b: hsl(212, 29%, 19%);
|
||||
--dark-grey-c: hsl(212, 29%, 15%);
|
||||
--dark-grey-ca: hsl(212, 27%, 12%);
|
||||
--dark-grey-d: hsl(212, 14%, 10%);
|
||||
--dark-grey-e: hsl(212, 12%, 8%);
|
||||
|
||||
--foreground-color-a: #fff;
|
||||
--foreground-color-b: var(--grey-a);
|
||||
--foreground-color-c: var(--grey-b);
|
||||
|
||||
--background-color-a: var(--dark-grey-b);
|
||||
--background-color-b: var(--dark-grey-c);
|
||||
--background-color-ba: var(--dark-grey-ca);
|
||||
--background-color-c: var(--dark-grey-d);
|
||||
--background-color-d: var(--dark-grey-e);
|
||||
|
||||
--background-color-a-hsl: 212, 29%, 19%;
|
||||
|
||||
--scrollbar-color: hsla(211, 29%, 40%, 25%);
|
||||
|
||||
--window-shadow-size: 0.3rem;
|
||||
--window-shadow-opacity: 35%;
|
||||
--window-shadow-spread: 3;
|
||||
--window-box-shadow: calc(var(--window-shadow-size) * -1) var(--window-shadow-size)
|
||||
calc(var(--window-shadow-size) * var(--window-shadow-spread)) 0px
|
||||
rgba(0, 0, 0, var(--window-shadow-opacity));
|
||||
}
|
||||
|
|
@ -1,22 +1,22 @@
|
|||
.Text-regular {
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.01em;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.Text-light {
|
||||
color: var(--foreground-color-c);
|
||||
font-size: 0.875em;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.025em;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.Text-semibold {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.025em;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.Text-bold {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
Loading…
Reference in a new issue