mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-30 23:26:40 +07:00
Добавил тему "Веспера"
This commit is contained in:
parent
5d34090238
commit
aee4b662d5
148 changed files with 1331 additions and 1338 deletions
public/images
src/components
auth
login/LoginDialogButtons
oauth/LoginSocialRegisterButtons
restore
RestoreInvalidCode
RestoreSent
RestoreSuccess
bars
boris
BorisContactItem
BorisStatsGitCard
BorisSuperpowers
BorisUIDemo
charts
comment
CommentAvatar
CommentContent
CommentDistance
CommentEmbedBlock
CommentForm
CommentMenu
CommentTextBlock
common
Avatar
CornerMenu
LoadingProgress
MenuDots
ScrollHelperBottom
containers
Card
CommentWrapper
CoverBackdrop
PageCoverProvider
Zone
dialogs
editors
EditorButtons
EditorConfirmClose
EditorPublicSwitch
EditorUploadButton
EditorUploadCoverButton
VideoEditor
flow
CellShade
FlowCell
FlowCellMenu
FlowRecentItem
FlowSearchResults
FlowSwiperHero
HeroPlaceholder
input
ArcProgress
Button
ButtonGroup
Info
InputText
InputWrapper
Toggle
lab
LabBottomPanel
LabHero
LabImage
LabNode
LabNodeTitle
main
media
menu
HorizontalMenu
MenuButton
SeparatedMenu
VerticalMenu
node
CommendDeleted
MenuButton
NodeAuthorBlock
NodeDeletedBadge
NodeImageBlockPlaceholder
NodeImageSwiperBlock
NodeNoComments
NodeRelated
NodeRelatedItem
NodeTitle
notifications/NotificationBubble
profile
Message
ProfileAccountsError
ProfileAvatar
ProfileDescription
ProfileSidebarSettings
sidebar/SidebarStack
tags
Tag
TagAutocomplete
TagAutocompleteRow
TagWrapper
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 (image error) Size: 26 KiB |
Before ![]() (image error) Size: 176 KiB After ![]() (image error) Size: 176 KiB ![]() ![]() |
Before ![]() (image error) Size: 168 KiB After ![]() (image error) Size: 168 KiB ![]() ![]() |
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.footer {
|
||||
padding: $gap;
|
||||
|
|
|
@ -8,7 +8,7 @@ interface IProps {}
|
|||
|
||||
const LoginSocialRegisterButtons: FC<IProps> = () => (
|
||||
<div className={styles.wrap}>
|
||||
<Button color="secondary">Впустите меня!</Button>
|
||||
<Button>Впустите меня!</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.error_shade {
|
||||
@include outer_shadow();
|
||||
|
@ -19,17 +19,17 @@
|
|||
text-transform: uppercase;
|
||||
font: $font_18_semibold;
|
||||
text-align: center;
|
||||
color: $wisegreen;
|
||||
color: $color_primary;
|
||||
|
||||
svg {
|
||||
fill: $wisegreen;
|
||||
fill: $color_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.error_shade {
|
||||
color: $red;
|
||||
color: $color_danger;
|
||||
|
||||
svg {
|
||||
fill: $red;
|
||||
fill: $color_danger;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,9 +18,7 @@ const RestoreSent: VFC<RestoreSentProps> = ({ onClose }) => (
|
|||
|
||||
<div />
|
||||
|
||||
<Button color="secondary" onClick={onClose}>
|
||||
Отлично!
|
||||
</Button>
|
||||
<Button onClick={onClose}>Отлично!</Button>
|
||||
</Group>
|
||||
);
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.shade {
|
||||
@include outer_shadow();
|
||||
|
@ -19,9 +19,9 @@
|
|||
text-transform: uppercase;
|
||||
font: $font_18_semibold;
|
||||
text-align: center;
|
||||
color: $wisegreen;
|
||||
color: $color_primary;
|
||||
|
||||
svg {
|
||||
fill: $wisegreen;
|
||||
fill: $color_primary;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -20,9 +20,7 @@ const RestoreSuccess: VFC<RestoreSuccessProps> = ({ username, onClick }) => (
|
|||
|
||||
<div />
|
||||
|
||||
<Button color="secondary" onClick={onClick}>
|
||||
Ура!
|
||||
</Button>
|
||||
<Button onClick={onClick}>Ура!</Button>
|
||||
</Group>
|
||||
);
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.shade {
|
||||
@include outer_shadow();
|
||||
|
@ -19,9 +19,9 @@
|
|||
text-transform: uppercase;
|
||||
font: $font_18_semibold;
|
||||
text-align: center;
|
||||
color: $wisegreen;
|
||||
color: $color_primary;
|
||||
|
||||
svg {
|
||||
fill: $wisegreen;
|
||||
fill: $color_primary;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.place {
|
||||
position: relative;
|
||||
|
@ -11,11 +11,8 @@
|
|||
@include outer_shadow();
|
||||
display: flex;
|
||||
border-radius: $radius $radius 0 0;
|
||||
// background: $main_gradient;
|
||||
align-items: center;
|
||||
background: lighten($content_bg, 6%);
|
||||
// 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;
|
||||
background: $content_bg_lightest;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
@ -48,7 +45,7 @@
|
|||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: darken(white, 50%);
|
||||
fill: $gray_50;
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
|
@ -71,7 +68,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
font: $font_14_semibold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
@ -91,7 +88,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: darken(white, 50%);
|
||||
background: $gray_50;
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
opacity: 0.5;
|
||||
|
@ -103,7 +100,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: darken(white, 50%);
|
||||
background: $gray_50;
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
position: fixed;
|
||||
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
background: $red_gradient;
|
||||
background: $flow_gradient;
|
||||
width: $bar_height;
|
||||
height: $bar_height;
|
||||
border-radius: $bar_height * 0.5;
|
||||
|
@ -34,12 +34,12 @@
|
|||
}
|
||||
|
||||
.lab & {
|
||||
background: $blue_gradient;
|
||||
background: $info_gradient;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: lighten($content_bg, 4%);
|
||||
background: $content_bg_lighter;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
|
@ -6,7 +6,7 @@
|
|||
align-items: center;
|
||||
justify-content: stretch;
|
||||
text-decoration: none;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
padding: $gap;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
padding: $gap * 0.5 0;
|
||||
|
@ -12,7 +12,7 @@
|
|||
.time {
|
||||
font: $font_12_regular;
|
||||
line-height: 17px;
|
||||
color: transparentize(white, 0.7)
|
||||
color: $gray_75;
|
||||
}
|
||||
|
||||
.subject {
|
||||
|
@ -30,10 +30,10 @@
|
|||
text-transform: uppercase;
|
||||
|
||||
&.open {
|
||||
color: $red;
|
||||
color: $color_offline;
|
||||
}
|
||||
|
||||
&.closed {
|
||||
color: $green;
|
||||
color: $color_online;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: grid;
|
||||
|
@ -16,5 +16,5 @@
|
|||
|
||||
.subtitle {
|
||||
font: $font_12_regular;
|
||||
color: transparentize(white, 0.5);
|
||||
color: $gray_50;
|
||||
}
|
||||
|
|
|
@ -18,8 +18,8 @@ const BorisUIDemo: FC<IProps> = () => {
|
|||
<div className={markdown.wrapper}>
|
||||
<h1>UI</h1>
|
||||
<p>
|
||||
Простая демонстрация элементов интерфейса. Используется, в основном, как подсказка при
|
||||
разработке
|
||||
Простая демонстрация элементов интерфейса. Используется, в основном,
|
||||
как подсказка при разработке
|
||||
</p>
|
||||
|
||||
<h2>Инпуты</h2>
|
||||
|
@ -27,8 +27,18 @@ const BorisUIDemo: FC<IProps> = () => {
|
|||
<form autoComplete="off">
|
||||
<Group>
|
||||
<InputText title="Обычный инпут" handler={setText} value={text} />
|
||||
<InputText title="Инпут с ошибкой" error="Ошибка" handler={setText} value={text} />
|
||||
<InputText title="Пароль" type="password" handler={setText} value={text} />
|
||||
<InputText
|
||||
title="Инпут с ошибкой"
|
||||
error="Ошибка"
|
||||
handler={setText}
|
||||
value={text}
|
||||
/>
|
||||
<InputText
|
||||
title="Пароль"
|
||||
type="password"
|
||||
handler={setText}
|
||||
value={text}
|
||||
/>
|
||||
</Group>
|
||||
</form>
|
||||
|
||||
|
@ -38,7 +48,6 @@ const BorisUIDemo: FC<IProps> = () => {
|
|||
|
||||
<Group horizontal className={styles.sample}>
|
||||
<Button>Primary</Button>
|
||||
<Button color="secondary">Secondary</Button>
|
||||
<Button color="outline">Outline</Button>
|
||||
<Button color="gray">Gray</Button>
|
||||
<Button color="link">Link</Button>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.card {
|
||||
flex: 3;
|
||||
|
@ -6,7 +6,7 @@
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 20px 30px;
|
||||
background-color: lighten($content_bg, 4%);
|
||||
background-color: $content_bg_lighter;
|
||||
}
|
||||
|
||||
.sample {
|
||||
|
|
|
@ -29,15 +29,18 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
|||
(acc, val, index) => [
|
||||
...acc,
|
||||
index === 0
|
||||
? { x: borderGap, y: height - (val / max) * (height - gap * 2) - gap }
|
||||
? {
|
||||
x: borderGap,
|
||||
y: height - (val / max) * (height - gap * 2) - gap,
|
||||
}
|
||||
: {
|
||||
x: ((width - borderGap) / (items.length - 1)) * index,
|
||||
y: height - (val / max) * (height - gap * 2) - gap,
|
||||
},
|
||||
],
|
||||
[]
|
||||
[],
|
||||
),
|
||||
[height, width, items, gap]
|
||||
[height, width, items, gap],
|
||||
);
|
||||
|
||||
if (!points.length) {
|
||||
|
@ -49,20 +52,29 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
|||
{...props}
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
viewBox={`0 0 ${width} ${height * 1.05}`}
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<defs>
|
||||
<filter id="f1" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
|
||||
</filter>
|
||||
|
||||
<filter id="brighter">
|
||||
<feComponentTransfer>
|
||||
<feFuncR type="linear" slope="3" />
|
||||
<feFuncG type="linear" slope="3" />
|
||||
<feFuncB type="linear" slope="3" />
|
||||
</feComponentTransfer>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<path
|
||||
d={makeBezierCurve(points)}
|
||||
fill="none"
|
||||
x={0}
|
||||
y={0}
|
||||
y={gap / 2}
|
||||
opacity={0.5}
|
||||
stroke={stroke}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
|
@ -74,6 +86,7 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
|||
fill="none"
|
||||
x={0}
|
||||
y={0}
|
||||
opacity={0.3}
|
||||
stroke={stroke}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
|
@ -84,9 +97,11 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
|
|||
fill="none"
|
||||
x={0}
|
||||
y={0}
|
||||
stroke={lighten(stroke, 0.1)}
|
||||
stroke={stroke}
|
||||
opacity={1}
|
||||
strokeWidth={1}
|
||||
strokeLinecap="round"
|
||||
filter="url(#brighter)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
|
@ -7,7 +7,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
font: $font_18_semibold;
|
||||
color: transparentize(white, 0.5);
|
||||
color: $gray_50;
|
||||
}
|
||||
|
||||
span.val {
|
||||
|
|
|
@ -15,11 +15,19 @@ interface StatsGraphCardProps extends CardProps {
|
|||
right?: string | number;
|
||||
}
|
||||
|
||||
const StatsGraphCard: VFC<StatsGraphCardProps> = ({ total, title, data, left, right }) => (
|
||||
const StatsGraphCard: VFC<StatsGraphCardProps> = ({
|
||||
total,
|
||||
title,
|
||||
data,
|
||||
left,
|
||||
right,
|
||||
}) => (
|
||||
<StatsCard
|
||||
title={title}
|
||||
total={total}
|
||||
background={<BasicCurveChart items={data} />}
|
||||
background={
|
||||
<BasicCurveChart items={data} stroke={'var(--color_primary)'} />
|
||||
}
|
||||
className={styles.card}
|
||||
>
|
||||
<div className={styles.content}>
|
||||
|
|
|
@ -1,16 +1,20 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
@keyframes appear {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.popper {
|
||||
@include outer_shadow;
|
||||
|
||||
background-color: darken($content_bg, 4%);
|
||||
background-color: $content_bg_darker;
|
||||
padding: $gap;
|
||||
box-sizing:border-box;
|
||||
box-sizing: border-box;
|
||||
touch-action: none;
|
||||
pointer-events: none;
|
||||
border-radius: $radius;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
@import "src/styles/variables";
|
||||
@import "~flexbin/flexbin";
|
||||
@import 'src/styles/variables';
|
||||
@import '~flexbin/flexbin';
|
||||
|
||||
.wrap {
|
||||
@include row_shadow;
|
||||
|
@ -23,7 +23,7 @@
|
|||
touch-action: none;
|
||||
transition: opacity 0.25s, transform 0.25s;
|
||||
cursor: pointer;
|
||||
background: $red;
|
||||
background: $color_danger;
|
||||
z-index: 2;
|
||||
|
||||
& > div {
|
||||
|
@ -46,7 +46,7 @@
|
|||
border-radius: 0 0 0 $radius;
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
background: transparentize($red, $amount: 0.5);
|
||||
background: $content_bg_danger;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -93,9 +93,9 @@
|
|||
padding-bottom: 0 !important;
|
||||
|
||||
.date {
|
||||
background: transparentize($color: $content_bg, $amount: 0.2);
|
||||
background: $content_bg;
|
||||
border-radius: $radius 0 $radius 0;
|
||||
color: transparentize(white, 0.2);
|
||||
color: $gray_25;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -108,10 +108,10 @@
|
|||
bottom: 1px;
|
||||
right: 0;
|
||||
font: $font_12_regular;
|
||||
color: transparentize($color: white, $amount: 0.8);
|
||||
color: $gray_75;
|
||||
padding: 0 6px 2px;
|
||||
z-index: 2;
|
||||
background: $comment_bg;
|
||||
background: $content_bg_light;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.bar {
|
||||
font: $font_12_regular;
|
||||
color: darken(white, 60%);
|
||||
color: $gray_50;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.embed {
|
||||
padding: 0 $gap;
|
||||
|
@ -43,7 +43,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparentize($content_bg, 0.15) 50% 50%;
|
||||
background: $content_bg_backdrop 50% 50%;
|
||||
background-size: cover;
|
||||
z-index: 15;
|
||||
border-radius: $radius;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
@ -21,7 +21,7 @@
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
background: transparentize(black, 0.8);
|
||||
background: $content_bg_dark;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
flex-wrap: wrap;
|
||||
padding: $gap * 0.25;
|
||||
|
@ -49,7 +49,7 @@
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
background: $red;
|
||||
background: $color_danger;
|
||||
z-index: 10;
|
||||
font: $font_12_regular;
|
||||
box-sizing: border-box;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
|
@ -9,12 +9,6 @@
|
|||
z-index: 10;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.dot {
|
||||
background: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
|
@ -57,6 +51,6 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
background: $color_primary;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.text {
|
||||
padding: 0 $gap;
|
||||
|
@ -26,12 +26,12 @@
|
|||
}
|
||||
|
||||
:global(.green) {
|
||||
color: $wisegreen;
|
||||
color: $color_primary;
|
||||
}
|
||||
|
||||
& > :last-child::after {
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
height: 1em;
|
||||
width: 120px;
|
||||
flex: 0 0 120px;
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.avatar {
|
||||
@include outer_shadow;
|
||||
|
||||
width: $comment_height;
|
||||
height: $comment_height;
|
||||
background-color: transparentize(black, 0.9);
|
||||
background-color: $content_bg_dark;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
border-radius: $radius;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
|
@ -9,12 +9,6 @@
|
|||
z-index: 10;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.dot {
|
||||
background: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
|
@ -57,6 +51,6 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
background: $color_primary;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
|
@ -20,7 +20,7 @@
|
|||
z-index: 100;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(90deg, $dark_blue, $soft_blue, $dark_blue);
|
||||
background: $global_loader_gradient;
|
||||
animation: spin infinite 1s linear;
|
||||
}
|
||||
|
||||
|
@ -34,5 +34,5 @@
|
|||
transform: translate(-50%, 0);
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
background: $cyan_gradient;
|
||||
background: $magic_gradient;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
@import "src/styles/variables";
|
||||
@import "src/styles/mixins";
|
||||
@import 'src/styles/variables';
|
||||
@import 'src/styles/mixins';
|
||||
|
||||
.button {
|
||||
width: 48px;
|
||||
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
.dots {
|
||||
@include blur($content_bg, 5px, 0.7);
|
||||
@include blur;
|
||||
|
||||
padding: 5px 0 0 0;
|
||||
background: $content_bg;
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.helper {
|
||||
position: fixed;
|
||||
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;
|
||||
display: none;
|
||||
width: calc(100% - 20px);
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.card {
|
||||
background-color: $card_bg;
|
||||
background-color: $content_bg;
|
||||
border-radius: $panel_radius;
|
||||
padding: $gap;
|
||||
|
||||
|
|
|
@ -1,17 +1,27 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
@keyframes highlight {
|
||||
0% { opacity: 0.75; }
|
||||
25% { opacity: 0.5; }
|
||||
50% { opacity: 0.75; }
|
||||
75% { opacity: 0; }
|
||||
100% { opacity: 0; }
|
||||
0% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
25% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
@include outer_shadow;
|
||||
|
||||
background: $comment_bg;
|
||||
background: $content_bg_light;
|
||||
min-height: $comment_height;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
@ -35,7 +45,6 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
animation: highlight 1s 0.5s forwards;
|
||||
background: transparentize($wisegreen, 0.7);
|
||||
border-radius: $radius;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
@ -64,7 +73,7 @@
|
|||
.thumb {
|
||||
flex: 0 0 $comment_height;
|
||||
border-radius: $panel_radius 0 0 $panel_radius;
|
||||
background-color: transparentize(black, 0.9);
|
||||
background-color: $content_bg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
@ -73,14 +82,15 @@
|
|||
flex-direction: row;
|
||||
flex: 0 0 40px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
div.thumb_image {
|
||||
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;
|
||||
background-size: cover;
|
||||
flex: 0 0 $comment_height;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.cover {
|
||||
position: absolute;
|
||||
|
@ -22,7 +22,7 @@
|
|||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url('../../../sprites/stripes.svg') transparentize($color: #000000, $amount: 0.5);
|
||||
background: url('../../../sprites/stripes.svg') $content_bg_backdrop;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
|
@ -29,7 +29,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../../../sprites/stripes.svg) transparentize($content_bg, 0.2);
|
||||
background: url(../../../sprites/stripes.svg) $content_bg_backdrop;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
$pad_danger: mix($red, $content_bg, 70%);
|
||||
$pad_usual: mix(white, $content_bg, 10%);
|
||||
$pad_usual: $content_bg_lightest;
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
|
@ -19,7 +18,7 @@ $pad_usual: mix(white, $content_bg, 10%);
|
|||
text-transform: uppercase;
|
||||
|
||||
.danger & {
|
||||
background: $pad_danger;
|
||||
background: $content_bg_danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -31,7 +30,7 @@ $pad_usual: mix(white, $content_bg, 10%);
|
|||
position: relative;
|
||||
|
||||
&.danger {
|
||||
box-shadow: inset $pad_danger 0 0 0 2px;
|
||||
box-shadow: inset $content_bg_danger 0 0 0 2px;
|
||||
}
|
||||
|
||||
&.with_title {
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: transparentize(darken($content_bg, 4%), 0.5);
|
||||
background: $content_bg_backdrop;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
@ -42,7 +42,7 @@
|
|||
.footer {
|
||||
@include outer_shadow();
|
||||
|
||||
background: darken($content_bg, 2%);
|
||||
background: $content_bg_dark;
|
||||
}
|
||||
|
||||
.body {
|
||||
|
@ -66,7 +66,7 @@
|
|||
.close {
|
||||
@include outer_shadow;
|
||||
|
||||
background: lighten($content_bg, 4%);
|
||||
background: $content_bg_lighter;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
|
@ -88,7 +88,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $red;
|
||||
background-color: $color_danger;
|
||||
transform: translate(50%, 0) scale(1.25);
|
||||
}
|
||||
|
||||
|
@ -105,7 +105,7 @@
|
|||
width: 100%;
|
||||
height: 40px;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(0deg, $red 50%, transparentize($red, 1));
|
||||
background: linear-gradient(0deg, $color_danger 50%, transparent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
@ -132,7 +132,7 @@
|
|||
|
||||
.shade {
|
||||
position: absolute;
|
||||
background: transparentize($content_bg, 0.3);
|
||||
background: $content_bg_backdrop;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.overlay {
|
||||
@include modal_backdrop();
|
||||
@include blur;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
@ -22,7 +22,7 @@
|
|||
border: none;
|
||||
|
||||
&.active {
|
||||
background: lighten($content_bg, 4%);
|
||||
background: $content_bg_lighter;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -32,7 +32,7 @@ const EditorButtons: FC = () => {
|
|||
<Button
|
||||
title={isTablet ? undefined : 'Сохранить'}
|
||||
iconRight="check"
|
||||
color={values.is_promoted ? 'primary' : 'lab'}
|
||||
color={values.is_promoted ? 'flow' : 'lab'}
|
||||
disabled={isSubmitting}
|
||||
type="submit"
|
||||
/>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
|
@ -10,6 +10,8 @@
|
|||
}
|
||||
|
||||
.wrap {
|
||||
@include blur;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
@ -20,8 +22,6 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: appear 0.25s forwards;
|
||||
|
||||
@include blur();
|
||||
}
|
||||
|
||||
.title {
|
||||
|
@ -37,6 +37,6 @@
|
|||
|
||||
.subtitle {
|
||||
font: $font_12_medium;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
|
|
@ -12,14 +12,14 @@ interface IProps extends IEditorComponentProps {}
|
|||
const EditorPublicSwitch: FC<IProps> = () => {
|
||||
const { values, setFieldValue } = useNodeFormContext();
|
||||
|
||||
const onChange = useCallback(() => setFieldValue('is_promoted', !values.is_promoted), [
|
||||
values.is_promoted,
|
||||
setFieldValue,
|
||||
]);
|
||||
const onChange = useCallback(
|
||||
() => setFieldValue('is_promoted', !values.is_promoted),
|
||||
[values.is_promoted, setFieldValue],
|
||||
);
|
||||
|
||||
return (
|
||||
<Button
|
||||
color={values.is_promoted ? 'primary' : 'lab'}
|
||||
color={values.is_promoted ? 'flow' : 'lab'}
|
||||
type="button"
|
||||
size="giant"
|
||||
label={
|
||||
|
|
|
@ -31,18 +31,25 @@ const EditorUploadButton: FC<IProps> = ({
|
|||
event.preventDefault();
|
||||
|
||||
const files = Array.from(event.target.files || []).filter(
|
||||
file => !type || getFileType(file) === type
|
||||
(file) => !type || getFileType(file) === type,
|
||||
);
|
||||
|
||||
uploadFiles(files);
|
||||
},
|
||||
[type, uploadFiles]
|
||||
[type, uploadFiles],
|
||||
);
|
||||
|
||||
const color = values.is_promoted ? 'primary' : 'lab';
|
||||
const color = values.is_promoted ? 'flow' : 'lab';
|
||||
|
||||
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} />
|
||||
<input type="file" onChange={onInputChange} accept={accept} multiple />
|
||||
</Button>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
@include outer_shadow();
|
||||
|
@ -9,7 +9,7 @@
|
|||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.5s;
|
||||
background: lighten($content_bg, 4%);
|
||||
background: $content_bg_lighter;
|
||||
flex: 0 1 $upload_button_height * 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -68,11 +68,11 @@
|
|||
justify-content: center;
|
||||
box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, rgba(0, 0, 0, 0.3) -1px 0;
|
||||
border-radius: $upload_button_height;
|
||||
background: transparentize($color: lighten($content_bg, 4%), $amount: 0);
|
||||
background: $content_bg_lighter;
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $red;
|
||||
fill: $color_danger;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.preview {
|
||||
padding-top: 56.25%;
|
||||
|
@ -6,7 +6,6 @@
|
|||
border-radius: $radius;
|
||||
background: 50% 50% no-repeat;
|
||||
background-size: cover;
|
||||
// background: darken($color: $content_bg, $amount: 2%);
|
||||
}
|
||||
|
||||
.input_wrap {
|
||||
|
@ -34,6 +33,6 @@
|
|||
}
|
||||
|
||||
&:global(.active) {
|
||||
background: $red;
|
||||
background: $color_danger;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.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;
|
||||
touch-action: none;
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.cell {
|
||||
@include inner_shadow;
|
||||
|
@ -57,13 +57,11 @@
|
|||
.quadro &,
|
||||
.horizontal & {
|
||||
max-width: calc(50% - 15px);
|
||||
@include blur(transparentize($content_bg, 0), 10px, 0.5)
|
||||
}
|
||||
|
||||
.quadro &,
|
||||
.vertical & {
|
||||
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 {
|
||||
@include outer_shadow;
|
||||
@include blur($red, 15px, 0.3);
|
||||
@include blur($content_bg_info);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
|
@ -30,7 +30,7 @@
|
|||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
background: $red;
|
||||
background: $color_danger;
|
||||
box-shadow: $content_bg 0 0 0 5px;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
|
@ -40,7 +40,7 @@
|
|||
|
||||
&.lab {
|
||||
&::after {
|
||||
background: $blue;
|
||||
background: $color_lab;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -61,7 +61,7 @@
|
|||
.comment {
|
||||
font: $font_12_regular;
|
||||
margin-top: 4px;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
flex: 1;
|
||||
|
@ -12,7 +12,7 @@
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
opacity: 0.3;
|
||||
fill: transparentize(white, 0.7);
|
||||
fill: $gray_75;
|
||||
stroke: none;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
background: url('../../../sprites/stripes.svg') rgba(0, 0, 0, 0.3);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
box-shadow: inset transparentize($color: white, $amount: 0.85) 0 1px;
|
||||
box-shadow: inset $gray_90 0 1px;
|
||||
touch-action: none;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
@ -58,11 +58,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
182deg,
|
||||
transparentize($cell_shade, 1) 50%,
|
||||
transparentize($cell_shade, 0) 95%
|
||||
);
|
||||
background: linear-gradient(182deg, transparent 50%, $content_bg 95%);
|
||||
z-index: 4;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
@ -76,8 +72,7 @@ img.preview {
|
|||
opacity: 0;
|
||||
|
||||
:global(.swiper-slide-active) &,
|
||||
:global(.swiper-slide-duplicate-active) &
|
||||
{
|
||||
:global(.swiper-slide-duplicate-active) & {
|
||||
transform: translate(-15%, -20%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
@ -164,5 +159,5 @@ img.preview {
|
|||
display: flex;
|
||||
align-items: 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 {
|
||||
height: 280px;
|
||||
width: 100%;
|
||||
background: transparentize(white, 0.9)
|
||||
url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg') no-repeat 50% 30%;
|
||||
background: $gray_90
|
||||
url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg')
|
||||
no-repeat 50% 30%;
|
||||
background-size: cover;
|
||||
opacity: 0.7;
|
||||
will-change: transform;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.icon {
|
||||
fill: $red;
|
||||
fill: $color_danger;
|
||||
stroke: none;
|
||||
|
||||
//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 classnames from 'classnames';
|
||||
|
@ -14,7 +20,17 @@ type IButtonProps = DetailedHTMLProps<
|
|||
HTMLButtonElement
|
||||
> & {
|
||||
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;
|
||||
iconRight?: IIcon;
|
||||
title?: string;
|
||||
|
@ -65,7 +81,7 @@ const Button: FC<IButtonProps> = memo(
|
|||
children,
|
||||
iconOnly,
|
||||
round,
|
||||
]
|
||||
],
|
||||
);
|
||||
|
||||
const loaderSize = useMemo(() => {
|
||||
|
@ -79,9 +95,23 @@ const Button: FC<IButtonProps> = memo(
|
|||
return (
|
||||
<Tippy content={label || ''} disabled={!label}>
|
||||
<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}
|
||||
{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 && (
|
||||
<div className={styles.loading}>
|
||||
<LoaderCircle size={loaderSize} />
|
||||
|
@ -90,7 +120,7 @@ const Button: FC<IButtonProps> = memo(
|
|||
</button>
|
||||
</Tippy>
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
export { Button };
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
|
@ -25,7 +25,7 @@
|
|||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
||||
background: $button_bg_color;
|
||||
background: $color_primary;
|
||||
border-radius: $radius;
|
||||
|
||||
fill: white;
|
||||
|
@ -36,7 +36,8 @@
|
|||
align-items: 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 {
|
||||
position: absolute;
|
||||
|
@ -68,10 +69,6 @@
|
|||
&:global(.disabled) {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.stretchy) {
|
||||
|
@ -81,7 +78,7 @@
|
|||
|
||||
&:global(.disabled),
|
||||
&:global(.grey) {
|
||||
background: transparentize(white, 0.9);
|
||||
background: $gray_90;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
@ -117,26 +114,26 @@
|
|||
|
||||
&.outline {
|
||||
background: transparent;
|
||||
box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
|
||||
color: transparentize(white, 0.8);
|
||||
box-shadow: inset $gray_75 0 0 0 2px;
|
||||
color: $gray_75;
|
||||
|
||||
svg {
|
||||
fill: transparentize(white, 0.8);
|
||||
fill: $gray_75;
|
||||
}
|
||||
}
|
||||
|
||||
&.outline-white {
|
||||
background: transparent;
|
||||
box-shadow: inset transparentize(white, 0) 0 0 0 2px;
|
||||
color: transparentize(white, 0);
|
||||
box-shadow: inset $white 0 0 0 2px;
|
||||
color: $white;
|
||||
|
||||
svg {
|
||||
fill: transparentize(white, 0);
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.gray {
|
||||
background: lighten($content_bg, 8%);
|
||||
background: $content_bg_lightest;
|
||||
}
|
||||
|
||||
&.link {
|
||||
|
@ -233,22 +230,31 @@
|
|||
|
||||
.primary {
|
||||
@include outer_shadow;
|
||||
background: $red_gradient_alt;
|
||||
background: $primary_gradient;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
.danger {
|
||||
@include outer_shadow;
|
||||
background: $green_gradient;
|
||||
background: $danger_gradient;
|
||||
}
|
||||
|
||||
.info {
|
||||
@include outer_shadow;
|
||||
background: $info_gradient;
|
||||
}
|
||||
|
||||
.lab {
|
||||
background: $blue;
|
||||
background: $lab_gradient;
|
||||
}
|
||||
|
||||
.flow {
|
||||
background: $flow_gradient;
|
||||
}
|
||||
|
||||
.flat {
|
||||
box-shadow: none;
|
||||
background: $comment_bg;
|
||||
color: darken(white, 20%);
|
||||
background: $content_bg_light;
|
||||
color: $gray_25;
|
||||
}
|
||||
|
||||
.loading {
|
||||
|
@ -260,5 +266,5 @@
|
|||
display: flex;
|
||||
align-items: 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 {
|
||||
display: flex;
|
||||
|
@ -6,7 +6,6 @@
|
|||
|
||||
& > * {
|
||||
border-radius: 0;
|
||||
box-shadow: transparentize($color: #000000, $amount: 0.1) 1px 0;
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $radius $radius 0;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.container {
|
||||
min-height: $info_height;
|
||||
|
@ -6,23 +6,23 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $text_small;
|
||||
font: $font_14_regular;
|
||||
line-height: 1.2em;
|
||||
padding: $gap;
|
||||
background: transparentize(white, 0.9);
|
||||
background: $gray_90;
|
||||
|
||||
&:global(.danger) {
|
||||
color: white;
|
||||
background: transparentize($red, 0.5);
|
||||
background: $content_bg_danger;
|
||||
}
|
||||
|
||||
&:global(.warning) {
|
||||
color: white;
|
||||
background: transparentize($red, 0.5);
|
||||
background: $content_bg_danger;
|
||||
}
|
||||
|
||||
&:global(.primary) {
|
||||
color: white;
|
||||
background: transparentize($red, 0.5);
|
||||
background: $content_bg_danger;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
|
@ -6,7 +6,7 @@
|
|||
color: inherit;
|
||||
|
||||
&.has_error {
|
||||
color: $red;
|
||||
color: $color_danger;
|
||||
}
|
||||
|
||||
&.has_prefix {
|
||||
|
@ -29,7 +29,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.suffix, .prefix{
|
||||
.suffix,
|
||||
.prefix {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
|
||||
|
|
|
@ -17,11 +17,12 @@
|
|||
}
|
||||
|
||||
&.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;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
|
@ -37,7 +38,7 @@
|
|||
padding: 0 $gap * 0.5;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
background-color: $red;
|
||||
background-color: $content_bg_danger;
|
||||
bottom: 0;
|
||||
right: $gap * 0.5;
|
||||
transform: translate(0, 50%);
|
||||
|
@ -57,12 +58,14 @@
|
|||
color: $input_grey_color;
|
||||
text-transform: uppercase;
|
||||
|
||||
.focused &, .not_empty & {
|
||||
.focused &,
|
||||
.not_empty & {
|
||||
transform: translate(0, -100%) scale(0.75);
|
||||
}
|
||||
|
||||
.focused.has_error &, .not_empty.has_error & {
|
||||
.focused.has_error &,
|
||||
.not_empty.has_error & {
|
||||
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 {
|
||||
height: 24px;
|
||||
width: 48px;
|
||||
flex: 0 0 48px;
|
||||
border-radius: 12px;
|
||||
background-color: transparentize(white, 0.9);
|
||||
background-color: $gray_90;
|
||||
display: flex;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
@ -33,7 +33,7 @@
|
|||
height: 18px;
|
||||
width: 18px;
|
||||
border-radius: 11px;
|
||||
background-color: darken(white, 50%);
|
||||
background-color: $gray_50;
|
||||
transform: translate(0, 0);
|
||||
transition: transform 0.25s, color 0.25s, background-color;
|
||||
}
|
||||
|
@ -45,19 +45,19 @@
|
|||
}
|
||||
|
||||
&.primary {
|
||||
background-color: $wisegreen;
|
||||
background-color: $color_primary;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: transparentize(white, 0.85);
|
||||
background-color: $gray_90;
|
||||
}
|
||||
|
||||
&.lab {
|
||||
background-color: $blue;
|
||||
background-color: $color_lab;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: $red;
|
||||
background-color: $color_danger;
|
||||
}
|
||||
|
||||
&.monochrome {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.wrap {
|
||||
padding: $gap $lab_gap $lab_gap;
|
||||
|
@ -10,13 +10,14 @@
|
|||
|
||||
.timestamp {
|
||||
font: $font_12_regular;
|
||||
color: darken(white, 40%);
|
||||
color: $gray_50;
|
||||
}
|
||||
|
||||
.comments, .like {
|
||||
.comments,
|
||||
.like {
|
||||
flex: 0;
|
||||
font: $font_16_semibold;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
fill: currentColor;
|
||||
stroke: none;
|
||||
column-gap: $gap !important;
|
||||
|
@ -25,6 +26,6 @@
|
|||
padding-left: $gap;
|
||||
|
||||
&.active {
|
||||
color: $red;
|
||||
color: $color_danger;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.wrap {
|
||||
min-width: 0;
|
||||
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
.star {
|
||||
fill: darken(white, 76%);
|
||||
fill: $gray_75;
|
||||
flex: 0 0 32px;
|
||||
}
|
||||
|
||||
|
@ -16,14 +16,14 @@
|
|||
text-overflow: ellipsis;
|
||||
line-height: 22px;
|
||||
word-break: break-all;
|
||||
color: darken(white, 40%);
|
||||
color: $gray_50;
|
||||
|
||||
@include clamp(2, 22px)
|
||||
@include clamp(2, 22px);
|
||||
}
|
||||
|
||||
.description {
|
||||
font: $font_10_regular;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
|
@ -21,7 +21,6 @@
|
|||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.slide {
|
||||
|
@ -52,14 +51,6 @@
|
|||
max-height: calc(100vh - 70px - 70px);
|
||||
max-width: 100%;
|
||||
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 {
|
||||
padding-bottom: 0;
|
||||
|
|
|
@ -1,16 +1,12 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.wrap {
|
||||
@include outer_shadow;
|
||||
|
||||
position: relative;
|
||||
background-color: $lab_post_bg;
|
||||
background-color: $content_bg;
|
||||
cursor: pointer;
|
||||
|
||||
min-width: 0;
|
||||
border-radius: $radius;
|
||||
|
||||
&.heroic {
|
||||
@include hero_gradient;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.wrap {
|
||||
padding: $lab_gap - $gap $lab_gap 0;
|
||||
|
@ -30,6 +30,6 @@
|
|||
}
|
||||
|
||||
.star {
|
||||
fill: darken(white, 50%);
|
||||
fill: $gray_50;
|
||||
flex: 0 0 24px;
|
||||
}
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font: $font_12_semibold;
|
||||
background: transparentize(black, 0.9);
|
||||
background: $content_bg_dark;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
color: darken(white, 80%);
|
||||
color: $gray_75;
|
||||
padding-top: 2px;
|
||||
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 {
|
||||
position: relative;
|
||||
|
@ -30,7 +30,7 @@
|
|||
background: white;
|
||||
border-radius: $radius;
|
||||
margin-left: ($gap + 2px) !important;
|
||||
background: 50% 50% no-repeat $wisegreen;
|
||||
background: 50% 50% no-repeat $color_primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
@ -21,8 +21,8 @@
|
|||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: transparentize($color: white, $amount: 0.5);
|
||||
stroke: transparentize($color: white, $amount: 0.5);
|
||||
fill: $gray_50;
|
||||
stroke: $gray_50;
|
||||
transition: fill 250ms, stroke 250ms;
|
||||
}
|
||||
|
||||
|
@ -67,7 +67,7 @@
|
|||
opacity: 1;
|
||||
font-size: 12px;
|
||||
padding-right: 140px;
|
||||
color: transparentize(white, 0.7);
|
||||
color: $gray_75;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -92,7 +92,7 @@
|
|||
position: absolute;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background: transparentize(white, 0.95);
|
||||
background: $gray_90;
|
||||
width: 100%;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
|
@ -100,8 +100,7 @@
|
|||
}
|
||||
|
||||
.bar {
|
||||
// background: linear-gradient(270deg, $green, $wisegreen);
|
||||
background: $main_gradient;
|
||||
background: $primary_gradient;
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
left: 0;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
img.image {
|
||||
position: absolute;
|
||||
|
@ -47,14 +47,14 @@ img.image {
|
|||
right: 30px;
|
||||
bottom: 40px;
|
||||
opacity: 0.4;
|
||||
color: $orange;
|
||||
color: $color_offline;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: $orange;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
&__text {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.menu {
|
||||
@include inner_shadow;
|
||||
|
@ -21,9 +21,9 @@
|
|||
|
||||
.item {
|
||||
flex: 0 0 auto;
|
||||
padding: $gap * 0.5 $gap $gap * 0.5 $gap;
|
||||
padding: $gap * 0.5 $gap $gap * 0.5 $gap;
|
||||
fill: currentColor;
|
||||
color: darken(white, 50%);
|
||||
color: $gray_50;
|
||||
transition: color 0.25s;
|
||||
cursor: pointer;
|
||||
border-radius: $radius;
|
||||
|
@ -46,15 +46,15 @@
|
|||
color: white;
|
||||
|
||||
&.green {
|
||||
background: $green_gradient;
|
||||
background: $primary_gradient;
|
||||
}
|
||||
|
||||
&.orange {
|
||||
background: $red_gradient;
|
||||
background: $danger_gradient;
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
background: $yellow_gradient;
|
||||
background: $warning_gradient;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
|
@ -14,7 +14,7 @@
|
|||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
background-color: transparentize($content_bg, 0.05);
|
||||
background-color: $content_bg_backdrop;
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
|
||||
&.translucent {
|
||||
@include blur($content_bg, 15px, 0.5);
|
||||
@include blur;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
@import "src/styles/mixins";
|
||||
@import "src/styles/variables";
|
||||
@import 'src/styles/mixins';
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.menu {
|
||||
flex: 0;
|
||||
|
@ -27,14 +27,14 @@
|
|||
position: absolute;
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: darken($content_bg, 1%);
|
||||
background: $content_bg_darker;
|
||||
display: flex;
|
||||
top: 5px;
|
||||
right: -$gap * 2 - 2px;
|
||||
border-radius: 2px;
|
||||
|
||||
@include tablet {
|
||||
right : -$gap - 1px;
|
||||
right: -$gap - 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
@import "src/styles/variables";
|
||||
@import "src/styles/mixins";
|
||||
@import 'src/styles/variables';
|
||||
@import 'src/styles/mixins';
|
||||
|
||||
.menu {
|
||||
border-radius: $radius;
|
||||
|
@ -30,11 +30,11 @@ a.item {
|
|||
padding: $gap;
|
||||
font: $font_16_semibold;
|
||||
cursor: pointer;
|
||||
background-color: transparentize($secondary, 1);
|
||||
background-color: transparent;
|
||||
transition: background-color 0.25s;
|
||||
|
||||
&:hover {
|
||||
background-color: transparentize($secondary, 0.5);
|
||||
background-color: $content_bg_success;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
@ -15,9 +15,9 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
color: $red !important;
|
||||
color: $color_danger !important;
|
||||
|
||||
svg {
|
||||
fill: $red !important;
|
||||
fill: $color_danger !important;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.button {
|
||||
fill: white;
|
||||
|
@ -24,6 +24,6 @@
|
|||
|
||||
.description {
|
||||
font: $font_12_regular;
|
||||
color: transparentize(white, 0.6);
|
||||
color: $gray_75;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
div.block {
|
||||
@include inner_shadow_active;
|
||||
|
||||
cursor: pointer;
|
||||
background: $inset_bg;
|
||||
background: linear-gradient(135deg, $content_bg_dark, $content_bg);
|
||||
padding: $gap;
|
||||
border-radius: $radius;
|
||||
display: flex;
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.badge {
|
||||
padding: $gap;
|
||||
text-align: center;
|
||||
border-radius: $radius;
|
||||
color: $red;
|
||||
color: $color_danger;
|
||||
padding: $gap * 4 $gap;
|
||||
text-transform: uppercase;
|
||||
font: $font_18_semibold;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.placeholder {
|
||||
height: 320px;
|
||||
background: transparentize(black, 0.8);
|
||||
background: $content_bg_dark;
|
||||
border: $radius $radius 0 0;
|
||||
@include outer_shadow();
|
||||
|
||||
|
@ -11,6 +11,6 @@
|
|||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: transparentize(white, 0.95);
|
||||
fill: $gray_90;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables.scss";
|
||||
@import 'src/styles/variables.scss';
|
||||
|
||||
.wrapper {
|
||||
border-radius: $radius;
|
||||
|
@ -15,7 +15,7 @@
|
|||
left: 50%;
|
||||
bottom: $gap * 2;
|
||||
transform: translate(-50%, 0);
|
||||
background: darken($content_bg, 4%);
|
||||
background: $content_bg_darker;
|
||||
width: auto;
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
|
@ -82,7 +82,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.slide.slide {
|
||||
|
@ -127,9 +126,7 @@
|
|||
|
||||
: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;
|
||||
transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
user-select: none;
|
||||
|
@ -9,7 +9,7 @@
|
|||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
background: linear-gradient(transparentize($content_bg, 1), $content_bg);
|
||||
background: linear-gradient(transparent, $content_bg);
|
||||
border-radius: 0 0 $radius $radius;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
|
@ -49,7 +49,7 @@
|
|||
transform: translate(-50%, -50%);
|
||||
font: $font_18_semibold;
|
||||
text-transform: uppercase;
|
||||
color: darken(white, 75%);
|
||||
color: $gray_75;
|
||||
height: 20px;
|
||||
margin-top: 0 !important;
|
||||
text-align: center;
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
// padding: $gap;
|
||||
//background: transparentize(black, 0.8);
|
||||
border-radius: $panel_radius;
|
||||
padding: $gap 0;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.item {
|
||||
background: lighten($content_bg, 2%) 50% 50% no-repeat;
|
||||
background: $content_bg_light 50% 50% no-repeat;
|
||||
padding-bottom: 100%;
|
||||
border-radius: $cell_radius;
|
||||
cursor: pointer;
|
||||
|
@ -29,7 +29,8 @@ div.thumb {
|
|||
}
|
||||
}
|
||||
|
||||
.letters, .title {
|
||||
.letters,
|
||||
.title {
|
||||
@include outer_shadow;
|
||||
|
||||
position: absolute;
|
||||
|
@ -41,7 +42,7 @@ div.thumb {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
font: $font_24_semibold;
|
||||
color: transparentize(white, 0.5);
|
||||
color: $gray_50;
|
||||
border-radius: $cell_radius;
|
||||
}
|
||||
|
||||
|
@ -53,7 +54,7 @@ div.thumb {
|
|||
justify-content: flex-start;
|
||||
word-break: break-word;
|
||||
overflow: hidden;
|
||||
color: transparentize(white, 0.3);
|
||||
color: $gray_25;
|
||||
|
||||
.large & {
|
||||
font: $font_14_semibold;
|
||||
|
|
|
@ -1,33 +1,4 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
|
@ -75,7 +46,7 @@
|
|||
|
||||
.name {
|
||||
font: $font_12_regular;
|
||||
color: transparentize(white, 0.5);
|
||||
color: $gray_50;
|
||||
text-transform: lowercase;
|
||||
|
||||
@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 {
|
||||
flex: 1;
|
||||
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 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
|
@ -154,16 +96,16 @@
|
|||
opacity: 1;
|
||||
|
||||
svg {
|
||||
fill: $red;
|
||||
fill: $color_like;
|
||||
}
|
||||
|
||||
.like_count {
|
||||
color: $red;
|
||||
color: $color_like;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
fill: $red;
|
||||
fill: $color_like;
|
||||
animation: pulse 0.75s infinite;
|
||||
|
||||
.like_count {
|
||||
|
@ -179,11 +121,11 @@
|
|||
bottom: 0;
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s, color 0.25s;
|
||||
background: $node_bg;
|
||||
background: $content_bg_dark;
|
||||
padding: 0 3px;
|
||||
border-radius: 10px;
|
||||
z-index: 3;
|
||||
color: transparentize($color: white, $amount: 0.5);
|
||||
color: $gray_50;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
@ -198,6 +140,7 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
color: white;
|
||||
@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 {
|
||||
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 {
|
||||
position: absolute;
|
||||
|
@ -15,7 +15,7 @@
|
|||
box-sizing: border-box;
|
||||
border-radius: $radius;
|
||||
|
||||
@include blur($red);
|
||||
@include blur;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
@ -14,7 +14,12 @@ export interface ProfileAvatarProps {
|
|||
onChangePhoto: (file: File) => void;
|
||||
}
|
||||
|
||||
const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit, size }) => {
|
||||
const ProfileAvatar: FC<ProfileAvatarProps> = ({
|
||||
photo,
|
||||
onChangePhoto,
|
||||
canEdit,
|
||||
size,
|
||||
}) => {
|
||||
const onInputChange = useCallback(
|
||||
async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (!event.target.files?.length) {
|
||||
|
@ -23,10 +28,12 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit,
|
|||
|
||||
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 (
|
||||
<div
|
||||
|
@ -38,7 +45,15 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit,
|
|||
}}
|
||||
>
|
||||
{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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.avatar {
|
||||
@include outer_shadow();
|
||||
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.can_edit {
|
||||
.button {
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.content {
|
||||
padding: $gap * 2;
|
||||
|
@ -17,7 +17,7 @@
|
|||
min-height: 33vh;
|
||||
padding: 40px;
|
||||
box-sizing: border-box;
|
||||
color: transparentize($color: white, $amount: 0.8);
|
||||
color: $gray_75;
|
||||
text-transform: uppercase;
|
||||
font: $font_16_semibold;
|
||||
}
|
||||
|
|
|
@ -47,9 +47,7 @@ const ProfileSidebarSettings: FC<IProps> = () => {
|
|||
Отмена
|
||||
</Button>
|
||||
|
||||
<Button color="secondary" type="submit">
|
||||
Сохранить
|
||||
</Button>
|
||||
<Button type="submit">Сохранить</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</SettingsProvider>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
.stack {
|
||||
background: transparentize($content_bg, 0.2);
|
||||
background: $content_bg_backdrop;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
width: auto;
|
||||
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
.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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
@ -3,12 +3,6 @@ import React, { FC, FocusEventHandler, useCallback } from 'react';
|
|||
import { TagWrapper } from '~/components/tags/TagWrapper';
|
||||
import { ITag } from '~/types';
|
||||
|
||||
const getTagFeature = (tag: Partial<ITag>) => {
|
||||
if (tag?.title?.substr(0, 1) === '/') return 'green';
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
interface IProps {
|
||||
tag: Partial<ITag>;
|
||||
size?: 'normal' | 'big';
|
||||
|
@ -44,9 +38,11 @@ const Tag: FC<IProps> = ({
|
|||
onDelete(tag.ID!);
|
||||
}, [onDelete, tag]);
|
||||
|
||||
const isAlbumTag = tag?.title?.substr(0, 1) === '/';
|
||||
|
||||
return (
|
||||
<TagWrapper
|
||||
feature={getTagFeature(tag)}
|
||||
color={isAlbumTag ? 'primary' : undefined}
|
||||
size={size}
|
||||
deletable={deletable}
|
||||
hoverable={hoverable}
|
||||
|
|
|
@ -1,8 +1,12 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
@keyframes appear {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 100 }
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 100;
|
||||
}
|
||||
}
|
||||
|
||||
$row_height: 24px;
|
||||
|
@ -16,7 +20,7 @@ $row_height: 24px;
|
|||
right: -2px;
|
||||
width: calc(100vw - 15px);
|
||||
max-width: 300px;
|
||||
background: darken($content_bg, 2%);
|
||||
background: $content_bg_dark;
|
||||
z-index: 10;
|
||||
border-radius: 4px;
|
||||
animation: appear 0.25s forwards;
|
||||
|
|
|
@ -9,16 +9,23 @@ import styles from './styles.module.scss';
|
|||
interface IProps {
|
||||
selected: boolean;
|
||||
title: string;
|
||||
type: string;
|
||||
type: 'enter' | 'right' | 'tag';
|
||||
onSelect: (val: string) => void;
|
||||
}
|
||||
|
||||
const TagAutocompleteRow: FC<IProps> = ({ selected, type, title, onSelect }) => {
|
||||
const TagAutocompleteRow: FC<IProps> = ({
|
||||
selected,
|
||||
type,
|
||||
title,
|
||||
onSelect,
|
||||
}) => {
|
||||
const onClick = useCallback(() => onSelect(title), [title, onSelect]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.row, styles[type], { [styles.selected]: selected })}
|
||||
className={classNames(styles.row, styles[type], {
|
||||
[styles.selected]: selected,
|
||||
})}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Icon icon={type} size={16} />
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "src/styles/variables";
|
||||
@import 'src/styles/variables';
|
||||
|
||||
$row_height: 26px;
|
||||
|
||||
|
@ -16,13 +16,14 @@ $row_height: 26px;
|
|||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover, &.selected {
|
||||
&:hover,
|
||||
&.selected {
|
||||
opacity: 1;
|
||||
background: transparentize($wisegreen, 0.6);
|
||||
background: $content_bg_success;
|
||||
}
|
||||
|
||||
&.right {
|
||||
color: lighten($wisegreen, 4%);
|
||||
color: $color_primary;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
|
@ -7,8 +7,8 @@ import { Icon } from '~/components/input/Icon';
|
|||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {
|
||||
feature?: string;
|
||||
size?: string;
|
||||
color?: 'primary' | 'danger' | 'info' | 'black' | 'default';
|
||||
deletable?: boolean;
|
||||
hoverable?: boolean;
|
||||
editing?: boolean;
|
||||
|
@ -19,8 +19,8 @@ interface IProps {
|
|||
}
|
||||
|
||||
const TagWrapper: FC<IProps> = ({
|
||||
color = 'default',
|
||||
children,
|
||||
feature,
|
||||
size,
|
||||
deletable,
|
||||
hoverable,
|
||||
|
@ -32,7 +32,7 @@ const TagWrapper: FC<IProps> = ({
|
|||
}) => {
|
||||
const canBeDeleted = deletable && !editing && !hasInput;
|
||||
const onDeletePress = useCallback(
|
||||
event => {
|
||||
(event) => {
|
||||
if (!onDelete) {
|
||||
return;
|
||||
}
|
||||
|
@ -40,18 +40,23 @@ const TagWrapper: FC<IProps> = ({
|
|||
event.stopPropagation();
|
||||
onDelete();
|
||||
},
|
||||
[onDelete]
|
||||
[onDelete],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.tag, feature, size, {
|
||||
is_hoverable: hoverable,
|
||||
is_editing: editing,
|
||||
deletable: canBeDeleted,
|
||||
input: hasInput,
|
||||
clickable: onClick,
|
||||
})}
|
||||
className={classNames(
|
||||
styles.tag,
|
||||
size && styles[`size-${size}`],
|
||||
styles[`color-${color}`],
|
||||
{
|
||||
[styles.hoverable]: hoverable,
|
||||
[styles.editing]: editing,
|
||||
[styles.deletable]: canBeDeleted,
|
||||
[styles.input]: hasInput,
|
||||
[styles.clickable]: onClick,
|
||||
},
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className={styles.hole} />
|
||||
|
|
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