mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
Добавил тему "Веспера"
This commit is contained in:
muerwre
GitHub
parent
5d34090238
commit
aee4b662d5
148 changed files with 1331 additions and 1338 deletions
205
public/images/horizon_bg.svg
Normal file
205
public/images/horizon_bg.svg
Normal file
|
|
@ -0,0 +1,205 @@
|
||||||
|
<?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.25627711"
|
||||||
|
inkscape:cx="792.11133"
|
||||||
|
inkscape:cy="318.01514"
|
||||||
|
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-effect11213"
|
||||||
|
is_visible="true"
|
||||||
|
lpeversion="1" />
|
||||||
|
<inkscape:path-effect
|
||||||
|
effect="simplify"
|
||||||
|
id="path-effect11211"
|
||||||
|
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-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"
|
||||||
|
style="opacity:0.23115578">
|
||||||
|
<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;stroke-opacity:1;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;stroke-opacity:0.999981110435556;stroke-width:0.529167px;opacity:0.30654669811358"
|
||||||
|
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;stroke-opacity:0.999697766968889;stroke-width:0.529167px;opacity:0.306752169817284"
|
||||||
|
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;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;stroke-opacity:0.995164271502222;stroke-width:0.529167px;opacity:0.310039717076543"
|
||||||
|
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;stroke-opacity:0.988194022222222;stroke-width:0.529167px;opacity:0.315094320987654"
|
||||||
|
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;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;stroke-opacity:0.954646155768889;stroke-width:0.529167px;opacity:0.339422170706173"
|
||||||
|
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;stroke-opacity:0.922628344035556;stroke-width:0.529167px;opacity:0.362640473224691"
|
||||||
|
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;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;stroke-opacity:0.811104355555556;stroke-width:0.529167px;opacity:0.443514135802469"
|
||||||
|
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;stroke-opacity:0.723437886968889;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;stroke-opacity:0.60830599168;stroke-width:0.529167px;opacity:0.5905770832"
|
||||||
|
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;stroke-opacity:0.460495149902222;stroke-width:0.529167px;opacity:0.697764821965432"
|
||||||
|
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;stroke-opacity:0.274338492302222;stroke-width:0.529167px;opacity:0.832759731298766"
|
||||||
|
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;stroke-opacity:0.0437158;stroke-width:0.529167px;opacity:1"
|
||||||
|
id="path30556" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 176 KiB After Width: | Height: | Size: 176 KiB |
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
padding: $gap;
|
padding: $gap;
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ interface IProps {}
|
||||||
|
|
||||||
const LoginSocialRegisterButtons: FC<IProps> = () => (
|
const LoginSocialRegisterButtons: FC<IProps> = () => (
|
||||||
<div className={styles.wrap}>
|
<div className={styles.wrap}>
|
||||||
<Button color="secondary">Впустите меня!</Button>
|
<Button>Впустите меня!</Button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.error_shade {
|
.error_shade {
|
||||||
@include outer_shadow();
|
@include outer_shadow();
|
||||||
|
|
@ -19,17 +19,17 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font: $font_18_semibold;
|
font: $font_18_semibold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $wisegreen;
|
color: $color_primary;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $wisegreen;
|
fill: $color_primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.error_shade {
|
.error_shade {
|
||||||
color: $red;
|
color: $color_danger;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $red;
|
fill: $color_danger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,9 +18,7 @@ const RestoreSent: VFC<RestoreSentProps> = ({ onClose }) => (
|
||||||
|
|
||||||
<div />
|
<div />
|
||||||
|
|
||||||
<Button color="secondary" onClick={onClose}>
|
<Button onClick={onClose}>Отлично!</Button>
|
||||||
Отлично!
|
|
||||||
</Button>
|
|
||||||
</Group>
|
</Group>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.shade {
|
.shade {
|
||||||
@include outer_shadow();
|
@include outer_shadow();
|
||||||
|
|
@ -19,9 +19,9 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font: $font_18_semibold;
|
font: $font_18_semibold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $wisegreen;
|
color: $color_primary;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $wisegreen;
|
fill: $color_primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,9 +20,7 @@ const RestoreSuccess: VFC<RestoreSuccessProps> = ({ username, onClick }) => (
|
||||||
|
|
||||||
<div />
|
<div />
|
||||||
|
|
||||||
<Button color="secondary" onClick={onClick}>
|
<Button onClick={onClick}>Ура!</Button>
|
||||||
Ура!
|
|
||||||
</Button>
|
|
||||||
</Group>
|
</Group>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.shade {
|
.shade {
|
||||||
@include outer_shadow();
|
@include outer_shadow();
|
||||||
|
|
@ -19,9 +19,9 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font: $font_18_semibold;
|
font: $font_18_semibold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $wisegreen;
|
color: $color_primary;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $wisegreen;
|
fill: $color_primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.place {
|
.place {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -11,11 +11,8 @@
|
||||||
@include outer_shadow();
|
@include outer_shadow();
|
||||||
display: flex;
|
display: flex;
|
||||||
border-radius: $radius $radius 0 0;
|
border-radius: $radius $radius 0 0;
|
||||||
// background: $main_gradient;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: lighten($content_bg, 6%);
|
background: $content_bg_lightest;
|
||||||
// box-shadow: rgba(0, 0, 0, 0.5) 0 2px 5px, inset rgba(255, 255, 255, 0.3) 1px 1px,
|
|
||||||
// inset rgba(0, 0, 0, 0.3) 0 -1px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -48,7 +45,7 @@
|
||||||
svg {
|
svg {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
fill: darken(white, 50%);
|
fill: $gray_50;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -71,7 +68,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: darken(white, 50%);
|
color: $gray_50;
|
||||||
font: $font_14_semibold;
|
font: $font_14_semibold;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -91,7 +88,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: darken(white, 50%);
|
background: $gray_50;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
|
@ -103,7 +100,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
background: darken(white, 50%);
|
background: $gray_50;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
background: $red_gradient;
|
background: $flow_gradient;
|
||||||
width: $bar_height;
|
width: $bar_height;
|
||||||
height: $bar_height;
|
height: $bar_height;
|
||||||
border-radius: $bar_height * 0.5;
|
border-radius: $bar_height * 0.5;
|
||||||
|
|
@ -34,12 +34,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.lab & {
|
.lab & {
|
||||||
background: $blue_gradient;
|
background: $info_gradient;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
background: lighten($content_bg, 4%);
|
background: $content_bg_lighter;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: darken(white, 50%);
|
color: $gray_50;
|
||||||
padding: $gap;
|
padding: $gap;
|
||||||
min-height: 42px;
|
min-height: 42px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
padding: $gap * 0.5 0;
|
padding: $gap * 0.5 0;
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
.time {
|
.time {
|
||||||
font: $font_12_regular;
|
font: $font_12_regular;
|
||||||
line-height: 17px;
|
line-height: 17px;
|
||||||
color: transparentize(white, 0.7)
|
color: $gray_75;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subject {
|
.subject {
|
||||||
|
|
@ -30,10 +30,10 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
&.open {
|
&.open {
|
||||||
color: $red;
|
color: $color_offline;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.closed {
|
&.closed {
|
||||||
color: $green;
|
color: $color_online;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
@ -16,5 +16,5 @@
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font: $font_12_regular;
|
font: $font_12_regular;
|
||||||
color: transparentize(white, 0.5);
|
color: $gray_50;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,8 +18,8 @@ const BorisUIDemo: FC<IProps> = () => {
|
||||||
<div className={markdown.wrapper}>
|
<div className={markdown.wrapper}>
|
||||||
<h1>UI</h1>
|
<h1>UI</h1>
|
||||||
<p>
|
<p>
|
||||||
Простая демонстрация элементов интерфейса. Используется, в основном, как подсказка при
|
Простая демонстрация элементов интерфейса. Используется, в основном,
|
||||||
разработке
|
как подсказка при разработке
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>Инпуты</h2>
|
<h2>Инпуты</h2>
|
||||||
|
|
@ -27,8 +27,18 @@ const BorisUIDemo: FC<IProps> = () => {
|
||||||
<form autoComplete="off">
|
<form autoComplete="off">
|
||||||
<Group>
|
<Group>
|
||||||
<InputText title="Обычный инпут" handler={setText} value={text} />
|
<InputText title="Обычный инпут" handler={setText} value={text} />
|
||||||
<InputText title="Инпут с ошибкой" error="Ошибка" handler={setText} value={text} />
|
<InputText
|
||||||
<InputText title="Пароль" type="password" handler={setText} value={text} />
|
title="Инпут с ошибкой"
|
||||||
|
error="Ошибка"
|
||||||
|
handler={setText}
|
||||||
|
value={text}
|
||||||
|
/>
|
||||||
|
<InputText
|
||||||
|
title="Пароль"
|
||||||
|
type="password"
|
||||||
|
handler={setText}
|
||||||
|
value={text}
|
||||||
|
/>
|
||||||
</Group>
|
</Group>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
@ -38,7 +48,6 @@ const BorisUIDemo: FC<IProps> = () => {
|
||||||
|
|
||||||
<Group horizontal className={styles.sample}>
|
<Group horizontal className={styles.sample}>
|
||||||
<Button>Primary</Button>
|
<Button>Primary</Button>
|
||||||
<Button color="secondary">Secondary</Button>
|
|
||||||
<Button color="outline">Outline</Button>
|
<Button color="outline">Outline</Button>
|
||||||
<Button color="gray">Gray</Button>
|
<Button color="gray">Gray</Button>
|
||||||
<Button color="link">Link</Button>
|
<Button color="link">Link</Button>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
flex: 3;
|
flex: 3;
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: 20px 30px;
|
padding: 20px 30px;
|
||||||
background-color: lighten($content_bg, 4%);
|
background-color: $content_bg_lighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sample {
|
.sample {
|
||||||
|
|
|
||||||
|
|
@ -29,15 +29,18 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
||||||
(acc, val, index) => [
|
(acc, val, index) => [
|
||||||
...acc,
|
...acc,
|
||||||
index === 0
|
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,
|
x: ((width - borderGap) / (items.length - 1)) * index,
|
||||||
y: height - (val / max) * (height - gap * 2) - gap,
|
y: height - (val / max) * (height - gap * 2) - gap,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
[]
|
[],
|
||||||
),
|
),
|
||||||
[height, width, items, gap]
|
[height, width, items, gap],
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!points.length) {
|
if (!points.length) {
|
||||||
|
|
@ -49,20 +52,29 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
||||||
{...props}
|
{...props}
|
||||||
width="100%"
|
width="100%"
|
||||||
height="100%"
|
height="100%"
|
||||||
viewBox={`0 0 ${width} ${height}`}
|
viewBox={`0 0 ${width} ${height * 1.05}`}
|
||||||
preserveAspectRatio="none"
|
preserveAspectRatio="none"
|
||||||
>
|
>
|
||||||
<defs>
|
<defs>
|
||||||
<filter id="f1" x="-50%" y="-50%" width="200%" height="200%">
|
<filter id="f1" x="-50%" y="-50%" width="200%" height="200%">
|
||||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
|
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
|
||||||
</filter>
|
</filter>
|
||||||
|
|
||||||
|
<filter id="brighter">
|
||||||
|
<feComponentTransfer>
|
||||||
|
<feFuncR type="linear" slope="3" />
|
||||||
|
<feFuncG type="linear" slope="3" />
|
||||||
|
<feFuncB type="linear" slope="3" />
|
||||||
|
</feComponentTransfer>
|
||||||
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
|
|
||||||
<path
|
<path
|
||||||
d={makeBezierCurve(points)}
|
d={makeBezierCurve(points)}
|
||||||
fill="none"
|
fill="none"
|
||||||
x={0}
|
x={0}
|
||||||
y={0}
|
y={gap / 2}
|
||||||
|
opacity={0.5}
|
||||||
stroke={stroke}
|
stroke={stroke}
|
||||||
strokeWidth={2}
|
strokeWidth={2}
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
|
|
@ -74,6 +86,7 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
||||||
fill="none"
|
fill="none"
|
||||||
x={0}
|
x={0}
|
||||||
y={0}
|
y={0}
|
||||||
|
opacity={0.3}
|
||||||
stroke={stroke}
|
stroke={stroke}
|
||||||
strokeWidth={2}
|
strokeWidth={2}
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
|
|
@ -84,9 +97,11 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
||||||
fill="none"
|
fill="none"
|
||||||
x={0}
|
x={0}
|
||||||
y={0}
|
y={0}
|
||||||
stroke={lighten(stroke, 0.1)}
|
stroke={stroke}
|
||||||
|
opacity={1}
|
||||||
strokeWidth={1}
|
strokeWidth={1}
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
|
filter="url(#brighter)"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font: $font_18_semibold;
|
font: $font_18_semibold;
|
||||||
color: transparentize(white, 0.5);
|
color: $gray_50;
|
||||||
}
|
}
|
||||||
|
|
||||||
span.val {
|
span.val {
|
||||||
|
|
|
||||||
|
|
@ -15,11 +15,19 @@ interface StatsGraphCardProps extends CardProps {
|
||||||
right?: string | number;
|
right?: string | number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const StatsGraphCard: VFC<StatsGraphCardProps> = ({ total, title, data, left, right }) => (
|
const StatsGraphCard: VFC<StatsGraphCardProps> = ({
|
||||||
|
total,
|
||||||
|
title,
|
||||||
|
data,
|
||||||
|
left,
|
||||||
|
right,
|
||||||
|
}) => (
|
||||||
<StatsCard
|
<StatsCard
|
||||||
title={title}
|
title={title}
|
||||||
total={total}
|
total={total}
|
||||||
background={<BasicCurveChart items={data} />}
|
background={
|
||||||
|
<BasicCurveChart items={data} stroke={'var(--color_primary)'} />
|
||||||
|
}
|
||||||
className={styles.card}
|
className={styles.card}
|
||||||
>
|
>
|
||||||
<div className={styles.content}>
|
<div className={styles.content}>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,20 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
@keyframes appear {
|
@keyframes appear {
|
||||||
0% { opacity: 0 }
|
0% {
|
||||||
100% { opacity: 1 }
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.popper {
|
.popper {
|
||||||
@include outer_shadow;
|
@include outer_shadow;
|
||||||
|
|
||||||
background-color: darken($content_bg, 4%);
|
background-color: $content_bg_darker;
|
||||||
padding: $gap;
|
padding: $gap;
|
||||||
box-sizing:border-box;
|
box-sizing: border-box;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
@import "~flexbin/flexbin";
|
@import '~flexbin/flexbin';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
@include row_shadow;
|
@include row_shadow;
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
transition: opacity 0.25s, transform 0.25s;
|
transition: opacity 0.25s, transform 0.25s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: $red;
|
background: $color_danger;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
border-radius: 0 0 0 $radius;
|
border-radius: 0 0 0 $radius;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(0, 0);
|
transform: translate(0, 0);
|
||||||
background: transparentize($red, $amount: 0.5);
|
background: $content_bg_danger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -93,9 +93,9 @@
|
||||||
padding-bottom: 0 !important;
|
padding-bottom: 0 !important;
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
background: transparentize($color: $content_bg, $amount: 0.2);
|
background: $content_bg;
|
||||||
border-radius: $radius 0 $radius 0;
|
border-radius: $radius 0 $radius 0;
|
||||||
color: transparentize(white, 0.2);
|
color: $gray_25;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -108,10 +108,10 @@
|
||||||
bottom: 1px;
|
bottom: 1px;
|
||||||
right: 0;
|
right: 0;
|
||||||
font: $font_12_regular;
|
font: $font_12_regular;
|
||||||
color: transparentize($color: white, $amount: 0.8);
|
color: $gray_75;
|
||||||
padding: 0 6px 2px;
|
padding: 0 6px 2px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background: $comment_bg;
|
background: $content_bg_light;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.bar {
|
.bar {
|
||||||
font: $font_12_regular;
|
font: $font_12_regular;
|
||||||
color: darken(white, 60%);
|
color: $gray_50;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.embed {
|
.embed {
|
||||||
padding: 0 $gap;
|
padding: 0 $gap;
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: transparentize($content_bg, 0.15) 50% 50%;
|
background: $content_bg_backdrop 50% 50%;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
z-index: 15;
|
z-index: 15;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
background: transparentize(black, 0.8);
|
background: $content_bg_dark;
|
||||||
border-radius: 0 0 $radius $radius;
|
border-radius: 0 0 $radius $radius;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: $gap * 0.25;
|
padding: $gap * 0.25;
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
background: $red;
|
background: $color_danger;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
font: $font_12_regular;
|
font: $font_12_regular;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -9,12 +9,6 @@
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.dot {
|
|
||||||
background: $secondary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes appear {
|
@keyframes appear {
|
||||||
|
|
@ -57,6 +51,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $primary;
|
background: $color_primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
padding: 0 $gap;
|
padding: 0 $gap;
|
||||||
|
|
@ -26,12 +26,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.green) {
|
:global(.green) {
|
||||||
color: $wisegreen;
|
color: $color_primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > :last-child::after {
|
& > :last-child::after {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
content: " ";
|
content: ' ';
|
||||||
height: 1em;
|
height: 1em;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
flex: 0 0 120px;
|
flex: 0 0 120px;
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
@include outer_shadow;
|
@include outer_shadow;
|
||||||
|
|
||||||
width: $comment_height;
|
width: $comment_height;
|
||||||
height: $comment_height;
|
height: $comment_height;
|
||||||
background-color: transparentize(black, 0.9);
|
background-color: $content_bg_dark;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -9,12 +9,6 @@
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.dot {
|
|
||||||
background: $secondary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes appear {
|
@keyframes appear {
|
||||||
|
|
@ -57,6 +51,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $primary;
|
background: $color_primary;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% {
|
0% {
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: linear-gradient(90deg, $dark_blue, $soft_blue, $dark_blue);
|
background: $global_loader_gradient;
|
||||||
animation: spin infinite 1s linear;
|
animation: spin infinite 1s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -34,5 +34,5 @@
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
padding: 2px 10px;
|
padding: 2px 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: $cyan_gradient;
|
background: $magic_gradient;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
@import "src/styles/mixins";
|
@import 'src/styles/mixins';
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dots {
|
.dots {
|
||||||
@include blur($content_bg, 5px, 0.7);
|
@include blur;
|
||||||
|
|
||||||
padding: 5px 0 0 0;
|
padding: 5px 0 0 0;
|
||||||
background: $content_bg;
|
background: $content_bg;
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.helper {
|
.helper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: radial-gradient($red, transparent) 50% 24px no-repeat;
|
background: radial-gradient($color_danger, transparent) 50% 24px no-repeat;
|
||||||
background-size: 100% 48px;
|
background-size: 100% 48px;
|
||||||
display: none;
|
display: none;
|
||||||
width: calc(100% - 20px);
|
width: calc(100% - 20px);
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background-color: $card_bg;
|
background-color: $content_bg;
|
||||||
border-radius: $panel_radius;
|
border-radius: $panel_radius;
|
||||||
padding: $gap;
|
padding: $gap;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,27 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
@keyframes highlight {
|
@keyframes highlight {
|
||||||
0% { opacity: 0.75; }
|
0% {
|
||||||
25% { opacity: 0.5; }
|
opacity: 0.75;
|
||||||
50% { opacity: 0.75; }
|
}
|
||||||
75% { opacity: 0; }
|
25% {
|
||||||
100% { opacity: 0; }
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
@include outer_shadow;
|
@include outer_shadow;
|
||||||
|
|
||||||
background: $comment_bg;
|
background: $content_bg_light;
|
||||||
min-height: $comment_height;
|
min-height: $comment_height;
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -35,7 +45,6 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
animation: highlight 1s 0.5s forwards;
|
animation: highlight 1s 0.5s forwards;
|
||||||
background: transparentize($wisegreen, 0.7);
|
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
|
|
@ -64,7 +73,7 @@
|
||||||
.thumb {
|
.thumb {
|
||||||
flex: 0 0 $comment_height;
|
flex: 0 0 $comment_height;
|
||||||
border-radius: $panel_radius 0 0 $panel_radius;
|
border-radius: $panel_radius 0 0 $panel_radius;
|
||||||
background-color: transparentize(black, 0.9);
|
background-color: $content_bg;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -73,14 +82,15 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex: 0 0 40px;
|
flex: 0 0 40px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px;
|
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px,
|
||||||
|
inset rgba(0, 0, 0, 0.1) -1px -1px;
|
||||||
border-radius: $panel_radius $panel_radius 0 0;
|
border-radius: $panel_radius $panel_radius 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div.thumb_image {
|
div.thumb_image {
|
||||||
height: $comment_height;
|
height: $comment_height;
|
||||||
background: transparentize(white, 0.97) no-repeat 50% 50%;
|
background: $gray_90 no-repeat 50% 50%;
|
||||||
border-radius: $panel_radius 0 0 $panel_radius;
|
border-radius: $panel_radius 0 0 $panel_radius;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
flex: 0 0 $comment_height;
|
flex: 0 0 $comment_height;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.cover {
|
.cover {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: url('../../../sprites/stripes.svg') transparentize($color: #000000, $amount: 0.5);
|
background: url('../../../sprites/stripes.svg') $content_bg_backdrop;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
0% {
|
0% {
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: url(../../../sprites/stripes.svg) transparentize($content_bg, 0.2);
|
background: url(../../../sprites/stripes.svg) $content_bg_backdrop;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include tablet {
|
@include tablet {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
$pad_danger: mix($red, $content_bg, 70%);
|
$pad_usual: $content_bg_lightest;
|
||||||
$pad_usual: mix(white, $content_bg, 10%);
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -19,7 +18,7 @@ $pad_usual: mix(white, $content_bg, 10%);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
.danger & {
|
.danger & {
|
||||||
background: $pad_danger;
|
background: $content_bg_danger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -31,7 +30,7 @@ $pad_usual: mix(white, $content_bg, 10%);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&.danger {
|
&.danger {
|
||||||
box-shadow: inset $pad_danger 0 0 0 2px;
|
box-shadow: inset $content_bg_danger 0 0 0 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.with_title {
|
&.with_title {
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: transparentize(darken($content_bg, 4%), 0.5);
|
background: $content_bg_backdrop;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
.footer {
|
.footer {
|
||||||
@include outer_shadow();
|
@include outer_shadow();
|
||||||
|
|
||||||
background: darken($content_bg, 2%);
|
background: $content_bg_dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
|
|
@ -66,7 +66,7 @@
|
||||||
.close {
|
.close {
|
||||||
@include outer_shadow;
|
@include outer_shadow;
|
||||||
|
|
||||||
background: lighten($content_bg, 4%);
|
background: $content_bg_lighter;
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -88,7 +88,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $red;
|
background-color: $color_danger;
|
||||||
transform: translate(50%, 0) scale(1.25);
|
transform: translate(50%, 0) scale(1.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -105,7 +105,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background: linear-gradient(0deg, $red 50%, transparentize($red, 1));
|
background: linear-gradient(0deg, $color_danger 50%, transparent);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -132,7 +132,7 @@
|
||||||
|
|
||||||
.shade {
|
.shade {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: transparentize($content_bg, 0.3);
|
background: $content_bg_backdrop;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.fixed {
|
.fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
@include modal_backdrop();
|
@include blur;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background: lighten($content_bg, 4%);
|
background: $content_bg_lighter;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@ const EditorButtons: FC = () => {
|
||||||
<Button
|
<Button
|
||||||
title={isTablet ? undefined : 'Сохранить'}
|
title={isTablet ? undefined : 'Сохранить'}
|
||||||
iconRight="check"
|
iconRight="check"
|
||||||
color={values.is_promoted ? 'primary' : 'lab'}
|
color={values.is_promoted ? 'flow' : 'lab'}
|
||||||
disabled={isSubmitting}
|
disabled={isSubmitting}
|
||||||
type="submit"
|
type="submit"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
@keyframes appear {
|
@keyframes appear {
|
||||||
0% {
|
0% {
|
||||||
|
|
@ -10,6 +10,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
|
@include blur;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -20,8 +22,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
animation: appear 0.25s forwards;
|
animation: appear 0.25s forwards;
|
||||||
|
|
||||||
@include blur();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
|
@ -37,6 +37,6 @@
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font: $font_12_medium;
|
font: $font_12_medium;
|
||||||
color: darken(white, 50%);
|
color: $gray_50;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,14 +12,14 @@ interface IProps extends IEditorComponentProps {}
|
||||||
const EditorPublicSwitch: FC<IProps> = () => {
|
const EditorPublicSwitch: FC<IProps> = () => {
|
||||||
const { values, setFieldValue } = useNodeFormContext();
|
const { values, setFieldValue } = useNodeFormContext();
|
||||||
|
|
||||||
const onChange = useCallback(() => setFieldValue('is_promoted', !values.is_promoted), [
|
const onChange = useCallback(
|
||||||
values.is_promoted,
|
() => setFieldValue('is_promoted', !values.is_promoted),
|
||||||
setFieldValue,
|
[values.is_promoted, setFieldValue],
|
||||||
]);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
color={values.is_promoted ? 'primary' : 'lab'}
|
color={values.is_promoted ? 'flow' : 'lab'}
|
||||||
type="button"
|
type="button"
|
||||||
size="giant"
|
size="giant"
|
||||||
label={
|
label={
|
||||||
|
|
|
||||||
|
|
@ -31,18 +31,25 @@ const EditorUploadButton: FC<IProps> = ({
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
const files = Array.from(event.target.files || []).filter(
|
const files = Array.from(event.target.files || []).filter(
|
||||||
file => !type || getFileType(file) === type
|
(file) => !type || getFileType(file) === type,
|
||||||
);
|
);
|
||||||
|
|
||||||
uploadFiles(files);
|
uploadFiles(files);
|
||||||
},
|
},
|
||||||
[type, uploadFiles]
|
[type, uploadFiles],
|
||||||
);
|
);
|
||||||
|
|
||||||
const color = values.is_promoted ? 'primary' : 'lab';
|
const color = values.is_promoted ? 'flow' : 'lab';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button type="button" round size="giant" className={styles.wrap} label={label} color={color}>
|
<Button
|
||||||
|
type="button"
|
||||||
|
round
|
||||||
|
size="giant"
|
||||||
|
className={styles.wrap}
|
||||||
|
label={label}
|
||||||
|
color={color}
|
||||||
|
>
|
||||||
<Icon icon={icon} size={24} />
|
<Icon icon={icon} size={24} />
|
||||||
<input type="file" onChange={onInputChange} accept={accept} multiple />
|
<input type="file" onChange={onInputChange} accept={accept} multiple />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
@include outer_shadow();
|
@include outer_shadow();
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: opacity 0.5s;
|
transition: opacity 0.5s;
|
||||||
background: lighten($content_bg, 4%);
|
background: $content_bg_lighter;
|
||||||
flex: 0 1 $upload_button_height * 4;
|
flex: 0 1 $upload_button_height * 4;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -68,11 +68,11 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, rgba(0, 0, 0, 0.3) -1px 0;
|
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, rgba(0, 0, 0, 0.3) -1px 0;
|
||||||
border-radius: $upload_button_height;
|
border-radius: $upload_button_height;
|
||||||
background: transparentize($color: lighten($content_bg, 4%), $amount: 0);
|
background: $content_bg_lighter;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
svg {
|
svg {
|
||||||
fill: $red;
|
fill: $color_danger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.preview {
|
.preview {
|
||||||
padding-top: 56.25%;
|
padding-top: 56.25%;
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
background: 50% 50% no-repeat;
|
background: 50% 50% no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
// background: darken($color: $content_bg, $amount: 2%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input_wrap {
|
.input_wrap {
|
||||||
|
|
@ -34,6 +33,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:global(.active) {
|
&:global(.active) {
|
||||||
background: $red;
|
background: $color_danger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.shade {
|
.shade {
|
||||||
background: linear-gradient(7deg, transparentize($content_bg, 0.05) 30px, transparentize($content_bg, 1) 250px);
|
background: linear-gradient(7deg, $content_bg 30px, transparent 250px);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
@include inner_shadow;
|
@include inner_shadow;
|
||||||
|
|
@ -57,13 +57,11 @@
|
||||||
.quadro &,
|
.quadro &,
|
||||||
.horizontal & {
|
.horizontal & {
|
||||||
max-width: calc(50% - 15px);
|
max-width: calc(50% - 15px);
|
||||||
@include blur(transparentize($content_bg, 0), 10px, 0.5)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.quadro &,
|
.quadro &,
|
||||||
.vertical & {
|
.vertical & {
|
||||||
max-height: calc(50% - 15px);
|
max-height: calc(50% - 15px);
|
||||||
@include blur(transparentize($content_bg, 0), 10px, 0.5)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.dropdown {
|
.dropdown {
|
||||||
@include outer_shadow;
|
@include outer_shadow;
|
||||||
@include blur($red, 15px, 0.3);
|
@include blur($content_bg_info);
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
background: $red;
|
background: $color_danger;
|
||||||
box-shadow: $content_bg 0 0 0 5px;
|
box-shadow: $content_bg 0 0 0 5px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -2px;
|
right: -2px;
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
|
|
||||||
&.lab {
|
&.lab {
|
||||||
&::after {
|
&::after {
|
||||||
background: $blue;
|
background: $color_lab;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
.comment {
|
.comment {
|
||||||
font: $font_12_regular;
|
font: $font_12_regular;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
color: darken(white, 50%);
|
color: $gray_50;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
fill: transparentize(white, 0.7);
|
fill: $gray_75;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
min-height: 250px;
|
min-height: 250px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
background: url('../../../sprites/stripes.svg') rgba(0, 0, 0, 0.3);
|
background: url('../../../sprites/stripes.svg') rgba(0, 0, 0, 0.3);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
box-shadow: inset transparentize($color: white, $amount: 0.85) 0 1px;
|
box-shadow: inset $gray_90 0 1px;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
}
|
}
|
||||||
|
|
@ -58,11 +58,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(
|
background: linear-gradient(182deg, transparent 50%, $content_bg 95%);
|
||||||
182deg,
|
|
||||||
transparentize($cell_shade, 1) 50%,
|
|
||||||
transparentize($cell_shade, 0) 95%
|
|
||||||
);
|
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
|
|
@ -76,8 +72,7 @@ img.preview {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
:global(.swiper-slide-active) &,
|
:global(.swiper-slide-active) &,
|
||||||
:global(.swiper-slide-duplicate-active) &
|
:global(.swiper-slide-duplicate-active) & {
|
||||||
{
|
|
||||||
transform: translate(-15%, -20%);
|
transform: translate(-15%, -20%);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -164,5 +159,5 @@ img.preview {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: transparentize(white, 0.95);
|
color: $gray_90;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
height: 280px;
|
height: 280px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: transparentize(white, 0.9)
|
background: $gray_90
|
||||||
url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg') no-repeat 50% 30%;
|
url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg')
|
||||||
|
no-repeat 50% 30%;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
fill: $red;
|
fill: $color_danger;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
|
|
||||||
//path {
|
//path {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,10 @@
|
||||||
import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, useMemo } from 'react';
|
import React, {
|
||||||
|
ButtonHTMLAttributes,
|
||||||
|
DetailedHTMLProps,
|
||||||
|
FC,
|
||||||
|
memo,
|
||||||
|
useMemo,
|
||||||
|
} from 'react';
|
||||||
|
|
||||||
import Tippy from '@tippyjs/react';
|
import Tippy from '@tippyjs/react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
|
@ -14,7 +20,17 @@ type IButtonProps = DetailedHTMLProps<
|
||||||
HTMLButtonElement
|
HTMLButtonElement
|
||||||
> & {
|
> & {
|
||||||
size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
|
size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
|
||||||
color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab' | 'outline-white' | 'flat';
|
color?:
|
||||||
|
| 'primary'
|
||||||
|
| 'danger'
|
||||||
|
| 'info'
|
||||||
|
| 'outline'
|
||||||
|
| 'link'
|
||||||
|
| 'gray'
|
||||||
|
| 'flow'
|
||||||
|
| 'lab'
|
||||||
|
| 'outline-white'
|
||||||
|
| 'flat';
|
||||||
iconLeft?: IIcon;
|
iconLeft?: IIcon;
|
||||||
iconRight?: IIcon;
|
iconRight?: IIcon;
|
||||||
title?: string;
|
title?: string;
|
||||||
|
|
@ -65,7 +81,7 @@ const Button: FC<IButtonProps> = memo(
|
||||||
children,
|
children,
|
||||||
iconOnly,
|
iconOnly,
|
||||||
round,
|
round,
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
const loaderSize = useMemo(() => {
|
const loaderSize = useMemo(() => {
|
||||||
|
|
@ -79,9 +95,23 @@ const Button: FC<IButtonProps> = memo(
|
||||||
return (
|
return (
|
||||||
<Tippy content={label || ''} disabled={!label}>
|
<Tippy content={label || ''} disabled={!label}>
|
||||||
<button className={computedClassName} {...props}>
|
<button className={computedClassName} {...props}>
|
||||||
{iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />}
|
{iconLeft && (
|
||||||
|
<Icon
|
||||||
|
icon={iconLeft}
|
||||||
|
size={20}
|
||||||
|
key={0}
|
||||||
|
className={styles.icon_left}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{!!title ? <span>{title}</span> : children}
|
{!!title ? <span>{title}</span> : children}
|
||||||
{iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />}
|
{iconRight && (
|
||||||
|
<Icon
|
||||||
|
icon={iconRight}
|
||||||
|
size={20}
|
||||||
|
key={2}
|
||||||
|
className={styles.icon_right}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{loading && (
|
{loading && (
|
||||||
<div className={styles.loading}>
|
<div className={styles.loading}>
|
||||||
<LoaderCircle size={loaderSize} />
|
<LoaderCircle size={loaderSize} />
|
||||||
|
|
@ -90,7 +120,7 @@ const Button: FC<IButtonProps> = memo(
|
||||||
</button>
|
</button>
|
||||||
</Tippy>
|
</Tippy>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
export { Button };
|
export { Button };
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0% {
|
0% {
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
background: $button_bg_color;
|
background: $color_primary;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
||||||
fill: white;
|
fill: white;
|
||||||
|
|
@ -36,7 +36,8 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s;
|
transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s,
|
||||||
|
background-color 0.5s;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -68,10 +69,6 @@
|
||||||
&:global(.disabled) {
|
&:global(.disabled) {
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
|
||||||
box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:global(.stretchy) {
|
&:global(.stretchy) {
|
||||||
|
|
@ -81,7 +78,7 @@
|
||||||
|
|
||||||
&:global(.disabled),
|
&:global(.disabled),
|
||||||
&:global(.grey) {
|
&:global(.grey) {
|
||||||
background: transparentize(white, 0.9);
|
background: $gray_90;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -117,26 +114,26 @@
|
||||||
|
|
||||||
&.outline {
|
&.outline {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
|
box-shadow: inset $gray_75 0 0 0 2px;
|
||||||
color: transparentize(white, 0.8);
|
color: $gray_75;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: transparentize(white, 0.8);
|
fill: $gray_75;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.outline-white {
|
&.outline-white {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
box-shadow: inset transparentize(white, 0) 0 0 0 2px;
|
box-shadow: inset $white 0 0 0 2px;
|
||||||
color: transparentize(white, 0);
|
color: $white;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: transparentize(white, 0);
|
fill: $white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.gray {
|
&.gray {
|
||||||
background: lighten($content_bg, 8%);
|
background: $content_bg_lightest;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.link {
|
&.link {
|
||||||
|
|
@ -233,22 +230,31 @@
|
||||||
|
|
||||||
.primary {
|
.primary {
|
||||||
@include outer_shadow;
|
@include outer_shadow;
|
||||||
background: $red_gradient_alt;
|
background: $primary_gradient;
|
||||||
}
|
}
|
||||||
|
|
||||||
.secondary {
|
.danger {
|
||||||
@include outer_shadow;
|
@include outer_shadow;
|
||||||
background: $green_gradient;
|
background: $danger_gradient;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
@include outer_shadow;
|
||||||
|
background: $info_gradient;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lab {
|
.lab {
|
||||||
background: $blue;
|
background: $lab_gradient;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow {
|
||||||
|
background: $flow_gradient;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flat {
|
.flat {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
background: $comment_bg;
|
background: $content_bg_light;
|
||||||
color: darken(white, 20%);
|
color: $gray_25;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading {
|
.loading {
|
||||||
|
|
@ -260,5 +266,5 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: transparentize($content_bg, 0.1);
|
background: $content_bg_backdrop;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: transparentize($color: #000000, $amount: 0.1) 1px 0;
|
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-radius: 0 $radius $radius 0;
|
border-radius: 0 $radius $radius 0;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
min-height: $info_height;
|
min-height: $info_height;
|
||||||
|
|
@ -6,23 +6,23 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: $text_small;
|
font: $font_14_regular;
|
||||||
line-height: 1.2em;
|
line-height: 1.2em;
|
||||||
padding: $gap;
|
padding: $gap;
|
||||||
background: transparentize(white, 0.9);
|
background: $gray_90;
|
||||||
|
|
||||||
&:global(.danger) {
|
&:global(.danger) {
|
||||||
color: white;
|
color: white;
|
||||||
background: transparentize($red, 0.5);
|
background: $content_bg_danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:global(.warning) {
|
&:global(.warning) {
|
||||||
color: white;
|
color: white;
|
||||||
background: transparentize($red, 0.5);
|
background: $content_bg_danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:global(.primary) {
|
&:global(.primary) {
|
||||||
color: white;
|
color: white;
|
||||||
background: transparentize($red, 0.5);
|
background: $content_bg_danger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.input {
|
.input {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
||||||
&.has_error {
|
&.has_error {
|
||||||
color: $red;
|
color: $color_danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.has_prefix {
|
&.has_prefix {
|
||||||
|
|
@ -29,7 +29,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.suffix, .prefix{
|
.suffix,
|
||||||
|
.prefix {
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
stroke: currentColor;
|
stroke: currentColor;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -17,11 +17,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.has_error {
|
&.has_error {
|
||||||
box-shadow: inset $red 0 0 0 1px;
|
box-shadow: inset $content_bg_danger 0 0 0 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.error, .title {
|
.error,
|
||||||
|
.title {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
@ -37,7 +38,7 @@
|
||||||
padding: 0 $gap * 0.5;
|
padding: 0 $gap * 0.5;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
color: white;
|
color: white;
|
||||||
background-color: $red;
|
background-color: $content_bg_danger;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: $gap * 0.5;
|
right: $gap * 0.5;
|
||||||
transform: translate(0, 50%);
|
transform: translate(0, 50%);
|
||||||
|
|
@ -57,12 +58,14 @@
|
||||||
color: $input_grey_color;
|
color: $input_grey_color;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
.focused &, .not_empty & {
|
.focused &,
|
||||||
|
.not_empty & {
|
||||||
transform: translate(0, -100%) scale(0.75);
|
transform: translate(0, -100%) scale(0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
.focused.has_error &, .not_empty.has_error & {
|
.focused.has_error &,
|
||||||
|
.not_empty.has_error & {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: $red;
|
background-color: $content_bg_danger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
.toggle {
|
.toggle {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
width: 48px;
|
width: 48px;
|
||||||
flex: 0 0 48px;
|
flex: 0 0 48px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background-color: transparentize(white, 0.9);
|
background-color: $gray_90;
|
||||||
display: flex;
|
display: flex;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
height: 18px;
|
height: 18px;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
border-radius: 11px;
|
border-radius: 11px;
|
||||||
background-color: darken(white, 50%);
|
background-color: $gray_50;
|
||||||
transform: translate(0, 0);
|
transform: translate(0, 0);
|
||||||
transition: transform 0.25s, color 0.25s, background-color;
|
transition: transform 0.25s, color 0.25s, background-color;
|
||||||
}
|
}
|
||||||
|
|
@ -45,19 +45,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.primary {
|
&.primary {
|
||||||
background-color: $wisegreen;
|
background-color: $color_primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.secondary {
|
&.secondary {
|
||||||
background-color: transparentize(white, 0.85);
|
background-color: $gray_90;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.lab {
|
&.lab {
|
||||||
background-color: $blue;
|
background-color: $color_lab;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.danger {
|
&.danger {
|
||||||
background-color: $red;
|
background-color: $color_danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.monochrome {
|
&.monochrome {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
padding: $gap $lab_gap $lab_gap;
|
padding: $gap $lab_gap $lab_gap;
|
||||||
|
|
@ -10,13 +10,14 @@
|
||||||
|
|
||||||
.timestamp {
|
.timestamp {
|
||||||
font: $font_12_regular;
|
font: $font_12_regular;
|
||||||
color: darken(white, 40%);
|
color: $gray_50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments, .like {
|
.comments,
|
||||||
|
.like {
|
||||||
flex: 0;
|
flex: 0;
|
||||||
font: $font_16_semibold;
|
font: $font_16_semibold;
|
||||||
color: darken(white, 50%);
|
color: $gray_50;
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
stroke: none;
|
stroke: none;
|
||||||
column-gap: $gap !important;
|
column-gap: $gap !important;
|
||||||
|
|
@ -25,6 +26,6 @@
|
||||||
padding-left: $gap;
|
padding-left: $gap;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: $red;
|
color: $color_danger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.star {
|
.star {
|
||||||
fill: darken(white, 76%);
|
fill: $gray_75;
|
||||||
flex: 0 0 32px;
|
flex: 0 0 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -16,14 +16,14 @@
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
color: darken(white, 40%);
|
color: $gray_50;
|
||||||
|
|
||||||
@include clamp(2, 22px)
|
@include clamp(2, 22px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font: $font_10_regular;
|
font: $font_10_regular;
|
||||||
color: darken(white, 50%);
|
color: $gray_50;
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -21,7 +21,6 @@
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide {
|
.slide {
|
||||||
|
|
@ -52,14 +51,6 @@
|
||||||
max-height: calc(100vh - 70px - 70px);
|
max-height: calc(100vh - 70px - 70px);
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
transition: box-shadow 1s;
|
transition: box-shadow 1s;
|
||||||
box-shadow: transparentize(black, 0.7) 0 3px 5px;
|
|
||||||
|
|
||||||
:global(.swiper-slide-active) & {
|
|
||||||
box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
|
|
||||||
transparentize(black, 0.7) 0 5px 5px,
|
|
||||||
transparentize(white, 0.95) 0 -1px 2px,
|
|
||||||
transparentize(white, 0.95) 0 -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include tablet {
|
@include tablet {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,12 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
@include outer_shadow;
|
@include outer_shadow;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: $lab_post_bg;
|
background-color: $content_bg;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
||||||
&.heroic {
|
|
||||||
@include hero_gradient;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
padding: $lab_gap - $gap $lab_gap 0;
|
padding: $lab_gap - $gap $lab_gap 0;
|
||||||
|
|
@ -30,6 +30,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.star {
|
.star {
|
||||||
fill: darken(white, 50%);
|
fill: $gray_50;
|
||||||
flex: 0 0 24px;
|
flex: 0 0 24px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
font: $font_12_semibold;
|
font: $font_12_semibold;
|
||||||
background: transparentize(black, 0.9);
|
background: $content_bg_dark;
|
||||||
border-radius: 0 0 $radius $radius;
|
border-radius: 0 0 $radius $radius;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: darken(white, 80%);
|
color: $gray_75;
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
import React, { FC, useCallback, useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
import classNames from 'classnames';
|
|
||||||
|
|
||||||
import { Group } from '~/components/containers/Group';
|
|
||||||
|
|
||||||
import styles from './styles.module.scss';
|
|
||||||
|
|
||||||
interface IProps {}
|
|
||||||
|
|
||||||
export const SidePane: FC<IProps> = () => {
|
|
||||||
const content_width = 1100;
|
|
||||||
const [left, setLeft] = useState(0);
|
|
||||||
|
|
||||||
const moveThis = useCallback(() => {
|
|
||||||
const { width } = document.body.getBoundingClientRect();
|
|
||||||
const shift =
|
|
||||||
width > content_width + 64 + 20
|
|
||||||
? (width - content_width - 64 - 20) / 2 - 54 + 64 // + content_width + 74
|
|
||||||
: 10;
|
|
||||||
|
|
||||||
setLeft(shift);
|
|
||||||
}, [setLeft]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
moveThis();
|
|
||||||
window.addEventListener('resize', moveThis);
|
|
||||||
document.addEventListener('DOMContentLoaded', moveThis);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('resize', moveThis);
|
|
||||||
document.removeEventListener('DOMContentLoaded', moveThis);
|
|
||||||
};
|
|
||||||
}, [moveThis]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}>
|
|
||||||
<Group>
|
|
||||||
<div className={classNames(styles.group, 'logo')}>
|
|
||||||
<div>V</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.btn}>
|
|
||||||
<div>P</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.btn}>
|
|
||||||
<div>F</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.group}>
|
|
||||||
<div className={styles.btn} />
|
|
||||||
<div className={styles.btn} />
|
|
||||||
<div className={styles.btn} />
|
|
||||||
<div className={styles.btn} />
|
|
||||||
</div>
|
|
||||||
</Group>
|
|
||||||
|
|
||||||
<div className={styles.flexy} />
|
|
||||||
|
|
||||||
<div className={styles.btn}>S</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
@import "src/styles/variables";
|
|
||||||
|
|
||||||
.pane {
|
|
||||||
width: 54px;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: $gap 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group {
|
|
||||||
width: 54px;
|
|
||||||
border-radius: $panel_radius;
|
|
||||||
background: $panel_bg;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&:global(.logo) {
|
|
||||||
height: (54px * 1.5) + $gap * 0.5;
|
|
||||||
background: $red_gradient;
|
|
||||||
background-size: 140px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
box-shadow: inset #111111 0 -1px, inset #222222 0 1px;
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font: $font_24_semibold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
border-top-left-radius: $panel_radius;
|
|
||||||
border-top-right-radius: $panel_radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom-left-radius: $panel_radius;
|
|
||||||
border-bottom-right-radius: $panel_radius;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
height: 54px;
|
|
||||||
box-shadow: inset transparentize(black, 0.9) 0 -1px, inset transparentize(white, 0.95) 0 1px;
|
|
||||||
border-radius: $panel_radius;
|
|
||||||
background: $side_pane_btn_color;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font: $font_24_medium;
|
|
||||||
|
|
||||||
&:global(.orange) {
|
|
||||||
background: linear-gradient(280deg, $red, $orange);
|
|
||||||
color: transparentize(black, 0.7);
|
|
||||||
width: 66px;
|
|
||||||
border-radius: 6px 0 0 6px;
|
|
||||||
position: relative;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexy {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
margin-left: ($gap + 2px) !important;
|
margin-left: ($gap + 2px) !important;
|
||||||
background: 50% 50% no-repeat $wisegreen;
|
background: 50% 50% no-repeat $color_primary;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -21,8 +21,8 @@
|
||||||
svg {
|
svg {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
fill: transparentize($color: white, $amount: 0.5);
|
fill: $gray_50;
|
||||||
stroke: transparentize($color: white, $amount: 0.5);
|
stroke: $gray_50;
|
||||||
transition: fill 250ms, stroke 250ms;
|
transition: fill 250ms, stroke 250ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -67,7 +67,7 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding-right: 140px;
|
padding-right: 140px;
|
||||||
color: transparentize(white, 0.7);
|
color: $gray_75;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -92,7 +92,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background: transparentize(white, 0.95);
|
background: $gray_90;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -100,8 +100,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar {
|
.bar {
|
||||||
// background: linear-gradient(270deg, $green, $wisegreen);
|
background: $primary_gradient;
|
||||||
background: $main_gradient;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
img.image {
|
img.image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -47,14 +47,14 @@ img.image {
|
||||||
right: 30px;
|
right: 30px;
|
||||||
bottom: 40px;
|
bottom: 40px;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
color: $orange;
|
color: $color_offline;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $orange;
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
@include inner_shadow;
|
@include inner_shadow;
|
||||||
|
|
@ -21,9 +21,9 @@
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: $gap * 0.5 $gap $gap * 0.5 $gap;
|
padding: $gap * 0.5 $gap $gap * 0.5 $gap;
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
color: darken(white, 50%);
|
color: $gray_50;
|
||||||
transition: color 0.25s;
|
transition: color 0.25s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
@ -46,15 +46,15 @@
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
&.green {
|
&.green {
|
||||||
background: $green_gradient;
|
background: $primary_gradient;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.orange {
|
&.orange {
|
||||||
background: $red_gradient;
|
background: $danger_gradient;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.yellow {
|
&.yellow {
|
||||||
background: $yellow_gradient;
|
background: $warning_gradient;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
background-color: transparentize($content_bg, 0.05);
|
background-color: $content_bg_backdrop;
|
||||||
|
|
||||||
&.visible {
|
&.visible {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.translucent {
|
&.translucent {
|
||||||
@include blur($content_bg, 15px, 0.5);
|
@include blur;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
@import "src/styles/mixins";
|
@import 'src/styles/mixins';
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
flex: 0;
|
flex: 0;
|
||||||
|
|
@ -27,14 +27,14 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 3px;
|
width: 3px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
background: darken($content_bg, 1%);
|
background: $content_bg_darker;
|
||||||
display: flex;
|
display: flex;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
right: -$gap * 2 - 2px;
|
right: -$gap * 2 - 2px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
|
||||||
@include tablet {
|
@include tablet {
|
||||||
right : -$gap - 1px;
|
right: -$gap - 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
@import "src/styles/mixins";
|
@import 'src/styles/mixins';
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
@ -30,11 +30,11 @@ a.item {
|
||||||
padding: $gap;
|
padding: $gap;
|
||||||
font: $font_16_semibold;
|
font: $font_16_semibold;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: transparentize($secondary, 1);
|
background-color: transparent;
|
||||||
transition: background-color 0.25s;
|
transition: background-color 0.25s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: transparentize($secondary, 0.5);
|
background-color: $content_bg_success;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -15,9 +15,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
color: $red !important;
|
color: $color_danger !important;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $red !important;
|
fill: $color_danger !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
fill: white;
|
fill: white;
|
||||||
|
|
@ -24,6 +24,6 @@
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font: $font_12_regular;
|
font: $font_12_regular;
|
||||||
color: transparentize(white, 0.6);
|
color: $gray_75;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
div.block {
|
div.block {
|
||||||
@include inner_shadow_active;
|
@include inner_shadow_active;
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: $inset_bg;
|
background: linear-gradient(135deg, $content_bg_dark, $content_bg);
|
||||||
padding: $gap;
|
padding: $gap;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
padding: $gap;
|
padding: $gap;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
color: $red;
|
color: $color_danger;
|
||||||
padding: $gap * 4 $gap;
|
padding: $gap * 4 $gap;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font: $font_18_semibold;
|
font: $font_18_semibold;
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.placeholder {
|
.placeholder {
|
||||||
height: 320px;
|
height: 320px;
|
||||||
background: transparentize(black, 0.8);
|
background: $content_bg_dark;
|
||||||
border: $radius $radius 0 0;
|
border: $radius $radius 0 0;
|
||||||
@include outer_shadow();
|
@include outer_shadow();
|
||||||
|
|
||||||
|
|
@ -11,6 +11,6 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: transparentize(white, 0.95);
|
fill: $gray_90;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables.scss";
|
@import 'src/styles/variables.scss';
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
left: 50%;
|
left: 50%;
|
||||||
bottom: $gap * 2;
|
bottom: $gap * 2;
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
background: darken($content_bg, 4%);
|
background: $content_bg_darker;
|
||||||
width: auto;
|
width: auto;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
@ -82,7 +82,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide.slide {
|
.slide.slide {
|
||||||
|
|
@ -127,9 +126,7 @@
|
||||||
|
|
||||||
:global(.swiper-slide-active) & {
|
:global(.swiper-slide-active) & {
|
||||||
box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
|
box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
|
||||||
transparentize(black, 0.7) 0 5px 5px,
|
transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px;
|
||||||
transparentize(white, 0.95) 0 -1px 2px,
|
|
||||||
transparentize(white, 0.95) 0 -1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include tablet {
|
@include tablet {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
&::after {
|
&::after {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: linear-gradient(transparentize($content_bg, 1), $content_bg);
|
background: linear-gradient(transparent, $content_bg);
|
||||||
border-radius: 0 0 $radius $radius;
|
border-radius: 0 0 $radius $radius;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
font: $font_18_semibold;
|
font: $font_18_semibold;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: darken(white, 75%);
|
color: $gray_75;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
// padding: $gap;
|
|
||||||
//background: transparentize(black, 0.8);
|
|
||||||
border-radius: $panel_radius;
|
border-radius: $panel_radius;
|
||||||
padding: $gap 0;
|
padding: $gap 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
background: lighten($content_bg, 2%) 50% 50% no-repeat;
|
background: $content_bg_light 50% 50% no-repeat;
|
||||||
padding-bottom: 100%;
|
padding-bottom: 100%;
|
||||||
border-radius: $cell_radius;
|
border-radius: $cell_radius;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -29,7 +29,8 @@ div.thumb {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.letters, .title {
|
.letters,
|
||||||
|
.title {
|
||||||
@include outer_shadow;
|
@include outer_shadow;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -41,7 +42,7 @@ div.thumb {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font: $font_24_semibold;
|
font: $font_24_semibold;
|
||||||
color: transparentize(white, 0.5);
|
color: $gray_50;
|
||||||
border-radius: $cell_radius;
|
border-radius: $cell_radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -53,7 +54,7 @@ div.thumb {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: transparentize(white, 0.3);
|
color: $gray_25;
|
||||||
|
|
||||||
.large & {
|
.large & {
|
||||||
font: $font_14_semibold;
|
font: $font_14_semibold;
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
@mixin button {
|
|
||||||
margin: 0 $gap;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: darken(white, 50%);
|
|
||||||
transition: fill 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
svg {
|
|
||||||
fill: $red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: ' ';
|
|
||||||
flex: 0 0 6px;
|
|
||||||
height: $gap;
|
|
||||||
width: 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: transparentize(black, 0.7);
|
|
||||||
margin-left: $gap * 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -75,7 +46,7 @@
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font: $font_12_regular;
|
font: $font_12_regular;
|
||||||
color: transparentize(white, 0.5);
|
color: $gray_50;
|
||||||
text-transform: lowercase;
|
text-transform: lowercase;
|
||||||
|
|
||||||
@include tablet {
|
@include tablet {
|
||||||
|
|
@ -83,40 +54,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
fill: transparentize(white, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mark {
|
|
||||||
flex: 0 0 32px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: ' ';
|
|
||||||
position: absolute;
|
|
||||||
top: -38px;
|
|
||||||
right: 4px;
|
|
||||||
width: 24px;
|
|
||||||
height: 52px;
|
|
||||||
background: $main_gradient;
|
|
||||||
box-shadow: transparentize(black, 0.8) 4px 2px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sep {
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0% {
|
0% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
|
|
@ -154,16 +96,16 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $red;
|
fill: $color_like;
|
||||||
}
|
}
|
||||||
|
|
||||||
.like_count {
|
.like_count {
|
||||||
color: $red;
|
color: $color_like;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
fill: $red;
|
fill: $color_like;
|
||||||
animation: pulse 0.75s infinite;
|
animation: pulse 0.75s infinite;
|
||||||
|
|
||||||
.like_count {
|
.like_count {
|
||||||
|
|
@ -179,11 +121,11 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity 0.25s, color 0.25s;
|
transition: opacity 0.25s, color 0.25s;
|
||||||
background: $node_bg;
|
background: $content_bg_dark;
|
||||||
padding: 0 3px;
|
padding: 0 3px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
color: transparentize($color: white, $amount: 0.5);
|
color: $gray_50;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
touch-action: none;
|
touch-action: none;
|
||||||
}
|
}
|
||||||
|
|
@ -198,6 +140,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
color: white;
|
|
||||||
@include hover_opacity;
|
@include hover_opacity;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
$notification_color: darken($content_bg, 2%);
|
$notification_color: $content_bg_dark;
|
||||||
|
|
||||||
@keyframes appear {
|
@keyframes appear {
|
||||||
0% {
|
0% {
|
||||||
|
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
import React, { FC } from 'react';
|
|
||||||
|
|
||||||
import classNames from 'classnames';
|
|
||||||
|
|
||||||
import { Group } from '~/components/containers/Group';
|
|
||||||
import { ImagePresets } from '~/constants/urls';
|
|
||||||
import markdown from '~/styles/common/markdown.module.scss';
|
|
||||||
import { IMessage } from '~/types';
|
|
||||||
import { formatText, getPrettyDate, getURL } from '~/utils/dom';
|
|
||||||
|
|
||||||
import styles from './styles.module.scss';
|
|
||||||
|
|
||||||
interface IProps {
|
|
||||||
message: IMessage;
|
|
||||||
incoming: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Message: FC<IProps> = ({ message, incoming }) => {
|
|
||||||
return (
|
|
||||||
<div className={classNames(styles.message, { [styles.incoming]: incoming })}>
|
|
||||||
<div className={styles.text}>
|
|
||||||
<Group
|
|
||||||
dangerouslySetInnerHTML={{ __html: formatText(message.text) }}
|
|
||||||
className={markdown.wrapper}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className={styles.avatar}
|
|
||||||
style={{ backgroundImage: `url("${getURL(message.from.photo, ImagePresets.avatar)}")` }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className={styles.stamp}>{getPrettyDate(message.created_at)}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export { Message };
|
|
||||||
|
|
@ -1,100 +0,0 @@
|
||||||
@import "src/styles/variables";
|
|
||||||
|
|
||||||
$incoming_color: transparentize($wisegreen, 0.7);
|
|
||||||
$outgoing_color: $comment_bg;
|
|
||||||
|
|
||||||
.message {
|
|
||||||
align-items: flex-end !important;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
padding: 0 0 0 42px;
|
|
||||||
position: relative;
|
|
||||||
word-break: break-word;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 20px 0 0 20px;
|
|
||||||
border-color: transparent transparent transparent $comment_bg;
|
|
||||||
bottom: 0;
|
|
||||||
right: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.incoming {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
padding: 0 40px 0 0;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
background: $incoming_color;
|
|
||||||
border-radius: $radius $radius $radius 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stamp {
|
|
||||||
left: auto;
|
|
||||||
right: 42px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
border-width: 0 0 16px 16px;
|
|
||||||
border-color: transparent transparent $incoming_color transparent;
|
|
||||||
left: 24px;
|
|
||||||
right: auto;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
flex: 0 0 40px;
|
|
||||||
border-radius: $radius;
|
|
||||||
|
|
||||||
background: 50% 50% no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
padding: $gap $gap $gap * 2 $gap;
|
|
||||||
background: $outgoing_color;
|
|
||||||
word-wrap: break-word;
|
|
||||||
word-break: break-word;
|
|
||||||
width: 100%;
|
|
||||||
border-radius: $radius $radius 0 $radius;
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: $radius $radius 0 $radius;
|
|
||||||
background: $outgoing_color;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stamp {
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0.5;
|
|
||||||
// background: transparentize($color: #000000, $amount: 0.9);
|
|
||||||
font: $font_10_regular;
|
|
||||||
bottom: 0;
|
|
||||||
left: 42px;
|
|
||||||
padding: 2px $gap;
|
|
||||||
border-radius: $radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.restore {
|
|
||||||
color: $red;
|
|
||||||
fill: $red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.deleted {
|
|
||||||
background: mix($red, $content_bg, 50%);
|
|
||||||
border-radius: $radius $radius $radius 0;
|
|
||||||
padding: $gap * 0.5;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
||||||
@include blur($red);
|
@include blur;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,12 @@ export interface ProfileAvatarProps {
|
||||||
onChangePhoto: (file: File) => void;
|
onChangePhoto: (file: File) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit, size }) => {
|
const ProfileAvatar: FC<ProfileAvatarProps> = ({
|
||||||
|
photo,
|
||||||
|
onChangePhoto,
|
||||||
|
canEdit,
|
||||||
|
size,
|
||||||
|
}) => {
|
||||||
const onInputChange = useCallback(
|
const onInputChange = useCallback(
|
||||||
async (event: ChangeEvent<HTMLInputElement>) => {
|
async (event: ChangeEvent<HTMLInputElement>) => {
|
||||||
if (!event.target.files?.length) {
|
if (!event.target.files?.length) {
|
||||||
|
|
@ -23,10 +28,12 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit,
|
||||||
|
|
||||||
onChangePhoto(event.target.files[0]);
|
onChangePhoto(event.target.files[0]);
|
||||||
},
|
},
|
||||||
[onChangePhoto]
|
[onChangePhoto],
|
||||||
);
|
);
|
||||||
|
|
||||||
const backgroundImage = photo ? `url("${getURL(photo, ImagePresets.avatar)}")` : undefined;
|
const backgroundImage = photo
|
||||||
|
? `url("${getURL(photo, ImagePresets.avatar)}")`
|
||||||
|
: undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|
@ -38,7 +45,15 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{canEdit && <input type="file" onInput={onInputChange} />}
|
{canEdit && <input type="file" onInput={onInputChange} />}
|
||||||
{canEdit && <Button iconLeft="photo_add" round iconOnly className={styles.can_edit} />}
|
{canEdit && (
|
||||||
|
<Button
|
||||||
|
color="info"
|
||||||
|
iconLeft="photo_add"
|
||||||
|
round
|
||||||
|
iconOnly
|
||||||
|
className={styles.button}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
@include outer_shadow();
|
@include outer_shadow();
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.can_edit {
|
.button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -4px;
|
right: -4px;
|
||||||
bottom: -4px;
|
bottom: -4px;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: $gap * 2;
|
padding: $gap * 2;
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
min-height: 33vh;
|
min-height: 33vh;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: transparentize($color: white, $amount: 0.8);
|
color: $gray_75;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font: $font_16_semibold;
|
font: $font_16_semibold;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,9 +47,7 @@ const ProfileSidebarSettings: FC<IProps> = () => {
|
||||||
Отмена
|
Отмена
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button color="secondary" type="submit">
|
<Button type="submit">Сохранить</Button>
|
||||||
Сохранить
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
</SettingsProvider>
|
</SettingsProvider>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
.stack {
|
.stack {
|
||||||
background: transparentize($content_bg, 0.2);
|
background: $content_bg_backdrop;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
box-shadow: transparentize(white, 0.9) -1px 0, transparentize(black, 0.7) -5px 0 15px;
|
box-shadow: $gray_90 -1px 0, transparentize(black, 0.7) -5px 0 15px;
|
||||||
border-radius: $radius 0 0 $radius;
|
border-radius: $radius 0 0 $radius;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,6 @@ import React, { FC, FocusEventHandler, useCallback } from 'react';
|
||||||
import { TagWrapper } from '~/components/tags/TagWrapper';
|
import { TagWrapper } from '~/components/tags/TagWrapper';
|
||||||
import { ITag } from '~/types';
|
import { ITag } from '~/types';
|
||||||
|
|
||||||
const getTagFeature = (tag: Partial<ITag>) => {
|
|
||||||
if (tag?.title?.substr(0, 1) === '/') return 'green';
|
|
||||||
|
|
||||||
return '';
|
|
||||||
};
|
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
tag: Partial<ITag>;
|
tag: Partial<ITag>;
|
||||||
size?: 'normal' | 'big';
|
size?: 'normal' | 'big';
|
||||||
|
|
@ -44,9 +38,11 @@ const Tag: FC<IProps> = ({
|
||||||
onDelete(tag.ID!);
|
onDelete(tag.ID!);
|
||||||
}, [onDelete, tag]);
|
}, [onDelete, tag]);
|
||||||
|
|
||||||
|
const isAlbumTag = tag?.title?.substr(0, 1) === '/';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TagWrapper
|
<TagWrapper
|
||||||
feature={getTagFeature(tag)}
|
color={isAlbumTag ? 'primary' : undefined}
|
||||||
size={size}
|
size={size}
|
||||||
deletable={deletable}
|
deletable={deletable}
|
||||||
hoverable={hoverable}
|
hoverable={hoverable}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,12 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
@keyframes appear {
|
@keyframes appear {
|
||||||
0% { opacity: 0 }
|
0% {
|
||||||
100% { opacity: 100 }
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 100;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$row_height: 24px;
|
$row_height: 24px;
|
||||||
|
|
@ -16,7 +20,7 @@ $row_height: 24px;
|
||||||
right: -2px;
|
right: -2px;
|
||||||
width: calc(100vw - 15px);
|
width: calc(100vw - 15px);
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
background: darken($content_bg, 2%);
|
background: $content_bg_dark;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
animation: appear 0.25s forwards;
|
animation: appear 0.25s forwards;
|
||||||
|
|
|
||||||
|
|
@ -9,16 +9,23 @@ import styles from './styles.module.scss';
|
||||||
interface IProps {
|
interface IProps {
|
||||||
selected: boolean;
|
selected: boolean;
|
||||||
title: string;
|
title: string;
|
||||||
type: string;
|
type: 'enter' | 'right' | 'tag';
|
||||||
onSelect: (val: string) => void;
|
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]);
|
const onClick = useCallback(() => onSelect(title), [title, onSelect]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={classNames(styles.row, styles[type], { [styles.selected]: selected })}
|
className={classNames(styles.row, styles[type], {
|
||||||
|
[styles.selected]: selected,
|
||||||
|
})}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
<Icon icon={type} size={16} />
|
<Icon icon={type} size={16} />
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import "src/styles/variables";
|
@import 'src/styles/variables';
|
||||||
|
|
||||||
$row_height: 26px;
|
$row_height: 26px;
|
||||||
|
|
||||||
|
|
@ -16,13 +16,14 @@ $row_height: 26px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&:hover, &.selected {
|
&:hover,
|
||||||
|
&.selected {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background: transparentize($wisegreen, 0.6);
|
background: $content_bg_success;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.right {
|
&.right {
|
||||||
color: lighten($wisegreen, 4%);
|
color: $color_primary;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,8 @@ import { Icon } from '~/components/input/Icon';
|
||||||
import styles from './styles.module.scss';
|
import styles from './styles.module.scss';
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
feature?: string;
|
|
||||||
size?: string;
|
size?: string;
|
||||||
|
color?: 'primary' | 'danger' | 'info' | 'black' | 'default';
|
||||||
deletable?: boolean;
|
deletable?: boolean;
|
||||||
hoverable?: boolean;
|
hoverable?: boolean;
|
||||||
editing?: boolean;
|
editing?: boolean;
|
||||||
|
|
@ -19,8 +19,8 @@ interface IProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
const TagWrapper: FC<IProps> = ({
|
const TagWrapper: FC<IProps> = ({
|
||||||
|
color = 'default',
|
||||||
children,
|
children,
|
||||||
feature,
|
|
||||||
size,
|
size,
|
||||||
deletable,
|
deletable,
|
||||||
hoverable,
|
hoverable,
|
||||||
|
|
@ -32,7 +32,7 @@ const TagWrapper: FC<IProps> = ({
|
||||||
}) => {
|
}) => {
|
||||||
const canBeDeleted = deletable && !editing && !hasInput;
|
const canBeDeleted = deletable && !editing && !hasInput;
|
||||||
const onDeletePress = useCallback(
|
const onDeletePress = useCallback(
|
||||||
event => {
|
(event) => {
|
||||||
if (!onDelete) {
|
if (!onDelete) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -40,18 +40,23 @@ const TagWrapper: FC<IProps> = ({
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
onDelete();
|
onDelete();
|
||||||
},
|
},
|
||||||
[onDelete]
|
[onDelete],
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={classNames(styles.tag, feature, size, {
|
className={classNames(
|
||||||
is_hoverable: hoverable,
|
styles.tag,
|
||||||
is_editing: editing,
|
size && styles[`size-${size}`],
|
||||||
deletable: canBeDeleted,
|
styles[`color-${color}`],
|
||||||
input: hasInput,
|
{
|
||||||
clickable: onClick,
|
[styles.hoverable]: hoverable,
|
||||||
})}
|
[styles.editing]: editing,
|
||||||
|
[styles.deletable]: canBeDeleted,
|
||||||
|
[styles.input]: hasInput,
|
||||||
|
[styles.clickable]: onClick,
|
||||||
|
},
|
||||||
|
)}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
<div className={styles.hole} />
|
<div className={styles.hole} />
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue