mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
added horizon theme
This commit is contained in:
Fedor Katurov
parent
ce7737b3cd
commit
f26f74c35f
23 changed files with 523 additions and 144 deletions
188
public/images/horizon_bg.svg
Normal file
188
public/images/horizon_bg.svg
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="1920"
|
||||
height="1080"
|
||||
viewBox="0 0 507.99998 285.75"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.2 (dc2aeda, 2022-05-15)"
|
||||
sodipodi:docname="horizon_bg.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#13151a"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="0.09019608"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#13151a"
|
||||
inkscape:document-units="px"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.32038579"
|
||||
inkscape:cx="995.67463"
|
||||
inkscape:cy="413.56391"
|
||||
inkscape:window-width="1440"
|
||||
inkscape:window-height="847"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="25"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2">
|
||||
<inkscape:path-effect
|
||||
effect="spiro"
|
||||
id="path-effect22459"
|
||||
is_visible="true"
|
||||
lpeversion="1" />
|
||||
<inkscape:path-effect
|
||||
effect="simplify"
|
||||
id="path-effect22457"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
steps="1"
|
||||
threshold="0.00159091"
|
||||
smooth_angles="360"
|
||||
helper_size="0"
|
||||
simplify_individual_paths="false"
|
||||
simplify_just_coalesce="false" />
|
||||
<inkscape:path-effect
|
||||
effect="spiro"
|
||||
id="path-effect22453"
|
||||
is_visible="true"
|
||||
lpeversion="1" />
|
||||
<inkscape:path-effect
|
||||
effect="simplify"
|
||||
id="path-effect22451"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
steps="1"
|
||||
threshold="0.00159091"
|
||||
smooth_angles="360"
|
||||
helper_size="0"
|
||||
simplify_individual_paths="false"
|
||||
simplify_just_coalesce="false" />
|
||||
<inkscape:path-effect
|
||||
effect="spiro"
|
||||
id="path-effect21147"
|
||||
is_visible="true"
|
||||
lpeversion="1" />
|
||||
<inkscape:path-effect
|
||||
effect="simplify"
|
||||
id="path-effect21145"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
steps="1"
|
||||
threshold="0.00159091"
|
||||
smooth_angles="360"
|
||||
helper_size="0"
|
||||
simplify_individual_paths="false"
|
||||
simplify_just_coalesce="false" />
|
||||
<inkscape:path-effect
|
||||
effect="spiro"
|
||||
id="path-effect21129"
|
||||
is_visible="true"
|
||||
lpeversion="1" />
|
||||
<inkscape:path-effect
|
||||
effect="simplify"
|
||||
id="path-effect21127"
|
||||
is_visible="true"
|
||||
lpeversion="1"
|
||||
steps="1"
|
||||
threshold="0.00159091"
|
||||
smooth_angles="360"
|
||||
helper_size="0"
|
||||
simplify_individual_paths="false"
|
||||
simplify_just_coalesce="false" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Слой 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="opacity:0.306533;fill:none;fill-opacity:0.0;stroke:#f09483;stroke-width:0.529167;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m -13.404023,359.4513 c 64.752445,-26.42007 139.249563,-28.10487 205.130213,-4.63917 17.17853,6.11873 33.94284,13.98099 48.16696,25.39217 24.06989,19.30988 39.7075,47.78064 64.53703,66.10345 12.33252,9.10072 27.0801,15.5127 42.40445,15.793 12.12872,0.22185 24.06879,-3.38017 35.04591,-8.54328 14.47903,-6.81024 27.50588,-16.28693 40.72351,-25.30447 13.21763,-9.01754 26.90269,-17.71868 42.10997,-22.69468 7.471,-2.4446 15.25629,-3.97051 22.4878,-7.05225 8.77914,-3.74126 16.47728,-9.67405 23.31233,-16.33382 3.72388,-3.62838 7.2232,-7.49008 11.09816,-10.95665 3.87496,-3.46657 8.18025,-6.56048 13.05911,-8.35747 1.40252,-0.51658 2.84552,-0.92324 4.31139,-1.21504"
|
||||
id="path21125"
|
||||
inkscape:path-effect="#path-effect21127;#path-effect21129"
|
||||
inkscape:original-d="m -13.404023,359.4513 c 68.133202,-2.06182 136.158393,-10.45894 204.402453,-4.7075 62.22161,5.44918 93.70365,108.93578 155.8362,107.35695 35.46729,5.17317 100.22908,-56.62492 136.91234,-63.20503 18.42654,-0.0161 36.84231,-34.39739 55.23584,-37.25263"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
<path
|
||||
style="opacity:1;fill:none;fill-opacity:0.0;stroke:#ffffff;stroke-width:0.529167;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:0.0437158"
|
||||
d="m -35.273744,-47.631054 c 27.8655193,-4.467571 55.290606,-11.677849 81.750254,-21.492806 15.108431,-5.60433 29.937018,-12.066452 45.465584,-16.371897 29.838726,-8.273076 61.605496,-8.314922 92.062946,-2.734829 25.41219,4.655753 49.95769,13.118239 75.07848,19.151569 30.01569,7.208953 60.83017,10.944213 90.55978,19.254504 24.82787,6.940109 48.947,17.076176 74.53082,20.247291 4.92348,0.610266 9.89777,0.958382 14.84751,0.621896 7.64276,-0.519559 15.06749,-2.655026 22.56137,-4.243575 7.49388,-1.588548 15.30482,-2.630251 22.78002,-0.955997 5.87184,1.315142 11.2334,4.236509 16.75844,6.620201 14.94531,6.447916 31.54085,9.026402 47.73802,7.417166"
|
||||
id="path22455"
|
||||
inkscape:path-effect="#path-effect22457;#path-effect22459"
|
||||
inkscape:original-d="m -35.273744,-47.631054 c 25.108892,-9.876725 51.314867,-15.821372 77.764663,-20.684129 17.126021,-3.062627 32.648966,-11.286932 48.735268,-17.040746 30.538763,-6.040552 61.924273,-2.500492 92.778853,-2.874657 25.71357,3.727857 48.7024,18.445058 75.07848,19.151569 30.2774,5.857757 61.34056,8.682511 90.55978,19.254504 28.2425,4.27256 53.37486,22.628403 82.66504,20.043603 20.61259,4.722435 39.75385,-12.566395 59.40326,-1.432633 17.92226,8.58434 37.90914,7.998127 57.14788,11.096012" />
|
||||
<g
|
||||
id="g30558">
|
||||
<path
|
||||
d="M -13.404 359.451 C 13.702 348.392 42.5156 341.666 71.6899 339.306 C 88.3449 337.959 105.117 338.034 121.757 339.537 C 145.599 341.691 169.168 346.777 191.726 354.812 C 199.411 357.549 207.012 360.635 214.34 364.232 C 223.395 368.675 232.032 373.898 239.893 380.204 C 252.921 390.656 263.478 403.791 274.36 416.548 C 283.583 427.361 293.039 437.902 304.43 446.308 C 316.763 455.408 331.51 461.82 346.835 462.101 C 349.392 462.148 351.94 462.024 354.473 461.752 C 363.955 460.734 373.218 457.632 381.881 453.557 C 396.36 446.747 409.386 437.271 422.604 428.253 C 423.554 427.605 424.507 426.958 425.463 426.314 C 429.725 423.442 434.043 420.628 438.452 417.985 C 445.286 413.887 452.337 410.198 459.736 407.336 C 461.378 406.701 463.037 406.107 464.714 405.558 C 470.586 403.637 476.653 402.283 482.492 400.295 C 484.082 399.754 485.654 399.166 487.202 398.506 C 491.404 396.715 495.358 394.423 499.089 391.788 C 503.152 388.919 506.951 385.644 510.514 382.172 C 514.238 378.544 517.737 374.682 521.612 371.216 C 525.487 367.749 529.793 364.655 534.671 362.858 C 536.074 362.342 537.517 361.935 538.983 361.643"
|
||||
style="fill:none;stroke:#f09483;fill-opacity:0.0;stroke-opacity:1.0;stroke-width:0.529167px;opacity:0.306533"
|
||||
id="path30526" />
|
||||
<path
|
||||
d="M -13.4045 359.443 C 13.7016 348.384 42.5151 341.658 71.6894 339.298 C 88.3444 337.95 105.117 338.025 121.756 339.529 C 145.598 341.682 169.167 346.768 191.726 354.803 C 199.41 357.54 207.012 360.626 214.34 364.223 C 223.394 368.666 232.031 373.889 239.893 380.195 C 252.92 390.646 263.478 403.781 274.36 416.538 C 283.583 427.351 293.039 437.892 304.43 446.298 C 316.763 455.398 331.51 461.81 346.835 462.091 C 349.391 462.137 351.94 462.014 354.473 461.742 C 363.955 460.724 373.217 457.622 381.88 453.548 C 396.359 446.738 409.386 437.261 422.604 428.244 C 423.554 427.596 424.507 426.949 425.463 426.305 C 429.725 423.433 434.043 420.62 438.452 417.976 C 445.286 413.878 452.337 410.189 459.737 407.327 C 461.378 406.693 463.037 406.098 464.714 405.55 C 470.586 403.628 476.653 402.274 482.492 400.286 C 484.082 399.745 485.654 399.157 487.202 398.498 C 491.404 396.707 495.358 394.414 499.089 391.78 C 503.153 388.911 506.951 385.636 510.514 382.164 C 514.238 378.536 517.737 374.674 521.612 371.208 C 525.487 367.741 529.793 364.648 534.672 362.851 C 536.074 362.334 537.517 361.927 538.983 361.636"
|
||||
style="fill:none;stroke:#f09483;fill-opacity:0.0;stroke-opacity:0.9999811104355556;stroke-width:0.529167px;opacity:0.30654669811358026"
|
||||
id="path30528" />
|
||||
<path
|
||||
d="M -13.4109 359.323 C 13.6953 348.265 42.5085 341.54 71.6819 339.177 C 88.3364 337.828 105.108 337.901 121.748 339.403 C 145.589 341.554 169.158 346.638 191.716 354.671 C 199.401 357.408 207.002 360.493 214.331 364.089 C 223.385 368.531 232.023 373.753 239.884 380.058 C 252.913 390.508 263.472 403.64 274.355 416.394 C 283.58 427.205 293.037 437.744 304.429 446.147 C 316.762 455.246 331.509 461.657 346.833 461.938 C 349.39 461.985 351.939 461.862 354.471 461.591 C 363.953 460.574 373.216 457.473 381.879 453.401 C 396.358 446.594 409.385 437.122 422.604 428.108 C 423.554 427.46 424.507 426.814 425.462 426.17 C 429.725 423.299 434.043 420.486 438.452 417.843 C 445.286 413.747 452.338 410.058 459.737 407.197 C 461.379 406.562 463.037 405.968 464.715 405.419 C 470.587 403.498 476.653 402.145 482.492 400.158 C 484.082 399.617 485.655 399.029 487.202 398.37 C 491.404 396.58 495.359 394.289 499.089 391.656 C 503.153 388.788 506.952 385.515 510.515 382.044 C 514.24 378.417 517.739 374.557 521.615 371.092 C 525.49 367.627 529.796 364.534 534.675 362.737 C 536.077 362.221 537.52 361.814 538.986 361.522"
|
||||
style="fill:none;stroke:#f09483;fill-opacity:0.0;stroke-opacity:0.9996977669688889;stroke-width:0.529167px;opacity:0.3067521698172839"
|
||||
id="path30530" />
|
||||
<path
|
||||
d="M -13.439 358.8 C 13.6682 347.751 42.4796 341.025 71.6495 338.653 C 88.3021 337.298 105.072 337.363 121.709 338.857 C 145.549 340.998 169.117 346.073 191.676 354.098 C 199.361 356.832 206.963 359.915 214.292 363.508 C 223.347 367.947 231.985 373.165 239.849 379.465 C 252.881 389.907 263.446 403.028 274.336 415.771 C 283.565 426.571 293.028 437.1 304.422 445.496 C 316.758 454.587 331.505 460.993 346.828 461.279 C 349.384 461.326 351.933 461.204 354.465 460.934 C 363.946 459.922 373.208 456.829 381.871 452.765 C 396.351 445.973 409.38 436.519 422.601 427.52 C 423.552 426.873 424.505 426.227 425.461 425.585 C 429.724 422.719 434.043 419.91 438.453 417.269 C 445.288 413.177 452.34 409.491 459.739 406.631 C 461.381 405.997 463.04 405.403 464.717 404.855 C 470.589 402.935 476.656 401.583 482.495 399.6 C 484.085 399.06 485.657 398.474 487.205 397.816 C 491.407 396.031 495.361 393.745 499.092 391.117 C 503.156 388.256 506.956 384.989 510.521 381.524 C 514.247 377.904 517.748 374.05 521.625 370.589 C 525.502 367.129 529.808 364.04 534.687 362.246 C 536.09 361.73 537.533 361.324 538.999 361.032"
|
||||
style="fill:none;stroke:#f09483;fill-opacity:0.0;stroke-opacity:0.99846994528;stroke-width:0.529167px;opacity:0.3076425472"
|
||||
id="path30532" />
|
||||
<path
|
||||
d="M -13.5146 357.393 C 13.5952 346.366 42.4018 339.639 71.5624 337.241 C 88.2096 335.872 104.972 335.914 121.606 337.388 C 145.44 339.5 169.008 344.552 191.569 352.556 C 199.254 355.282 206.857 358.358 214.187 361.944 C 223.244 366.373 231.885 371.581 239.754 377.869 C 252.795 388.288 263.377 401.38 274.283 414.092 C 283.526 424.866 293.003 435.367 304.403 443.743 C 316.747 452.812 331.494 459.205 346.813 459.502 C 349.369 459.552 351.916 459.433 354.449 459.165 C 363.927 458.165 373.188 455.093 381.851 451.053 C 396.332 444.302 409.367 434.896 422.595 425.936 C 423.546 425.291 424.5 424.649 425.456 424.009 C 429.722 421.155 434.043 418.357 438.455 415.725 C 445.293 411.645 452.346 407.963 459.746 405.108 C 461.388 404.475 463.046 403.882 464.724 403.335 C 470.596 401.418 476.662 400.069 482.501 398.098 C 484.091 397.561 485.664 396.979 487.211 396.325 C 491.413 394.551 495.367 392.28 499.099 389.668 C 503.165 386.823 506.966 383.573 510.536 380.124 C 514.265 376.521 517.772 372.683 521.652 369.236 C 525.533 365.79 529.842 362.712 534.721 360.923 C 536.124 360.409 537.567 360.004 539.033 359.713"
|
||||
style="fill:none;stroke:#f09483;fill-opacity:0.0;stroke-opacity:0.9951642715022222;stroke-width:0.529167px;opacity:0.3100397170765432"
|
||||
id="path30534" />
|
||||
<path
|
||||
d="M -13.674 354.426 C 13.4414 343.447 42.2378 336.716 71.3786 334.264 C 88.0145 332.864 104.763 332.858 121.389 334.29 C 145.211 336.341 168.777 341.345 191.342 349.304 C 199.028 352.015 206.633 355.076 213.966 358.646 C 223.026 363.056 231.673 368.242 239.553 374.502 C 252.613 384.875 263.231 397.906 274.171 410.552 C 283.444 421.271 292.949 431.713 304.365 440.046 C 316.725 449.068 331.469 455.435 346.781 455.757 C 349.336 455.811 351.882 455.697 354.413 455.437 C 363.888 454.462 373.145 451.434 381.809 447.444 C 396.292 440.777 409.34 431.474 422.583 422.595 C 423.535 421.957 424.489 421.32 425.447 420.686 C 429.717 417.857 434.043 415.082 438.459 412.467 C 445.303 408.413 452.359 404.743 459.759 401.897 C 461.401 401.266 463.06 400.675 464.737 400.13 C 470.61 398.22 476.676 396.879 482.515 394.931 C 484.105 394.401 485.677 393.826 487.224 393.182 C 491.425 391.431 495.38 389.192 499.114 386.612 C 503.182 383.801 506.989 380.586 510.566 377.172 C 514.304 373.604 517.821 369.801 521.71 366.384 C 525.599 362.966 529.913 359.912 534.793 358.134 C 536.196 357.623 537.639 357.22 539.105 356.93"
|
||||
style="fill:none;stroke:#f09584;fill-opacity:0.0;stroke-opacity:0.9881940222222222;stroke-width:0.529167px;opacity:0.31509432098765433"
|
||||
id="path30536" />
|
||||
<path
|
||||
d="M -13.9639 349.03 C 13.1616 338.139 41.9396 331.401 71.0444 328.85 C 87.6598 327.394 104.383 327.302 120.994 328.656 C 144.795 330.597 168.358 335.512 190.929 343.39 C 198.618 346.074 206.225 349.108 213.564 352.649 C 222.631 357.023 231.288 362.171 239.189 368.38 C 252.282 378.669 262.965 391.589 273.969 404.116 C 283.295 414.733 292.853 425.069 304.295 433.324 C 316.684 442.262 331.426 448.58 346.724 448.947 C 349.276 449.008 351.821 448.904 354.349 448.656 C 363.816 447.728 373.066 444.779 381.733 440.881 C 396.219 434.367 409.29 425.25 422.56 416.521 C 423.514 415.893 424.47 415.267 425.43 414.643 C 429.709 411.861 434.044 409.128 438.467 406.543 C 445.321 402.537 452.382 398.887 459.784 396.058 C 461.426 395.431 463.085 394.844 464.762 394.302 C 470.636 392.405 476.701 391.077 482.54 389.173 C 484.129 388.655 485.702 388.094 487.248 387.465 C 491.448 385.758 495.403 383.576 499.141 381.054 C 503.213 378.306 507.031 375.156 510.622 371.804 C 514.375 368.301 517.911 364.561 521.815 361.196 C 525.718 357.832 530.042 354.82 534.924 353.062 C 536.328 352.557 537.771 352.158 539.236 351.87"
|
||||
style="fill:none;stroke:#f09686;fill-opacity:0.0;stroke-opacity:0.97551912448;stroke-width:0.529167px;opacity:0.3242857552"
|
||||
id="path30538" />
|
||||
<path
|
||||
d="M -14.4412 340.145 C 12.7008 329.397 41.4485 322.649 70.4941 319.935 C 87.0757 318.386 103.756 318.151 120.343 319.379 C 144.11 321.138 167.667 325.908 190.249 333.652 C 197.942 336.29 205.554 339.279 212.902 342.773 C 221.98 347.088 230.654 352.172 238.588 358.298 C 251.737 368.45 262.526 381.185 273.636 393.516 C 283.05 403.967 292.693 414.127 304.179 422.254 C 316.616 431.053 331.353 437.291 346.63 437.731 C 349.178 437.805 351.719 437.717 354.244 437.49 C 363.697 436.638 372.938 433.82 381.607 430.073 C 396.098 423.811 409.208 415.001 422.522 406.518 C 423.479 405.908 424.439 405.299 425.402 404.692 C 429.695 401.986 434.044 399.322 438.479 396.788 C 445.351 392.859 452.421 389.244 459.824 386.443 C 461.466 385.821 463.126 385.24 464.803 384.704 C 470.678 382.828 476.742 381.522 482.581 379.69 C 484.17 379.192 485.742 378.654 487.288 378.051 C 491.486 376.416 495.44 374.328 499.185 371.901 C 503.265 369.258 507.1 366.213 510.715 362.964 C 514.492 359.568 518.06 355.932 521.988 352.654 C 525.915 349.376 530.255 346.435 535.14 344.71 C 536.544 344.215 537.987 343.822 539.451 343.537"
|
||||
style="fill:none;stroke:#f09988;fill-opacity:0.0;stroke-opacity:0.9546461557688889;stroke-width:0.529167px;opacity:0.33942217070617287"
|
||||
id="path30540" />
|
||||
<path
|
||||
d="M -15.1735 326.515 C 11.994 315.988 40.6952 309.224 69.6499 306.261 C 86.1798 304.569 102.795 304.115 119.345 305.148 C 143.058 306.629 166.608 311.174 189.207 318.714 C 196.905 321.282 204.524 324.203 211.886 327.623 C 220.981 331.849 229.682 336.834 237.667 342.833 C 250.901 352.773 261.854 365.227 273.124 377.256 C 282.673 387.452 292.449 397.343 304.002 405.273 C 316.513 413.858 331.243 419.974 346.485 420.528 C 349.028 420.62 351.563 420.558 354.082 420.361 C 363.515 419.627 372.74 417.009 381.414 413.494 C 395.914 407.619 409.081 399.28 422.464 391.174 C 423.426 390.592 424.391 390.009 425.358 389.429 C 429.674 386.839 434.045 384.28 438.498 381.823 C 445.397 378.015 452.479 374.451 459.886 371.693 C 461.529 371.081 463.188 370.509 464.866 369.982 C 470.742 368.138 476.805 366.866 482.643 365.144 C 484.233 364.676 485.803 364.173 487.349 363.611 C 491.544 362.085 495.498 360.142 499.253 357.861 C 503.345 355.378 507.205 352.495 510.856 349.403 C 514.671 346.171 518.288 342.695 522.253 339.55 C 526.218 336.405 530.581 333.572 535.471 331.899 C 536.876 331.418 538.319 331.035 539.782 330.755"
|
||||
style="fill:none;stroke:#f19c8d;fill-opacity:0.0;stroke-opacity:0.9226283440355556;stroke-width:0.529167px;opacity:0.36264047322469134"
|
||||
id="path30542" />
|
||||
<path
|
||||
d="M -16.2383 306.693 C 10.9661 296.488 39.5997 289.7 68.4222 286.374 C 84.8768 284.474 101.397 283.702 117.893 284.453 C 141.529 285.528 165.067 289.749 187.69 296.989 C 195.397 299.456 203.027 302.278 210.409 305.592 C 219.528 309.687 228.268 314.529 236.327 320.342 C 249.685 329.976 260.877 342.019 272.38 353.611 C 282.125 363.435 292.094 372.934 303.745 380.577 C 316.362 388.853 331.082 394.791 346.275 395.508 C 348.809 395.628 351.335 395.603 353.847 395.452 C 363.251 394.888 372.453 392.562 381.133 389.383 C 395.646 384.071 408.898 376.418 422.38 368.86 C 423.349 368.317 424.321 367.773 425.296 367.231 C 429.644 364.81 434.047 362.406 438.526 360.061 C 445.464 356.427 452.564 352.939 459.976 350.243 C 461.619 349.645 463.28 349.086 464.957 348.572 C 470.836 346.775 476.897 345.552 482.734 343.99 C 484.323 343.565 485.893 343.114 487.438 342.611 C 491.629 341.244 495.582 339.511 499.352 337.444 C 503.461 335.193 507.358 332.546 511.062 329.682 C 514.932 326.689 518.619 323.444 522.638 320.493 C 526.657 317.542 531.056 314.866 535.951 313.267 C 537.359 312.808 538.801 312.439 540.263 312.167"
|
||||
style="fill:none;stroke:#f1a193;fill-opacity:0.0;stroke-opacity:0.87606556768;stroke-width:0.529167px;opacity:0.3964063232"
|
||||
id="path30544" />
|
||||
<path
|
||||
d="M -17.724 279.04 C 9.53206 269.282 38.0714 262.461 66.7095 258.629 C 83.059 256.44 99.4475 255.224 115.868 255.58 C 139.396 256.089 162.918 259.857 185.575 266.681 C 193.293 269.005 200.939 271.69 208.348 274.856 C 217.501 278.768 226.295 283.411 234.457 288.965 C 247.989 298.17 259.514 309.641 271.342 320.622 C 281.361 329.927 291.598 338.881 303.385 346.124 C 316.153 353.968 330.857 359.657 345.981 360.604 C 348.504 360.761 351.018 360.788 353.519 360.7 C 362.882 360.374 372.051 358.455 380.741 355.746 C 395.272 351.219 408.642 344.521 422.262 337.729 C 423.242 337.241 424.224 336.751 425.208 336.261 C 429.601 334.078 434.049 331.888 438.564 329.7 C 445.558 326.309 452.683 322.927 460.101 320.317 C 461.746 319.738 463.407 319.197 465.085 318.703 C 470.967 316.97 477.025 315.815 482.861 314.478 C 484.45 314.114 486.018 313.735 487.561 313.314 C 491.747 312.169 495.7 310.729 499.49 308.959 C 503.623 307.033 507.571 304.714 511.349 302.169 C 515.295 299.509 519.081 296.588 523.175 293.907 C 527.27 291.226 531.718 288.769 536.622 287.274 C 538.032 286.844 539.474 286.496 540.934 286.234"
|
||||
style="fill:none;stroke:#f2a99b;fill-opacity:0.0;stroke-opacity:0.8111043555555556;stroke-width:0.529167px;opacity:0.4435141358024691"
|
||||
id="path30546" />
|
||||
<path
|
||||
d="M -19.7289 241.721 C 7.5968 232.568 36.0088 225.702 64.3981 221.186 C 80.6058 218.608 96.8161 216.792 113.134 216.615 C 136.518 216.362 160.017 219.517 182.72 225.779 C 190.454 227.912 198.12 230.411 205.567 233.377 C 214.766 237.042 223.633 241.416 231.935 246.62 C 245.7 255.247 257.674 265.946 269.942 276.102 C 280.33 284.708 290.928 292.926 302.9 299.629 C 315.87 306.889 330.553 312.243 345.585 313.499 C 348.092 313.708 350.591 313.804 353.076 313.802 C 362.384 313.796 371.51 312.427 380.213 310.351 C 394.767 306.884 408.296 301.476 422.104 295.717 C 423.097 295.303 424.092 294.886 425.09 294.468 C 429.544 292.603 434.051 290.704 438.617 288.727 C 445.684 285.664 452.844 282.425 460.271 279.931 C 461.916 279.378 463.579 278.862 465.256 278.393 C 471.143 276.748 477.198 275.686 483.033 274.65 C 484.621 274.368 486.187 274.086 487.728 273.776 C 491.907 272.931 495.859 271.887 499.677 270.518 C 503.841 269.029 507.859 267.155 511.736 265.04 C 515.786 262.829 519.704 260.344 523.901 258.028 C 528.098 255.712 532.612 253.55 537.528 252.195 C 538.941 251.805 540.382 251.485 541.839 251.236"
|
||||
style="fill:none;stroke:#f4b2a6;fill-opacity:0.0;stroke-opacity:0.7234378869688889;stroke-width:0.529167px;opacity:0.507087080928395"
|
||||
id="path30548" />
|
||||
<path
|
||||
d="M -22.3619 192.71 C 5.05524 184.351 33.3001 177.427 61.3625 172.013 C 77.384 168.922 93.3603 166.32 109.545 165.444 C 132.737 164.188 156.208 166.539 178.971 172.063 C 186.725 173.945 194.418 176.199 201.915 178.903 C 211.174 182.243 220.136 186.264 228.622 191.01 C 242.694 198.876 255.257 208.561 268.103 217.635 C 278.976 225.322 290.05 232.572 302.263 238.568 C 315.498 245.061 330.155 249.974 345.065 251.636 C 347.551 251.913 350.029 252.1 352.495 252.211 C 361.73 252.626 370.8 251.979 379.518 250.735 C 394.104 248.659 407.843 244.945 421.895 240.542 C 422.906 240.226 423.919 239.905 424.935 239.581 C 429.468 238.136 434.055 236.617 438.685 234.918 C 445.85 232.286 453.055 229.233 460.493 226.893 C 462.14 226.374 463.804 225.891 465.482 225.454 C 471.375 223.924 477.426 222.984 483.258 222.344 C 484.846 222.17 486.409 222.016 487.947 221.851 C 492.116 221.4 496.067 220.876 499.921 220.034 C 504.128 219.119 508.237 217.828 512.245 216.278 C 516.43 214.658 520.523 212.745 524.853 210.908 C 529.184 209.072 533.786 207.297 538.717 206.126 C 540.135 205.79 541.575 205.505 543.028 205.274"
|
||||
style="fill:none;stroke:#f6bfb5;fill-opacity:0.0;stroke-opacity:0.60830599168;stroke-width:0.529167px;opacity:0.5905770832000001"
|
||||
id="path30550" />
|
||||
<path
|
||||
d="M -25.7422 129.789 C 1.79228 122.448 29.8225 115.449 57.4653 108.883 C 73.2478 105.134 88.9236 101.521 104.936 99.7472 C 127.884 97.2046 151.317 98.5235 174.157 103.1 C 181.938 104.659 189.666 106.6 197.226 108.967 C 206.562 111.891 215.647 115.458 224.368 119.614 C 238.835 126.506 252.155 134.889 265.742 142.573 C 277.237 149.081 288.921 155.089 301.446 160.174 C 315.021 165.683 329.644 170.031 344.398 172.215 C 346.856 172.578 349.307 172.882 351.748 173.137 C 360.891 174.094 369.887 174.373 378.627 174.197 C 393.253 173.908 407.26 172.369 421.628 169.707 C 422.661 169.516 423.697 169.318 424.736 169.115 C 429.371 168.208 434.059 167.178 438.773 165.835 C 446.064 163.756 453.326 160.944 460.778 158.8 C 462.428 158.326 464.094 157.884 465.772 157.49 C 471.673 156.107 477.717 155.323 483.548 155.192 C 485.135 155.157 486.694 155.167 488.228 155.188 C 492.385 155.242 496.334 155.386 500.236 155.22 C 504.496 155.043 508.723 154.5 512.898 153.676 C 517.257 152.813 521.574 151.636 526.076 150.414 C 530.58 149.193 535.292 147.916 540.244 146.981 C 541.667 146.713 543.107 146.474 544.555 146.266"
|
||||
style="fill:none;stroke:#f8d0c8;fill-opacity:0.0;stroke-opacity:0.4604951499022222;stroke-width:0.529167px;opacity:0.6977648219654322"
|
||||
id="path30552" />
|
||||
<path
|
||||
d="M -29.9995 50.5431 C -2.31717 44.4858 25.4428 37.3925 52.5571 29.3753 C 68.0385 24.7976 83.3359 19.912 99.1324 17.0074 C 121.771 12.8444 145.158 12.8634 168.095 16.2469 C 175.91 17.3995 183.68 18.9443 191.321 20.8877 C 200.754 23.2874 209.994 26.2834 219.011 29.6977 C 233.975 35.361 248.247 42.1037 262.768 48.0374 C 275.047 53.06 287.501 57.5034 300.416 61.4436 C 314.419 65.7134 329 69.3485 343.557 72.1893 C 345.981 72.6622 348.399 73.1131 350.808 73.5502 C 359.834 75.1884 368.738 76.6343 377.504 77.8031 C 392.181 79.7648 406.526 80.964 421.291 80.4956 C 422.353 80.462 423.418 80.4196 424.485 80.368 C 429.249 80.1385 434.065 79.7241 438.884 78.8311 C 446.332 77.4486 453.667 74.9384 461.138 73.0429 C 462.79 72.6235 464.458 72.2341 466.137 71.8937 C 472.048 70.6966 478.084 70.109 483.912 70.6194 C 485.498 70.7583 487.052 70.9748 488.582 71.231 C 492.723 71.9215 496.671 72.9064 500.631 73.5915 C 504.96 74.3443 509.334 74.7434 513.721 74.8326 C 518.299 74.9242 522.897 74.674 527.617 74.2267 C 532.337 73.7795 537.19 73.1296 542.166 72.4928 C 543.597 72.3097 545.036 72.1285 546.478 71.9499"
|
||||
style="fill:none;stroke:#fbe5e1;fill-opacity:0.0;stroke-opacity:0.2743384923022222;stroke-width:0.529167px;opacity:0.8327597312987656"
|
||||
id="path30554" />
|
||||
<path
|
||||
d="M -35.2737 -47.6311 C -7.40822 -52.0986 20.0169 -59.3089 46.4765 -69.1239 C 61.5849 -74.7282 76.4135 -81.1903 91.9421 -85.4958 C 114.198 -91.6665 137.527 -93.2579 160.585 -91.3527 C 168.441 -90.7036 176.265 -89.6486 184.005 -88.2306 C 193.559 -86.4803 202.99 -84.1919 212.375 -81.6969 C 227.954 -77.5553 243.407 -72.8441 259.084 -69.079 C 272.334 -65.8966 285.74 -63.3912 299.14 -60.8702 C 313.675 -58.1358 328.202 -55.3831 342.515 -51.7285 C 344.897 -51.1202 347.274 -50.4869 349.643 -49.8245 C 358.524 -47.3421 367.314 -44.4507 376.113 -41.6154 C 390.853 -36.8659 405.617 -32.2739 420.874 -30.0253 C 421.971 -29.8635 423.071 -29.7139 424.174 -29.5772 C 429.098 -28.967 434.072 -28.6188 439.022 -28.9553 C 446.664 -29.4749 454.089 -31.6104 461.583 -33.1989 C 463.239 -33.5499 464.91 -33.8742 466.59 -34.1484 C 472.512 -35.1152 478.539 -35.4592 484.363 -34.1549 C 485.949 -33.7998 487.497 -33.3276 489.021 -32.7804 C 493.142 -31.3013 497.088 -29.2747 501.121 -27.5347 C 505.535 -25.6307 510.092 -24.0641 514.74 -22.8431 C 519.589 -21.5693 524.537 -20.6716 529.525 -20.1594 C 534.513 -19.647 539.541 -19.5203 544.548 -19.7883 C 545.987 -19.8653 547.425 -19.975 548.859 -20.1175"
|
||||
style="fill:none;stroke:#ffffff;fill-opacity:0.0;stroke-opacity:0.04371579999999997;stroke-width:0.529167px;opacity:1.0"
|
||||
id="path30556" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 26 KiB |
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
background: $danger_gradient;
|
||||
background: $flow_gradient;
|
||||
width: $bar_height;
|
||||
height: $bar_height;
|
||||
border-radius: $bar_height * 0.5;
|
||||
|
|
|
|||
|
|
@ -29,15 +29,18 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
|||
(acc, val, index) => [
|
||||
...acc,
|
||||
index === 0
|
||||
? { x: borderGap, y: height - (val / max) * (height - gap * 2) - gap }
|
||||
? {
|
||||
x: borderGap,
|
||||
y: height - (val / max) * (height - gap * 2) - gap,
|
||||
}
|
||||
: {
|
||||
x: ((width - borderGap) / (items.length - 1)) * index,
|
||||
y: height - (val / max) * (height - gap * 2) - gap,
|
||||
},
|
||||
],
|
||||
[]
|
||||
[],
|
||||
),
|
||||
[height, width, items, gap]
|
||||
[height, width, items, gap],
|
||||
);
|
||||
|
||||
if (!points.length) {
|
||||
|
|
@ -49,20 +52,29 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
|||
{...props}
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
viewBox={`0 0 ${width} ${height * 1.05}`}
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<defs>
|
||||
<filter id="f1" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
|
||||
</filter>
|
||||
|
||||
<filter id="brighter">
|
||||
<feComponentTransfer>
|
||||
<feFuncR type="linear" slope="3" />
|
||||
<feFuncG type="linear" slope="3" />
|
||||
<feFuncB type="linear" slope="3" />
|
||||
</feComponentTransfer>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<path
|
||||
d={makeBezierCurve(points)}
|
||||
fill="none"
|
||||
x={0}
|
||||
y={0}
|
||||
y={gap / 2}
|
||||
opacity={0.5}
|
||||
stroke={stroke}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
|
|
@ -74,6 +86,7 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
|||
fill="none"
|
||||
x={0}
|
||||
y={0}
|
||||
opacity={0.3}
|
||||
stroke={stroke}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
|
|
@ -84,9 +97,11 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
|||
fill="none"
|
||||
x={0}
|
||||
y={0}
|
||||
stroke={lighten(stroke, 0.1)}
|
||||
stroke={stroke}
|
||||
opacity={1}
|
||||
strokeWidth={1}
|
||||
strokeLinecap="round"
|
||||
filter="url(#brighter)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -15,11 +15,19 @@ interface StatsGraphCardProps extends CardProps {
|
|||
right?: string | number;
|
||||
}
|
||||
|
||||
const StatsGraphCard: VFC<StatsGraphCardProps> = ({ total, title, data, left, right }) => (
|
||||
const StatsGraphCard: VFC<StatsGraphCardProps> = ({
|
||||
total,
|
||||
title,
|
||||
data,
|
||||
left,
|
||||
right,
|
||||
}) => (
|
||||
<StatsCard
|
||||
title={title}
|
||||
total={total}
|
||||
background={<BasicCurveChart items={data} />}
|
||||
background={
|
||||
<BasicCurveChart items={data} stroke={'var(--color_primary)'} />
|
||||
}
|
||||
className={styles.card}
|
||||
>
|
||||
<div className={styles.content}>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const EditorButtons: FC = () => {
|
|||
<Button
|
||||
title={isTablet ? undefined : 'Сохранить'}
|
||||
iconRight="check"
|
||||
color={values.is_promoted ? 'danger' : 'info'}
|
||||
color={values.is_promoted ? 'flow' : 'lab'}
|
||||
disabled={isSubmitting}
|
||||
type="submit"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const EditorPublicSwitch: FC<IProps> = () => {
|
|||
|
||||
return (
|
||||
<Button
|
||||
color={values.is_promoted ? 'danger' : 'info'}
|
||||
color={values.is_promoted ? 'flow' : 'lab'}
|
||||
type="button"
|
||||
size="giant"
|
||||
label={
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const EditorUploadButton: FC<IProps> = ({
|
|||
[type, uploadFiles],
|
||||
);
|
||||
|
||||
const color = values.is_promoted ? 'danger' : 'info';
|
||||
const color = values.is_promoted ? 'flow' : 'lab';
|
||||
|
||||
return (
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ type IButtonProps = DetailedHTMLProps<
|
|||
| 'outline'
|
||||
| 'link'
|
||||
| 'gray'
|
||||
| 'flow'
|
||||
| 'lab'
|
||||
| 'outline-white'
|
||||
| 'flat';
|
||||
|
|
|
|||
|
|
@ -244,7 +244,11 @@
|
|||
}
|
||||
|
||||
.lab {
|
||||
background: $color_lab;
|
||||
background: $lab_gradient;
|
||||
}
|
||||
|
||||
.flow {
|
||||
background: $flow_gradient;
|
||||
}
|
||||
|
||||
.flat {
|
||||
|
|
|
|||
|
|
@ -96,16 +96,16 @@
|
|||
opacity: 1;
|
||||
|
||||
svg {
|
||||
fill: $color_danger;
|
||||
fill: $color_like;
|
||||
}
|
||||
|
||||
.like_count {
|
||||
color: $color_danger;
|
||||
color: $color_like;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
fill: $color_danger;
|
||||
fill: $color_like;
|
||||
animation: pulse 0.75s infinite;
|
||||
|
||||
.like_count {
|
||||
|
|
|
|||
|
|
@ -3,12 +3,6 @@ import React, { FC, FocusEventHandler, useCallback } from 'react';
|
|||
import { TagWrapper } from '~/components/tags/TagWrapper';
|
||||
import { ITag } from '~/types';
|
||||
|
||||
const getTagFeature = (tag: Partial<ITag>) => {
|
||||
if (tag?.title?.substr(0, 1) === '/') return 'green';
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
interface IProps {
|
||||
tag: Partial<ITag>;
|
||||
size?: 'normal' | 'big';
|
||||
|
|
@ -44,9 +38,11 @@ const Tag: FC<IProps> = ({
|
|||
onDelete(tag.ID!);
|
||||
}, [onDelete, tag]);
|
||||
|
||||
const isAlbumTag = tag?.title?.substr(0, 1) === '/';
|
||||
|
||||
return (
|
||||
<TagWrapper
|
||||
feature={getTagFeature(tag)}
|
||||
color={isAlbumTag ? 'primary' : undefined}
|
||||
size={size}
|
||||
deletable={deletable}
|
||||
hoverable={hoverable}
|
||||
|
|
|
|||
|
|
@ -9,16 +9,23 @@ import styles from './styles.module.scss';
|
|||
interface IProps {
|
||||
selected: boolean;
|
||||
title: string;
|
||||
type: string;
|
||||
type: 'enter' | 'right' | 'tag';
|
||||
onSelect: (val: string) => void;
|
||||
}
|
||||
|
||||
const TagAutocompleteRow: FC<IProps> = ({ selected, type, title, onSelect }) => {
|
||||
const TagAutocompleteRow: FC<IProps> = ({
|
||||
selected,
|
||||
type,
|
||||
title,
|
||||
onSelect,
|
||||
}) => {
|
||||
const onClick = useCallback(() => onSelect(title), [title, onSelect]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.row, styles[type], { [styles.selected]: selected })}
|
||||
className={classNames(styles.row, styles[type], {
|
||||
[styles.selected]: selected,
|
||||
})}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Icon icon={type} size={16} />
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ $row_height: 26px;
|
|||
}
|
||||
|
||||
&.right {
|
||||
color: lighten($color_primary, 4%);
|
||||
color: $color_primary;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ import { Icon } from '~/components/input/Icon';
|
|||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {
|
||||
feature?: string;
|
||||
size?: string;
|
||||
color?: 'primary' | 'danger' | 'info' | 'black' | 'default';
|
||||
deletable?: boolean;
|
||||
hoverable?: boolean;
|
||||
editing?: boolean;
|
||||
|
|
@ -19,8 +19,8 @@ interface IProps {
|
|||
}
|
||||
|
||||
const TagWrapper: FC<IProps> = ({
|
||||
color = 'default',
|
||||
children,
|
||||
feature,
|
||||
size,
|
||||
deletable,
|
||||
hoverable,
|
||||
|
|
@ -32,7 +32,7 @@ const TagWrapper: FC<IProps> = ({
|
|||
}) => {
|
||||
const canBeDeleted = deletable && !editing && !hasInput;
|
||||
const onDeletePress = useCallback(
|
||||
event => {
|
||||
(event) => {
|
||||
if (!onDelete) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -40,18 +40,23 @@ const TagWrapper: FC<IProps> = ({
|
|||
event.stopPropagation();
|
||||
onDelete();
|
||||
},
|
||||
[onDelete]
|
||||
[onDelete],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.tag, feature, size, {
|
||||
is_hoverable: hoverable,
|
||||
is_editing: editing,
|
||||
deletable: canBeDeleted,
|
||||
input: hasInput,
|
||||
clickable: onClick,
|
||||
})}
|
||||
className={classNames(
|
||||
styles.tag,
|
||||
size && styles[`size-${size}`],
|
||||
styles[`color-${color}`],
|
||||
{
|
||||
[styles.hoverable]: hoverable,
|
||||
[styles.editing]: editing,
|
||||
[styles.deletable]: canBeDeleted,
|
||||
[styles.input]: hasInput,
|
||||
[styles.clickable]: onClick,
|
||||
},
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className={styles.hole} />
|
||||
|
|
|
|||
|
|
@ -25,39 +25,37 @@ $big: 1.2;
|
|||
z-index: 40;
|
||||
}
|
||||
|
||||
&:global(.big) {
|
||||
height: $tag_height * $big;
|
||||
font: $font_16_semibold;
|
||||
border-radius: ($tag_height * $big * 0.5) 3px 3px ($tag_height * $big * 0.5);
|
||||
|
||||
.hole {
|
||||
width: $tag_height * $big;
|
||||
height: $tag_height * $big;
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.is_hoverable) {
|
||||
&.hoverable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:global(.is_editing) {
|
||||
&.editing {
|
||||
cursor: pointer;
|
||||
background-color: lighten($content_bg_light, 10%);
|
||||
background-color: $content_bg;
|
||||
}
|
||||
|
||||
&:global(.red) {
|
||||
&.input {
|
||||
color: transparent !important;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.color-danger {
|
||||
background: $danger_gradient;
|
||||
}
|
||||
|
||||
&:global(.blue) {
|
||||
&.color-info {
|
||||
background: $info_gradient;
|
||||
}
|
||||
|
||||
&:global(.green) {
|
||||
&.color-primary {
|
||||
background: $primary_gradient;
|
||||
}
|
||||
|
||||
&:global(.black) {
|
||||
&.color-black {
|
||||
background: transparentize(black, 0.7);
|
||||
box-shadow: none;
|
||||
color: $gray_75;
|
||||
|
|
@ -68,13 +66,15 @@ $big: 1.2;
|
|||
}
|
||||
}
|
||||
|
||||
&:global(.input) {
|
||||
color: transparent !important;
|
||||
min-width: 100px;
|
||||
}
|
||||
&.size-big {
|
||||
height: $tag_height * $big;
|
||||
font: $font_16_semibold;
|
||||
border-radius: ($tag_height * $big * 0.5) 3px 3px ($tag_height * $big * 0.5);
|
||||
|
||||
&:global(.clickable) {
|
||||
cursor: pointer;
|
||||
.hole {
|
||||
width: $tag_height * $big;
|
||||
height: $tag_height * $big;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -124,7 +124,8 @@ $big: 1.2;
|
|||
}
|
||||
|
||||
button.delete {
|
||||
box-shadow: inset $gray_90 1px 0, transparentize(black, 0.7) -1px 0;
|
||||
box-shadow: inset transparentize(white, 0.95) 1px 0,
|
||||
transparentize(black, 0.7) -1px 0;
|
||||
width: 24px;
|
||||
height: $tag_height;
|
||||
z-index: 24;
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: $color_danger;
|
||||
color: $color_link;
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 4px;
|
||||
background: lighten($color_danger, 10%);
|
||||
background: $color_link;
|
||||
right: 12px;
|
||||
top: 6px;
|
||||
transition: opacity 0.5s;
|
||||
|
|
@ -123,11 +123,11 @@
|
|||
}
|
||||
|
||||
&.lab::after {
|
||||
background: lighten($color_lab, 10%);
|
||||
background: $color_lab;
|
||||
}
|
||||
|
||||
&.boris::after {
|
||||
background: lighten($color_primary, 10%);
|
||||
background: $color_primary;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
|
|
|
|||
|
|
@ -19,13 +19,8 @@ const placeholder = 'Добавить';
|
|||
const prepareInput = (input: string): string[] => {
|
||||
return input
|
||||
.split(',')
|
||||
.map((title: string) =>
|
||||
title
|
||||
.trim()
|
||||
.substring(0, 64)
|
||||
.toLowerCase(),
|
||||
)
|
||||
.filter(el => el.length > 0);
|
||||
.map((title: string) => title.trim().substring(0, 64).toLowerCase())
|
||||
.filter((el) => el.length > 0);
|
||||
};
|
||||
|
||||
interface IProps {
|
||||
|
|
@ -88,7 +83,7 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
|
|||
|
||||
const onFocus = useCallback(() => setFocused(true), []);
|
||||
const onBlur = useCallback(
|
||||
event => {
|
||||
(event) => {
|
||||
if (!wrapper.current || !ref.current) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -122,9 +117,7 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
|
|||
[onAppend, setInput],
|
||||
);
|
||||
|
||||
const feature = useMemo(() => (input?.substr(0, 1) === '/' ? 'green' : ''), [
|
||||
input,
|
||||
]);
|
||||
const isAlbumTag = useMemo(() => input?.substr(0, 1) === '/', [input]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!focused) return;
|
||||
|
|
@ -138,7 +131,7 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
|
|||
<TagWrapper
|
||||
title={input || placeholder}
|
||||
hasInput={true}
|
||||
feature={feature}
|
||||
color={isAlbumTag ? 'primary' : undefined}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
|
|
|
|||
|
|
@ -19,8 +19,7 @@
|
|||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: 50% 0 no-repeat url('../../sprites/boris_bg.svg');
|
||||
background-size: cover;
|
||||
background: $boris_background;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
|
|||
|
|
@ -1,58 +1,45 @@
|
|||
// palette (use inside)
|
||||
$yellow: #ffd60f;
|
||||
$dark_blue: #592071;
|
||||
$blue: #582cd0;
|
||||
$green: #00d2b9;
|
||||
$wisegreen: #007962;
|
||||
$olive: #6cb337;
|
||||
$red: #ff3344;
|
||||
$orange: #ff7549;
|
||||
$lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
|
||||
$soft_blue: #3c75ff;
|
||||
$brown: #23201f;
|
||||
|
||||
// main definitions (move to --vars)
|
||||
$color_primary: $wisegreen;
|
||||
$color_danger: $red;
|
||||
$color_online: $olive;
|
||||
$color_offline: $red;
|
||||
$color_link: $red;
|
||||
$color_flow: $red;
|
||||
$color_lab: $blue;
|
||||
$color_primary: var(--color_primary);
|
||||
$color_danger: var(--color_danger);
|
||||
$color_online: var(--color_online);
|
||||
$color_offline: var(--color_offline);
|
||||
$color_link: var(--color_link);
|
||||
$color_flow: var(--color_flow);
|
||||
$color_lab: var(--color_lab);
|
||||
$color_boris: var(--color_boris);
|
||||
$color_like: var(--color_like);
|
||||
|
||||
// gradients (move to --vars)
|
||||
$danger_gradient: linear-gradient(165deg, $orange -50%, $color_danger 150%);
|
||||
$info_gradient: linear-gradient(170deg, $blue, $dark_blue);
|
||||
$warning_gradient: linear-gradient(165deg, $yellow -50%, $color_danger 150%);
|
||||
$primary_gradient: linear-gradient(
|
||||
170deg,
|
||||
$lightgreen -50%,
|
||||
$color_primary 150%
|
||||
);
|
||||
$magic_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
|
||||
$global_loader_gradient: linear-gradient(
|
||||
90deg,
|
||||
$dark_blue,
|
||||
$soft_blue,
|
||||
$dark_blue
|
||||
);
|
||||
$danger_gradient: var(--danger_gradient);
|
||||
$info_gradient: var(--info_gradient);
|
||||
$warning_gradient: var(--warning_gradient);
|
||||
$primary_gradient: var(--primary_gradient);
|
||||
$magic_gradient: var(--magic_gradient);
|
||||
$global_loader_gradient: var(--global_loader_gradient);
|
||||
$flow_gradient: var(--flow_gradient);
|
||||
$lab_gradient: var(--lab_gradient);
|
||||
|
||||
// backgrounds (move to --vars)
|
||||
$content_bg: $brown;
|
||||
$content_bg_dark: darken($brown, 2%);
|
||||
$content_bg_darker: darken($brown, 4%);
|
||||
$content_bg_light: lighten($brown, 2%);
|
||||
$content_bg_lighter: lighten($brown, 4%);
|
||||
$content_bg_lightest: lighten($brown, 6%);
|
||||
$content_bg: var(--content_bg);
|
||||
$content_bg_dark: var(--content_bg_dark);
|
||||
$content_bg_darker: var(--content_bg_darker);
|
||||
$content_bg_light: var(--content_bg_light);
|
||||
$content_bg_lighter: var(--content_bg_lighter);
|
||||
$content_bg_lightest: var(--content_bg_lightest);
|
||||
|
||||
$content_bg_success: transparentize($wisegreen, 0.7);
|
||||
$content_bg_info: transparentize($blue, 0.5);
|
||||
$content_bg_danger: transparentize($red, 0.5);
|
||||
$content_bg_backdrop: transparentize($content_bg, 0.2);
|
||||
$content_bg_success: var(--content_bg_success);
|
||||
$content_bg_info: var(--content_bg_info);
|
||||
$content_bg_danger: var(--content_bg_danger);
|
||||
$content_bg_backdrop: var(--content_bg_backdrop);
|
||||
|
||||
// white shades (move to --vars)
|
||||
$white: white;
|
||||
$gray_25: mix($content_bg, white, 25%);
|
||||
$gray_50: mix($content_bg, white, 50%);
|
||||
$gray_75: mix($content_bg, white, 75%);
|
||||
$gray_90: mix($content_bg, white, 92%);
|
||||
$white: var(--white);
|
||||
$gray_25: var(--gray_25);
|
||||
$gray_50: var(--gray_50);
|
||||
$gray_75: var(--gray_75);
|
||||
$gray_90: var(--gray_90);
|
||||
|
||||
// global
|
||||
$page_background: var(--page-background);
|
||||
$page_background_top: var(--page-background-top);
|
||||
$boris_background: var(--boris-background);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use './themes/default' as theme_default;
|
||||
@use './themes/horizon' as theme_horizon;
|
||||
|
||||
@import 'src/styles/variables';
|
||||
@import 'photoswipe/dist/photoswipe';
|
||||
@import 'photoswipe/dist/default-skin/default-skin';
|
||||
|
|
@ -10,6 +13,9 @@
|
|||
@import 'swiper/css/zoom';
|
||||
@import 'swiper/css/navigation';
|
||||
|
||||
@include theme_default.apply();
|
||||
@include theme_horizon.apply();
|
||||
|
||||
html {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -17,7 +23,7 @@ html {
|
|||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background: url('../../src/sprites/noise.png') $content_bg;
|
||||
background: $page_background;
|
||||
color: $white;
|
||||
font: $font_16_regular;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -32,8 +38,7 @@ body {
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
background: url('../../src/sprites/noise_top.png') 0% 0%;
|
||||
background-size: 600px 600px;
|
||||
background: $page_background_top;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +73,7 @@ body {
|
|||
}
|
||||
|
||||
.done {
|
||||
background-color: $green;
|
||||
background-color: $color_primary;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -76,7 +81,7 @@ h2 {
|
|||
}
|
||||
|
||||
.username {
|
||||
color: $color_primary;
|
||||
color: $color_link;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -266,29 +266,25 @@
|
|||
|
||||
[data-popper-placement*='bottom'] & {
|
||||
border-width: 0 10px 10px 10px;
|
||||
border-color: transparent transparent lighten($content_bg_light, 6%)
|
||||
transparent;
|
||||
border-color: transparent transparent $content_bg_lightest transparent;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
[data-popper-placement*='top'] & {
|
||||
border-width: 10px 10px 0 10px;
|
||||
border-color: lighten($content_bg_light, 6%) transparent transparent
|
||||
transparent;
|
||||
border-color: $content_bg_lightest transparent transparent transparent;
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
[data-popper-placement*='right'] & {
|
||||
border-width: 10px 10px 10px 0;
|
||||
border-color: transparent lighten($content_bg_light, 6%) transparent
|
||||
transparent;
|
||||
border-color: transparent $content_bg_lightest transparent transparent;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
[data-popper-placement*='left'] & {
|
||||
border-width: 10px 0 10px 10px;
|
||||
border-color: transparent transparent transparent
|
||||
lighten($content_bg_light, 6%);
|
||||
border-color: transparent transparent transparent $content_bg_lightest;
|
||||
right: -10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
82
src/styles/themes/_default.scss
Normal file
82
src/styles/themes/_default.scss
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
// palette (use inside)
|
||||
|
||||
$_yellow: #ffd60f;
|
||||
$_dark_blue: #592071;
|
||||
$_blue: #582cd0;
|
||||
$_green: #00d2b9;
|
||||
$_wisegreen: #007962;
|
||||
$_olive: #6cb337;
|
||||
$_red: #ff3344;
|
||||
$_orange: #ff7549;
|
||||
$_lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
|
||||
$_soft_blue: #3c75ff;
|
||||
$_brown: #23201f;
|
||||
|
||||
@mixin apply {
|
||||
:root {
|
||||
// main definitions (move to --vars)
|
||||
--color_primary: #{$_wisegreen};
|
||||
--color_danger: #{$_red};
|
||||
--color_online: #{$_olive};
|
||||
--color_offline: #{$_red};
|
||||
--color_link: #{$_red};
|
||||
--color_like: #{$_red};
|
||||
--color_flow: #{$_red};
|
||||
--color_lab: #{$_blue};
|
||||
--color_boris: #{$_wisegreen};
|
||||
|
||||
// gradients (move to --vars)
|
||||
--danger_gradient: linear-gradient(165deg, #{$_orange} -50%, #{$_red} 150%);
|
||||
--info_gradient: linear-gradient(170deg, #{$_blue}, #{$_dark_blue});
|
||||
--warning_gradient: linear-gradient(
|
||||
165deg,
|
||||
#{$_yellow} -50%,
|
||||
#{$_red} 150%
|
||||
);
|
||||
--primary_gradient: linear-gradient(
|
||||
170deg,
|
||||
#{$_lightgreen} -50%,
|
||||
#{$_wisegreen} 150%
|
||||
);
|
||||
--magic_gradient: linear-gradient(
|
||||
260deg,
|
||||
#{$_soft_blue} -50%,
|
||||
#7b2653 150%
|
||||
);
|
||||
--global_loader_gradient: linear-gradient(
|
||||
90deg,
|
||||
#{$_dark_blue},
|
||||
#{$_soft_blue},
|
||||
#{$_dark_blue}
|
||||
);
|
||||
--flow_gradient: var(--danger_gradient);
|
||||
--lab_gradient: var(--info_gradient);
|
||||
|
||||
// backgrounds (move to --vars)
|
||||
--content_bg: #{$_brown};
|
||||
--content_bg_dark: #{darken($_brown, 2%)};
|
||||
--content_bg_darker: #{darken($_brown, 4%)};
|
||||
--content_bg_light: #{lighten($_brown, 2%)};
|
||||
--content_bg_lighter: #{lighten($_brown, 4%)};
|
||||
--content_bg_lightest: #{lighten($_brown, 6%)};
|
||||
|
||||
--content_bg_success: #{transparentize($_wisegreen, 0.7)};
|
||||
--content_bg_info: #{transparentize($_blue, 0.5)};
|
||||
--content_bg_danger: #{transparentize($_red, 0.5)};
|
||||
--content_bg_backdrop: #{transparentize($_brown, 0.2)};
|
||||
|
||||
// white shades (move to --vars)
|
||||
--white: white;
|
||||
--gray_25: #{transparentize(white, 0.25)};
|
||||
--gray_50: #{transparentize(white, 0.5)};
|
||||
--gray_75: #{transparentize(white, 0.75)};
|
||||
--gray_90: #{transparentize(white, 0.95)};
|
||||
|
||||
// page background
|
||||
--page-background: url('../../../src/sprites/noise.png') 0% 0% #{$_brown};
|
||||
--page-background-top: 600px 600px url('../../../src/sprites/noise_top.png')
|
||||
0% 0%;
|
||||
--boris-background: 50% 0 / cover no-repeat
|
||||
url('../../sprites/boris_bg.svg');
|
||||
}
|
||||
}
|
||||
92
src/styles/themes/_horizon.scss
Normal file
92
src/styles/themes/_horizon.scss
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
// palette (use inside)
|
||||
|
||||
$_yellow: #ffd60f;
|
||||
$_dark_blue: #592071;
|
||||
$_blue: #582cd0;
|
||||
$_green: #00d2b9;
|
||||
$_wisegreen: #007962;
|
||||
$_olive: #6cb337;
|
||||
$_red: #ff3344;
|
||||
$_orange: #ff7549;
|
||||
$_lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
|
||||
$_soft_blue: #7693d6;
|
||||
|
||||
$_cold: #1c1e26;
|
||||
$_accent: #e95678;
|
||||
$_mandarine: #f09483;
|
||||
$_lemon: #fab795;
|
||||
$_ocean: #25b0bc;
|
||||
|
||||
@mixin apply {
|
||||
:root.theme_horizon {
|
||||
// main definitions (move to --vars)
|
||||
--color_primary: #{$_accent};
|
||||
--color_danger: #{$_red};
|
||||
--color_online: #{$_ocean};
|
||||
--color_offline: #{$_mandarine};
|
||||
--color_link: #{$_ocean};
|
||||
--color_like: #{$_lemon};
|
||||
--color_flow: #{$_red};
|
||||
--color_lab: #{$_blue};
|
||||
--color_boris: #{$_wisegreen};
|
||||
|
||||
// gradients (move to --vars)
|
||||
--danger_gradient: linear-gradient(165deg, #{$_orange} -50%, #{$_red} 150%);
|
||||
--info_gradient: linear-gradient(170deg, #{$_ocean}, #{$_soft_blue});
|
||||
|
||||
--warning_gradient: linear-gradient(
|
||||
165deg,
|
||||
#{$_yellow} -50%,
|
||||
#{$_red} 150%
|
||||
);
|
||||
|
||||
--primary_gradient: linear-gradient(
|
||||
170deg,
|
||||
#{$_mandarine} -150%,
|
||||
#{$_accent} 100%
|
||||
);
|
||||
|
||||
--magic_gradient: linear-gradient(
|
||||
260deg,
|
||||
#{$_accent} -50%,
|
||||
#{$_orange} 150%
|
||||
);
|
||||
|
||||
--global_loader_gradient: linear-gradient(
|
||||
90deg,
|
||||
#{$_lemon},
|
||||
#{$_accent},
|
||||
#{$_mandarine}
|
||||
);
|
||||
--flow_gradient: var(--primary_gradient);
|
||||
--lab_gradient: var(--info_gradient);
|
||||
|
||||
// backgrounds (move to --vars)
|
||||
--content_bg: #{$_cold};
|
||||
--content_bg_dark: #{darken($_cold, 2%)};
|
||||
--content_bg_darker: #{darken($_cold, 4%)};
|
||||
--content_bg_light: #{lighten($_cold, 2%)};
|
||||
--content_bg_lighter: #{lighten($_cold, 4%)};
|
||||
--content_bg_lightest: #{lighten($_cold, 6%)};
|
||||
|
||||
--content_bg_success: #{transparentize($_accent, 0.7)};
|
||||
--content_bg_info: #{transparentize($_lemon, 0.7)};
|
||||
--content_bg_danger: #{transparentize($_red, 0.5)};
|
||||
--content_bg_backdrop: #{transparentize($_cold, 0.2)};
|
||||
|
||||
// white shades (move to --vars)
|
||||
--white: white;
|
||||
--gray_25: #{transparentize(white, 0.25)};
|
||||
--gray_50: #{transparentize(white, 0.5)};
|
||||
--gray_75: #{transparentize(white, 0.75)};
|
||||
--gray_90: #{transparentize(white, 0.95)};
|
||||
|
||||
// page background
|
||||
--page-background: 50% 50% / cover no-repeat url('/images/horizon_bg.svg') #{darken(
|
||||
$_cold,
|
||||
4%
|
||||
)} fixed;
|
||||
--page-background-top: none;
|
||||
--boris-background: linear-gradient(#{$_ocean} -200%, transparent 50%);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue